/* ==========================================================================
   Smirnov AI — главная страница
   Визуальные ограничения: Smirnov_AI_website_visual_style_TZ.md + бренд-гайд.
   Палитра, гарнитуры и начертания менять нельзя.

   Шрифты подключаются общим файлом сайта /fonts/fonts.css, поэтому
   собственных @font-face здесь нет: иначе те же файлы объявлялись бы дважды.
   ========================================================================== */

/* --- Токены ------------------------------------------------------------- */

:root{
  --paper:#FAFAF9;
  --ink:#1C1917;
  --stone:#78716C;
  --line:#E7E5E4;
  --signal:#DC2626;
  --sand:#F5F0EB;

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;

  --container:1180px;
  --gutter:clamp(20px,5vw,48px);
  --step:8px;

  --h1:clamp(38px,6.2vw,80px);
  --h2:clamp(30px,4.4vw,54px);
  --h3:clamp(20px,2vw,24px);
  --body:clamp(16px,1.15vw,18px);
  --small:15px;
  --label:12px;
}

/* --- База --------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

/* display:grid у .diag__intro перебивает встроенный стиль [hidden]. */
[hidden]{display:none !important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;scrollbar-gutter:stable}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--body);
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit}

:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
}

/* Контейнер получает фокус программно, чтобы экранный диктор прочитал
   новый шаг. Рамка вокруг всего блока в этом случае не нужна. */
#diag-app:focus,
#diag-app:focus-visible{outline:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

/* --- Раскладка ---------------------------------------------------------- */

.shell{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{
  padding-block:clamp(64px,9vw,128px);
  border-top:1px solid var(--line);
}

.section--sand{background:var(--sand)}
.section--flush{border-top:0}

/* --- Типографика -------------------------------------------------------- */

.label{
  font-family:var(--mono);
  font-weight:400;
  font-size:var(--label);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--stone);
  display:flex;
  align-items:center;
  gap:12px;
}

.label::before{
  content:'';
  width:28px;
  height:1px;
  background:var(--signal);
  flex:none;
}

.label--plain::before{display:none}

/* Cormorant по умолчанию даёт минускульные цифры: «30» читается как «зо».
   Для заголовков включаем маюскульные. */
.h1,.h2,.h3--serif,.pull{font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}

.h1{
  font-family:var(--serif);
  font-weight:300;
  font-size:var(--h1);
  line-height:1.04;
  letter-spacing:-.01em;
  text-wrap:balance;
}

.h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:var(--h2);
  line-height:1.08;
  letter-spacing:-.005em;
  text-wrap:balance;
}

.h3{
  font-family:var(--sans);
  font-weight:500;
  font-size:var(--h3);
  line-height:1.3;
  letter-spacing:-.01em;
}

.h3--serif{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.2;
  letter-spacing:0;
}

.lead{
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.55;
  color:var(--ink);
  max-width:62ch;
}

.text{max-width:62ch}
.text + .text{margin-top:calc(var(--step) * 2)}

.muted{color:var(--stone)}
.small{font-size:var(--small);line-height:1.55}

.mono{
  font-family:var(--mono);
  font-size:var(--label);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--stone);
}

.pull{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.35;
  max-width:34ch;
}

.pull--wide{max-width:60ch}

.pull-group{display:grid;gap:calc(var(--step) * 2)}

.section__head{
  display:grid;
  gap:calc(var(--step) * 3);
  max-width:70ch;
}

.section__head + *{margin-top:clamp(40px,5vw,72px)}

/* --- Кнопки ------------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  white-space:nowrap;
  min-height:56px;
  padding:0 28px;
  border:1px solid var(--ink);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--sans);
  font-weight:500;
  font-size:16px;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}

.btn::before{
  content:'';
  width:8px;
  height:8px;
  background:var(--signal);
  flex:none;
  transition:background-color .18s ease;
}

.btn:hover{background:var(--ink);color:var(--paper)}
.btn:hover::before{background:var(--paper)}
.btn:active{background:#000}

.btn--quiet{
  border-color:var(--ink);
}

.btn--quiet::before{display:none}
.btn--quiet:hover{border-color:var(--ink);background:transparent;color:var(--ink)}

.btn--sm{min-height:44px;padding:0 18px;font-size:14px}

.btn[disabled]{
  opacity:.4;
  cursor:not-allowed;
}

.btn[disabled]:hover{background:transparent;color:var(--ink)}
.btn[disabled]:hover::before{background:var(--signal)}

.cta{
  display:grid;
  gap:calc(var(--step) * 2);
  justify-items:start;
}

.cta__note{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--stone);
}

/* --- Шапка -------------------------------------------------------------- */

.header{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}

.header__brand{display:flex;align-items:center;gap:14px}

.header .directions--bar{
  border-bottom:0;
  padding:0;
  margin:0;
  gap:0 22px;
  flex-wrap:nowrap;
  align-items:center;
}
.header .directions--bar a,
.header .directions--bar span{font-size:11px;letter-spacing:.12em;line-height:1}
.header .directions--bar a::before,
.header .directions--bar span::before{width:14px}

@media (max-width:1024px){
  .header .directions--bar{display:none}
}
@media (min-width:1025px){
  .hero .directions:not(.directions--bar){display:none}
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:72px;
}

.logo{
  font-family:var(--serif);
  font-weight:400;
  font-size:26px;
  line-height:1;
  letter-spacing:.01em;
  text-decoration:none;
  white-space:nowrap;
}

.logo em{
  font-style:italic;
  color:var(--signal);
}

.nav{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:var(--gutter);
  padding-block:12px 28px;
  max-height:calc(100dvh - 72px);
  overflow-y:auto;
}
.nav[data-open='true']{display:flex}
.nav a{padding-block:14px;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink);text-decoration:none;transition:color .18s ease}
.nav a:last-child{border-bottom:0}
.nav .nav-group{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--stone);
  padding-block:14px 6px;
  border-bottom:1px solid var(--line);
}
.nav a.nav-section{font-family:var(--serif);font-size:22px;font-weight:300}



.nav a:hover{color:var(--ink);border-bottom-color:var(--signal)}

.header .btn{min-height:44px;padding:0 20px;font-size:15px}

.burger{
  display:block;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--line);
  background:transparent;
  cursor:pointer;
  position:relative;
}

.burger span,
.burger::before,
.burger::after{
  content:'';
  position:absolute;
  left:12px;
  right:12px;
  height:1px;
  background:var(--ink);
}

.burger::before{top:15px}
.burger span{top:21px}
.burger::after{top:27px}

  .header__inner{position:relative}


@media (max-width:560px){
  .header__inner{gap:12px}
  .header .btn{padding:0 14px;font-size:14px;gap:10px}
  .header .btn::before{width:7px;height:7px}
  .logo{font-size:22px}
}

/* Узкие телефоны: логотип, кнопка и бургер должны уместиться в одну строку,
   текст кнопки при этом остаётся прежним (требование ТЗ 13.1). */
@media (max-width:430px){
  .header__inner{gap:10px;min-height:64px}
  .logo{font-size:19px}
  .header .btn{min-height:40px;padding:0 11px;font-size:13px;gap:8px}
  .header .btn::before{width:6px;height:6px}
  .burger{width:40px;height:40px}
  .burger::before{top:13px}
  .burger span{top:19px}
  .burger::after{top:25px}
  .burger span,.burger::before,.burger::after{left:10px;right:10px}
}

/* --- Первый экран ------------------------------------------------------- */

.hero{
  padding-block:clamp(56px,8vw,112px) clamp(64px,9vw,120px);
}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(40px,6vw,88px);
  align-items:start;
}

.hero__title{margin-top:calc(var(--step) * 4)}
.hero__lead{margin-top:calc(var(--step) * 4)}
.hero__cta{margin-top:calc(var(--step) * 6)}

.hero__theses{
  border-top:1px solid var(--ink);
  padding-top:calc(var(--step) * 2);
}

.hero__theses li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:baseline;
  padding-block:calc(var(--step) * 2.5);
  border-bottom:1px solid var(--line);
}

.hero__theses li:last-child{border-bottom:0}

.hero__theses .idx{
  font-family:var(--mono);
  font-weight:600;
  font-size:13px;
  color:var(--signal);
  letter-spacing:.06em;
}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
}

/* --- Нумерованный редакционный список ----------------------------------- */

.rows{
  border-top:1px solid var(--ink);
}

.row{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:clamp(16px,3vw,40px);
  padding-block:clamp(28px,3.5vw,44px);
  border-bottom:1px solid var(--line);
}

.row__idx{
  font-family:var(--mono);
  font-weight:600;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--signal);
  padding-top:6px;
}

.row__body{display:grid;gap:calc(var(--step) * 1.5)}

.row--split .row__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);
  align-items:start;
}

.row--split .row__main{display:grid;gap:calc(var(--step) * 1.5)}

@media (max-width:860px){
  .row{grid-template-columns:48px minmax(0,1fr)}
  .row--split .row__body{grid-template-columns:1fr;gap:20px}
}

@media (max-width:520px){
  .row{grid-template-columns:1fr;gap:12px}
  .row__idx{padding-top:0}
}

/* --- Списки ------------------------------------------------------------- */

.list{display:grid;gap:calc(var(--step) * 1.25)}

.list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:baseline;
  font-size:var(--small);
  line-height:1.55;
  color:var(--stone);
}

.list li::before{
  content:'';
  width:14px;
  height:1px;
  background:var(--line);
  transform:translateY(-4px);
}

.list--ink li{color:var(--ink)}
.list--ink li::before{background:var(--signal)}

.list__title{
  font-family:var(--mono);
  font-size:var(--label);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:calc(var(--step) * 2);
}

/* --- Сетка модулей ------------------------------------------------------ */

.grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}

.cell{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(24px,2.6vw,36px);
  display:grid;
  gap:calc(var(--step) * 2);
  align-content:start;
}

.cell__idx{
  font-family:var(--mono);
  font-weight:600;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--signal);
}

@media (max-width:900px){
  .grid,.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:600px){
  .grid,.grid--2{grid-template-columns:1fr}
}

/* --- Технологии --------------------------------------------------------- */

.stack{
  display:flex;
  flex-wrap:wrap;
  gap:0 24px;
  border-top:1px solid var(--line);
  padding-top:calc(var(--step) * 2);
}

.stack li{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--stone);
  padding-block:4px;
  position:relative;
  padding-right:24px;
}

.stack li::after{
  content:'';
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:12px;
  background:var(--line);
}

.stack li:last-child{padding-right:0}
.stack li:last-child::after{display:none}

/* --- Кейс --------------------------------------------------------------- */

.case__meta{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--stone);
  margin-top:calc(var(--step) * 3);
}

.facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px 32px;
  margin-top:calc(var(--step) * 3);
}

.facts li{
  font-family:var(--mono);
  font-size:14px;
  color:var(--ink);
  letter-spacing:.02em;
}

.case__cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,64px);
  margin-top:clamp(40px,5vw,72px);
  padding-top:clamp(32px,4vw,48px);
  border-top:1px solid var(--ink);
}

.case__col{display:grid;gap:calc(var(--step) * 2);align-content:start}

.metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--ink);
  margin-top:clamp(40px,5vw,72px);
}

.metric{
  padding:clamp(24px,2.6vw,32px) clamp(16px,2vw,28px) clamp(24px,2.6vw,32px) 0;
  border-right:1px solid var(--line);
  display:grid;
  gap:calc(var(--step));
  align-content:start;
}

.metric:last-child{border-right:0}

.metric__value{
  font-family:var(--mono);
  font-weight:600;
  font-size:clamp(28px,3.4vw,40px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--signal);
}

.metric__label{
  font-size:14px;
  line-height:1.45;
  color:var(--stone);
}

@media (max-width:820px){
  .case__cols{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric{padding-inline:0 20px}
  .metric:nth-child(2){border-right:0}
  .metric:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

@media (max-width:440px){
  .metrics{grid-template-columns:1fr}
  .metric{border-right:0;border-bottom:1px solid var(--line)}
  .metric:last-child{border-bottom:0}
}

.case__demo{
  margin-top:clamp(40px,5vw,72px);
  padding-top:clamp(32px,4vw,48px);
  border-top:1px solid var(--ink);
  display:grid;
  gap:calc(var(--step) * 3);
  justify-items:start;
}

/* Линия делит всю ширину блока, текст остаётся в комфортной мере. */
.case__demo > *{max-width:70ch}

/* --- Аккордеон ---------------------------------------------------------- */

.accordion{
  margin-top:clamp(32px,4vw,56px);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--line);
}

.accordion summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:calc(var(--step) * 3);
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(17px,1.6vw,19px);
  cursor:pointer;
  list-style:none;
}

.accordion summary::-webkit-details-marker{display:none}

.accordion summary::after{
  content:'';
  width:16px;
  height:16px;
  flex:none;
  background:
    linear-gradient(var(--ink),var(--ink)) center/16px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1px 16px no-repeat;
}

.accordion[open] summary::after{
  background:linear-gradient(var(--ink),var(--ink)) center/16px 1px no-repeat;
}

.accordion__body{
  display:grid;
  gap:calc(var(--step) * 2);
  padding-bottom:calc(var(--step) * 4);
  max-width:70ch;
}

.ol{display:grid;gap:calc(var(--step) * 1.25);counter-reset:n}

.ol li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:baseline;
  font-size:var(--small);
  line-height:1.55;
  color:var(--stone);
  counter-increment:n;
}

.ol li::before{
  content:counter(n,decimal-leading-zero);
  font-family:var(--mono);
  font-size:12px;
  color:var(--signal);
  letter-spacing:.06em;
}

/* --- Этапы -------------------------------------------------------------- */

.stage__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:12px 24px;
}

.stage__price{
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.02em;
  color:var(--ink);
  white-space:nowrap;
}

.stage__result{
  font-size:var(--small);
  line-height:1.55;
  color:var(--ink);
  border-left:1px solid var(--signal);
  padding-left:16px;
}

.stage__result b{font-weight:500}

/* --- Консультация ------------------------------------------------------- */

.consult{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}

.panel{
  border:1px solid var(--line);
  background:var(--paper);
  padding:clamp(24px,3vw,40px);
  display:grid;
  gap:calc(var(--step) * 3);
  align-content:start;
}

.panel--sand{background:var(--sand)}

.specs{display:grid;gap:calc(var(--step) * 1.5)}

.specs div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding-bottom:calc(var(--step) * 1.5);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.02em;
}

.specs dt{color:var(--stone)}
.specs dd{margin:0;color:var(--ink)}

@media (max-width:880px){
  .consult{grid-template-columns:1fr}
}

/* --- Финальный призыв --------------------------------------------------- */

.final{
  display:grid;
  gap:calc(var(--step) * 4);
  justify-items:center;
  text-align:center;
  max-width:60ch;
  margin-inline:auto;
}

.final .cta{justify-items:center}

/* --- Подвал ------------------------------------------------------------- */

.footer{
  border-top:1px solid var(--line);
  padding-block:calc(var(--step) * 6);
}

.footer__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px 40px;
}

.footer__links{
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
}

.footer a{
  font-size:var(--small);
  color:var(--stone);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}

.footer a:hover{color:var(--ink);border-bottom-color:var(--signal)}

.footer__copy-block{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.footer__copy{
  font-size:var(--small);
  color:var(--stone);
}

.footer__region{
  font-size:var(--small);
  color:var(--stone);
  opacity:.7;
}

/* ==========================================================================
   Мини-диагностика
   ========================================================================== */

.diag{
  border:1px solid var(--line);
  background:var(--paper);
  padding:clamp(24px,3.5vw,56px);
}

.diag__intro{display:grid;gap:calc(var(--step) * 3);max-width:66ch}

.diag__progress{
  display:grid;
  gap:calc(var(--step) * 1.5);
  margin-bottom:clamp(32px,4vw,48px);
}

.diag__progress-meta{
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--stone);
}

.diag__bar{height:1px;background:var(--line);position:relative}

.diag__bar span{
  position:absolute;
  inset:0;
  transform-origin:left center;
  background:var(--signal);
  transition:transform .25s ease;
}

.diag__step{display:grid;gap:clamp(28px,3.5vw,44px)}

.diag__q{display:grid;gap:calc(var(--step) * 2)}

.diag__q-title{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(17px,1.7vw,20px);
  line-height:1.35;
}

.diag__hint{font-size:14px;color:var(--stone)}

.opts{display:grid;gap:0;border-top:1px solid var(--line)}

.opt{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
  padding-block:14px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  font-size:var(--small);
  line-height:1.5;
  transition:color .18s ease;
}

.opt input{
  appearance:none;
  width:16px;
  height:16px;
  margin:3px 0 0;
  border:1px solid var(--stone);
  border-radius:0;
  background:transparent;
  cursor:pointer;
  flex:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}

.opt input:checked{
  border-color:var(--signal);
  box-shadow:inset 0 0 0 3px var(--signal);
}

.opt:hover{color:var(--ink)}
.opt:hover input{border-color:var(--ink)}
.opt input:checked ~ span{color:var(--ink)}

.opts--cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(20px,3vw,48px);
}

@media (max-width:640px){
  .opts--cols{grid-template-columns:1fr}
}

.field{
  width:100%;
  border:1px solid var(--line);
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--body);
  line-height:1.55;
  padding:14px 16px;
  transition:border-color .18s ease;
}

.field::placeholder{color:var(--stone)}
.field:focus{outline:none;border-color:var(--signal)}
textarea.field{min-height:132px;resize:vertical}

.diag__nav{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
  align-items:center;
  margin-top:clamp(32px,4vw,48px);
  padding-top:calc(var(--step) * 3);
  border-top:1px solid var(--line);
}

.diag__nav .spacer{flex:1 1 auto}

.diag__error{
  font-size:14px;
  color:var(--signal);
  flex:1 1 100%;
}

/* --- Результат диагностики ---------------------------------------------- */

.result{display:grid;gap:clamp(32px,4vw,56px)}

.result__head{display:grid;gap:calc(var(--step) * 3);max-width:66ch}

.priority{
  border-top:1px solid var(--ink);
  padding-top:clamp(24px,3vw,36px);
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);
  align-items:start;
}

.priority__head{display:grid;gap:calc(var(--step) * 2);align-content:start}

.priority__idx{
  font-family:var(--mono);
  font-weight:600;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--signal);
}

.priority__body{display:grid;gap:calc(var(--step) * 3)}

@media (max-width:820px){
  .priority{grid-template-columns:1fr}
}

.diag__outro{
  border-top:1px solid var(--ink);
  padding-top:clamp(28px,3.5vw,44px);
  display:grid;
  gap:calc(var(--step) * 3);
  justify-items:start;
}

.diag__outro > *{max-width:66ch}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

/* ==========================================================================
   Дополнения главной страницы сайта
   Блоки, которых нет в ТЗ лендинга и которые перенесены с прежней главной
   по отдельному решению владельца.
   ========================================================================== */

/* --- Строка направлений в первом экране --------------------------------- */

.directions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 28px;
  padding-bottom:calc(var(--step) * 3);
  border-bottom:1px solid var(--line);
  margin-bottom:calc(var(--step) * 5);
}

.directions a,
.directions span{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:var(--label);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--stone);
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s ease;
}

.directions a::before,
.directions span::before{
  content:'';
  width:18px;
  height:1px;
  background:var(--line);
  flex:none;
  transition:background-color .18s ease;
}

.directions a:hover{color:var(--ink)}
.directions a:hover::before{background:var(--ink)}

/* Активное направление: страница про внедрение ИИ. */
.directions [aria-current='page']{color:var(--ink)}
.directions [aria-current='page']::before{background:var(--signal)}

@media (max-width:560px){
  .directions{
    flex-direction:column;
    align-items:flex-start;
    flex-wrap:nowrap;
    gap:12px;
  }
}

/* --- Статьи ------------------------------------------------------------- */

.posts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.post{
  display:grid;
  gap:calc(var(--step) * 1.5);
  align-content:start;
  padding:clamp(24px,2.6vw,36px);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-decoration:none;
  color:inherit;
  transition:background-color .18s ease;
}

.post:hover{background:var(--sand)}

.post__tag{
  font-family:var(--mono);
  font-size:var(--label);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--signal);
}

.post__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(21px,2.2vw,26px);
  line-height:1.22;
  letter-spacing:0;
}

.post__more{
  font-size:14px;
  color:var(--stone);
  margin-top:calc(var(--step));
}

.post:hover .post__more{color:var(--ink)}

@media (max-width:700px){
  .posts{grid-template-columns:1fr}
}

/* --- Частые вопросы ----------------------------------------------------- */

.faq{border-top:1px solid var(--ink)}

.faq .accordion{
  margin-top:0;
  border-top:0;
  border-bottom:1px solid var(--line);
}

.faq .accordion:last-child{border-bottom:1px solid var(--line)}

/* Cormorant по умолчанию отдаёт минускульные цифры. */
.post__title{font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}

/* Строка направлений стоит над сеткой первого экрана. */
.hero .directions{margin-bottom:clamp(32px,4vw,56px)}