/* ==========================================================================
   MXG — Fresh / Bold (Direction B2)
   Vibrant, modern, motion-driven. Electric violet→blue→cyan gradient system
   with a lime pop, ultra-bold display type, aurora glows on a light canvas.
   Shared by the WordPress block theme and the static /preview.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Design tokens
---------------------------------------------------------------------------- */
:root {
  /* Ink + neutrals */
  --mxg-ink:        #0E1016;
  --mxg-ink-soft:   #2A2F3A;
  --mxg-muted:      #5B6472;
  --mxg-faint:      #939BA8;
  --mxg-canvas:     #FFFFFF;
  --mxg-surface:    #F6F5FF;   /* faint violet-tinted surface */
  --mxg-surface-2:  #EFEDFE;
  --mxg-hairline:   #E7E6F2;
  --mxg-hairline-2: #D7D5EC;

  /* Brand gradient + accents */
  --mxg-violet:   #6D4AFF;
  --mxg-violet-d: #5B3DF5;
  --mxg-blue:     #4F7BFF;
  --mxg-cyan:     #22D3EE;
  --mxg-pink:     #FF6FD8;
  --mxg-lime:     #C6F24E;   /* fresh pop — highlights only */
  --mxg-accent:      var(--mxg-violet);
  --mxg-accent-ink:  var(--mxg-violet-d);
  --mxg-accent-tint: #ECE7FF;

  --mxg-grad:       linear-gradient(100deg, #7C4DFF 0%, #4F7BFF 52%, #22D3EE 100%);
  --mxg-grad-soft:  linear-gradient(100deg, #8E63FF 0%, #6E8BFF 50%, #56DDF2 100%);
  --mxg-grad-warm:  linear-gradient(100deg, #FF6FD8 0%, #7C4DFF 60%, #4F7BFF 100%);

  /* Active product accent (overridable). */
  --mxg-product:      var(--mxg-violet);
  --mxg-product-ink:  var(--mxg-violet-d);
  --mxg-product-tint: var(--mxg-accent-tint);
  --mxg-product-grad: var(--mxg-grad);

  /* Per-product accent set (vibrant spectrum). */
  --mxg-p-miles:    #6D4AFF; --mxg-p-maxdesk:  #14C8A6; --mxg-p-mint:    #9333EA;
  --mxg-p-mate:     #FF7A45; --mxg-p-mcampus:  #0EA5E9; --mxg-p-ally:    #EC4899;
  --mxg-p-affixa:   #3B6BFF; --mxg-p-mworks:   #7C4DFF; --mxg-p-marc:    #F59E0B;
  --mxg-p-refsoft:  #10B981;

  /* Typography */
  --mxg-font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --mxg-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mxg-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --mxg-text-xs:   0.78rem;
  --mxg-text-sm:   0.9rem;
  --mxg-text-base: 1.05rem;
  --mxg-text-lg:   1.2rem;
  --mxg-text-xl:   clamp(1.35rem, 0.95rem + 1.2vw, 1.7rem);
  --mxg-text-2xl:  clamp(1.6rem, 1.1rem + 1.7vw, 2.2rem);
  --mxg-text-3xl:  clamp(1.9rem, 1.3rem + 2.1vw, 2.7rem);
  --mxg-text-4xl:  clamp(2.2rem, 1.5rem + 2.6vw, 3.3rem);
  --mxg-text-5xl:  clamp(2.4rem, 1.6rem + 2.9vw, 3.7rem);

  --mxg-1: 0.25rem; --mxg-2: 0.5rem; --mxg-3: 0.75rem; --mxg-4: 1rem;
  --mxg-5: 1.5rem; --mxg-6: 2rem; --mxg-7: 3rem; --mxg-8: 4rem;
  --mxg-9: 6rem; --mxg-10: 8rem; --mxg-11: 11rem;

  --mxg-container: 1200px;
  --mxg-container-wide: 1320px;
  --mxg-container-narrow: 780px;
  --mxg-gutter: clamp(1.25rem, 5vw, 3rem);

  --mxg-radius-sm: 10px;
  --mxg-radius:    18px;
  --mxg-radius-lg: 28px;
  --mxg-radius-xl: 36px;
  --mxg-radius-pill: 999px;

  --mxg-shadow-sm: 0 1px 2px rgba(14,16,22,.05);
  --mxg-shadow:    0 8px 30px -10px rgba(60,40,160,.18);
  --mxg-shadow-lg: 0 30px 70px -28px rgba(60,40,160,.40);
  --mxg-shadow-violet: 0 18px 40px -16px rgba(109,74,255,.45);

  --mxg-ease: cubic-bezier(.22,.61,.36,1);
  --mxg-spring: cubic-bezier(.34,1.56,.64,1);
  --mxg-dur: .6s;
}

/* ----------------------------------------------------------------------------
   2. Base
---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--mxg-canvas); color: var(--mxg-ink);
  font-family: var(--mxg-font-sans); font-size: var(--mxg-text-base);
  line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--mxg-accent); text-decoration: none; }
a:hover { color: var(--mxg-accent-ink); }
::selection { background: var(--mxg-violet); color: #fff; }
:focus-visible { outline: 2px solid var(--mxg-violet); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 {
  font-family: var(--mxg-font-display); font-weight: 600; line-height: 1.02;
  letter-spacing: -0.03em; color: var(--mxg-ink); margin: 0 0 var(--mxg-4);
}
h4 { font-family: var(--mxg-font-sans); font-weight: 650; letter-spacing: -0.01em; margin: 0 0 var(--mxg-3); }
h1 { font-size: var(--mxg-text-4xl); }
h2 { font-size: var(--mxg-text-3xl); }
h3 { font-size: var(--mxg-text-xl); letter-spacing: -0.02em; }
h4 { font-size: var(--mxg-text-lg); }
p { margin: 0 0 var(--mxg-4); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 680; }

/* Gradient text */
.mxg-grad-text {
  background: var(--mxg-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ----------------------------------------------------------------------------
   3. Layout
---------------------------------------------------------------------------- */
.mxg-container { width: 100%; max-width: var(--mxg-container); margin-inline: auto; padding-inline: var(--mxg-gutter); }
.mxg-container--wide { max-width: var(--mxg-container-wide); }
.mxg-container--narrow { max-width: var(--mxg-container-narrow); }

.mxg-section { padding-block: clamp(2.75rem, 4.5vw, 5rem); position: relative; }
.mxg-section--tight { padding-block: clamp(2rem, 3vw, 3rem); }
.mxg-section--surface { background: var(--mxg-surface); }
.mxg-section--ink { background: var(--mxg-ink); color: #C7CCD6; }
.mxg-section--ink h1, .mxg-section--ink h2, .mxg-section--ink h3, .mxg-section--ink h4 { color: #fff !important; }
.mxg-section--grad { background: var(--mxg-grad); color: #fff; }
.mxg-section--grad h1, .mxg-section--grad h2, .mxg-section--grad h3, .mxg-section--grad h4 { color: #fff !important; }
/* gradient-text spans keep their fill even inside forced-white headings */
.mxg-section--ink h2 .mxg-grad-text, .mxg-section--grad h2 .mxg-grad-text { -webkit-text-fill-color: transparent; }

.mxg-grid { display: grid; gap: var(--mxg-5); }
.mxg-grid-2 { grid-template-columns: repeat(2,1fr); }
.mxg-grid-3 { grid-template-columns: repeat(3,1fr); }
.mxg-grid-4 { grid-template-columns: repeat(4,1fr); }
.mxg-stack > * + * { margin-top: var(--mxg-4); }
@media (max-width: 980px){ .mxg-grid-3, .mxg-grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .mxg-grid-2, .mxg-grid-3, .mxg-grid-4 { grid-template-columns: 1fr; } }

.mxg-eyebrow {
  font-size: var(--mxg-text-sm); font-weight: 650; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: .55em; margin: 0 0 var(--mxg-4);
  color: var(--mxg-violet-d);
}
.mxg-eyebrow::before { content:""; width: 8px; height: 8px; border-radius: 50%; background: var(--mxg-product-grad, var(--mxg-grad)); }
.mxg-section--ink .mxg-eyebrow, .mxg-section--grad .mxg-eyebrow { color: #fff; }
.mxg-section--grad .mxg-eyebrow::before, .mxg-ctaband .mxg-eyebrow::before { background: #fff; }
.mxg-lede { font-size: var(--mxg-text-lg); color: var(--mxg-muted); max-width: 50ch; line-height: 1.55; }
.mxg-section--ink .mxg-lede { color: #AAB2BF; }
.mxg-section--grad .mxg-lede { color: rgba(255,255,255,.85); }
.mxg-head { max-width: 64ch; margin-bottom: var(--mxg-7); }
.mxg-head--center { margin-inline: auto; text-align: center; }
.mxg-head--center .mxg-lede { margin-inline: auto; }
.mxg-head--center .mxg-eyebrow { justify-content: center; }

/* ----------------------------------------------------------------------------
   4. Aurora / gradient glows
---------------------------------------------------------------------------- */
.mxg-aurora { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.mxg-aurora::before, .mxg-aurora::after {
  content:""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
  animation: mxg-drift 18s var(--mxg-ease) infinite alternate;
}
.mxg-aurora::before { width: 620px; height: 620px; top: -200px; right: -120px;
  background: radial-gradient(circle at 30% 30%, #8E63FF, transparent 62%); }
.mxg-aurora::after { width: 560px; height: 560px; top: -80px; right: 280px;
  background: radial-gradient(circle at 50% 50%, #56DDF2, transparent 62%); animation-delay: -6s; opacity:.45; }
.mxg-aurora--pink::after { background: radial-gradient(circle at 50% 50%, #FF6FD8, transparent 62%); }
@keyframes mxg-drift { 0%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-40px,30px) scale(1.12);} 100%{ transform: translate(30px,-20px) scale(.95);} }

.mxg-blob { position:absolute; z-index:-1; border-radius:50%; filter: blur(80px); opacity:.4; pointer-events:none; }

/* ----------------------------------------------------------------------------
   5. Buttons
---------------------------------------------------------------------------- */
.mxg-btn {
  --_fg:#fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--mxg-font-sans); font-size: var(--mxg-text-sm); font-weight: 650;
  line-height: 1; padding: 1em 1.6em; border-radius: var(--mxg-radius-pill);
  border: 1.5px solid transparent; color: var(--_fg); cursor: pointer; position: relative;
  transition: transform .2s var(--mxg-spring), box-shadow .25s, filter .25s, background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.mxg-btn:hover { transform: translateY(-2px); color: var(--_fg); }
.mxg-btn:active { transform: translateY(0); }
.mxg-btn .mxg-arrow { transition: transform .25s var(--mxg-ease); }
.mxg-btn:hover .mxg-arrow { transform: translateX(4px); }

.mxg-btn--primary { background: var(--mxg-product-grad, var(--mxg-grad)); background-size: 160% 160%; box-shadow: var(--mxg-shadow-violet); }
.mxg-btn--primary:hover { box-shadow: 0 22px 48px -14px rgba(109,74,255,.6); filter: saturate(1.1) brightness(1.04); }
.mxg-btn--accent { background: var(--mxg-product, var(--mxg-violet)); box-shadow: var(--mxg-shadow-violet); }
.mxg-btn--ink { background: var(--mxg-ink); color:#fff; }
.mxg-btn--ink:hover { background:#000; }
.mxg-btn--ghost { background:#fff; color: var(--mxg-ink); border-color: var(--mxg-hairline-2); }
.mxg-btn--ghost:hover { border-color: var(--mxg-violet); color: var(--mxg-violet-d); }
.mxg-btn--on-ink { background:#fff; color: var(--mxg-ink); }
.mxg-btn--on-ink.mxg-btn--ghost { background: transparent; color:#fff; border-color: rgba(255,255,255,.3); }
.mxg-btn--on-ink.mxg-btn--ghost:hover { border-color:#fff; color:#fff; }
.mxg-btn--lg { font-size: var(--mxg-text-base); padding: 1.15em 2em; }
.mxg-btn--text { background:none; border:none; padding:0; color: var(--mxg-violet-d); font-weight:650; }
.mxg-btn--text:hover { transform:none; }
.mxg-cta-row { display:flex; flex-wrap:wrap; gap: var(--mxg-3); align-items:center; }

/* ----------------------------------------------------------------------------
   6. Header
---------------------------------------------------------------------------- */
.mxg-header { position: sticky; top:0; z-index:100; background: rgba(255,255,255,.78);
  backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.mxg-header.is-stuck { border-bottom-color: var(--mxg-hairline); background: rgba(255,255,255,.9); }
.mxg-header__inner { display:flex; align-items:center; gap: var(--mxg-6); height: 78px; }
.mxg-logo { display:inline-flex; align-items:center; flex:0 0 auto; }
.mxg-logo img { height: 32px; width:auto; }
.mxg-nav { display:flex; align-items:center; gap: var(--mxg-1); margin-inline-start: var(--mxg-2); }
.mxg-nav__link { display:inline-flex; align-items:center; gap:.35em; font-size: var(--mxg-text-sm);
  font-weight: 550; color: var(--mxg-ink-soft); padding:.6em .85em; border-radius: var(--mxg-radius-sm);
  transition: color .15s, background .15s; }
.mxg-nav__link:hover { color: var(--mxg-violet-d); background: var(--mxg-surface); }
.mxg-nav__caret { width:10px; height:10px; opacity:.5; }
.mxg-header__actions { margin-inline-start:auto; display:flex; align-items:center; gap: var(--mxg-3); }
.mxg-header__actions .mxg-btn { padding:.75em 1.25em; }

.mxg-has-mega { position: static; }
.mxg-mega { position:absolute; left: var(--mxg-gutter); right: var(--mxg-gutter); top:calc(100% + 10px); transform: translateY(8px);
  max-width: 880px; margin-inline:auto; background:#fff; border:1px solid var(--mxg-hairline); border-radius: var(--mxg-radius-lg);
  box-shadow: var(--mxg-shadow-lg); padding: var(--mxg-5); opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .24s var(--mxg-ease), transform .24s var(--mxg-ease), visibility .24s; z-index:120; }
.mxg-has-mega:hover .mxg-mega, .mxg-has-mega:focus-within .mxg-mega,
.mxg-has-mega.is-open .mxg-mega { opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0); }
/* invisible bridge across the gap so hover survives the pointer travelling down */
.mxg-mega::before { content:""; position:absolute; left:0; right:0; top:-18px; height:18px; }
.mxg-mega__grid { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--mxg-1) var(--mxg-4); }
.mxg-mega--wide .mxg-mega__grid { grid-template-columns: repeat(3,1fr); }
.mxg-mega__item { display:flex; align-items:flex-start; gap: var(--mxg-3); padding: var(--mxg-3); border-radius: var(--mxg-radius); transition: background .15s; }
.mxg-mega__item:hover { background: var(--mxg-surface); }
.mxg-mega__badge { flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  font-family: var(--mxg-font-display); font-weight:600; font-size:.8rem; color:#fff; background: var(--_pa, var(--mxg-violet)); }
.mxg-mega__t { display:block; font-weight:650; font-size: var(--mxg-text-sm); color: var(--mxg-ink); margin:0; line-height:1.25; }
.mxg-mega__d { display:block; font-size: var(--mxg-text-xs); color: var(--mxg-muted); margin:.2em 0 0; line-height:1.4; }
.mxg-mega__foot { margin-top: var(--mxg-5); padding-top: var(--mxg-5); border-top:1px solid var(--mxg-hairline); display:flex; justify-content:space-between; align-items:center; gap: var(--mxg-4); }

.mxg-burger { display:none; }
@media (max-width:1080px){
  .mxg-nav, .mxg-header__actions .mxg-btn--ghost { display:none; }
  .mxg-burger { display:inline-grid; place-items:center; width:44px; height:44px; margin-inline-start:auto;
    border:1px solid var(--mxg-hairline); border-radius: var(--mxg-radius-sm); background:#fff; cursor:pointer; }
  .mxg-burger span, .mxg-burger span::before, .mxg-burger span::after { content:""; width:18px; height:2px; background: var(--mxg-ink); position:relative; display:block; }
  .mxg-burger span::before { position:absolute; top:-5px; } .mxg-burger span::after { position:absolute; top:5px; }
  .mxg-header__actions { margin-inline-start:0; }
}

/* ----------------------------------------------------------------------------
   7. Badge / pill
---------------------------------------------------------------------------- */
.mxg-pill { display:inline-flex; align-items:center; gap:.5em; font-size: var(--mxg-text-sm); font-weight:650;
  background: var(--mxg-accent-tint); color: var(--mxg-violet-d); padding:.55em 1em; border-radius:99px; }
.mxg-pill__spark { width:14px; height:14px; }
.mxg-pill--glow { background:#fff; border:1px solid var(--mxg-hairline); box-shadow: var(--mxg-shadow-sm); }
.mxg-pill--glow .mxg-dot-grad { width:8px; height:8px; border-radius:50%; background: var(--mxg-grad); }

/* ----------------------------------------------------------------------------
   8. Hero
---------------------------------------------------------------------------- */
.mxg-hero { position: relative; padding-block: clamp(1.5rem,3vw,2.75rem) clamp(2.5rem,5vw,4.5rem); }
.mxg-hero--center { text-align:center; }
.mxg-hero__grid { display:grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:920px){ .mxg-hero__grid { grid-template-columns: 1fr; } }
.mxg-hero .mxg-pill { display:flex; width:max-content; max-width:100%; margin-bottom: var(--mxg-5); }
.mxg-hero--center .mxg-pill { margin-inline:auto; }
.mxg-hero__title { font-size: var(--mxg-text-5xl); line-height:1.04; letter-spacing:-0.035em; margin:0 0 var(--mxg-5); font-weight:600; }
.mxg-hero--center .mxg-hero__title { margin-inline:auto; max-width: 16ch; }
.mxg-hero__lede { font-size: clamp(1.1rem,.9rem + .6vw,1.4rem); color: var(--mxg-muted); max-width: 54ch; margin-bottom: var(--mxg-6); line-height:1.5; }
.mxg-hero--center .mxg-hero__lede { margin-inline:auto; }
.mxg-hero--center .mxg-cta-row { justify-content:center; }
.mxg-hero__meta { margin-top: var(--mxg-6); display:flex; flex-wrap:wrap; gap: var(--mxg-6); color: var(--mxg-muted); font-size: var(--mxg-text-sm); }
.mxg-hero--center .mxg-hero__meta { justify-content:center; }
.mxg-hero__meta b { color: var(--mxg-ink); font-family: var(--mxg-font-display); font-weight:600; font-size:1.7rem; display:block; letter-spacing:-0.02em; }

/* word-by-word reveal */
.mxg-words { display:inline; }
.mxg-words .mxg-word { display:inline-block; opacity:0; transform: translateY(18px); }
.mxg-words.is-in .mxg-word { animation: mxg-wordin .7s var(--mxg-ease) forwards; }
@keyframes mxg-wordin { to { opacity:1; transform:none; } }

/* Hero visual */
.mxg-hero__visual { position: relative; perspective: 1400px; }
.mxg-panel { background:#fff; border:1px solid var(--mxg-hairline); border-radius: var(--mxg-radius-lg);
  box-shadow: var(--mxg-shadow-lg); overflow:hidden; transform: rotateY(-9deg) rotateX(3deg); transform-style: preserve-3d;
  transition: transform .4s var(--mxg-ease); will-change: transform; }
.mxg-hero__visual:hover .mxg-panel { transform: rotateY(-4deg) rotateX(1deg); }
.mxg-panel__bar { display:flex; align-items:center; gap:.4em; padding:.85em 1.1em; border-bottom:1px solid var(--mxg-hairline); background: var(--mxg-surface); }
.mxg-panel__bar i { width:9px; height:9px; border-radius:50%; background: var(--mxg-hairline-2); }
.mxg-panel__body { padding: var(--mxg-5); display:grid; gap: var(--mxg-4); }
.mxg-metric { display:flex; align-items:baseline; justify-content:space-between; padding-bottom: var(--mxg-3); border-bottom:1px solid var(--mxg-hairline); }
.mxg-metric:last-child { border-bottom:0; padding-bottom:0; }
.mxg-metric__v { font-family: var(--mxg-font-display); font-size:1.8rem; font-weight:600; letter-spacing:-0.02em; }
.mxg-metric__l { color: var(--mxg-muted); font-size: var(--mxg-text-sm); }
.mxg-metric__d { color:#10B981; font-size: var(--mxg-text-sm); font-weight:650; }
.mxg-bar { height:8px; border-radius:99px; background: var(--mxg-surface-2); overflow:hidden; }
.mxg-bar > i { display:block; height:100%; border-radius:99px; background: var(--mxg-grad); width:0; transition: width 1.4s var(--mxg-ease); }
.mxg-float { position:absolute; background:#fff; border:1px solid var(--mxg-hairline); border-radius: var(--mxg-radius);
  box-shadow: var(--mxg-shadow); padding:.85em 1.1em; font-size: var(--mxg-text-sm); display:flex; gap:.6em; align-items:center; animation: mxg-bob 5s var(--mxg-ease) infinite alternate; }
.mxg-float--tr { top:-20px; right:-14px; }
.mxg-float--bl { bottom:-20px; left:-14px; animation-delay:-2.5s; }
.mxg-dot { width:9px; height:9px; border-radius:50%; background:#10B981; box-shadow:0 0 0 4px rgba(16,185,129,.16); }
@keyframes mxg-bob { to { transform: translateY(-12px); } }

/* ----------------------------------------------------------------------------
   9. Marquee
---------------------------------------------------------------------------- */
.mxg-marquee { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mxg-marquee__track { display:flex; gap: clamp(2rem,5vw,4rem); width:max-content; animation: mxg-marquee 32s linear infinite; }
.mxg-marquee:hover .mxg-marquee__track { animation-play-state: paused; }
.mxg-marquee__track span { font-family: var(--mxg-font-display); font-weight:600; font-size:1.5rem; color: var(--mxg-ink-soft); opacity:.55; white-space:nowrap; }
@keyframes mxg-marquee { to { transform: translateX(-50%); } }

.mxg-trust { text-align:center; }
.mxg-trust__label { font-size: var(--mxg-text-xs); letter-spacing:.12em; text-transform:uppercase; color: var(--mxg-faint); margin-bottom: var(--mxg-5); font-weight:600; }
.mxg-badge-row { display:flex; flex-wrap:wrap; gap: var(--mxg-3); justify-content:center; margin-top: var(--mxg-5); }
.mxg-badge { display:inline-flex; align-items:center; gap:.5em; font-size: var(--mxg-text-xs); font-weight:650;
  color: var(--mxg-ink-soft); background:#fff; border:1px solid var(--mxg-hairline); padding:.55em 1em; border-radius:99px; box-shadow: var(--mxg-shadow-sm); }
.mxg-badge svg { width:14px; height:14px; color: var(--mxg-violet); }

/* ----------------------------------------------------------------------------
   10. Cards
---------------------------------------------------------------------------- */
.mxg-card { background:#fff; border:1px solid var(--mxg-hairline); border-radius: var(--mxg-radius-lg);
  padding: var(--mxg-6); transition: transform .3s var(--mxg-spring), box-shadow .3s, border-color .3s;
  display:flex; flex-direction:column; height:100%; position:relative; }
.mxg-card:hover { transform: translateY(-6px); box-shadow: var(--mxg-shadow); border-color: transparent; }
.mxg-card__icon { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom: var(--mxg-4);
  background: var(--mxg-product-tint); color: var(--mxg-product); }
.mxg-card__icon svg { width:24px; height:24px; }
.mxg-card h3 { font-family: var(--mxg-font-sans); font-size: var(--mxg-text-lg); font-weight:680; letter-spacing:-0.01em; }
.mxg-card p { color: var(--mxg-muted); font-size: var(--mxg-text-sm); }
.mxg-card__link { margin-top:auto; padding-top: var(--mxg-4); font-weight:650; font-size: var(--mxg-text-sm); display:inline-flex; gap:.4em; align-items:center; color: var(--mxg-violet-d); }

/* gradient-border card (on hover) */
.mxg-card--glow::after { content:""; position:absolute; inset:-1.5px; border-radius:inherit; padding:1.5px;
  background: var(--mxg-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition: opacity .3s; pointer-events:none; }
.mxg-card--glow:hover::after { opacity:1; }

.mxg-outcome .mxg-tag { font-size: var(--mxg-text-xs); font-weight:650; color: var(--mxg-faint); text-transform:uppercase; letter-spacing:.08em; }
.mxg-outcome__stat { font-family: var(--mxg-font-display); font-size: var(--mxg-text-2xl); font-weight:600; color: var(--mxg-ink); letter-spacing:-0.02em; margin:.15em 0; }
.mxg-outcome__stat span { color: var(--mxg-violet); }

.mxg-product-card { --_pa: var(--mxg-violet); }
.mxg-product-card .mxg-logo-mark { width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin-bottom: var(--mxg-4);
  font-family: var(--mxg-font-display); font-weight:600; font-size:1.15rem; color:#fff; background: var(--_pa); letter-spacing:-0.02em; }
.mxg-product-card h3 { margin-bottom:.2em; }
.mxg-product-card .mxg-cat { font-size: var(--mxg-text-xs); color: var(--mxg-faint); font-weight:650; letter-spacing:.04em; text-transform:uppercase; }
.mxg-product-card p { margin-top:.5em; }

/* ----------------------------------------------------------------------------
   11. Steps / features
---------------------------------------------------------------------------- */
.mxg-steps { counter-reset: step; display:grid; gap: var(--mxg-6); }
.mxg-step { display:grid; grid-template-columns:auto 1fr; gap: var(--mxg-5); align-items:start; }
.mxg-step__n { counter-increment: step; width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background: var(--mxg-product-tint); color: var(--mxg-product); font-family: var(--mxg-font-display); font-weight:600; font-size:1.2rem; }
.mxg-step__n::before { content: counter(step,decimal-leading-zero); }
.mxg-step h3 { margin-bottom:.25em; font-family: var(--mxg-font-sans); font-size: var(--mxg-text-lg); font-weight:680; }
.mxg-step p { color: var(--mxg-muted); margin:0; }

.mxg-features { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--mxg-5) var(--mxg-7); }
@media (max-width:720px){ .mxg-features { grid-template-columns:1fr; } }
.mxg-feature { display:grid; grid-template-columns:auto 1fr; gap: var(--mxg-4); }
.mxg-feature__i { width:42px; height:42px; border-radius:12px; background: var(--mxg-product-tint); color: var(--mxg-product); display:grid; place-items:center; }
.mxg-feature__i svg { width:20px; height:20px; }
.mxg-feature h4 { margin:.1em 0 .3em; }
.mxg-feature p { color: var(--mxg-muted); font-size: var(--mxg-text-sm); margin:0; }

/* ----------------------------------------------------------------------------
   12. Proof
---------------------------------------------------------------------------- */
.mxg-quote { font-family: var(--mxg-font-display); font-size: var(--mxg-text-2xl); line-height:1.25; letter-spacing:-0.02em; font-weight:500; }
.mxg-quote__src { display:flex; align-items:center; gap: var(--mxg-3); margin-top: var(--mxg-5); }
.mxg-avatar { width:46px; height:46px; border-radius:50%; background: var(--mxg-grad); display:grid; place-items:center; font-weight:650; color:#fff; }
.mxg-quote__name { font-weight:650; font-size: var(--mxg-text-sm); }
.mxg-quote__role { color: var(--mxg-muted); font-size: var(--mxg-text-sm); }

.mxg-statbar { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--mxg-5); }
@media (max-width:720px){ .mxg-statbar { grid-template-columns: repeat(2,1fr); } }
.mxg-statbar b { display:block; font-family: var(--mxg-font-display); font-size: var(--mxg-text-3xl); font-weight:600; letter-spacing:-0.03em; line-height:1.1; }
.mxg-statbar span { display:block; color: var(--mxg-muted); font-size: var(--mxg-text-sm); margin-top:.2em; }
.mxg-section--ink .mxg-statbar span { color:#AAB2BF; }

/* ----------------------------------------------------------------------------
   13. Pricing
---------------------------------------------------------------------------- */
.mxg-pricing { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--mxg-5); align-items:stretch; }
@media (max-width:920px){ .mxg-pricing { grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
.mxg-plan { background:#fff; border:1px solid var(--mxg-hairline); border-radius: var(--mxg-radius-lg); padding: var(--mxg-6); display:flex; flex-direction:column; }
.mxg-plan--featured { border-color: transparent; box-shadow: var(--mxg-shadow); position:relative; background:
  linear-gradient(#fff,#fff) padding-box, var(--mxg-grad) border-box; border:2px solid transparent; }
.mxg-plan--featured::before { content:"Most popular"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background: var(--mxg-grad); color:#fff; font-size: var(--mxg-text-xs); font-weight:650; padding:.4em 1em; border-radius:99px; }
.mxg-plan__name { font-family: var(--mxg-font-sans); font-weight:680; font-size: var(--mxg-text-lg); }
.mxg-plan__price { font-family: var(--mxg-font-display); font-size: var(--mxg-text-3xl); font-weight:600; letter-spacing:-0.03em; margin:.15em 0 0; }
.mxg-plan__price small { font-family: var(--mxg-font-sans); font-size: var(--mxg-text-sm); color: var(--mxg-muted); font-weight:500; }
.mxg-plan__desc { color: var(--mxg-muted); font-size: var(--mxg-text-sm); margin:.5em 0 var(--mxg-5); }
.mxg-plan ul { list-style:none; padding:0; margin:0 0 var(--mxg-6); display:grid; gap:.7em; }
.mxg-plan li { display:grid; grid-template-columns:auto 1fr; gap:.6em; font-size: var(--mxg-text-sm); color: var(--mxg-ink-soft); }
.mxg-plan li svg { width:16px; height:16px; color: var(--mxg-violet); margin-top:.2em; }
.mxg-plan .mxg-btn { margin-top:auto; width:100%; }

/* ----------------------------------------------------------------------------
   14. CTA band
---------------------------------------------------------------------------- */
.mxg-ctaband { background: var(--mxg-grad); color:#fff; border-radius: var(--mxg-radius-xl);
  padding: clamp(2.5rem,5vw,5rem); text-align:center; position:relative; overflow:hidden; }
.mxg-ctaband h2 { color:#fff; max-width:22ch; margin-inline:auto; }
.mxg-ctaband p { color:rgba(255,255,255,.88); max-width:50ch; margin-inline:auto; margin-bottom:var(--mxg-6); }
.mxg-ctaband .mxg-cta-row { justify-content:center; }
.mxg-ctaband::before { content:""; position:absolute; width:500px; height:500px; border-radius:50%; top:-280px; right:-120px;
  background: radial-gradient(circle, rgba(255,255,255,.35), transparent 60%); }
.mxg-ctaband::after { content:""; position:absolute; width:420px; height:420px; border-radius:50%; bottom:-260px; left:-80px;
  background: radial-gradient(circle, rgba(255,111,216,.4), transparent 60%); }
.mxg-ctaband > * { position:relative; z-index:1; }

/* ----------------------------------------------------------------------------
   15. Footer
---------------------------------------------------------------------------- */
.mxg-footer { background: var(--mxg-ink); color:#AAB2BF; padding-block: var(--mxg-9) var(--mxg-6); }
.mxg-footer a { color:#C7CCD6; font-size: var(--mxg-text-sm); }
.mxg-footer a:hover { color:#fff; }
.mxg-footer__top { display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap: var(--mxg-6); padding-bottom: var(--mxg-8); border-bottom:1px solid rgba(255,255,255,.1); }
@media (max-width:900px){ .mxg-footer__top { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .mxg-footer__top { grid-template-columns:1fr; } }
.mxg-footer__brand img { height:30px; width:auto; margin-bottom: var(--mxg-4); }
.mxg-footer__brand p { color:#7A828F; font-size: var(--mxg-text-sm); max-width:32ch; }
.mxg-footer h5 { color:#fff; font-family: var(--mxg-font-sans); font-size: var(--mxg-text-xs); text-transform:uppercase; letter-spacing:.1em; margin:0 0 var(--mxg-4); font-weight:650; }
.mxg-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:.7em; }
.mxg-footer__bottom { display:flex; flex-wrap:wrap; gap: var(--mxg-4); align-items:center; justify-content:space-between; padding-top: var(--mxg-6); font-size: var(--mxg-text-xs); color:#646C79; }
.mxg-footer__util { display:flex; gap: var(--mxg-5); align-items:center; flex-wrap:wrap; }
.mxg-region { display:inline-flex; gap:.4em; align-items:center; }
.mxg-region a.is-active { color:#fff; font-weight:650; }

/* ----------------------------------------------------------------------------
   16. Product subnav
---------------------------------------------------------------------------- */
.mxg-subnav { position: sticky; top:78px; z-index:80; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom:1px solid var(--mxg-hairline); }
.mxg-subnav__inner { display:flex; align-items:center; gap: var(--mxg-5); height:58px; }
.mxg-subnav__brand { display:flex; align-items:center; gap:.6em; font-weight:680; font-family: var(--mxg-font-display); }
.mxg-subnav__brand i { width:28px; height:28px; border-radius:8px; background: var(--mxg-product); color:#fff; display:grid; place-items:center; font-family: var(--mxg-font-display); font-size:.72rem; font-weight:600; }
.mxg-subnav__links { display:flex; gap: var(--mxg-1); margin-inline-start:auto; align-items:center; }
.mxg-subnav__links a { font-size: var(--mxg-text-sm); color: var(--mxg-muted); padding:.4em .7em; border-radius:8px; }
.mxg-subnav__links a:hover { color: var(--mxg-ink); background: var(--mxg-surface); }
@media (max-width:760px){ .mxg-subnav__links { display:none; } }

/* ----------------------------------------------------------------------------
   17. Motion — reveal + stagger
---------------------------------------------------------------------------- */
/* Reveals are hidden ONLY when JS is present (html.mxg-js). If JS never runs or
   fails, content stays visible. A timed failsafe (html.mxg-allin) also reveals
   everything after a few seconds regardless. */
.mxg-js [data-reveal] { opacity:0; transform: translateY(26px); transition: opacity .7s var(--mxg-ease), transform .7s var(--mxg-ease); }
.mxg-js [data-reveal].is-in { opacity:1; transform:none; }
.mxg-js [data-reveal-stagger] > * { opacity:0; transform: translateY(26px); transition: opacity .6s var(--mxg-ease), transform .6s var(--mxg-ease); }
.mxg-js [data-reveal-stagger].is-in > * { opacity:1; transform:none; }
.mxg-allin [data-reveal], .mxg-allin [data-reveal-stagger] > * { opacity:1 !important; transform:none !important; }
.mxg-allin .mxg-word { opacity:1 !important; transform:none !important; }
[data-reveal-stagger].is-in > *:nth-child(1){ transition-delay:.05s; }
[data-reveal-stagger].is-in > *:nth-child(2){ transition-delay:.13s; }
[data-reveal-stagger].is-in > *:nth-child(3){ transition-delay:.21s; }
[data-reveal-stagger].is-in > *:nth-child(4){ transition-delay:.29s; }
[data-reveal-stagger].is-in > *:nth-child(5){ transition-delay:.37s; }
[data-reveal-stagger].is-in > *:nth-child(6){ transition-delay:.45s; }
[data-reveal-stagger].is-in > *:nth-child(7){ transition-delay:.53s; }
[data-reveal-stagger].is-in > *:nth-child(8){ transition-delay:.61s; }
[data-reveal-stagger].is-in > *:nth-child(9){ transition-delay:.69s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity:1 !important; transform:none !important; }
  .mxg-words .mxg-word { opacity:1 !important; transform:none !important; }
  .mxg-panel { transform:none !important; }
  html { scroll-behavior:auto; }
}

/* ----------------------------------------------------------------------------
   18. Utilities
---------------------------------------------------------------------------- */
.mxg-center { text-align:center; }
.mxg-muted { color: var(--mxg-muted); }
.mxg-divider { height:1px; background: var(--mxg-hairline); border:0; margin:0; }
.mxg-skip { position:absolute; left:-999px; }
.mxg-skip:focus { left: var(--mxg-4); top: var(--mxg-4); z-index:999; background:#fff; padding:.6em 1em; border-radius:8px; box-shadow: var(--mxg-shadow); }
hr { border:0; border-top:1px solid var(--mxg-hairline); margin: var(--mxg-7) 0; }

/* ==========================================================================
   19. v3 components — AI-native homepage system
   Rotating hero words, AI-ops panel, bento tiles, status badges, MANTIS demo,
   pillars, free tools. All loops honour .is-running (viewport pause) and
   prefers-reduced-motion.
   ========================================================================== */

/* --- Rotating headline word (no layout shift: grid-stacked words) ---
   Block-level grid so it sits on its OWN line and can never overlap the line
   above. (inline-grid synthesises its baseline from its bottom edge, so
   vertical-align:baseline pulled the whole word up into the line above —
   visible with the heavier heading font WordPress applies via theme.json.)
   line-height + padding-top give the gradient word its own breathing room so
   its ascenders never collide with the descenders of the line above, even at
   the tight 1.04 hero leading. */
.mxg-rotate { display:grid; justify-items:start; width:fit-content; line-height:1.14; padding-top:.14em; }
.mxg-rotate > span {
  grid-area:1/1; white-space:nowrap; opacity:0; transform:translateY(.45em);
  transition:opacity .45s var(--mxg-ease), transform .45s var(--mxg-ease);
  background:var(--mxg-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.mxg-rotate > span.is-active { opacity:1; transform:none; }
.mxg-rotate > span.is-out { opacity:0; transform:translateY(-.45em); }

/* --- Hero AI-operations panel --- */
.mxg-ops { position:relative; }
.mxg-ops .mxg-panel { transform:rotateY(-7deg) rotateX(2deg); }
.mxg-ops__chips { display:flex; flex-wrap:wrap; gap:.5em; padding:var(--mxg-4) var(--mxg-5) 0; }
.mxg-ops__chip {
  display:inline-flex; align-items:center; gap:.45em; font-size:var(--mxg-text-xs); font-weight:650;
  color:var(--mxg-ink-soft); border:1px solid var(--mxg-hairline); border-radius:99px; padding:.4em .8em;
  background:#fff; transition:border-color .3s, box-shadow .3s, color .3s;
}
.mxg-ops__chip i { width:7px; height:7px; border-radius:50%; background:var(--mxg-hairline-2); transition:background .3s; }
.mxg-ops__chip.is-active { border-color:var(--_pa, var(--mxg-violet)); color:var(--mxg-ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--_pa, var(--mxg-violet)) 14%, transparent); }
.mxg-ops__chip.is-active i { background:var(--_pa, var(--mxg-violet)); animation:mxg-pulse 1.2s var(--mxg-ease) infinite; }
@keyframes mxg-pulse { 50% { box-shadow:0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); } }
.mxg-ops__feed { display:grid; gap:.5em; padding:var(--mxg-4) var(--mxg-5) var(--mxg-5); min-height:232px; align-content:start; }
.mxg-ops__item {
  display:flex; align-items:center; gap:.65em; font-size:var(--mxg-text-sm); color:var(--mxg-ink-soft);
  background:var(--mxg-surface); border:1px solid var(--mxg-hairline); border-radius:12px; padding:.6em .85em;
  opacity:0; transform:translateY(10px); transition:opacity .5s var(--mxg-ease), transform .5s var(--mxg-ease);
}
.mxg-ops__item.is-in { opacity:1; transform:none; }
.mxg-ops__item.is-fading { opacity:.35; }
.mxg-ops__check {
  flex:0 0 auto; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:var(--_pa, var(--mxg-violet));
}
.mxg-ops__check svg { width:11px; height:11px; }
.mxg-ops__time { margin-left:auto; font-size:var(--mxg-text-xs); color:var(--mxg-faint); }

/* --- Status badges --- */
.mxg-status { display:inline-flex; align-items:center; font-size:.68rem; font-weight:700; letter-spacing:.02em; padding:.32em .75em; border-radius:99px; white-space:nowrap; }
.mxg-status--available { background:#E5F7ED; color:#0B7A46; }
.mxg-status--beta { background:var(--mxg-accent-tint); color:var(--mxg-violet-d); }
.mxg-status--soon { background:var(--mxg-surface-2); color:var(--mxg-muted); }

/* --- Bento product grid --- */
.mxg-bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-flow:dense; gap:var(--mxg-4); }
.mxg-tile {
  --_pa:var(--mxg-violet); --_pa2:var(--mxg-cyan);
  position:relative; display:flex; flex-direction:column; gap:.55em; min-height:200px;
  background:#fff; border:1px solid var(--mxg-hairline); border-radius:var(--mxg-radius-lg);
  padding:var(--mxg-5); overflow:hidden;
  transition:transform .3s var(--mxg-spring), box-shadow .3s, border-color .3s;
}
.mxg-tile:hover, .mxg-tile:focus-visible { transform:translateY(-5px); box-shadow:var(--mxg-shadow); border-color:color-mix(in srgb, var(--_pa) 45%, var(--mxg-hairline)); outline:none; }
.mxg-tile::after { content:""; position:absolute; inset:auto 0 0 0; height:3px; background:linear-gradient(90deg,var(--_pa),var(--_pa2)); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--mxg-ease); }
.mxg-tile:hover::after, .mxg-tile:focus-visible::after { transform:scaleX(1); }
.mxg-tile--lg { grid-column:span 2; grid-row:span 2; }
.mxg-tile--sm { min-height:150px; padding:var(--mxg-4) var(--mxg-5); }
@media (max-width:980px){ .mxg-bento { grid-template-columns:repeat(2,1fr); } .mxg-tile--lg { grid-column:span 2; grid-row:auto; } }
@media (max-width:600px){ .mxg-bento { grid-template-columns:1fr; } .mxg-tile--lg { grid-column:auto; } .mxg-tile { min-height:0; } }
.mxg-tile__top { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--mxg-3); }
.mxg-tile .mxg-logo-mark {
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto;
  font-family:var(--mxg-font-display); font-weight:600; font-size:1rem; color:#fff;
  background:linear-gradient(135deg,var(--_pa),var(--_pa2)); letter-spacing:-0.02em; overflow:hidden;
}
.mxg-logo-mark.has-img { background:var(--mxg-surface); }
.mxg-logo-mark.has-img img { width:100%; height:100%; object-fit:contain; padding:6px; }
.mxg-tile__cat { font-size:var(--mxg-text-xs); color:var(--mxg-faint); font-weight:650; letter-spacing:.05em; text-transform:uppercase; }
.mxg-tile h3 { font-family:var(--mxg-font-display); font-size:1.25rem; margin:0; letter-spacing:-0.01em; }
.mxg-tile p { color:var(--mxg-muted); font-size:var(--mxg-text-sm); margin:0; }
.mxg-tile--lg p { font-size:var(--mxg-text-base); }
.mxg-tile__link { margin-top:auto; padding-top:var(--mxg-3); font-weight:650; font-size:var(--mxg-text-sm); color:var(--mxg-violet-d); display:inline-flex; align-items:center; gap:.4em; transition:gap .25s var(--mxg-ease); }
.mxg-tile:hover .mxg-tile__link { gap:.7em; color:var(--_pa); }

/* Micro workflow feed inside featured tiles */
.mxg-mini { margin-top:auto; display:grid; gap:.4em; padding-top:var(--mxg-4); }
.mxg-mini__row {
  display:flex; align-items:center; gap:.55em; font-size:var(--mxg-text-xs); color:var(--mxg-muted);
  background:var(--mxg-surface); border:1px solid var(--mxg-hairline); border-radius:10px; padding:.5em .75em;
}
.mxg-mini__row i { flex:0 0 auto; width:16px; height:16px; border-radius:50%; display:grid; place-items:center; background:var(--_pa); color:#fff; }
.mxg-mini__row i svg { width:9px; height:9px; }
.mxg-mini__row em { font-style:normal; margin-left:auto; font-weight:650; color:var(--_pa); }
.is-running .mxg-mini__row { animation:mxg-rowglow 6s var(--mxg-ease) infinite; }
.is-running .mxg-mini__row:nth-child(2){ animation-delay:2s; } .is-running .mxg-mini__row:nth-child(3){ animation-delay:4s; }
@keyframes mxg-rowglow { 0%,100%{ border-color:var(--mxg-hairline); } 12%{ border-color:color-mix(in srgb, var(--_pa) 55%, var(--mxg-hairline)); background:#fff; } 30%{ border-color:var(--mxg-hairline); } }

/* --- Solution cards (business problems) --- */
.mxg-sol { display:flex; flex-direction:column; gap:.6em; }
.mxg-sol__products { display:flex; gap:.4em; flex-wrap:wrap; margin-top:auto; padding-top:var(--mxg-4); }
.mxg-sol__chip { display:inline-flex; align-items:center; gap:.4em; font-size:var(--mxg-text-xs); font-weight:650; color:var(--mxg-ink-soft); background:var(--mxg-surface); border:1px solid var(--mxg-hairline); border-radius:99px; padding:.35em .7em; }
.mxg-sol__chip i { width:8px; height:8px; border-radius:3px; background:var(--_pc, var(--mxg-violet)); }

/* --- Why MXG pillars (dark) --- */
.mxg-pillar { position:relative; background:#15171F; border:1px solid rgba(255,255,255,.08); border-radius:var(--mxg-radius-lg); padding:var(--mxg-6); overflow:hidden; }
.mxg-pillar::before { content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--mxg-violet),var(--mxg-cyan),transparent); background-size:220% 100%; opacity:.5; }
.is-running .mxg-pillar::before { animation:mxg-scan 5s linear infinite; }
.mxg-pillar:nth-child(2)::before { animation-delay:1.2s; } .mxg-pillar:nth-child(3)::before { animation-delay:2.4s; } .mxg-pillar:nth-child(4)::before { animation-delay:3.6s; }
@keyframes mxg-scan { from{ background-position:220% 0; } to{ background-position:-120% 0; } }
.mxg-pillar h3 { color:#fff; font-family:var(--mxg-font-sans); font-size:var(--mxg-text-lg); font-weight:680; margin-bottom:.35em; }
.mxg-pillar p { color:#AAB2BF; font-size:var(--mxg-text-sm); margin:0; }

/* --- MANTIS animated test demo --- */
.mxg-mantis { --_pa:#16A34A; }
.mxg-mantis__browser { background:#fff; border:1px solid var(--mxg-hairline); border-radius:var(--mxg-radius-lg); box-shadow:var(--mxg-shadow-lg); overflow:hidden; }
.mxg-mantis__url { display:flex; align-items:center; gap:.6em; padding:.75em 1em; background:var(--mxg-surface); border-bottom:1px solid var(--mxg-hairline); }
.mxg-mantis__url i { width:9px; height:9px; border-radius:50%; background:var(--mxg-hairline-2); }
.mxg-mantis__url span { flex:1; font-size:var(--mxg-text-xs); color:var(--mxg-muted); background:#fff; border:1px solid var(--mxg-hairline); border-radius:8px; padding:.35em .8em; font-family:var(--mxg-font-mono); }
.mxg-mantis__body { padding:var(--mxg-5); display:grid; gap:.55em; }
.mxg-mstep { display:flex; align-items:center; gap:.65em; font-size:var(--mxg-text-sm); color:var(--mxg-ink-soft); border:1px solid var(--mxg-hairline); border-radius:12px; padding:.6em .85em; background:#fff; }
.mxg-mstep i { flex:0 0 auto; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--mxg-hairline-2); font-size:10px; }
.mxg-mstep--pass i { background:#16A34A; }
.mxg-mstep--fail { border-color:#FCA5A5; background:#FEF2F2; }
.mxg-mstep--fail i { background:#DC2626; }
.mxg-mstep em { font-style:normal; margin-left:auto; font-size:var(--mxg-text-xs); font-weight:650; color:var(--mxg-faint); }
.mxg-mstep--fail em { color:#DC2626; }
.mxg-mantis__report { display:flex; gap:.6em; }
.mxg-mantis__report span { display:inline-flex; align-items:center; gap:.45em; font-size:var(--mxg-text-xs); font-weight:650; color:var(--mxg-ink-soft); background:var(--mxg-surface); border:1px solid var(--mxg-hairline); border-radius:99px; padding:.45em .85em; }
.mxg-mantis__report svg { width:13px; height:13px; color:#16A34A; }
.is-running .mxg-mstep { opacity:0; animation:mxg-stepin .6s var(--mxg-ease) forwards; }
.is-running .mxg-mstep:nth-child(1){ animation-delay:.2s; } .is-running .mxg-mstep:nth-child(2){ animation-delay:1.4s; }
.is-running .mxg-mstep:nth-child(3){ animation-delay:2.6s; } .is-running .mxg-mstep:nth-child(4){ animation-delay:3.8s; }
.is-running .mxg-mantis__report { opacity:0; animation:mxg-stepin .6s var(--mxg-ease) 5s forwards; }
@keyframes mxg-stepin { from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* --- Free tools grid --- */
.mxg-tool { position:relative; display:flex; flex-direction:column; gap:.35em; background:#fff; border:1px solid var(--mxg-hairline); border-radius:var(--mxg-radius); padding:var(--mxg-4) var(--mxg-5); transition:transform .25s var(--mxg-spring), box-shadow .25s, border-color .25s; }
.mxg-tool:hover { transform:translateY(-4px); box-shadow:var(--mxg-shadow); border-color:var(--mxg-accent-line, var(--mxg-hairline-2)); }
.mxg-tool__i { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--mxg-accent-tint); color:var(--mxg-violet-d); margin-bottom:.3em; }
.mxg-tool__i svg { width:18px; height:18px; }
.mxg-tool h4 { font-size:var(--mxg-text-sm); margin:0; }
.mxg-tool p { font-size:var(--mxg-text-xs); color:var(--mxg-muted); margin:0; }
.mxg-tool .mxg-ai { position:absolute; top:12px; right:12px; font-size:.6rem; font-weight:800; letter-spacing:.06em; color:#fff; background:var(--mxg-grad); border-radius:6px; padding:.25em .5em; }

/* --- Reduced motion for v3 loops --- */
@media (prefers-reduced-motion: reduce) {
  .mxg-rotate > span { transition:none; }
  .is-running .mxg-mini__row, .is-running .mxg-mstep, .is-running .mxg-mantis__report, .is-running .mxg-pillar::before, .mxg-ops__chip.is-active i { animation:none !important; opacity:1 !important; }
}

/* Mega-menu grouped columns */
.mxg-mega__grid--groups { grid-template-columns: 1.2fr 1.2fr .9fr; align-items:start; }
@media (max-width:900px){ .mxg-mega__grid--groups { grid-template-columns:1fr; } }
.mxg-mega__group { display:grid; gap:.15em; align-content:start; }
.mxg-mega__cat { font-size:.68rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--mxg-faint); margin:0 0 .5em .75em; }
.mxg-mega__t .mxg-status { margin-left:.5em; vertical-align:middle; }
.mxg-mega__badge.has-img { background:var(--mxg-surface); }
.mxg-mega__badge.has-img img { width:100%; height:100%; object-fit:contain; padding:5px; }
.mxg-mega__badge { background:linear-gradient(135deg,var(--_pa,var(--mxg-violet)),var(--_pa2,var(--mxg-cyan))); }

/* Small-screen hero: keep the longest rotating word inside the viewport */
html { overflow-x: clip; }
@media (max-width: 480px) {
  .mxg-hero__title { font-size: clamp(1.55rem, 7.8vw, 2.1rem); }
  .mxg-hero__meta { gap: var(--mxg-4) var(--mxg-6); }
  .mxg-float { display: none; }
}

/* ==========================================================================
   20. Orbit hero — AI ecosystem stage (motion.so / cello-inspired)
   Gradient core with pulsing rings, product nodes, flowing gradient
   connectors, cycling activity toast. Loops gated by .is-running.
   ========================================================================== */
.mxg-orbit { position:relative; }
.mxg-orbit__stage { position:relative; width:100%; aspect-ratio: 520/470; }
.mxg-orbit__glow { position:absolute; left:50%; top:50%; width:70%; height:70%; transform:translate(-50%,-50%);
  background: radial-gradient(circle at 40% 40%, rgba(124,77,255,.28), transparent 60%),
              radial-gradient(circle at 65% 60%, rgba(34,211,238,.24), transparent 60%);
  filter: blur(50px); border-radius:50%; pointer-events:none; }
.mxg-orbit__lines { position:absolute; inset:0; width:100%; height:100%; }
.mxg-orbit__lines path { fill:none; stroke:url(#mxgline); stroke-width:1.6; stroke-dasharray:3 9; stroke-linecap:round; opacity:.45; transition:opacity .4s, stroke-width .4s; }
.is-running .mxg-orbit__lines path { animation: mxg-dashflow 2.6s linear infinite; }
.mxg-orbit__lines path.is-hot { opacity:1; stroke-width:2.4; }
@keyframes mxg-dashflow { to { stroke-dashoffset:-48; } }

.mxg-orbit__core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:106px; height:106px; border-radius:30px; background:var(--mxg-grad); color:#fff;
  display:grid; place-items:center; font-family:var(--mxg-font-display); font-weight:700; font-size:1.35rem; letter-spacing:-0.02em;
  box-shadow: 0 24px 60px -18px rgba(109,74,255,.55); }
.mxg-orbit__core::before, .mxg-orbit__core::after { content:""; position:absolute; inset:-16px; border-radius:38px;
  border:1.5px solid rgba(109,74,255,.35); opacity:0; }
.is-running .mxg-orbit__core::before { animation: mxg-ring 3.2s var(--mxg-ease) infinite; }
.is-running .mxg-orbit__core::after { animation: mxg-ring 3.2s var(--mxg-ease) 1.6s infinite; }
@keyframes mxg-ring { 0%{ transform:scale(.82); opacity:0; } 35%{ opacity:.9; } 100%{ transform:scale(1.22); opacity:0; } }

.mxg-orbit__node { position:absolute; transform:translate(-50%,-50%); z-index:2;
  display:inline-flex; align-items:center; gap:.45em; padding:.5em .95em; white-space:nowrap;
  font-size:var(--mxg-text-xs); font-weight:680; color:var(--mxg-ink);
  background:rgba(255,255,255,.88); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--mxg-hairline); border-radius:99px; box-shadow:var(--mxg-shadow-sm);
  transition:transform .35s var(--mxg-spring), box-shadow .35s, border-color .35s; }
.mxg-orbit__node i { width:8px; height:8px; border-radius:50%; background:var(--_pa, var(--mxg-violet)); }
.mxg-orbit__node.is-active { border-color:var(--_pa); transform:translate(-50%,-50%) scale(1.1);
  box-shadow:0 8px 26px -8px color-mix(in srgb, var(--_pa) 55%, transparent), 0 0 0 4px color-mix(in srgb, var(--_pa) 13%, transparent); }
.mxg-orbit__node.is-active i { animation: mxg-pulse 1.2s var(--mxg-ease) infinite; }

.mxg-orbit__toast { position:absolute; left:50%; top:-2%; transform:translateX(-50%) translateY(-8px); z-index:3;
  display:flex; align-items:center; gap:.6em; white-space:nowrap;
  background:#fff; border:1px solid var(--mxg-hairline); border-radius:var(--mxg-radius);
  box-shadow:var(--mxg-shadow); padding:.7em 1em; font-size:var(--mxg-text-sm); font-weight:550;
  opacity:0; transition:opacity .4s var(--mxg-ease), transform .4s var(--mxg-ease); }
.mxg-orbit__toast.is-in { opacity:1; transform:translateX(-50%) translateY(0); }
.mxg-orbit__toast em { font-style:normal; font-size:var(--mxg-text-xs); font-weight:700; color:var(--mxg-faint); letter-spacing:.03em; }
@media (max-width:600px){
  .mxg-orbit__node { font-size:.66rem; padding:.4em .7em; }
  .mxg-orbit__core { width:84px; height:84px; border-radius:24px; font-size:1.1rem; }
  .mxg-orbit__toast { font-size:var(--mxg-text-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .mxg-orbit__lines path, .mxg-orbit__core::before, .mxg-orbit__core::after, .mxg-orbit__node.is-active i { animation:none !important; }
  .mxg-orbit__toast { opacity:1; transform:translateX(-50%); }
}

/* ==========================================================================
   21. Neumorphic soft-UI system (v3 — approved default)
   One soft cool canvas; surfaces share the canvas colour and take depth from
   paired light/dark shadows. Raised = content, inset = inputs & machine
   states. Brand gradient stays for accents (CTAs, icons, highlights).
   ========================================================================== */
:root {
  --neo: #E9EDF5;
  --neo-hi: rgba(255,255,255,.95);
  --neo-lo: rgba(148,163,190,.48);
  --neo-lo2: rgba(148,163,190,.62);
  --neo-r: -9px -9px 20px var(--neo-hi), 9px 9px 22px var(--neo-lo);
  --neo-r-sm: -5px -5px 12px var(--neo-hi), 5px 5px 13px var(--neo-lo);
  --neo-r-lg: -14px -14px 30px var(--neo-hi), 14px 14px 34px var(--neo-lo2);
  --neo-in: inset 5px 5px 11px var(--neo-lo), inset -5px -5px 11px var(--neo-hi);
  --mxg-canvas: var(--neo);
  --mxg-surface: var(--neo);
  --mxg-surface-2: #DEE4EF;
  --mxg-hairline: rgba(148,163,190,.25);
  --mxg-hairline-2: rgba(148,163,190,.4);
}
body { background: var(--neo); }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; }
.mxg-aurora::before, .mxg-aurora::after { opacity: .22; }

/* Header + subnav */
.mxg-header, .mxg-header.is-stuck { background: var(--neo); border-bottom: none; box-shadow: 0 6px 18px -8px var(--neo-lo2); }
.mxg-nav__link:hover { background: transparent; box-shadow: var(--neo-in); color: var(--mxg-violet-d); }
.mxg-burger { background: var(--neo); border: none; box-shadow: var(--neo-r-sm); }
.mxg-subnav { background: var(--neo); border-bottom: none; box-shadow: 0 5px 14px -8px var(--neo-lo2); }

/* Buttons */
.mxg-btn--primary { box-shadow: -6px -6px 14px var(--neo-hi), 8px 8px 18px rgba(109,74,255,.35); border: none; }
.mxg-btn--primary:hover { box-shadow: -6px -6px 14px var(--neo-hi), 10px 12px 24px rgba(109,74,255,.45); }
.mxg-btn--ghost, .mxg-btn--on-ink.mxg-btn--ghost { background: var(--neo); color: var(--mxg-ink); border: none; box-shadow: var(--neo-r-sm); }
.mxg-btn--ghost:hover { color: var(--mxg-violet-d); box-shadow: var(--neo-r); }
.mxg-btn--ghost:active, .mxg-btn--primary:active { box-shadow: var(--neo-in); transform: none; }
.mxg-btn--accent { border: none; box-shadow: -6px -6px 14px var(--neo-hi), 8px 8px 18px color-mix(in srgb, var(--mxg-product, var(--mxg-violet)) 35%, transparent); }
.mxg-btn--ink { box-shadow: var(--neo-r-sm); }

/* Pills, badges, chips, status */
.mxg-pill, .mxg-pill--glow { background: var(--neo); border: none; box-shadow: var(--neo-in); }
.mxg-badge { background: var(--neo); border: none; box-shadow: var(--neo-r-sm); }
.mxg-status { box-shadow: var(--neo-in); background: var(--neo) !important; }
.mxg-status--available { color: #0B7A46; } .mxg-status--beta { color: var(--mxg-violet-d); } .mxg-status--soon { color: var(--mxg-muted); }
.mxg-sol__chip { background: var(--neo); border: none; box-shadow: var(--neo-r-sm); }

/* Trust strip rhythm (label ↔ logos ↔ badges) */
.mxg-container p.mxg-trust__label { margin-bottom: 1rem; }
.mxg-marquee { padding-block: .2rem; }
.mxg-marquee + .mxg-container .mxg-badge-row { margin-top: 1.1rem; }
.mxg-marquee__track span { opacity: .4; }

/* Cards / tiles / tools / mega / plans */
.mxg-card, .mxg-tile, .mxg-tool, .mxg-plan { background: var(--neo); border: none; box-shadow: var(--neo-r); }
.mxg-card--glow::after { display: none; }
.mxg-card:hover, .mxg-tile:hover, .mxg-tile:focus-visible, .mxg-tool:hover { border: none; box-shadow: var(--neo-r-lg); }
.mxg-tile::after { height: 4px; border-radius: 4px; }
.mxg-mini__row { background: var(--neo); border: none; box-shadow: var(--neo-in); }
.mxg-tool__i, .mxg-card__icon, .mxg-feature__i, .mxg-step__n { background: var(--neo); box-shadow: var(--neo-r-sm); color: var(--mxg-violet-d); border: none; }
.mxg-tool .mxg-ai { box-shadow: 3px 3px 8px rgba(109,74,255,.4); }
.mxg-mega { background: var(--neo); border: none; box-shadow: var(--neo-r-lg); }
.mxg-mega__item:hover { background: transparent; box-shadow: var(--neo-in); }
.mxg-plan--featured { background: var(--neo); border: none; box-shadow: var(--neo-r-lg); }
.mxg-plan li svg { color: var(--mxg-product, var(--mxg-violet)); }

/* Product-page panels & meters (MILES etc.) */
.mxg-panel { background: var(--neo); border: none; box-shadow: var(--neo-r-lg); }
.mxg-panel__bar { background: var(--neo); border-bottom: 1px solid var(--mxg-hairline); }
.mxg-bar { background: var(--neo); box-shadow: var(--neo-in); }
.mxg-float { background: var(--neo); border: none; box-shadow: var(--neo-r-sm); }
.mxg-metric { border-bottom-color: var(--mxg-hairline); }

/* Dark sections → dark neumorphism */
.mxg-section--ink { background: #23262F; }
.mxg-pillar { background: #23262F; border: none;
  box-shadow: -8px -8px 18px rgba(255,255,255,.045), 9px 9px 22px rgba(0,0,0,.55); }
.mxg-pillar::before { opacity: .35; }
.mxg-section--ink .mxg-card { background: #23262F !important; border: none !important;
  box-shadow: -8px -8px 18px rgba(255,255,255,.045), 9px 9px 22px rgba(0,0,0,.55); }

/* MANTIS demo */
.mxg-mantis__browser { background: var(--neo); border: none; box-shadow: var(--neo-r-lg); }
.mxg-mantis__url { background: var(--neo); }
.mxg-mantis__url span { background: var(--neo); border: none; box-shadow: var(--neo-in); }
.mxg-mstep { background: var(--neo); border: none; box-shadow: var(--neo-in); }
.mxg-mstep--fail { background: var(--neo); box-shadow: var(--neo-in), inset 0 0 0 1.5px rgba(220,38,38,.35); }
.mxg-mantis__report span { background: var(--neo); border: none; box-shadow: var(--neo-r-sm); }

/* CTA band — raised soft panel, gradient headline + primary */
.mxg-ctaband { background: var(--neo); box-shadow: var(--neo-r-lg); }
.mxg-ctaband::before, .mxg-ctaband::after { opacity: .5; }
.mxg-ctaband h2 { color: var(--mxg-ink) !important; }
.mxg-ctaband p { color: var(--mxg-muted); }
.mxg-ctaband .mxg-eyebrow { color: var(--mxg-violet-d) !important; }
.mxg-ctaband .mxg-eyebrow::before { background: var(--mxg-grad); }
.mxg-ctaband .mxg-btn--on-ink { background: var(--mxg-grad); color: #fff; border: none; box-shadow: -6px -6px 14px var(--neo-hi), 8px 8px 18px rgba(109,74,255,.4); }
.mxg-ctaband .mxg-btn--on-ink.mxg-btn--ghost { background: var(--neo); color: var(--mxg-ink); box-shadow: var(--neo-r-sm); }

/* Footer stays deep for grounding */
.mxg-footer { background: #1B1E26; }

/* ==========================================================================
   22. AI command console (hero) — tasks typed, agents work, results stack
   ========================================================================== */
.v2-stage { position: relative; min-height: 470px; }
.v2-glow { position: absolute; left: 50%; top: 50%; width: 78%; height: 72%; transform: translate(-50%,-50%);
  background: radial-gradient(circle at 38% 38%, rgba(124,77,255,.30), transparent 62%),
              radial-gradient(circle at 66% 62%, rgba(34,211,238,.26), transparent 62%);
  filter: blur(52px); border-radius: 50%; pointer-events: none; opacity: .5; }
.v2-win { position: absolute; width: 210px; background: var(--neo); border: none; border-radius: 16px;
  padding: .8em .95em; box-shadow: var(--neo-r); font-size: .74rem; color: var(--mxg-ink-soft); z-index: 1; }
.v2-win--a { top: 4%; right: 2%; transform: rotate(3deg); animation: v2bob 7s ease-in-out infinite alternate; }
.v2-win--b { bottom: 6%; left: 0; transform: rotate(-3deg); animation: v2bob 8s ease-in-out -3s infinite alternate; }
@keyframes v2bob { to { translate: 0 -12px; } }
.v2-win__bar { display: flex; align-items: center; gap: .5em; font-weight: 700; font-size: .7rem; color: var(--mxg-ink); margin-bottom: .6em; }
.v2-win__bar i { width: 8px; height: 8px; border-radius: 50%; }
.v2-win__row { display: flex; gap: .5em; padding: .3em 0; border-top: 1px solid var(--mxg-hairline); }
.v2-win__row b { font-weight: 800; }
.v2-win__meter { height: 7px; border-radius: 99px; background: var(--neo); box-shadow: var(--neo-in); margin: .5em 0; overflow: hidden; }
.v2-win__meter span { display: block; height: 100%; border-radius: 99px; background: var(--mxg-grad); }
.v2-console { position: relative; z-index: 2; margin: 78px auto 0; max-width: 430px; background: var(--neo);
  border: none; border-radius: 22px; box-shadow: var(--neo-r-lg); padding: 1.1em 1.25em; }
.v2-console__head { display: flex; align-items: center; gap: .5em; font-size: .78rem; font-weight: 700; color: var(--mxg-ink); }
.v2-console__head em { font-style: normal; font-weight: 500; color: var(--mxg-faint); }
.v2-spark { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--mxg-grad); color: #fff; }
.v2-spark svg { width: 13px; height: 13px; }
.v2-console__prompt { margin-top: .85em; min-height: 2.6em; display: flex; align-items: center; background: var(--neo);
  border: none; box-shadow: var(--neo-in); border-radius: 14px; padding: .7em .9em;
  font-family: var(--mxg-font-mono); font-size: .82rem; color: var(--mxg-ink); }
.v2-caret { width: 2px; height: 1.05em; background: var(--mxg-violet); margin-left: 2px; animation: v2blink 1s steps(1) infinite; }
@keyframes v2blink { 50% { opacity: 0; } }
.v2-console__status { display: flex; align-items: center; gap: .55em; margin-top: .8em; font-size: .76rem; font-weight: 650; color: var(--mxg-muted); opacity: 0; transition: opacity .3s; }
.v2-console__status.is-on { opacity: 1; }
.v2-dots { display: inline-flex; gap: 3px; }
.v2-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--mxg-violet); animation: v2dot 1s ease-in-out infinite; }
.v2-dots i:nth-child(2) { animation-delay: .15s; } .v2-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes v2dot { 40% { translate: 0 -4px; opacity: .5; } }
.v2-done { position: relative; z-index: 2; margin: 14px auto 0; max-width: 430px; display: grid; gap: 8px; min-height: 150px; align-content: start; }
.v2-done__card { display: flex; align-items: center; gap: .6em; background: var(--neo); border: none; border-radius: 14px;
  padding: .65em .9em; font-size: .8rem; font-weight: 600; color: var(--mxg-ink-soft); box-shadow: var(--neo-r-sm);
  opacity: 0; translate: 0 12px; transition: opacity .45s var(--mxg-ease), translate .45s var(--mxg-ease); }
.v2-done__card.is-in { opacity: 1; translate: 0 0; }
.v2-done__card.is-old { opacity: .45; }
.v2-done__check { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.v2-done__check svg { width: 11px; height: 11px; }
.v2-done__badge { margin-left: auto; font-size: .62rem; font-weight: 800; letter-spacing: .05em; padding: .3em .6em; border-radius: 99px; color: #fff; }
@media (max-width: 920px) { .v2-stage { min-height: 0; margin-top: var(--mxg-5); } }
@media (max-width: 600px) { .v2-win { display: none; } .v2-console { margin-top: 12px; } .v2-done { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .v2-win, .v2-caret, .v2-dots i { animation: none !important; } }

/* Subnav fixes: CTA button keeps white text; brand name stays ink */
.mxg-subnav__links a.mxg-btn { color: #fff; }
.mxg-subnav__links a.mxg-btn:hover { color: #fff; background: var(--mxg-product); box-shadow: var(--neo-r-sm); }
.mxg-subnav__brand { color: var(--mxg-ink); }
.mxg-subnav__brand:hover { color: var(--mxg-ink); }

/* ==========================================================================
   23. WordPress block-theme layout compatibility
   The MXG markup is full-bleed and owns its own layout via .mxg-container.
   Neutralise the wrappers WordPress injects around block-theme templates so
   they don't add stray width limits, margins or padding to the design.
   ========================================================================== */
html { background: var(--neo); }
body { background: var(--neo); }
.wp-site-blocks { max-width: none; margin: 0; padding: 0; }
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks > .wp-block-template-part { margin: 0; }
/* Our sections are already constrained internally — never let core's
   constrained-layout max-width squeeze the full-width MXG sections. */
.mxg-header, .mxg-footer, .mxg-hero, .mxg-section, .mxg-subnav, .mxg-mantis { max-width: none; }

/* Sticky-header fix for the block-theme DOM.
   WordPress wraps the header template part in its own <div class="wp-block-template-part">
   that is only as tall as the header (78px). A position:sticky element can only
   travel inside its parent's box, so the inner .mxg-header un-sticks the instant
   you scroll and page content slides up OVER it. Promote the wrapper to be the
   sticky element (it spans the whole page height) so the header stays pinned,
   and let the inner header be static inside it. The subnav lives inside <main>
   (a tall box) so its own sticky still works. */
.wp-site-blocks > .wp-block-template-part:first-child { position: sticky; top: 0; z-index: 100; }
.wp-site-blocks > .wp-block-template-part:first-child .mxg-header { position: relative; top: auto; }
/* Editor safety: show the neumorphic canvas inside the Site Editor too. */
.editor-styles-wrapper { background: var(--neo); }

/* ==========================================================================
   24. Inner pages, forms, coming-soon & free tools (v0.6.0)
   ========================================================================== */

/* --- Coming soon / waitlist --- */
.mxg-comingsoon { display:flex; flex-direction:column; align-items:center; text-align:center; }
.mxg-logo-mark--xl {
  width:84px; height:84px; border-radius:22px; display:grid; place-items:center;
  font-family:var(--mxg-font-display); font-weight:700; font-size:2rem; color:#fff;
  background:linear-gradient(135deg, var(--_pa,#6D4AFF), var(--_pa2,#22D3EE));
  margin-bottom:var(--mxg-5); box-shadow:0 18px 42px -14px rgba(31,30,74,.45);
}

/* --- Standalone AI badge (inside .mxg-tool it stays absolutely positioned) --- */
.mxg-ai { display:inline-block; font-size:.6rem; font-weight:800; letter-spacing:.06em; color:#fff; background:var(--mxg-grad); border-radius:6px; padding:.25em .5em; line-height:1.4; }

/* --- Blog cards --- */
.mxg-post { display:flex; flex-direction:column; }
.mxg-post__meta { font-size:var(--mxg-text-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mxg-violet-d); margin-bottom:var(--mxg-3); }
.mxg-post h3 { font-family:var(--mxg-font-display); font-size:1.25rem; letter-spacing:-0.01em; margin:0 0 var(--mxg-3); }

/* --- Careers roles --- */
.mxg-role { padding:var(--mxg-5) var(--mxg-6); }
.mxg-role:hover { border-color:var(--mxg-violet); }
.mxg-role__meta { display:inline-flex; align-items:center; gap:var(--mxg-3); flex-wrap:wrap; }

/* --- Contact list --- */
.mxg-contact__list { margin-top:var(--mxg-6); display:grid; gap:var(--mxg-4); }
.mxg-contact__item { display:flex; flex-direction:column; gap:.15em; }
.mxg-contact__item b { font-size:var(--mxg-text-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--mxg-faint); }
.mxg-contact__item a { color:var(--mxg-ink); font-weight:600; text-decoration:none; }
.mxg-contact__item a:hover { color:var(--mxg-violet-d); }

/* --- Prose (legal/long-form) --- */
.mxg-prose { max-width:72ch; margin-inline:auto; }
.mxg-prose h1 { font-family:var(--mxg-font-display); font-size:var(--mxg-text-4xl); letter-spacing:-0.03em; line-height:1.1; margin:.2em 0 .3em; }
.mxg-prose h2 { font-family:var(--mxg-font-display); font-size:1.5rem; letter-spacing:-0.02em; margin:1.8em 0 .5em; }
.mxg-prose p { color:var(--mxg-ink-soft); line-height:1.7; margin:0 0 1em; }
.mxg-prose a { color:var(--mxg-violet-d); }

/* --- Auth card --- */
.mxg-authcard { max-width:420px; margin-inline:auto; background:#fff; border:1px solid var(--mxg-hairline); border-radius:var(--mxg-radius-lg); padding:var(--mxg-7); box-shadow:var(--mxg-shadow-lg); }

/* --- Code block --- */
.mxg-code { background:#12121e; color:#e6e6f0; border-radius:var(--mxg-radius); padding:var(--mxg-5); overflow:auto; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.82rem; line-height:1.6; box-shadow:var(--mxg-shadow-lg); }
.mxg-code code { white-space:pre; }

/* --- Forms + tool controls (shared input styling) --- */
.mxg-form { display:flex; flex-direction:column; gap:var(--mxg-4); background:#fff; border:1px solid var(--mxg-hairline); border-radius:var(--mxg-radius-lg); padding:var(--mxg-6); box-shadow:var(--mxg-shadow-lg); }
.mxg-form > label, .mxg-toolctrl > label, .mxg-toolstack > label { display:flex; flex-direction:column; gap:.4em; font-weight:600; font-size:var(--mxg-text-sm); }
.mxg-form input, .mxg-form select, .mxg-form textarea,
.mxg-toolctrl input, .mxg-toolctrl select, .mxg-toolctrl textarea,
.mxg-toolstack input, .mxg-toolstack select, .mxg-toolstack textarea,
.mxg-toolrow input, .mxg-toolrow select,
.mxg-lineitem input, .mxg-toolresult {
  width:100%; box-sizing:border-box; font:inherit; font-size:var(--mxg-text-sm); color:var(--mxg-ink);
  background:var(--mxg-surface); border:1px solid var(--mxg-hairline); border-radius:12px;
  padding:.7em .85em; transition:border-color .2s var(--mxg-ease), box-shadow .2s var(--mxg-ease);
}
.mxg-form input::placeholder, .mxg-toolctrl textarea::placeholder, .mxg-toolstack textarea::placeholder, .mxg-toolctrl input::placeholder { color:var(--mxg-faint); }
.mxg-form input:focus, .mxg-form select:focus, .mxg-form textarea:focus,
.mxg-toolctrl input:focus, .mxg-toolctrl select:focus, .mxg-toolctrl textarea:focus,
.mxg-toolstack input:focus, .mxg-toolstack textarea:focus,
.mxg-toolrow input:focus, .mxg-lineitem input:focus {
  outline:none; border-color:var(--mxg-violet); box-shadow:0 0 0 3px rgba(109,74,255,.16);
}
.mxg-form textarea, .mxg-toolctrl textarea, .mxg-toolstack textarea { resize:vertical; }
.mxg-form .is-invalid { border-color:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.14); }
.mxg-form__ok { background:#E7F8F0; color:#0C7A4B; border:1px solid #B6ECD4; border-radius:12px; padding:.85em 1em; font-size:var(--mxg-text-sm); font-weight:600; }
.mxg-form button[type=submit] { align-self:flex-start; }

/* --- Free tools app --- */
.mxg-toolapp { background:#fff; border:1px solid var(--mxg-hairline); border-radius:var(--mxg-radius-lg); padding:var(--mxg-6); box-shadow:var(--mxg-shadow-lg); }
.mxg-toolgrid { display:grid; grid-template-columns:1fr 1fr; gap:var(--mxg-6); align-items:start; }
.mxg-toolgrid--wide { grid-template-columns:1fr 1.1fr; }
@media (max-width:820px){ .mxg-toolgrid, .mxg-toolgrid--wide { grid-template-columns:1fr; } }
.mxg-toolctrl { display:flex; flex-direction:column; gap:var(--mxg-4); }
.mxg-toolstack { display:flex; flex-direction:column; gap:var(--mxg-4); }
.mxg-toolrow { display:flex; gap:var(--mxg-3); }
.mxg-toolrow > label { flex:1; display:flex; flex-direction:column; gap:.4em; font-weight:600; font-size:var(--mxg-text-sm); }
.mxg-toolbtns { display:flex; gap:var(--mxg-3); flex-wrap:wrap; }
.mxg-toolout { display:flex; flex-direction:column; gap:var(--mxg-3); }
.mxg-toolout__bar { display:flex; align-items:center; justify-content:space-between; gap:var(--mxg-3); font-size:var(--mxg-text-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--mxg-faint); }
.mxg-toolresult { min-height:120px; background:var(--mxg-surface); }
.mxg-toolresult--block { padding:var(--mxg-4); border:1px solid var(--mxg-hairline); border-radius:12px; background:var(--mxg-surface); min-height:120px; }
.mxg-mono { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.8rem; line-height:1.55; }
.mxg-copy { font:inherit; font-size:var(--mxg-text-xs); font-weight:700; color:var(--mxg-violet-d); background:var(--mxg-surface); border:1px solid var(--mxg-hairline); border-radius:8px; padding:.35em .8em; cursor:pointer; transition:background .2s; }
.mxg-copy:hover { background:var(--mxg-surface-2); }
.mxg-toolstatus { font-size:var(--mxg-text-sm); font-weight:600; min-height:1.4em; }
.mxg-toolstatus.is-ok { color:#0C7A4B; }
.mxg-toolstatus.is-err { color:#DC2626; }

/* ROI output */
.mxg-roi { background:var(--mxg-surface); border:1px solid var(--mxg-hairline); border-radius:var(--mxg-radius); padding:var(--mxg-5); }
.mxg-roi__row { display:flex; align-items:baseline; justify-content:space-between; padding:.6em 0; border-bottom:1px solid var(--mxg-hairline); }
.mxg-roi__row:last-of-type { border-bottom:0; }
.mxg-roi__row b { font-family:var(--mxg-font-display); font-weight:700; font-size:1.35rem; letter-spacing:-0.02em; }
.mxg-roi__row--big b { font-size:2rem; background:var(--mxg-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* Subject-line score */
.mxg-score { display:flex; align-items:baseline; gap:var(--mxg-4); }
.mxg-score__num { font-family:var(--mxg-font-display); font-weight:800; font-size:2.6rem; line-height:1; letter-spacing:-0.03em; }
.mxg-score__num small { font-size:1rem; font-weight:600; color:var(--mxg-faint); }
.mxg-score__grade { font-weight:700; color:var(--mxg-violet-d); }
.mxg-score__bar { height:8px; border-radius:99px; background:var(--mxg-surface-2); overflow:hidden; margin:var(--mxg-4) 0; }
.mxg-score__bar > i { display:block; height:100%; border-radius:99px; background:var(--mxg-grad); transition:width .5s var(--mxg-ease); }
.mxg-tips { list-style:none; margin:0; padding:0; display:grid; gap:.5em; }
.mxg-tips li { position:relative; padding-left:1.5em; font-size:var(--mxg-text-sm); color:var(--mxg-ink-soft); }
.mxg-tips li::before { position:absolute; left:0; top:0; }
.mxg-tips li.is-good::before { content:"✓"; color:#0C7A4B; }
.mxg-tips li.is-warn::before { content:"!"; color:#B45309; font-weight:700; }
.mxg-tips li.is-bad::before { content:"✕"; color:#DC2626; }

/* Regex highlight */
.mxg-rxhi { font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.82rem; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.mxg-rxhi mark { background:rgba(109,74,255,.22); color:inherit; border-radius:3px; padding:0 1px; }

/* Signature preview */
.mxg-sigpreview { background:#fff; border:1px solid var(--mxg-hairline); border-radius:12px; padding:var(--mxg-5); min-height:120px; }

/* Invoice / quote preview */
.mxg-lineitem { align-items:center; }
.mxg-lineitem .li-del { flex:0 0 auto; width:34px; height:34px; border-radius:8px; border:1px solid var(--mxg-hairline); background:var(--mxg-surface); color:var(--mxg-muted); font-size:1.1rem; line-height:1; cursor:pointer; }
.mxg-lineitem .li-del:hover { color:#DC2626; border-color:#DC2626; }
.mxg-invoice { background:#fff; border:1px solid var(--mxg-hairline); border-radius:12px; padding:var(--mxg-5); }
.mxg-invoice__head { display:flex; justify-content:space-between; gap:var(--mxg-4); flex-wrap:wrap; margin-bottom:var(--mxg-4); }
.mxg-invoice__head h3 { font-family:var(--mxg-font-display); margin:0; font-size:1.6rem; letter-spacing:-0.02em; }
.mxg-invoice__head span { color:var(--mxg-faint); font-size:var(--mxg-text-sm); }
.mxg-invoice__party { text-align:right; display:flex; flex-direction:column; gap:.1em; font-size:var(--mxg-text-sm); }
.mxg-invoice__table { width:100%; border-collapse:collapse; margin:var(--mxg-3) 0; font-size:var(--mxg-text-sm); }
.mxg-invoice__table th, .mxg-invoice__table td { text-align:left; padding:.55em .4em; border-bottom:1px solid var(--mxg-hairline); }
.mxg-invoice__table th:nth-child(n+2), .mxg-invoice__table td:nth-child(n+2) { text-align:right; }
.mxg-invoice__totals { margin-left:auto; max-width:260px; }
.mxg-invoice__totals > div { display:flex; justify-content:space-between; padding:.3em 0; font-size:var(--mxg-text-sm); }
.mxg-invoice__grand { border-top:2px solid var(--mxg-ink); margin-top:.3em; padding-top:.5em !important; font-size:1.1rem; font-weight:700; }

/* Reduced motion: the tool score/bar transitions already respect the global rule. */