/* ===========================================================================
   ABRAMUSHKIN — дизайн-система сайта
   Тёмный чертёж + маршрут проекта. Одна точка смелости — линия маршрута.
   Правки палитры и шкалы делать ТОЛЬКО здесь, страницы токены не переопределяют.
   =========================================================================== */

/* --- Шрифты. Файлы лежат в assets/fonts/, пути относительно этого CSS ------ */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Unbounded-700-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Unbounded-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Onest-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Onest-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/Onest-600-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/Onest-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/JetBrainsMono-400-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/JetBrainsMono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --- Токены ---------------------------------------------------------------- */
:root{
  /* Грунт: сине-графитовый, не чёрный. Нейтрали смещены в сторону акцента. */
  --ground:#0E1A2B;
  --ground-deep:#0A1420;
  --surface:#142234;
  --surface-hi:#1B2C41;
  --line:#25384F;
  --line-soft:rgba(127,212,245,.10);

  --ink:#E9F0F7;
  --ink-mid:#A9BBCC;
  --ink-dim:#748699;

  --accent:#7FD4F5;
  --accent-deep:#3EA8D0;
  --accent-glow:rgba(127,212,245,.16);

  --ok:#7FD4A0;
  --warn:#E8C07F;

  --step:8px;
  --gutter:clamp(20px,5vw,64px);
  --measure:66ch;
  --radius:2px;              /* почти нулевой — чертёж, а не карточки */
  --rule:1px solid var(--line);

  --t-fast:.18s cubic-bezier(.2,.7,.3,1);
  --t-slow:.6s cubic-bezier(.2,.7,.3,1);

  --font-display:'Unbounded','Segoe UI',system-ui,sans-serif;
  --font-body:'Onest','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Consolas',ui-monospace,monospace;
}

/* Сайт намеренно однотемный: тёмный чертёж — это выбор, а не упущение.
   Светлую схему не поддерживаем, но объявляем, чтобы браузер не инвертировал формы. */
:root{color-scheme:dark}

/* --- База ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:400 clamp(15px,.4vw + 14px,17px)/1.65 var(--font-body);
  font-feature-settings:'liga' 1,'kern' 1;
}
/* Чертёжная сетка на всём полотне — фон, а не декор поверх контента */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 0%,#000 20%,transparent 75%);
}
body>*{position:relative;z-index:1}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius)}
::selection{background:var(--accent);color:var(--ground-deep)}

/* --- Типографика ----------------------------------------------------------- */
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08;
  letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(30px,5.2vw,62px)}
h2{font-size:clamp(24px,3.4vw,40px)}
h3{font-size:clamp(18px,1.6vw,23px);letter-spacing:-.01em}
p{margin:0;max-width:var(--measure)}

.eyebrow{
  font:400 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:24px;height:1px;background:var(--accent);opacity:.6}

.lead{font-size:clamp(17px,1.2vw,20px);color:var(--ink-mid);line-height:1.6}
.dim{color:var(--ink-dim)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* --- Раскладка -------------------------------------------------------------- */
.wrap{width:min(1240px,100% - var(--gutter)*2);margin-inline:auto}
.section{padding-block:clamp(56px,8vw,120px)}
.section--tight{padding-block:clamp(40px,5vw,72px)}
.stack{display:flex;flex-direction:column;gap:calc(var(--step)*3)}
.stack--lg{gap:calc(var(--step)*6)}
.head{display:flex;flex-direction:column;gap:calc(var(--step)*2);margin-bottom:calc(var(--step)*6)}

/* --- Кнопки ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 26px;border:1px solid transparent;border-radius:var(--radius);
  font:600 15px/1 var(--font-body);text-decoration:none;cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.btn--primary{background:var(--accent);color:var(--ground-deep)}
.btn--primary:hover{background:#9FE0FA}
.btn--ghost{border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn:active{transform:translateY(1px)}

/* --- Шапка ------------------------------------------------------------------ */
.header{position:sticky;top:0;z-index:50;background:rgba(14,26,43,.82);
  backdrop-filter:blur(12px);border-bottom:var(--rule)}
.header__in{display:flex;align-items:center;gap:calc(var(--step)*4);
  min-height:68px;width:min(1240px,100% - var(--gutter)*2);margin-inline:auto}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;margin-right:auto}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.04em}
.brand__note{font:400 12px/1 var(--font-mono);color:var(--ink-dim);letter-spacing:.04em}
.nav{display:flex;gap:calc(var(--step)*3)}
.nav a{font-size:15px;text-decoration:none;color:var(--ink-mid);padding:8px 2px;
  border-bottom:1px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.header__tel{font-family:var(--font-mono);font-size:14px;text-decoration:none;white-space:nowrap}
.header__tel:hover{color:var(--accent)}

/* --- Линия маршрута: несущий приём ------------------------------------------ */
/* Вертикальная линия проходит сквозь секции; узлы отмечают этапы. */
.route{position:relative;padding-left:clamp(28px,4vw,56px)}
.route::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent);
}
.route__line{position:absolute;left:0;top:0;width:1px;background:var(--accent);
  box-shadow:0 0 12px var(--accent-glow);height:var(--route-progress,0%);
  transition:height var(--t-slow)}
.node{position:relative}
.node::before{
  content:'';position:absolute;left:calc(clamp(28px,4vw,56px)*-1 - .5px);top:.7em;
  width:9px;height:9px;margin-left:-4px;border:1px solid var(--accent);
  background:var(--ground);border-radius:50%;
}
.node--done::before{background:var(--accent)}

/* --- Медиа ------------------------------------------------------------------ */
.media{position:relative;overflow:hidden;border:var(--rule);border-radius:var(--radius);
  background:var(--ground-deep)}
.media img{width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:saturate(.85) contrast(1.05)}
.media--wide img{aspect-ratio:16/9}
.media::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(14,26,43,.75) 100%)}
.media__cap{position:absolute;left:14px;bottom:12px;z-index:2;
  font:400 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mid)}

/* --- Карточка услуги -------------------------------------------------------- */
.card{display:flex;flex-direction:column;background:var(--surface);border:var(--rule);
  border-radius:var(--radius);overflow:hidden;transition:border-color var(--t-fast),transform var(--t-fast)}
.card:hover{border-color:var(--accent-deep);transform:translateY(-2px)}
.card__body{display:flex;flex-direction:column;gap:calc(var(--step)*1.5);padding:calc(var(--step)*3)}
.card__meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:auto;padding-top:calc(var(--step)*2);border-top:var(--rule)}
.price{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:19px;color:var(--ink)}
.term{font-family:var(--font-mono);font-size:13px;color:var(--ink-dim)}

.grid{display:grid;gap:calc(var(--step)*3)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

/* --- Таблица пакетов -------------------------------------------------------- */
.table-scroll{overflow-x:auto;border:var(--rule);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font:600 13px/1.3 var(--font-body);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-dim);background:var(--surface)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- Формы ------------------------------------------------------------------ */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;color:var(--ink-mid)}
input,textarea{
  font:400 16px/1.5 var(--font-body);color:var(--ink);background:var(--ground-deep);
  border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;width:100%;
  transition:border-color var(--t-fast)}
input:hover,textarea:hover{border-color:var(--ink-dim)}
input:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-glow)}
textarea{resize:vertical;min-height:120px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-mid);cursor:pointer}
/* Чекбокс рисуем сами: нативный квадрат на тёмном фоне выпадает из палитры */
.consent input{-webkit-appearance:none;appearance:none;width:20px;height:20px;min-width:20px;
  margin:2px 0 0;padding:0;display:grid;place-content:center;cursor:pointer;
  background:var(--ground-deep);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color var(--t-fast),background var(--t-fast)}
.consent input::before{content:'';width:10px;height:10px;transform:scale(0);background:var(--ground-deep);
  transition:transform var(--t-fast);
  clip-path:polygon(14% 46%,0 60%,40% 100%,100% 22%,86% 8%,38% 71%)}
.consent input:hover{border-color:var(--ink-dim)}
.consent input:checked{background:var(--accent);border-color:var(--accent)}
.consent input:checked::before{transform:scale(1)}
.form__note{font-size:13px;color:var(--ink-dim)}

/* --- Подвал ------------------------------------------------------------------ */
.footer{border-top:var(--rule);background:var(--ground-deep);padding-block:calc(var(--step)*6)}
.footer__grid{display:grid;gap:calc(var(--step)*4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.footer a{color:var(--ink-mid);text-decoration:none;border-bottom:1px solid transparent}
.footer a:hover{color:var(--ink);border-bottom-color:var(--line)}
/* Реквизиты живут ТОЛЬКО здесь — на страницах их не дублировать */
.legal{font-size:13px;line-height:1.75;color:var(--ink-dim)}
.legal b{color:var(--ink-mid);font-weight:400}

/* --- Юридические страницы ----------------------------------------------------- */
.doc{max-width:78ch;font-size:16px}
.doc h2{font-size:clamp(20px,2.2vw,26px);margin-top:calc(var(--step)*6);margin-bottom:calc(var(--step)*2)}
.doc h3{font-size:18px;margin-top:calc(var(--step)*4);margin-bottom:var(--step)}
.doc p,.doc li{color:var(--ink-mid)}
.doc ol,.doc ul{padding-left:22px;display:flex;flex-direction:column;gap:8px;margin:0}
.doc__meta{font-family:var(--font-mono);font-size:13px;color:var(--ink-dim)}

/* --- Утилиты ------------------------------------------------------------------ */
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--ground-deep);
  padding:12px 18px;z-index:100}
.skip:focus{left:12px;top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Дополнение: страницы «Контакты», «Оферта», «Политика» -------------------
   Классы добавлены в конец файла, токены выше не переопределяются.            */

/* Крупные кликабельные способы связи (страница «Контакты») */
.contacts{display:grid;gap:calc(var(--step)*2);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.contact{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:96px;
  padding:calc(var(--step)*3);background:var(--surface);border:var(--rule);border-radius:var(--radius);
  text-decoration:none;transition:border-color var(--t-fast),background var(--t-fast)}
.contact:hover{border-color:var(--accent-deep);background:var(--surface-hi)}
.contact__label{font:400 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.contact__value{font-family:var(--font-mono);font-size:clamp(18px,2.2vw,26px);color:var(--ink);
  letter-spacing:-.02em;word-break:break-word;transition:color var(--t-fast)}
.contact:hover .contact__value{color:var(--accent)}

/* Реквизиты как определения: подвал + профильная страница «Контакты» + оферта */
.legal--block{display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--ink-mid);
  max-width:var(--measure);padding:calc(var(--step)*3);background:var(--surface);
  border:var(--rule);border-radius:var(--radius)}
.legal__row{display:flex;flex-wrap:wrap;gap:2px 16px}
.legal__row dt{min-width:230px;color:var(--ink-dim)}
.legal__row dd{margin:0;color:var(--ink)}

/* Пункты юридических документов: номер (1.1, 1.2 …) набран в тексте,
   поэтому автосчётчик и маркеры списка отключены. */
.doc .doc__clauses{list-style:none;padding-left:0;gap:12px}
.doc .doc__clauses>li{color:var(--ink-mid)}
.doc .doc__clauses .num{color:var(--ink);margin-right:6px}
.doc .doc__clauses ul{margin-top:8px}

/* Заметка внизу юридического документа */
.doc__note{margin-top:calc(var(--step)*6);padding:calc(var(--step)*2) calc(var(--step)*3);
  background:var(--surface);border-left:2px solid var(--accent-deep);border-radius:var(--radius);
  font-style:italic;color:var(--ink-mid);max-width:78ch}

/* Переход по якорю из оглавления — заголовок не уезжает под липкую шапку */
.doc h2[id]{scroll-margin-top:84px}

/* Оглавление документа */
.doc .toc{flex-direction:row;flex-wrap:wrap;gap:8px 20px;padding-left:0;list-style:none;max-width:78ch}
.toc a{font-size:14px;color:var(--ink-mid);text-decoration:none;border-bottom:1px solid var(--line);
  display:inline-flex;align-items:center;min-height:32px}
.toc a:hover{color:var(--accent);border-bottom-color:var(--accent)}

@media (max-width:720px){
  .header__in{gap:calc(var(--step)*2)}
  .legal__row dt{min-width:0;width:100%}
}

/* ===========================================================================
   ДОБАВЛЕНО ПРИ СБОРКЕ СТРАНИЦ. Только новые классы, токены выше не трогаем.
   =========================================================================== */

/* .tap — зона нажатия 44px для строчных ссылок (телефон, почта, списки) */
.tap{display:inline-flex;align-items:center;min-height:44px}

/* .note — короткая приписка под блоком */
.note{margin-top:calc(var(--step)*3);font-size:14px;color:var(--ink-dim)}

/* Фикс переполнения шапки на узких экранах (<900px): подпись бренда декоративна и
   ломается в две строки, упираясь в меню; телефон функционален — он остаётся. */
@media (max-width:900px){
  .brand__note{display:none}
}

/* --- Первый экран: асимметрия 7/5, текст на выносной линии --- */
.hero{padding-block:clamp(36px,5vw,72px) clamp(56px,8vw,110px)}
.hero__in{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1fr);align-items:end}
.hero__text{position:relative;display:flex;flex-direction:column;gap:calc(var(--step)*3)}
.hero__text h1{max-width:20ch}
.hero__text .lead{max-width:50ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:calc(var(--step)*2);margin-top:var(--step)}
.hero__side{display:flex;flex-direction:column;gap:calc(var(--step)*2)}
.hero__legend{display:flex;flex-wrap:wrap;gap:calc(var(--step)*1.5) calc(var(--step)*3);
  margin:0;padding:0;list-style:none;
  font:400 12px/1.4 var(--font-mono);letter-spacing:.08em;color:var(--ink-dim)}
.hero__legend b{color:var(--ink-mid);font-weight:400}
@media (min-width:920px){
  .hero__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .hero__text{padding-left:clamp(28px,4vw,56px);border-left:var(--rule)}
  .hero__text::before{content:'';position:absolute;left:-.5px;top:0;width:1px;height:56px;
    background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
}

/* --- Сетка карточек услуг: 3 + 2 без дыры в последнем ряду --- */
.grid--cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
@media (min-width:1080px){
  .grid--cards{grid-template-columns:repeat(6,1fr)}
  .grid--cards>*{grid-column:span 2}
  .grid--cards>:nth-child(4),.grid--cards>:nth-child(5){grid-column:span 3}
}

/* --- Карточка-ссылка --- */
.card--link{text-decoration:none;color:inherit}
.card--link:hover .card__title{color:var(--accent)}
.card__media{position:relative;border-bottom:var(--rule);background:var(--ground-deep)}
.card__media img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.card__title{transition:color var(--t-fast)}
.card__desc{color:var(--ink-mid);font-size:15px}

/* --- Две колонки: контент + приставной блок --- */
.split{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1fr)}
@media (min-width:920px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
  .split__aside{position:sticky;top:calc(68px + var(--step)*3);align-self:start}
}
.split__aside{display:flex;flex-direction:column;gap:calc(var(--step)*2)}
.aside-note{font:400 12px/1.6 var(--font-mono);letter-spacing:.06em;color:var(--ink-dim);max-width:34ch}

/* --- Узлы маршрута --- */
.route__list{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:calc(var(--step)*5)}
.node__top{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:var(--step);max-width:52ch}
.node p{color:var(--ink-mid);max-width:52ch}

/* --- Тезис без карточки: короткий акцентный штрих сверху --- */
.thesis{position:relative;display:flex;flex-direction:column;gap:var(--step);
  padding-top:calc(var(--step)*3);border-top:var(--rule)}
.thesis::before{content:'';position:absolute;top:-1px;left:0;width:40px;height:1px;background:var(--accent)}
.thesis__no{font:400 12px/1 var(--font-mono);letter-spacing:.16em;color:var(--ink-dim)}
.thesis p{color:var(--ink-mid)}

/* --- Полоса-секция с фоновой подложкой --- */
.band{position:relative;isolation:isolate;overflow:hidden;
  border-top:var(--rule);border-bottom:var(--rule);background:var(--ground-deep)}
.band__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.band__bg img{width:100%;height:100%;object-fit:cover;opacity:.35;
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 70%,transparent 100%)}

/* --- Форма --- */
.form{display:flex;flex-direction:column;gap:calc(var(--step)*3);max-width:640px}
.form__row{display:grid;gap:calc(var(--step)*3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* --- Вертикальные списки ссылок (подвал, контакты) --- */
.linklist{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.linklist a{font-size:15px}
.footer__col{display:flex;flex-direction:column;gap:calc(var(--step)*2)}
.footer__title{font:400 12px/1 var(--font-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .route__line{transition:none}
}

/* ===========================================================================
   Страница «Услуги и цены» (services.html)
   Дополняет систему, ничего выше не переопределяет: якорное меню направлений,
   блок направления, детализация таблицы пакетов, условия оплаты.
   =========================================================================== */

/* Якорное меню направлений — hit-target 44px */
.anchors{display:flex;flex-wrap:wrap;gap:var(--step);padding:0;margin:0;list-style:none}
.anchors a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:var(--rule);border-radius:var(--radius);color:var(--ink-mid);text-decoration:none;
  font-size:14px;transition:border-color var(--t-fast),color var(--t-fast)}
.anchors a:hover{border-color:var(--accent-deep);color:var(--ink)}

/* Блок направления: отступ якоря под липкую шапку, разделитель между блоками */
.dir{scroll-margin-top:84px}
.dir+.dir{margin-top:clamp(48px,7vw,96px);padding-top:clamp(48px,7vw,96px);border-top:var(--rule)}
.dir__top{display:grid;gap:calc(var(--step)*4);align-items:start;
  margin-bottom:calc(var(--step)*4);grid-template-columns:minmax(0,360px) minmax(0,1fr)}
@media (max-width:860px){.dir__top{grid-template-columns:1fr}}

/* Ячейка «Пакет»: название и уточнение */
.packages tbody th{font-weight:400}
.pack-name{display:block;font-weight:600}
.pack-sub{display:block;margin-top:4px;font-size:13px;color:var(--ink-dim)}

/* Состав пакета внутри ячейки */
.pack{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;
  font-size:14px;color:var(--ink-mid)}
.pack li::marker{color:var(--accent-deep)}

/* «Не входит» — мелким шрифтом отдельной строкой под составом */
.excl{margin-top:12px;max-width:none;font-size:13px;line-height:1.5;color:var(--ink-dim)}

/* Доли колонок таблицы пакетов */
.packages th:first-child,.packages td:first-child{width:23%}
.packages th:nth-child(3),.packages td:nth-child(3){width:13%}
.packages th:nth-child(4),.packages td:nth-child(4){width:15%}

/* Выделенная цифра внутри .note (класс .note объявлен выше) */
.note b{color:var(--ink-mid);font-weight:400}

/* Иерархия внутри строки пакета: цена — главная, срок — служебный */
.packages tbody td.num{color:var(--ink-dim);font-size:14px}
.packages tbody td.num:last-child{color:var(--ink);font-size:18px}

/* Условия оплаты: маркер-штрих вместо нумерации */
.terms{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:calc(var(--step)*2)}
.terms li{position:relative;padding-left:28px;max-width:var(--measure);color:var(--ink-mid)}
.terms li::before{content:'';position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--accent)}
.terms a{color:var(--accent)}

/* ===========================================================================
   ПРАВКИ ПОСЛЕ РЕВЬЮ. Только новые классы и медиазапросы, токены не трогаем.
   =========================================================================== */

/* --- Меню в шапке на мобильных: не прячем, а переносим второй строкой ------
   Бургер потребовал бы JS и скрытого состояния; здесь всё видно и кликабельно. */
@media (max-width:720px){
  .header__in{flex-wrap:wrap;gap:8px calc(var(--step)*2);padding-block:8px;min-height:0}
  .nav{order:3;width:100%;gap:calc(var(--step)*3);
    padding-top:2px;border-top:var(--rule)}
  .nav a{min-height:44px;display:inline-flex;align-items:center;padding:0}
  .header__tel{font-size:15px}
  /* шапка стала выше — якоря не должны уезжать под неё */
  .doc h2[id],.dir{scroll-margin-top:130px}
}

/* --- Пакеты на телефоне: карточка вместо таблицы ---------------------------
   Горизонтальный скролл прятал колонки «срок» и «цена» за краем экрана.
   Ниже 720px строка таблицы разворачивается в карточку: название, под ним
   строка «срок · цена», ниже состав пакета. */
@media (max-width:720px){
  .table-scroll{border:0;border-radius:0;overflow:visible}
  .packages{min-width:0;display:block;font-size:15px}
  .packages thead{display:none}
  .packages tbody{display:flex;flex-direction:column;gap:calc(var(--step)*2)}
  .packages tbody tr{display:grid;grid-template-columns:auto auto;justify-content:start;
    align-items:baseline;gap:6px calc(var(--step)*3);
    border:var(--rule);border-radius:var(--radius);background:var(--surface);
    padding:calc(var(--step)*2) calc(var(--step)*2.5)}
  .packages tbody th,.packages tbody td{display:block;padding:0;border:0}
  .packages tbody th{grid-column:1/-1;order:1;margin-bottom:2px}
  .packages tbody td.num{order:2;text-align:left;white-space:nowrap}
  .packages tbody td.num:last-child{order:2}
  .packages tbody td:not(.num){grid-column:1/-1;order:3;
    margin-top:calc(var(--step)*1.5);padding-top:calc(var(--step)*1.5);border-top:var(--rule)}
  .pack{padding-left:16px}
}

/* --- Сетки на планшете: без карточки-сироты в половине ряда ---------------- */
@media (min-width:700px) and (max-width:1079px){
  .grid--cards{grid-template-columns:repeat(3,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
}

/* --- Приставной блок маршрута ---------------------------------------------
   Подпись набирается основным шрифтом: моно тяжело читать абзацем.
   Картинка на широком экране выше — иначе колонка обрывается на трети. */
.aside-note{font:400 14px/1.6 var(--font-body);letter-spacing:0}
@media (min-width:1080px){
  .media--tall img{aspect-ratio:3/4}
}

/* --- Полужирный в юридических документах ----------------------------------
   У Onest подключены 400 и 600; 700 нет, иначе браузер синтезирует начертание. */
.doc b,.legal b{font-weight:600}
.legal b{font-weight:400}

/* --- Страница «Согласие»: список действий с данными ------------------------ */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tags li{font:400 13px/1 var(--font-mono);color:var(--ink-mid);
  padding:9px 12px;border:var(--rule);border-radius:var(--radius);background:var(--surface)}

/* --- Форма: ловушка для ботов и строка состояния ---------------------------- */
/* Поле-ловушка не показываем, но и не прячем через display:none — часть ботов
   такие поля игнорирует. Убираем из потока и из таб-порядка. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

[data-form-status]{transition:color var(--t-fast)}
[data-form-status][data-state="pending"]{color:var(--ink-mid)}
[data-form-status][data-state="ok"]{color:var(--ok)}
[data-form-status][data-state="error"]{color:var(--warn)}