/* ==========================================================================
   Section: "3 steps" (navy)
   Figma: Home EN 4081:33506 — exact node values. Hairline-separated strip:
   outer wrapper bg/border #809DB5 (navy/200), 1px padding + 1px grid gap,
   radius 56, cards bg #002D4E p40.
   RTL: logical; <ol> order flows with direction automatically.
   ========================================================================== */

.mada-steps {
	background-color: var(--color-vault-navy);   /* #002D4E */
	padding-block: var(--pad-section-top) var(--pad-section-bottom);              /* 80 */
}

.mada-steps__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-15);                        /* 64 */
}

/* Dark-context variant of the shared section header */
.mada-sechead--dark .mada-sechead__title { color: #FFFFFF; }
.mada-sechead--dark .mada-sechead__sub   { color: rgba(245, 245, 246, 0.65); }

.mada-steps__strip {
	list-style: none;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;                                    /* hairline separators */
	padding: 1px;
	background-color: #809DB5;                   /* Figma: navy/200 hairline */
	border: var(--border-width-thin) solid #809DB5;
	border-radius: 56px;                         /* Figma: 56 */
	overflow: hidden;
}

.mada-steps__card {
	background-color: var(--color-vault-navy);
	padding: var(--space-11);                    /* 40 */
	display: flex;
	flex-direction: column;
	gap: var(--space-4);                         /* 12 */
}

.mada-steps__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	inline-size: 100%;
}

.mada-steps__no {
	font-family: var(--font-ar);                 /* Kufi Bold numerals */
	font-weight: var(--fw-bold);
	font-size: 72px;                             /* Figma exact */
	line-height: 72px;
	color: #4D7698;                              /* Figma: navy/300 */
}

.mada-steps__title {
	margin: 0;
	padding-block-start: var(--space-10);        /* 36 */
	font-weight: 800;                            /* ExtraBold */
	/* Figma 4081:33522 is 24/32 = --fs-2xl at desktop. --fs-3xl resolves to
	   30px from 1200up (the scale is mobile-first), which rendered these
	   titles a size too large. */
	font-size: var(--fs-2xl);
	line-height: 32px;
	color: #F5F5F6;
}

.mada-steps__desc {
	margin: 0;
	font-size: var(--fs-sm);                     /* 14 */
	line-height: 22.75px;                        /* Figma exact */
	color: rgba(245, 245, 246, 0.65);
}

/* Client feedback p12: the 3-across strip starts at 1025 (it was stacking
   between 1025–1199, which is not what the design intends there). */
@media (min-width: 1025px) {
	.mada-steps__strip {
		grid-template-columns: repeat(3, 1fr);
	}
}