/**
 * Browse Games block ([esl_gamzam_browse_games]) + legacy pricing-style sections if present.
 * Purple / yellow Gamzam vibe; responsive; does not remove theme sidebars.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&family=Space+Grotesk:wght@500;600;700;800&display=swap');

/*
 * Marketing body / “small” text — matches Browse Games hero intro
 * (#esl-gamzam-browse: text-base sm:text-lg, leading-8, text-slate-600, Inter).
 * Wrap main content (below the shortcode sticky header) in .esl-gamzam-marketing-copy.
 *
 * Exception: [esl_game_show_landing] / #esl-gamzam-landing — do not use this class or
 * extend these rules to the landing template; it keeps its own typography (Space Grotesk, etc.).
 */
.esl-gamzam-marketing-copy p,
.esl-gamzam-marketing-copy li,
.esl-gamzam-marketing-copy table td,
.esl-gamzam-marketing-copy table th {
	font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
	font-size: 1rem !important;
	line-height: 2rem !important;
	font-weight: 400 !important;
}

/* Marketing headings: consistent “gamified” display style across pages. */
.esl-gamzam-marketing-copy h1,
.esl-gamzam-marketing-copy h2,
.esl-gamzam-marketing-copy h3 {
	font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif !important;
	letter-spacing: -0.02em !important;
}

.esl-gamzam-marketing-copy h1 {
	font-weight: 900 !important;
	font-size: clamp(2rem, 3.2vw + 1rem, 3.25rem) !important;
	line-height: 1.06 !important;
}

/* Hero headline (H1) color across marketing pages */
body.esl-gamzam-marketing-page .esl-gamzam-marketing-copy .esl-gamzam-legal-hero h1 {
	color: #ea580c !important; /* Tailwind orange-600 */
}
body.esl-gamzam-marketing-page #esl-gamzam-browse .esl-browse-hero-section h1 {
	color: #ea580c !important; /* Tailwind orange-600 */
}

.esl-gamzam-marketing-copy h2 {
	font-weight: 900 !important;
	font-size: clamp(1.5rem, 1.7vw + 1rem, 2.25rem) !important;
	line-height: 1.12 !important;
}

.esl-gamzam-marketing-copy h3 {
	font-weight: 900 !important;
	font-size: clamp(1.2rem, 1.05vw + 0.95rem, 1.6rem) !important;
	line-height: 1.18 !important;
}

/* Keep small “eyebrow” headings feeling punchy. */
.esl-gamzam-marketing-copy .text-xs.font-extrabold.uppercase,
.esl-gamzam-marketing-copy .text-sm.font-extrabold.uppercase {
	font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif !important;
	letter-spacing: 0.18em !important;
}

@media (min-width: 640px) {
	.esl-gamzam-marketing-copy p,
	.esl-gamzam-marketing-copy li,
	.esl-gamzam-marketing-copy table td,
	.esl-gamzam-marketing-copy table th {
		font-size: 1.125rem !important;
	}
}

.esl-gamzam-marketing-copy .esl-gamzam-legal-card p,
.esl-gamzam-marketing-copy .esl-gamzam-legal-card li,
.esl-gamzam-marketing-copy .esl-gamzam-legal-hero p,
.esl-gamzam-marketing-copy #esl-gamzam-activities article p,
.esl-gamzam-marketing-copy #esl-gamzam-activities article li,
.esl-gamzam-marketing-copy #esl-gamzam-lesson-plans article p,
.esl-gamzam-marketing-copy #esl-gamzam-lesson-plans article li,
.esl-gamzam-marketing-copy #esl-gamzam-lesson-plans table td,
.esl-gamzam-marketing-copy #esl-gamzam-lesson-plans table th,
.esl-gamzam-marketing-copy #esl-gamzam-grammar-games article p,
.esl-gamzam-marketing-copy #esl-gamzam-grammar-games article li,
.esl-gamzam-marketing-copy #esl-gamzam-vocab-games article p,
.esl-gamzam-marketing-copy #esl-gamzam-vocab-games article li,
.esl-gamzam-marketing-copy #esl-gamzam-browse p:not([class*="text-white"]),
.esl-gamzam-marketing-copy #esl-gamzam-pricing p.text-slate-600,
.esl-gamzam-marketing-copy #esl-gamzam-pricing p.text-slate-700 {
	color: #475569 !important;
}

.esl-gamzam-marketing-copy a.text-brand-purple,
.esl-gamzam-marketing-copy .text-brand-purple {
	color: #6d28d9 !important;
}

.esl-gamzam-marketing-copy a.text-orange-600,
.esl-gamzam-marketing-copy .text-orange-600 {
	color: #ea580c !important;
}

.esl-gamzam-marketing-copy a.text-sky-700 {
	color: #0369a1 !important;
}

.esl-gamzam-marketing-copy a.text-violet-700 {
	color: #6d28d9 !important;
}

.esl-gamzam-marketing-copy a.text-fuchsia-700 {
	color: #a21caf !important;
}

.esl-gamzam-marketing-copy a.text-violet-800 {
	color: #5b21b6 !important;
}

.esl-gamzam-marketing-copy a.text-amber-800 {
	color: #92400e !important;
}

.esl-gamzam-marketing-copy a.text-orange-700 {
	color: #c2410c !important;
}

.esl-gamzam-marketing-copy a.text-lime-800 {
	color: #3f6212 !important;
}

.esl-gamzam-marketing-copy a.text-indigo-700 {
	color: #4338ca !important;
}

.esl-gamzam-marketing-copy a.text-teal-800 {
	color: #115e59 !important;
}

.esl-gamzam-marketing-copy a.text-amber-900 {
	color: #78350f !important;
}

/* Dark gradient CTAs and panels — keep light text + slightly smaller type */
.esl-gamzam-marketing-copy .esl-gamzam-legal-cta p,
.esl-gamzam-marketing-copy .esl-gamzam-legal-cta a.font-semibold,
.esl-gamzam-marketing-copy section#cta .bg-gradient-to-r p,
.esl-gamzam-marketing-copy section#cta .bg-gradient-to-r a {
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 0.875rem !important;
	line-height: 1.75rem !important;
}

@media (min-width: 640px) {
	.esl-gamzam-marketing-copy .esl-gamzam-legal-cta p,
	.esl-gamzam-marketing-copy section#cta .bg-gradient-to-r p {
		font-size: 1rem !important;
	}
}

.esl-gamzam-marketing-copy .bg-gradient-to-br p[class*="text-white"] {
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 0.875rem !important;
	line-height: 1.75rem !important;
}

.esl-gamzam-marketing-copy .bg-gradient-to-r.from-slate-900 p,
.esl-gamzam-marketing-copy .bg-gradient-to-br.from-slate-900 p {
	color: rgba(255, 255, 255, 0.95) !important;
}

/*
 * Denim tissue background — same as #esl-gamzam-landing in templates/shortcode-landing-page.php
 * (light purple denim + drift + subtle sparkle). Fixed layers sit behind #page (z-index).
 */
@keyframes esl-tissue-drift {
	0% {
		background-position: 0px 0px, 0px 0px, 0% 0%, 0% 0%;
	}
	50% {
		background-position: 30px -10px, -20px 25px, 20% 50%, 40% 10%;
	}
	100% {
		background-position: 70px -30px, -40px 55px, 60% 80%, 80% 30%;
	}
}

body.esl-gamzam-marketing-page {
	position: relative;
	background-color: transparent !important;
	background-image: none !important;
	overflow-x: hidden;
	min-height: 100vh;
}

body.esl-gamzam-marketing-page::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: #f7f0ff;
	background-image:
		repeating-linear-gradient(45deg, rgba(59, 130, 246, 0.08) 0 1px, rgba(0, 0, 0, 0) 1px 8px),
		repeating-linear-gradient(-45deg, rgba(124, 58, 237, 0.06) 0 1px, rgba(0, 0, 0, 0) 1px 10px),
		linear-gradient(135deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 55%),
		linear-gradient(135deg, #f7f0ff 0%, #fbf7ff 50%, #f2edff 100%);
	background-size: 14px 14px, 18px 18px, 100% 100%, 100% 100%;
	animation: esl-tissue-drift 60s ease-in-out infinite alternate;
}

body.esl-gamzam-marketing-page::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(124, 58, 237, 0.08) 1px, rgba(0, 0, 0, 0) 1px);
	background-size: 32px 32px;
	opacity: 0.08;
}

@media (prefers-reduced-motion: reduce) {
	body.esl-gamzam-marketing-page::before {
		animation: none !important;
	}
}

/* Some Astra themes set a dark `html` background; match landing tissue tint in gaps. */
html:has(body.esl-gamzam-marketing-page) {
	background-color: #f7f0ff !important;
	background-image: none !important;
}

body.esl-gamzam-marketing-page #page {
	position: relative;
	z-index: 1;
}

/*
 * Full page: override dark theme backgrounds; transparent so denim layer shows.
 * (YellowPencil / Elementor / dark headers often set body or #page to near-black.)
 */
body.esl-gamzam-marketing-page #page,
body.esl-gamzam-marketing-page #content,
body.esl-gamzam-marketing-page .site-content,
body.esl-gamzam-marketing-page .hfeed.site,
body.esl-gamzam-marketing-page #primary,
body.esl-gamzam-marketing-page .site-main,
body.esl-gamzam-marketing-page .content-area {
	background-color: transparent !important;
	background-image: none !important;
}

body.esl-gamzam-marketing-page #page,
body.esl-gamzam-marketing-page .site,
body.esl-gamzam-marketing-page #content,
body.esl-gamzam-marketing-page .site-content,
body.esl-gamzam-marketing-page .content-area,
body.esl-gamzam-marketing-page #primary,
body.esl-gamzam-marketing-page .ast-separate-container,
body.esl-gamzam-marketing-page main.site-main,
body.esl-gamzam-marketing-page article.ast-article-single,
body.esl-gamzam-marketing-page .ast-article-single,
body.esl-gamzam-marketing-page .ast-container,
body.esl-gamzam-marketing-page .elementor {
	background-color: transparent !important;
	background-image: none !important;
}

/*
 * Remove theme spacing that can expose dark background above the first block.
 * (Landing pages have a similar fix in `landing-theme-bridge.css`.)
 */
body.esl-gamzam-marketing-page #primary,
body.esl-gamzam-marketing-page .content-area,
body.esl-gamzam-marketing-page .site-content,
body.esl-gamzam-marketing-page .site {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Some Astra templates paint dark backgrounds on their article containers. */
body.esl-gamzam-marketing-page article.ast-article-single,
body.esl-gamzam-marketing-page .ast-article-single,
body.esl-gamzam-marketing-page .ast-separate-container,
body.esl-gamzam-marketing-page main.site-main {
	background-color: transparent !important;
	background-image: none !important;
}

/*
 * Remove theme page title / hero strip below the main header.
 * Plugin content already includes an H1 inside .esl-gamzam-marketing; the theme strip is duplicate and often dark (Astra / Elementor / etc.).
 */
body.esl-gamzam-marketing-page .ast-page-title-bar,
body.esl-gamzam-marketing-page .ast-title-bar-wrap,
body.esl-gamzam-marketing-page .ast-page-title-section,
body.esl-gamzam-marketing-page .ast-archive-title-section,
body.esl-gamzam-marketing-page .ast-breadcrumbs-wrapper,
body.esl-gamzam-marketing-page .ast-primary-header-bar.ast-page-title-bar,
body.esl-gamzam-marketing-page .site-content-header,
body.esl-gamzam-marketing-page article .entry-header,
body.esl-gamzam-marketing-page .ast-single-post .entry-header,
body.esl-gamzam-marketing-page .ast-page .entry-header,
body.esl-gamzam-marketing-page .entry-hero,
body.esl-gamzam-marketing-page .nv-page-title-wrap,
body.esl-gamzam-marketing-page .page-header:not(#masthead):not(.site-header),
body.esl-gamzam-marketing-page #page-header {
	display: none !important;
}

/* Ensure Astra header stays visible on marketing pages (you manage logo/menu). */
body.esl-gamzam-marketing-page #masthead,
body.esl-gamzam-marketing-page header.site-header,
body.esl-gamzam-marketing-page .ast-above-header-wrap,
body.esl-gamzam-marketing-page .ast-below-header-wrap,
body.esl-gamzam-marketing-page .below-header-bar {
	display: block !important;
}

/*
 * Full-width shell: match typical Elementor/homepage layouts (plugin pages were max 48rem).
 * Scope to main content only — avoid body.esl-gamzam-marketing-page .ast-container alone (would widen the header bar).
 */
body.esl-gamzam-marketing-page .ast-separate-container .ast-article-inner,
body.esl-gamzam-marketing-page .site-content .content-area,
body.esl-gamzam-marketing-page .site-content .content-area .ast-row,
body.esl-gamzam-marketing-page .site-content .ast-container,
body.esl-gamzam-marketing-page #primary,
body.esl-gamzam-marketing-page article .entry-content {
	max-width: 100% !important;
	width: 100% !important;
}

body.esl-gamzam-marketing-page .site-content .ast-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Elementor legacy: boxed sections default to ~1140px */
body.esl-gamzam-marketing-page .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 100% !important;
}

/* Elementor 3+: flex containers (.e-con-boxed) — mirrored in inline CSS for merge/cache order */
body.esl-gamzam-marketing-page .elementor[data-elementor-type="wp-page"] {
	max-width: 100% !important;
	width: 100% !important;
}

body.esl-gamzam-marketing-page .elementor .e-con.e-con-boxed,
body.esl-gamzam-marketing-page .elementor .e-con-boxed > .e-con-inner {
	max-width: 100% !important;
	width: 100% !important;
}

body.esl-gamzam-marketing-page .elementor .e-con {
	--container-max-width: 100% !important;
	--width: 100% !important;
}

body.esl-gamzam-marketing-page .elementor .elementor-widget-text-editor .elementor-widget-container {
	max-width: 100% !important;
}

body.esl-gamzam-marketing-page #page,
body.esl-gamzam-marketing-page .hfeed.site {
	max-width: none !important;
	width: 100% !important;
}

body.esl-gamzam-marketing-page #content.site-content,
body.esl-gamzam-marketing-page .site-content#content {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.esl-gamzam-marketing-page .site-content > .ast-container {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.esl-gamzam-marketing-page .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
	padding-left: clamp(0.75rem, 3vw, 1.5rem);
	padding-right: clamp(0.75rem, 3vw, 1.5rem);
}

/*
 * Main block: escape boxed Elementor/theme columns (footer often prints outside that box — this matches that width).
 * body overflow-x: hidden avoids 100vw scrollbar gutter on some browsers.
 */
body.esl-gamzam-marketing-page .esl-gamzam-marketing {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.esl-gamzam-marketing {
	--esl-gamzam-purple: #754ff0;
	--esl-gamzam-purple-dark: #5b21b6;
	--esl-gamzam-ink: #1a1028;
	--esl-gamzam-muted: #5b6470;
	--esl-gamzam-mint: #34d399;
	--esl-gamzam-sun: #fbbf24;
	--esl-gamzam-coral: #fb7185;
	box-sizing: border-box;
	font-family: 'Nunito', system-ui, -apple-system, sans-serif;
	color: var(--esl-gamzam-ink) !important;
	line-height: 1.55;
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
	background: transparent;
	border-radius: 0;
	border: none;
	border-bottom: 1px solid rgba(117, 79, 240, 0.12);
	box-shadow: none;
}

.esl-gamzam-marketing *,
.esl-gamzam-marketing *::before,
.esl-gamzam-marketing *::after {
	box-sizing: border-box;
}

.esl-gamzam-marketing__inner {
	width: 100%;
}

.esl-gamzam-marketing__h1 {
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 1rem;
	color: var(--esl-gamzam-ink);
	letter-spacing: -0.02em;
}

.esl-gamzam-marketing__lead {
	font-size: 1.05rem;
	color: var(--esl-gamzam-muted);
	margin: 0 0 1.25rem;
}

.esl-gamzam-marketing__section {
	margin: 0 0 1.75rem;
}

.esl-gamzam-marketing__h2 {
	font-size: clamp(1.15rem, 2.8vw, 1.35rem);
	font-weight: 800;
	color: var(--esl-gamzam-purple);
	margin: 0 0 0.65rem;
	line-height: 1.3;
}

.esl-gamzam-marketing__p {
	font-size: 1rem;
	color: var(--esl-gamzam-ink);
	margin: 0 0 0.75rem;
}

.esl-gamzam-marketing__list {
	margin: 0 0 1.75rem;
	padding-left: 0;
	list-style: none;
}

.esl-gamzam-marketing__list li {
	margin-bottom: 0.55rem;
	padding-left: 1.65rem;
	position: relative;
	color: var(--esl-gamzam-ink) !important;
}

.esl-gamzam-marketing__list li::before {
	content: "✦";
	position: absolute;
	left: 0;
	top: 0.05em;
	color: var(--esl-gamzam-purple);
	font-size: 0.85em;
	opacity: 0.85;
}

.esl-gamzam-marketing__cta-wrap {
	margin: 0;
}

.esl-gamzam-marketing__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.75rem;
	font-weight: 800;
	font-size: 0.95rem;
	text-decoration: none;
	color: #fff;
	border-radius: 999px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	background: linear-gradient(180deg, #4ade80 0%, #22c55e 45%, #16a34a 100%);
	box-shadow:
		0 6px 18px rgba(0, 0, 0, 0.2),
		0 0 12px 4px rgba(34, 197, 94, 0.45);
	transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.esl-gamzam-marketing__btn:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow:
		0 8px 22px rgba(0, 0, 0, 0.25),
		0 0 16px 5px rgba(34, 197, 94, 0.55);
}

.esl-gamzam-marketing__note {
	font-size: 0.85rem;
	color: var(--esl-gamzam-muted);
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(117, 79, 240, 0.2);
	line-height: 1.45;
}

/* Air between primary CTA band and footer disclaimer (content pages). */
.esl-gamzam-marketing--content .esl-gamzam-marketing__note {
	margin-top: 2.25rem;
	padding-top: 1.35rem;
}

@media (max-width: 480px) {
	.esl-gamzam-marketing {
		padding: 1rem clamp(0.75rem, 4vw, 1rem) 1.75rem;
	}
}

/* Gamzam site footer (plugin) — span content width */
body.esl-gamzam-marketing-page #esl-gamzam-footer-site {
	display: block;
	/* Match landing full-bleed: footer spans the full viewport width. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 0;
	box-sizing: border-box;
}

body.esl-gamzam-marketing-page #esl-gamzam-footer-site footer.esl-gamzam-landing-footer {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	/* Match the CTA band gradient: slate → purple → orange */
	background-color: #0f172a !important;
	background-image: linear-gradient(to right, #0f172a 0%, #581c87 50%, #ea580c 100%) !important;
}

/*
 * Hide the theme's own footer blocks so our Gamzam footer is the only one visible.
 * This removes the extra dark strip + the white gap below it.
 */
body.esl-gamzam-marketing-page footer:not(.esl-gamzam-landing-footer) {
	display: none !important;
}
body.esl-gamzam-marketing-page #colophon,
body.esl-gamzam-marketing-page .site-footer,
body.esl-gamzam-marketing-page #footer,
body.esl-gamzam-marketing-page #ast-footer,
body.esl-gamzam-marketing-page #ast-footer-wrap,
body.esl-gamzam-marketing-page .elementor-location-footer,
body.esl-gamzam-marketing-page .elementor-location-header + .elementor-location-footer,
body.esl-gamzam-marketing-page .footer-bottom,
body.esl-gamzam-marketing-page .footer-socket,
body.esl-gamzam-marketing-page .footer-bar,
body.esl-gamzam-marketing-page #footer-bar,
body.esl-gamzam-marketing-page .ast-footer-overlay,
body.esl-gamzam-marketing-page .ast-small-footer,
body.esl-gamzam-marketing-page .ast-above-footer-bar,
body.esl-gamzam-marketing-page .ast-below-footer-bar,
body.esl-gamzam-marketing-page #page .ast-footer-overlay {
	display: none !important;
}

body.esl-gamzam-marketing-page #colophon,
body.esl-gamzam-marketing-page .site-footer,
body.esl-gamzam-marketing-page #footer,
body.esl-gamzam-marketing-page #ast-footer,
body.esl-gamzam-marketing-page .ast-footer-overlay {
	background: transparent !important;
}

/* Extra safety: some themes still reserve height for empty footer wrappers. */
body.esl-gamzam-marketing-page #colophon,
body.esl-gamzam-marketing-page #colophon.site-footer,
body.esl-gamzam-marketing-page .site-footer,
body.esl-gamzam-marketing-page footer.site-footer {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	background: transparent !important;
}

/* Also neutralize theme padding below content on these pages. */
body.esl-gamzam-marketing-page #content,
body.esl-gamzam-marketing-page .site-content,
body.esl-gamzam-marketing-page #primary,
body.esl-gamzam-marketing-page .content-area {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

body.esl-gamzam-marketing-page article,
body.esl-gamzam-marketing-page article .entry-content {
	margin: 0 !important;
	padding: 0 !important;
}

/* Bring back the theme page heading (you manage titles/design). */
body.esl-gamzam-marketing-page article .entry-header {
	display: block !important;
	padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 4vw, 3rem) 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

body.esl-gamzam-marketing-page article .entry-header .entry-title {
	margin: 0 !important;
	color: #111827 !important;
}

/* Keep Astra header visible (user-managed logo/menu). */
body.esl-gamzam-marketing-page #masthead {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 9999;
}

/* If header exists but looks "empty", do NOT override Astra layout (display:flex/grid).
   Only force visibility/opacity so builders/plugins can't hide it. */
body.esl-gamzam-marketing-page #masthead,
body.esl-gamzam-marketing-page header.site-header {
	visibility: visible !important;
	opacity: 1 !important;
}

/* Keep header above any full-bleed marketing/footer blocks. */
body.esl-gamzam-marketing-page #masthead {
	z-index: 999999 !important;
}
body.esl-gamzam-marketing-page .esl-gamzam-marketing,
body.esl-gamzam-marketing-page #esl-gamzam-footer-site {
	position: relative;
	z-index: 1;
}

/* --- Playful accents + glass panel (kid-friendly marketing) --- */
.esl-gamzam-marketing--playful .esl-gamzam-marketing__inner {
	position: relative;
	padding: clamp(1.35rem, 3.5vw, 2rem) clamp(1rem, 3vw, 1.75rem) clamp(1.5rem, 3vw, 2rem);
	border-radius: 1.35rem;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.72) 0%, rgba(247, 240, 255, 0.55) 50%, rgba(255, 255, 255, 0.5) 100%);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.95);
	box-shadow:
		0 4px 6px -1px rgba(26, 16, 40, 0.06),
		0 24px 48px -12px rgba(117, 79, 240, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.esl-gamzam-marketing--playful .esl-gamzam-marketing__inner::before {
	content: "★";
	position: absolute;
	top: 0.35rem;
	right: 5%;
	font-size: 2rem;
	opacity: 0.45;
	color: var(--esl-gamzam-sun);
	filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.4));
	transform: rotate(12deg);
	pointer-events: none;
	z-index: 1;
}

.esl-gamzam-marketing--playful .esl-gamzam-marketing__inner::after {
	content: "🎮";
	position: absolute;
	bottom: 0.75rem;
	left: 4%;
	font-size: 1.65rem;
	opacity: 0.5;
	pointer-events: none;
	z-index: 1;
	filter: drop-shadow(0 2px 6px rgba(117, 79, 240, 0.25));
}

@media (prefers-reduced-motion: no-preference) {
	.esl-gamzam-marketing--playful .esl-gamzam-marketing__inner::before {
		animation: esl-gamzam-wiggle 4s ease-in-out infinite;
	}
}

@keyframes esl-gamzam-wiggle {
	0%,
	100% {
		transform: rotate(12deg) translateY(0);
	}
	50% {
		transform: rotate(-6deg) translateY(-4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.esl-gamzam-marketing--playful .esl-gamzam-marketing__inner::before {
		animation: none;
	}
}

/* --- Content marketing pages (Browse, Features, …): match pricing cards + purple energy --- */
.esl-gamzam-marketing--content .esl-gamzam-marketing__h1 {
	font-family: 'Space Grotesk', 'Nunito', system-ui, sans-serif;
	font-size: clamp(1.85rem, 4.2vw, 2.5rem);
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin-bottom: 1rem;
}

@supports (-webkit-background-clip: text) {
	.esl-gamzam-marketing--content .esl-gamzam-marketing__h1 {
		background: linear-gradient(120deg, #1a1028 0%, #5b21b6 55%, #754ff0 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

.esl-gamzam-marketing--content .esl-gamzam-marketing__lead {
	font-size: 1.08rem;
	line-height: 1.6;
	padding: 1rem 1.15rem;
	margin: 0 0 1.5rem;
	border-radius: 1rem;
	color: var(--esl-gamzam-ink);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(247, 240, 255, 0.75) 100%);
	border: 1px solid rgba(117, 79, 240, 0.18);
	box-shadow: 0 8px 28px rgba(117, 79, 240, 0.1);
}

.esl-gamzam-marketing__panel {
	position: relative;
	margin: 0 0 1.15rem;
	padding: 1.15rem 1.2rem 1.25rem;
	border-radius: 1.15rem;
	overflow: hidden;
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 245, 255, 0.88) 100%);
	border: 1px solid rgba(117, 79, 240, 0.16);
	box-shadow:
		0 10px 36px rgba(26, 16, 40, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.esl-gamzam-marketing__panel:hover {
		transform: translateY(-3px);
		box-shadow:
			0 16px 44px rgba(117, 79, 240, 0.14),
			inset 0 1px 0 rgba(255, 255, 255, 1);
	}
}

.esl-gamzam-marketing__panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	border-radius: 1.15rem 1.15rem 0 0;
	pointer-events: none;
}

.esl-gamzam-marketing__inner > .esl-gamzam-marketing__section.esl-gamzam-marketing__panel:nth-of-type(3n + 1)::before {
	background: linear-gradient(90deg, #34d399, #2dd4bf, #22d3ee);
}

.esl-gamzam-marketing__inner > .esl-gamzam-marketing__section.esl-gamzam-marketing__panel:nth-of-type(3n + 2)::before {
	background: linear-gradient(90deg, #754ff0, #a78bfa, #754ff0);
}

.esl-gamzam-marketing__inner > .esl-gamzam-marketing__section.esl-gamzam-marketing__panel:nth-of-type(3n + 3)::before {
	background: linear-gradient(90deg, #fbbf24, #f59e0b, #ea580c);
}

.esl-gamzam-marketing--content .esl-gamzam-marketing__h2 {
	font-family: 'Space Grotesk', 'Nunito', system-ui, sans-serif;
	font-size: clamp(1.2rem, 2.6vw, 1.42rem);
	padding-bottom: 0;
	margin-bottom: 0.75rem;
	color: var(--esl-gamzam-purple-dark);
}

.esl-gamzam-marketing--content .esl-gamzam-marketing__h2::after {
	content: "";
	display: block;
	height: 3px;
	margin-top: 0.45rem;
	max-width: 12rem;
	border-radius: 999px;
	background: linear-gradient(90deg, #fb7185, #754ff0, #34d399);
}

.esl-gamzam-marketing--content .esl-gamzam-marketing__list li::before {
	content: "✓";
	left: 0;
	top: 0.12em;
	width: 1.2rem;
	height: 1.2rem;
	font-size: 0.62rem;
	font-weight: 800;
	line-height: 1.2rem;
	text-align: center;
	color: #fff;
	background: linear-gradient(145deg, #34d399, #10b981);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
	opacity: 1;
}

.esl-gamzam-marketing--content .esl-gamzam-marketing__cta-wrap {
	text-align: center;
	margin: 1.75rem 0 0;
	padding: 1.35rem 1rem 1.5rem;
	border-radius: 1.25rem;
	background: linear-gradient(135deg, rgba(117, 79, 240, 0.1) 0%, rgba(52, 211, 153, 0.12) 50%, rgba(251, 191, 36, 0.08) 100%);
	border: 1px solid rgba(117, 79, 240, 0.22);
	box-shadow: 0 12px 36px rgba(117, 79, 240, 0.12);
}

.esl-gamzam-marketing--content .esl-gamzam-marketing__cta-wrap .esl-gamzam-marketing__btn {
	background: linear-gradient(180deg, #8b5cf6 0%, var(--esl-gamzam-purple) 38%, var(--esl-gamzam-purple-dark) 100%);
	border: 2px solid rgba(255, 255, 255, 0.28);
	box-shadow:
		0 8px 24px rgba(117, 79, 240, 0.45),
		0 0 0 1px rgba(91, 33, 182, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.esl-gamzam-marketing--content .esl-gamzam-marketing__cta-wrap .esl-gamzam-marketing__btn:hover {
	filter: brightness(1.06);
	transform: translateY(-2px);
	color: #fff;
}

/* Secondary CTA (outline) */
.esl-gamzam-marketing__btn--secondary {
	background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%) !important;
	color: var(--esl-gamzam-purple) !important;
	border: 2px solid var(--esl-gamzam-purple) !important;
	box-shadow:
		0 4px 14px rgba(117, 79, 240, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.esl-gamzam-marketing__btn--secondary:hover {
	color: #fff !important;
	background: linear-gradient(180deg, #8b5cf6 0%, var(--esl-gamzam-purple) 100%) !important;
	border-color: transparent !important;
}

/* Pro / primary CTA on pricing — purple rail */
.esl-gamzam-pricing__cta .esl-gamzam-marketing__btn:not(.esl-gamzam-marketing__btn--secondary) {
	background: linear-gradient(180deg, #8b5cf6 0%, var(--esl-gamzam-purple) 38%, var(--esl-gamzam-purple-dark) 100%) !important;
	border: 2px solid rgba(255, 255, 255, 0.25) !important;
	box-shadow:
		0 8px 24px rgba(117, 79, 240, 0.45),
		0 0 0 1px rgba(91, 33, 182, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.esl-gamzam-pricing__cta .esl-gamzam-marketing__btn:not(.esl-gamzam-marketing__btn--secondary):hover {
	filter: brightness(1.06);
	transform: translateY(-2px);
}

/* --- Pricing layout (tiered, colorful, “premium”) --- */
.esl-gamzam-pricing {
	margin-top: 0.25rem;
}

.esl-gamzam-pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.15rem, 2.8vw, 1.85rem);
	margin: 0 0 2.25rem;
	align-items: stretch;
}

/*
 * Align CTAs across columns: shared row tracks (head / features / footer).
 * Flex + margin-top:auto on the footer pins each CTA to its card bottom, but uneven head + list
 * heights make the three buttons sit at different vertical positions.
 */
@supports (grid-template-rows: subgrid) {
	.esl-gamzam-pricing__grid {
		grid-template-rows: auto minmax(0, 1fr) auto;
	}

	.esl-gamzam-pricing__grid > .esl-gamzam-pricing__card {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: 1 / 4;
		min-height: 0;
	}

	.esl-gamzam-pricing__grid > .esl-gamzam-pricing__card:nth-child(1) {
		grid-column: 1;
	}

	.esl-gamzam-pricing__grid > .esl-gamzam-pricing__card:nth-child(2) {
		grid-column: 2;
	}

	.esl-gamzam-pricing__grid > .esl-gamzam-pricing__card:nth-child(3) {
		grid-column: 3;
	}

	.esl-gamzam-pricing__grid .esl-gamzam-pricing__features {
		flex: unset;
		min-height: 0;
		align-self: stretch;
	}

	.esl-gamzam-pricing__grid .esl-gamzam-pricing__card-footer {
		margin-top: 0;
	}
}

@media (max-width: 900px) {
	.esl-gamzam-pricing__grid {
		grid-template-columns: 1fr;
	}

	@supports (grid-template-rows: subgrid) {
		.esl-gamzam-pricing__grid {
			grid-template-rows: none;
		}

		.esl-gamzam-pricing__grid > .esl-gamzam-pricing__card {
			grid-column: 1;
			grid-row: auto;
			display: flex;
			flex-direction: column;
		}

		.esl-gamzam-pricing__grid .esl-gamzam-pricing__features {
			flex: 1 1 auto;
			min-height: min-content;
		}

		.esl-gamzam-pricing__grid .esl-gamzam-pricing__card-footer {
			margin-top: auto;
		}
	}
}

.esl-gamzam-pricing__card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 245, 255, 0.88) 100%);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(117, 79, 240, 0.18);
	border-radius: 1.35rem;
	padding: clamp(1.2rem, 2.8vw, 1.65rem);
	padding-top: calc(1.1rem + 6px);
	box-shadow:
		0 10px 40px rgba(26, 16, 40, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
	display: flex;
	flex-direction: column;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.esl-gamzam-pricing__card-head {
	flex: 0 0 auto;
	position: relative;
}

@media (prefers-reduced-motion: no-preference) {
	.esl-gamzam-pricing__card:hover {
		transform: translateY(-4px);
		box-shadow:
			0 18px 48px rgba(117, 79, 240, 0.16),
			inset 0 1px 0 rgba(255, 255, 255, 1);
	}
}

/* Colored top rail per tier */
.esl-gamzam-pricing__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	border-radius: 1.35rem 1.35rem 0 0;
	pointer-events: none;
}

.esl-gamzam-pricing__grid > .esl-gamzam-pricing__card:nth-child(1)::before {
	background: linear-gradient(90deg, #34d399, #2dd4bf, #22d3ee);
}

.esl-gamzam-pricing__grid > .esl-gamzam-pricing__card:nth-child(2)::before {
	background: linear-gradient(90deg, #754ff0, #a78bfa, #754ff0);
}

.esl-gamzam-pricing__grid > .esl-gamzam-pricing__card:nth-child(3)::before {
	background: linear-gradient(90deg, #fbbf24, #f59e0b, #ea580c);
}

.esl-gamzam-pricing__card--highlight {
	border-color: rgba(245, 158, 11, 0.55);
	box-shadow:
		0 16px 52px rgba(245, 158, 11, 0.2),
		0 0 0 2px rgba(251, 191, 36, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
	transform: scale(1.02);
	z-index: 2;
}

@media (max-width: 900px) {
	.esl-gamzam-pricing__card--highlight {
		transform: none;
	}
}

.esl-gamzam-marketing--pricing .esl-gamzam-pricing__card--highlight {
	background: linear-gradient(165deg, #fffdf8 0%, #fff7ed 35%, #faf5ff 100%);
}

.esl-gamzam-pricing__badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 0.65rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #fff;
	background: linear-gradient(135deg, #ea580c 0%, #f59e0b 50%, #fbbf24 100%);
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(234, 88, 12, 0.35);
}

.esl-gamzam-pricing__tier {
	font-family: 'Space Grotesk', 'Nunito', system-ui, sans-serif;
	font-size: clamp(1.2rem, 2.6vw, 1.45rem);
	font-weight: 800;
	margin: 0 0 0.4rem;
	color: var(--esl-gamzam-ink);
	letter-spacing: -0.02em;
}

.esl-gamzam-pricing__pitch {
	font-size: 0.9rem;
	color: var(--esl-gamzam-muted);
	margin: 0 0 0.85rem;
	line-height: 1.5;
}

.esl-gamzam-pricing__price {
	margin: 0 0 0.65rem;
	font-size: 0.95rem;
	color: var(--esl-gamzam-muted);
}

.esl-gamzam-pricing__amount {
	font-family: 'Space Grotesk', 'Nunito', sans-serif;
	font-size: clamp(1.75rem, 4.2vw, 2.35rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--esl-gamzam-ink);
}

@supports (-webkit-background-clip: text) {
	.esl-gamzam-pricing__amount {
		background: linear-gradient(120deg, #1a1028, #5b21b6);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

/* Grow to fill card but never shrink below list content (avoids overlap bug) */
.esl-gamzam-pricing__features {
	margin: 0;
	padding-left: 0;
	list-style: none;
	flex: 1 1 auto;
	min-height: min-content;
	font-size: 0.9rem;
	line-height: 1.5;
}

.esl-gamzam-pricing__features li {
	margin-bottom: 0.5rem;
	padding-left: 1.6rem;
	position: relative;
}

.esl-gamzam-pricing__features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.15rem;
	height: 1.15rem;
	font-size: 0.65rem;
	font-weight: 800;
	line-height: 1.15rem;
	text-align: center;
	color: #fff;
	background: linear-gradient(145deg, #34d399, #10b981);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}

.esl-gamzam-pricing__card--highlight .esl-gamzam-pricing__features li::before {
	background: linear-gradient(145deg, #fbbf24, #ea580c);
	box-shadow: 0 2px 6px rgba(234, 88, 12, 0.35);
}

/* Footer: CTA only (no helper copy under buttons). */
.esl-gamzam-pricing__card-footer {
	flex: 0 0 auto;
	margin-top: auto;
	width: 100%;
	padding-top: 1.35rem;
	padding-bottom: 0.35rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	gap: 0.5rem;
}

.esl-gamzam-pricing__card-footer__cta {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	position: relative;
	padding-bottom: 0.5rem;
	margin-bottom: 0;
	margin-top: 0.25rem;
	min-height: 3rem;
}

/* Legacy / flat markup: CTA directly under feature list — breathe before the button. */
.esl-gamzam-pricing__card > .esl-gamzam-pricing__cta {
	margin-top: 1.35rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(117, 79, 240, 0.14);
}

.esl-gamzam-pricing__card-footer .esl-gamzam-pricing__cta {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0;
}

.esl-gamzam-pricing__cta .esl-gamzam-marketing__btn {
	margin-left: auto;
	margin-right: auto;
}

/* Legacy synced markup only — hidden if PHP filter did not strip (cache/Elementor). */
.esl-gamzam-pricing__micro,
.esl-gamzam-pricing__under-button {
	display: none !important;
}

.esl-gamzam-pricing__card-footer .esl-gamzam-marketing__btn,
.esl-gamzam-pricing__card-footer a.esl-gamzam-marketing__btn {
	position: static;
	transform: none;
}

/* Badge is top-right of the head: reserve space only on the tier line so pitch/price use full card width. */
.esl-gamzam-pricing__card--highlight .esl-gamzam-pricing__tier {
	padding-right: 5.75rem;
}

.esl-gamzam-pricing__card--highlight .esl-gamzam-pricing__pitch,
.esl-gamzam-pricing__card--highlight .esl-gamzam-pricing__price {
	max-width: 100%;
	width: 100%;
}

.esl-gamzam-pricing__compare-wrap {
	margin: 0 0 1.75rem;
}

.esl-gamzam-pricing__compare-wrap .esl-gamzam-marketing__h2::before {
	background: linear-gradient(180deg, var(--esl-gamzam-coral), var(--esl-gamzam-purple));
}

.esl-gamzam-pricing__compare {
	display: grid;
	gap: 0;
	border: 1px solid rgba(117, 79, 240, 0.22);
	border-radius: 1rem;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.75);
	box-shadow: 0 12px 40px rgba(117, 79, 240, 0.1);
}

.esl-gamzam-pricing__compare-row {
	display: grid;
	grid-template-columns: minmax(7rem, 1.1fr) 1fr 1fr;
	gap: 0;
	border-bottom: 1px solid rgba(117, 79, 240, 0.1);
}

.esl-gamzam-pricing__compare-row:nth-child(even):not(:first-child) {
	background: rgba(247, 240, 255, 0.35);
}

.esl-gamzam-pricing__compare-row:last-child {
	border-bottom: 0;
}

.esl-gamzam-pricing__compare-row:first-child .esl-gamzam-pricing__compare-cell {
	font-weight: 800;
	font-family: 'Space Grotesk', 'Nunito', sans-serif;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: linear-gradient(90deg, rgba(117, 79, 240, 0.12), rgba(52, 211, 153, 0.12));
	color: var(--esl-gamzam-purple-dark);
}

.esl-gamzam-pricing__compare-cell {
	padding: 0.7rem 0.85rem;
	font-size: 0.88rem;
}

.esl-gamzam-pricing__compare-cell--feat {
	font-weight: 700;
	color: var(--esl-gamzam-ink);
	background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 600px) {
	.esl-gamzam-pricing__compare-row {
		grid-template-columns: 1fr;
	}

	.esl-gamzam-pricing__compare-cell--feat {
		border-bottom: 1px solid rgba(117, 79, 240, 0.08);
	}
}

.esl-gamzam-pricing__faq-item {
	margin-bottom: 1rem;
	padding: 1rem 1.1rem;
	border-radius: 0.9rem;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(247, 240, 255, 0.5));
	border: 1px solid rgba(117, 79, 240, 0.12);
	box-shadow: 0 6px 20px rgba(26, 16, 40, 0.05);
}

.esl-gamzam-pricing__faq-q {
	font-family: 'Space Grotesk', 'Nunito', sans-serif;
	font-size: 1.02rem;
	font-weight: 800;
	margin: 0 0 0.4rem;
	color: var(--esl-gamzam-ink);
}

body.esl-gamzam-marketing-page .esl-gamzam-marketing--pricing .esl-gamzam-marketing__h1 {
	font-size: clamp(2rem, 4.5vw, 2.75rem);
}

/* Pricing page: FAQ block — drop outer section chrome (items are self-styled) */
.esl-gamzam-marketing--pricing .esl-gamzam-pricing__faq.esl-gamzam-marketing__section {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

/*
 * Browse Games: shortcode must not live in a Gutenberg "Code" block (wraps HTML in p>code).
 * PHP unwraps; this keeps layout if a wrapper remains.
 */
p code #esl-gamzam-browse,
code #esl-gamzam-browse {
	display: block !important;
	white-space: normal !important;
	font-family: "Space Grotesk", system-ui, sans-serif !important;
}

/*
 * Browse Games [esl_gamzam_browse_games]: same shell + tissue + doodles as #esl-gamzam-landing
 * (templates/shortcode-landing-page.php). Body denim is disabled when both marketing + landing body classes apply.
 */
/* Avoid double denim: #esl-gamzam-browse supplies fixed tissue like #esl-gamzam-landing */
body.esl-gamzam-browse-page.esl-gamzam-marketing-page::before,
body.esl-gamzam-browse-page.esl-gamzam-marketing-page::after {
	display: none !important;
}

#esl-gamzam-browse.esl-gamzam-browse--landing-shell {
	--esl-viewport-w: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: var(--esl-viewport-w);
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	overflow-x: clip;
	isolation: isolate;
}

#esl-gamzam-browse.esl-gamzam-browse--landing-shell::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: #f7f0ff;
	background-image:
		repeating-linear-gradient(45deg, rgba(59, 130, 246, 0.08) 0 1px, rgba(0, 0, 0, 0) 1px 8px),
		repeating-linear-gradient(-45deg, rgba(124, 58, 237, 0.06) 0 1px, rgba(0, 0, 0, 0) 1px 10px),
		linear-gradient(135deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 55%),
		linear-gradient(135deg, #f7f0ff 0%, #fbf7ff 50%, #f2edff 100%);
	background-size: 14px 14px, 18px 18px, 100% 100%, 100% 100%;
	animation: esl-browse-tissue-drift 60s ease-in-out infinite alternate;
}

#esl-gamzam-browse.esl-gamzam-browse--landing-shell::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(124, 58, 237, 0.08) 1px, rgba(0, 0, 0, 0) 1px);
	background-size: 32px 32px;
	opacity: 0.08;
}

@keyframes esl-browse-tissue-drift {
	0% {
		background-position: 0px 0px, 0px 0px, 0% 0%, 0% 0%;
	}
	50% {
		background-position: 30px -10px, -20px 25px, 20% 50%, 40% 10%;
	}
	100% {
		background-position: 70px -30px, -40px 55px, 60% 80%, 80% 30%;
	}
}

@media (prefers-reduced-motion: reduce) {
	#esl-gamzam-browse.esl-gamzam-browse--landing-shell::before {
		animation: none !important;
	}
}

#esl-gamzam-browse .esl-gamzam-browse__doodle-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

#esl-gamzam-browse .esl-gamzam-browse__doodle {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w, 56px);
	height: var(--h, 56px);
	max-width: min(120px, 20vw);
	max-height: min(120px, 20vw);
	box-sizing: border-box;
	transform: translate3d(0, 0, 0) rotate(var(--r));
	opacity: var(--o, 1);
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.08));
	animation: esl-browse-doodle-float var(--d) ease-in-out infinite alternate;
	animation-delay: var(--delay, 0s);
}

#esl-gamzam-browse .esl-gamzam-browse__doodle--spin {
	animation-name: esl-browse-doodle-float, esl-browse-doodle-spin;
	animation-duration: var(--d), calc(var(--d) * 1.6);
	animation-timing-function: ease-in-out, linear;
	animation-iteration-count: infinite, infinite;
}

#esl-gamzam-browse .esl-gamzam-browse__doodle svg {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

@keyframes esl-browse-doodle-float {
	0% {
		transform: translate3d(0, 0, 0) rotate(var(--r));
	}
	100% {
		transform: translate3d(14px, -18px, 0) rotate(calc(var(--r) + 6deg));
	}
}

@keyframes esl-browse-doodle-spin {
	0% {
		filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.08));
	}
	100% {
		filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.1));
	}
}

@media (prefers-reduced-motion: reduce) {
	#esl-gamzam-browse .esl-gamzam-browse__doodle {
		animation: none !important;
	}
}

#esl-gamzam-browse .esl-gamzam-browse__hero-section {
	position: relative;
	z-index: 2;
	min-height: min(88vh, 52rem);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: clamp(4rem, 10vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
}

#esl-gamzam-browse .esl-gamzam-browse__hero-section-decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

#esl-gamzam-browse .esl-gamzam-browse__hero-blob {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

#esl-gamzam-browse .esl-gamzam-browse__hero-blob--lg {
	width: 16rem;
	height: 16rem;
	left: -4rem;
	top: -4rem;
	background: rgba(243, 232, 255, 0.95);
}

#esl-gamzam-browse .esl-gamzam-browse__hero-blob--md {
	width: 10rem;
	height: 10rem;
	right: 0;
	top: 4rem;
	background: rgba(254, 243, 199, 0.9);
}

#esl-gamzam-browse .esl-gamzam-browse__hero-blob--sm {
	width: 8rem;
	height: 8rem;
	left: 1.5rem;
	bottom: 2rem;
	background: rgba(252, 231, 243, 0.85);
}

#esl-gamzam-browse .esl-gamzam-browse__hero-star {
	position: absolute;
	pointer-events: none;
}

#esl-gamzam-browse .esl-gamzam-browse__hero-star--a {
	width: 2.5rem;
	height: 2.5rem;
	top: 22%;
	right: 30%;
}

#esl-gamzam-browse .esl-gamzam-browse__hero-star--b {
	width: 2rem;
	height: 2rem;
	bottom: 28%;
	left: 28%;
}

#esl-gamzam-browse .esl-gamzam-browse__hero-section .esl-gamzam-browse__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	height: 100%;
	min-height: 28rem;
}

#esl-gamzam-browse .esl-gamzam-browse__social-proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 0.75rem;
	margin-top: 1.75rem;
}

#esl-gamzam-browse .esl-gamzam-browse__stars {
	display: inline-flex;
	gap: 0.1rem;
	align-items: center;
}

#esl-gamzam-browse .esl-gamzam-browse__star-ic {
	width: 1.15rem;
	height: 1.15rem;
	fill: #fbbf24;
}

#esl-gamzam-browse .esl-gamzam-browse__rating-score {
	font-size: 0.9rem;
	font-weight: 800;
	color: #111827;
}

#esl-gamzam-browse .esl-gamzam-browse__rating-meta {
	font-size: 0.9rem;
	color: #6b7280;
}

#esl-gamzam-browse .esl-gamzam-browse__h1-line--orange {
	color: #fb923c !important;
	-webkit-text-fill-color: #fb923c !important;
	background: none !important;
	background-clip: border-box !important;
	-webkit-background-clip: border-box !important;
}

/* Steps + callout: readable column width on full-bleed shell */
#esl-gamzam-browse.esl-gamzam-browse--landing-shell > hr,
#esl-gamzam-browse.esl-gamzam-browse--landing-shell > .wp-block-columns,
#esl-gamzam-browse.esl-gamzam-browse--landing-shell > .wp-block-group.esl-gamzam-browse__callout {
	max-width: min(72rem, 100%);
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1rem, 4vw, 1.5rem) !important;
	padding-right: clamp(1rem, 4vw, 1.5rem) !important;
}

/*
 * Browse Games [esl_gamzam_browse_games]: homepage-grade UI (#esl-gamzam-browse).
 * Kills theme monospace + lime buttons; matches landing purple / tissue energy.
 */
#esl-gamzam-browse {
	--esl-browse-purple: #754ff0;
	--esl-browse-ink: #111827;
	--esl-browse-muted: #6b7280;
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: min(72rem, 100%);
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 clamp(1rem, 4vw, 1.5rem) 3rem;
	overflow: hidden;
}

#esl-gamzam-browse.esl-gamzam-browse--landing-shell {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0;
	padding-right: 0;
}

/* Force sans — themes sometimes set monospace on .entry-content */
#esl-gamzam-browse,
#esl-gamzam-browse *:not(.dashicons):not([class*="dashicons"]) {
	font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-variant-numeric: normal !important;
	font-feature-settings: normal !important;
}

#esl-gamzam-browse .dashicons,
#esl-gamzam-browse .dashicons:before {
	font-family: dashicons !important;
	font-style: normal;
	font-weight: normal;
}

body.esl-gamzam-marketing-page--wp-blocks article .entry-content #esl-gamzam-browse,
body.esl-gamzam-marketing-page--wp-blocks .elementor-widget-text-editor .elementor-widget-container {
	color: #374151 !important;
}

body.esl-gamzam-marketing-page--wp-blocks .elementor-widget-text-editor .elementor-widget-container #esl-gamzam-browse .esl-gamzam-wp-blocks__hero {
	text-align: center !important;
}

/* Soft blobs behind content (same language as landing hero) */
#esl-gamzam-browse .esl-gamzam-browse__bg {
	position: absolute;
	inset: -4rem -2rem auto -2rem;
	height: 28rem;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

#esl-gamzam-browse .esl-gamzam-browse__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(48px);
	opacity: 0.55;
	animation: esl-browse-float 14s ease-in-out infinite alternate;
}

#esl-gamzam-browse .esl-gamzam-browse__blob--1 {
	width: 280px;
	height: 280px;
	background: radial-gradient(circle at 30% 30%, rgba(117, 79, 240, 0.45), rgba(167, 139, 250, 0.2));
	left: -5%;
	top: 0;
	animation-delay: -2s;
}

#esl-gamzam-browse .esl-gamzam-browse__blob--2 {
	width: 220px;
	height: 220px;
	background: radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.35), rgba(252, 211, 77, 0.15));
	right: -2%;
	top: 2rem;
	animation-delay: -5s;
}

#esl-gamzam-browse .esl-gamzam-browse__blob--3 {
	width: 180px;
	height: 180px;
	background: radial-gradient(circle at 40% 40%, rgba(244, 114, 182, 0.3), rgba(251, 207, 232, 0.12));
	left: 35%;
	bottom: -2rem;
	animation-delay: -8s;
}

@keyframes esl-browse-float {
	0% {
		transform: translate(0, 0) scale(1);
	}
	100% {
		transform: translate(12px, -16px) scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	#esl-gamzam-browse .esl-gamzam-browse__blob {
		animation: none !important;
	}
}

#esl-gamzam-browse .wp-block-group.esl-gamzam-wp-blocks__hero {
	position: relative;
	z-index: 1;
	padding: clamp(2.75rem, 6vw, 4.25rem) clamp(1.25rem, 4vw, 2rem) !important;
	text-align: center !important;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.97) 0%, rgba(247, 240, 255, 0.92) 50%, rgba(255, 255, 255, 0.94) 100%) !important;
	border-radius: 1.75rem !important;
	box-shadow:
		0 4px 6px -1px rgba(117, 79, 240, 0.08),
		0 20px 50px -12px rgba(91, 33, 182, 0.18) !important;
	border: 1px solid rgba(117, 79, 240, 0.18) !important;
	margin-bottom: 2.5rem !important;
}

#esl-gamzam-browse .esl-gamzam-wp-blocks__hero-inner {
	position: relative;
	z-index: 2;
	max-width: 40rem;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}

#esl-gamzam-browse .esl-gamzam-wp-blocks__badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto 1.35rem !important;
	padding: 0.5rem 1.15rem !important;
	font-size: 0.8125rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--esl-browse-purple) !important;
	background: linear-gradient(135deg, rgba(117, 79, 240, 0.14), rgba(167, 139, 250, 0.1)) !important;
	border: 1px solid rgba(117, 79, 240, 0.28) !important;
	border-radius: 9999px !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset !important;
}

#esl-gamzam-browse .esl-gamzam-wp-blocks__h1 {
	font-weight: 800 !important;
	font-size: clamp(2.25rem, 6vw, 3.35rem) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.03em !important;
	margin: 0 0 0.75rem !important;
	color: var(--esl-browse-ink) !important;
}

#esl-gamzam-browse .esl-gamzam-browse__h1-line {
	display: inline-block;
}

#esl-gamzam-browse .esl-gamzam-browse__h1-grad {
	display: inline-block;
	background: linear-gradient(135deg, #754ff0 0%, #a78bfa 45%, #f472b6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent !important;
}

#esl-gamzam-browse .esl-gamzam-wp-blocks__kicker {
	font-size: clamp(1.15rem, 2.8vw, 1.45rem) !important;
	font-weight: 700 !important;
	color: #1f2937 !important;
	margin: 0 0 1rem !important;
}

#esl-gamzam-browse .esl-gamzam-wp-blocks__lead {
	font-size: 1.0625rem !important;
	line-height: 1.7 !important;
	color: var(--esl-browse-muted) !important;
	margin: 0 !important;
}

/* CTA row — bulletproof center */
#esl-gamzam-browse .esl-gamzam-wp-blocks__cta-row {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	margin: 2rem auto 0 !important;
	padding: 0 !important;
}

#esl-gamzam-browse .esl-gamzam-wp-blocks__cta-row .wp-block-buttons {
	display: inline-flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 0.85rem 1.1rem !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 auto !important;
}

#esl-gamzam-browse .esl-gamzam-wp-blocks__cta-row .wp-block-buttons > .wp-block-button {
	margin: 0 !important;
}

#esl-gamzam-browse .wp-block-separator.esl-gamzam-wp-blocks__rule {
	max-width: 12rem !important;
	margin: 2.5rem auto !important;
	border: none !important;
	height: 3px !important;
	border-radius: 3px !important;
	background: linear-gradient(90deg, transparent, rgba(117, 79, 240, 0.35), transparent) !important;
	opacity: 1 !important;
}

/* Steps */
#esl-gamzam-browse .esl-gamzam-browse__steps {
	position: relative;
	z-index: 1;
	gap: 1.25rem !important;
}

#esl-gamzam-browse .esl-gamzam-browse__steps.wp-block-columns {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: stretch !important;
}

#esl-gamzam-browse .esl-gamzam-browse__card {
	flex: 1 1 260px !important;
	max-width: 100% !important;
	min-width: 0 !important;
	text-align: center !important;
	padding: 1.75rem 1.35rem 2rem !important;
	border-radius: 1.25rem !important;
	border: 1px solid rgba(255, 255, 255, 0.65) !important;
	box-shadow: 0 10px 30px -8px rgba(91, 33, 182, 0.12) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#esl-gamzam-browse .esl-gamzam-browse__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px -10px rgba(91, 33, 182, 0.2) !important;
}

#esl-gamzam-browse .esl-gamzam-browse__card--a {
	background: linear-gradient(160deg, #f5f3ff 0%, #ede9fe 100%) !important;
}

#esl-gamzam-browse .esl-gamzam-browse__card--b {
	background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 100%) !important;
}

#esl-gamzam-browse .esl-gamzam-browse__card--c {
	background: linear-gradient(160deg, #ecfdf5 0%, #d1fae5 100%) !important;
}

#esl-gamzam-browse .esl-gamzam-browse__card h3 {
	font-size: 1.05rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	color: var(--esl-browse-ink) !important;
	margin: 0 0 0.65rem !important;
}

#esl-gamzam-browse .esl-gamzam-browse__card p {
	font-size: 0.98rem !important;
	line-height: 1.55 !important;
	color: #4b5563 !important;
	margin: 0 !important;
}

#esl-gamzam-browse .esl-gamzam-wp-blocks__icon.dashicons {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 3.25rem !important;
	height: 3.25rem !important;
	font-size: 1.5rem !important;
	line-height: 1 !important;
	margin: 0 auto 1rem !important;
	padding: 0 !important;
	border-radius: 1rem !important;
	background: rgba(255, 255, 255, 0.85) !important;
	box-shadow: 0 4px 12px rgba(117, 79, 240, 0.12) !important;
	color: var(--esl-browse-purple) !important;
}

/* Callout */
#esl-gamzam-browse .esl-gamzam-browse__callout {
	position: relative;
	z-index: 1;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 240, 255, 0.92)) !important;
	border-radius: 1.25rem !important;
	border: 2px solid rgba(117, 79, 240, 0.22) !important;
	box-shadow:
		0 12px 40px rgba(117, 79, 240, 0.1),
		0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
	text-align: center !important;
}

#esl-gamzam-browse .esl-gamzam-browse__callout h2 {
	font-size: clamp(1.35rem, 3vw, 1.75rem) !important;
	font-weight: 800 !important;
	color: var(--esl-browse-ink) !important;
	margin: 0 0 1rem !important;
}

#esl-gamzam-browse .esl-gamzam-browse__callout p {
	text-align: center !important;
	max-width: 46rem;
	margin-left: auto !important;
	margin-right: auto !important;
	color: #4b5563 !important;
}

/* Buttons — override Astra green / theme outline everywhere */
#esl-gamzam-browse a.wp-block-button__link,
#esl-gamzam-browse .wp-block-button__link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-weight: 700 !important;
	font-size: 0.9375rem !important;
	line-height: 1.25 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	border-radius: 9999px !important;
	padding: 0.85rem 1.85rem !important;
	min-height: 0 !important;
	box-sizing: border-box !important;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

#esl-gamzam-browse .wp-block-button:not(.is-style-outline) .wp-block-button__link,
#esl-gamzam-browse .esl-gamzam-wp-blocks__btn--primary {
	background: linear-gradient(180deg, #8b5cf6 0%, #754ff0 45%, #6d28d9 100%) !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow: 0 4px 16px rgba(117, 79, 240, 0.45) !important;
}

#esl-gamzam-browse .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
#esl-gamzam-browse .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
	color: #ffffff !important;
	background: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%) !important;
	box-shadow: 0 6px 22px rgba(91, 33, 182, 0.45) !important;
	transform: translateY(-1px);
}

#esl-gamzam-browse .wp-block-button.is-style-outline .wp-block-button__link,
#esl-gamzam-browse .esl-gamzam-wp-blocks__btn--secondary {
	background: rgba(255, 255, 255, 0.95) !important;
	color: var(--esl-browse-ink) !important;
	border: 2px solid rgba(117, 79, 240, 0.35) !important;
	box-shadow: 0 2px 10px rgba(117, 79, 240, 0.08) !important;
}

#esl-gamzam-browse .wp-block-button.is-style-outline .wp-block-button__link:hover,
#esl-gamzam-browse .wp-block-button.is-style-outline .wp-block-button__link:focus {
	background: rgba(117, 79, 240, 0.08) !important;
	color: #5b21b6 !important;
	border-color: rgba(117, 79, 240, 0.55) !important;
}

body.esl-gamzam-marketing-page--wp-blocks article .entry-content #esl-gamzam-browse .wp-block-button .wp-block-button__link,
body.esl-gamzam-marketing-page--wp-blocks .elementor-widget-text-editor #esl-gamzam-browse .wp-block-button__link {
	font-family: "Space Grotesk", system-ui, sans-serif !important;
}