/* ==========================================================================
   Magelon — Homepage design test (page slug: home-v2)
   Type sizes and spacing follow the live product pages (Feeds, CSS, Pricing,
   Agency…), i.e. the theme's Tailwind scale and the .pad-auto gutters.
   Everything is scoped to pages that contain .mgx, so no existing page is
   affected.
   ========================================================================== */

body:has(.mgx) {
  /* Brand palette (from theme.json) */
  --mgx-black: #010101;
  --mgx-white: #ffffff;
  --mgx-cyan: #00ffff;
  --mgx-cyan-dark: #00ddd7;
  --mgx-green: #c8ff3c;
  --mgx-green-dark: #37440f;
  --mgx-gray: #bbcad2;
  --mgx-gray-light: #e3e9ec;
  --mgx-gray-light2: #edf1f3;
  --mgx-gray-dark: #4d4d4d;
  --mgx-purple: #9600ff;

  /* Type scale — same steps the product pages use (mobile values first) */
  --mgx-fs-display:   2.25rem;   /* hero h1:            text-4xl  sm:text-6xl  lg:text-8xl */
  --mgx-fs-statement: 1.5rem;    /* pricing/agency:     text-2xl  lg:text-6xl */
  --mgx-fs-h2:        1.875rem;  /* section titles:     text-3xl  lg:text-5xl */
  --mgx-fs-h3:        1.5rem;    /* feature titles:     text-2xl  lg:text-5xl */
  --mgx-fs-card:      1.5rem;    /* card titles:        text-2xl  lg:text-3xl */
  --mgx-fs-lead:      1.125rem;  /* lead paragraphs:    text-lg   lg:text-2xl */
  --mgx-fs-body:      1rem;      /* feature text:       text-base sm:text-xl */
  --mgx-fs-label:     1rem;      /* "Pricing" labels:   text-base lg:text-2xl */
  --mgx-fs-small:     .875rem;   /* notes:              text-sm   lg:text-base */
  --mgx-fs-stat:      3rem;      /* metrics:            text-5xl  lg:text-6xl */
  --mgx-fs-price:     3.75rem;   /* price:              text-6xl  lg:text-8xl */
  --mgx-fs-price-pre: 1.125rem;  /* "starting from":    text-lg   lg:text-3xl */
  --mgx-fs-btn:       1rem;      /* buttons:            text-base lg:text-2xl */

  /* Spacing — same as the product pages */
  --mgx-gutter: 2rem;            /* .pad-auto */
  --mgx-section-y: 3rem;         /* py-12 lg:pt-24 lg:pb-24 */
  --mgx-gap: 1.5rem;             /* mt-6 lg:mt-12 */
  --mgx-block: 3rem;             /* mt-12 lg:mt-16 */
  --mgx-btn-y: .5rem;            /* py-2 lg:py-3 */
  --mgx-btn-x: 3rem;             /* px-12 lg:px-16 */
  --mgx-wordmark-h: 2rem;        /* h-8 lg:h-16 */
}
@media (min-width: 40rem) {
  body:has(.mgx) {
    --mgx-fs-display: 3.75rem;
    --mgx-fs-body: 1.25rem;
    --mgx-gutter: 1.5rem;
  }
}
@media (min-width: 64rem) {
  body:has(.mgx) {
    --mgx-fs-display: 6rem;
    --mgx-fs-statement: 3.75rem;
    --mgx-fs-h2: 3rem;
    --mgx-fs-h3: 3rem;
    --mgx-fs-card: 1.875rem;
    --mgx-fs-lead: 1.5rem;
    --mgx-fs-label: 1.5rem;
    --mgx-fs-small: 1rem;
    --mgx-fs-stat: 3.75rem;
    --mgx-fs-price: 6rem;
    --mgx-fs-price-pre: 1.875rem;
    --mgx-fs-btn: 1.5rem;
    --mgx-gutter: 4rem;
    --mgx-section-y: 6rem;
    --mgx-gap: 3rem;
    --mgx-block: 4rem;
    --mgx-btn-y: .75rem;
    --mgx-btn-x: 4rem;
    --mgx-wordmark-h: 4rem;
  }
}
@media (min-width: 80rem) { body:has(.mgx) { --mgx-gutter: 5rem; } }
@media (min-width: 96rem) { body:has(.mgx) { --mgx-gutter: 16rem; } }

.mgx {
  font-family: 'Aeonik Pro', sans-serif;
  font-size: var(--mgx-fs-body);
  line-height: 1.4;
  font-weight: 400;
  color: var(--mgx-black);
}
.mgx *, .mgx *::before, .mgx *::after { box-sizing: border-box; }
.mgx h1, .mgx h2, .mgx h3, .mgx p { margin: 0; }
.mgx img, .mgx video { display: block; max-width: 100%; }
.mgx a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.mgx-section {
  position: relative;
  padding-block: var(--mgx-section-y);
  overflow: hidden;
}
.mgx-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: var(--mgx-gutter);
}
.mgx-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mgx-gap);
  align-items: center;
}
@media (max-width: 1023px) {
  .mgx-split { grid-template-columns: minmax(0, 1fr); }
}

/* Surfaces */
.mgx-bg-black      { background: var(--mgx-black); color: var(--mgx-gray-light); }
.mgx-bg-green-dark { background: var(--mgx-green-dark); color: var(--mgx-gray-light); }
.mgx-bg-green      { background: var(--mgx-green); color: var(--mgx-green-dark); }
.mgx-bg-gray       { background: var(--mgx-gray); color: var(--mgx-black); }
.mgx-bg-gray-light { background: var(--mgx-gray-light); color: var(--mgx-black); }
.mgx-bg-gray-light2{ background: var(--mgx-gray-light2); color: var(--mgx-black); }
.mgx-bg-white      { background: var(--mgx-white); color: var(--mgx-black); }

/* --------------------------------------------------------------------------
   Typography (font-light headings, like the product pages)
   -------------------------------------------------------------------------- */
.mgx-h1 {
  font-size: var(--mgx-fs-display);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.025em;
}
.mgx-statement {
  font-size: var(--mgx-fs-statement);
  font-weight: 300;
  line-height: 1;
}
.mgx-h2 {
  font-size: var(--mgx-fs-h2);
  font-weight: 300;
  line-height: 1.1;
}
.mgx-h3 {
  font-size: var(--mgx-fs-h3);
  font-weight: 300;
  line-height: 1.1;
}
.mgx-lead {
  font-size: var(--mgx-fs-lead);
  font-weight: 400;
  line-height: 1.35;
  max-width: 42rem;
}
.mgx-lead--wide { max-width: none; }
.mgx-label { font-size: var(--mgx-fs-label); font-weight: 400; line-height: 1.3; }
.mgx-body { font-size: var(--mgx-fs-body); line-height: 1.35; }
.mgx-small { font-size: var(--mgx-fs-small); line-height: 1.5; }
.mgx-muted { opacity: .85; }

.mgx-head { display: flex; flex-direction: column; gap: var(--mgx-gap); }
.mgx-head > .mgx-label + * { margin-top: calc(var(--mgx-gap) * -.5); }
.mgx-head + * { margin-top: var(--mgx-block); }

.mgx-wordmark { display: block; height: var(--mgx-wordmark-h); width: auto; max-width: 100%; fill: currentColor; }

/* --------------------------------------------------------------------------
   Buttons & links — the product pages' pill button
   (rounded-full, lime, text-base lg:text-2xl, px-12 lg:px-16, py-2 lg:py-3)
   -------------------------------------------------------------------------- */
.mgx-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.mgx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--mgx-btn-y) var(--mgx-btn-x);
  border-radius: 9999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--mgx-fs-btn);
  font-weight: 400;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  transition: background-color 75ms ease-in-out, color 75ms ease-in-out, border-color 75ms ease-in-out;
}
.mgx-btn:focus-visible { outline: 2px solid var(--mgx-cyan); outline-offset: 3px; }

.mgx .mgx-btn--primary,
.mgx .mgx-btn--primary:visited { color: var(--mgx-black); }
.mgx-btn--primary { background: var(--mgx-green); border-color: var(--mgx-green); }
.mgx .mgx-btn--primary:hover { background: var(--mgx-green-dark); border-color: var(--mgx-green-dark); color: var(--mgx-green); }

.mgx-btn--secondary { border-color: currentColor; color: inherit; }
.mgx-bg-black .mgx-btn--secondary:hover,
.mgx-hero .mgx-btn--secondary:hover { background: var(--mgx-white); border-color: var(--mgx-white); color: var(--mgx-black); }
.mgx-bg-green-dark .mgx-btn--secondary { color: var(--mgx-green); }
.mgx-bg-green-dark .mgx-btn--secondary:hover { background: var(--mgx-green); border-color: var(--mgx-green); color: var(--mgx-green-dark); }
.mgx-bg-green .mgx-btn--secondary:hover { background: var(--mgx-green-dark); border-color: var(--mgx-green-dark); color: var(--mgx-green); }
.mgx-bg-gray .mgx-btn--secondary:hover,
.mgx-bg-gray-light .mgx-btn--secondary:hover,
.mgx-bg-gray-light2 .mgx-btn--secondary:hover,
.mgx-bg-white .mgx-btn--secondary:hover { background: var(--mgx-black); border-color: var(--mgx-black); color: var(--mgx-white); }

.mgx-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--mgx-fs-body);
  font-weight: 400;
  transition: color 75ms ease-in-out;
}
.mgx-link:hover { color: var(--mgx-purple); }

/* --------------------------------------------------------------------------
   Decorative text patterns
   Sized like the original homepage product sections (full width, centered)
   and toned down so the copy on top stays easy to read.
   -------------------------------------------------------------------------- */
.mgx-bgpattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}
@media (max-width: 1023px) { .mgx-bgpattern { background-size: cover; } }
.mgx-bgpattern--drive   { opacity: .3; }
.mgx-bgpattern--elevate { opacity: .35; }
.mgx-bgpattern--boost   { opacity: .22; }

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.mgx-hero {
  position: relative;
  min-height: min(100svh, 64rem);
  display: flex;
  flex-direction: column;
  background: var(--mgx-black);
  color: var(--mgx-white);
  overflow: hidden;
  /* Same room under the logo as the product page heroes (~200px at 1440) */
  padding-top: clamp(8.5rem, 13vw, 12.5rem);
}
.mgx-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: 0; }
/* Darken the pattern video so the copy and product screens stay readable */
.mgx-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(1,1,1,.9) 0%, rgba(1,1,1,.72) 45%, rgba(1,1,1,.5) 100%),
    linear-gradient(to bottom, rgba(1,1,1,.35) 0%, rgba(1,1,1,0) 25%, rgba(1,1,1,0) 70%, rgba(1,1,1,.85) 100%);
}
.mgx-hero > .mgx-inner { z-index: 2; }
.mgx-hero__sentinel { position: absolute; top: 22vh; left: 0; width: 1px; height: 1px; pointer-events: none; }
.mgx-hero > .mgx-inner:first-of-type { flex: 1; display: flex; align-items: center; }
.mgx-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--mgx-gap);
  align-items: center;
  width: 100%;
}
.mgx-hero__copy { display: flex; flex-direction: column; gap: 1.5rem; }
.mgx-hero__eyebrow { font-size: var(--mgx-fs-small); color: var(--mgx-gray-light); }
.mgx-hero__eyebrow b { font-weight: 400; color: var(--mgx-green); }
.mgx-hero .mgx-lead { color: var(--mgx-white); max-width: 36rem; }
.mgx-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.mgx-checks li { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--mgx-fs-small); line-height: 1.5; color: var(--mgx-white); }
.mgx-checks svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; color: var(--mgx-green); }
.mgx-hero__note { font-size: var(--mgx-fs-small); color: var(--mgx-gray-light); margin-top: -.5rem; }

.mgx-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: var(--mgx-block);
  padding-block: 2rem var(--mgx-block);
  border-top: 1px solid rgba(255,255,255,.2);
}
.mgx-stat b { display: block; font-size: var(--mgx-fs-stat); font-weight: 300; line-height: 1; color: var(--mgx-green); }
.mgx-stat span { display: block; margin-top: .75rem; font-size: var(--mgx-fs-small); color: var(--mgx-gray-light); }
@media (max-width: 1023px) {
  .mgx-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .mgx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
}
@media (max-width: 480px) {
  .mgx-actions .mgx-btn { flex: 1 1 100%; }
}

/* Product deck (reuses the Feeds page UI mock styles) */
.mgx-deck { position: relative; padding: 1.2rem 1.4rem 0 0; }
.mgx-deck__stage { position: relative; height: clamp(19rem, 25vw, 23.5rem); }
.mgx-card { position: absolute; inset: 0; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(255,255,255,.16); background: #f4f7f9; transition: transform .55s cubic-bezier(.4,.1,.2,1), opacity .55s ease, box-shadow .55s ease; }
.mgx-card .ui-shell { height: 100%; min-height: 0; border-radius: 0; box-shadow: none; color: #1a1a1a; font-weight: 400; }
.mgx-card.mgx-pos-0 { transform: translate(0,0) scale(1); opacity: 1; z-index: 3; box-shadow: 0 0 0 1px rgba(200,255,60,.12), 0 40px 100px rgba(0,0,0,.6); }
.mgx-card.mgx-pos-1 { transform: translate(1.1rem,-.9rem) scale(.96); opacity: .5; z-index: 2; pointer-events: none; }
.mgx-card.mgx-pos-2 { transform: translate(2.2rem,-1.8rem) scale(.92); opacity: .25; z-index: 1; pointer-events: none; }
/* Slightly larger UI text so the mock stays legible (desktop only; phones keep the compact mock) */
@media (min-width: 64rem) {
  .mgx-card .seg-table, .mgx-card .ch-table { font-size: .78rem; }
  .mgx-card .seg-table th, .mgx-card .ch-table th { font-size: .7rem; }
  .mgx-card .seg-tag, .mgx-card .tpl-pill, .mgx-card .seg-select, .mgx-card .toggle-label { font-size: .68rem; }
  .mgx-card .ui-topbar-title { font-size: .75rem; }
}
.mgx .seg-select.flash { border-color: var(--mgx-cyan-dark); box-shadow: 0 0 0 2px #00ddd744; }
.mgx-deck__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.mgx-deck__label { font-size: var(--mgx-fs-small); color: var(--mgx-white); }
.mgx-deck__desc { display: block; margin-top: .15rem; font-size: .875rem; color: rgba(255,255,255,.6); }
.mgx-deck__controls { display: flex; align-items: center; gap: .75rem; }
.mgx-deck__count { font-size: .875rem; color: rgba(255,255,255,.6); min-width: 2.6rem; text-align: center; }
.mgx-round {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: var(--mgx-white);
  border: 1px solid rgba(255,255,255,.35); cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}
.mgx-round svg { width: 1.1rem; height: 1.1rem; }
.mgx-round:hover { background: var(--mgx-green); border-color: var(--mgx-green); color: var(--mgx-black); }

/* --------------------------------------------------------------------------
   2. Pillar cards
   -------------------------------------------------------------------------- */
.mgx-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 1279px) { .mgx-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .mgx-pillars { grid-template-columns: minmax(0, 1fr); } }
.mgx-pillar { display: flex; flex-direction: column; border-radius: 1rem; overflow: hidden; color: var(--mgx-white); }
/* Card colors: Feed Management dark green, Product Optimization Feeds cyan, CSS lime green, Image Templates purple */
.mgx-pillar--green  { background: var(--mgx-green-dark); }
.mgx-pillar.mgx-pillar--cyan { background: var(--mgx-cyan); color: var(--mgx-black); }
.mgx-pillar.mgx-pillar--lime { background: var(--mgx-green); color: var(--mgx-black); }
.mgx-pillar--purple { background: var(--mgx-purple); }
.mgx-pillar__body { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; flex: 1; }
@media (min-width: 64rem) { .mgx-pillar__body { padding: 2rem; } }
.mgx-pillar__body .mgx-index { margin-bottom: var(--mgx-block); }
.mgx-pillar__title { font-size: var(--mgx-fs-card); font-weight: 300; line-height: 1.2; }
.mgx-index {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 300;
}
.mgx-pillar .mgx-body { font-size: var(--mgx-fs-small); line-height: 1.5; color: inherit; }

/* --------------------------------------------------------------------------
   3. Demo
   -------------------------------------------------------------------------- */
.mgx-demo__thumb {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  border-radius: .75rem; overflow: hidden; background: var(--mgx-green);
}
.mgx-demo__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .3s ease; }
.mgx-demo__thumb:hover img { transform: scale(1.015); }
.mgx-demo__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: var(--mgx-white); color: var(--mgx-black);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.mgx-demo__play svg { width: 1.75rem; height: 1.75rem; margin-left: 4px; }

.mgx-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(1,1,1,.85); padding: 1.5rem; }
.mgx-modal.is-open { display: flex; }
.mgx-modal__frame { position: relative; width: 100%; max-width: 80rem; aspect-ratio: 16 / 9; }
.mgx-modal__frame iframe { width: 100%; height: 100%; border: 0; border-radius: .75rem; }
.mgx-modal__close { position: absolute; top: -3.25rem; right: 0; }

/* --------------------------------------------------------------------------
   4. Channels
   -------------------------------------------------------------------------- */
.mgx-channels__img { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   5–6b. Product sections (Feeds, CSS, Image Templates)
   -------------------------------------------------------------------------- */
.mgx-product__intro { align-items: start; }
/* Laptop: wordmark on its own row, title right under it, image next to the text */
@media (min-width: 64rem) {
  .mgx-product__intro { grid-template-areas: "brand brand" "head visual"; }
  .mgx-product__intro > .mgx-product__brand { grid-area: brand; }
  .mgx-product__intro > .mgx-head { grid-area: head; }
  .mgx-product__intro > .mgx-product__visual { grid-area: visual; margin-top: 0; }
}
/* Wide screens (1440+, where the long Image Templates wordmark fits): image centered against wordmark + title + text together */
@media (min-width: 90rem) {
  .mgx-product__intro { grid-template-areas: "brand visual" "head visual"; }
  .mgx-product__intro > .mgx-product__brand { align-self: end; }
  .mgx-product__intro > .mgx-product__visual { align-self: center; }
}
.mgx-product__visual { display: flex; justify-content: center; }
.mgx-product__visual img.mgx-shot { border-radius: .75rem; box-shadow: 0 24px 60px rgba(1,1,1,.14); border: 1px solid rgba(1,1,1,.06); width: 100%; background: var(--mgx-white); }
.mgx-product__visual img.mgx-shopping { width: min(22.5rem, 100%); height: auto; }

/* Feeds UI mock (HTML, stays sharp on retina) — larger text than the Feeds page widget */
.mgx-ui { width: 100%; max-width: 40rem; }
.mgx-ui .ui-shell { min-height: 0; border-radius: .75rem; background: #f4f7f9; color: #1a1a1a; font-weight: 400; box-shadow: 0 24px 60px rgba(1,1,1,.14); border: 1px solid rgba(1,1,1,.06); }
.mgx-ui .label-outer { padding: .75rem 1rem 1rem; gap: .5rem; }
.mgx-ui .label-rules { gap: .5rem; margin-bottom: .5rem; }
@media (min-width: 40rem) {
  .mgx-ui .ui-topbar-title { font-size: .8rem; }
  .mgx-ui .label-rule-chip { font-size: .75rem; padding: .25rem .6rem; }
  .mgx-ui .label-table { font-size: .9rem; }
  .mgx-ui .label-table th { font-size: .75rem; padding: .45rem .5rem; }
  .mgx-ui .label-table td { padding: .55rem .5rem; }
  .mgx-ui .label-badge { font-size: .75rem; padding: .2rem .55rem; }
}

/* Product wordmark row (Feeds / CSS / Image Templates), above the two columns */
.mgx-product__brand { min-width: 0; }
.mgx-product__brand .mgx-wordmark { max-width: none; }
@media (max-width: 89.99rem) { .mgx-product__brand .mgx-wordmark { max-width: 100%; } }

/* Image template examples */
.mgx-banners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: 100%; max-width: 24rem; }
.mgx-banners img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .75rem; background: var(--mgx-white); box-shadow: 0 18px 44px rgba(1,1,1,.12); }

/* Features: title + text, like the feature lists on the product pages */
.mgx-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--mgx-gap) 1.5rem;
  margin-top: var(--mgx-block);
}
.mgx-feature { display: flex; flex-direction: column; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid currentColor; }
.mgx-feature .mgx-body { max-width: 40rem; }
.mgx-product__more { margin-top: var(--mgx-block); }

/* --------------------------------------------------------------------------
   7. Pricing (the only price band)
   -------------------------------------------------------------------------- */
.mgx-price { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.mgx-price__from { font-size: var(--mgx-fs-price-pre); font-weight: 300; line-height: 1.2; }
.mgx-price__value { font-size: var(--mgx-fs-price); font-weight: 300; line-height: 1; color: var(--mgx-green); }
@media (min-width: 64rem) { .mgx-price { justify-self: end; } }
.mgx-split--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
@media (max-width: 1023px) { .mgx-split--wide { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   8. Agency
   -------------------------------------------------------------------------- */
.mgx-agency { color: var(--mgx-green); }
.mgx-agency .mgx-split { align-items: end; }
@media (min-width: 64rem) { .mgx-agency .mgx-actions { justify-content: flex-end; } }

/* ==========================================================================
   Header (test page only): readable pill on light sections, one CTA label
   ========================================================================== */
body:has(.mgx) .pill-nav.is-scrolled {
  background: rgba(237, 241, 243, .92);
  border-color: rgba(1, 1, 1, .1);
  box-shadow: 0 6px 30px rgba(1, 1, 1, .12);
  color: var(--mgx-black);
}
body:has(.mgx) .pill-nav.is-scrolled .pill-nav__links a,
body:has(.mgx) .pill-nav.is-scrolled .pill-nav__toggle { opacity: 1; }

/* Calm scroll-to-top button (no endless bounce) */
body:has(.mgx) .scroll-to-top .animate-bounce { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .mgx-card, .mgx-demo__thumb img { transition: none; }
}