/*
Theme Name: MXG
Theme URI: https://mxg.co.in/
Author: MXG
Author URI: https://mxg.co.in/
Description: Bright, animated marketing theme for MXG — one ecosystem of AI agents for the whole of your operation. Light-first surfaces with dark accent panels, live motion throughout (floating gradient blobs, shimmer headline, staggered agent-run preview, scroll reveals), and the full homepage shipped as a front-page template so it renders on activation with no page setup required.
Version: 5.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mxg
Tags: business, one-column, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   --------------------------------------------------------------------------
   Light-first. Bright airy surfaces carry the page; dark ink panels are kept
   for three deliberate contrast moments — the agent-run preview, the final
   CTA and the footer.
   ========================================================================== */

:root {
	/* Light surfaces */
	--bg: #f7f9fd;
	--bg-soft: #eef2fa;
	--card: #ffffff;

	/* Hairlines */
	--line: #e4e9f4;
	--line-2: #d4dcec;
	--line-3: #b9c5de;

	/* Ink (text on light) */
	--ink: #0f1730;
	--ink-mid: #43506e;
	--ink-lo: #67748f;
	--ink-dim: #8b96ad;

	/* Dark panels (hero preview, final CTA, footer) */
	--night: #0c1226;
	--night-2: #131b36;
	--night-line: rgba(255, 255, 255, .12);
	--night-text: #b9c3dc;
	--night-text-hi: #f2f5ff;
	--night-glass: rgba(255, 255, 255, .05);

	/* Brand */
	--indigo: #4f6ef7;
	--indigo-hi: #6b86ff;
	--indigo-deep: #3450e0;
	--teal: #10c8ab;
	--teal-deep: #0b9e87;
	--amber: #e8a23d;
	--amber-deep: #8a5c00;

	--grad: linear-gradient(120deg, #4f6ef7 0%, #7a5cff 45%, #10c8ab 100%);
	--grad-soft: linear-gradient(135deg, rgba(79, 110, 247, .12), rgba(16, 200, 171, .10));

	/* Shadows — soft, blue-tinted, no grey mud */
	--sh-sm: 0 1px 2px rgba(23, 43, 99, .05), 0 4px 14px rgba(23, 43, 99, .06);
	--sh-md: 0 2px 6px rgba(23, 43, 99, .06), 0 14px 34px rgba(23, 43, 99, .09);
	--sh-lg: 0 6px 16px rgba(23, 43, 99, .08), 0 30px 70px rgba(23, 43, 99, .13);

	/* Radii */
	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 22px;
	--r-xl: 30px;

	/* Type */
	--sans: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--serif: "Iowan Old Style", Georgia, "Palatino Linotype", "Times New Roman", serif;

	/* Layout */
	--wrap: 1200px;
	--gutter: 24px;

	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink-mid);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.65;
	font-feature-settings: "cv02", "cv03", "cv04", "ss01";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--indigo-deep);
	text-decoration: none;
	transition: color .18s var(--ease);
}

a:hover {
	color: var(--indigo);
}

h1, h2, h3, h4, h5 {
	margin: 0;
	color: var(--ink);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

p {
	margin: 0 0 1.15em;
}

p:last-child {
	margin-bottom: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

strong {
	color: var(--ink);
	font-weight: 650;
}

::selection {
	background: rgba(79, 110, 247, .25);
}

:focus-visible {
	outline: 2px solid var(--indigo);
	outline-offset: 3px;
	border-radius: 6px;
}

.mxg-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mxg-skip:focus {
	position: fixed;
	top: 14px;
	left: 14px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 20px;
	background: var(--card);
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
	color: var(--ink);
	box-shadow: var(--sh-md);
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.mxg-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.mxg-section {
	position: relative;
	padding: 104px 0;
}

.mxg-section--divider {
	border-top: 1px solid var(--line);
}

.mxg-head {
	max-width: 720px;
	margin: 0 0 56px;
}

.mxg-head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Monospace section label with a live pinging dot. */
.mxg-label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 20px;
	font-family: var(--mono);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-lo);
}

.mxg-label::before {
	content: "";
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--grad);
	animation: mxg-pulse 2.4s ease-in-out infinite;
}

.mxg-head--center .mxg-label {
	justify-content: center;
}

.mxg-h2 {
	font-size: clamp(1.85rem, 3.9vw, 2.9rem);
}

.mxg-lede {
	margin: 18px 0 0;
	color: var(--ink-lo);
	font-size: 1.09rem;
	line-height: 1.62;
}

.mxg-grid {
	display: grid;
	gap: 22px;
}

.mxg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mxg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Animated gradient text — the accent clause in headlines shimmers slowly. */
.mxg-gradient-text {
	background: var(--grad);
	background-size: 220% 220%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: mxg-shimmer 7s ease-in-out infinite;
}

@keyframes mxg-shimmer {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

/* ==========================================================================
   4. Ambient blobs — floating colour, the page feels alive
   ========================================================================== */

.mxg-glow {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(70px);
	opacity: .55;
	z-index: 0;
	animation: mxg-float 16s ease-in-out infinite alternate;
}

.mxg-glow--indigo {
	background: radial-gradient(circle, rgba(79, 110, 247, .38), transparent 66%);
}

.mxg-glow--teal {
	background: radial-gradient(circle, rgba(16, 200, 171, .32), transparent 66%);
	animation-duration: 20s;
	animation-delay: -6s;
}

@keyframes mxg-float {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(40px, 26px) scale(1.08); }
	100% { transform: translate(-30px, -20px) scale(.96); }
}

@keyframes mxg-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

@keyframes mxg-ping {
	0%   { transform: scale(.7); opacity: .7; }
	70%  { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}

@keyframes mxg-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.mxg-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.005em;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease),
	            background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.mxg-btn:hover {
	transform: translateY(-2px);
}

.mxg-btn:active {
	transform: translateY(0) scale(.98);
}

.mxg-btn--primary {
	background: linear-gradient(120deg, var(--indigo) 0%, var(--indigo-deep) 100%);
	color: #fff;
	box-shadow: 0 6px 18px rgba(79, 110, 247, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.mxg-btn--primary:hover {
	color: #fff;
	box-shadow: 0 12px 30px rgba(79, 110, 247, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* Shine sweep across the primary button on hover. */
.mxg-btn--primary::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 68%);
	transform: translateX(-130%);
	transition: none;
	pointer-events: none;
}

.mxg-btn--primary:hover::after {
	transform: translateX(130%);
	transition: transform .65s var(--ease);
}

.mxg-btn--ghost {
	background: var(--card);
	border-color: var(--line-2);
	color: var(--ink);
	box-shadow: var(--sh-sm);
}

.mxg-btn--ghost:hover {
	border-color: var(--indigo);
	color: var(--indigo-deep);
	box-shadow: var(--sh-md);
}

.mxg-btn--sm {
	padding: 10px 20px;
	font-size: .9rem;
}

.mxg-btn--lg {
	padding: 17px 34px;
	font-size: 1.04rem;
}

.mxg-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.mxg-actions--center {
	justify-content: center;
}

/* Arrow link */
.mxg-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .97rem;
	font-weight: 650;
	color: var(--indigo-deep);
}

.mxg-arrow__ico {
	transition: transform .22s var(--ease);
}

.mxg-arrow:hover {
	color: var(--teal-deep);
}

.mxg-arrow:hover .mxg-arrow__ico {
	transform: translateX(5px);
}

/* ==========================================================================
   6. Header — light glass
   ========================================================================== */

.mxg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(247, 249, 253, .72);
	border-bottom: 1px solid transparent;
	backdrop-filter: blur(14px) saturate(160%);
	transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.mxg-header.is-stuck {
	background: rgba(255, 255, 255, .86);
	border-bottom-color: var(--line);
	box-shadow: 0 6px 24px rgba(23, 43, 99, .07);
}

.mxg-header__inner {
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: 74px;
	transition: min-height .3s var(--ease);
}

.mxg-header.is-stuck .mxg-header__inner {
	min-height: 62px;
}

.mxg-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin-right: auto;
	color: var(--ink);
	font-size: 1.2rem;
	font-weight: 750;
	letter-spacing: -0.03em;
}

.mxg-brand:hover {
	color: var(--ink);
}

.mxg-brand img {
	max-height: 36px;
	width: auto;
}

.mxg-brand__mark {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--grad);
	background-size: 220% 220%;
	box-shadow: 0 4px 12px rgba(79, 110, 247, .35);
	animation: mxg-shimmer 7s ease-in-out infinite;
}

.mxg-nav {
	display: flex;
}

.mxg-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.mxg-nav a {
	display: block;
	padding: 8px 14px;
	border-radius: 999px;
	color: var(--ink-mid);
	font-size: .94rem;
	font-weight: 550;
	transition: background-color .18s var(--ease), color .18s var(--ease);
}

.mxg-nav a:hover {
	background: rgba(79, 110, 247, .08);
	color: var(--ink);
}

.mxg-header__cta {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ==========================================================================
   7. Hero — bright, animated, split layout
   ========================================================================== */

.mxg-hero {
	position: relative;
	overflow: hidden;
	padding: 92px 0 104px;
	background:
		radial-gradient(52rem 30rem at 6% -8%, rgba(79, 110, 247, .14), transparent 62%),
		radial-gradient(48rem 28rem at 96% 4%, rgba(16, 200, 171, .13), transparent 60%),
		linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
}

/* Subtle dot lattice for texture. */
.mxg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(52, 80, 224, .10) 1px, transparent 1.5px);
	background-size: 26px 26px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
	pointer-events: none;
}

.mxg-hero__glow-a {
	top: -220px;
	left: -160px;
	width: 700px;
	height: 580px;
}

.mxg-hero__glow-b {
	top: -120px;
	right: -200px;
	width: 620px;
	height: 540px;
}

.mxg-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.04fr .96fr;
	gap: 56px;
	align-items: center;
}

.mxg-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 26px;
	padding: 7px 16px 7px 12px;
	background: var(--card);
	border: 1px solid var(--line-2);
	border-radius: 999px;
	box-shadow: var(--sh-sm);
	color: var(--ink-mid);
	font-size: .85rem;
	font-weight: 550;
	line-height: 1.4;
}

.mxg-hero__eyebrow-dot {
	position: relative;
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--teal);
}

.mxg-hero__eyebrow-dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid var(--teal);
	opacity: .6;
	animation: mxg-ping 2.6s var(--ease) infinite;
}

.mxg-hero h1 {
	font-size: clamp(2.3rem, 4.9vw, 3.85rem);
	font-weight: 760;
	letter-spacing: -0.035em;
	line-height: 1.06;
}

.mxg-hero__sub {
	max-width: 33rem;
	margin: 26px 0 0;
	color: var(--ink-lo);
	font-size: clamp(1.03rem, 1.4vw, 1.14rem);
	line-height: 1.68;
}

.mxg-hero .mxg-actions {
	margin-top: 36px;
}

.mxg-hero__tertiary {
	margin: 24px 0 0;
}

/* ---- Agent-run preview panel: the dark contrast anchor ---- */

.mxg-hero__visual {
	position: relative;
}

/* Halo behind the panel so it sits in the light page rather than on it. */
.mxg-hero__visual::before {
	content: "";
	position: absolute;
	inset: -8% -6%;
	background: var(--grad);
	opacity: .16;
	filter: blur(46px);
	border-radius: 50%;
	animation: mxg-breathe 6s ease-in-out infinite;
	pointer-events: none;
}

@keyframes mxg-breathe {
	0%, 100% { transform: scale(1);    opacity: .16; }
	50%      { transform: scale(1.06); opacity: .24; }
}

.mxg-panel {
	position: relative;
	border-radius: var(--r-xl);
	background:
		linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03)) border-box,
		linear-gradient(170deg, var(--night-2), var(--night)) padding-box;
	border: 1px solid transparent;
	box-shadow: 0 30px 70px -18px rgba(15, 23, 48, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
	color: var(--night-text);
	overflow: hidden;
	transition: transform .3s var(--ease);
}

.mxg-panel:hover {
	transform: translateY(-4px) rotate(-.3deg);
}

.mxg-panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 12%;
	right: 12%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(16, 200, 171, .95), transparent);
}

.mxg-panel__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 20px;
	border-bottom: 1px solid var(--night-line);
	background: rgba(255, 255, 255, .03);
}

.mxg-panel__dots {
	display: flex;
	gap: 6px;
}

.mxg-panel__dots span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
}

.mxg-panel__title {
	margin-left: 4px;
	font-family: var(--mono);
	font-size: .78rem;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .55);
}

.mxg-panel__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 4px 11px;
	border: 1px solid rgba(16, 200, 171, .45);
	border-radius: 999px;
	background: rgba(16, 200, 171, .12);
	color: #35e2c5;
	font-family: var(--mono);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.mxg-panel__live i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #35e2c5;
	animation: mxg-pulse 1.9s ease-in-out infinite;
}

.mxg-panel__steps {
	padding: 10px 20px 16px;
}

.mxg-step {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 13px 0;
	font-size: .94rem;
	line-height: 1.45;
	border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.mxg-step:last-child {
	border-bottom: 0;
}

.mxg-step__ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	margin-top: 1px;
	border-radius: 50%;
	font-size: .64rem;
	font-weight: 700;
}

.mxg-step--done .mxg-step__ico {
	background: rgba(16, 200, 171, .16);
	border: 1px solid rgba(16, 200, 171, .5);
	color: #35e2c5;
}

.mxg-step--done {
	color: rgba(255, 255, 255, .6);
}

.mxg-step--running .mxg-step__ico {
	background: rgba(107, 134, 255, .18);
	border: 1px solid rgba(107, 134, 255, .55);
	color: #8ba1ff;
}

.mxg-step--running .mxg-step__ico i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	border-top-color: transparent;
	animation: mxg-spin 1s linear infinite;
}

.mxg-step--running {
	color: var(--night-text);
}

.mxg-step--approve .mxg-step__ico {
	background: rgba(232, 162, 61, .16);
	border: 1px solid rgba(232, 162, 61, .5);
	color: #f5c069;
	animation: mxg-pulse 2.2s ease-in-out infinite;
}

.mxg-step--approve {
	color: var(--night-text-hi);
	font-weight: 550;
}

.mxg-panel__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding: 14px 20px;
	border-top: 1px solid var(--night-line);
	background: rgba(255, 255, 255, .03);
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .42);
}

.mxg-panel__foot span:not(:last-child)::after {
	content: " ·";
}

/* ==========================================================================
   8. Trust marquee
   ========================================================================== */

.mxg-trust {
	padding: 46px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--card);
}

.mxg-trust__line {
	margin: 0 0 26px;
	text-align: center;
	font-family: var(--mono);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--ink-dim);
}

.mxg-marquee {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.mxg-marquee__track {
	display: flex;
	width: max-content;
	animation: mxg-scroll 32s linear infinite;
}

.mxg-marquee:hover .mxg-marquee__track {
	animation-play-state: paused;
}

@keyframes mxg-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.mxg-marquee__group {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-right: 18px;
}

.mxg-marquee__item {
	padding: 11px 26px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg);
	color: var(--ink-mid);
	font-size: 1rem;
	font-weight: 620;
	letter-spacing: -0.01em;
	white-space: nowrap;
	transition: border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}

.mxg-marquee__item:hover {
	background: var(--card);
	border-color: var(--indigo);
	color: var(--ink);
	box-shadow: var(--sh-sm);
}

/* ==========================================================================
   9. Bento value grid (Why MXG)
   ========================================================================== */

.mxg-bento {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 22px;
}

/* Asymmetric 4+2 / 2+4 rhythm — every row fills the width. */
.mxg-bento > :nth-child(1) { grid-column: span 4; }
.mxg-bento > :nth-child(2) { grid-column: span 2; }
.mxg-bento > :nth-child(3) { grid-column: span 2; }
.mxg-bento > :nth-child(4) { grid-column: span 4; }

.mxg-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 32px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--card);
	box-shadow: var(--sh-sm);
	overflow: hidden;
	transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.mxg-tile::after {
	content: "";
	position: absolute;
	top: -40%;
	right: -30%;
	width: 260px;
	height: 260px;
	background: radial-gradient(circle, rgba(79, 110, 247, .10), transparent 70%);
	opacity: 0;
	transition: opacity .3s var(--ease);
	pointer-events: none;
}

.mxg-tile:hover {
	transform: translateY(-5px);
	border-color: var(--line-2);
	box-shadow: var(--sh-md);
}

.mxg-tile:hover::after {
	opacity: 1;
}

.mxg-tile__ico {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 20px;
	border: 1px solid rgba(79, 110, 247, .22);
	border-radius: 12px;
	background: var(--grad-soft);
	color: var(--indigo-deep);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.mxg-tile:hover .mxg-tile__ico {
	transform: scale(1.1) rotate(-6deg);
	box-shadow: 0 6px 16px rgba(79, 110, 247, .22);
}

.mxg-tile__title {
	margin-bottom: 11px;
	font-size: 1.18rem;
	font-weight: 680;
}

.mxg-tile__body {
	margin: 0;
	color: var(--ink-lo);
	font-size: .99rem;
	line-height: 1.62;
}

/* ==========================================================================
   10. Products
   ========================================================================== */

.mxg-subhead {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 26px;
	font-family: var(--mono);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--ink-lo);
}

.mxg-subhead::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--line-2), transparent);
}

.mxg-products__group + .mxg-products__group {
	margin-top: 64px;
}

/* Live product card — white, lifted, gradient hairline on top. */
.mxg-product {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px;
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: var(--card);
	box-shadow: var(--sh-md);
	overflow: hidden;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.mxg-product::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--grad);
	background-size: 220% 220%;
	animation: mxg-shimmer 7s ease-in-out infinite;
}

.mxg-product:hover {
	transform: translateY(-5px);
	box-shadow: var(--sh-lg);
}

.mxg-product__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 11px;
	margin-bottom: 8px;
}

.mxg-product__name {
	font-size: 1.42rem;
	font-weight: 740;
	letter-spacing: -0.01em;
}

.mxg-product__role {
	margin: 0 0 18px;
	color: var(--teal-deep);
	font-size: .95rem;
	font-weight: 620;
}

.mxg-product__body {
	margin: 0 0 22px;
	color: var(--ink-lo);
	line-height: 1.66;
}

.mxg-product__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
}

.mxg-product__stats li {
	padding: 6px 13px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--bg);
	color: var(--ink-mid);
	font-family: var(--mono);
	font-size: .74rem;
	letter-spacing: .02em;
	transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

.mxg-product:hover .mxg-product__stats li {
	border-color: var(--line-2);
	background: var(--bg-soft);
}

.mxg-product__cta {
	margin: auto 0 0;
}

.mxg-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-family: var(--mono);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mxg-badge--live {
	background: rgba(16, 200, 171, .1);
	border: 1px solid rgba(16, 200, 171, .4);
	color: var(--teal-deep);
}

/* Breathing dot on the LIVE badge. */
.mxg-badge--live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--teal);
	animation: mxg-pulse 1.9s ease-in-out infinite;
}

.mxg-badge--soon {
	background: #fff7e8;
	border: 1px solid #f0dcb4;
	color: var(--amber-deep);
}

/* ---- Coming soon: visibly unavailable, and not interactive ---- */

/* Block, not flex — the leading <strong> must stay inline with the sentence. */
.mxg-soon-note {
	display: block;
	max-width: 780px;
	margin: 0 0 28px;
	padding: 16px 20px;
	border: 1px solid #f0dcb4;
	border-left-width: 3px;
	border-radius: var(--r-md);
	background: #fff7e8;
	color: #7a5a1c;
	font-size: .95rem;
	line-height: 1.55;
}

.mxg-soon-note strong {
	color: var(--amber-deep);
}

/*
 * Inert by design: no link, no hover lift, no pointer, muted colour.
 * These cards announce "coming soon" and cannot be opened.
 */
.mxg-soon {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 24px;
	border: 1px dashed var(--line-3);
	border-radius: var(--r-lg);
	background: var(--bg-soft);
	cursor: default;
	opacity: .85;
}

.mxg-soon .mxg-badge {
	align-self: flex-start;
}

.mxg-soon__name {
	font-size: 1.06rem;
	font-weight: 680;
	color: var(--ink-mid);
}

.mxg-soon__role {
	margin: 0;
	color: var(--ink-dim);
	font-size: .93rem;
}

/* ==========================================================================
   11. Solutions by outcome
   ========================================================================== */

.mxg-outcome {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--card);
	box-shadow: var(--sh-sm);
	overflow: hidden;
	transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.mxg-outcome::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 3px;
	background: var(--grad);
	opacity: .6;
	transition: opacity .25s var(--ease), width .25s var(--ease);
}

.mxg-outcome:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-md);
}

.mxg-outcome:hover::before {
	opacity: 1;
	width: 5px;
}

.mxg-outcome__title {
	margin-bottom: 11px;
	font-size: 1.2rem;
	font-weight: 680;
}

.mxg-outcome__body {
	margin: 0 0 22px;
	color: var(--ink-lo);
	font-size: .99rem;
	line-height: 1.62;
}

/*
 * The spec writes these as "Title — lowercase clause", and the design splits
 * the two onto separate lines. Capitalising the first letter at display time
 * keeps the card reading as a sentence without editing the source copy.
 */
.mxg-outcome__body::first-letter,
.mxg-tool__body::first-letter {
	text-transform: uppercase;
}

.mxg-outcome__products {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: auto 0 0;
}

.mxg-chip {
	padding: 5px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg);
	color: var(--ink-lo);
	font-family: var(--mono);
	font-size: .73rem;
	letter-spacing: .03em;
}

/* ==========================================================================
   12. MXG Labs
   ========================================================================== */

.mxg-tool {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 26px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--card);
	box-shadow: var(--sh-sm);
	transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.mxg-tool:hover {
	transform: translateY(-4px);
	border-color: var(--line-2);
	box-shadow: var(--sh-md);
}

.mxg-tool__name {
	font-size: 1.08rem;
	font-weight: 680;
}

.mxg-tool__name a {
	color: var(--ink);
}

.mxg-tool__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.mxg-tool:hover .mxg-tool__name a {
	color: var(--indigo-deep);
}

.mxg-tool__body {
	margin: 0;
	color: var(--ink-lo);
	font-size: .95rem;
}

.mxg-tool__free {
	position: absolute;
	top: 22px;
	right: 22px;
	padding: 3px 10px;
	border: 1px solid rgba(16, 200, 171, .35);
	border-radius: 999px;
	background: rgba(16, 200, 171, .08);
	font-family: var(--mono);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--teal-deep);
}

.mxg-labs__link {
	margin-top: 34px;
}

/* ==========================================================================
   13. Final CTA — dark gradient panel, breathing glow
   ========================================================================== */

.mxg-cta {
	position: relative;
	padding: 40px 0 104px;
}

.mxg-cta__box {
	position: relative;
	padding: 76px 48px;
	border: 1px solid transparent;
	border-radius: var(--r-xl);
	background:
		linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 60%) border-box,
		linear-gradient(160deg, var(--night-2), var(--night)) padding-box;
	box-shadow: var(--sh-lg);
	text-align: center;
	overflow: hidden;
}

.mxg-cta__glow {
	top: -170px;
	left: 50%;
	transform: translateX(-50%);
	width: 640px;
	height: 400px;
	background: radial-gradient(circle, rgba(79, 110, 247, .5), transparent 66%);
	opacity: .5;
	animation: mxg-breathe 7s ease-in-out infinite;
}

.mxg-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin: 0 auto;
}

.mxg-cta h2 {
	color: var(--night-text-hi);
	font-size: clamp(1.95rem, 4.1vw, 2.85rem);
}

.mxg-cta__body {
	margin: 20px 0 0;
	color: var(--night-text);
	font-size: 1.08rem;
	line-height: 1.62;
}

.mxg-cta .mxg-actions {
	margin-top: 34px;
}

/* Ghost button sits on the dark panel here — invert it. */
.mxg-cta__box .mxg-btn--ghost {
	background: rgba(255, 255, 255, .06);
	border-color: var(--night-line);
	color: var(--night-text-hi);
	box-shadow: none;
	backdrop-filter: blur(8px);
}

.mxg-cta__box .mxg-btn--ghost:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .4);
	color: #fff;
}

/* ==========================================================================
   14. Long-form narrative (Section 8) — editorial paper card
   ========================================================================== */

.mxg-read {
	padding: 0 0 104px;
}

.mxg-read__panel {
	position: relative;
	padding: 76px 0 68px;
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: var(--card);
	box-shadow: var(--sh-md);
	overflow: hidden;
}

/* Gradient hairline along the top of the paper card. */
.mxg-read__panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--grad);
	background-size: 220% 220%;
	animation: mxg-shimmer 9s ease-in-out infinite;
}

.mxg-read__inner {
	max-width: 68ch;
	margin: 0 auto;
	padding: 0 40px;
}

.mxg-read h2 {
	font-size: clamp(1.7rem, 3.3vw, 2.35rem);
	letter-spacing: -0.028em;
}

.mxg-read__body {
	margin-top: 36px;
	font-family: var(--serif);
	font-size: 1.17rem;
	line-height: 1.78;
	color: #313c58;
}

.mxg-read__body p {
	margin: 0 0 1.4em;
}

.mxg-read__body > p:first-of-type::first-letter {
	float: left;
	margin: .07em .09em 0 0;
	font-size: 3.5em;
	line-height: .82;
	font-weight: 700;
	color: var(--indigo-deep);
}

.mxg-read__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 42px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
}

.mxg-read__cta-note {
	margin: 0;
	color: var(--ink-lo);
	font-size: 1rem;
}

/* ==========================================================================
   15. Footer — dark ground
   ========================================================================== */

.mxg-footer {
	padding: 70px 0 34px;
	background: var(--night);
	color: var(--night-text);
	font-size: .95rem;
}

.mxg-footer__cols {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: 44px 28px;
}

.mxg-footer h3 {
	margin-bottom: 16px;
	font-family: var(--mono);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

.mxg-footer .mxg-brand {
	margin: 0 0 14px;
	color: var(--night-text-hi);
}

.mxg-footer__about p {
	max-width: 32ch;
	margin: 0;
	color: var(--night-text);
	line-height: 1.6;
}

.mxg-footer ul li + li {
	margin-top: 11px;
}

.mxg-footer a {
	color: #cdd6ea;
}

.mxg-footer a:hover {
	color: #35e2c5;
}

.mxg-footer__role {
	color: rgba(255, 255, 255, .4);
}

/* Coming-soon entries in the footer are text, not links. */
.mxg-footer__soon {
	color: rgba(255, 255, 255, .55);
}

.mxg-footer__soon-tag {
	margin-left: 6px;
	font-family: var(--mono);
	font-size: .66rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(245, 192, 105, .6);
	white-space: nowrap;
}

.mxg-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 22px;
	margin-top: 56px;
	padding-top: 26px;
	border-top: 1px solid var(--night-line);
	font-size: .89rem;
	color: rgba(255, 255, 255, .4);
}

.mxg-footer__bottom p {
	margin: 0;
}

.mxg-footer__bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* ==========================================================================
   16. Scroll reveal — scoped to html.mxg-js so no-JS never hides content
   ========================================================================== */

.mxg-js [data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.mxg-js [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

.mxg-js [data-reveal-group] > * {
	opacity: 0;
	transform: translateY(20px) scale(.985);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.mxg-js [data-reveal-group].is-in > * {
	opacity: 1;
	transform: none;
}

.mxg-js [data-reveal-group].is-in > :nth-child(1) { transition-delay: .00s; }
.mxg-js [data-reveal-group].is-in > :nth-child(2) { transition-delay: .08s; }
.mxg-js [data-reveal-group].is-in > :nth-child(3) { transition-delay: .16s; }
.mxg-js [data-reveal-group].is-in > :nth-child(4) { transition-delay: .24s; }
.mxg-js [data-reveal-group].is-in > :nth-child(5) { transition-delay: .32s; }
.mxg-js [data-reveal-group].is-in > :nth-child(6) { transition-delay: .40s; }

/* ==========================================================================
   17. Interior pages
   ========================================================================== */

.mxg-page {
	padding: 76px 0 96px;
}

.mxg-page__inner {
	max-width: 74ch;
	margin: 0 auto;
}

.mxg-page__title {
	font-size: clamp(1.9rem, 4vw, 2.7rem);
	margin-bottom: 10px;
}

.mxg-page__meta {
	margin-bottom: 30px;
	font-family: var(--mono);
	font-size: .8rem;
	letter-spacing: .04em;
	color: var(--ink-dim);
}

.mxg-entry {
	color: var(--ink-mid);
	font-size: 1.05rem;
	line-height: 1.75;
}

.mxg-entry h2 {
	margin: 1.8em 0 .55em;
	font-size: 1.6rem;
}

.mxg-entry h3 {
	margin: 1.6em 0 .5em;
	font-size: 1.25rem;
}

.mxg-entry ul,
.mxg-entry ol {
	margin: 0 0 1.15em 1.35em;
	list-style: disc;
}

.mxg-entry ol {
	list-style: decimal;
}

.mxg-entry li + li {
	margin-top: .45em;
}

.mxg-entry blockquote {
	margin: 1.5em 0;
	padding: 6px 0 6px 22px;
	border-left: 2px solid var(--indigo);
	color: var(--ink-lo);
	font-style: italic;
}

.mxg-entry img {
	border-radius: var(--r-md);
	box-shadow: var(--sh-md);
}

.mxg-entry code,
.mxg-entry pre {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--bg-soft);
	font-family: var(--mono);
}

.mxg-entry code {
	padding: 2px 7px;
	font-size: .9em;
}

.mxg-entry pre {
	padding: 18px;
	overflow-x: auto;
}

.mxg-entry pre code {
	border: 0;
	padding: 0;
	background: none;
}

.mxg-entry a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mxg-list__item {
	padding: 28px 0;
	border-bottom: 1px solid var(--line);
}

.mxg-list__item h2 {
	margin-bottom: 8px;
	font-size: 1.42rem;
}

.mxg-list__item h2 a {
	color: var(--ink);
}

.mxg-list__item h2 a:hover {
	color: var(--indigo-deep);
}

.mxg-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 38px;
}

.mxg-pagination .page-numbers {
	padding: 9px 15px;
	border: 1px solid var(--line-2);
	border-radius: 9px;
	background: var(--card);
	color: var(--ink-mid);
	font-size: .92rem;
	font-weight: 600;
}

.mxg-pagination .page-numbers:hover {
	border-color: var(--indigo);
	color: var(--indigo-deep);
}

.mxg-pagination .page-numbers.current {
	background: var(--indigo);
	border-color: var(--indigo);
	color: #fff;
}

/* WordPress core classes */
.alignleft  { float: left;  margin: 0 1.5em 1.2em 0; }
.alignright { float: right; margin: 0 0 1.2em 1.5em; }
.aligncenter { margin: 0 auto 1.2em; }

.wp-caption-text,
.screen-reader-text {
	font-size: .87rem;
	color: var(--ink-dim);
}

.sticky,
.gallery-caption,
.bypostauthor {
	/* Required by the WordPress theme review guidelines. */
}

/* ==========================================================================
   18. Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	.mxg-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.mxg-hero {
		padding-top: 72px;
		text-align: center;
	}

	.mxg-hero__sub {
		margin-left: auto;
		margin-right: auto;
	}

	.mxg-hero .mxg-actions {
		justify-content: center;
	}

	.mxg-hero__visual {
		max-width: 560px;
		margin: 0 auto;
	}

	.mxg-panel {
		text-align: left;
	}

	.mxg-bento > * {
		grid-column: span 3 !important;
	}

	.mxg-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.mxg-nav {
		display: none;
	}
}

@media (max-width: 760px) {
	body {
		font-size: 16px;
	}

	.mxg-section {
		padding: 72px 0;
	}

	.mxg-hero {
		padding: 56px 0 72px;
	}

	.mxg-grid--2,
	.mxg-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.mxg-bento {
		grid-template-columns: minmax(0, 1fr);
	}

	.mxg-bento > * {
		grid-column: span 1 !important;
	}

	.mxg-cta__box {
		padding: 56px 24px;
	}

	.mxg-read__panel {
		padding: 56px 0 52px;
		border-radius: var(--r-lg);
	}

	.mxg-read__inner {
		padding: 0 24px;
	}

	.mxg-read__body {
		font-size: 1.08rem;
		line-height: 1.74;
	}

	.mxg-read__body > p:first-of-type::first-letter {
		font-size: 2.9em;
	}

	.mxg-actions .mxg-btn {
		flex: 1 1 auto;
	}
}

@media (max-width: 520px) {
	.mxg-footer__cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.mxg-header__cta .mxg-btn--ghost {
		display: none;
	}

	.mxg-product,
	.mxg-tile {
		padding: 24px;
	}
}

/* ==========================================================================
   19. Motion preferences — every animation dies here
   ========================================================================== */

/* ==========================================================================
   20. Products dropdown (fallback nav)
   --------------------------------------------------------------------------
   Hover/focus panel that explains the live products and routes to the on-site
   detail page. Coming-soon products appear as inert text only.
   ========================================================================== */

.mxg-nav__has-sub {
	position: relative;
}

.mxg-nav__has-sub > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mxg-nav__has-sub > a svg {
	transition: transform .22s var(--ease);
}

.mxg-nav__has-sub:hover > a svg,
.mxg-nav__has-sub:focus-within > a svg {
	transform: rotate(180deg);
}

.mxg-sub {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	width: 360px;
	padding: 10px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--sh-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(10px);
	transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
	z-index: 60;
}

/* Invisible bridge so the pointer can cross the gap without closing it. */
.mxg-sub::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}

.mxg-nav__has-sub:hover .mxg-sub,
.mxg-nav__has-sub:focus-within .mxg-sub {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.mxg-sub__item {
	display: block;
	padding: 13px 14px;
	border-radius: var(--r-sm);
	transition: background-color .18s var(--ease);
}

.mxg-sub__item:hover {
	background: var(--bg-soft);
}

.mxg-sub__name {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ink);
	font-size: .98rem;
	font-weight: 700;
}

.mxg-sub__desc {
	display: block;
	margin-top: 4px;
	color: var(--ink-lo);
	font-size: .87rem;
	font-weight: 450;
	line-height: 1.5;
}

/* Text, not links — these products cannot be opened. */
.mxg-sub__soon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 6px 4px 4px;
	padding: 12px 10px;
	border-top: 1px solid var(--line);
	color: var(--ink-dim);
	font-size: .82rem;
	cursor: default;
}

.mxg-sub__all {
	display: block;
	margin: 2px 4px 4px;
	padding: 11px 10px 6px;
	border-top: 1px solid var(--line);
	color: var(--indigo-deep);
	font-size: .9rem;
	font-weight: 650;
}

.mxg-sub__all:hover {
	color: var(--teal-deep);
}

/* ==========================================================================
   21. Interior page hero band
   ========================================================================== */

.mxg-phero {
	position: relative;
	overflow: hidden;
	padding: 84px 0 64px;
	background:
		radial-gradient(46rem 26rem at 8% -10%, rgba(79, 110, 247, .13), transparent 62%),
		radial-gradient(42rem 24rem at 94% 0%, rgba(16, 200, 171, .12), transparent 60%),
		linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
}

.mxg-phero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(52, 80, 224, .10) 1px, transparent 1.5px);
	background-size: 26px 26px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
	pointer-events: none;
}

.mxg-phero__glow-a {
	top: -200px;
	left: -140px;
	width: 560px;
	height: 460px;
}

.mxg-phero__glow-b {
	top: -120px;
	right: -160px;
	width: 520px;
	height: 440px;
}

.mxg-phero__inner {
	position: relative;
	z-index: 1;
	max-width: 780px;
}

.mxg-phero h1 {
	font-size: clamp(2.1rem, 4.4vw, 3.2rem);
	letter-spacing: -0.032em;
}

/* ==========================================================================
   22. Product detail sections (/products/)
   ========================================================================== */

.mxg-detail {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 56px;
	align-items: center;
}

.mxg-detail__body {
	margin: 0 0 26px;
	color: var(--ink-lo);
	font-size: 1.06rem;
	line-height: 1.68;
}

.mxg-features {
	margin: 0 0 30px;
}

.mxg-features li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 9px 0;
	color: var(--ink-mid);
	font-size: .99rem;
	line-height: 1.55;
}

.mxg-features__ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	margin-top: 2px;
	border-radius: 50%;
	background: rgba(16, 200, 171, .12);
	border: 1px solid rgba(16, 200, 171, .4);
	color: var(--teal-deep);
	font-size: .62rem;
	font-weight: 700;
}

.mxg-detail__aside .mxg-panel {
	max-width: 520px;
}

.mxg-plans {
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--card);
	box-shadow: var(--sh-md);
}

.mxg-plans__title {
	margin-bottom: 18px;
	font-family: var(--mono);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--ink-lo);
}

.mxg-plans__row {
	display: grid;
	grid-template-columns: 64px auto;
	gap: 2px 14px;
	padding: 14px 0;
	border-top: 1px solid var(--line);
}

.mxg-plans__name {
	grid-row: span 2;
	align-self: start;
	color: var(--ink);
	font-weight: 700;
	font-size: .98rem;
}

.mxg-plans__price {
	color: var(--indigo-deep);
	font-family: var(--mono);
	font-size: .84rem;
	font-weight: 600;
}

.mxg-plans__note {
	color: var(--ink-lo);
	font-size: .88rem;
	line-height: 1.5;
}

.mxg-plans__foot {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	color: var(--teal-deep);
	font-size: .9rem;
	font-weight: 620;
}

/* Linked chips on /solutions/ — live products route to their detail section. */
a.mxg-chip--link {
	color: var(--indigo-deep);
	border-color: rgba(79, 110, 247, .3);
	background: rgba(79, 110, 247, .06);
	transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

a.mxg-chip--link:hover {
	border-color: var(--indigo);
	background: rgba(79, 110, 247, .12);
}

.mxg-chip__soon {
	margin-left: 4px;
	font-size: .64rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--amber-deep);
}

@media (max-width: 1080px) {
	.mxg-detail {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.mxg-detail__aside {
		max-width: 560px;
	}
}

/* ==========================================================================
   23. Motion preferences — every animation dies here
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.mxg-marquee__track {
		animation: none;
		transform: none;
	}

	.mxg-js [data-reveal],
	.mxg-js [data-reveal-group] > * {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ==========================================================================
   24. Post-3.0 additions, in the same design language
   --------------------------------------------------------------------------
   Everything below styles features added after the 3.0.0 build restored
   above: the tabbed agent panel, the products mega dropdown, the long-read
   topic rail, jump chips, stat pills, outcome icons, the "how teams start"
   step cards, tinted section bands and the bundled logo.
   ========================================================================== */

/* ---- Tinted section band ---- */

.mxg-section--tint {
	background: var(--bg-soft);
}

/* ---- Bundled logo ---- */

.mxg-brand__logo {
	height: 36px;
	width: auto;
}

.mxg-footer .mxg-brand__logo {
	height: 34px;
}

/* ---- Agent panel: rotating tabs ---- */

.mxg-panel__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 20px 2px;
}

.mxg-panel__tab {
	position: relative;
	padding: 8px 16px 10px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	color: rgba(255, 255, 255, .55);
	font-family: var(--mono);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}

.mxg-panel__tab:hover {
	color: var(--night-text-hi);
}

.mxg-panel__tab.is-active {
	background: rgba(107, 134, 255, .14);
	border-color: rgba(107, 134, 255, .45);
	color: #fff;
}

/* Countdown rail under the active tab — refills on every rotation. */
.mxg-panel__tab.is-active::after {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--teal), var(--indigo-hi));
	transform-origin: left center;
	animation: mxg-tabfill 6s linear forwards;
}

[data-panel].is-paused .mxg-panel__tab.is-active::after {
	animation-play-state: paused;
}

@keyframes mxg-tabfill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/*
 * Only the active view shows; switching replays the run, step by step.
 * Scoped to [data-panel] so the static (untabbed) hero panel keeps its one
 * list always visible, revealed by data-reveal-group like the 3.0 build.
 */
[data-panel] .mxg-panel__steps {
	display: none;
}

[data-panel] .mxg-panel__steps.is-active {
	display: block;
}

[data-panel] .mxg-panel__steps.is-active .mxg-step {
	animation: mxg-step-in .5s var(--ease) backwards;
	animation-delay: calc(var(--i, 0) * .4s);
}

@keyframes mxg-step-in {
	from { opacity: 0; transform: translateY(9px); }
	to   { opacity: 1; transform: none; }
}

/* ---- Products mega dropdown ---- */

.mxg-sub--mega {
	width: min(720px, calc(100vw - 32px));
	padding: 12px;
}

/* The live pair on the first row, then the six coming-soon in rows of three. */
.mxg-sub__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 2px 6px;
}

.mxg-sub__grid > .mxg-sub__cell {
	grid-column: span 3;
}

.mxg-sub__grid > .mxg-sub__cell--soon {
	grid-column: span 2;
}

/* Two classes, so these win over the `.mxg-nav a` pill styling. */
.mxg-sub .mxg-sub__cell {
	display: block;
	padding: 12px 14px;
	border-radius: var(--r-sm);
	transition: background-color .18s var(--ease);
}

.mxg-sub a.mxg-sub__cell:hover {
	background: var(--bg-soft);
}

.mxg-sub .mxg-sub__cell--soon {
	cursor: default;
}

.mxg-sub .mxg-sub__cell--soon .mxg-sub__name,
.mxg-sub .mxg-sub__cell--soon .mxg-sub__desc {
	color: var(--ink-dim);
}

.mxg-sub__soon-tag {
	padding: 2px 8px;
	border: 1px solid #f0dcb4;
	border-radius: 999px;
	background: #fff7e8;
	font-family: var(--mono);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--amber-deep);
	white-space: nowrap;
}

@media (max-width: 1150px) {
	.mxg-sub--mega {
		width: min(560px, calc(100vw - 32px));
	}

	/* Narrower panel: coming-soon cells pair up instead of squeezing three. */
	.mxg-sub__grid > .mxg-sub__cell--soon {
		grid-column: span 3;
	}
}

/* ---- Long read: topic rail ---- */

/*
 * No align-items on this grid, on purpose: the columns must stretch to the
 * full height of the prose or the sticky rail loses its travel and scrolls
 * away with the first screen.
 */
.mxg-read__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 236px;
	gap: 24px;
}

.mxg-read__part {
	scroll-margin-top: 110px;
}

.mxg-read__toc {
	padding-right: 40px;
}

.mxg-read__toc-in {
	position: sticky;
	top: 100px;
}

.mxg-read__toc-label {
	margin: 0 0 12px;
	font-family: var(--mono);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-dim);
}

.mxg-read__toc li + li {
	margin-top: 2px;
}

.mxg-read__toc a {
	display: block;
	padding: 6px 0 6px 13px;
	border-left: 2px solid var(--line-2);
	color: var(--ink-lo);
	font-size: .86rem;
	line-height: 1.42;
	transition: color .18s var(--ease), border-color .18s var(--ease);
}

.mxg-read__toc a:hover {
	color: var(--ink);
	border-left-color: var(--line-3);
}

.mxg-read__toc a.is-active {
	color: var(--indigo-deep);
	border-left-color: var(--indigo);
	font-weight: 600;
}

@media (max-width: 1080px) {
	.mxg-read__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.mxg-read__toc {
		display: none;
	}
}

/* ---- Jump chips in the interior hero ---- */

.mxg-phero__extra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 26px;
}

.mxg-jump__label {
	margin-right: 4px;
	font-family: var(--mono);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-dim);
}

/* ---- Stat pills on the product detail sections ---- */

.mxg-detail__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
}

.mxg-detail__stats li {
	padding: 6px 13px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--card);
	color: var(--ink-mid);
	font-family: var(--mono);
	font-size: .74rem;
	letter-spacing: .02em;
}

/* ---- Outcome icons (/solutions/) ---- */

.mxg-outcome__ico {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 16px;
	border: 1px solid rgba(79, 110, 247, .22);
	border-radius: 12px;
	background: var(--grad-soft);
	color: var(--indigo-deep);
}

/* ---- "How teams start" step cards (/solutions/) ---- */

.mxg-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.mxg-stepcard {
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--card);
	box-shadow: var(--sh-sm);
	transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.mxg-stepcard:hover {
	transform: translateY(-4px);
	border-color: var(--line-2);
	box-shadow: var(--sh-md);
}

.mxg-stepcard__num {
	display: inline-block;
	margin-bottom: 14px;
	font-family: var(--mono);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .1em;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.mxg-stepcard__title {
	margin-bottom: 10px;
	font-size: 1.13rem;
	font-weight: 680;
}

.mxg-stepcard__body {
	margin: 0;
	color: var(--ink-lo);
	font-size: .96rem;
	line-height: 1.6;
}

@media (max-width: 900px) {
	.mxg-steps {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Motion preferences for the additions ---- */

@media (prefers-reduced-motion: reduce) {
	.mxg-panel__tab.is-active::after {
		animation: none;
		transform: none;
	}

	[data-panel] .mxg-panel__steps.is-active .mxg-step {
		animation: none;
	}
}

/*
 * The paper card ships with overflow:hidden for its rounded corners, but a
 * hidden-overflow ancestor is a scroll container, and the sticky topic rail
 * inside it would pin to the card instead of the viewport and never stick.
 * clip does the same corner clipping without creating one.
 */
.mxg-read__panel {
	overflow: clip;
}