/* =========================================================
   Ammn landing — Steps "أدخل ، قارن ، أمّن" (Figma 190:55773, 1440 × 720)
   ========================================================= */

.al-steps {
  --al-steps-s: 1;   /* illustration scale */

  position: relative;
  padding-block: var(--al-sp-128);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--al-secondary-light) 24%, transparent) 50%, transparent 239.03%),
    var(--al-bg);
}

/* Dotted texture fading down from the top edge */
.al-steps__texture {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 379px;
  pointer-events: none;
  background: radial-gradient(ellipse 1440px 379px at 50% 0, var(--al-primary-light-active) 0%, transparent 100%);
  -webkit-mask-image: url('../../assets/home/steps-texture-mask.png');
  mask-image: url('../../assets/home/steps-texture-mask.png');
  -webkit-mask-size: 1440px 308px;
  mask-size: 1440px 308px;
  -webkit-mask-position: center top;
  mask-position: center top;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
[data-theme="dark"] .al-steps__texture { opacity: 0.3; }

.al-steps__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--al-sp-2xl);
}

.al-steps__list {
  display: flex;
  align-items: stretch;
  gap: var(--al-sp-4xl);
  width: 100%;
}
.al-steps__item {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--al-sp-2xl);
}

/* The art box takes the scaled footprint; the illustration inside keeps Figma pixels. */
.al-steps__art {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--al-art-w) * var(--al-steps-s));
  height: calc(var(--al-art-h) * var(--al-steps-s));
}
.al-steps__illus {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--al-art-w);
  height: var(--al-art-h);
  transform: scale(var(--al-steps-s));
  transform-origin: 0 0;
  filter: var(--al-art-filter);
}
.al-steps__part { position: absolute; }

.al-steps__part--mask-pay,
.al-steps__part--mask-compare-a,
.al-steps__part--mask-compare-b {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.al-steps__part--mask-pay {
  -webkit-mask-image: url('../../assets/home/s1-mask.svg');
  mask-image: url('../../assets/home/s1-mask.svg');
  -webkit-mask-position: -6.883px -5.576px;
  mask-position: -6.883px -5.576px;
  -webkit-mask-size: 54.966px 54.966px;
  mask-size: 54.966px 54.966px;
}
.al-steps__part--mask-compare-a {
  -webkit-mask-image: url('../../assets/home/s2-mask5.svg');
  mask-image: url('../../assets/home/s2-mask5.svg');
  -webkit-mask-position: -0.458px 6.297px;
  mask-position: -0.458px 6.297px;
  -webkit-mask-size: 91.601px 91.601px;
  mask-size: 91.601px 91.601px;
}
.al-steps__part--mask-compare-b {
  -webkit-mask-image: url('../../assets/home/s2-mask7.svg');
  mask-image: url('../../assets/home/s2-mask7.svg');
  -webkit-mask-size: 50.953px 64.121px;
  mask-size: 50.953px 64.121px;
}

.al-steps__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--al-sp-md);
  width: 100%;
  text-align: center;
}
.al-steps__title {
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
  color: var(--al-text);
}
.al-steps__desc {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  color: var(--al-text-2);
}

/* Bottom divider (Figma steps-line: #dfe8fb, 1px) */
.al-steps__line {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--al-secondary-light-hover);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1279.98px) {
  .al-steps__list { gap: var(--al-sp-xl); }
}

@media (max-width: 1023.98px) {
  .al-steps { --al-steps-s: 0.8; padding-block: 96px; }
  .al-steps__list { gap: var(--al-sp-lg); }
  .al-steps__item { gap: var(--al-sp-xl); }
  .al-steps__title { font-size: 18px; line-height: 28px; }
  .al-steps__text { gap: var(--al-sp-xs); }
  .al-steps__desc { font-size: 15px; }
}

@media (max-width: 767.98px) {
  .al-steps { --al-steps-s: 1; padding-block: var(--al-sp-4xl); }
  .al-steps__texture { height: 240px; }
  .al-steps__container { gap: var(--al-sp-xl); }
  .al-steps__list {
    flex-direction: column;
    align-items: center;
    gap: var(--al-sp-2xl);
  }
  .al-steps__item { flex: none; width: 100%; max-width: 420px; gap: var(--al-sp-lg); }
  .al-steps__desc { font-size: 16px; }
}

/* 250px art on a 343px column at 375: fine; below ~300px scale it down. */
@media (max-width: 359.98px) {
  .al-steps { --al-steps-s: 0.85; }
}