/* =========================================
   land-before-after (scoped)
   دو ستون Before/After با ۱۰ مورد توضیح‌دار
   فونت‌ها: IRANSans / Lalezar (از هدر)
   ========================================= */

.ms-land-before-after{
  --brand:#ec4899; --brand2:#f472b6; --accent:#8b5cf6;
  --ink:#171717; --muted:#616161;
  --container:min(1200px,92vw);
  --card-bg:#fff; --card-border:rgba(17,24,39,.08); --radius:18px;

  color:var(--ink);
  background:transparent;
  font-family:"IRANSans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  position:relative; isolation:isolate;
}

/* پس‌زمینهٔ ابری لطیف و بدون مرز تیز */
.ms-land-before-after::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(62rem 28rem at 12% -10%, rgba(236,72,153,.10), transparent 60%),
    radial-gradient(56rem 24rem at 88% -12%, rgba(139,92,246,.09), transparent 62%),
    radial-gradient(70rem 36rem at 50% 112%, rgba(244,114,182,.08), transparent 66%);
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  opacity:.88;
}

.ms-land-before-after__container{
  width:var(--container); margin-inline:auto; padding:44px 0;
  position:relative; z-index:1;
  margin-top: 5%;
}

.ms-land-before-after__grid{
  display:grid; gap:20px; grid-template-columns:1fr 1fr;
}
@media (max-width: 980px){ .ms-land-before-after__grid{ grid-template-columns:1fr; } }

/* باکس‌ها */
.ms-ba-box{
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.98));
  border:1px solid var(--card-border);
  border-radius:22px;
  padding:18px 18px 6px;
  box-shadow:0 12px 30px rgba(17,24,39,.08), 0 2px 8px rgba(17,24,39,.04);
  backdrop-filter:saturate(120%) blur(6px); -webkit-backdrop-filter:saturate(120%) blur(6px);
}
.ms-ba-box--before{ border-color:rgba(220,38,38,.18); }
.ms-ba-box--after { border-color:rgba(34,197,94,.18);  }

/* هدر هر باکس */
.ms-ba-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ms-ba-head i{ font-size:20px; }
.ms-ba-head h3{
  margin:0; font-family:"Lalezar","IRANSans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:20px;
  color:var(--accent);
}
.ms-ba-box--before .ms-ba-head i{ color:#ef4444; }
.ms-ba-box--after  .ms-ba-head i{ color:#22c55e; }

/* لیست‌ها */
.ms-ba-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ms-ba-item{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(17,24,39,.06);
  background:#fff;
  transition:transform .2s ease, box-shadow .2s ease;
}
.ms-ba-item:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(17,24,39,.06); }

/* آیکون تیک/ضربدر کنار هر مورد */
.ms-ba-ico{
  flex:0 0 20px; width:20px; height:20px;
  display:grid; place-items:center;
  margin-top:2px; font-size:14px; line-height:1; border-radius:8px;
}
.ms-ba-box--before .ms-ba-ico{ color:#ef4444; background:rgba(239,68,68,.08); }
.ms-ba-box--after  .ms-ba-ico{ color:#16a34a; background:rgba(34,197,94,.10); }

/* تیتر و توضیح */
.ms-ba-body{ flex:1; }
.ms-ba-t{ display:block; font-weight:700; margin:0 0 2px; }
.ms-ba-d{ margin:0; color:var(--muted); }

/* دارک مود */