/* ==========================================================================
   Mangrove — site stylesheet
   --------------------------------------------------------------------------
   One file, per the playbook: every rule the site needs lives here, in one
   place, so there is never a question of which file a style belongs in or
   which one wins.

   Order matters and is deliberate:
     1. Header and footer  — the site chrome, formerly theme.css
     2. Page components    — the sections the page patterns are built from

   Rules of the road:
   - Every colour, font and size comes from a theme.json preset. Never add a
     raw hex or a raw px font-size here that could be a token instead.
   - Derived values theme.json cannot express (tints, shadows, radii, gutters)
     are declared once as --mg-* custom properties.
   - Classes are applied to core blocks via the block className attribute, so
     no markup is invented to hang styles on.
   ========================================================================== */

/* ==========================================================================
   1. Site chrome — header and footer
   ========================================================================== */

/* ---- Header ------------------------------------------------------------
   72px white bar, logo left, nav right. The two mega panels and the mobile
   drawer are siblings of the bar and positioned against the header, so they
   can span its full width rather than the nav's.
   ------------------------------------------------------------------------ */
.mg-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
	/* theme.json's root padding lands on this group and was insetting the
	   announcement bar from the viewport edges. The bar and the header row
	   both carry their own padding, so the header itself needs none. */
	padding-inline: 0;
}

.mg-site-header.has-background { padding-top: 0; padding-bottom: 0; }
.mg-site-header > .mg-announce { margin-top: 0; }

/* Deliberately not positioned: the mega panels and the mobile drawer are
   absolute and must span the full header, not this 1240px measure. Their
   containing block is .mg-site-header, which is sticky and so establishes
   one. Adding `position: relative` here would inset them by the gutter. */
.mg-header__bar {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 1240px;
	min-height: 72px;
	margin: 0 auto;
	padding: 0 32px;
}

.mg-header__logo { margin: 0; line-height: 0; }
.mg-header__logo img { height: 32px; width: auto; }

/* Pushes the nav, the CTA and the hamburger to the right edge. */
.mg-navwrap {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	/* The nav rides in a core/html block, which carries a default 24px block
	   margin. That pushed the whole row -- Log in included -- down against the
	   bottom of the bar instead of sitting on its centre line. */
	margin-block: 0;
}

.mg-nav { display: flex; align-items: center; gap: 6px; }

.mg-nav__link,
.mg-nav__trigger {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	background: none;
	border: 0;
	border-radius: 8px;
	padding: 9px 14px;
	cursor: pointer;
	transition: background-color .15s ease;
}

.mg-nav__link:hover,
.mg-nav__trigger:hover,
.mg-nav__trigger[aria-expanded="true"] { background-color: rgba(66, 176, 203, .10); }

.mg-nav__link:focus-visible,
.mg-nav__trigger:focus-visible,
.mg-nav__login:focus-visible,
.mg-navtoggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
}

.mg-nav__chev { color: var(--wp--preset--color--teal); flex: 0 0 auto; }
.mg-nav__trigger[aria-expanded="true"] .mg-nav__chev { transform: rotate(180deg); }

.mg-nav__login {
	display: inline-flex;
	align-items: center;
	align-self: center;
	line-height: 1.25;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--orange);
	border-radius: 999px;
	padding: 10px 18px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease;
}

.mg-nav__login:hover { background-color: #F08800; }

.mg-navtoggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--wp--preset--color--text);
	background: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	cursor: pointer;
}

.mg-navtoggle__close { display: none; }
.mg-navtoggle[aria-expanded="true"] .mg-navtoggle__open { display: none; }
.mg-navtoggle[aria-expanded="true"] .mg-navtoggle__close { display: block; }

/* ---- Mega menus --------------------------------------------------------- */
.mg-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	/* Core gives the group block a default block margin, which pushed the
	   panel 24px clear of the header and read as a gap. */
	margin: 0;
	z-index: 120;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 30px 60px rgba(12, 13, 12, .14);
	padding: 0;
}

/* The products panel spans the header, so its contents sit on the same
   1240px measure as the bar above it rather than the panel edge. */
.mg-mega:not(.is-company) > .mg-mega__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding: 32px;
	gap: 0;
}

.mg-mega[hidden] { display: none; }

/* The company menu stays a floating card, right-aligned under its trigger. */
.mg-mega.is-company {
	left: auto;
	right: 32px;
	top: calc(100% + 10px);
	width: 620px;
	max-width: calc(100% - 64px);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 24px 50px rgba(12, 13, 12, .16);
}

.mg-mega__inner { display: grid; gap: 24px; }
.mg-mega.is-company .mg-mega__inner { grid-template-columns: 220px 1fr; }

.mg-mega__grid { display: grid; grid-template-columns: repeat(4, 1fr) 300px; gap: 12px; }

.mg-megalink {
	display: flex;
	flex-direction: column;
	border-radius: 9px;
	padding: 14px;
	text-decoration: none;
	transition: background-color .15s ease;
}

.mg-megalink:hover { background-color: rgba(66, 167, 198, .10); }

.mg-megalink__kicker,
.mg-mega__head,
.mg-megafeature__kicker {
	display: block;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 6px;
}

.mg-megalink__title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	color: var(--wp--preset--color--text);
	margin-bottom: 4px;
}

.mg-megalink__desc {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 8px;
}

.mg-megalink__cta {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--wp--preset--color--teal-deep);
	margin-top: auto;
}

/* Dark promo card — the fifth column of the row, beside the audience links. */
.mg-megafeature {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background-color: var(--wp--preset--color--ink);
	border-radius: 14px;
	padding: 22px;
	text-decoration: none;
	transition: background-color .15s ease;
}

.mg-megafeature:hover { background-color: var(--wp--preset--color--ink-2); }
.mg-megafeature__kicker { color: var(--wp--preset--color--sky); }

.mg-megafeature__title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 700;
	color: var(--wp--preset--color--base);
	margin-bottom: 6px;
}

.mg-megafeature__desc {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.6;
	color: rgba(242, 245, 247, .82);
	margin-bottom: 10px;
}

.mg-megafeature__cta {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--wp--preset--color--sky);
	margin-top: auto;
}

/* The rule spans the whole panel; the links sit on the 1240px measure. */
.mg-mega__quickband { border-top: 1px solid var(--wp--preset--color--line); }

.mg-mega__quick {
	max-width: 1240px;
	margin-inline: auto;
	padding: 14px 32px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 28px;
}

.mg-mega__quick .mg-mega__head { margin: 0; }

.mg-mega__quick a,
.mg-mega__col a {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.mg-mega__quick a:hover,
.mg-mega__col a:hover { color: var(--wp--preset--color--teal-deep); }

.mg-mega__col { display: flex; flex-direction: column; gap: 10px; }

/* Featured news card in the Company menu. */
.mg-navcard {
	display: block;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	transition: border-color .15s ease;
}

.mg-navcard:hover { border-color: var(--wp--preset--color--teal); }

.mg-navcard__banner {
	display: flex;
	align-items: flex-end;
	height: 118px;
	background: linear-gradient(135deg, #0F1216 0%, #3691AD 100%);
	background-size: cover;
	background-position: center;
	padding: 14px;
}

/* With a featured image behind it, the orange tag needs its own contrast —
   a photo can be any brightness, so scrim the bottom of the banner. */
.mg-navcard__banner.has-image {
	background-image:
		linear-gradient(to top, rgba(15, 18, 22, .55) 0%, rgba(15, 18, 22, 0) 55%),
		var(--mg-navcard-image);
	box-shadow: inset 0 0 0 1px rgba(15, 18, 22, .06);
}

.mg-navcard__tag {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--orange);
	border-radius: 999px;
	padding: 4px 10px;
}

.mg-navcard__body { display: block; padding: 14px 16px 16px; }

.mg-navcard__kicker {
	display: block;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 6px;
}

.mg-navcard__title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--text);
	margin-bottom: 8px;
}

.mg-navcard__cta {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--wp--preset--color--red);
}

/* ---- Mobile drawer ------------------------------------------------------ */
.mg-drawer {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 120;
	max-height: 78vh;
	overflow-y: auto;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 18px 40px rgba(15, 18, 22, .14);
	padding: 8px 20px 20px;
}

.mg-drawer[hidden] { display: none; }

.mg-drawer__group {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 8px 0;
}

.mg-drawer__head {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	padding: 12px 0 4px;
}

.mg-drawer__group a {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	padding: 12px 0;
}

.mg-drawer__login {
	display: block;
	text-align: center;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--orange);
	border-radius: 999px;
	padding: 13px 20px;
	margin-top: 16px;
	text-decoration: none;
}

@media (max-width: 899px) {
	.mg-header__bar { padding: 0 20px; }
	/* Mega menus are desktop-only; the drawer carries the same links. */
	.mg-nav,
	.mg-nav__login,
	.mg-mega { display: none !important; }
	.mg-navtoggle { display: inline-flex; }
}

@media (min-width: 900px) {
	.mg-drawer { display: none !important; }
}

/* ---- Footer ------------------------------------------------------------- */
.mg-site-footer { padding: 64px 32px 28px; }

.mg-footer__grid {
	display: grid;
	grid-template-columns: 2.2fr 1fr 1fr 1fr;
	gap: 32px 40px;
	max-width: 1240px;
	margin: 0 auto;
}

.mg-footer__logo { margin: 0 0 18px; line-height: 0; }
.mg-footer__logo img { height: 29px; width: auto; }

.mg-footer__tagline {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: #B8BFBF;
	max-width: 340px;
	margin: 0 0 16px;
}

.mg-footer__email { margin: 0 0 20px; }

/* Scoped to .mg-site-footer so it outranks the generic footer link colour
   below, which is the same specificity and comes later. */
.mg-site-footer .mg-footer__email a {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	color: var(--wp--preset--color--orange);
	text-decoration: none;
}

.mg-site-footer .mg-footer__email a:hover { color: #F08800; }

.mg-footer__head {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8A9090;
	margin: 0 0 16px;
}

.mg-site-footer .mg-footer-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 0;
	padding: 0;
}

.mg-site-footer .mg-footer-list li { margin: 0; }

.mg-site-footer a {
	color: #E9EDED;
	font-size: var(--wp--preset--font-size--caption);
	text-decoration: none;
}

.mg-site-footer a:hover,
.mg-site-footer a:focus { color: var(--wp--preset--color--sky); }

.mg-footer__social.wp-block-social-links { gap: 10px; margin: 0; }

/* Hairline tiles rather than filled circles, so the row reads as quiet
   secondary navigation next to the orange email link above it. */
.mg-site-footer .mg-footer__social .wp-block-social-link {
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px;
	background: none;
	transition: border-color .15s ease, color .15s ease;
}

.mg-site-footer .mg-footer__social .wp-block-social-link a {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: #B8BFBF;
	padding: 0;
}

.mg-site-footer .mg-footer__social .wp-block-social-link svg {
	width: 16px;
	height: 16px;
}
.mg-site-footer .mg-footer__social .wp-block-social-link:hover { border-color: var(--wp--preset--color--sky); }
.mg-site-footer .mg-footer__social .wp-block-social-link:hover a { color: var(--wp--preset--color--sky); }

.mg-footer__disclaimer {
	max-width: 1240px;
	margin: 40px auto 0;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.7;
	color: var(--wp--preset--color--text-muted);
}

.mg-footer__bottom {
	max-width: 1240px;
	margin: 20px auto 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	gap: 16px;
}

.mg-footer__copy {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

.mg-footer__legal { gap: 24px; }
.mg-footer__legal p { margin: 0; font-size: var(--wp--preset--font-size--caption); }

@media (max-width: 899px) {
	.mg-site-footer { padding: 48px 20px 28px; }
	.mg-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- Motion safety ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   2. Page components
   ========================================================================== */

:root {
	/* Layout — section width comes from each block's constrained layout;
	   only the gutter and rhythm need to be shared here. */
	--mg-gutter: 40px;
	--mg-sec-pad: 96px;
	--mg-radius: 16px;

	/* Accent tints and inks — derived from the brand palette for icon chips */
	--mg-red-tint: #FFEDE7;
	--mg-red-ink: #D8390F;
	--mg-teal-tint: #E7F2F6;
	--mg-teal-ink: #357F98;
	--mg-orange-tint: #FFF3E0;
	--mg-orange-ink: #B5700A;
	--mg-sky-tint: #EAF5F8;
	--mg-sky-ink: #3E97AE;

	/* Elevation */
	--mg-shadow-sm: 0 1px 2px rgba(15, 18, 22, .04), 0 1px 3px rgba(15, 18, 22, .06);
	--mg-shadow-md: 0 10px 30px -16px rgba(15, 18, 22, .22);
	--mg-shadow-lg: 0 30px 60px -28px rgba(15, 18, 22, .30);
}

/* --------------------------------------------------------------------------
   Page reset
   The Elementor-era pages each carried their own reset, scoped to #mg-*. That
   reset went away with the wrapper, and the theme does not replace it —
   WordPress's own block styles do, and they differ. Ported here, scoped to the
   page body, and placed before the components so they still win.
   -------------------------------------------------------------------------- */
.mg-page,
.mg-page *,
.mg-page *::before,
.mg-page *::after {
	box-sizing: border-box;
}

.mg-page {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.mg-page img {
	max-width: 100%;
	display: block;
}

.mg-page a {
	text-decoration: none;
}

/* Core ships `.wp-block-image img { height: auto; max-width: 100% }` at the
   same specificity as a plain component rule, so a fixed-height logo loses the
   tie on load order and renders at its natural size. The sized images below are
   therefore addressed through .mg-page to outrank it. */
.mg-page .wp-block-image {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Scroll reveal
   Gated on .mg-js (set by assets/js/mangrove.js) so content stays visible if
   JavaScript fails or is blocked. GPU-only properties.
   -------------------------------------------------------------------------- */
.mg-js .mg-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .6s cubic-bezier(.16, .84, .44, 1), transform .6s cubic-bezier(.16, .84, .44, 1);
}

.mg-js .mg-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mg-js .mg-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */
.mg-section {
	padding-top: var(--mg-sec-pad);
	padding-bottom: var(--mg-sec-pad);
}

/* --------------------------------------------------------------------------
   Headings and lede
   theme.json sets the family, weight and size; these restore the per-context
   tracking and margins the page designs rely on.
   -------------------------------------------------------------------------- */
.mg-h1 {
	letter-spacing: .04em;
	line-height: 1.05;
	margin: 0 0 22px;
}

.mg-h2 {
	letter-spacing: .01em;
	line-height: 1.15;
	margin: 0 0 12px;
}

.mg-lede {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 28px;
	max-width: 560px;
}

.mg-body {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 24px;
}

/* --------------------------------------------------------------------------
   Text links with a chevron
   -------------------------------------------------------------------------- */
.mg-cta-link {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--caption);
	margin: 0;
}

.mg-cta-link a {
	text-decoration: none;
	transition: opacity .2s ease;
}

.mg-cta-link a::after { content: " \203A"; }
.mg-cta-link a:hover { opacity: .7; }

.mg-cta-link.is-orange a { color: var(--wp--preset--color--orange); }
.mg-cta-link.is-teal a   { color: var(--wp--preset--color--teal); }
.mg-cta-link.is-sky a    { color: var(--wp--preset--color--sky); }
.mg-cta-link.is-red a    { color: var(--wp--preset--color--red); }

/* --------------------------------------------------------------------------
   Buttons — core/button variants
   -------------------------------------------------------------------------- */
.mg-btn-outline .wp-block-button__link {
	background: transparent;
	background-color: transparent;
	color: var(--wp--preset--color--orange);
	border: 2px solid var(--wp--preset--color--orange);
	padding: 14px 28px;
	font-size: var(--wp--preset--font-size--small);
	transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.mg-btn-outline .wp-block-button__link::after { content: " \203A"; }

.mg-btn-outline .wp-block-button__link:hover,
.mg-btn-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--base);
	transform: translateY(-2px);
}

.mg-btn-outline.is-teal .wp-block-button__link { color: var(--wp--preset--color--teal); border-color: var(--wp--preset--color--teal); }
.mg-btn-outline.is-teal .wp-block-button__link:hover { background-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--base); }
.mg-btn-outline.is-sky .wp-block-button__link { color: var(--wp--preset--color--sky); border-color: var(--wp--preset--color--sky); }
.mg-btn-outline.is-sky .wp-block-button__link:hover { background-color: var(--wp--preset--color--sky); color: var(--wp--preset--color--ink-2); }
.mg-btn-outline.is-red .wp-block-button__link { color: var(--wp--preset--color--red); border-color: var(--wp--preset--color--red); }
.mg-btn-outline.is-red .wp-block-button__link:hover { background-color: var(--wp--preset--color--red); color: var(--wp--preset--color--base); }

.mg-btn-primary .wp-block-button__link {
	background: var(--wp--preset--gradient--orange-cta);
	color: var(--wp--preset--color--ink-2);
	padding: 15px 30px;
	border: none;
	box-shadow: 0 10px 28px -12px rgba(255, 158, 24, .6);
	transition: transform .2s ease, box-shadow .25s ease;
}

.mg-btn-primary .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -12px rgba(255, 158, 24, .7);
}

.mg-btn-ghost .wp-block-button__link {
	background-color: rgba(255, 255, 255, .04);
	color: #fff;
	padding: 14px 26px;
	border: 1px solid rgba(255, 255, 255, .28);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.mg-btn-ghost .wp-block-button__link:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, .6);
	background-color: rgba(255, 255, 255, .08);
}

/* --------------------------------------------------------------------------
   Announcement bar
   The dismiss control is injected by mangrove.js so the markup stays native.
   -------------------------------------------------------------------------- */
.mg-announce {
	position: relative;
	background-color: var(--wp--preset--color--ink-2);
	color: #E6F6F9;
	font-family: var(--wp--preset--font-family--text);
	padding: 11px 56px;
}

.mg-announce.is-dismissed { display: none; }

.mg-announce__inner { gap: 12px; }

.mg-announce > .wp-block-group__inner-container,
.mg-announce {
	text-align: center;
}

.mg-announce .mg-announce__text {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
}

/* An inline link, not a button: the handoff bar is a single line of text with
   the call to action set in light teal beside it. */
.mg-announce .mg-announce__link {
	color: #6ECEDA;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.mg-announce .mg-announce__link:hover { text-decoration: underline; }

.mg-announce__close {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: inherit;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--subhead);
	line-height: 1;
	cursor: pointer;
	padding: 2px 8px;
	opacity: .65;
	transition: opacity .2s ease;
}

.mg-announce__close:hover { opacity: 1; }

@media (max-width: 768px) {
	.mg-announce { padding: 10px 40px; }
	.mg-announce__inner { gap: 8px 10px; }
	.mg-announce .mg-announce__text { font-size: var(--wp--preset--font-size--label); }
}

/* --------------------------------------------------------------------------
   Hero
   Background image is set on the block; the scrim and sizing live here.
   -------------------------------------------------------------------------- */
.mg-hero {
	position: relative;
	min-height: 100vh;
	/* Not flex: the section's children are the page content (heading, subhead,
	   card columns) and flex would lay them out side by side. The grid track is
	   defined once for all sections under "Section content width" below. */
	background-color: var(--wp--preset--color--ink);
	/* Fallback for the hero photo. The block also carries a backgroundImage
	   attribute so it stays swappable in the editor; when that renders, its
	   inline style wins over this. */
	background-image: url("/wp-content/uploads/2025/08/Mangrove-single-tree-e1758491509881.jpg");
	background-position: 50% 100%;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

.mg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 18, 22, .6);
	z-index: 1;
}

.mg-hero > * {
	position: relative;
	z-index: 2;
}

.mg-hero .mg-hero__title {
	color: #F2F5F7;
	max-width: 675px;
}

/* The homepage subline sits under a 68px headline. At body size it read as a
   caption rather than a line of copy, so it steps up to the title size and
   takes a wider measure and tighter leading to suit. Scoped away from the
   Institutions and Company heroes, which share this class but have their own
   balance. */
.mg-hero:not(.mg-hero--dark):not(.is-company) .mg-hero__sub {
	font-size: var(--wp--preset--font-size--title);
	line-height: 1.35;
	max-width: 700px;
}

.mg-hero .mg-hero__sub {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: rgba(242, 245, 247, .9);
	max-width: 540px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Hero pathway cards
   -------------------------------------------------------------------------- */
.mg-pathways {
	max-width: 960px;
	margin-top: 44px;
}

.mg-pathway {
	display: flex;
	flex-direction: column;
	background-color: rgba(10, 12, 15, .82);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 12px;
	padding: 28px;
	height: 100%;
	transition: transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.mg-pathway:hover {
	background-color: rgba(10, 12, 15, .92);
	transform: translateY(-4px);
	box-shadow: 0 22px 40px -24px rgba(0, 0, 0, .7);
}

.mg-pathway__label {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.mg-pathway__desc {
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.65;
	color: rgba(255, 255, 255, .92);
	margin: 0 0 18px;
}

/* Links group at the card foot so cards of differing height stay aligned */
.mg-pathway__links { margin-top: auto; }

.mg-pathway.is-teal   .mg-pathway__label, .mg-pathway.is-teal   .mg-cta-link a { color: var(--wp--preset--color--teal); }
.mg-pathway.is-sky    .mg-pathway__label, .mg-pathway.is-sky    .mg-cta-link a { color: var(--wp--preset--color--sky); }
.mg-pathway.is-red    .mg-pathway__label, .mg-pathway.is-red    .mg-cta-link a { color: var(--wp--preset--color--red); }
.mg-pathway.is-orange .mg-pathway__label, .mg-pathway.is-orange .mg-cta-link a { color: var(--wp--preset--color--orange); }

.mg-pathway.is-teal:hover   { border-color: rgba(66, 167, 198, .60); }
.mg-pathway.is-sky:hover    { border-color: rgba(116, 195, 213, .60); }
.mg-pathway.is-red:hover    { border-color: rgba(255, 71, 19, .55); }
.mg-pathway.is-orange:hover { border-color: rgba(255, 158, 24, .55); }

/* --------------------------------------------------------------------------
   Partner logos + marquee
   -------------------------------------------------------------------------- */
.mg-partners {
	padding-top: 48px;
	padding-bottom: 48px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.mg-partners__title {
	font-size: var(--wp--preset--font-size--title);
	text-align: center;
	margin: 0 0 36px;
}

.mg-featured-partner {
	max-width: 420px;
	margin: 0 auto 44px;
	padding: 30px 48px 32px;
	text-align: center;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mg-radius);
	box-shadow: var(--mg-shadow-md);
}

.mg-featured-partner__label {
	display: block;
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
	margin: 0 0 16px;
}

.mg-featured-partner figure { margin: 0; }
.mg-page .mg-featured-partner img { height: 46px; width: auto; margin: 0 auto; }

.mg-carousel {
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* No-JS fallback: logos wrap instead of scrolling */
.mg-carousel__track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.mg-js .mg-carousel__track {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	animation: mg-marquee 60s linear infinite;
}

.mg-carousel:hover .mg-carousel__track { animation-play-state: paused; }

.mg-carousel__track figure { margin: 0; }

.mg-page .mg-carousel__track img {
	height: 32px;
	width: auto;
	margin: 0 40px;
	filter: grayscale(100%);
	opacity: .45;
	transition: filter .3s ease, opacity .3s ease;
}

.mg-page .mg-carousel__track img:hover { filter: grayscale(0); opacity: .7; }

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

@media (prefers-reduced-motion: reduce) {
	.mg-js .mg-carousel__track { animation: none; }
}

/* --------------------------------------------------------------------------
   Stat cards
   -------------------------------------------------------------------------- */
.mg-stats { margin: 32px 0 40px; }

.mg-stat {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mg-radius);
	box-shadow: var(--mg-shadow-sm);
	padding: 28px;
	text-align: center;
	height: 100%;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.mg-stat:hover {
	transform: translateY(-4px);
	box-shadow: var(--mg-shadow-md);
	border-color: #E0E3E7;
}

.mg-stat__num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--title);
	line-height: 1;
	color: var(--wp--preset--color--ink-2);
	font-variant-numeric: tabular-nums;
	margin: 0 0 8px;
}

.mg-stat__label {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-2);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Counter band — dark full-bleed stripe with a bright accent number
   -------------------------------------------------------------------------- */
.mg-counter {
	background-color: var(--wp--preset--color--ink);
	padding-top: 72px;
	padding-bottom: 72px;
	text-align: center;
}

.mg-counter__num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--display);
	line-height: .95;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--sky);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.mg-counter__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--subhead);
	line-height: 1.3;
	color: rgba(242, 245, 247, .82);
	margin: 14px 0 0;
}

/* --------------------------------------------------------------------------
   Split audience sections
   -------------------------------------------------------------------------- */
.mg-split { align-items: center; gap: 56px; }

.mg-split .mg-shot {
	margin: 0;
}

.mg-page .mg-split .mg-shot img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--line);
	display: block;
}

/* --------------------------------------------------------------------------
   Feature lists
   -------------------------------------------------------------------------- */
.mg-features {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.mg-features li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 12px;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-2);
}

.mg-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--orange);
}

.mg-features.is-teal li::before { background-color: var(--wp--preset--color--teal); }
.mg-features.is-sky li::before  { background-color: var(--wp--preset--color--sky); }
.mg-features.is-red li::before  { background-color: var(--wp--preset--color--red); }

/* --------------------------------------------------------------------------
   Trust cards — icon chip is painted from a masked SVG so the glyph inherits
   the chip's ink color and stays out of the block markup.
   -------------------------------------------------------------------------- */
.mg-trust {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mg-radius);
	box-shadow: var(--mg-shadow-sm);
	padding: 30px 28px;
	height: 100%;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.mg-trust:hover {
	transform: translateY(-5px);
	box-shadow: var(--mg-shadow-md);
	border-color: #E0E3E7;
}

.mg-trust__icon {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 22px;
}

.mg-trust__icon::before {
	content: "";
	width: 27px;
	height: 27px;
	background-color: currentColor;
	-webkit-mask: var(--mg-icon) center / contain no-repeat;
	mask: var(--mg-icon) center / contain no-repeat;
}

/* Chip color and glyph are independent: a page may use the same tint with a
   different icon (Institutions uses teal for both "Bottom-Up Adoption" and
   "Compliance-Ready"), so the two never share a class. */
.mg-trust__icon.is-teal   { background-color: var(--mg-teal-tint);   color: var(--mg-teal-ink); }
.mg-trust__icon.is-red    { background-color: var(--mg-red-tint);    color: var(--mg-red-ink); }
.mg-trust__icon.is-sky    { background-color: var(--mg-sky-tint);    color: var(--mg-sky-ink); }
.mg-trust__icon.is-orange { background-color: var(--mg-orange-tint); color: var(--mg-orange-ink); }

.mg-icon--lock           { --mg-icon: url("../images/icons/lock.svg"); }
.mg-icon--shield-check   { --mg-icon: url("../images/icons/shield-check.svg"); }
.mg-icon--chart-bars     { --mg-icon: url("../images/icons/chart-bars.svg"); }
.mg-icon--document       { --mg-icon: url("../images/icons/document.svg"); }
.mg-icon--arrow-up       { --mg-icon: url("../images/icons/arrow-up.svg"); }
.mg-icon--eye            { --mg-icon: url("../images/icons/eye.svg"); }
.mg-icon--engine         { --mg-icon: url("../images/icons/engine.svg"); }
.mg-icon--document-check { --mg-icon: url("../images/icons/document-check.svg"); }

.mg-trust h3 {
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink-2);
	margin: 0 0 10px;
}

.mg-trust p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	letter-spacing: .01em;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Bottom CTA callout — floating dark glass panel
   -------------------------------------------------------------------------- */
.mg-callout {
	position: relative;
	/*
	 * width:100% matters here. .mg-section is a grid container, and a grid
	 * item with auto side margins is sized to fit-content rather than
	 * stretched -- so the callout was collapsing to the intrinsic width of its
	 * own paragraph, about 600px, and never reached the 940px it declares.
	 */
	width: 100%;
	max-width: 940px;
	margin: 0 auto;
	text-align: center;
	background-image:
		radial-gradient(70% 120% at 88% -10%, rgba(255, 158, 24, .20), transparent 60%),
		linear-gradient(165deg, #1B2026 0%, #13171C 100%);
	background-color: #14181D;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 20px;
	box-shadow: var(--mg-shadow-lg);
	padding: 64px 60px;
	overflow: hidden;
}

.mg-callout h2 {
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: -.01em;
	color: #fff;
	margin: 0 0 16px;
}

.mg-callout p {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: rgba(255, 255, 255, .6);
	max-width: 480px;
	margin: 0 auto 36px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	:root { --mg-gutter: 24px; }

	/* Stack the split sections and interleave the image between the headline
	   and the body copy, so the reading order is:
	   headline -> image -> body -> bullets -> CTA */
	.mg-split.wp-block-columns {
		display: flex;
		flex-direction: column;
		gap: 0;
		/* Core stacks columns below 782px with `flex-basis: 100% !important`,
		   which in this column-direction container means 100% of the *height* —
		   so each column claims a whole column-track and core's blanket
		   `.wp-block-columns{flex-wrap:wrap!important}` breaks the next one out
		   to the right instead of below. That pushed the image column ~358px
		   off-screen on every split section, on every page that uses one.
		   Both of core's declarations carry !important, so overriding them
		   needs !important too. */
		flex-wrap: nowrap !important;
	}

	.mg-split.wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
	}

	.mg-split .mg-split__copy { display: contents; }
	.mg-split .mg-split__copy h2 { order: 2; }

	/* The image is a <figure class="mg-shot"> nested inside its own column, so
	   `order` has to go on the column — the figure is not a flex item of the
	   split and ordering it does nothing. Without this the image column keeps
	   the default order 0 and jumps above the headline. */
	.mg-split > .wp-block-column:not(.mg-split__copy) { order: 3; }

	.mg-split .mg-shot {
		width: 78%;
		max-width: 620px;
		margin: 6px auto 30px;
	}

	/* Body copy is .mg-lede on some sections and .mg-body on others; ordering
	   only one left the other at order 0, above the headline. */
	.mg-split .mg-split__copy .mg-lede,
	.mg-split .mg-split__copy .mg-body { order: 4; }
	.mg-split .mg-split__copy .mg-features { order: 5; }
	.mg-split .mg-split__copy .wp-block-buttons { order: 6; }
}

@media (max-width: 768px) {
	:root {
		--mg-gutter: 16px;
		--mg-sec-pad: 64px;
	}

	.mg-hero {
		min-height: auto;
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.mg-page .mg-carousel__track img { height: 28px; margin: 0 28px; }
	.mg-counter { padding-top: 52px; padding-bottom: 52px; }
	.mg-callout { padding: 40px 24px; }
}

/* --------------------------------------------------------------------------
   Flush page sections
   WordPress applies the site block gap between top-level blocks, which leaves
   a strip of page background between every full-bleed section and around the
   header and footer parts. Page patterns are edge-to-edge by design.
   -------------------------------------------------------------------------- */
/* The page content is wrapped in <main>, so the blockGap that WordPress puts
   between top-level blocks lands between the header and the page — a 24px
   white strip under the sticky nav. Reset it on the wrappers themselves; an
   earlier version of this rule targeted .mg-page directly and stopped matching
   when that class moved onto the post-content wrapper. */
.wp-site-blocks > *,
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Between sections only — not inside them, or every card's internal spacing
   would collapse along with it. */
.mg-page > * + * {
	margin-block-start: 0;
}

/* Hero children carry their own margins, so the flow gap would double them. */
.mg-hero > * + *,
.mg-hero--dark > * + * {
	margin-block-start: 0;
}

/* The dismiss button is absolutely positioned; a flow margin still offsets it
   from the `top` value, which pushed it below centre. */
.mg-announce__close {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Section content width
   Every page section is a centred 1200px track. This is set here rather than
   left to WordPress's constrained layout, because that applies the *global*
   content size (760px) unless it can emit a per-block container class for a
   custom contentSize — and hand-written pattern markup cannot carry one.

   Grid rather than max-width on each child: the track is centred while the
   children align to its left edge, so a narrower element (a 780px copy block)
   lines up with the section above it instead of centring on its own.
   -------------------------------------------------------------------------- */
.mg-page > * {
	display: grid;
	grid-template-columns: minmax(0, 1200px);
	justify-content: center;
}

/* Vertically centre the hero content inside its tall section. */
.mg-page > .mg-hero,
.mg-page > .mg-hero--dark {
	align-content: center;
}

/* Narrower measures inside a section, kept left-aligned in the track. */
.mg-copy-block { max-width: 780px; }
.mg-formsection .mg-copy-block { max-width: 660px; margin-left: auto; margin-right: auto; }
.mg-callout { max-width: 940px; margin-left: auto; margin-right: auto; }
.mg-featured-partner { max-width: 420px; }
.mg-pathways { max-width: 960px; }
.mg-hero .mg-hero__title { max-width: 675px; }
.mg-hero .mg-hero__sub { max-width: 540px; }
.mg-hero--dark .mg-hero__title { max-width: 840px; }
.mg-hero--dark .mg-hero__sub { max-width: 640px; }

/* --------------------------------------------------------------------------
   Flow gap reset
   WordPress's flow layout inserts a block gap between every pair of siblings.
   The components already declare the exact margins ported from the page
   designs, so the layout gap is reset and the components below re-assert the
   few top margins that are deliberate.

   :where() on .is-layout-flow is load-bearing. Written as two classes this
   selector outranked every component rule that sets its own margin-top with a
   single class -- .mg-subhead, .mg-discord, .mg-newsmast__sub,
   .mg-contact-hero__sub, .mg-procallout__save and a dozen more -- so those
   margins computed to zero and the elements sat flush against whatever came
   before them. Dropping the reset to one class lets a component below re-assert
   its own value, which is what the paragraph above always claimed happened.
   -------------------------------------------------------------------------- */
.mg-page :where(.is-layout-flow) > * + * {
	margin-block-start: 0;
}

.mg-page .mg-pathways      { margin-top: 44px; }
.mg-page .mg-stats         { margin-top: 32px; }
.mg-page .mg-counter__label { margin-top: 14px; }
.mg-page .mg-statcard      { margin-top: -64px; }

/* --------------------------------------------------------------------------
   Section gutters
   The constrained layout caps content width; this supplies the 40px side
   gutter the page designs use (24px tablet, 16px phone via --mg-gutter).

   This is an allow-list, which means a full-width section that is not on it
   runs its text into the edge of the screen. That is invisible above 1200px,
   where the layout's own max-width leaves a margin, so it survived review and
   showed up on a laptop: the legal headings, both light heroes, the Kraken
   banner and the whole contact page were all flush left at 1024 and below.
   test-regression.js now measures the distance from text to the viewport edge
   on every full-width section, so the next omission fails a test rather than
   waiting to be spotted.
   -------------------------------------------------------------------------- */
.mg-hero,
.mg-hero-light,
.mg-partners,
.mg-section,
.mg-counter,
.mg-announce,
.mg-legal-hero,
.mg-archive-hero,
.mg-newsmast,
.mg-contact-hero,
.mg-contactsection,
.mg-statband,
.mg-kraken {
	padding-left: var(--mg-gutter);
	padding-right: var(--mg-gutter);
}

/* --------------------------------------------------------------------------
   Column gaps and responsive stacking
   Core stacks .wp-block-columns at 781px; these designs stack at 1024px and
   step the card grids down to two columns first.
   -------------------------------------------------------------------------- */
.mg-pathways.wp-block-columns { gap: 20px; }
.mg-stats.wp-block-columns { gap: 16px; }
.mg-trust-grid.wp-block-columns { gap: 32px; }

@media (max-width: 1024px) {
	/* Card grids: two up.
	   !important is load-bearing, not laziness: core's columns stylesheet ships
	   `@media (min-width:782px){ .wp-block-columns{flex-wrap:nowrap!important} }`,
	   so a plain declaration here loses and the cards stay squeezed onto one
	   row through the whole tablet range. */
	.mg-stats.wp-block-columns,
	.mg-trust-grid.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.mg-stats.wp-block-columns > .wp-block-column,
	.mg-trust-grid.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - 16px) !important;
		flex-grow: 0;
	}

	/* Pathway cards: single column */
	.mg-pathways.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.mg-pathways.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (max-width: 768px) {
	.mg-stats.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - 8px) !important;
	}

	.mg-trust-grid.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Split columns keep their 55/45 ratio until the 1024px stack above */
@media (min-width: 1025px) {
	.mg-split.wp-block-columns { flex-wrap: nowrap; }
}

/* ==========================================================================
   Institutions page components
   Teal leads on this page; orange and sky are light accents only.
   ========================================================================== */

/* Gradient-filled text (headline emphasis, stat and step numerals) */
.mg-gradient-text {
	background: var(--wp--preset--gradient--teal-brand);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--wp--preset--color--teal);
}

/* --------------------------------------------------------------------------
   Dark gradient hero (no photo): brand glow, dot grid, drifting orb
   -------------------------------------------------------------------------- */
.mg-hero--dark {
	position: relative;
	min-height: 90vh;
	padding-top: 120px;
	padding-bottom: 120px;
	/* No photo on this hero — layered brand gradients only, so the fallback
	   image inherited from .mg-hero is cleared. */
	background-image:
		radial-gradient(60% 55% at 86% -10%, rgba(66, 167, 198, .30), transparent 60%),
		radial-gradient(46% 52% at 2% 112%, rgba(66, 167, 198, .14), transparent 64%),
		linear-gradient(165deg, #0F1216 0%, #15191F 58%, #0E1318 100%);
	overflow: hidden;
}

/* Technical dot grid, masked to fade out */
.mg-hero--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(72% 68% at 50% 26%, #000 0%, transparent 80%);
	mask-image: radial-gradient(72% 68% at 50% 26%, #000 0%, transparent 80%);
	z-index: 0;
}

/* Slow drifting glow orb */
.mg-hero--dark::after {
	content: "";
	position: absolute;
	width: 540px;
	height: 540px;
	right: -120px;
	top: -160px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(66, 167, 198, .30), transparent 70%);
	filter: blur(20px);
	z-index: 0;
	animation: mg-float 14s ease-in-out infinite alternate;
}

@keyframes mg-float {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(-40px, 40px) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
	.mg-hero--dark::after { animation: none; }
}

.mg-hero--dark > * {
	position: relative;
	z-index: 2;
}

.mg-hero--dark .mg-hero__title {
	letter-spacing: -.025em;
	line-height: 1.02;
	max-width: 840px;
}

.mg-hero--dark .mg-hero__sub {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.65;
	color: rgba(242, 245, 247, .82);
	max-width: 640px;
	margin: 0 0 36px;
}

/* Glassy hairline pills */
.mg-pills { margin: 0; }

.mg-pill {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .9);
	background-color: rgba(255, 255, 255, .04);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 100px;
	padding: 9px 18px 9px 14px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
}

.mg-pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--teal);
	flex: 0 0 auto;
}

/* Teal-filled primary button (this page leads with teal, not orange) */
.mg-btn-teal .wp-block-button__link {
	background: var(--wp--preset--gradient--teal-brand);
	color: #fff;
	padding: 15px 28px;
	border: none;
	box-shadow: 0 10px 28px -12px rgba(66, 167, 198, .65);
	transition: transform .2s ease, box-shadow .25s ease;
}

.mg-btn-teal .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -12px rgba(66, 167, 198, .7);
}

/* --------------------------------------------------------------------------
   Stats card overlapping the hero
   -------------------------------------------------------------------------- */
.mg-statband {
	padding-top: 0;
	padding-bottom: 96px;
}

.mg-statcard {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mg-radius);
	box-shadow: var(--mg-shadow-md);
	padding: 48px 44px;
	margin-top: -64px; /* lift the strip into the hero */
	position: relative;
	z-index: 3;
}

.mg-statcard.wp-block-columns { gap: 0; }

.mg-statcol {
	border-left: 1px solid var(--wp--preset--color--line);
	padding-left: 40px;
}

.mg-statcard > .mg-statcol:first-child {
	border-left: none;
	padding-left: 0;
}

.mg-statcol__num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--heading);
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	margin: 0 0 14px;
}

.mg-statcol__label {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-2);
	margin: 0 0 12px;
}

.mg-statcol__source {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Copy block that leads a section
   -------------------------------------------------------------------------- */
.mg-copy-block { margin-bottom: 56px; }

.mg-copy-block .mg-lede { max-width: none; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Compliance-gap cards
   -------------------------------------------------------------------------- */
.mg-gapcard {
	position: relative;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mg-radius);
	box-shadow: var(--mg-shadow-sm);
	padding: 30px 26px 28px;
	height: 100%;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.mg-gapcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--mg-shadow-md);
	border-color: #E0E3E7;
}

.mg-gapcard__index {
	position: absolute;
	top: 24px;
	right: 24px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: .08em;
	color: #D7DBDF;
	margin: 0;
}

/* The cross badge is decorative, so it is drawn rather than written as text */
.mg-gapcard__mark {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background-color: var(--mg-teal-tint);
	color: var(--wp--preset--color--teal);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 18px;
}

.mg-gapcard__mark::before {
	content: "\00D7";
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	line-height: 1;
}

.mg-gapcard h3 {
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 10px;
}

.mg-gapcard p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.62;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   How-it-works steps
   -------------------------------------------------------------------------- */
.mg-steps.wp-block-columns { gap: 40px; }

.mg-step__num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1;
	letter-spacing: -.03em;
	margin: 0 0 18px;
}

.mg-step__num::after {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	border-radius: 2px;
	background-color: rgba(15, 18, 22, .12);
	margin-top: 18px;
}

.mg-step h3 {
	font-size: var(--wp--preset--font-size--subhead);
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 12px;
}

.mg-step p {
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.65;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Platform capability cards
   -------------------------------------------------------------------------- */
.mg-platform {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	box-shadow: var(--mg-shadow-sm);
	padding: 30px 28px;
	height: 100%;
	transition: transform .22s ease, border-color .2s ease, box-shadow .22s ease;
}

.mg-platform:hover {
	transform: translateY(-3px);
	border-color: #E0E3E7;
	box-shadow: var(--mg-shadow-md);
}

.mg-platform h3 {
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.mg-platform h3::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 3px;
	background-color: var(--wp--preset--color--teal);
	flex: 0 0 auto;
}

.mg-platform.is-orange h3::before { background-color: var(--wp--preset--color--orange); }
.mg-platform.is-sky h3::before    { background-color: var(--wp--preset--color--sky); }
.mg-platform.is-teal h3::before   { background-color: var(--wp--preset--color--teal); }

.mg-platform p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Pilot callout — teal variant of the dark glass panel, left aligned
   -------------------------------------------------------------------------- */
.mg-callout--teal {
	text-align: left;
	background-image:
		radial-gradient(70% 120% at 88% -10%, rgba(66, 167, 198, .22), transparent 60%),
		linear-gradient(165deg, #1B2026 0%, #13171C 100%);
	padding: 60px;
}

.mg-callout--teal h2 {
	color: #fff;
	letter-spacing: -.02em;
}

.mg-callout--teal .mg-callout__body {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.7;
	color: rgba(242, 245, 247, .78);
	margin: 0 0 34px;
	max-width: 700px;
}

.mg-checklist {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 36px;
	margin: 0 0 34px;
	padding: 0;
}

.mg-checklist li {
	position: relative;
	padding-left: 34px;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.55;
	color: rgba(242, 245, 247, .92);
}

.mg-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--teal);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px;
}

.mg-callout--teal .mg-callout__fine {
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.6;
	color: rgba(242, 245, 247, .45);
	margin: 0;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

/* --------------------------------------------------------------------------
   Centered form section
   -------------------------------------------------------------------------- */
.mg-formsection { text-align: center; }
.mg-formsection .mg-copy-block { max-width: 660px; margin: 0 auto 44px; }
.mg-formsection .mg-lede { margin: 0 auto; }

/* HubSpot mount point. The form markup is injected by HubSpot at runtime, so
   these rules target its standard hs-* classes rather than our own. */
.mg-hsform {
	max-width: 640px;
	margin: 0 auto;
	text-align: left;
	min-height: 300px;
	font-family: var(--wp--preset--font-family--accent);
}

.mg-hsform .hs-form fieldset {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0;
	padding: 0;
	border: 0;
}

.mg-hsform .hs-form fieldset.form-columns-2,
.mg-hsform .hs-form fieldset.form-columns-3 {
	display: flex;
	flex-wrap: wrap;
	gap: 0 18px;
}

.mg-hsform .hs-form fieldset.form-columns-2 .hs-form-field { flex: 1 1 calc(50% - 9px); width: auto !important; float: none !important; padding: 0 !important; }
.mg-hsform .hs-form fieldset.form-columns-3 .hs-form-field { flex: 1 1 calc(33.333% - 12px); width: auto !important; float: none !important; padding: 0 !important; }
.mg-hsform .hs-form fieldset.form-columns-1 .hs-form-field { width: 100% !important; float: none !important; padding: 0 !important; }

.mg-hsform .hs-form .hs-form-field { margin: 0 0 18px; }

.mg-hsform .hs-form .hs-form-field > label {
	display: block;
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--ink);
	margin: 0 0 8px;
}

.mg-hsform .hs-form .hs-form-required { color: var(--wp--preset--color--teal); margin-left: 3px; }

.mg-hsform .hs-form .hs-field-desc {
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 8px;
}

.mg-hsform .hs-form .input { margin: 0 !important; }

.mg-hsform .hs-form .hs-input {
	width: 100% !important;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--accent);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 13px 15px;
	line-height: 1.4;
	transition: border-color .2s ease, box-shadow .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mg-hsform .hs-form .hs-input:hover { border-color: #D6DADF; }

.mg-hsform .hs-form .hs-input:focus,
.mg-hsform .hs-form .hs-input:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--teal);
	box-shadow: 0 0 0 3px rgba(66, 167, 198, .15);
}

.mg-hsform .hs-form textarea.hs-input { min-height: 130px; resize: vertical; }

.mg-hsform .hs-form select.hs-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 42px;
}

.mg-hsform .hs-form .inputs-list { list-style: none; margin: 0; padding: 0; }
.mg-hsform .hs-form .inputs-list li { margin: 0 0 8px; }

.mg-hsform .hs-form .hs-form-booleancheckbox-display,
.mg-hsform .hs-form .hs-form-checkbox-display,
.mg-hsform .hs-form .hs-form-radio-display {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-2);
	cursor: pointer;
}

.mg-hsform .hs-form .hs-input[type=checkbox],
.mg-hsform .hs-form .hs-input[type=radio] {
	width: 18px !important;
	height: 18px;
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var(--wp--preset--color--teal);
}

.mg-hsform .hs-form .legal-consent-container,
.mg-hsform .hs-form .hs-richtext {
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 18px;
}

.mg-hsform .hs-form .legal-consent-container a,
.mg-hsform .hs-form .hs-richtext a { color: var(--wp--preset--color--teal); text-decoration: underline; }

.mg-hsform .hs-form .hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; }

.mg-hsform .hs-form .hs-error-msg,
.mg-hsform .hs-form .hs-error-msgs label { color: var(--wp--preset--color--red); font-size: var(--wp--preset--font-size--label); line-height: 1.4; }

.mg-hsform .hs-form .hs-input.invalid,
.mg-hsform .hs-form .hs-input.error {
	border-color: var(--wp--preset--color--red);
	box-shadow: 0 0 0 3px rgba(255, 71, 19, .12);
}

.mg-hsform .hs-form .hs_submit .actions { margin: 8px 0 0; padding: 0; }

.mg-hsform .hs-form .hs-button {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-sm);
	background: var(--wp--preset--gradient--teal-brand);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 15px 32px;
	cursor: pointer;
	box-shadow: 0 10px 28px -12px rgba(66, 167, 198, .65);
	transition: transform .2s ease, box-shadow .25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mg-hsform .hs-form .hs-button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(66, 167, 198, .7); }
.mg-hsform .hs-form .hs-button:focus-visible { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 3px; }

.mg-hsform .submitted-message {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 24px 26px;
}

/* Visible keyboard focus ring across page components */
.mg-section a:focus-visible,
.mg-hero--dark a:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Institutions responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.mg-statcard { padding: 40px 32px; }

	.mg-statcard.wp-block-columns { flex-wrap: wrap !important; row-gap: 36px; }
	.mg-statcard.wp-block-columns > .mg-statcol { flex-basis: 50% !important; flex-grow: 0; }
	.mg-statcard.wp-block-columns > .mg-statcol:nth-child(2n+1) { border-left: none; padding-left: 0; }

	.mg-gap-grid.wp-block-columns,
	.mg-sol-grid.wp-block-columns,
	.mg-platform-grid.wp-block-columns { flex-wrap: wrap !important; }

	.mg-gap-grid.wp-block-columns > .wp-block-column,
	.mg-sol-grid.wp-block-columns > .wp-block-column,
	.mg-platform-grid.wp-block-columns > .wp-block-column { flex-basis: calc(50% - 11px) !important; flex-grow: 0; }

	.mg-steps.wp-block-columns { flex-wrap: wrap !important; gap: 36px; }
	.mg-steps.wp-block-columns > .wp-block-column { flex-basis: 100% !important; }

	.mg-callout--teal { padding: 48px; }
}

@media (max-width: 768px) {
	.mg-hero--dark { min-height: auto; padding-top: 88px; padding-bottom: 64px; }

	.mg-page .mg-statcard { margin-top: -40px; }
	.mg-statcard.wp-block-columns > .mg-statcol { flex-basis: 100% !important; border-left: none; padding-left: 0; }

	.mg-gap-grid.wp-block-columns > .wp-block-column,
	.mg-sol-grid.wp-block-columns > .wp-block-column,
	.mg-platform-grid.wp-block-columns > .wp-block-column { flex-basis: 100% !important; }

	.mg-checklist { grid-template-columns: 1fr; }
	.mg-callout--teal { padding: 34px 24px; }
}

/* ==========================================================================
   Mangrove App (investors) — page components
   Sizes come from the theme.json named scale; the source page's off-scale
   values (10.5px, 11.5px, 12.5px, 13.5px, 14.5px, 15.5px) snap to the nearest
   step, per the playbook's rule that the site scale wins.
   ========================================================================== */

:root {
	--mg-pos: #0E9F6E;                                              /* positive return */
	--mg-red-grad: linear-gradient(135deg, #FF4713 0%, #EC3A0D 100%);
}

/* ---- Hero (light, search-first) ---------------------------------------- */
.mg-hero-light {
	position: relative;
	overflow: hidden;
	padding-top: 104px;
	padding-bottom: 88px;
	background:
		radial-gradient(60% 60% at 88% 4%, rgba(255, 71, 19, .10), transparent 60%),
		radial-gradient(50% 60% at 0% 100%, rgba(255, 158, 24, .07), transparent 60%),
		var(--wp--preset--color--base);
}

/* Dot field, faded out from the top-left */
.mg-hero-light::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(15, 18, 22, .05) 1px, transparent 1.4px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(80% 70% at 30% 20%, #000 0%, transparent 75%);
	mask-image: radial-gradient(80% 70% at 30% 20%, #000 0%, transparent 75%);
	z-index: 0;
}

.mg-hero-light > * { position: relative; z-index: 1; }
.mg-hero-light .mg-h1 { letter-spacing: -.025em; line-height: 1.04; }

.mg-gradient-text.is-red {
	background: var(--mg-red-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--wp--preset--color--red);
}

.mg-hero-light__sub {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.65;
	color: var(--wp--preset--color--text-muted);
	max-width: 560px;
	margin: 0 0 28px;
}

.mg-hero-light__note {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--text-muted);
	margin: 16px 0 0;
}

/* ---- Search bar -------------------------------------------------------- */
.mg-search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mg-radius);
	box-shadow: var(--mg-shadow-md);
	padding: 8px 8px 8px 18px;
	max-width: 560px;
}

.mg-search__input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--wp--preset--font-family--accent);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--ink);
	padding: 10px 4px;
	min-width: 0;
}

.mg-search__input::placeholder { color: #9AA0A6; }

.mg-search__submit {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-sm);
	background: var(--mg-red-grad);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 11px;
	padding: 12px 22px;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 10px 28px -12px rgba(255, 71, 19, .6);
	transition: transform .2s ease, box-shadow .25s ease;
}

.mg-search__submit:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(255, 71, 19, .7); }

/* ---- Filter chips ------------------------------------------------------ */
.mg-chips { gap: 8px; margin-top: 16px; }

.mg-chip .wp-block-button__link {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.2;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink-2);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
	padding: 7px 15px;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.mg-chip .wp-block-button__link:hover { border-color: #D6DADF; }

.mg-chip.is-active .wp-block-button__link {
	background-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--red);
}

/* ---- Framed screenshot ------------------------------------------------- */
.mg-frame {
	border-radius: var(--mg-radius);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--mg-shadow-lg);
	background: var(--wp--preset--color--base);
}

/* Browser chrome: three dots drawn as one gradient, no extra markup */
.mg-frame::before {
	content: "";
	display: block;
	height: 39px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background:
		radial-gradient(circle 5.5px at 22px 50%, #D7DBDF 99%, transparent 100%),
		radial-gradient(circle 5.5px at 40px 50%, #D7DBDF 99%, transparent 100%),
		radial-gradient(circle 5.5px at 58px 50%, #D7DBDF 99%, transparent 100%),
		var(--wp--preset--color--surface);
}

.mg-page .mg-frame img { width: 100%; height: auto; display: block; }

/* ---- Kraken partner banner --------------------------------------------- */
.mg-kraken { background: var(--mg-red-grad); padding-top: 16px; padding-bottom: 16px; }
.mg-kraken__inner { gap: 18px; text-align: center; }

.mg-kraken__logo {
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--base);
	border-radius: 10px;
	padding: 9px 18px;
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35);
}

.mg-page .mg-kraken__logo img { height: 22px; width: auto; }

.mg-kraken__text {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--subhead);
	letter-spacing: -.01em;
	color: var(--wp--preset--color--base);
	margin: 0;
}

.mg-kraken__btn .wp-block-button__link {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--caption);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--red);
	padding: 10px 20px;
	border-radius: 10px;
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35);
	transition: transform .2s ease, box-shadow .25s ease;
}

.mg-kraken__btn .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); }

/* ---- Marketplace toolbar ----------------------------------------------- */
.mg-mkt__toolbar { gap: 14px; margin-bottom: 22px; margin-top: 28px; }
.mg-mkt__lead { gap: 14px; }

.mg-mkt__badge {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
	background: var(--mg-red-tint);
	border-radius: 100px;
	padding: 5px 12px 5px 10px;
	margin: 0;
}

.mg-mkt__count {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

.mg-mkt__count b { color: var(--wp--preset--color--ink); }

.mg-mkt__sort {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--text-muted);
}

.mg-mkt__sort select {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 9px 34px 9px 13px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
}

/* ---- Strategy cards ---------------------------------------------------- */
.mg-mkt__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.mg-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	box-shadow: var(--mg-shadow-sm);
	padding: 22px 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mg-card:hover { transform: translateY(-4px); box-shadow: var(--mg-shadow-md); border-color: #E0E3E7; }

/* JS filtering hides non-matching cards; class, not inline style, so the
   markup stays exactly what save() emits. */
.mg-card.is-filtered-out { display: none; }

.mg-card__top { gap: 10px; }

.mg-tag,
.mg-risk {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: 7px;
	padding: 4px 9px;
	margin: 0;
}

.mg-tag {
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
}

.mg-risk { font-weight: 700; }
.mg-risk.is-low    { background: var(--mg-teal-tint);   color: var(--mg-teal-ink); }
.mg-risk.is-medium { background: var(--mg-orange-tint); color: var(--mg-orange-ink); }
.mg-risk.is-high   { background: var(--mg-red-tint);    color: var(--wp--preset--color--red); }

.mg-card__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.mg-card__creator {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--text-muted);
	margin: -6px 0 0;
}

/* Verified check, drawn rather than marked up */
.mg-card__creator::before {
	content: "\2713";
	display: inline-flex;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--base);
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1;
	font-weight: 700;
	margin-right: 5px;
	vertical-align: middle;
}

.mg-card__metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 14px 0;
}

.mg-metric { display: flex; flex-direction: column; gap: 3px; }

.mg-metric__k {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #9AA0A6;
	margin: 0;
}

.mg-metric__v {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--ink);
	letter-spacing: -.01em;
	margin: 0;
}

.mg-metric__v.is-pos { color: var(--mg-pos); }

.mg-card__foot { gap: 10px; }

.mg-card__meta {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

.mg-card__meta::before { content: "\2605 "; color: var(--wp--preset--color--orange); }

.mg-card__run { margin: 0; }

.mg-card__run a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--red);
	background: var(--mg-red-tint);
	border-radius: 9px;
	padding: 8px 14px;
	transition: background .18s ease;
}

.mg-card__run a:hover { background: #FFE0D6; }

/* Shown by JS when a filter matches nothing */
.mg-mkt__empty {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--wp--preset--color--text-muted);
	padding: 48px 0;
}

.mg-fineprint {
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	margin: 24px 0 0;
	max-width: 860px;
}

/*
 * The flow-gap reset above is `.mg-page .is-layout-flow > * + *`, two classes,
 * so a component rule written with one class -- .mg-fineprint's own margin,
 * right above -- loses to it and silently resolves to zero. That is why the
 * marketplace disclaimer sat against the grid and the Login button sat against
 * the disclaimer. Re-asserted at matching specificity rather than by loosening
 * the reset: the reset has been in force the whole build and every component
 * spaced under it is spaced correctly today, so widening it now would move
 * things on pages nobody has asked me to touch.
 */
.mg-page .mg-fineprint { margin-top: 32px; }
.mg-page .mg-fineprint + .wp-block-buttons { margin-top: 28px; }

/* Same story for a section CTA that follows body copy or a card grid: the
   buttons block carries no margin of its own, so on Company the Login button
   sat against the narrative and "Latest company news" against the cards. */
.mg-page .mg-narrative + .wp-block-buttons,
.mg-page .mg-postgrid + .wp-block-buttons { margin-top: 44px; }

/* ---- Centred copy block ------------------------------------------------ */
.mg-copy-block.is-centred {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	max-width: 680px;
}

/*
 * 680px is the right measure for a centred lede of two or three lines. A
 * single long headline set at --heading is a different problem: it breaks
 * mid-clause and the break lands somewhere the sentence does not want it.
 * is-wide gives that case the room to hold the line.
 */
.mg-copy-block.is-centred.is-wide { width: 100%; max-width: 1200px; }
.mg-copy-block.is-centred.is-wide h2 { text-wrap: balance; }

/* ---- Dark bottom CTA ---------------------------------------------------- */
.mg-cta-dark {
	position: relative;
	overflow: hidden;
	text-align: center;
	background:
		radial-gradient(60% 120% at 50% -20%, rgba(255, 71, 19, .22), transparent 60%),
		linear-gradient(165deg, #15191F 0%, #0E1318 100%);
	background-color: var(--wp--preset--color--ink);
}

/* Global styles paint every heading the default text colour, so a dark band
   has to recolour its own headings explicitly. */
.mg-cta-dark .mg-h2 { color: var(--wp--preset--color--base); letter-spacing: -.02em; }

.mg-cta-dark__lede {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.7;
	color: rgba(242, 245, 247, .7);
	max-width: 560px;
	margin: 0 auto 32px;
}

/* ---- Primary button, red variant --------------------------------------- */
.mg-btn-primary.is-red .wp-block-button__link {
	background: var(--mg-red-grad);
	background-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--base);
	box-shadow: 0 10px 28px -12px rgba(255, 71, 19, .6);
}

.mg-btn-primary.is-red .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(255, 71, 19, .7); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
	.mg-hero-light { padding-top: 76px; padding-bottom: 60px; }
	.mg-hero-light__media { display: none; }
	.mg-mkt__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.mg-hero-light { padding-top: 72px; padding-bottom: 56px; }
	.mg-search { flex-wrap: wrap; }
	.mg-search__submit { width: 100%; }
}

@media (max-width: 600px) {
	.mg-mkt__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Developers — page components
   Sky is the developer accent (sky-deep #2E8FB0 is already the source page's
   --dev). Off-scale sizes snap to the nearest named step.
   ========================================================================== */

:root {
	--mg-code-bg: #0E1217;
	--mg-code-top: #141922;
	--mg-code-border: #242C36;
	--mg-code-txt: #C7D0DA;
	--mg-sky-grad: linear-gradient(135deg, #4FB0D2 0%, #2E8FB0 100%);
	--mg-shadow-code: 0 40px 80px -40px rgba(15, 18, 22, .55);
	--mg-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

.mg-hero-light.is-sky {
	background:
		radial-gradient(60% 60% at 88% 6%, rgba(116, 195, 213, .16), transparent 60%),
		radial-gradient(46% 60% at 2% 100%, rgba(66, 167, 198, .10), transparent 60%),
		var(--wp--preset--color--base);
}

.mg-verbs {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--subhead);
	letter-spacing: -.01em;
	margin: 0 0 20px;
	background: var(--mg-sky-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--wp--preset--color--sky-deep);
}

/* ---- Label chips (non-interactive) ------------------------------------- */
.mg-taglets { gap: 8px; margin-bottom: 28px; }

.mg-taglet {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: .02em;
	color: var(--wp--preset--color--sky-deep);
	background: var(--mg-sky-tint);
	border: 1px solid #D7ECF2;
	border-radius: 100px;
	padding: 6px 14px;
	margin: 0;
}

.mg-taglets.is-dotted { gap: 10px; }
.mg-taglets.is-dotted .mg-taglet { border-radius: 8px; padding: 7px 13px; }

.mg-taglets.is-dotted .mg-taglet::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--sky-deep);
	margin-right: 8px;
	vertical-align: middle;
}

/* ---- Terminal / code cards --------------------------------------------- */
.mg-code {
	background: var(--mg-code-bg);
	border: 1px solid var(--mg-code-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--mg-shadow-code);
}

.mg-code__bar {
	display: flex;
	align-items: center;
	padding: 13px 16px;
	border-bottom: 1px solid var(--mg-code-border);
	background: var(--mg-code-top);
}

/* Window dots drawn as one gradient rather than three empty elements */
.mg-code__bar::before {
	content: "";
	width: 51px;
	height: 11px;
	flex: none;
	margin-right: 10px;
	background:
		radial-gradient(circle 5.5px at 5.5px 50%, #2A313B 99%, transparent 100%),
		radial-gradient(circle 5.5px at 25.5px 50%, #2A313B 99%, transparent 100%),
		radial-gradient(circle 5.5px at 45.5px 50%, #2A313B 99%, transparent 100%);
}

.mg-code__fn {
	font-family: var(--mg-font-mono);
	font-size: var(--wp--preset--font-size--label);
	color: #6B7686;
}

.mg-code pre {
	margin: 0;
	padding: 20px 22px;
	overflow-x: auto;
	font-family: var(--mg-font-mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.75;
	color: var(--mg-code-txt);
	white-space: pre;
}

.is-compact .mg-code pre { font-size: var(--wp--preset--font-size--label); }

.mg-c-cmt    { color: #5E6B7A; }
.mg-c-str    { color: #8FD3E8; }
.mg-c-prop   { color: #E6EDF3; }
.mg-c-num    { color: #F0A868; }
.mg-c-ok     { color: #6FCF97; }
.mg-c-kw     { color: #7FB2E8; }
.mg-c-dim    { color: #6B7686; }
.mg-c-prompt { color: var(--wp--preset--color--sky); }
.mg-c-note   { color: var(--wp--preset--color--orange); }

/* ---- Generic feature card ---------------------------------------------- */
.mg-featcard {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mg-radius);
	box-shadow: var(--mg-shadow-sm);
	padding: 28px 26px;
	height: 100%;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.mg-featcard:hover { transform: translateY(-4px); box-shadow: var(--mg-shadow-md); border-color: #DCE6EB; }

.mg-featcard__kicker {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sky-deep);
	margin: 0 0 12px;
}

.mg-featcard__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: .005em;
	color: var(--wp--preset--color--ink-2);
	margin: 0 0 8px;
}

.mg-featcard p {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/*
 * p.mg-featcard__link, not .mg-featcard__link: the card zeroes the margin on
 * every paragraph it contains with `.mg-featcard p`, which is one class and one
 * element and so outranks a bare class here. The link sat flush against the
 * copy above it until this matched that weight.
 */
p.mg-featcard__link {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--eyebrow);
	margin: 14px 0 0;
}

.mg-featcard__link a { color: var(--wp--preset--color--sky-deep); }
.mg-featcard__link a::after { content: " \203A"; }

.mg-termpill {
	display: inline-block;
	font-family: var(--mg-font-mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--mg-code-txt);
	background: var(--mg-code-bg);
	border: 1px solid var(--mg-code-border);
	border-radius: 8px;
	padding: 9px 13px;
	margin: 14px 0 0;
}

.mg-termpill::before { content: "$ "; color: var(--wp--preset--color--sky); }

.mg-subhead {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin: 44px 0 20px;
}

/* ---- Discord banner ----------------------------------------------------- */
.mg-discord {
	gap: 20px;
	background: linear-gradient(120deg, #12161C, #0F1216);
	border: 1px solid var(--mg-code-border);
	border-radius: var(--mg-radius);
	padding: 30px 34px;
	box-shadow: var(--mg-shadow-code);
	/* 24px was the authored value and it read as part of the card row above
	   rather than a band of its own once the margin actually applied. */
	margin-top: 44px;
}

.mg-discord__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--subhead);
	color: var(--wp--preset--color--base);
	margin: 0 0 6px;
}

.mg-discord__copy {
	font-size: var(--wp--preset--font-size--caption);
	color: rgba(242, 245, 247, .7);
	margin: 0;
}

/* ---- Strategy engine pipeline ------------------------------------------ */
.mg-enginenote {
	max-width: 760px;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.75;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 48px;
}

.mg-enginenote strong { color: var(--wp--preset--color--ink-2); font-weight: 600; }

.mg-pipeline__step {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 28px;
	padding: 34px 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.mg-pipeline__step:first-child { border-top: none; }

.mg-pipeline__num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--heading);
	line-height: .9;
	letter-spacing: -.02em;
	margin: 0;
	background: var(--mg-sky-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--wp--preset--color--sky-deep);
}

.mg-pipeline__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--subhead);
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink-2);
	margin: 0 0 10px;
}

.mg-pipeline__desc {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 18px;
	max-width: 640px;
}

/* ---- Agent cards -------------------------------------------------------- */
.mg-agentcard { display: flex; flex-direction: column; }

.mg-agentcard__badge {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--mg-sky-tint);
	color: var(--wp--preset--color--sky-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body);
	margin: 0 0 16px;
}

.mg-agentcard .mg-features { margin-top: 16px; }
.mg-agentcard .mg-features li { font-size: var(--wp--preset--font-size--caption); }

/* ---- mangrove-agent dark panel ------------------------------------------ */
.mg-agenthero {
	position: relative;
	background: linear-gradient(160deg, #12161C 0%, #0E1216 100%);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: var(--mg-shadow-code);
	padding: 56px 52px;
}

.mg-agenthero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(50% 90% at 85% 0%, rgba(116, 195, 213, .14), transparent 60%);
	pointer-events: none;
}

.mg-agenthero > * { position: relative; z-index: 1; }
.mg-agenthero .mg-h2 { color: var(--wp--preset--color--base); letter-spacing: -.01em; }

.mg-agenthero__copy {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: rgba(242, 245, 247, .75);
	margin: 0 0 24px;
	max-width: 520px;
}

.mg-agenthero__stats { margin-top: 44px; }
.mg-astat { text-align: center; }

.mg-astat__n {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--title);
	line-height: 1;
	color: var(--wp--preset--color--base);
	margin: 0;
}

.mg-astat__l {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: .03em;
	color: rgba(242, 245, 247, .62);
	margin: 8px 0 0;
}

.mg-agenthero__stats .wp-block-column + .wp-block-column .mg-astat {
	border-left: 1px solid rgba(255, 255, 255, .12);
}

/* ---- Bundled data feed table -------------------------------------------- */
.mg-feedtable { margin: 0; }

.mg-feedtable table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mg-radius);
	overflow: hidden;
	box-shadow: var(--mg-shadow-sm);
}

.mg-feedtable td {
	padding: 15px 22px;
	font-size: var(--wp--preset--font-size--small);
	border: none;
	border-top: 1px solid var(--wp--preset--color--line);
}

.mg-feedtable tr:first-child td { border-top: none; }

/* Prices right-align by position, so the markup carries no per-cell attrs */
.mg-feedtable td:last-child {
	text-align: right;
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
	white-space: nowrap;
}

.mg-feedtable tr:last-child td {
	background: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--text);
	color: var(--wp--preset--color--ink-2);
}

.mg-procallout {
	background: linear-gradient(160deg, #12161C, #0E1216);
	border-radius: var(--mg-radius);
	box-shadow: var(--mg-shadow-code);
	padding: 38px 34px;
	color: var(--wp--preset--color--base);
}

.mg-procallout__tagline {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sky);
	margin: 0 0 14px;
}

.mg-procallout__price {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--heading);
	line-height: 1;
	color: var(--wp--preset--color--base);
	margin: 0 0 6px;
}

.mg-procallout__price span {
	font-size: var(--wp--preset--font-size--body);
	color: rgba(242, 245, 247, .6);
	font-weight: 600;
	margin-left: 6px;
}

.mg-procallout__save {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: rgba(242, 245, 247, .78);
	margin: 14px 0 0;
}

.mg-procallout__save strong { color: #6FCF97; }

/* The callout's button carries no margin of its own; the copy above it needs
   to stop touching it. */
.mg-procallout__save + .wp-block-buttons { margin-top: 24px; }

/* ---- Developer pricing --------------------------------------------------- */
.mg-promo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--sky-deep);
	background: var(--mg-sky-tint);
	border: 1px solid #D7ECF2;
	border-radius: 100px;
	padding: 8px 16px;
	margin: 26px auto 0;
}

.mg-toggle {
	display: inline-flex;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
	padding: 4px;
	gap: 2px;
	margin: 30px auto 44px;
}

.mg-toggle__btn .wp-block-button__link {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
	background-color: transparent;
	border: none;
	border-radius: 100px;
	padding: 9px 22px;
	transition: background-color .2s ease, color .2s ease;
}

.mg-toggle__btn.is-active .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink-2);
	box-shadow: var(--mg-shadow-sm);
}

/* Only one view shows at a time. The teams panel ships with is-hidden in the
   markup, so with JavaScript off the individual plans still show correctly. */
.mg-plans.is-hidden { display: none; }

.mg-plan {
	position: relative;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mg-radius);
	box-shadow: var(--mg-shadow-sm);
	padding: 34px 30px;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.mg-plan.is-popular { border-color: var(--wp--preset--color--sky-deep); box-shadow: 0 26px 54px -30px rgba(46, 143, 176, .5); }

.mg-plan__flag {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--wp--preset--font-family--text);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	background: var(--mg-sky-grad);
	border-radius: 100px;
	padding: 6px 14px;
	white-space: nowrap;
	margin: 0;
}

.mg-plan__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--subhead);
	color: var(--wp--preset--color--ink-2);
	margin: 0 0 4px;
}

.mg-plan__price {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--title);
	line-height: 1.05;
	color: var(--wp--preset--color--ink-2);
	margin: 8px 0 2px;
}

.mg-plan__price span { font-size: var(--wp--preset--font-size--body); font-weight: 600; color: var(--wp--preset--color--text-muted); }

.mg-plan__desc {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 22px;
	min-height: 38px;
}

.mg-plan .mg-checklist { flex: 1; margin-bottom: 26px; }
.mg-plan .wp-block-buttons { width: 100%; }
.mg-plan .wp-block-button { width: 100%; }
.mg-plan .wp-block-button__link { width: 100%; text-align: center; }

.mg-teamscard {
	background: linear-gradient(160deg, #12161C, #0E1216);
	border-radius: var(--mg-radius);
	box-shadow: var(--mg-shadow-code);
	padding: 48px 44px;
	text-align: center;
	color: var(--wp--preset--color--base);
}

.mg-teamscard__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--subhead);
	color: var(--wp--preset--color--base);
	margin: 0 0 12px;
}

.mg-teamscard__copy {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: rgba(242, 245, 247, .72);
	margin: 0 auto 26px;
	max-width: 520px;
}

/* ---- Button variants ---------------------------------------------------- */
.mg-btn-primary.is-sky .wp-block-button__link {
	background: var(--mg-sky-grad);
	background-color: var(--wp--preset--color--sky-deep);
	color: var(--wp--preset--color--base);
	box-shadow: 0 12px 28px -12px rgba(46, 143, 176, .7);
}

.mg-btn-primary.is-sky .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(46, 143, 176, .8); }

.mg-btn-ghost.is-light .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink-2);
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--mg-shadow-sm);
}

.mg-btn-ghost.is-light .wp-block-button__link:hover { transform: translateY(-2px); border-color: #CDD5DC; box-shadow: var(--mg-shadow-md); }

.mg-cta-dark.is-sky {
	background:
		radial-gradient(60% 120% at 50% -10%, rgba(116, 195, 213, .2), transparent 60%),
		linear-gradient(165deg, #15191F 0%, #0E1318 100%);
	background-color: var(--wp--preset--color--ink);
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.mg-agenthero { padding: 44px 34px; }
}

@media (max-width: 768px) {
	.mg-pipeline__step { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
	.mg-agenthero__stats .wp-block-column + .wp-block-column .mg-astat { border-left: none; }
	.mg-discord { padding: 26px 22px; }
}

/* .mg-checklist was authored for the dark pilot callout on Institutions: its
   text is near-white and it lays out in two columns. Both are wrong inside a
   white, narrow plan card — the copy rendered invisible. Re-ground it here
   rather than weakening the original. */
.mg-plan .mg-checklist {
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 26px;
}

.mg-plan .mg-checklist li {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-2);
	padding-left: 26px;
}

.mg-plan .mg-checklist li::before {
	width: 16px;
	height: 16px;
	top: 3px;
	background-color: var(--mg-sky-tint);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E8FB0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	background-size: 11px;
}

/* ==========================================================================
   Company — page components
   ========================================================================== */

/* Shorter than the homepage hero, with a left-weighted scrim so the headline
   stays legible over the photo rather than dimming the whole image evenly. */
.mg-hero.is-company {
	min-height: 520px;
	background-position: 50% 30%;
}

.mg-hero.is-company::before {
	background:
		linear-gradient(90deg, rgba(12, 14, 18, .86) 0%, rgba(12, 14, 18, .66) 42%, rgba(12, 14, 18, .34) 100%),
		linear-gradient(180deg, rgba(12, 14, 18, .34) 0%, rgba(12, 14, 18, .10) 45%, rgba(12, 14, 18, .34) 100%);
}

.mg-hero.is-company .mg-hero__title { max-width: 640px; }
.mg-hero.is-company .mg-hero__sub { max-width: 520px; }

/* ---- Founding narrative -------------------------------------------------- */
.mg-narrative {
	max-width: 720px;
	margin: 8px auto 0;
}

.mg-narrative p {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.85;
	color: var(--wp--preset--color--ink-2);
	margin: 0 0 18px;
}

.mg-narrative p:last-child { margin-bottom: 0; }

/* ---- Credibility fact band ---------------------------------------------- */
.mg-facts { gap: 28px; }
.mg-fact { text-align: center; padding: 0 8px; }

.mg-fact__num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--title);
	line-height: 1;
	letter-spacing: .01em;
	color: var(--wp--preset--color--ink-2);
	margin: 0;
}

/* The live PyPI figure takes a trailing accent plus */
.mg-fact__num.has-accent::after { content: "+"; color: var(--wp--preset--color--orange); }

.mg-fact__label {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: .03em;
	color: var(--wp--preset--color--text-muted);
	margin: 12px 0 0;
	line-height: 1.4;
}

.mg-facts .wp-block-column + .wp-block-column .mg-fact {
	border-left: 1px solid var(--wp--preset--color--line);
}

/* ---- Events & community marquee ------------------------------------------ */
.mg-partners.is-slim {
	padding-top: 60px;
	padding-bottom: 60px;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.mg-partners__label {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 30px;
}

/* Wide marks are capped by height; square ones get a taller cap so every logo
   reads at roughly the same optical size instead of the square ones looking tiny. */
.mg-page .mg-partners.is-slim .mg-carousel__track img { max-height: 40px; height: auto; max-width: 210px; width: auto; }
.mg-page .mg-partners.is-slim .mg-carousel__track .is-compact img { max-height: 62px; max-width: 120px; }
.mg-partners.is-slim .mg-carousel__track { gap: 64px; }
.mg-partners.is-slim .mg-carousel__track img { filter: none; opacity: .95; }

/* ---- People -------------------------------------------------------------- */
.mg-people {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 52px;
}

.mg-person {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mg-radius);
	box-shadow: var(--mg-shadow-sm);
	padding: 34px 26px 30px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.mg-person:hover { transform: translateY(-4px); box-shadow: var(--mg-shadow-md); border-color: #E0E3E7; }

.mg-person__avatar { margin: 0 0 18px; }

.mg-page .mg-person__avatar img {
	width: 116px;
	height: 116px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top center;
	border: 3px solid var(--wp--preset--color--base);
	box-shadow: 0 6px 18px -8px rgba(15, 18, 22, .35), 0 0 0 1px var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
}

.mg-person__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lead);
	letter-spacing: .01em;
	color: var(--wp--preset--color--ink-2);
	margin: 0 0 5px;
}

.mg-person__role {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin: 0 0 16px;
}

.mg-person__bio {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.65;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* ---- Newsroom cards ------------------------------------------------------ */
.mg-postgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 52px;
}

.mg-postcard {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mg-radius);
	overflow: hidden;
	box-shadow: var(--mg-shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.mg-postcard:hover { transform: translateY(-5px); box-shadow: var(--mg-shadow-md); border-color: #E0E3E7; }

.mg-postcard__thumb {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--ink-2);
	overflow: hidden;
}

.mg-page .mg-postcard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.mg-postcard:hover .mg-postcard__thumb img { transform: scale(1.04); }

.mg-postcard__thumb.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #171B21, #0F1216);
	text-align: center;
}

.mg-postcard__thumb.is-empty span {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, .85);
	padding: 0 20px;
}

.mg-postcard__body {
	padding: 24px 24px 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.mg-postcard__cat {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin: 0 0 10px;
}

.mg-postcard__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.28;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink-2);
	margin: 0 0 10px;
}

.mg-postcard__ex {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 18px;
}

.mg-postcard__foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mg-postcard__date {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	color: #9AA1AB;
}

.mg-postcard__read {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--orange);
}

.mg-postcard__read::after { content: " \203A"; display: inline-block; transition: transform .2s ease; }
.mg-postcard:hover .mg-postcard__read::after { transform: translateX(3px); }

.mg-postgrid__empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 48px 20px;
	color: var(--wp--preset--color--text-muted);
}

.mg-postgrid__empty a { color: var(--wp--preset--color--teal); font-weight: 600; }

.mg-fineprint.is-centred { margin-left: auto; margin-right: auto; max-width: 900px; margin-top: 40px; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.mg-people,
	.mg-postgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.mg-hero.is-company { min-height: auto; padding-top: 88px; padding-bottom: 64px; }
	.mg-facts .wp-block-column + .wp-block-column .mg-fact { border-left: none; }
}

@media (max-width: 600px) {
	.mg-people,
	.mg-postgrid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Post archives (News, Learn)
   Cards are server-rendered; the script only filters and pages what is here.
   ========================================================================== */

.mg-archive-hero {
	position: relative;
	overflow: hidden;
	padding-top: 96px;
	padding-bottom: 80px;
	text-align: center;
	background-color: var(--wp--preset--color--ink);
}

.mg-archive-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(13, 16, 20, .72) 0%, rgba(13, 16, 20, .90) 100%),
		radial-gradient(55% 60% at 85% -12%, rgba(255, 158, 24, .22), transparent 60%);
	z-index: 1;
}

.mg-archive-hero > * { position: relative; z-index: 2; }
.mg-archive-hero .mg-h1 { color: var(--wp--preset--color--base); letter-spacing: -.02em; line-height: 1.05; }

.mg-archive-hero__sub {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
	color: rgba(242, 245, 247, .78);
	max-width: 620px;
	margin: 0 auto 34px;
}

.mg-searchdark { position: relative; max-width: 560px; margin: 0 auto; }

.mg-searchdark__input {
	width: 100%;
	font-family: var(--wp--preset--font-family--accent);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--base);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 12px;
	padding: 16px 18px 16px 50px;
	outline: none;
	transition: border-color .2s ease, background .2s ease;
}

.mg-searchdark__input::placeholder { color: rgba(255, 255, 255, .5); }
.mg-searchdark__input:focus { border-color: var(--wp--preset--color--sky); background: rgba(255, 255, 255, .09); }

/* Magnifier drawn rather than marked up */
.mg-searchdark::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background-color: rgba(255, 255, 255, .55);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
	z-index: 1;
}

/* ---- Filter chips ------------------------------------------------------- */
.mg-chips.is-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }

.mg-chips.is-filters .mg-chip {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--eyebrow);
	cursor: pointer;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-2);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
	padding: 9px 18px;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.mg-chips.is-filters .mg-chip:hover { border-color: #D6DBE0; }

.mg-chips.is-filters .mg-chip.is-active {
	background: var(--wp--preset--color--ink-2);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--ink-2);
}

.mg-archive__count {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 36px;
}

/* ---- Featured post ------------------------------------------------------ */
.mg-featured {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mg-radius);
	overflow: hidden;
	box-shadow: var(--mg-shadow-md);
	margin-bottom: 48px;
	transition: box-shadow .25s ease, transform .25s ease;
}

.mg-featured:hover { box-shadow: var(--mg-shadow-lg); transform: translateY(-3px); }
.mg-featured.is-filtered-out { display: none; }

.mg-featured__thumb { position: relative; display: block; min-height: 320px; background: var(--wp--preset--color--ink-2); }
.mg-page .mg-featured__thumb img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }

.mg-featured__thumb.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #171B21, #0F1216);
}

.mg-featured__thumb.is-empty span {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, .85);
	padding: 0 20px;
	text-align: center;
}

.mg-featured__body { padding: 44px; display: flex; flex-direction: column; justify-content: center; }

.mg-featured__flag {
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--text);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	background: var(--mg-orange-grad, linear-gradient(135deg, #FF9E18 0%, #F08800 100%));
	border-radius: 100px;
	padding: 6px 14px;
	margin: 0 0 18px;
}

.mg-featured__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--title);
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--ink-2);
	margin: 0 0 14px;
}

.mg-featured__ex {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 22px;
}

.mg-featured__meta {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 22px;
}

.mg-featured .mg-postcard__read { align-self: flex-start; font-size: var(--wp--preset--font-size--small); }

/* ---- Grid, filtering and paging ----------------------------------------- */
.mg-postgrid.is-archive { margin-top: 0; }

/* Paging and filtering are gated on .mg-js: with scripts off every post shows
   and the button that would page them stays hidden, rather than stranding
   posts behind a control that cannot work. */
.mg-js .mg-postcard.is-paged-out,
.mg-js .mg-postcard.is-filtered-out { display: none; }

/* The featured post has a tile so search and the chips can reach it, but the
   hero above is already showing it. Hidden by default -- including with no
   JavaScript, where no filter can ever be active and it would simply read as
   the same post listed twice -- and revealed only when the script un-filters
   it for a search or category match. */
.mg-postcard.is-featured-dupe { display: none; }
.mg-js .mg-postcard.is-featured-dupe:not(.is-filtered-out) { display: flex; }

.mg-loadmore-wrap { display: none; justify-content: center; margin-top: 44px; }
.mg-js .mg-loadmore-wrap { display: flex; }
.mg-js .mg-loadmore-wrap.is-hidden { display: none; }

.mg-loadmore {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink-2);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
	padding: 14px 30px;
	box-shadow: var(--mg-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mg-loadmore:hover { transform: translateY(-2px); box-shadow: var(--mg-shadow-md); border-color: #D6DBE0; }

@media (max-width: 1024px) {
	/* minmax(0, 1fr), not 1fr: a bare fr track has an implicit auto minimum equal
	   to its content's min-content width, so a long headline made the track
	   391px inside a 358px card and the surplus was clipped by the card's
	   overflow: hidden. The text just disappeared off the right on phones. */
	.mg-featured { grid-template-columns: minmax(0, 1fr); }
	.mg-featured__thumb { min-height: 220px; aspect-ratio: 16 / 9; }
	.mg-featured__body { padding: 34px 30px; }
}

@media (max-width: 640px) {
	.mg-archive-hero { padding-top: 64px; padding-bottom: 52px; }
}

/* A has-rule eyebrow is inline-flex, and each section child is a grid item that
   stretches to the track, so text-align never reaches the flex content — it
   packs to the start and the eyebrow sits left of a centred heading. Centring
   an inline-flex box is a justify-content job. */

/* ---- Industry signal (aggregated RSS) ----------------------------------- */
.mg-newsgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 32px;
}

.mg-newscard {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	box-shadow: var(--mg-shadow-sm);
	padding: 22px 22px 20px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mg-newscard:hover { transform: translateY(-4px); box-shadow: var(--mg-shadow-md); border-color: #E0E3E7; }

.mg-newscard__src {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin-bottom: 12px;
}

/* Each masthead keeps its own accent so the sources are scannable */
.mg-newscard.is-coindesk .mg-newscard__src { color: var(--wp--preset--color--orange); }
.mg-newscard.is-theblock .mg-newscard__src { color: var(--wp--preset--color--teal); }
.mg-newscard.is-messari  .mg-newscard__src { color: var(--wp--preset--color--sky); }
.mg-newscard.is-galaxy   .mg-newscard__src { color: var(--wp--preset--color--red); }

.mg-newscard__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink-2);
	margin: 0 0 10px;
}

.mg-newscard__ex {
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 14px;
}

.mg-newscard__meta {
	margin-top: auto;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	color: #9AA1AB;
	display: flex;
	align-items: center;
	gap: 6px;
}

.mg-newscard__ext { margin-left: auto; color: var(--wp--preset--color--text-muted); }
.mg-newscard__ext::after { content: " \2197"; }

.mg-industry .mg-fineprint { margin-top: 24px; max-width: 760px; }

@media (max-width: 1024px) {
	.mg-newsgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.mg-newsgrid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Legal documents (privacy policy, terms)
   Long-form reading: a fixed measure, generous leading, and headings that
   separate clauses clearly enough to scan.
   ========================================================================== */

.mg-legal-hero {
	background-color: var(--wp--preset--color--ink);
	padding-top: 88px;
	padding-bottom: 72px;
}

.mg-legal-hero .mg-h1 { color: var(--wp--preset--color--base); margin-bottom: 12px; }

.mg-legal-hero__date {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--small);
	color: rgba(242, 245, 247, .7);
	margin: 0;
}

/* A fixed reading measure — long-form legal text is unreadable at 1200px.
   Every section is a centred grid track (see "Section content width"), so the
   measure is set by narrowing this section's track. Doing it with auto margins
   on the children does not work: the shorthand margins below reset margin-left
   and margin-right, and they are more specific. */
.mg-legal {
	grid-template-columns: minmax(0, 720px);
}

.mg-legal p {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.85;
	color: var(--wp--preset--color--ink-2);
	margin: 0 0 20px;
}

.mg-legal__intro {
	padding-bottom: 28px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin-bottom: 36px;
}

.mg-legal__h {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--subhead);
	line-height: 1.3;
	letter-spacing: .005em;
	color: var(--wp--preset--color--ink-2);
	margin: 40px 0 14px;
}

.mg-legal__h:first-of-type { margin-top: 0; }

.mg-legal__sub {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--ink-2);
	margin: 26px 0 10px;
}

.mg-legal a {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mg-legal a:hover { color: var(--wp--preset--color--teal-deep); }

@media (max-width: 640px) {
	.mg-legal-hero { padding-top: 64px; padding-bottom: 52px; }
}

/* Statutory notices: the client's own uppercase emphasis. Set slightly smaller
   with looser tracking, because long all-caps runs are hard to read at body
   size, and given a rule so they read as set-apart rather than shouted. */
.mg-legal__notice {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	letter-spacing: .01em;
	color: var(--wp--preset--color--ink-2);
	background: var(--wp--preset--color--surface);
	border-left: 3px solid var(--wp--preset--color--teal);
	border-radius: 0 8px 8px 0;
	padding: 20px 24px;
	margin: 0 0 20px;
}

.mg-legal__list { margin: 0 0 20px; padding-left: 22px; }

.mg-legal__list li {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.8;
	color: var(--wp--preset--color--ink-2);
	margin-bottom: 14px;
}

/* ==========================================================================
   FAQ — page components
   Eighteen questions across four groups. Set as hairline-divided rows rather
   than cards: the four sections already alternate background, and stacked
   cards at this count read as clutter. The alternating band is what separates
   the groups; the rules separate the questions inside one.
   ========================================================================== */

/* A reading column, not a marketing track. Every other section left-anchors
   its copy inside the 1200px track because something else -- cards, a diagram,
   a screenshot -- occupies the rest of the width. A question list has nothing
   to its right, so anchoring left just strands 460px of empty page on one side
   and reads as drift. Narrowing the track instead centres the column, the same
   fix the legal pages use (see .mg-legal).

   The hero takes the same track so its headline shares a left edge with the
   questions below it and the page reads as one column top to bottom. */
.mg-page > .mg-faq,
.mg-page > .mg-hero--dark.is-compact {
	grid-template-columns: minmax(0, 860px);
}

/* The dark hero is 90vh on Institutions because it carries buttons, pills and
   an overlapping stat card. This one carries a headline and a jump list, so it
   sizes to its content instead of holding the questions below the fold. */
.mg-hero--dark.is-compact {
	min-height: 0;
	padding-top: 132px;
	padding-bottom: 84px;
}

/* --------------------------------------------------------------------------
   Jump list — a core/list of anchors, set as pills
   -------------------------------------------------------------------------- */
.mg-jumpnav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mg-jumpnav li { margin: 0; }

.mg-jumpnav a {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--text);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .01em;
	text-decoration: none;
	color: rgba(242, 245, 247, .88);
	background-color: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 100px;
	padding: 9px 18px;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.mg-jumpnav a:hover,
.mg-jumpnav a:focus-visible {
	color: #FFF;
	background-color: rgba(66, 167, 198, .16);
	border-color: rgba(66, 167, 198, .55);
}

/* --------------------------------------------------------------------------
   Question rows
   -------------------------------------------------------------------------- */
.mg-faq__list {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* The flow-gap reset above zeroes sibling margins; the rows butt against each
   other deliberately, separated by their own top rule rather than by space. */
.mg-page .mg-faq__list > * + * { margin-block-start: 0; }

.mg-faq__item {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.mg-faq__item > summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.45;
	letter-spacing: -.005em;
	color: var(--wp--preset--color--text);
	padding: 24px 4px;
	transition: color .2s ease;
}

/* Safari still paints its own disclosure triangle without this. */
.mg-faq__item > summary::-webkit-details-marker { display: none; }

.mg-faq__item > summary:hover { color: var(--wp--preset--color--teal-deep); }

.mg-faq__item > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Plus sign drawn from two bars so it inherits the summary's colour. Opening
   collapses the upright bar to a minus; background-size animates, so the swap
   is a transition rather than a jump. */
.mg-faq__item > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-top: 7px;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-size: 14px 2px, 2px 14px;
	background-position: center, center;
	background-repeat: no-repeat;
	transition: background-size .25s ease;
}

.mg-faq__item[open] > summary { color: var(--wp--preset--color--teal-deep); }
.mg-faq__item[open] > summary::after { background-size: 14px 2px, 2px 0; }

/* Answer body. The rows are flush, so the answer's own bottom padding is what
   holds it off the rule below. */
.mg-faq__item > :not(summary) {
	max-width: 720px;
	margin: 0 0 16px;
}

.mg-faq__item > :last-child { margin-bottom: 26px; }

.mg-faq__item p,
.mg-faq__item li {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.75;
	color: var(--wp--preset--color--ink-2);
}

.mg-faq__item p { margin: 0 0 16px; }
.mg-faq__item ul { margin: 0 0 16px; padding-left: 22px; }
.mg-faq__item li { margin-bottom: 10px; }
.mg-faq__item li::marker { color: var(--wp--preset--color--teal); }
.mg-faq__item strong { color: var(--wp--preset--color--text); font-weight: 600; }

/* Native <details> cannot transition its own height, so the answer fades and
   lifts in instead of appearing instantly. */
.mg-faq__item[open] > :not(summary) {
	animation: mg-faq-reveal .3s ease both;
}

@keyframes mg-faq-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mg-faq__item[open] > :not(summary) { animation: none; }
	.mg-faq__item > summary::after { transition: none; }
}

@media (max-width: 900px) {
	.mg-hero--dark.is-compact { padding-top: 112px; padding-bottom: 64px; }
	.mg-faq__item > summary { gap: 16px; padding: 20px 2px; }
}

/* ==========================================================================
   Pricing — page components
   Four dark tier cards on white, Pro highlighted, then a closing band.

   The Developers page already has a light .mg-plan card. This is a different
   treatment (dark card, orange accent, icon, "Most popular" flag) rather than
   a variant of it, so it gets its own component instead of five overrides.
   ========================================================================== */

.mg-pricing-hero {
	padding-bottom: 40px;
	text-align: center;
}

.mg-pricing-hero__title {
	letter-spacing: -.03em;
	line-height: 1.04;
	max-width: 760px;
	margin-inline: auto;
}

.mg-pricing-hero__sub {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	max-width: 620px;
	margin: 18px auto 0;
}

.mg-tiersection { padding-top: 0; }

/* --------------------------------------------------------------------------
   Tier cards
   -------------------------------------------------------------------------- */
.mg-tiers.wp-block-columns {
	gap: 20px;
	align-items: stretch;
}

.mg-tier.wp-block-column {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink-2);
	border-radius: 20px;
	padding: 34px 26px;
	text-align: center;
}

/* Pro: brighter border and a warm glow so it reads as the recommended tier
   before the flag is even noticed. 1.5px, not 2 — at 2 it looks like a
   selected state rather than emphasis. */
.mg-tier.is-popular {
	border-width: 1.5px;
	border-color: var(--wp--preset--color--orange);
	box-shadow: 0 24px 50px rgba(255, 158, 24, .14);
}

/* Floating pill centred on the card's top edge. */
.mg-tier__flag {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--orange);
	border-radius: 999px;
	padding: 5px 14px;
	margin: 0;
}

.mg-tier__icon {
	margin: 0 0 14px;
	text-align: center;
}

.mg-tier__icon img {
	height: 38px;
	width: auto;
	display: inline-block;
}

.mg-tier__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--base);
	margin: 0 0 4px;
}

.mg-tier__desc {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 18px;
}

/* Price row. The currency mark and the period are inline spans inside the
   paragraph rather than separate blocks, so the baseline is the browser's
   and the three parts cannot drift apart at a different font size. */
.mg-tier__price {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 3px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--orange);
	margin: 0 0 20px;
}

.mg-tier__price.is-custom {
	font-size: var(--wp--preset--font-size--title);
	margin-bottom: 4px;
}

.mg-tier__currency {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	align-self: flex-start;
	margin-top: .35em;
}

.mg-tier__per {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: .35em;
}

.mg-tier__period {
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 20px;
}

.mg-tier__leadin {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--wp--preset--color--base);
	text-align: left;
	margin: 0 0 12px;
}

/* Feature list. flex-grow pushes every card's button to the same baseline
   however many features the tier has. */
.mg-tier__features {
	flex: 1 1 auto;
	list-style: none;
	text-align: left;
	margin: 0 0 26px;
	padding: 0;
}

.mg-tier__features li {
	position: relative;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: var(--wp--preset--color--line);
	padding-left: 20px;
	margin-bottom: 12px;
}

.mg-tier__features li::before {
	content: "●";
	position: absolute;
	left: 0;
	top: 0;
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.5;
	color: var(--wp--preset--color--sky);
}

.mg-tier.is-popular .mg-tier__features li::before { color: var(--wp--preset--color--orange); }

.mg-tier .wp-block-buttons,
.mg-tier .wp-block-button,
.mg-tier .wp-block-button__link { width: 100%; }

/* Plain pill: white on the dark card, for every tier except Pro. */
.mg-btn-plain .wp-block-button__link {
	display: block;
	text-align: center;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 12px 20px;
	transition: background-color .2s ease;
}

.mg-btn-plain .wp-block-button__link:hover,
.mg-btn-plain .wp-block-button__link:focus { background-color: #E9EDED; }

/* The tier CTA is a pill on this page; the shared primary button is a 6px
   rounded rect everywhere else, so the radius is set here rather than
   changed globally. */
.mg-tier .mg-btn-primary .wp-block-button__link {
	border-radius: 999px;
	padding: 12px 20px;
	font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------------------------------
   "Start here" band — the shared dark callout with a teal glow, kept centred
   -------------------------------------------------------------------------- */
.mg-startband { padding-top: 56px; }

.mg-callout--start {
	max-width: 1240px;
	border-radius: 24px;
	padding: 64px 48px;
	background-image:
		radial-gradient(120% 140% at 50% -20%, rgba(54, 145, 173, .35), transparent 60%),
		linear-gradient(165deg, #14181D 0%, #0F1216 100%);
}

/* The shared callout carries a 3px orange accent bar along its top edge. This
   band is a new component from the pricing handoff, which has no bar and a
   teal glow instead — the orange rule fought the glow, so it is dropped here
   rather than added to the design. */

/* Both band buttons are pills in the handoff. The shared primary and ghost
   buttons are 6px rounded rects everywhere else on the site, so the radius is
   overridden inside this band only. */
.mg-callout--start .wp-block-button__link {
	border-radius: 999px;
	padding-left: 30px;
	padding-right: 30px;
}

@media (max-width: 1024px) {
	/* Two up before one up: four 26px-padded cards at tablet width leave the
	   feature text too narrow to read. */
	.mg-tiers.wp-block-columns { flex-wrap: wrap !important; }
	.mg-tiers.wp-block-columns > .wp-block-column { flex-basis: calc(50% - 10px) !important; }
}

@media (max-width: 640px) {
	.mg-tiers.wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
	.mg-callout--start { padding: 48px 24px; }
}

/* ==========================================================================
   Contact — page components
   Dark hero, then the HubSpot card pulled up over its lower edge.
   ========================================================================== */

/* Both sections declare their own track. Every page section is a centred grid
   whose column is minmax(0, 1200px) -- max-content clamped, not a fixed width.
   The form card starts empty (HubSpot injects into it at runtime), so with the
   default track the column had nothing to size against and collapsed to about
   70px wide. A definite track makes the card's width independent of whether
   the embed has loaded. */
.mg-page > .mg-contact-hero { grid-template-columns: minmax(0, 900px); }
.mg-page > .mg-contactsection { grid-template-columns: minmax(0, 760px); }

.mg-contact-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--ink);
	padding-top: 96px;
	padding-bottom: 148px;
	text-align: center;
}

/* Teal wash from the top. The handoff allows a photo layer here at 0.28
   opacity; this is its documented fallback, and the only layer wired up. */
.mg-contact-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(110% 120% at 50% 0%, rgba(54, 145, 173, .42) 0%, rgba(15, 18, 22, .96) 68%);
	z-index: 0;
}

/* Fade to solid at the bottom edge so the card can overlap onto flat colour
   rather than onto the middle of a gradient. */
.mg-contact-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 180px;
	background: linear-gradient(180deg, rgba(15, 18, 22, 0) 0%, var(--wp--preset--color--ink) 82%);
	z-index: 1;
}

.mg-contact-hero > * {
	position: relative;
	z-index: 2;
	max-width: 900px;
	margin-inline: auto;
}

/* A grid item stretches to its track by default, which turned the pill into a
   full-width outline. justify-self keeps it the width of its own text. */

.mg-contact-hero__title {
	color: var(--wp--preset--color--base);
	letter-spacing: -.045em;
	line-height: .94;
	margin: 26px 0 0;
}

/*
 * No accent on the full stop. Every other headline on the site -- "Newsroom.",
 * "Start here.", "Rooted in trust." -- sets its period in the same colour as
 * the words, and the display face draws a square period, so colouring this one
 * orange read as a stray block rather than punctuation.
 */

.mg-contact-hero__sub {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	color: rgba(242, 245, 247, .82);
	max-width: 660px;
	margin: 24px auto 0;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Form card
   -------------------------------------------------------------------------- */
/* The pull belongs on the section, not the card. A negative top margin on a
   grid item shortens its row instead of moving it, so the card stayed put and
   only the section got 72px shorter. Moving it here lifts the whole section
   over the hero's faded edge, which is what the overlap is. */
.mg-contactsection {
	position: relative;
	z-index: 2;
	margin-top: -72px;
	padding-top: 0;
	padding-bottom: 72px;
}

/* The negative margin is what lifts the card over the hero's faded edge. The
   section sits after the hero in the flow, so this is a pull, not a float. */
/* No `auto` side margins: an auto inline margin makes a grid item size to its
   content instead of filling the track, which collapsed the empty card. The
   track above already centres it. */
.mg-contactcard {
	position: relative;
	margin: 0;
	background-color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink-2);
	border-radius: 22px;
	padding: 38px 34px 34px;
}

.mg-contactcard__noscript {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: rgba(242, 245, 247, .82);
	margin: 0;
}

.mg-contactcard__noscript a { color: var(--wp--preset--color--sky); }

.mg-contact-alt {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	margin: 24px 0 0;
}

.mg-contact-alt a {
	color: var(--wp--preset--color--teal-deep);
	font-weight: 600;
	text-decoration: none;
}

.mg-contact-alt a:hover,
.mg-contact-alt a:focus-visible { text-decoration: underline; }

/* --------------------------------------------------------------------------
   HubSpot form, dark skin
   The layout rules under .mg-hsform above are shared with the Institutions
   page. This variant only repaints — anything that is not a colour stays in
   one place, so a change to the form's structure is still a single edit.
   -------------------------------------------------------------------------- */
.mg-hsform--dark { max-width: none; min-height: 420px; }

.mg-hsform--dark .hs-form .hs-form-field > label { color: var(--wp--preset--color--base); }
.mg-hsform--dark .hs-form .hs-form-required { color: var(--wp--preset--color--red); }

.mg-hsform--dark .hs-form .hs-input {
	color: var(--wp--preset--color--base);
	background-color: #16181A;
	border-color: #2A2E30;
}

.mg-hsform--dark .hs-form .hs-input::placeholder { color: var(--wp--preset--color--text-muted); }
.mg-hsform--dark .hs-form .hs-input:hover { border-color: #3A3F42; }

.mg-hsform--dark .hs-form .hs-input:focus,
.mg-hsform--dark .hs-form .hs-input:focus-visible {
	border-color: var(--wp--preset--color--teal);
	box-shadow: 0 0 0 3px rgba(66, 167, 198, .18);
}

.mg-hsform--dark .hs-form textarea.hs-input { min-height: 110px; }

/* HubSpot renders the select's chevron from this background image; the light
   grey stroke disappears on the dark input, so it is redrawn lighter. */
.mg-hsform--dark .hs-form select.hs-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A9090' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.mg-hsform--dark .hs-form .hs-form-booleancheckbox-display,
.mg-hsform--dark .hs-form .hs-form-checkbox-display,
.mg-hsform--dark .hs-form .hs-form-radio-display { color: rgba(242, 245, 247, .82); }

.mg-hsform--dark .hs-form .legal-consent-container,
.mg-hsform--dark .hs-form .hs-richtext { color: var(--wp--preset--color--text-muted); }

.mg-hsform--dark .hs-form .legal-consent-container a,
.mg-hsform--dark .hs-form .hs-richtext a { color: var(--wp--preset--color--sky); }

/* The shared submit is the teal brand gradient, which is right on the
   Institutions page. This handoff calls for the orange CTA, and orange is what
   every other primary action on the pricing and contact pages uses. */
.mg-hsform--dark .hs-form .hs-button {
	width: 100%;
	background: var(--wp--preset--gradient--orange-cta);
	color: var(--wp--preset--color--ink);
	border-radius: 999px;
	padding-top: 14px;
	padding-bottom: 14px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	box-shadow: 0 10px 28px -12px rgba(255, 158, 24, .65);
}

.mg-hsform--dark .hs-form .hs-button:hover { box-shadow: 0 16px 34px -12px rgba(255, 158, 24, .7); }
.mg-hsform--dark .hs-form .hs-button:focus-visible { outline-color: var(--wp--preset--color--orange); }

@media (max-width: 640px) {
	.mg-contact-hero { padding-top: 72px; padding-bottom: 120px; }
	.mg-contactcard { padding: 26px 20px 24px; }
	/* HubSpot stacks its own two-column rows below 480px; these designs are
	   narrow enough that they need to stack sooner. */
	.mg-hsform--dark .hs-form fieldset.form-columns-2 .hs-form-field,
	.mg-hsform--dark .hs-form fieldset.form-columns-3 .hs-form-field { flex-basis: 100%; }
}

/* ==========================================================================
   Single post — Learn / blog
   Design handoff "Mangrove Blog Post", 2026-08-25. The article is one grid
   (content + sticky sidebar) inside the standard page track.
   ========================================================================== */

/* The marketing pages put every top-level section into a centred 1200px grid
   (`.mg-page > *`). The sections here carry their own 1240px inner measure, so
   that track double-constrained them and left the article sitting ~130px right
   of the logo above it. Opt out, and match the header's measure exactly --
   1240px with a 32px gutter -- so the back link starts on the same vertical
   line as the logo. */
.mg-page.mg-single,
.mg-page.mg-single > * {
	display: block;
	grid-template-columns: none;
}

.mg-single .mg-postband__inner,
.mg-single .mg-postgrid-wrap,
.mg-single .mg-keepreading__inner,
.mg-single .mg-newsband {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 32px;
}

/* ---- Tinted header band -------------------------------------------------- */
.mg-postband {
	background: linear-gradient(180deg, #EFF7F8 0%, #FDFEFE 100%);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.mg-postband__inner {
	padding-block: 48px;
}

.mg-postband__back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}

.mg-postband__back:hover { color: var(--wp--preset--color--ink); }

.mg-postband__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.mg-postband__date {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--caption);
	color: #8A9090;
}

.mg-postband__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -.03em;
	max-width: 900px;
	text-wrap: balance;
	margin: 18px 0 0;
}

.mg-postband__dek {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted);
	max-width: 760px;
	text-wrap: pretty;
	margin: 16px 0 0;
}

/* ---- Category pill ------------------------------------------------------- */
.mg-pill {
	display: inline-block;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 6px 14px;
	white-space: nowrap;
}

.mg-pill.is-teal  { color: var(--wp--preset--color--teal-deep); background: rgba(66, 176, 203, .16); }
.mg-pill.is-amber { color: #A85B00; background: rgba(255, 153, 47, .16); }
.mg-pill.is-sand  { color: var(--wp--preset--color--ink); background: #EDE8D9; }

/* ---- Byline -------------------------------------------------------------- */
.mg-byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; }

.mg-byline__mark {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--sky);
}

.mg-byline__who { display: flex; flex-direction: column; gap: 2px; }

.mg-byline__name {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.mg-byline__role {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	color: #8A9090;
}

/* ---- Article layout ------------------------------------------------------ */
.mg-postgrid-wrap {
	padding-block: 48px 0;
}

.mg-postlayout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 56px;
	align-items: start;
}

/* ---- Article body -------------------------------------------------------- */
.mg-postbody { min-width: 0; }

.mg-postbody > * { margin-block: 0 30px; }
.mg-postbody > *:last-child { margin-bottom: 0; }

.mg-postbody p {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	color: #14261E;
}

.mg-postbody h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--title-sm);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	margin-block: 40px 14px;
	/* The sidebar table of contents links here; keep the heading clear of the
	   sticky header when it does. */
	scroll-margin-top: 120px;
}

.mg-postbody h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin-block: 30px 10px;
}

.mg-postbody ul,
.mg-postbody ol { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }

.mg-postbody li {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: #14261E;
}

.mg-postbody a:not(.wp-element-button) { color: var(--wp--preset--color--teal-deep); }

.mg-postbody img,
.mg-postbody .wp-block-image img {
	border-radius: 18px;
	height: auto;
}

.mg-postbody .wp-block-image,
.mg-postbody .mg-postfigure { margin: 0 0 30px; }

.mg-postfigure img {
	display: block;
	width: 100%;
	max-height: 360px;
	object-fit: cover;
	border-radius: 18px;
}

/* ---- Key takeaways ------------------------------------------------------- */
.mg-takeaways {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 28px;
	background: var(--wp--preset--color--ink);
	border-radius: 16px;
}

/* Scoped to .mg-postbody deliberately: the generic `.mg-postbody p` and
   `.mg-postbody li` rules set dark article colours, and an unscoped component
   rule loses the specificity tie -- which painted this card's text dark on a
   near-black background. */
.mg-postbody .mg-takeaways__head {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sky);
	margin: 0;
}

.mg-takeaways__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.mg-postbody .mg-takeaways__item { display: flex; gap: 12px; align-items: flex-start; font-size: var(--wp--preset--font-size--body-sm); line-height: 1.55; color: #E9EDED; }

.mg-postbody .mg-takeaways__n { color: var(--wp--preset--color--orange); font-weight: 800; font-size: var(--wp--preset--font-size--caption); flex: none; }

/* ---- Pull quote ---------------------------------------------------------- */
.mg-pullquote {
	margin: 0;
	padding: 26px 30px;
	border-left: 3px solid var(--wp--preset--color--orange);
	background: var(--wp--preset--color--surface);
	border-radius: 0 14px 14px 0;
}

.mg-postbody .mg-pullquote p {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

/* ---- Topic chips and disclaimer ------------------------------------------ */
.mg-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.mg-topic {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 6px 13px;
	text-decoration: none;
}

.mg-topic:hover { border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }

.mg-postbody .mg-postdisclaimer {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.65;
	color: var(--wp--preset--color--text-muted);
	font-style: italic;
}

/* ---- Sidebar ------------------------------------------------------------- */
.mg-postside {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mg-postside__block { display: flex; flex-direction: column; gap: 10px; }
.mg-postside__block.has-rule { padding-top: 20px; border-top: 1px solid var(--wp--preset--color--line); }

.mg-postside__head {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8A9090;
	margin: 0;
}

.mg-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.mg-toc a {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--teal-deep);
	text-decoration: none;
}

.mg-toc a:hover { text-decoration: underline; }

.mg-share { display: flex; gap: 8px; }

.mg-share__btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.mg-share__btn:hover { border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }

.mg-sidecta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	background: var(--wp--preset--color--ink);
	border-radius: 16px;
}

.mg-sidecta__head {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
	margin: 0;
}

.mg-sidecta__body {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: #8A9090;
	margin: 0;
}

.mg-sidecta__btn {
	margin-top: 6px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: var(--wp--preset--color--orange);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	padding: 12px 0;
	border-radius: 999px;
	transition: background-color .15s ease;
}

.mg-sidecta__btn:hover { background: #FF7A1C; }

/* ---- Newsletter band ----------------------------------------------------- */
.mg-newsband { margin-block: 72px 0; }

.mg-newsband__inner {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
	border-radius: 22px;
	padding: 48px 44px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: center;
}

.mg-newsband__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(90% 130% at 100% 0%, rgba(27, 127, 148, .32) 0%, rgba(12, 13, 12, 0) 60%);
	pointer-events: none;
}

.mg-newsband__copy { position: relative; display: flex; flex-direction: column; gap: 8px; }

.mg-newsband__kicker {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sky);
	margin: 0;
}

.mg-newsband__head {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: #fff;
	margin: 0;
}

.mg-newsband__sub {
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.5;
	color: #8A9090;
	margin: 0;
}

.mg-newsband .mg-hsform { position: relative; }

/* ---- Keep reading -------------------------------------------------------- */
.mg-keepreading {
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: 72px;
	background: var(--wp--preset--color--surface);
}

.mg-keepreading__inner { padding-block: 64px 88px; }

.mg-keepreading__head {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0 0 32px;
}

.mg-readgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.mg-readcard {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	overflow: hidden;
	transition: border-color .15s ease;
}

.mg-readcard:hover { border-color: var(--wp--preset--color--teal); }

.mg-readcard__media { position: relative; display: block; height: 230px; overflow: hidden; }

.mg-readcard__media > img,
.mg-readcard__media-empty {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mg-readcard__media-empty { background: linear-gradient(160deg, #1B2027 0%, #0F1216 100%); }

.mg-readcard__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(200deg, rgba(12, 13, 12, 0) 0%, rgba(12, 13, 12, .25) 45%, rgba(12, 13, 12, .86) 100%);
}

.mg-readcard__over {
	position: absolute;
	inset: 0;
	pointer-events: none;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 8px;
}

.mg-readcard__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.015em;
	color: #fff;
}

/* Scoped past `.mg-readcard__media > img` above, which would otherwise size
   this overlaid logo as if it were the card's cover art. */
.mg-readcard__over .mg-readcard__logo {
	height: 15px;
	width: auto;
	margin-top: 2px;
}

.mg-readcard__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.mg-readcard__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

.mg-readcard__meta .mg-pill { font-size: var(--wp--preset--font-size--micro); padding: 5px 11px; letter-spacing: .1em; }

.mg-readcard__time { font-family: var(--wp--preset--font-family--text); font-size: var(--wp--preset--font-size--label); color: #8A9090; }

.mg-readcard__ex { font-size: var(--wp--preset--font-size--caption); line-height: 1.55; color: var(--wp--preset--color--text-muted); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.mg-postlayout { grid-template-columns: minmax(0, 1fr); gap: 40px; }

	/* Below the article the sidebar has nothing to stick to. */
	.mg-postside { position: static; }

	.mg-readgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mg-newsband__inner { grid-template-columns: minmax(0, 1fr); padding: 40px 32px; }
}

@media (max-width: 768px) {
	.mg-postband__inner { padding: 32px var(--mg-gutter); }
	.mg-postgrid-wrap { padding-top: 32px; }
	.mg-readgrid { grid-template-columns: minmax(0, 1fr); }
	.mg-keepreading__inner { padding: 48px var(--mg-gutter) 64px; }
	.mg-newsband__inner { padding: 32px 24px; }
}

/* --------------------------------------------------------------------------
   Newsletter form (single post band)

   HubSpot injects its own markup, so these override its defaults rather than
   describing our own. The design puts the field and the button on one line as
   pills; below 620px they stack, which HubSpot's own layout does not do.
   -------------------------------------------------------------------------- */
/* The base .mg-hsform is sized for the multi-field contact form: a 640px
   measure, centred, with a min-height that reserves space while the embed
   loads. This one is a single line inside a grid cell and needs neither. */
.mg-hsform--news {
	position: relative;
	max-width: none;
	margin: 0;
	min-height: 0;
	font-family: var(--wp--preset--font-family--text);
}

.mg-hsform--news .hs-form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

.mg-hsform--news .hs-form fieldset,
.mg-hsform--news .hs-form fieldset.form-columns-1 {
	flex: 1 1 220px;
	min-width: 0;
	max-width: none;
	margin: 0;
}

.mg-hsform--news .hs-form .hs-form-field {
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
}

/*
 * The label is redundant next to a placeholder in a single-field form, but it
 * has to stay in the document for screen readers, so it is hidden visually
 * rather than removed.
 *
 * Two selectors because HubSpot has two markups in the wild and which one you
 * get depends on which editor the form was built in. Legacy forms render
 * .hs-form > .hs-form-field > label; forms built in the newer editor render
 * hsfc-prefixed classes instead and match none of the .hs-form rules on this
 * page -- which is how a black "Email *" ended up sitting on the dark band
 * while the rest of the form looked styled.
 *
 * This assumes the newsletter form stays a single email field, which is what
 * the band's own copy promises. If a consent checkbox is ever added to it,
 * exclude that field here or its label disappears with the rest.
 */
.mg-hsform--news .hs-form .hs-form-field > label,
.mg-hsform--news .hsfc-FieldLabel,
.mg-hsform--news .hsfc-Form label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Belt and braces. If HubSpot ships a third markup tomorrow and something does
 * render, it renders legible on the dark band rather than in the near-black
 * the light-section form uses.
 */
.mg-hsform--news label,
.mg-hsform--news legend,
.mg-hsform--news .hsfc-FieldLabel { color: rgba(255, 255, 255, .72); }

.mg-hsform--news .hs-form .hs-input {
	box-sizing: border-box;
	width: 100%;
	background: #16181A;
	border: 1px solid #2A2E30;
	border-radius: 999px;
	padding: 14px 20px;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--body-sm);
	color: #fff;
	outline: none;
}

.mg-hsform--news .hs-form .hs-input::placeholder { color: #8A9090; }

.mg-hsform--news .hs-form .hs-input:focus, .mg-hsform--news .hs-form .hs-input:focus-visible { border-color: var(--wp--preset--color--teal); }

.mg-hsform--news .hs-form .hs-submit { flex: 0 0 auto; margin: 0; }

.mg-hsform--news .hs-form .hs-submit .actions { margin: 0; padding: 0; }

.mg-hsform--news .hs-form .hs-button {
	background: var(--wp--preset--color--orange);
	background-image: none;
	border: 0;
	border-radius: 999px;
	padding: 14px 26px;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease;
}

.mg-hsform--news .hs-form .hs-button:hover { background: #FF7A1C; }

/* Validation and confirmation text sits on the dark panel, so it cannot keep
   HubSpot's default near-black. */
.mg-hsform--news .hs-form .hs-error-msg, .mg-hsform--news .hs-form .hs-error-msgs label {
	flex: 1 0 100%;
	font-size: var(--wp--preset--font-size--label);
	color: #FF8A6B;
	margin: 0;
}

.mg-hsform--news .submitted-message, .mg-hsform--news .hs-form .hs-richtext {
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.55;
	color: #E9EDED;
	margin: 0;
}

@media (max-width: 620px) {
	.mg-hsform--news .hs-form { flex-direction: column; }
	.mg-hsform--news .hs-form .hs-submit,
	.mg-hsform--news .hs-form .hs-button { width: 100%; }
}

/* --------------------------------------------------------------------------
   Pricing — feature comparison table
   -------------------------------------------------------------------------- */
.mg-comparesection .mg-copy-block { margin-bottom: 40px; }

/* The table is wider than a phone. It scrolls inside this wrapper rather than
   letting the page scroll sideways, and is focusable so a keyboard can reach
   the overflow without a pointer. */
.mg-comparewrap {
	/* `width: 100%` is doing real work: auto margins cancel a grid item's
	   stretch, so with width left auto this box shrink-wrapped the 680px table
	   and pushed the page sideways on a phone instead of scrolling inside
	   itself. A definite width makes the max-width and the auto margins behave. */
	width: 100%;
	max-width: 1000px;
	margin-inline: auto;
	min-width: 0;
	overflow-x: auto;
	/* `overflow-x: auto` alone was not enough: the table's layout overflow
	   still reached the root scrollport, so the whole page scrolled sideways
	   on a phone even though the table was scrolling correctly inside here.
	   Paint containment stops that at this box. It does not affect the sticky
	   feature column, which sticks to this scrollport either way. */
	contain: paint;
	-webkit-overflow-scrolling: touch;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--mg-radius);
}

.mg-comparewrap:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
}

.mg-compare {
	width: 100%;
	min-width: 680px;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--text);
}

.mg-compare th,
.mg-compare td {
	padding: 16px 20px;
	text-align: center;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: middle;
}

.mg-compare tbody tr:last-child th,
.mg-compare tbody tr:last-child td { border-bottom: 0; }

/* The feature name anchors each row, so it stays left and stays put while the
   plan columns scroll under it. */
.mg-compare thead th:first-child,
.mg-compare tbody th {
	position: sticky;
	left: 0;
	z-index: 1;
	text-align: left;
	background: var(--wp--preset--color--base);
}

.mg-compare thead th {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	padding-block: 20px;
}

.mg-compare tbody th {
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.mg-compare td {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
}

/* Highlight the recommended plan the way the cards above do. */
.mg-compare thead th:nth-child(4),
.mg-compare tbody td:nth-child(4) { background: rgba(66, 167, 198, .06); }

.mg-compare thead th:nth-child(4) { color: var(--wp--preset--color--teal-deep); }

/* Tick and cross drawn in CSS: two glyphs repeated 68 times would be markup
   noise, and the shapes need to carry meaning without relying on a font. */
.mg-compare__mark {
	display: inline-block;
	vertical-align: middle;
}

.mg-compare__mark.is-yes {
	width: 16px;
	height: 9px;
	border-left: 2.5px solid var(--wp--preset--color--teal-deep);
	border-bottom: 2.5px solid var(--wp--preset--color--teal-deep);
	border-radius: 1px;
	transform: rotate(-45deg) translate(1px, -2px);
}

.mg-compare__mark.is-no {
	position: relative;
	width: 13px;
	height: 13px;
}

.mg-compare__mark.is-no::before,
.mg-compare__mark.is-no::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: #C3CBD3;
}

.mg-compare__mark.is-no::before { transform: rotate(45deg); }
.mg-compare__mark.is-no::after { transform: rotate(-45deg); }

@media (max-width: 768px) {
	.mg-compare th,
	.mg-compare td { padding: 14px 16px; }
	.mg-compare tbody th { font-size: var(--wp--preset--font-size--caption); }
}

/* --------------------------------------------------------------------------
   Pricing — billing cadence toggle
   -------------------------------------------------------------------------- */
/* The cards set their own display on these, which beats the UA stylesheet's
   [hidden] rule -- so both cadences painted at once while the DOM property
   said otherwise. */
.mg-tier__price[hidden],
.mg-tier__period[hidden] { display: none; }

.mg-cadence {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	margin: 0 auto 40px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	justify-self: center;
}

.mg-cadence__opt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--text-muted);
	background: none;
	border: 0;
	border-radius: 999px;
	padding: 11px 20px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.mg-cadence__opt:hover { color: var(--wp--preset--color--ink); }

.mg-cadence__opt.is-on {
	background: var(--wp--preset--color--ink);
	color: #fff;
}

.mg-cadence__opt:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
}

.mg-cadence__save {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-deep);
	background: rgba(66, 167, 198, .16);
	border-radius: 999px;
	padding: 4px 9px;
}

.mg-cadence__opt.is-on .mg-cadence__save {
	color: var(--wp--preset--color--sky);
	background: rgba(255, 255, 255, .12);
}

/* An unavailable line on a plan card: listed, so the reader sees the limit
   that decides the upgrade, but marked with a cross instead of the bullet so
   it cannot be mistaken for something included. */
.mg-tier__features li.is-no { color: rgba(242, 245, 247, .5); }

.mg-tier__features li.is-no::before,
.mg-tier.is-popular .mg-tier__features li.is-no::before {
	content: "\00d7";
	font-size: var(--wp--preset--font-size--caption);
	color: rgba(242, 245, 247, .45);
}

/* --------------------------------------------------------------------------
   Pricing — commercial fine print under the tier cards
   -------------------------------------------------------------------------- */
.mg-fineprint-block {
	margin-top: 40px;
	text-align: center;
}

.mg-guarantee {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0 0 10px;
}

.mg-finelist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 18px;
}

.mg-finelist li {
	position: relative;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--text-muted);
}

/* Separators drawn between items rather than typed into the copy, so a screen
   reader reads three plain items and the dots vanish when the row wraps. */
.mg-finelist li + li::before {
	content: "";
	position: absolute;
	left: -11px;
	top: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .6;
	transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   News single: article, event and press release
   Built from design_handoff_news_templates (review 3). The three share one
   shell and differ in body structure and sidebar, so almost everything here is
   shared and the layout classes on .mg-newsitem carry the differences.
   -------------------------------------------------------------------------- */
.mg-news .mg-newsitem {
	display: block;
	max-width: 1240px;
	margin-inline: auto;
	padding: 48px 32px 0;
}

.mg-newsback {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	color: #5C6363;
	text-decoration: none;
}

.mg-newsback:hover { color: var(--wp--preset--color--ink); }

.mg-newsmeta { display: flex; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.mg-newsmeta__date { font-size: var(--wp--preset--font-size--label); color: #8A9090; }

/* Inline background/colour come from the news_type map in inc/news.php, so a
   new term is styled from data rather than needing a rule added here. */
.mg-newspill {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
}

.mg-newsitem__title {
	margin: 18px 0 0;
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.06;
	max-width: 900px;
	text-wrap: balance;
}

.mg-newsitem__dek {
	margin: 16px 0 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: #5C6363;
	max-width: 740px;
	text-wrap: pretty;
}

.mg-newsgrid-2 {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 56px;
	margin-top: 40px;
	align-items: start;
}

.mg-newsbody { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.mg-newsbody > * { margin: 0; }
.mg-newsbody h2 { font-size: var(--wp--preset--font-size--title-sm); font-weight: 700; letter-spacing: -.02em; }
.mg-newsbody p { font-size: var(--wp--preset--font-size--body); line-height: 1.7; color: #14261E; }
.mg-newsbody ul { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.mg-newsbody li { font-size: var(--wp--preset--font-size--body); line-height: 1.6; color: #14261E; }
/* Core buttons carry their own colours from theme.json. Without the :not()
   these descendant rules outrank them (0,1,1 beats the 0,1,0 of
   .wp-element-button), painting the label orange on an orange button. */
.mg-newsbody a:not(.wp-element-button) { color: var(--wp--preset--color--orange); font-weight: 600; text-decoration: none; }
.mg-newsbody a:not(.wp-element-button):hover { text-decoration: underline; }

.mg-newsembed { border-radius: 18px; overflow: hidden; }
.mg-newsembed img,
.mg-newsembed iframe { display: block; width: 100%; height: auto; }
.mg-newsembed iframe { aspect-ratio: 16 / 9; height: auto; }

/* Event hero: image with the badge, event name and logo laid over it. */
.mg-newshero { position: relative; height: 400px; border-radius: 18px; overflow: hidden; }
.mg-newshero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mg-newshero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(200deg, rgba(12,13,12,0) 0%, rgba(12,13,12,.2) 50%, rgba(12,13,12,.8) 100%);
}

.mg-newshero__over {
	position: absolute;
	inset: 0;
	pointer-events: none;
	padding: 28px 32px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 10px;
}

.mg-newshero__badge {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--orange);
	padding: 6px 13px;
	border-radius: 999px;
}

.mg-newshero__name {
	font-size: var(--wp--preset--font-size--title-sm);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.02em;
	color: #fff;
	width: 100%;
}

.mg-newshero__logo { height: 18px; width: auto; margin-top: 4px; }

/* Speaker card: the person comes from a team_member relationship. */
.mg-speaker {
	display: flex;
	gap: 20px;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
	align-items: center;
}

.mg-speaker__shot { width: 84px; height: 84px; flex: none; border-radius: 50%; object-fit: cover; }
.mg-speaker__body { display: flex; flex-direction: column; gap: 4px; }
.mg-speaker__name { font-size: var(--wp--preset--font-size--subhead); font-weight: 700; color: var(--wp--preset--color--ink); }
.mg-speaker__bio { font-size: var(--wp--preset--font-size--caption); line-height: 1.5; color: #5C6363; }

/* Press release: quote block, boilerplate, end mark. */
.mg-newsquote {
	margin: 0;
	padding: 22px 26px;
	background: #F7F9F9;
	border-left: 3px solid var(--wp--preset--color--orange);
	border-radius: 0 14px 14px 0;
}

.mg-newsquote p { font-size: var(--wp--preset--font-size--lead); font-weight: 500; line-height: 1.55; }
.mg-newsquote cite { display: block; margin-top: 10px; font-size: var(--wp--preset--font-size--label); font-weight: 600; font-style: normal; color: #5C6363; }
.mg-newsboiler h2 { font-size: var(--wp--preset--font-size--subhead); font-weight: 700; margin-bottom: 8px; }
.mg-newsboiler p { font-size: var(--wp--preset--font-size--caption); line-height: 1.7; color: #5C6363; }
.mg-newsend { text-align: center; font-size: var(--wp--preset--font-size--caption); color: #8A9090; letter-spacing: .3em; }

/* Sidebar */
.mg-newsside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mg-newssummary { margin: 0; font-size: var(--wp--preset--font-size--caption); line-height: 1.6; color: #5C6363; }

.mg-newscard {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	background: #F7F9F9;
	border-radius: 16px;
}

.mg-newscard.is-dark { background: var(--wp--preset--color--ink); }

.mg-newscard__label {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8A9090;
}

.mg-newscard.is-dark .mg-newscard__label { color: #6ECEDA; }

.mg-newsdetail { display: flex; flex-direction: column; gap: 3px; }
.mg-newsdetail__k { font-size: var(--wp--preset--font-size--micro); color: #8A9090; }
.mg-newsdetail__v { font-size: var(--wp--preset--font-size--label); font-weight: 600; color: var(--wp--preset--color--ink); text-decoration: none; word-break: break-word; }
.mg-newscard.is-dark .mg-newsdetail__v { color: #fff; }
a.mg-newsdetail__v:hover { color: var(--wp--preset--color--teal-deep); }

.mg-newscta {
	margin-top: 8px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: var(--wp--preset--color--orange);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	padding: 13px 0;
	border-radius: 999px;
}

.mg-newscta:hover { background: #FF7A1C; }

.mg-newscta.is-ghost {
	margin-top: 0;
	background: none;
	font-weight: 600;
	padding: 12px 0;
	border: 1px solid rgba(255, 255, 255, .28);
}

.mg-newscta.is-ghost:hover { border-color: #6ECEDA; background: none; }

.mg-newsshare { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; }
.mg-newsshare__row { display: flex; gap: 8px; }

.mg-newsshare__btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	border: 1px solid var(--wp--preset--color--line);
	color: #5C6363;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
}

.mg-newsshare__btn:hover { border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }

/* The handoff's single breakpoint: the sidebar drops below the body. */
@media (max-width: 900px) {
	.mg-newsgrid-2 { grid-template-columns: 1fr; gap: 36px; }
	.mg-newsside { position: static; }
	.mg-news .mg-newsitem { padding-inline: var(--mg-gutter, 24px); }
	.mg-newshero { height: 280px; }
}


/* --------------------------------------------------------------------------
   Newsroom index
   A masthead rather than a hero, a family filter bar, then a uniform card
   grid. Uniform is the point: the grid takes twelve items or twelve hundred
   without changing shape, and the featured item leads by being a wider cell in
   the same grid rather than a layout of its own. The earlier lead-plus-ledger
   arrangement is gone -- see mangrove_render_news_index() for why.

   The cards are .mg-newsitem and not .mg-newscard because that name is already
   spoken for twice: the industry RSS tiles above, and the detail card in the
   news single sidebar. Both are live, and both would have leaked their padding
   and background into this grid.
   -------------------------------------------------------------------------- */

.mg-newsmast {
	padding-top: 72px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.mg-newsmast__title { margin: 0; letter-spacing: -.02em; line-height: 1.05; }

.mg-newsmast__sub {
	margin: 12px 0 0;
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--body);
	color: #5C6363;
}

.mg-newsroom { display: flex; flex-direction: column; gap: 40px; }

/* ---- Filter bar ---- */

.mg-newsfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mg-newschip {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.2;
	color: #5C6363;
	text-decoration: none;
	background: #fff;
	transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.mg-newschip:hover {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.mg-newschip.is-active {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: #fff;
}

/* ---- Card grid ---- */

.mg-newsgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 44px 28px;
}

.mg-newsitem {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.mg-newsitem__media {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, var(--wp--preset--color--ink-2), #16302B);
}

.mg-newsitem__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.mg-newsitem:hover .mg-newsitem__media img { transform: scale(1.03); }

.mg-newsitem__flag {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--wp--preset--color--ink);
	color: #fff;
	font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase;
	letter-spacing: .07em;
}

.mg-newsitem__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.mg-newsitem__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.mg-newsitem__meta time {
	font-size: var(--wp--preset--font-size--micro);
	color: #8A9090;
}

.mg-newsitem__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--title-sm);
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink);
	transition: color .18s ease;
}

.mg-newsitem:hover .mg-newsitem__title { color: var(--wp--preset--color--teal-deep); }

.mg-newsitem__dek {
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.55;
	color: #5C6363;
}

/*
 * The featured item is the same card, two cells wide. Wider rather than
 * differently built: it reads as the lead without a second template to keep in
 * step with this one, and the grid closes up cleanly when nothing is featured.
 */
.mg-newsitem.is-lead { grid-column: span 2; }
.mg-newsitem.is-lead .mg-newsitem__media { aspect-ratio: 21 / 9; }
.mg-newsitem.is-lead .mg-newsitem__title { font-size: var(--wp--preset--font-size--title); }
.mg-newsitem.is-lead .mg-newsitem__dek { font-size: var(--wp--preset--font-size--body); max-width: 60ch; }

.mg-newsempty {
	padding: 48px 0;
	font-size: var(--wp--preset--font-size--body);
	color: #5C6363;
}

/* ---- Pager ---- */

.mg-newspager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.mg-newspager__nums { display: flex; align-items: center; gap: 4px; }

.mg-newspager__num,
.mg-newspager__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--label);
	color: #5C6363;
	text-decoration: none;
	transition: color .18s ease, background .18s ease;
}

.mg-newspager__num {
	min-width: 34px;
	height: 34px;
	border-radius: 4px;
	font-variant-numeric: tabular-nums;
}

.mg-newspager__num:hover,
.mg-newspager__step:hover { color: var(--wp--preset--color--ink); }

.mg-newspager__num.is-active {
	background: var(--wp--preset--color--ink);
	color: #fff;
}

@media (max-width: 1000px) {
	.mg-newsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
	.mg-newsitem.is-lead { grid-column: span 2; }
}

@media (max-width: 640px) {
	.mg-newsmast { padding-top: 48px; }
	.mg-newsgrid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.mg-newsitem.is-lead { grid-column: span 1; }
	.mg-newsitem.is-lead .mg-newsitem__media { aspect-ratio: 16 / 10; }
	.mg-newsfilter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
	.mg-newschip { flex: 0 0 auto; }
	.mg-newspager { gap: 12px; }
}