/* ==========================================================================
   Mazeed — front-end stylesheet
   1. Base (from the original design)
   2. Generated hover / focus rules (were style-hover / style-focus attributes)
   3. WordPress integration + editor prose
   4. Responsive layer (the design was authored at 1440px)
   ========================================================================== */

/* -------------------------------------------------------------- 1. base */

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: #FBFBFD;
	color: #14161F;
	font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

a { color: #165823; text-decoration: none; }
a:hover { color: #0E3A17; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

::selection { background: #E6EFE8; }

input, select, textarea, button { font-family: 'IBM Plex Sans Arabic', sans-serif; }

@keyframes mzRise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* --------------------------------------- 2. generated hover/focus rules */

.mzp0:hover{color:#165823 !important}
.mzp1:hover{background:#F1F2F7 !important;color:#165823 !important}
.mzp2:hover{background:#0E3A17 !important;color:#FBFBFD !important}
.mzp3:hover{color:#14161F !important}
.mzp4:hover{background:#F1F2F7 !important;color:#14161F !important}
.mzp5:hover{border-color:#165823 !important;box-shadow:0 1px 2px rgba(20,22,31,0.05),0 14px 32px rgba(20,22,31,0.07) !important}
.mzp6:hover{background:#165823 !important;color:#FBFBFD !important;border-color:#165823 !important}
.mzp7:hover{background:#252838 !important;color:#FBFBFD !important}
.mzp8:focus{border-color:#165823 !important}
.mzp9:hover{background:#0E3A17 !important}
.mzpa:hover{border-color:#165823 !important;color:#165823 !important}
.mzpb:hover{border-color:#165823 !important;box-shadow:0 1px 2px rgba(20,22,31,0.05),0 14px 32px rgba(20,22,31,0.07) !important;color:#14161F !important}
.mzpc:hover{border-color:#165823 !important;box-shadow:0 1px 2px rgba(20,22,31,0.05),0 18px 44px rgba(20,22,31,0.08) !important;color:#14161F !important}
.mzpd:hover{background:#165823 !important;color:#FBFBFD !important}
.mzpe:hover{background:#E6EFE8 !important;color:#165823 !important}

/* ------------------------------------------------ 3. WordPress plumbing */

.mz-skip {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 300;
	background: #165823;
	color: #FBFBFD;
	padding: 12px 20px;
	border-radius: 0 0 12px 12px;
	font-weight: 600;
}
.mz-skip:focus {
	inset-inline-start: 24px;
	color: #FBFBFD;
}

:focus-visible {
	outline: 2px solid #165823;
	outline-offset: 3px;
}

.mz-logo img,
.custom-logo {
	max-height: 40px;
	width: auto;
	display: block;
}

.mz-burger {
	display: none;
	margin-inline-start: auto;
	width: 42px;
	height: 42px;
	border: 1px solid #DFE1EB;
	border-radius: 12px;
	background: #FBFBFD;
	cursor: pointer;
	padding: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.mz-burger span {
	display: block;
	width: 18px;
	height: 2px;
	background: #14161F;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.mz-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mz-burger.is-open span:nth-child(2) { opacity: 0; }
.mz-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mz-nav-cta { display: none; }

/* --- images pulled from the media library ------------------------------- */

.mz-shell img { max-width: 100%; height: auto; }

.mz-cover {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.mz-thumb {
	position: relative;
	overflow: hidden;
	background: #F1F2F7;
}

/* --- prose: styles the content editors write in the block editor -------- */

.mz-prose {
	font-size: 19px;
	line-height: 1.85;
	color: #14161F;
	font-weight: 300;
}
.mz-prose > *:first-child { margin-top: 0; }
.mz-prose p { margin: 20px 0 0; }
.mz-prose h2 {
	margin: 56px 0 0;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: #14161F;
	scroll-margin-top: 96px;
}
.mz-prose h3 {
	margin: 40px 0 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	color: #14161F;
	scroll-margin-top: 96px;
}
.mz-prose h4 {
	margin: 32px 0 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: #14161F;
}
.mz-prose ul,
.mz-prose ol {
	margin: 20px 0 0;
	padding-inline-start: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mz-prose li { line-height: 1.8; }
.mz-prose li::marker { color: #165823; }
.mz-prose a { color: #165823; text-decoration: underline; text-underline-offset: 3px; }
.mz-prose a:hover { color: #0E3A17; }
.mz-prose strong { font-weight: 600; }
.mz-prose blockquote {
	margin: 32px 0 0;
	border-inline-start: 3px solid #165823;
	background: #E6EFE8;
	border-radius: 16px;
	padding: 26px 28px;
}
.mz-prose blockquote p {
	margin: 0;
	font-size: 22px;
	line-height: 1.7;
	font-weight: 600;
	color: #14161F;
}
.mz-prose blockquote cite {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 600;
	font-style: normal;
	color: #6B7086;
}
.mz-prose figure { margin: 40px 0 0; }
.mz-prose img { border-radius: 20px; display: block; }
.mz-prose figcaption {
	margin-top: 12px;
	font-weight: 600;
	font-size: 13px;
	color: #6B7086;
}
.mz-prose hr {
	margin: 48px 0 0;
	border: none;
	border-top: 1px solid #DFE1EB;
}
.mz-prose code {
	font-family: 'DM Mono', ui-monospace, monospace;
	font-size: 0.9em;
	background: #F1F2F7;
	border-radius: 6px;
	padding: 2px 6px;
}
.mz-prose pre {
	margin: 28px 0 0;
	background: #14161F;
	color: #FBFBFD;
	border-radius: 16px;
	padding: 22px 24px;
	overflow-x: auto;
	direction: ltr;
	text-align: left;
}
.mz-prose pre code { background: none; color: inherit; padding: 0; }
.mz-prose table {
	margin: 32px 0 0;
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	display: block;
	overflow-x: auto;
}
.mz-prose th,
.mz-prose td {
	border: 1px solid #DFE1EB;
	padding: 12px 14px;
	text-align: start;
}
.mz-prose th { background: #F1F2F7; font-weight: 600; }

/* --- the store-audit lead-magnet form ----------------------------------- */

.mz-finding:last-of-type { border-bottom: none !important; }

.mz-audit-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mz-audit-form label {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.mz-audit-form label > span {
	font-weight: 600;
	font-size: 13px;
	color: #6B7086;
}

.mz-audit-form__required { color: #165823; }

.mz-audit-form input,
.mz-audit-form select {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #DFE1EB;
	border-radius: 12px;
	padding: 13px 14px;
	font-size: 16px;
	color: #14161F;
	background: #FBFBFD;
	outline: none;
}

.mz-audit-form input:focus,
.mz-audit-form select:focus { border-color: #165823; }

/* LTR values (store URL, phone, email) still read from the right in an RTL form. */
.mz-audit-form .mz-ltr { text-align: right; }

.mz-audit-form__submit {
	margin-top: 6px;
	background: #165823;
	color: #FBFBFD;
	border: none;
	border-radius: 999px;
	padding: 16px;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
}

.mz-audit-form__note {
	margin: 2px 0 0;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.7;
	color: #6B7086;
	text-align: center;
}

/* Dark panel variant. */
.mz-audit-form--dark label > span { color: #9AA0B8; }
.mz-audit-form--dark input,
.mz-audit-form--dark select {
	border-color: #3A3E52;
	background: #252838;
	color: #FBFBFD;
}
.mz-audit-form--dark input::placeholder { color: #6B7086; }
.mz-audit-form--dark input:focus,
.mz-audit-form--dark select:focus { border-color: #4E9E62; }
.mz-audit-form--dark .mz-audit-form__required { color: #7FBF8C; }
.mz-audit-form--dark .mz-audit-form__note { color: #9AA0B8; }

/* ======================================================================
   SEO service page
   Desktop-led, card-driven layout in the Mazeed palette. Deliberately
   static: no scroll reveals, no counters, no drawn paths — the only script
   on the page is the screenshot lightbox.
   ====================================================================== */

.seo { --ink:#14161F; --mut:#6B7086; --brd:#DFE1EB; --grn:#165823; --grn2:#0E3A17;
       --tint:#E6EFE8; --surf:#FBFBFD; --wash:#F1F2F7; --pad:20px; }

.seo-wrap { max-width:1240px; margin:0 auto; padding:0 var(--pad); }
.seo-sec { padding:64px 0; }
.seo-sec--wash { background:var(--wash); border-block:1px solid var(--brd); }
/* Sits between two plain sections, so it needs its own hairlines to read as a
   band of its own rather than merging with the neighbours. */
.seo-sec--pale { background:var(--surf); border-block:1px solid var(--brd); }
/* The delay section is deliberately shorter than its neighbours: it lands
   harder as a single held breath than as a full screen of scrolling. */
.seo-sec--pale, .seo-sec--pale.seo-sec { padding-block:68px; }
.seo-sec--tint { background:linear-gradient(180deg,#EDF4EE 0%, #FBFBFD 100%); }

.seo-head { text-align:center; max-width:760px; margin:0 auto 36px; }
.seo-head--start { text-align:start; margin-inline:0; }
.seo-tagline { display:inline-flex; align-items:center; gap:8px; background:var(--tint); color:var(--grn);
  border-radius:999px; padding:7px 16px; font-size:13px; font-weight:600; margin-bottom:16px; }

.seo-h1 { margin:0; font-size:clamp(32px,4.4vw,54px); line-height:1.25; letter-spacing:-.015em; font-weight:700; color:var(--ink); text-wrap:pretty; }
.seo-h2 { margin:0; font-size:clamp(26px,3.2vw,40px); line-height:1.3; letter-spacing:-.015em; font-weight:700; color:var(--ink); text-wrap:pretty; }
.seo-h3 { margin:0; font-size:clamp(18px,1.5vw,21px); line-height:1.45; font-weight:700; color:var(--ink); }
.seo-lead { margin:16px 0 0; font-size:clamp(16px,1.35vw,19px); line-height:1.75; color:var(--mut); font-weight:300; text-wrap:pretty; }
.seo-p { margin:14px 0 0; font-size:clamp(15px,1.2vw,17px); line-height:1.8; color:var(--mut); font-weight:300; }
.seo-em { margin:18px 0 0; font-size:clamp(18px,1.9vw,25px); line-height:1.5; font-weight:700; color:var(--ink); }
.seo-em b { color:var(--grn); }

/* --- buttons ------------------------------------------------------------ */
.seo-cta { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.seo-head .seo-cta { justify-content:center; }
.seo-btn { display:inline-block; border-radius:999px; padding:15px 30px; font-size:16px; font-weight:600; text-align:center; }
.seo-btn--primary { background:var(--grn); color:var(--surf); box-shadow:0 8px 20px rgba(22,88,35,.22); }
.seo-btn--primary:hover { background:var(--grn2); color:var(--surf); }
.seo-btn--ghost { background:var(--surf); color:var(--ink); border:1px solid var(--brd); }
.seo-btn--ghost:hover { background:var(--wash); color:var(--ink); }
.seo-btn--light { background:var(--surf); color:var(--grn); }
.seo-btn--light:hover { background:var(--tint); color:var(--grn2); }
.seo-note { margin:12px 0 0; font-size:13px; font-weight:600; color:var(--mut); }

/* --- hero ---------------------------------------------------------------- */
.seo-hero { background:linear-gradient(180deg,#EDF4EE 0%, #FBFBFD 78%); padding:52px 0 56px; border-bottom:1px solid var(--brd); }
.seo-hero__grid { display:grid; grid-template-columns:1fr; gap:36px; align-items:center; }
.seo-hero__art { position:relative; }
.seo-hero__card { background:var(--surf); border:1px solid var(--brd); border-radius:20px; box-shadow:0 1px 2px rgba(20,22,31,.04), 0 24px 50px rgba(20,22,31,.10); overflow:hidden; }

/* --- SERP mock (static) ----------------------------------------------------
   A believable result page rather than skeleton bars: a paid row on top, the
   visitor's own organic result highlighted with title, breadcrumb, snippet and
   rich results, then muted competitors. */
.seo-serp__bar { display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--wash); border-bottom:1px solid var(--brd); }
.seo-serp__field { flex:1 1 auto; min-width:0; background:var(--surf); border:1px solid var(--brd); border-radius:999px; padding:11px 16px; display:flex; align-items:center; gap:10px; }
.seo-serp__q { font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seo-serp__caret { display:inline-block; width:2px; height:16px; background:var(--grn); flex:none; }
.seo-serp__list { padding:14px; display:flex; flex-direction:column; gap:10px; }

.seo-ad { border:1px solid var(--brd); border-radius:12px; padding:12px 14px; background:var(--surf); }
.seo-ad__top { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.seo-ad__lab { font-size:10.5px; font-weight:700; color:var(--mut); border:1px solid var(--brd); border-radius:5px; padding:2px 6px; }
.seo-ad__t { font-size:13.5px; color:#9AA0B8; }
.seo-ad__bars { display:flex; flex-direction:column; gap:5px; }
.seo-ad__bar { height:6px; border-radius:999px; background:#EDEFF5; }

.seo-hit { position:relative; border:1.5px solid var(--grn); background:var(--tint); border-radius:14px; padding:16px; box-shadow:0 8px 22px rgba(22,88,35,.13); }
.seo-hit__top { display:flex; align-items:center; gap:9px; margin-bottom:9px; flex-wrap:wrap; }
.seo-hit__rank { flex:none; width:22px; height:22px; border-radius:999px; background:var(--grn); color:var(--surf);
  display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; font-weight:800; }
.seo-hit__tag { flex:none; background:var(--grn); color:var(--surf); border-radius:999px; padding:4px 11px; font-size:11.5px; font-weight:600; }
.seo-hit__crumb { font-size:11.5px; color:#5E7A65; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seo-hit__t { margin:0 0 6px; font-size:17px; font-weight:700; line-height:1.4; color:var(--grn2); }
.seo-hit__d { margin:0; font-size:13.5px; line-height:1.65; color:#4A6350; }
.seo-hit__rich { margin-top:11px; padding-top:10px; border-top:1px solid rgba(22,88,35,.16); display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:#4A6350; }
.seo-hit__stars { color:#E8A317; letter-spacing:1px; font-size:12px; }
.seo-hit__dot { width:3px; height:3px; border-radius:999px; background:#9BB3A2; flex:none; }
.seo-hit__price { font-weight:700; color:var(--grn2); }

/* Muted competitor rows, used in the hero and in the "you are not here" mock. */
.seo-res { border:1px solid var(--brd); border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:11px; background:var(--surf); }
.seo-res__rank { flex:none; font-family:'DM Mono',monospace; font-size:11.5px; color:var(--mut); }
.seo-res__bars { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.seo-res__bar { height:7px; border-radius:999px; background:#E4E6EF; }
.seo-res__bar--s { width:58%; background:#EDEFF5; }
.seo-res__tag { flex:none; font-size:11px; font-weight:600; color:var(--mut); background:var(--wash); border-radius:999px; padding:4px 10px; white-space:nowrap; }

.seo-serp__note { padding:0 14px 14px; font-size:12px; font-weight:600; color:var(--mut); text-align:center; }

/* --- trust row under the hero CTAs ------------------------------------------ */
.seo-trust { margin-top:20px; display:flex; flex-wrap:wrap; gap:8px 20px; }
.seo-trust__i { display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--mut); }
.seo-trust__c { flex:none; width:17px; height:17px; border-radius:999px; background:var(--tint); color:var(--grn);
  display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; }

/* --- donut band ----------------------------------------------------------- */
.seo-donut { display:grid; grid-template-columns:1fr; gap:28px; align-items:center;
  background:var(--surf); border:1px solid var(--brd); border-radius:24px; padding:28px;
  box-shadow:0 1px 2px rgba(20,22,31,.04), 0 18px 40px rgba(20,22,31,.07); }
.seo-donut svg { display:block; width:100%; max-width:250px; height:auto; margin-inline:auto; }
.seo-donut__key { margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.seo-donut__row { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink); }
.seo-donut__sw { width:12px; height:12px; border-radius:4px; flex:none; }

/* --- logo strip ------------------------------------------------------------ */
.seo-logos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:26px; }
.seo-logo { border:1px solid var(--brd); background:var(--surf); border-radius:14px; height:80px; display:flex; align-items:center; justify-content:center; padding:14px; }
.seo-logo img { max-width:100%; max-height:44px; width:auto; height:auto; object-fit:contain; }

/* --- stat cards ------------------------------------------------------------ */
.seo-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.seo-kpi { border:1px solid var(--brd); background:var(--surf); border-radius:18px; padding:22px 18px; text-align:center; }
.seo-kpi__n { font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; font-weight:700; font-size:clamp(22px,2.4vw,31px); line-height:1.25; letter-spacing:-.01em; color:var(--grn); }
.seo-kpi__l { margin:9px 0 0; font-size:13px; line-height:1.5; color:var(--mut); }

/* --- generic cards ---------------------------------------------------------- */
.seo-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.seo-card { border:1px solid var(--brd); background:var(--surf); border-radius:18px; padding:24px; min-width:0; }
.seo-card__ic { width:44px; height:44px; border-radius:13px; background:var(--tint); color:var(--grn); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.seo-card__t { margin:0; font-size:19px; font-weight:700; line-height:1.4; color:var(--ink); }
.seo-card__b { margin:8px 0 0; font-size:15.5px; line-height:1.7; color:var(--mut); font-weight:300; }

/* --- checklist panel --------------------------------------------------------- */
.seo-panel { background:var(--ink); border-radius:24px; padding:28px; }
.seo-panel__t { margin:0 0 18px; font-size:20px; font-weight:700; color:var(--surf); }
.seo-check { display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-bottom:1px solid #2A2D3A; font-size:15.5px; line-height:1.6; color:#DDE0EA; }
.seo-check:last-child { border-bottom:0; }
.seo-check__i { flex:none; width:22px; height:22px; border-radius:999px; background:rgba(127,215,154,.16); color:#7FD79A; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; margin-top:1px; }

/* --- comparison --------------------------------------------------------------- */
.seo-vs { display:grid; grid-template-columns:1fr; gap:16px; }
.seo-vs__col { border-radius:22px; padding:26px; }
.seo-vs__col--us { background:var(--grn); }
.seo-vs__col--them { background:var(--surf); border:1px solid var(--brd); }
.seo-vs__h { display:flex; align-items:center; gap:10px; margin-bottom:16px; font-size:19px; font-weight:700; }
.seo-vs__col--us .seo-vs__h { color:var(--surf); }
.seo-vs__col--them .seo-vs__h { color:var(--mut); }
.seo-pill { display:block; border-radius:12px; padding:12px 15px; font-size:15px; line-height:1.55; margin-bottom:9px; }
.seo-vs__col--us .seo-pill { background:rgba(255,255,255,.12); color:#EAF3EC; }
.seo-vs__col--them .seo-pill { background:var(--wash); color:var(--mut); }
.seo-pill:last-child { margin-bottom:0; }

/* --- case studies -------------------------------------------------------------- */
.seo-cases { display:grid; grid-template-columns:1fr; gap:16px; }
.seo-case { border:1px solid var(--brd); background:var(--surf); border-radius:20px; overflow:hidden; min-width:0; }
.seo-case__shot { position:relative; display:block; width:100%; border:0; padding:0; margin:0; background:var(--wash); border-bottom:1px solid var(--brd); cursor:zoom-in; line-height:0; }
.seo-case__shot img { display:block; width:100%; height:auto; }
.seo-case__zoom { position:absolute; inset-inline-end:10px; bottom:10px; display:inline-flex; align-items:center; gap:6px;
  background:rgba(20,22,31,.86); color:var(--surf); border-radius:999px; padding:6px 11px; font-size:11.5px; font-weight:600; line-height:1; }
.seo-case__body { padding:20px; }
.seo-case__t { margin:0; font-size:18px; font-weight:700; line-height:1.45; color:var(--ink); }
.seo-case__b { margin:10px 0 0; font-size:15px; line-height:1.75; color:var(--mut); font-weight:300; }
.seo-case__kpis { margin-top:16px; padding-top:14px; border-top:1px solid var(--brd); display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:center; }
.seo-case__kn { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:17px; color:var(--grn); letter-spacing:-.02em; }
.seo-case__kl { margin:4px 0 0; font-size:11.5px; color:var(--mut); }

/* --- dashboards ----------------------------------------------------------------- */
.seo-shots { display:grid; grid-template-columns:1fr; gap:14px; }
.seo-shot { border:1px solid var(--brd); background:var(--surf); border-radius:18px; overflow:hidden; }
.seo-shot__img { display:block; width:100%; border:0; padding:0; background:var(--wash); cursor:zoom-in; line-height:0; }
/* The four dashboards have different native ratios; a fixed tile with a
   top-anchored crop keeps the row even instead of leaving dead space under the
   shorter ones. Full images are one tap away in the lightbox. */
.seo-shot__img img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center; }
.seo-shot__cap { padding:14px 18px; font-size:14px; font-weight:600; color:var(--mut); border-top:1px solid var(--brd); }

/* --- steps ------------------------------------------------------------------------ */
.seo-steps { display:grid; grid-template-columns:1fr; gap:12px; counter-reset:seo; }
.seo-step { position:relative; border:1px solid var(--brd); background:var(--surf); border-radius:18px; padding:24px 22px; }
.seo-step__n { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:11px;
  background:var(--grn); color:var(--surf); font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:15px; margin-bottom:12px; }
.seo-step__t { margin:0; font-size:18px; font-weight:700; line-height:1.4; color:var(--ink); }
.seo-step__b { margin:7px 0 0; font-size:15px; line-height:1.7; color:var(--mut); font-weight:300; }

/* --- posts ------------------------------------------------------------------------- */
.seo-posts { display:grid; grid-template-columns:1fr; gap:16px; }
.seo-post { border:1px solid var(--brd); background:var(--surf); border-radius:18px; overflow:hidden; color:var(--ink); display:flex; flex-direction:column; }
.seo-post__thumb { background:var(--wash); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600; color:var(--mut); overflow:hidden; }
.seo-post__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.seo-post__body { padding:18px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; }
.seo-post__meta { font-size:12px; font-weight:600; color:var(--grn); }
.seo-post__t { margin:0; font-size:17px; font-weight:700; line-height:1.5; }
.seo-post__more { margin-top:auto; font-size:14px; font-weight:600; color:var(--grn); }

/* --- closing band --------------------------------------------------------------------- */
.seo-close { background:var(--ink); border-radius:26px; padding:36px 26px; text-align:center; }
.seo-close .seo-h2 { color:var(--surf); }
.seo-close .seo-lead { color:#C9CCDA; margin-inline:auto; max-width:56ch; }
.seo-close .seo-cta { justify-content:center; }

/* --- lightbox --------------------------------------------------------------------------- */
.seo-lb { position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; background:rgba(20,22,31,.94); padding:14px; }
.seo-lb.is-open { display:flex; }
.seo-lb__scroll { width:100%; max-height:86vh; overflow:auto; -webkit-overflow-scrolling:touch; border-radius:12px; direction:ltr; }
.seo-lb.is-open .seo-lb__scroll img { display:block; width:auto; min-width:100%; max-width:none; height:auto; border-radius:12px; }
.seo-lb__close { position:absolute; top:14px; inset-inline-end:14px; width:42px; height:42px; border-radius:999px;
  border:1px solid rgba(251,251,253,.3); background:rgba(20,22,31,.6); color:var(--surf); font-size:18px; font-weight:600; cursor:pointer; line-height:1; }
.seo-lb__hint { position:absolute; bottom:14px; inset-inline:0; text-align:center; font-size:12.5px; font-weight:600; color:#9AA0B8; }

/* --- comparison table (paired rows) --------------------------------------- */
.seo-table { border:1px solid var(--brd); border-radius:20px; overflow:hidden; background:var(--surf); }
.seo-table__head, .seo-table__row { display:grid; grid-template-columns:1fr 1fr; }
.seo-table__head > span { padding:16px 18px; font-size:15px; font-weight:700; text-align:center; }
.seo-table__head > span:first-child { background:var(--grn); color:var(--surf); }
.seo-table__head > span:last-child { background:var(--wash); color:var(--mut); }
.seo-table__row > span { padding:15px 18px; font-size:15px; line-height:1.6; border-top:1px solid var(--brd); text-align:center; }
.seo-table__row > span:first-child { color:var(--ink); font-weight:600; background:#F5FAF6; }
.seo-table__row > span:last-child { color:var(--mut); }

/* --- scorecard: vanity metrics vs what we answer for ------------------------ */
.seo-score { display:grid; grid-template-columns:1fr; gap:14px; }
.seo-score__col { border-radius:20px; padding:24px; }
.seo-score__col--no { background:var(--wash); border:1px solid var(--brd); }
.seo-score__col--yes { background:var(--grn); }
.seo-score__h { font-size:17px; font-weight:700; margin-bottom:14px; text-align:center; }
.seo-score__col--no .seo-score__h { color:var(--mut); }
.seo-score__col--yes .seo-score__h { color:var(--surf); }
.seo-score__i { display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 0; font-size:15.5px; line-height:1.6; text-align:center; }
.seo-score__col--no .seo-score__i { color:var(--mut); }
.seo-score__col--yes .seo-score__i { color:#EAF3EC; }
.seo-score__m { flex:none; width:20px; height:20px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; margin-top:2px; }
.seo-score__col--no .seo-score__m { background:#E4E6EF; color:var(--mut); }
.seo-score__col--yes .seo-score__m { background:rgba(255,255,255,.2); color:var(--surf); }

/* --- the cost of waiting -----------------------------------------------------
   Deliberately stark: one alarming figure, three escalating rows, nothing else. */
.seo-cost { text-align:center; }
.seo-cost__lead { margin:0 auto; max-width:46ch; font-size:clamp(16px,1.4vw,19px); line-height:1.75; color:var(--mut); font-weight:300; }
.seo-cost__big { margin:22px 0 6px; font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; font-weight:700;
  font-size:clamp(38px,5.6vw,72px); line-height:1.25; letter-spacing:-.02em; color:#D93A3A; }
.seo-cost__cap { margin:0 auto; max-width:34ch; font-size:clamp(15px,1.3vw,18px); line-height:1.7; color:var(--mut); }
/* Three beats of the same story read faster side by side than stacked, and it
   keeps this section from running the full height of the screen. */
.seo-cost__rows { margin:26px auto 0; max-width:620px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.seo-cost__row { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--brd); border-radius:12px; padding:16px 12px; background:var(--wash); text-align:center; }
.seo-cost__row span { font-size:15.5px; color:var(--mut); }
.seo-cost__row b { font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; font-weight:700; font-size:clamp(17px,1.8vw,22px);
  line-height:1.3; letter-spacing:-.01em; color:#B23A3A; }
.seo-cost__row--peak { border-color:#D93A3A; background:rgba(217,58,58,.06); }
.seo-cost__row--peak span { color:#8E3A3A; }
.seo-cost__row--peak b { color:#D93A3A; }
.seo-cost__ass { margin:14px 0 0; font-size:12.5px; line-height:1.6; color:var(--mut); }
.seo-cost__kicker { margin:24px 0 0; font-size:clamp(17px,1.8vw,22px); line-height:1.5; font-weight:700; color:var(--ink); }
.seo-cost__kicker b { color:#D93A3A; }

/* --- doubt / mock report ------------------------------------------------------ */
.seo-doubt { border:1px solid var(--brd); background:var(--surf); border-radius:20px; overflow:hidden; }
.seo-doubt__bar { background:var(--wash); border-bottom:1px solid var(--brd); padding:14px 18px; font-size:13.5px; font-weight:600; color:var(--mut); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.seo-doubt__ok { background:var(--tint); color:var(--grn); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:600; }
.seo-doubt__body { padding:20px; }
.seo-doubt__q { display:flex; align-items:flex-start; gap:11px; padding:12px 0; border-bottom:1px dashed var(--brd); font-size:15.5px; line-height:1.6; color:var(--ink); }
.seo-doubt__q:last-of-type { border-bottom:0; }
.seo-doubt__mark { flex:none; width:22px; height:22px; border-radius:999px; background:#FBE3E6; color:#98243A; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }

/* --- rank → click → order chain ------------------------------------------------ */
.seo-chain { display:grid; grid-template-columns:1fr; gap:12px; }
.seo-chain__i { border:1px solid var(--brd); background:var(--surf); border-radius:16px; padding:20px; text-align:center; }
.seo-chain__i--on { border-color:var(--grn); background:var(--tint); }
.seo-chain__ic { width:40px; height:40px; border-radius:12px; background:var(--wash); color:var(--mut); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.seo-chain__i--on .seo-chain__ic { background:var(--grn); color:var(--surf); }
.seo-chain__t { margin:0; font-size:17px; font-weight:700; color:var(--ink); }
.seo-chain__b { margin:6px 0 0; font-size:14px; line-height:1.6; color:var(--mut); }

/* --- "you are not here" slot ---------------------------------------------------- */
.seo-res--gone { border-style:dashed; border-color:#E4B4B4; background:#FDF6F6; }
.seo-res--gone .seo-res__tag { color:#98243A; background:#FBE3E6; }
.seo-res--gone .seo-res__rank { color:#98243A; }

/* ======================= tablet ======================= */
@media (min-width:720px) {
	.seo { --pad:32px; }
	.seo-sec { padding:80px 0; }
	.seo-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }
	.seo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
	.seo-cases, .seo-shots, .seo-posts { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.seo-vs { grid-template-columns:1fr 1fr; }
	.seo-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.seo-logos { grid-template-columns:repeat(6,minmax(0,1fr)); }
	.seo-donut { grid-template-columns:260px 1fr; padding:32px; gap:36px; }
	.seo-score { grid-template-columns:1fr 1fr; gap:16px; }
	.seo-chain { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ======================= desktop ======================= */
@media (min-width:1040px) {
	.seo { --pad:44px; }
	.seo-sec { padding:100px 0; }
	.seo-hero { padding:76px 0 84px; }
	.seo-hero__grid { grid-template-columns:1.04fr .96fr; gap:64px; }
	.seo-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
	.seo-steps { grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
	.seo-steps--6 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
	.seo-posts { grid-template-columns:repeat(3,minmax(0,1fr)); }
	.seo-split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
	.seo-split > * { min-width:0; }
	.seo-close { padding:56px; }
	.seo-h1 { max-width:18ch; }
	.seo-head--start .seo-h2 { max-width:20ch; }
	.seo-head--start .seo-lead { max-width:52ch; }
}

/* =========================================================================
   Paid-ads page. Shares the service-page system above (the seo-* classes are
   the shared shell at this point, used by both service templates); only the
   two visuals that are specific to advertising live here.
   ========================================================================= */

/* a problem list, same shape as .seo-check but marked as a fault */
.seo-check--x .seo-check__i { background:#FBE3E6; color:#98243A; }

/* hero: a static campaign panel */
.ads-stats { padding:18px 18px 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ads-stat { border:1px solid var(--brd); border-radius:12px; padding:12px 14px; min-width:0; }
.ads-stat__l { font-size:12.5px; font-weight:600; color:var(--mut); }
.ads-stat__v { margin-top:5px; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.ads-stat__n { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:clamp(21px,2.2vw,26px);
  letter-spacing:-.02em; color:var(--ink); line-height:1; }
.ads-stat__u { font-size:12.5px; color:var(--mut); }
.ads-stat__d { font-size:12.5px; font-weight:600; color:#0E7A6B; }

.ads-funnel { padding:16px 18px 6px; display:flex; flex-direction:column; align-items:center; gap:7px; }
.ads-funnel__h { width:100%; display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.ads-funnel__h span:first-child { font-size:13px; font-weight:600; color:var(--ink); }
.ads-funnel__h span:last-child { font-size:12px; font-weight:600; color:var(--mut); }
.ads-fn { border-radius:10px; padding:11px 15px; display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.ads-fn b { font-size:14px; font-weight:600; }
.ads-fn span { font-family:'DM Mono',monospace; font-size:13px; }
.ads-fn--top { width:100%; background:var(--tint); color:var(--grn); }
.ads-fn--mid { width:70%; background:#3C7A49; color:var(--surf); }
.ads-fn--low { width:44%; background:var(--grn); color:var(--surf); }
.ads-fn__gap { color:#C9CDDB; }

/* the budget-split chart. Only this page uses .seo-donut, and at full wrap
   width the legend strands itself far from the chart, so cap it. */
.seo-donut { max-width:880px; margin-inline:auto; }
.ads-donut__note { margin:16px 0 0; font-size:12.5px; line-height:1.6; color:var(--mut); }
.ads-donut__hole { font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; font-weight:700; fill:var(--ink); }
.ads-donut__sub { font-size:9px; fill:#6B7086; font-weight:400; }
.seo-donut__row b { margin-inline-start:auto; font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; font-weight:700; }

/* an FAQ card reads better with the question carrying the weight */
.ads-faq__q { margin:0; font-size:17px; font-weight:700; line-height:1.5; color:var(--ink); }
.ads-faq__a { margin:10px 0 0; font-size:15px; line-height:1.75; color:var(--mut); font-weight:300; }

/* =========================================================================
   Two-step lead form (SEO page modal) and the thank-you page.
   ========================================================================= */

.mz-steps { display:flex; flex-direction:column; gap:14px; }
.mz-steps__bar { height:4px; border-radius:999px; background:#E6E8EF; overflow:hidden; }
.mz-steps__fill { display:block; height:100%; width:25%; background:#165823; border-radius:inherit; transition:width .2s ease; }
.mz-steps__count { font-size:12.5px; font-weight:600; color:#6B7086; margin-top:-6px; }

.mz-step { border:0; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:14px; }
.mz-step__q { padding:0; margin:0 0 2px; font-size:19px; font-weight:700; line-height:1.5; color:#14161F; }

/* With the script running, only the current step shows. Without it, every
   step renders and the form still posts in one go. */
.mz-steps.is-js .mz-step { display:none; }
.mz-steps.is-js .mz-step.is-current { display:flex; }
.mz-steps:not(.is-js) [data-step-next],
.mz-steps:not(.is-js) [data-step-back],
.mz-steps:not(.is-js) .mz-steps__bar,
.mz-steps:not(.is-js) .mz-steps__count { display:none; }

.mz-field { display:flex; flex-direction:column; gap:7px; }
.mz-field__l { font-weight:600; font-size:13px; color:#6B7086; }
.mz-field__in { border:1px solid #DFE1EB; border-radius:12px; padding:13px 14px; font-size:16px; color:#14161F;
  background:#FBFBFD; outline:none; font-family:inherit; width:100%; box-sizing:border-box; }
.mz-field__in:focus { border-color:#165823; box-shadow:0 0 0 3px rgba(22,88,35,.14); }
.mz-field__in--ltr { text-align:right; }
.mz-field__in:user-invalid { border-color:#D98A8A; }

.mz-choices { display:flex; flex-direction:column; gap:9px; }
.mz-choice { position:relative; display:block; cursor:pointer; }
/* The radio stays in the accessibility tree and keyboard order. */
.mz-choice__in { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.mz-choice__box { display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid #DFE1EB; border-radius:14px;
  padding:14px 16px; background:#FBFBFD; transition:border-color .15s, background-color .15s; }
.mz-choice:hover .mz-choice__box { border-color:#B9BECF; }
.mz-choice__dot { flex:none; width:18px; height:18px; border-radius:999px; border:2px solid #C4C8D6; background:#FBFBFD; box-sizing:border-box; }
.mz-choice__t { font-size:16px; font-weight:600; color:#14161F; }
.mz-choice__note { font-size:13px; font-weight:600; color:#98243A; }
.mz-choice__in:checked + .mz-choice__box { border-color:#165823; background:#EDF4EE; }
.mz-choice__in:checked + .mz-choice__box .mz-choice__dot { border-color:#165823; border-width:5px; }
.mz-choice__in:focus-visible + .mz-choice__box { box-shadow:0 0 0 3px rgba(22,88,35,.22); }
.mz-choice--below .mz-choice__t { color:#6B7086; }
.mz-choice--below .mz-choice__in:checked + .mz-choice__box { border-color:#D98A8A; background:#FDF6F6; }
.mz-choice--below .mz-choice__in:checked + .mz-choice__box .mz-choice__dot { border-color:#98243A; }

.mz-steps__btn { margin-top:4px; background:#165823; color:#FBFBFD; border:none; border-radius:999px; padding:15px;
  font-size:17px; font-weight:600; cursor:pointer; font-family:inherit; }
.mz-steps__btn:hover { background:#0E3A17; }
.mz-steps__btn:disabled { opacity:.7; cursor:wait; }
/* After a below-minimum submission only the reply remains. */
.mz-steps[data-done] .mz-step__q,
.mz-steps[data-done] .mz-choices,
.mz-steps[data-done] .mz-steps__btn,
.mz-steps[data-done] .mz-steps__back,
.mz-steps[data-done] .mz-steps__count { display:none; }
.mz-steps__back { align-self:center; background:none; border:0; padding:4px 10px; font-size:14px; font-weight:600;
  color:#6B7086; cursor:pointer; font-family:inherit; }
.mz-steps__back:hover { color:#14161F; }

/* thank-you page */
.mz-thanks { padding-block:88px 104px; }
.mz-thanks__card { max-width:640px; margin:0 auto; text-align:center; background:#FBFBFD; border:1px solid #DFE1EB;
  border-radius:28px; padding:48px 32px; box-shadow:0 1px 2px rgba(20,22,31,.04), 0 18px 44px rgba(20,22,31,.07); }
.mz-thanks__ic { width:72px; height:72px; margin:0 auto 22px; border-radius:999px; background:#E6EFE8; color:#165823;
  display:flex; align-items:center; justify-content:center; }
.mz-thanks__t { margin:0; font-size:clamp(24px,3vw,34px); font-weight:700; line-height:1.45; color:#14161F; text-wrap:balance; }
.mz-thanks__p { margin:16px auto 0; max-width:44ch; font-size:18px; line-height:1.75; color:#6B7086; font-weight:300; }
.mz-thanks__wa { margin:30px auto 0; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:#165823; color:#FBFBFD; border-radius:999px; padding:16px 30px; font-size:17px; font-weight:600;
  box-shadow:0 6px 18px rgba(22,88,35,.22); text-decoration:none; }
.mz-thanks__wa:hover { background:#0E3A17; color:#FBFBFD; }
.mz-thanks__home { display:block; margin-top:18px; font-size:15px; font-weight:600; color:#6B7086; text-decoration:none; }
.mz-thanks__home:hover { color:#14161F; }

/* --- pagination --------------------------------------------------------- */

.mz-pagination {
	margin-top: 56px;
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.mz-pagination .page-numbers {
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #DFE1EB;
	border-radius: 999px;
	background: #FBFBFD;
	color: #14161F;
	font-size: 15px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mz-pagination .page-numbers:hover { border-color: #165823; color: #165823; }
.mz-pagination .page-numbers.current {
	background: #165823;
	border-color: #165823;
	color: #FBFBFD;
}
.mz-pagination .page-numbers.dots { border-color: transparent; }

/* --- WordPress core classes -------------------------------------------- */

.alignwide { max-width: min(1100px, 100%); }
.alignfull { max-width: 100%; }
.aligncenter { margin-inline: auto; }
.alignright { float: right; margin: 0 0 20px 24px; }
.alignleft  { float: left;  margin: 0 24px 20px 0; }
.wp-caption-text { font-size: 13px; font-weight: 600; color: #6B7086; margin-top: 10px; }
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ---------------------------------------------------- 4. responsive layer

   The artboards were drawn at a fixed 1440px width using inline styles and no
   media queries, so this layer re-flows those layouts at narrower viewports.
   The selectors match on the inline styles themselves because the design
   markup carries almost no class names of its own.

   The single most important rule here is `min-width: 0` on grid and flex
   children: both default to `min-width: auto`, which stops a track from ever
   shrinking below its content, and that is what pushed whole sections off the
   side of the screen.
   ----------------------------------------------------------------------- */

/* -- applies at every width: nothing may exceed the viewport -------------- */

.mz-shell {
	max-width: 100vw;
}

.mz-shell img,
.mz-shell svg,
.mz-shell video,
.mz-shell iframe {
	max-width: 100%;
}

/* Long URLs, emails and Latin strings inside Arabic copy. */
.mz-shell p,
.mz-shell h1,
.mz-shell h2,
.mz-shell h3,
.mz-shell h4,
.mz-shell li,
.mz-shell td,
.mz-shell th,
.mz-shell figcaption {
	overflow-wrap: break-word;
}

@media (max-width: 1180px) {
	.mz-shell [style*="max-width:1280px"] {
		padding-inline: 32px !important;
	}
	.mz-shell h1 { font-size: clamp(38px, 5vw, 68px) !important; }
	.mz-shell h2 { font-size: clamp(28px, 3.6vw, 44px) !important; }

	/* Two-column article/aside layouts get cramped before they stack. */
	.mz-shell [style*="grid-template-columns:1fr 300px"],
	.mz-shell [style*="grid-template-columns:1fr 280px"] {
		grid-template-columns: minmax(0, 1fr) 260px !important;
		gap: 40px !important;
	}
}

/* ---------------------------------------------------------- tablet & below */

/* ------------------------------------------- navigation drawer breakpoint

   Wider than the layout breakpoint below: the header holds the whole menu plus
   two call-to-action buttons ("افحص متجرك" and "احجز اجتماعك"), and those stop
   fitting on one line well before the page layout needs to stack.
   ----------------------------------------------------------------------- */

@media (max-width: 1100px) {
	/* --- navigation becomes a drawer ------------------------------------ */

	/* The markup carries inline display values, so these need !important. */
	.mz-burger { display: flex; }
	.mz-header-actions { display: none !important; }
	.mz-nav-cta { display: block; }

	.mz-header-bar {
		flex-wrap: wrap;
		gap: 16px !important;
		padding: 12px 20px !important;
	}

	.mz-nav {
		display: none !important;
		width: 100%;
		flex-direction: column;
		align-items: stretch !important;
		gap: 4px !important;
		padding: 8px 0 12px;
		border-top: 1px solid #DFE1EB;
	}
	.mz-nav.is-open { display: flex !important; }
	.mz-nav > a,
	.mz-nav .mz-dd > summary {
		padding: 12px 4px;
		font-size: 17px !important;
	}
	.mz-nav .mz-dd { position: static !important; }
	.mz-nav .mz-dd-panel {
		position: static !important;
		box-shadow: none !important;
		border: none !important;
		padding: 0 !important;
		min-width: 0 !important;
		background: transparent !important;
	}
	.mz-nav .mz-dd-panel a { padding-inline-start: 18px !important; }
	.mz-nav-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
	.mz-nav-cta a { display: block; text-align: center; }

}

@media (max-width: 960px) {

	/* --- the rule everything else depends on ---------------------------- */

	/* Grid tracks default to min-width:auto and refuse to shrink below their
	   content, which is what pushed whole sections off the side of the phone.
	   This is deliberately scoped to grid children: applying it to flex items
	   as well squeezes short labels ("الحملات", "تم النشر") to half their
	   width and clips the text. Flex rows are handled by wrapping instead. */
	.mz-shell [style*="display:grid"] > *,
	.mz-shell [style*="display: grid"] > * {
		min-width: 0;
	}

	/* Every multi-column track collapses to one shrinkable column. */
	.mz-shell [style*="grid-template-columns"] {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 28px !important;
	}

	/* Flex rows laid out for 1440px wrap rather than crushing their labels.
	   A row that already fits is unaffected. */
	.mz-shell [style*="display:flex"]:not([style*="flex-direction:column"]):not([data-slider-track]),
	.mz-shell [style*="display: flex"]:not([style*="flex-direction: column"]):not([data-slider-track]) {
		flex-wrap: wrap;
	}

	/* Labels must never be squeezed narrower than their text. */
	.mz-shell [style*="white-space:nowrap"] { flex: none; }


	/* --- page rhythm ---------------------------------------------------- */

	.mz-shell [style*="max-width:1280px"] {
		padding-inline: 20px !important;
	}
	.mz-shell section[style*="padding"] {
		padding-block: 48px !important;
	}

	/* Cards that overlapped each other in the 1440px composition. */
	.mz-shell [style*="margin-inline-end:56px"],
	.mz-shell [style*="margin-inline-end:64px"],
	.mz-shell [style*="margin-inline-start:56px"] {
		margin-inline: 0 !important;
	}
	.mz-shell [style*="margin:-28px"] { margin: 20px 0 0 !important; }

	/* Sticky sidebars have nothing to stick beside once stacked. */
	.mz-shell aside[style*="position:sticky"] {
		position: static !important;
	}

	/* Fixed heights sized for the desktop composition. */
	.mz-shell [style*="min-height:308px"] { min-height: 200px !important; }
	.mz-shell [style*="height:360px"] { height: 200px !important; }
	.mz-shell [style*="height:300px"] { height: 200px !important; }

	/* Slider arrows were parked outside the frame; bring them inside and centre
	   them on the image, which keeps them clear of the caption underneath. */
	.mz-shell [data-slider-prev] { inset-inline-end: 6px !important; }
	.mz-shell [data-slider-next] { inset-inline-start: 6px !important; }
	.mz-shell [data-slider-prev],
	.mz-shell [data-slider-next] {
		top: 106px !important;
		z-index: 3;
	}

	.mz-footer-grid { gap: 36px !important; }

	/* Big LTR figures (stat numbers) would flush left once their column spans
	   the full width; `start` resolves against their own dir, so name the side. */
	.mz-shell div[dir="ltr"] { text-align: right; }

	/* Decorative empty blocks were positioned against the 1440px layout and
	   land behind the copy once it reflows. */
	.mz-shell [style*="position:absolute"][style*="border-radius:32px"]:empty { display: none; }

	/* Rows of pills/tabs scroll rather than overflow. */
	.mz-shell [style*="overflow-x:auto"] {
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mz-shell [style*="overflow-x:auto"]::-webkit-scrollbar { display: none; }
}

/* ----------------------------------------------------------------- phones */

@media (max-width: 640px) {
	.mz-shell h1 { font-size: clamp(30px, 8vw, 40px) !important; line-height: 1.35 !important; }
	.mz-shell h2 { font-size: clamp(24px, 6.4vw, 32px) !important; }
	.mz-shell h3 { font-size: 20px !important; }

	.mz-shell [style*="font-size:68px"],
	.mz-shell [style*="font-size:60px"],
	.mz-shell [style*="font-size:56px"],
	.mz-shell [style*="font-size:52px"] { font-size: 32px !important; }
	.mz-shell [style*="font-size:48px"],
	.mz-shell [style*="font-size:44px"],
	.mz-shell [style*="font-size:40px"],
	.mz-shell [style*="font-size:38px"] { font-size: 27px !important; }
	.mz-shell [style*="font-size:36px"],
	.mz-shell [style*="font-size:34px"] { font-size: 24px !important; }
	.mz-shell [style*="font-size:30px"],
	.mz-shell [style*="font-size:28px"] { font-size: 22px !important; }
	.mz-shell [style*="font-size:24px"],
	.mz-shell [style*="font-size:22px"] { font-size: 19px !important; }
	.mz-shell [style*="font-size:20px"],
	.mz-shell [style*="font-size:19px"] { font-size: 17px !important; }

	/* Generous desktop padding on cards and panels. */
	.mz-shell [style*="padding:64px"],
	.mz-shell [style*="padding:56px"],
	.mz-shell [style*="padding:48px"],
	.mz-shell [style*="padding:44px"],
	.mz-shell [style*="padding:40px"],
	.mz-shell [style*="padding:36px"],
	.mz-shell [style*="padding:34px"],
	.mz-shell [style*="padding:32px"] { padding: 22px !important; }

	.mz-shell [style*="padding:56px 64px"],
	.mz-shell [style*="padding:48px 56px"] { padding: 26px 22px !important; }

	.mz-shell [style*="border-radius:32px"] { border-radius: 22px !important; }

	/* Buttons and CTA rows go full width rather than wrapping awkwardly. */
	.mz-shell [style*="border-radius:999px"][style*="padding:16px 32px"],
	.mz-shell [style*="border-radius:999px"][style*="padding:16px 28px"],
	.mz-shell [style*="border-radius:999px"][style*="padding:14px 28px"] {
		display: block !important;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}

	.mz-prose { font-size: 17px; }
	.mz-prose h2 { font-size: 26px; margin-top: 40px; }
	.mz-prose h3 { font-size: 20px; }
	.mz-prose blockquote { padding: 20px 22px; }
	.mz-prose blockquote p { font-size: 19px; }
	.mz-prose ul,
	.mz-prose ol { padding-inline-start: 20px; }

	.mz-modal-card { padding: 22px !important; border-radius: 20px !important; }

	.mz-footer-bottom { flex-direction: column; align-items: flex-start !important; }

	/* The floating WhatsApp button sat over the page's own CTAs. */
	.mz-whatsapp {
		right: 14px !important;
		bottom: 14px !important;
		width: 48px !important;
		height: 48px !important;
	}
}