/* ============================================================
   Ultima Checker — sections.css
   Контентные секции: полоса-инструкция, разбор одной проверки,
   биллинг-ряд тарифов, FAQ-строки, финальная строка CTA.

   Язык: продуктовая панель shadcn/ui neutral dark.
   Плоско: хеирлайны вместо теней, цвет только в данных и статусах,
   белая кнопка на экране ровно одна.
   Токены и примитивы (.panel/.panel-head/.btn/.badge/.wrap) — base.css,
   здесь не переобъявляются.
   Анимируется только transform, длительности ≤ 300ms,
   ховеры — под (hover:hover) and (pointer:fine).
   ============================================================ */

/* ------------------------------------------------------------
   0. Каркас и локальные производные
   Кривая и ритм держатся здесь: секции не должны зависеть от того,
   какие служебные переменные окажутся в base.css.
   ------------------------------------------------------------ */
.section{
  --s-ease:cubic-bezier(.23,1,.32,1);
  --s-pad:clamp(48px,7vw,84px);
  --s-gap:clamp(20px,3vw,30px);
  --s-line:var(--border);

  padding-block:var(--s-pad);
  border-top:1px solid var(--s-line);
}

/* защита от двойного гуттера, если партиал вложат в общий .wrap */
.wrap .section > .wrap{
  max-width:none;
  padding-inline:0;
}

/* подпись таблицы — только для скринридера */
.vh{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ------------------------------------------------------------
   1. Шапка секции
   ------------------------------------------------------------ */
.s-head{
  max-width:68ch;
  margin:0 0 var(--s-gap);
}
.s-title{
  margin:0;
  font-size:clamp(22px,2.8vw,29px);
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.022em;
  color:var(--fg);
  text-wrap:balance;
}
.s-sub{
  margin:10px 0 0;
  font-size:15px;
  line-height:1.6;
  color:var(--muted-fg);
}

/* ------------------------------------------------------------
   2. «Как это работает» — полоса-инструкция
   Одна строка на шаг, моноширинный префикс, хеирлайны.
   Вместо четырёх плиток с цифрами: четыре строки, не пол-экрана.
   ------------------------------------------------------------ */
.flow{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--s-line);
}

.flow-i{
  display:grid;
  grid-template-columns:2.25rem minmax(9rem,13rem) minmax(0,1fr);
  align-items:baseline;
  column-gap:16px;
  padding-block:11px;
  border-bottom:1px solid var(--s-line);
}

.flow-n{
  font-family:var(--mono);
  font-size:12px;
  line-height:1.5;
  letter-spacing:.02em;
  color:var(--muted-fg);
  font-variant-numeric:tabular-nums;
}

.flow-t{
  margin:0;
  font-size:15px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:-.008em;
  color:var(--fg);
}

.flow-d{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:var(--muted-fg);
}

@media (max-width:760px){
  .flow-i{
    grid-template-columns:2rem minmax(0,1fr);
    align-items:start;
    row-gap:2px;
    padding-block:12px;
  }
  .flow-t{grid-column:2}
  .flow-d{grid-column:2}
}

/* ------------------------------------------------------------
   3. Разбор одной проверки
   Слева — трасса соединения по стадиям, справа — что означает
   срыв на каждой из них. Легенда превращена в диагностику.
   ------------------------------------------------------------ */
.probe{overflow:hidden}          /* хеирлайны колонок не вылезают за радиус */

.probe-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 12px;
}
.probe-target{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:-.01em;
  color:var(--fg);
  overflow-wrap:anywhere;
}
.probe-via{
  font-size:12.5px;
  color:var(--muted-fg);
}
.probe-verdict{margin-left:auto}

.probe-body{
  display:grid;
  grid-template-columns:minmax(0,330px) minmax(0,1fr);
}

/* --- 3.1 Трасса --------------------------------------------------- */
.trace{
  list-style:none;
  margin:0;
  padding:14px 18px 16px;
  border-right:1px solid var(--s-line);
}

.trace-s{
  position:relative;
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  column-gap:10px;
  padding-block:7px;
}

/* линия между стадиями: последовательность видна без нумерации */
.trace-s::before{
  content:"";
  position:absolute;
  left:4px;
  top:22px;              /* низ точки: 7 padding + 6 margin + 9 размер */
  bottom:-13px;          /* ровно до верха точки следующей стадии */
  width:1px;
  background:var(--s-line);
}
.trace-s:last-child::before{display:none}

.trace-dot{
  grid-column:1;
  align-self:start;
  inline-size:9px;
  block-size:9px;
  margin-top:6px;
  border-radius:50%;
  background:var(--muted-fg);
}

.trace-n{
  grid-column:2;
  margin:0;
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  line-height:1.75;
  letter-spacing:.02em;
  color:var(--fg);
}

.trace-r{
  grid-column:3;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.75;
  color:var(--muted-fg);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.trace-v{
  grid-column:2 / -1;
  margin:1px 0 0;
  font-size:13px;
  line-height:1.5;
  color:var(--muted-fg);
  overflow-wrap:anywhere;
}

/* статусы стадии — единственный цвет в этом блоке */
.trace-s[data-state="ok"]   .trace-dot{background:var(--green)}
.trace-s[data-state="ok"]   .trace-r  {color:var(--green)}
.trace-s[data-state="bad"]  .trace-dot{background:var(--red)}
.trace-s[data-state="bad"]  .trace-r  {color:var(--red)}
.trace-s[data-state="skip"] .trace-dot{
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--muted-fg);
}

/* --- 3.2 Таблица вердиктов ---------------------------------------- */
.vtab-wrap{overflow-x:auto}

.vtab{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}

.vtab th,
.vtab td{
  text-align:left;
  vertical-align:top;
  padding:9px 18px 9px 0;
}
.vtab tr > *:first-child{padding-left:18px}

.vtab thead th{
  padding-top:16px;
  padding-bottom:8px;
  font-size:11px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-fg);
  white-space:nowrap;
}

.vtab tbody tr > *{border-top:1px solid var(--s-line)}
.vtab tbody th{font-weight:400}

.vtab-stage{
  font-family:var(--mono);
  font-size:12px;
  line-height:1.65;
  color:var(--muted-fg);
  white-space:nowrap;
}

.vtab-txt{
  color:var(--muted-fg);
  line-height:1.5;
}

/* --- 3.3 Вывод по ячейке ------------------------------------------ */
.probe-foot{
  margin:0;
  padding:13px 18px;
  border-top:1px solid var(--s-line);
  font-size:13px;
  line-height:1.55;
  color:var(--muted-fg);
}

/* --- 3.4 Узко: колонки в стопку, таблица в строки ------------------ */
@media (max-width:900px){
  .probe-body{grid-template-columns:minmax(0,1fr)}
  .trace{
    border-right:0;
    border-bottom:1px solid var(--s-line);
  }
}

@media (max-width:640px){
  .vtab thead{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .vtab,
  .vtab tbody{display:block}
  .vtab tbody tr{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    column-gap:10px;
    padding:12px 16px;
    border-top:1px solid var(--s-line);
  }
  .vtab tbody tr > *{
    display:block;
    padding:0;
    border-top:0;
  }
  .vtab tr > *:first-child{padding-left:0}
  .vtab-stage{text-align:right}
  .vtab-txt{
    grid-column:1 / -1;
    padding-top:6px;
  }
}

/* ------------------------------------------------------------
   4. Тарифы — ряд биллинг-панелей
   Имя мелко, цена крупно и таблично, кредиты и бонус строкой.
   Выделен ровно один тариф: у него белая кнопка, у прочих ghost.
   ------------------------------------------------------------ */
.plans{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.plan{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:18px;
}

.plan-tag{
  position:absolute;
  top:16px;
  right:16px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  font-size:10.5px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fg);
  white-space:nowrap;
}

.plan-name{
  margin:0;
  font-size:11px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-fg);
}
.plan--hl .plan-name{padding-right:100px}

.plan-price{
  display:flex;
  align-items:baseline;
  gap:4px;
  margin:10px 0 0;
  font-variant-numeric:tabular-nums;
}
.plan-num{
  font-size:clamp(27px,3.2vw,33px);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--fg);
}
.plan-cur{
  font-size:15px;
  line-height:1;
  color:var(--muted-fg);
}

.plan-credits{
  margin:8px 0 0;
  font-size:13px;
  line-height:1.5;
  color:var(--muted-fg);
}
.plan-cr,
.plan-bn{
  font-family:var(--mono);
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
}
.plan-cr{color:var(--fg)}
.plan-bn{color:var(--green)}   /* бонус — данные, а не украшение */

.plan-feats{
  margin:14px 0 16px;
  padding:12px 0 0;
  border-top:1px solid var(--s-line);
  list-style:none;
}
.plan-feats li{
  margin:0;
  padding-block:3px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted-fg);
}

.plan-cta{
  width:100%;
  margin-top:auto;             /* кнопки всех тарифов на одной линии */
}

/* выделение без свечений: на ступень светлее фон и плотнее граница */
.plan--hl{
  background:var(--elev);
  border-color:rgba(255,255,255,.22);
}

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

.pay{
  margin:16px 0 0;
  font-size:13px;
  line-height:1.6;
  color:var(--muted-fg);
}

.fineprint{
  margin:8px 0 0;
  max-width:80ch;
  font-size:12px;
  line-height:1.65;
  color:var(--muted-fg);
}

/* ------------------------------------------------------------
   5. FAQ — строки списка на хеирлайнах, без карточек
   Маркер +/− поворачивается через transform; высоту не анимируем,
   чтобы страница не дёргалась при раскрытии.
   ------------------------------------------------------------ */
.faq{border-top:1px solid var(--s-line)}

.qa{
  margin:0;
  border-bottom:1px solid var(--s-line);
}

.qa-q{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:14px 2px;
  cursor:pointer;
  list-style:none;
  user-select:none;
  -webkit-user-select:none;
}
.qa-q::-webkit-details-marker{display:none}
.qa-q::marker{content:""}

.qa-t{
  flex:1 1 auto;
  min-width:0;
  font-size:15px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-.006em;
  color:var(--fg);
}

.qa-m{
  position:relative;
  flex:none;
  inline-size:14px;
  block-size:14px;
  margin-top:5px;
}
.qa-m::before,
.qa-m::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  background:var(--muted-fg);
}
.qa-m::before{
  inline-size:13px;
  block-size:1px;
  transform:translate(-50%,-50%);
}
.qa-m::after{
  inline-size:1px;
  block-size:13px;
  transform:translate(-50%,-50%);
  transition:transform 180ms var(--s-ease);
}
.qa[open] .qa-m::after{transform:translate(-50%,-50%) rotate(90deg)}

.qa-a{
  padding:0 2px 16px;
  max-width:76ch;
}
.qa-a p{
  margin:0;
  font-size:14px;
  line-height:1.65;
  color:var(--muted-fg);
}
.qa-a a{
  color:var(--fg);
  text-decoration:underline;
  text-decoration-color:var(--border);
  text-underline-offset:.18em;
}

@media (hover:hover) and (pointer:fine){
  .qa-q:hover .qa-m::before,
  .qa-q:hover .qa-m::after{background:var(--fg)}
  .qa-a a:hover{text-decoration-color:var(--fg)}
}

/* ------------------------------------------------------------
   6. Финальная CTA — одна строка, без блока-баннера
   ------------------------------------------------------------ */
.cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px 28px;
}
.cta-txt{min-width:0}
.cta-title{
  margin:0;
  font-size:clamp(19px,2.2vw,23px);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.018em;
  color:var(--fg);
}
.cta-sub{
  margin:6px 0 0;
  font-size:14px;
  line-height:1.55;
  color:var(--muted-fg);
}
.cta-btn{
  flex:none;
  max-width:100%;
  white-space:normal;          /* длинная подпись не рвёт вёрстку на 320px */
  text-align:center;
}

@media (max-width:560px){
  .cta-btn{width:100%}
}

/* ------------------------------------------------------------
   7. Предпочтения пользователя и печать
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .qa-m::after{transition:none}
}

@media (prefers-contrast:more){
  .section{--s-line:rgba(255,255,255,.24)}
  .plan--hl{border-color:rgba(255,255,255,.42)}
  .s-sub,
  .flow-d,
  .trace-v,
  .vtab-txt,
  .probe-foot,
  .plan-feats li,
  .qa-a p{color:var(--fg)}
}

@media print{
  .section{padding-block:16px}
  .plan-cta,
  .cta-btn{display:none}
}