/* land-steps-4-start — scoped, RTL */
.ms-steps4{
  isolation:isolate;
  color:#111827;
  font-family:"IRANSans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --accent:#8b5cf6; --brand:#ec4899; --muted:#6b7280;
  --container:min(1200px,92vw);
}

.mssteps4__container{
  width:var(--container); margin-inline:auto;
  padding:28px 0 8px;
}

/* Head */
.mssteps4__head{ text-align:center; margin-bottom:18px; }
.mssteps4__title{
  margin:0 0 6px; color:var(--accent);
  font-family:"Lalezar","IRANSans"; font-size:clamp(22px,2.4vw,28px);
}
.mssteps4__subtitle{ margin:0; color:var(--muted); }

/* Grid of 4 steps */
.mssteps4__grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(4, 1fr);
  counter-reset: steps;
  margin: 14px 0 18px;
}
@media (max-width: 980px){
  .mssteps4__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .mssteps4__grid{ grid-template-columns:1fr; }
}

.mssteps4__item{
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.98));
  border:1px solid rgba(17,24,39,.08);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 28px rgba(17,24,39,.06), 0 2px 8px rgba(17,24,39,.04);
  position:relative;
}
.mssteps4__item::after{
  /* خط اتصال نمادین بین باکس‌ها در دسکتاپ */
  content:""; position:absolute; top:28px; inset-inline-start:-7px; width:14px; height:2px;
  background:linear-gradient(90deg, rgba(139,92,246,.25), rgba(236,72,153,.25));
  display:none;
}
@media (min-width: 981px){
  .mssteps4__item:not(:first-child)::after{ display:block; }
}

/* Media */
.mssteps4__media{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio: 16/10; border-radius:12px; overflow:hidden;
  background:radial-gradient(40% 40% at 50% 30%, rgba(139,92,246,.10), transparent 70%),
             radial-gradient(40% 40% at 50% 80%, rgba(236,72,153,.10), transparent 70%);
  border:1px solid rgba(17,24,39,.06);
  margin-bottom:10px;
}
.mssteps4__img{
  max-width:68%; height:auto; display:block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.08));
}
.mssteps4__icon{
  position:absolute; inset-inline-end:8px; inset-block-start:8px;
  font-size:18px; color:var(--accent);
  background:#fff; border:1px solid rgba(17,24,39,.06);
  border-radius:10px; padding:6px 8px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.mssteps4__badge{
  position:absolute; inset-inline-start:8px; inset-block-start:8px;
  width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center; font-weight:800; font-size:13px;
  color:#fff; background:linear-gradient(90deg, var(--accent), var(--brand));
  box-shadow:0 10px 24px rgba(236,72,153,.25);
}

/* Texts */
.mssteps4__t{ margin:0 0 4px; font-weight:800; font-size:16px; }
.mssteps4__d{ margin:0; color:#4b5563; line-height:1.9; font-size:14px; }

/* CTA */
.mssteps4__cta{ display:flex; justify-content:center; margin-top:12px; }
.btn-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; border:0; cursor:pointer;
  color:#fff; background:linear-gradient(90deg, var(--brand), var(--accent));
  box-shadow:0 12px 26px rgba(139,92,246,.28), 0 4px 10px rgba(236,72,153,.18);
  text-decoration:none;
}
.btn-cta i{ font-size:14px; }

/* Dark mode */
.ms-land-steps4{padding:32px;border:1px solid #eee;border-radius:18px;background:#fff;font-family:"IRANSans",sans-serif}
.ms-land-steps4 h2{margin:0 0 12px;color:#8b5cf6;font-family:"Lalezar","IRANSans",sans-serif;font-size:clamp(20px,2.4vw,28px)}
.ms-land-steps4 .grid{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.ms-land-steps4 .grid{grid-template-columns:1fr 1fr}}
.ms-land-steps4 .card{background:#fff;border:1px solid #eee;border-radius:16px;padding:18px;position:relative;padding-right:48px}
.ms-land-steps4 .card:before{content:attr(data-step);position:absolute;right:12px;top:12px;width:28px;height:28px;display:grid;place-items:center;background:#fce7f3;border:1px solid #f472b6;border-radius:10px;color:#be185d;font-weight:700}
/* حذف شماره‌های خودکار ol در کنار هر باکس */
.mssteps4__grid{ list-style: none; padding: 0; }   /* ← روی خود لیست */
.mssteps4__grid > li{ list-style: none; }          /* ← ایمنی بیشتر */
.mssteps4__grid > li::marker{ content: none; }     /* ← خاموش کردن مارکر در همهٔ مرورگرها */