/* FROST 5 · страницы направлений (/5/s/<ключ>, /s/<ключ>). Подключается ПОСЛЕ site.css: шапка, кнопки, плотные поверхности (--e1/--e2/--e3),
   заголовки разделов (.sh), появление (.stg → .sec.in), окна проб (.pw/.pr), «Было / Стало / Вам» (.cs .cr), финал (.askb) и лист «Меню»
   берутся оттуда как есть — страница обязана выглядеть тем же сайтом. Здесь только то, чего на главной нет.
   Цвета — только токены family.css: светлая тема перекрашивает переменные, вбитый hex её сломал бы. */

/* знак-ссылка в шапке 103×28: зона нажатия растёт до 44px отступом с обратным вылетом — раскладка шапки не меняется */
a.mark{text-decoration:none;padding:8px 0;margin:-8px 0}
@media (max-width:388px){a.mark{padding:8px;margin:-8px}}   /* слово прячется, знак 28px: зона нажатия до 44 в обе стороны */
a.lnk{display:inline-flex;align-items:center;text-decoration:none}

/* ===== Хлебные крошки ===== */
.crumbs{padding:14px 28px 0}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:0;padding:0;list-style:none;font:600 12.5px var(--f);color:var(--mu)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li:before{content:"/";color:var(--fa)}
.crumbs a{display:inline-flex;align-items:center;min-height:34px;color:var(--mu);text-decoration:none}
/* Наведение действует только там, где указатель умеет наводиться. На телефоне наведения нет: браузер
   вешает :hover после КАСАНИЯ и держит, пока не тапнешь в другое место — кнопка остаётся подсвеченной,
   стрелка уехавшей. Владелец 28.10: «интерфейсы кнопки все былмает». */
@media (hover:hover){.crumbs a:hover{color:var(--fg)}}
.crumbs a:focus-visible{outline:2px solid var(--ice);outline-offset:2px;border-radius:4px}
.crumbs [aria-current]{color:var(--fg)}

/* ===== Первый экран =====
   Класс не .hero: у главной он значит «окно помощника на весь экран». Слева — название и обещание группы на плотной поверхности
   (небо за ней живое, текст не должен зависеть от его яркости), справа — формат работы и то, что получает клиент. */
.dhero{display:grid;grid-template-columns:7fr 5fr;gap:14px;padding:8px 28px 0;align-items:stretch}
.dcopy{padding:30px 32px 28px;background:var(--p1);border:1px solid var(--edge);border-radius:20px;box-shadow:var(--e2)}
.dcopy .lb{color:var(--mu)}
.dcopy h1{margin:10px 0 12px;font:800 italic clamp(28px,3.2vw,46px)/1 var(--disp);text-transform:uppercase;letter-spacing:-.01em;overflow-wrap:anywhere}
.dcopy .slogan{margin:0 0 14px}
.dcopy .lead{max-width:62ch;font-size:15.5px;line-height:1.5}
.dact{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
/* Справа — одна плотная панель: формат и «Вам» по центру панели; высота панели равна высоте левой, пустот между блоками нет (содержимое по центру) */
.dside{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:22px 24px;background:var(--p1);border:1px solid var(--edge);border-radius:var(--r1);box-shadow:var(--e1)}
.dfmt p{margin:10px 0 0;font:600 clamp(16px,1.35vw,19px)/1.5 var(--f)}
.dyou2{padding-top:16px;border-top:1px solid var(--edge);font-size:15px;line-height:1.45}
.dyou2 b{color:var(--ice-t)}
html.js .dcopy>*,html.js .dside{animation:rise calc(300ms*var(--k)) var(--spring) backwards}
html.js .dcopy>:nth-child(2){animation-delay:0s}
html.js .dcopy>:nth-child(3){animation-delay:0s}
html.js .dcopy>:nth-child(4){animation-delay:0s}
html.js .dcopy>:nth-child(5){animation-delay:0s}
html.js .dside{animation-delay:0s}

/* ===== Карточки разделов: общий вид поверхности и подъём при наведении (как .dg/.cs на главной) ===== */
.gt,.st,.syc,.rlc,.fq{background:var(--p1);border:1px solid var(--edge);border-radius:var(--r1);box-shadow:var(--e1)}
.gt,.st,.syc,.rlc{transition:transform var(--t2) var(--spring),box-shadow var(--t2)}
@media (hover:hover){.gt:hover,.st:hover,.syc:hover,.rlc:hover{box-shadow:var(--e2)}}

/* ===== Что получаете ===== */
.gtg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
.gt{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px}
.gt:before{content:"";width:8px;height:8px;border-radius:2px;background:var(--ice);margin-bottom:6px}
.gt b{font:800 italic 16px/1.2 var(--disp);text-transform:uppercase}
.gt span{color:var(--mu);font-size:14px;line-height:1.45}

/* ===== Случаи: три карточки «Было / Стало / Вам» (стили строк — .cs .cr из site.css) ===== */
.dcg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
.dcg .cs{padding:18px 20px}
.dcg .cs .cr{padding:11px 0}
.dcg .cs .cr p,.dcg .cs .cr.k2 p{font-size:14px}

/* Окна проб: сколько их у направления, столько и колонок (у ИИ-агентов две, у продвижения одна); ширина окна не растягивается на всю страницу */
#tryG{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}

/* ===== Системы из каталога ===== */
.syg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
.syc{display:flex;flex-direction:column;gap:6px;padding:16px 18px;color:var(--fg);text-decoration:none}
.syc:focus-visible,.rlc:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.syn{font:800 italic 16px/1.2 var(--disp);text-transform:uppercase}
.syp{font:700 13px var(--mono);color:var(--ice-t)}
.syp.mu{font:600 13px var(--f);color:var(--mu)}
.syd{color:var(--mu);font-size:13.5px;line-height:1.4}
.syt{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.syt i{font-style:normal;font:600 11.5px/1 var(--f);padding:6px 8px;border-radius:6px;background:var(--p2);color:var(--mu)}

/* ===== Как идёт работа ===== */
.stp{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
.st{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px}
.sn{display:inline-grid;place-items:center;width:32px;height:32px;margin-bottom:6px;border-radius:50%;background:var(--p2);border:1px solid var(--edge2);font:700 12px var(--mono);color:var(--ice-t)}
.st h3{margin:0;font:800 italic 16px/1.2 var(--disp);text-transform:uppercase}
.st p{margin:0;color:var(--mu);font-size:14px;line-height:1.45}

/* ===== Вопросы и ответы: нативные details, работают без JS и читаются поисковиком ===== */
.fqg{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.fq{border-radius:var(--r2)}
.fq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 16px;font:700 14px/1.3 var(--f);cursor:pointer;list-style:none}
.fq summary::-webkit-details-marker{display:none}
.fq summary:after{content:"+";flex:none;font:700 18px/1 var(--mono);color:var(--ice-t)}
.fq[open] summary:after{content:"\2013"}
.fq summary:focus-visible{outline:2px solid var(--ice);outline-offset:-2px;border-radius:var(--r2)}
.fq p{margin:0;padding:0 16px 16px;color:var(--mu);font-size:14px;line-height:1.5}
.fq[open] p{animation:rise calc(240ms*var(--k)) var(--spring)}

/* ===== Другие направления ===== */
.rlg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
.rlc{position:relative;display:flex;flex-direction:column;gap:4px;min-height:96px;padding:16px 46px 16px 18px;color:var(--fg);text-decoration:none}
.rlc b{font:800 italic 17px/1.2 var(--disp);text-transform:uppercase}
.rlc span:not(.lb){color:var(--mu);font-size:13.5px}
.rlc:after{content:"\2192";position:absolute;right:18px;top:50%;margin-top:-10px;font:700 18px/1 var(--mono);color:var(--ice-t);transition:transform var(--t2) var(--spring)}
@media (hover:hover){.rlc:hover:after{transform:translateX(3px)}}

/* ===== Подвал: все направления ссылками (внутренняя перелинковка) ===== */
.dfoot{width:calc(100% - 56px);margin:28px auto 22px;padding:10px 14px 12px;display:grid;gap:6px;background:var(--p1);border:1px solid var(--edge);border-radius:var(--r2);box-shadow:var(--e1)}
.dall{display:flex;flex-wrap:wrap;gap:2px 4px}
.dall a{display:inline-flex;align-items:center;min-height:38px;padding:0 10px;border-radius:9px;color:var(--mu);font:700 13px var(--f);text-decoration:none}
@media (hover:hover){.dall a:hover{background:var(--p2);color:var(--fg)}}
.dall a:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.dfoot .foot{padding:0 4px}

/* ===== Планшет ===== */
@media (max-width:1100px){
  .gtg,.dcg,.syg,.stp,.rlg{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .dhero{grid-template-columns:1fr}
  .fqg{grid-template-columns:1fr}
  .dcg{grid-template-columns:1fr}
}

/* ===== Телефон: плотно, цели нажатия ≥ 44 ===== */
@media (max-width:600px){
  .crumbs{padding:6px 16px 0}
  /* «FROST» в цепочке — 39px шириной: добираем до 44 отступом с обратным вылетом, чтобы зазор до «/» не вырос */
  .crumbs a{min-height:44px;padding:0 8px;margin:0 -8px}
  .dhero{padding:4px 16px 0;gap:10px}
  .dcopy{padding:20px 18px 22px;border-radius:18px}
  .dcopy h1{font-size:clamp(26px,8.4vw,32px)}
  .dcopy .lead{font-size:14.5px}
  .dact .btn{flex:1 1 100%;height:48px}
  .dside{padding:16px 18px;gap:14px}
  .gtg,.stp,.syg,.rlg{grid-template-columns:1fr;gap:10px}
  .gt{padding:14px 16px 16px}
  .st{padding:14px 16px 16px}
  .fq summary{min-height:52px}
  .rlc{min-height:72px}
  .dfoot{width:calc(100% - 32px)}
  .dall a{min-height:44px}
}

/* Язык — одна кнопка в шапке со списком (details/summary — работает без JS) */
.lang1{position:relative}
.lang1>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border-radius:12px;border:1px solid var(--edge2);background:var(--p2);color:var(--fg);font:800 12px var(--f);letter-spacing:.05em;cursor:pointer;user-select:none}
.lang1>summary::-webkit-details-marker{display:none}
.lang1>summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.lang1>summary:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.lang1-m{position:absolute;right:0;top:calc(100% + 6px);z-index:50;display:grid;min-width:170px;padding:6px;border-radius:12px;background:var(--p1);border:1px solid var(--edge2);box-shadow:var(--sh)}
.lang1-m a{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:9px;color:var(--fg);text-decoration:none;font:600 13.5px var(--f)}
.lang1-m a b{font:800 12px var(--f);color:var(--mu);width:22px}
@media (hover:hover){.lang1-m a:hover{background:var(--p2)}} .lang1-m a[aria-current]{background:var(--ice-soft)} .lang1-m a[aria-current] b{color:var(--ice-t)}
@media (max-width:600px){.nav>.lang1{display:block!important}.lang1>summary{height:44px;padding:0 12px}.lang1-m a{height:44px}}

/* Сенсорные экраны шире телефона: хлебные крошки и ссылки подвала — цели нажатия 44px (на телефоне крошки уже 44) */
@media (pointer:coarse){ .crumbs a, .dall a { min-height: 44px; } .crumbs a { padding: 0 8px; margin: 0 -8px; } }

/* Подвал направления лежит внутри карточки со списком всех направлений (рамка «витрина», метки FOOT_OPEN/FOOT_CLOSE).
   Сам подвал общий, из рамки, и несёт класс .wrap — внутри карточки его поля не нужны, иначе строка уедет от края. */
.dfoot > .foot.wrap{width:auto;max-width:none;padding:0 4px;margin:0}