/* ============================================================
   СТОИМОСТЬ И ДОГОВОР (28.09.2026)
   Две карточки: слева — как считаем (шаги с номерами, как в «точке
   назначения»), справа — что в договоре (галочки) и кнопка оценки.
   ============================================================ */
.pricing__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  gap:clamp(12px, 1.2vw, 20px);
}
.pricing__card{
  position:relative; isolation:isolate;
  padding:clamp(24px, 2.4vw, 44px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
}
.pricing__card--deal{
  display:flex; flex-direction:column;
  background:linear-gradient(160deg, #f3f9ff 0%, #fff 60%);
  border-color:var(--accent-line);
}
.pricing__cap{
  margin:0 0 clamp(16px, 1.6vw, 24px);
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-mute);
}

.pricing__steps{ list-style:none; margin:0; padding:0; counter-reset:pr; display:grid; gap:clamp(16px, 1.6vw, 24px); }
.pricing__steps li{ position:relative; padding-left:50px; counter-increment:pr; }
.pricing__steps li::before{
  content:counter(pr, decimal-leading-zero);
  position:absolute; left:0; top:-2px;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font:600 13px/1 var(--font); color:var(--accent-1);
  background:var(--accent-wash);
}
/* пунктир между номерами — шаги идут друг за другом */
.pricing__steps li:not(:last-child)::after{
  content:""; position:absolute; left:16.5px; top:38px; bottom:calc(-1 * clamp(16px, 1.6vw, 24px) + 4px);
  border-left:1px dashed var(--accent-line);
}
.pricing__steps b, .pricing__checks b{ display:block; font:600 clamp(16px, 1.15vw, 19px)/1.3 var(--font); color:var(--fg); }
.pricing__steps span, .pricing__checks span{ display:block; margin-top:4px; font-size:clamp(14px, .95vw, 15.5px); line-height:1.5; color:var(--fg-lead); }

.pricing__factors{
  margin-top:clamp(24px, 2.4vw, 36px);
  padding-top:clamp(20px, 2vw, 28px);
  border-top:1px solid var(--line);
}
.pricing__factors .pricing__cap{ margin-bottom:12px; }
.pricing__factors ul{ margin:0; padding:0 0 0 1.1em; display:grid; gap:6px; }
.pricing__factors li{ font-size:clamp(14px, .98vw, 16px); line-height:1.5; color:var(--fg-lead); }
.pricing__factors li::marker{ color:var(--accent-1); }

.pricing__checks{ list-style:none; margin:0 0 clamp(24px, 2.4vw, 36px); padding:0; display:grid; gap:clamp(14px, 1.4vw, 20px); }
.pricing__checks li{ position:relative; padding-left:38px; }
/* синий круг — ::before, белая галочка — ::after поверх */
.pricing__checks li::before{
  content:""; position:absolute; left:0; top:0;
  width:24px; height:24px; border-radius:50%;
  background:var(--accent-1);
}
.pricing__checks li::after{
  content:""; position:absolute; left:0; top:0;
  width:24px; height:24px;
  background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pricing__btn{ margin-top:auto; align-self:flex-start; }

@media (max-width: 1100px){ .pricing__grid{ grid-template-columns:minmax(0, 1fr); } }

/* ===== 29.09.2026: стеклянный предмет в углу карточки (page.pricing_art, по желанию)
   и движение: шаги и галочки проставляются по очереди, когда блок вошёл в кадр ===== */
.pricing__art{
  position:absolute; z-index:-1; top:clamp(-10px, -.6vw, -4px); right:clamp(-10px, -.6vw, -4px);
  width:clamp(120px, 11vw, 180px); aspect-ratio:1;
  mix-blend-mode:multiply; pointer-events:none;
  animation:pr-float 7s ease-in-out infinite;
}
.pricing__card--deal .pricing__art{ animation-delay:-3.5s; }
.pricing__art img{ width:100%; height:100%; object-fit:contain; }
@keyframes pr-float{ 0%,100%{ translate:0 0; rotate:0deg; } 50%{ translate:0 -8px; rotate:-2deg; } }

.js .pricing__steps li::before,
.js .pricing__checks li::before,
.js .pricing__checks li::after{ transform:scale(0); transition:transform .5s cubic-bezier(.3,1.6,.5,1); }
.js .pricing__steps li:not(:last-child)::after{ transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease); }
.js .pricing__grid.is-in .pricing__steps li::before,
.js .pricing__grid.is-in .pricing__checks li::before,
.js .pricing__grid.is-in .pricing__checks li::after{ transform:none; }
.js .pricing__grid.is-in .pricing__steps li:not(:last-child)::after{ transform:none; }
.pricing__steps li:nth-child(2)::before, .pricing__steps li:nth-child(1)::after{ transition-delay:.35s; }
.pricing__steps li:nth-child(3)::before, .pricing__steps li:nth-child(2)::after{ transition-delay:.7s; }
.pricing__steps li:nth-child(4)::before, .pricing__steps li:nth-child(3)::after{ transition-delay:1.05s; }
.pricing__checks li:nth-child(1)::before, .pricing__checks li:nth-child(1)::after{ transition-delay:.5s; }
.pricing__checks li:nth-child(2)::before, .pricing__checks li:nth-child(2)::after{ transition-delay:.75s; }
.pricing__checks li:nth-child(3)::before, .pricing__checks li:nth-child(3)::after{ transition-delay:1s; }
.pricing__checks li:nth-child(4)::before, .pricing__checks li:nth-child(4)::after{ transition-delay:1.25s; }
.pricing__checks li:nth-child(5)::before, .pricing__checks li:nth-child(5)::after{ transition-delay:1.5s; }
@media (prefers-reduced-motion:reduce){
  .pricing__art{ animation:none; }
  .js .pricing__steps li::before, .js .pricing__checks li::before, .js .pricing__checks li::after,
  .js .pricing__steps li:not(:last-child)::after{ transform:none; transition:none; }
}
/* текст первого шага не заходит под предмет в углу */
.pricing__card:has(> .pricing__art) .pricing__steps li:first-child{ padding-right:clamp(90px, 8vw, 130px); }
@media (max-width: 640px){ .pricing__art{ width:96px; opacity:.6; } .pricing__card:has(> .pricing__art) .pricing__steps li:first-child{ padding-right:60px; } }