/* ==========================================================================
   Page: Business (For Merchants)
   Figma: Business EN D1920 (4079:6955) — exact node values. Banner light-blue
   wash · stats #F3F4F6 · system #F9FAFB (dashboard mock, navy dev card
   #002C45, ice compat card, support card) · CTA #002C45.
   RTL: logical properties.
   ========================================================================== */

/* ---- Banner ---- */
.mada-bizbanner {
	background: linear-gradient(120deg, #E5F1FA 0%, #F4FAFD 55%, #F8FAFC 100%);
	padding-block: var(--pad-banner-block) var(--pad-banner-block);              /* 96 */
}
.mada-bizbanner__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-13);
	align-items: center;
}
.mada-bizbanner__text {
	flex: 1 1 0;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-6);
}
.mada-bizbanner__title {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-banner);                    /* 72 */
	line-height: var(--lh-banner);                  /* 86 */
	color: var(--color-black);
}
.mada-bizbanner__title span { display: block; }
.mada-bizbanner__accent { color: var(--color-primary); }
.mada-bizbanner__sub {
	margin: 0;
	font-size: var(--fs-md);
	line-height: 24px;
	color: var(--color-neutral-700);
	max-inline-size: 60ch;
}
.mada-bizbanner__visual { flex: 1 1 0; min-inline-size: 0; inline-size: 100%; }

/* Client feedback p32: EN banner card = client export (glow baked in). */
.mada-revcard-img { display: block; inline-size: 100%; max-inline-size: 480px; block-size: auto; margin-inline: auto; }
.mada-revcard {
	position: relative;
	background-color: #FFFFFF;
	border-radius: var(--radius-3xl);
	padding: var(--space-9);
	box-shadow: var(--shadow-lg);
	max-inline-size: 420px;
	margin-inline: auto;
}
.mada-revcard__head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-block-end: var(--space-6);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-md);
	line-height: 24px;
	color: var(--color-black);
}
.mada-revcard__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px; block-size: 36px;
	border-radius: var(--radius-xl);
	background-color: var(--color-mint-10);
}
.mada-revcard__chip {
	margin-inline-start: auto;
	background-color: rgba(0, 216, 120, 0.1);    /* Figma */
	color: var(--color-success);                 /* #00D878 */
	font-size: var(--fs-sm);
	line-height: 20px;
	padding: var(--space-1) var(--space-4);
	border-radius: var(--radius-full);
}
.mada-revcard__bars {
	display: flex;
	align-items: flex-end;
	gap: var(--space-4);
	block-size: 180px;
	margin-block-end: var(--space-5);
}
.mada-revcard__bar { flex: 1 1 0; border-radius: 6px 6px 0 0; }
.mada-revcard__bar--a { background-color: var(--color-mint-70); }
.mada-revcard__bar--b { background-color: var(--color-primary); }
.mada-revcard__bar--c { background-color: var(--color-mint-25); }
.mada-revcard__caption {
	margin: 0;
	text-align: center;
	font-size: var(--fs-sm);
	line-height: 20px;
	color: var(--color-neutral-600);
}
.mada-revcard__float {
	position: absolute;
	inset-block-end: var(--space-9);
	/* Hangs off the card edge by design. On a 375 phone the card already sits
	   in the section's 16px gutter, so the overhang pushed 4px past the
	   viewport and gave AR mobile a horizontal scrollbar — pulled flush below
	   640 and restored from tablet up. */
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	border-radius: var(--radius-2xl);
	padding: var(--space-4) var(--space-6);
	box-shadow: var(--shadow-lg);
}
.mada-revcard__float em { font-style: normal; font-size: var(--fs-xs); line-height: 16px; color: var(--color-neutral-600); }
.mada-revcard__float strong { font-weight: var(--fw-bold); font-size: var(--fs-3xl); line-height: 1.2; color: var(--color-black); }

/* ---- Stats band ---- */
.mada-bizstats {
	background-color: var(--color-neutral-100);  /* #F3F4F6 */
	padding-block: var(--pad-section-top) var(--pad-section-bottom);
}
.mada-bizstats__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}
.mada-bizstats__card {
	background-color: #FFFFFF;
	border-radius: var(--radius-2xl);
	padding: var(--space-9);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: flex-start;
	box-shadow: var(--shadow-base);
}
.mada-bizstats__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px; block-size: 48px;
	border-radius: var(--radius-xl);
	background-color: var(--color-ice-credit);
	margin-block-end: var(--space-2);
}
/* Client feedback p33: mint tile + white glyph for the 2.4x card.
   MUST come after the base rule — same specificity, so source order decides
   (this is why the tile stayed ice-blue before). */
.mada-bizstats__icon--mint { background-color: var(--color-liquid-mint); }
.mada-bizstats__icon--mint img { filter: brightness(0) invert(1); }
.mada-bizstats__card strong {
	font-weight: var(--fw-bold);
	font-size: var(--fs-6xl);                    /* 48 */
	font-size: 48px;
	line-height: 58px;
	color: var(--color-black);
}
.mada-bizstats__card p {
	margin: 0;
	font-size: 18px;
	line-height: 28px;
	color: var(--color-neutral-700);
}

/* ---- Integrated system ---- */
.mada-bizsys {
	background-color: var(--color-neutral-50);   /* #F9FAFB */
	padding-block: var(--pad-section-top) var(--pad-section-bottom);
}
.mada-bizsys__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-11);
}
/* Round-3 feedback (Business, Section 2): "revisit the spacing between the
   title and subtitle to match the Figma design."  Measured on 4079:7178 →
   Container 4133:46852: the "Heading 2" box is 144 tall (2 x 72) and the
   subtitle container starts at y=160, so the gap is Spacing/5 = 16 (was 12).
   get_variable_defs on the same container also showed the subtitle is bound
   to English/Paragraph/Large — 18/28 Neutral/700 — not the 16/24 Neutral/600
   the build was using, so the type is corrected here too. Both sizes come
   from tokens, which downshift to 16/24 on mobile per the DS mobile scale. */
.mada-bizsys__head { text-align: center; }
.mada-bizsys__head h2 {
	margin: 0 0 var(--space-5);                      /* 16 — Spacing/5 */
	font-weight: var(--fw-bold);
	font-size: var(--fs-section);                    /* 60 — Display/Small */
	line-height: var(--lh-section);                  /* 72 */
	color: var(--color-black);                       /* Core/Black #071124 */
}
.mada-bizsys__head p {
	margin: 0;
	font-size: var(--fs-lg);                         /* 18 — Paragraph/Large */
	line-height: var(--lh-md);                       /* 28 */
	color: var(--color-neutral-700);                 /* Neutral/700 #4B5563 */
}

.mada-bizsys__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	align-items: stretch;
}
.mada-bizsys__panel {
	display: flex;                               /* dash sits IN FLOW below the copy — overlap impossible */
	flex-direction: column;
	min-inline-size: 0;
	background-color: var(--color-neutral-150);
	border-radius: var(--radius-3xl);
	padding: var(--space-9);
	overflow: hidden;
}
.mada-bizsys__panelbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: var(--space-6);
}
.mada-bizsys__dots { display: inline-flex; gap: 6px; }
.mada-bizsys__dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; }
.mada-bizsys__dots i:nth-child(1) { background: #F30032; }
.mada-bizsys__dots i:nth-child(2) { background: #FF8726; }
.mada-bizsys__dots i:nth-child(3) { background: #00D878; }
.mada-bizsys__live {
	background-color: #FFFFFF;
	border-radius: var(--radius-full);
	padding: var(--space-2) var(--space-4);
	font-size: var(--fs-xs);
	line-height: 16px;
	color: var(--color-neutral-700);
	box-shadow: var(--shadow-base);
}
.mada-bizsys__panel h3 { margin: 0 0 var(--space-2); font-weight: var(--fw-bold); font-size: var(--fs-xl); line-height: 28px; color: var(--color-black); }
.mada-bizsys__panel p { margin: 0 0 var(--space-6); font-size: var(--fs-md); line-height: 24px; color: var(--color-neutral-600); }
/* Figma 4079:7064 (EN) / 4073:7631 (AR): the dashboard UI sits at the card's
   inline-end, flush to the bottom, 673 of the 1154.67 card (58.3%) with a
   ~28px inline-end gap, and is clipped by the card. It is NOT centred. */
/* Figma per band: D1920 673px (58.3% of the panel, node 4079:7064); the
   Tablet 640-1024 frames use a ~396px strip; Mobile 320/639 nearly full
   width (267/288, 410/607). Always tucked into the panel's bottom corner,
   bleeding off the edge (negative margins; the panel clips). */
.mada-bizsys__dash {
	display: block;
	align-self: flex-end;
	inline-size: min(58.3%, 673px);
	block-size: auto;
	margin-block-start: var(--space-7);          /* air below the copy */
	margin-block-end: calc(-1 * var(--space-9)); /* flush to the bottom edge */
	margin-inline-end: calc(2.4% - var(--space-9));
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: var(--shadow-lg);
}
@media (max-width: 1024px) {
	.mada-bizsys__dash { inline-size: min(68%, 396px); } /* Tablet frames */
}
@media (max-width: 639px) {
	.mada-bizsys__dash { inline-size: min(93%, 410px); } /* Mobile frames */
}

.mada-bizsys__dev {
	min-inline-size: 0;
	background-color: var(--color-trust-80);     /* #002C45 */
	border-radius: var(--radius-3xl);
	padding: var(--space-9);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	align-items: flex-start;
	color: var(--color-white);
}
.mada-bizsys__dev h3 { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-xl); line-height: 28px; color: var(--color-white); }
.mada-bizsys__dev p { margin: 0; font-size: var(--fs-sm); line-height: 20px; color: rgba(245, 245, 246, 0.7); }
.mada-bizsys__code {
	margin: auto 0 0;
	inline-size: 100%;
	background-color: rgba(245, 245, 246, 0.06);
	border: var(--border-width-thin) solid rgba(245, 245, 246, 0.12);
	border-radius: var(--radius-xl);
	padding: var(--space-5);
	font-family: "JetBrains Mono", monospace;
	font-size: var(--fs-xs);                     /* 12 */
	line-height: 16px;
	color: var(--color-liquid-mint);             /* #56E3D6 */
	overflow-x: auto;
	direction: ltr;                              /* code stays LTR in RTL */
	text-align: left;
}

.mada-bizsys__compat {
	flex: 1 1 0;
	min-inline-size: 0;
	background-color: var(--color-trust-10);     /* #D6F0FF */
	border-radius: 24px;
	padding: var(--space-9);
}
.mada-bizsys__compat h3 { margin: 0 0 var(--space-2); font-weight: var(--fw-bold); font-size: var(--fs-xl); line-height: 28px; color: var(--color-black); }
.mada-bizsys__compat p { margin: 0 0 var(--space-6); font-size: var(--fs-md); line-height: 24px; color: var(--color-neutral-700); }
.mada-bizsys__chips {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}
.mada-bizsys__chips span {
	background-color: rgba(255, 255, 255, 0.5);  /* glass highlight medium */
	border-radius: var(--radius-xl);             /* 12 */
	padding: var(--space-4);
	text-align: center;
	font-size: var(--fs-md);
	line-height: 24px;
	color: var(--color-black);
}

.mada-bizsys__support {
	flex: 1.4 1 0;
	min-inline-size: 0;
	background-color: #FFFFFF;
	border: var(--border-width-thin) solid var(--color-neutral-200);
	border-radius: var(--radius-3xl);
	padding: var(--space-9);
	display: flex;
	gap: var(--space-6);
	align-items: center;
	justify-content: space-between;
}
.mada-bizsys__support h3 { margin: 0 0 var(--space-3); font-weight: var(--fw-bold); font-size: var(--fs-xl); line-height: 28px; color: var(--color-black); }
.mada-bizsys__support p { margin: 0; font-size: var(--fs-md); line-height: 24px; color: var(--color-neutral-600); max-inline-size: 46ch; }
/* Figma 4079:7073: 128px circle, 4px Core/White ring, shadow-lg. */
.mada-bizsys__support img {
	flex: 0 0 auto;
	inline-size: 128px;
	block-size: 128px;
	object-fit: cover;
	border-radius: var(--radius-full);
	border: var(--border-width-thick) solid var(--color-white);
	box-shadow: var(--shadow-lg);
}

/* ---- CTA band ---- */
.mada-bizcta {
	background-color: var(--color-trust-80);     /* #002C45 */
	padding-block: var(--pad-section-top) var(--pad-section-bottom);
}
.mada-bizcta__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-5);
}
.mada-bizcta__inner h2 {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-section);                    /* 36 */
	line-height: var(--lh-section);
	color: var(--color-white);
}
.mada-bizcta__inner p { margin: 0; font-size: var(--fs-md); line-height: 24px; color: rgba(245, 245, 246, 0.8); }
.mada-bizcta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); padding-block-start: var(--space-4); }
.mada-bizcta__note { font-size: var(--fs-xs) !important; line-height: 16px !important; color: var(--color-neutral-300) !important; }

/* teal outline variant (CTA "Talk to an expert") */
.mada-btn-sq--outline-teal {
	background-color: var(--color-white);
	border-color: var(--color-primary);
	color: var(--color-primary);
}
.mada-btn-sq--outline-teal:hover,
.mada-btn-sq--outline-teal:focus-visible { background-color: var(--color-mint-5); }

/* ---- Responsive ---- */
@media (max-width: 639px) {
	.mada-bizbanner__title { font-size: var(--fs-banner); line-height: var(--lh-banner); }
	.mada-bizsys__head h2 { font-size: var(--fs-section); line-height: var(--lh-section); }
	.mada-bizstats__card strong { font-size: var(--fs-4xl); line-height: 1.2; }
	.mada-bizsys__support { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 640px) {
	.mada-bizstats__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
	.mada-bizbanner__inner { flex-direction: row; gap: var(--space-17); }
	.mada-bizstats__inner { grid-template-columns: repeat(4, 1fr); }
	.mada-bizsys__row { flex-direction: row; }
	/* The 2.4:1 split belongs to the ROW only — as a column flex-basis:0
	   squashed the panel and clipped the dashboard strip out of view. */
	.mada-bizsys__panel { flex: 2.4 1 0; }
	.mada-bizsys__dev { flex: 1 1 0; }
}

/* Client feedback p35 (tablet 640-1024): banner content centred, title on
   one line, chart card wide. */
@media (min-width: 640px) and (max-width: 1024px) {
	.mada-bizbanner__text { align-items: center; text-align: center; }
	.mada-bizbanner__title span { display: inline; }
	.mada-bizbanner__title { font-size: var(--fs-banner); line-height: var(--lh-banner); }
	.mada-revcard, .mada-revcard-img { max-inline-size: 720px; inline-size: 100%; }
}

/* Client feedback p36: on mobile the stat cards are a swipeable snap row
   with dots, not a vertical list. Dots are injected by navigation.js. */
@media (max-width: 639px) {
	.mada-bizstats__inner {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-inline: var(--grid-margin);
		scroll-padding-inline: var(--grid-margin);
	}
	.mada-bizstats__inner::-webkit-scrollbar { display: none; }
	.mada-bizstats__card { flex: 0 0 80%; scroll-snap-align: start; }
}
/* ---- Slider indicator ("stepper") ---------------------------------------
   Round-3 feedback (Business, Section 1): "revisit the stepper color to match
   the Figma design."  The slide carries no node link, so these values were
   sampled 1:1 off the Figma render of the Business canvas (2001:5526), EN
   mobile frame — not eyeballed:

     active    16 x 4  #006EAD  TrustBlue/50  (= --color-secondary)
     inactive   8 x 4  #E0E2E8  Neutral/200   (= --color-neutral-200)
     gap        4      (--space-2)
     offset    27±1 below the card box → 28 (--space-8)

   Note the active segment is also WIDER than the inactive ones (16 vs 8) —
   the previous build drew all of them at 24x4, so the shape was wrong as
   well as the colour (was Primary teal on Neutral/300).
   Shared by the About approach/team carousels so the pattern stays one
   thing site-wide; see the note in the round-3 audit. */
.mada-carousel-dots { display: none; }
@media (max-width: 639px) {
	.mada-carousel-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--space-2);                     /* 4 */
		padding-block-start: var(--space-8);     /* 28 */
	}
	.mada-carousel-dots button {
		inline-size: 8px;
		block-size: 4px;
		border: 0;
		border-radius: var(--radius-full);
		background: var(--color-neutral-200);    /* #E0E2E8 */
		cursor: pointer;
		padding: 0;
		transition: inline-size 0.18s ease, background-color 0.18s ease;
	}
	.mada-carousel-dots button.is-active {
		inline-size: 16px;
		background: var(--color-secondary);      /* #006EAD */
	}
}
@media (prefers-reduced-motion: reduce) {
	.mada-carousel-dots button { transition: none; }
}

/* Restore the revenue-card chip overhang from tablet up (see the note on
   .mada-revcard__float — it is only clamped to avoid AR mobile overflow). */
@media (min-width: 640px) {
	.mada-revcard__float { inset-inline-end: calc(-1 * var(--space-6)); }
}

/* S31: "revisit the card size, padding, and font sizes for the tablet and
   mobile layouts." The stat cards carried desktop padding and a 48px figure at
   every width; both step down below the desktop band. */
@media (max-width: 1024px) {
	.mada-bizstats__card { padding: var(--space-7); }        /* 24 */
	.mada-bizstats__card strong { font-size: 36px; line-height: 44px; }
	.mada-bizstats__card p { font-size: var(--fs-lg); line-height: 24px; }
	.mada-bizstats__icon { inline-size: 40px; block-size: 40px; }
}