/* Этапы работы. Правила в два класса — иначе сброс полей и шаблон перебивают их. */
.msp{--msp-ink:#0c111d;--msp-gray:#667085;--msp-blue:#2970ff;--msp-deep:#155eef;--msp-pale:#d6e2ff;--msp-line:#eaecf0;--msp-tint:#f5f8ff;
  padding:56px 0;color:var(--msp-ink);
  font-family:'Inter','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.6}
.msp *,.msp *::before,.msp *::after{box-sizing:border-box}
.msp .msp-wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* шапка секции */
.msp .msp-head{text-align:center;max-width:660px;margin:0 auto 40px}
.msp .msp-tag{display:inline-block;font-size:13px;font-weight:600;color:var(--msp-deep);
  background:linear-gradient(180deg,#fff,var(--msp-tint));border:1px solid var(--msp-pale);
  padding:6px 16px;border-radius:99px;margin:0 0 20px;box-shadow:0 2px 8px rgba(41,112,255,.07)}
.msp .msp-title{font-size:clamp(26px,3.6vw,42px);font-weight:800;line-height:1.14;letter-spacing:-.028em;margin:0 0 16px}
.msp .msp-title b{font-weight:800;background:linear-gradient(120deg,var(--msp-blue) 20%,#6b9bff 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.msp .msp-lead{color:var(--msp-gray);font-size:16.5px;margin:0}

/* дорожка */
.msp .msp-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.msp .msp-grid::before{content:'';position:absolute;top:23px;left:12%;right:12%;height:2px;z-index:0;
  background:repeating-linear-gradient(to right,var(--msp-pale) 0 6px,transparent 6px 12px)}
.msp .msp-step{position:relative;z-index:1;text-align:center;padding:0 8px}
.msp .msp-num{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;font-size:17px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,#3b7dff,var(--msp-deep));
  box-shadow:0 8px 20px rgba(41,112,255,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.msp .msp-step-title{font-size:16.5px;font-weight:700;margin:0 0 8px}
.msp .msp-step-text{font-size:13.5px;color:var(--msp-gray);margin:0}
.msp .msp-dur{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:700;color:var(--msp-deep);
  background:var(--msp-tint);border:1px solid var(--msp-pale);padding:4px 12px;border-radius:99px}

@media(max-width:800px){
  .msp .msp-grid{grid-template-columns:repeat(2,1fr);gap:32px 18px}
  .msp .msp-grid::before{display:none}
}
@media(max-width:640px){
  .msp{padding:40px 0}
  .msp .msp-head{margin-bottom:28px}
  .msp .msp-grid{grid-template-columns:1fr;gap:26px}
}