/*
 * WP Suite MCP / Gutenberg design system.
 *
 * This file is intentionally class-scoped. It can be loaded while legacy
 * Elementor content is still present without restyling those pages. The MCP
 * patterns never carry inline CSS; all visual decisions live here.
 */

/* --------------------------------------------------------------------------
   Shared agent primitives
   -------------------------------------------------------------------------- */

/* Captioned Media Library illustrations materialized by SmartCloud Agent Bridge 0.6.7. */
:is(.wps-agent-page, .wps-post-page, .wps-product-page, .wps-dark-page, .wps-solutions-page) .wp-block-image {
	max-width: 100%;
	margin-block: 32px;
}

:is(.wps-agent-page, .wps-post-page, .wps-product-page, .wps-dark-page, .wps-solutions-page) .wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

:is(.wps-agent-page, .wps-post-page, .wps-product-page, .wps-dark-page, .wps-solutions-page) .wp-block-image figcaption {
	margin: 10px 0 0;
	color: var(--wps-text-muted, var(--wps-agent-muted, currentColor));
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-align: left;
}

/*
 * Explanatory inline media supports nearby prose instead of reading as a new
 * full section. Decorative hero artwork deliberately does not use this class.
 */
:is(.wps-post-media, .wps-explanatory-media) {
	width: 100%;
	max-width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}

.wps-post-media .wp-block-image {
	width: min(640px, 100%);
	max-width: 640px;
	margin: 0 auto !important;
}

.wps-post-media .wp-block-image img {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 0;
}

.wps-explanatory-media {
	--wps-explanatory-media-radius: 24px;
	border-radius: var(--wps-explanatory-media-radius);
}

.wps-explanatory-media .wp-block-image {
	width: 100%;
	max-width: 100%;
	margin: 0 !important;
	border-radius: var(--wps-explanatory-media-radius);
}

.wps-explanatory-media .wp-block-image picture,
.wps-explanatory-media .wp-block-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--wps-explanatory-media-radius);
}

.wps-explanatory-media .wp-block-image img {
	box-sizing: border-box;
	border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

:is(.wps-post-media, .wps-explanatory-media) .wp-block-image[class*="wps-flow-modal-open--"] {
	cursor: pointer;
}

:is(.wps-agent-page, .wps-post-page, .wps-product-page, .wps-dark-page):has(
	+ :is(.wps-agent-page, .wps-post-page, .wps-product-page, .wps-dark-page)
	> :is(.wps-post-media, .wps-explanatory-media)
) > :is(.wps-agent-section, .wps-post-section, .wps-product-section, .wps-dark-section) {
	padding-bottom: 16px;
}

:is(.wps-agent-page, .wps-post-page, .wps-product-page, .wps-dark-page):has(
	> :is(.wps-post-media, .wps-explanatory-media)
) + :is(.wps-agent-page, .wps-post-page, .wps-product-page, .wps-dark-page)
> :is(.wps-agent-section, .wps-post-section, .wps-product-section, .wps-dark-section) {
	padding-top: 16px;
}


.wps-agent-page,
.wps-agent-page *,
.wps-post-page,
.wps-post-page *,
.wps-product-page,
.wps-product-page *,
.wps-dark-page,
.wps-dark-page * {
	box-sizing: border-box;
}

.wps-agent-page,
.wps-post-page,
.wps-product-page,
.wps-dark-page,
.wps-solutions-page {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.wps-agent-section,
.wps-post-section,
.wps-product-section,
.wps-dark-section {
	width: min(1200px, 100%);
	max-width: 1200px;
	margin: 0 auto !important;
	padding: 72px 0;
}

.wps-agent-section.compact,
.wps-post-section.compact,
.wps-product-section.compact,
.wps-dark-section.compact {
	padding-top: 40px;
	padding-bottom: 40px;
}

.wps-agent-kicker,
.wps-post-kicker,
.wps-product-kicker,
.wps-dark-kicker {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin: 0 0 18px !important;
	padding: 7px 12px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.75rem !important;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.wps-agent-grid,
.wps-product-grid,
.wps-dark-grid,
.wps-post-grid {
	display: grid !important;
	gap: 20px;
	width: 100%;
	margin: 28px 0;
}

.wps-agent-grid.two,
.wps-product-grid.two,
.wps-dark-grid.two,
.wps-post-grid.two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wps-agent-grid.three,
.wps-product-grid.three,
.wps-dark-grid.three,
.wps-post-grid.three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wps-agent-grid.four,
.wps-product-grid.four,
.wps-dark-grid.four,
.wps-post-grid.four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wps-agent-card,
.wps-post-card,
.wps-product-card,
.wps-dark-card {
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--wps-agent-line, rgba(15, 23, 42, 0.10));
	border-radius: var(--wps-agent-radius, 20px);
	background: var(--wps-agent-panel, #ffffff);
	box-shadow: var(--wps-agent-shadow, 0 16px 42px rgba(15, 23, 42, 0.06));
}

/*
 * Gutenberg Stack blocks inherit a global block gap. These scoped rules keep
 * related labels and headings together while restoring readable separation
 * before body copy and subsequent content groups.
 */
.wps-dark-section,
.wps-dark-card {
	gap: 0 !important;
}

.wps-dark-section > .wps-dark-label,
.wps-dark-card > .wps-dark-label {
	margin: 0 0 6px !important;
}

.wps-dark-section > .wps-dark-label + :is(h2, h3),
.wps-dark-card > .wps-dark-label + :is(h3, h4) {
	margin-top: 0 !important;
}

.wps-dark-section > :is(h2, h3),
.wps-dark-card > :is(h3, h4) {
	margin-bottom: 0 !important;
}

.wps-dark-section > :is(h2, h3) + :is(.wps-dark-lead, p, ul, ol),
.wps-dark-card > :is(h3, h4) + :is(p, ul, ol) {
	margin-top: 14px !important;
}

.wps-dark-card > :is(p, ul, ol) + :is(p, ul, ol) {
	margin-top: 14px !important;
}

.wps-agent-card > :last-child,
.wps-post-card > :last-child,
.wps-product-card > :last-child,
.wps-dark-card > :last-child {
	margin-bottom: 0;
}

.wps-agent-label,
.wps-post-label,
.wps-product-label,
.wps-dark-label {
	margin: 0 0 8px !important;
	color: var(--wps-agent-accent, #0f8f58) !important;
	font-size: 0.75rem !important;
	font-weight: 850;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.wps-agent-lead,
.wps-post-lead,
.wps-product-lead,
.wps-dark-lead {
	max-width: 820px;
	margin-top: 0;
	font-size: clamp(1.12rem, 1.5vw, 1.35rem) !important;
	line-height: 1.7;
}

.wps-agent-buttons,
.wps-product-buttons,
.wps-dark-buttons,
.wps-post-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.wps-agent-buttons .wp-block-button,
.wps-product-buttons .wp-block-button,
.wps-dark-buttons .wp-block-button,
.wps-post-buttons .wp-block-button {
	flex-grow: 0;
}

.wps-agent-steps {
	counter-reset: wps-agent-step;
	list-style: none !important;
	margin: 28px 0 0 !important;
	padding: 0 !important;
}

.wps-agent-steps > li {
	counter-increment: wps-agent-step;
	position: relative;
	min-height: 48px;
	margin: 0 0 16px !important;
	padding: 12px 18px 12px 64px;
	border: 1px solid var(--wps-agent-line, rgba(15, 23, 42, 0.10));
	border-radius: 16px;
	background: var(--wps-agent-panel, #ffffff);
}

.wps-agent-steps > li::before {
	content: counter(wps-agent-step, decimal-leading-zero);
	position: absolute;
	left: 14px;
	top: 10px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--wps-agent-accent, #0f8f58);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 900;
}

.wps-agent-table {
	overflow-x: auto;
	border: 1px solid var(--wps-agent-line, rgba(15, 23, 42, 0.10));
	border-radius: 20px;
	background: var(--wps-agent-panel, #ffffff);
	box-shadow: var(--wps-agent-shadow, 0 16px 42px rgba(15, 23, 42, 0.06));
}

.wps-agent-table table {
	min-width: 720px;
	margin: 0;
	border-collapse: collapse;
}

.wps-agent-table th,
.wps-agent-table td {
	padding: 16px;
	border: 1px solid var(--wps-agent-line, rgba(15, 23, 42, 0.10));
	vertical-align: top;
}

.wps-agent-table th {
	background: var(--wps-agent-panel-strong, #eef2f7);
	color: var(--wps-agent-heading, #101827);
	font-weight: 800;
	text-align: left;
}

.wps-agent-faq details {
	width: 100%;
	margin: 12px 0;
	padding: 18px 20px;
	border: 1px solid var(--wps-agent-line, rgba(15, 23, 42, 0.10));
	border-radius: 16px;
	background: var(--wps-agent-panel, #ffffff);
}

.wps-agent-faq summary {
	cursor: pointer;
	color: var(--wps-agent-heading, #101827);
	font-weight: 800;
}

.wps-agent-faq details p {
	margin-bottom: 0;
	padding-top: 10px;
}

.wps-agent-quote {
	margin: 28px 0;
	padding: 28px 30px;
	border: 0;
	border-left: 5px solid var(--wps-agent-accent, #0f8f58);
	border-radius: 20px;
	background: var(--wps-agent-panel, #ffffff);
	box-shadow: var(--wps-agent-shadow, 0 16px 42px rgba(15, 23, 42, 0.06));
}

.wps-agent-quote p {
	font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
	font-weight: 650;
	line-height: 1.5;
}

.wps-agent-quote cite {
	font-size: 0.9rem;
	font-style: normal;
}

/* --------------------------------------------------------------------------
   General information pages
   -------------------------------------------------------------------------- */

.wps-agent-page {
	--wps-agent-accent: #0f8f58;
	--wps-agent-accent-2: #2563eb;
	--wps-agent-heading: #101827;
	--wps-agent-copy: #515151;
	--wps-agent-muted: #657084;
	--wps-agent-panel: #ffffff;
	--wps-agent-panel-strong: #eef2f7;
	--wps-agent-line: rgba(15, 23, 42, 0.10);
	--wps-agent-shadow: 0 16px 42px rgba(15, 23, 42, 0.06);
	background: transparent;
	color: var(--wps-agent-copy);
}

.wps-agent-page h1,
.wps-agent-page h2,
.wps-agent-page h3 {
	color: var(--wps-agent-heading) !important;
}

.wps-agent-page .wps-agent-kicker {
	border-color: rgba(15, 143, 88, 0.24);
	background: rgba(15, 143, 88, 0.08);
	color: #0b6b43;
}

.wps-agent-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: min(1200px, 100%);
	margin: 40px auto 0 !important;
	padding: clamp(28px, 5vw, 58px);
	border: 1px solid rgba(15, 143, 88, 0.13);
	border-radius: 28px;
	background:
		radial-gradient(circle at 94% 8%, rgba(37, 99, 235, 0.10), transparent 32%),
		linear-gradient(135deg, rgba(255,255,255,.98), rgba(239, 250, 245, .93));
	box-shadow: var(--wps-agent-shadow);
}

.wps-agent-hero h1 {
	max-width: 900px;
	margin: 0 0 20px;
	font-size: clamp(2.35rem, 4.8vw, 4.4rem) !important;
	font-weight: 850;
	letter-spacing: -0.035em;
	line-height: 1.05;
}

.wps-agent-prose {
	max-width: 820px;
}

.wps-agent-prose p,
.wps-agent-prose li {
	font-size: 1.05rem;
	line-height: 1.8;
}

.wps-agent-cta {
	padding: clamp(26px, 4vw, 40px);
	border-radius: 24px;
	background: linear-gradient(135deg, #0e1625, #0b1f2c 60%, #09321f);
	color: #c7d2df;
}

.wps-agent-cta h2,
.wps-agent-cta h3 {
	color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   CPT styling and legacy page-preview compatibility
   Canonical CPT CSS still wins when the content is stored in its real type.
   -------------------------------------------------------------------------- */

.wps-architecture-page .wps-solutions-section.hero,
.wps-comparison-page .wps-solutions-section.hero,
.wps-case-study-page .wps-solutions-section.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: min(1200px, 100%);
	margin: 40px auto 0 !important;
	padding: 42px;
	border-radius: 28px;
}

.wps-architecture-page .wps-solutions-section.hero {
	background:
		linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
		radial-gradient(circle at 14% 18%, rgba(68,224,149,.22), transparent 30%),
		radial-gradient(circle at 88% 18%, rgba(14,165,233,.18), transparent 28%),
		linear-gradient(135deg, #08111d, #0e1625 58%, #07111b);
	background-size: 32px 32px, 32px 32px, auto, auto, auto;
	box-shadow: 0 24px 70px rgba(15,23,42,.20);
}

.wps-architecture-page .wps-solutions-section.hero h1 {
	color: #ffffff !important;
}

.wps-architecture-page .wps-solutions-section.hero .wps-solutions-lead {
	color: #b9c7d8 !important;
}

.wps-comparison-page .wps-solutions-section.hero {
	border: 1px solid rgba(37,99,235,.13);
	background:
		radial-gradient(circle at 96% 15%, rgba(124,58,237,.11), transparent 32%),
		linear-gradient(135deg, rgba(255,255,255,.97), rgba(238,244,255,.90));
	box-shadow: 0 16px 42px rgba(37,99,235,.075);
}

.wps-case-study-page .wps-solutions-section.hero {
	border: 1px solid rgba(217,119,6,.16);
	background:
		radial-gradient(circle at 95% 8%, rgba(217,119,6,.12), transparent 30%),
		linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,251,235,.92));
	box-shadow: 0 16px 38px rgba(120,72,16,.075);
}

body:has(.wps-architecture-page) {
	--wps-solutions-accent: #0ea5e9;
	--wps-solutions-accent-2: #44e095;
	background: #eef2f7;
}

body:has(.wps-comparison-page) {
	--wps-solutions-accent: #2563eb;
	--wps-solutions-accent-2: #7c3aed;
	background: #f5f7ff;
}

body:has(.wps-case-study-page) {
	--wps-solutions-accent: #d97706;
	--wps-solutions-accent-2: #0f8f58;
	background: #f7f4ef;
}

/*
 * Constrained Gutenberg children are centered by default. On evidence-led
 * Case Study sections that created arbitrary left-edge steps between the
 * eyebrow, heading, lead, diagram, callout, and card grid. Keep their chosen
 * reading widths, but anchor each direct section element to one common rail.
 */
:is(
	body.single-wps_case_study,
	body.post-type-wps_case_study,
	body.wps_case_study-template,
	body.wps_case_study-template-default,
	body:has(.wps-case-study-page)
) :is(.wps-solutions-section, .wps-agent-section) > :where(
	.wps-solutions-eyebrow,
	h2,
	.wps-solutions-lead,
	.wps-solutions-diagram,
	.wps-solutions-note,
	.wps-solutions-answer,
	.wps-solutions-grid,
	.wps-agent-quote,
	.wps-agent-steps,
	.wps-agent-cta
) {
	margin-left: 0 !important;
}

/* --------------------------------------------------------------------------
   Blog post — fifth editorial treatment, intentionally image-free in hero
   -------------------------------------------------------------------------- */

.wps-post-page {
	--wps-agent-accent: #0f8f58;
	--wps-agent-accent-2: #2563eb;
	--wps-agent-heading: #101827;
	--wps-agent-copy: #384152;
	--wps-agent-muted: #657084;
	--wps-agent-panel: #ffffff;
	--wps-agent-panel-strong: #eef5f2;
	--wps-agent-line: rgba(15, 23, 42, 0.10);
	--wps-agent-shadow: 0 16px 44px rgba(15, 23, 42, 0.055);
	background: transparent;
	color: var(--wps-agent-copy);
}

/*
 * A post is assembled from several alignfull pattern roots. Paint the Field
 * Notes artwork once on the body canvas so it cannot restart at every pattern.
 */
body:not(.wp-admin):has(.wps-post-page),
body.editor-styles-wrapper:has(.wps-post-page),
body.block-editor-iframe__body:has(.wps-post-page) {
	--wps-bg:
		radial-gradient(circle at 8% 4%, rgba(15,143,88,.08), transparent 26%),
		radial-gradient(circle at 92% 10%, rgba(37,99,235,.07), transparent 24%),
		#f4f5f9;
}

body:not(.wp-admin):has(.wps-post-page) :is(main, .wpsuite-container, .wp-block-post-content),
body.editor-styles-wrapper:has(.wps-post-page) .is-root-container,
body.block-editor-iframe__body:has(.wps-post-page) .is-root-container {
	background: transparent !important;
}

.wps-post-page h1,
.wps-post-page h2,
.wps-post-page h3 {
	color: var(--wps-agent-heading) !important;
}

.wps-post-hero {
	position: relative;
	overflow: hidden;
	width: min(1120px, 100%);
	margin: 40px auto 0 !important;
	padding: clamp(28px, 5vw, 58px);
	border: 1px solid rgba(15,143,88,.14);
	border-top: 5px solid var(--wps-agent-accent);
	border-radius: 10px 28px 28px 10px;
	background:
		radial-gradient(circle at 96% 8%, rgba(37,99,235,.10), transparent 30%),
		linear-gradient(135deg, #ffffff, #f5fbf8);
	box-shadow: var(--wps-agent-shadow);
}

.wps-post-hero::after {
	content: "FIELD NOTES";
	position: absolute;
	right: 28px;
	bottom: 18px;
	color: rgba(15,143,88,.075);
	font-size: clamp(2.2rem, 7vw, 5.2rem);
	font-weight: 900;
	letter-spacing: -0.07em;
	line-height: .9;
	pointer-events: none;
}

.wps-post-hero > * {
	position: relative;
	z-index: 1;
}

.wps-post-hero h1 {
	max-width: 900px;
	margin: 0 0 20px;
	font-size: clamp(2.35rem, 4.8vw, 4.35rem) !important;
	font-weight: 850;
	letter-spacing: -0.035em;
	line-height: 1.06;
}

.wps-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 24px;
	color: var(--wps-agent-muted);
	font-size: 0.88rem;
	font-weight: 650;
}

.wps-post-meta a {
	color: var(--wps-agent-accent) !important;
}

.wps-post-section {
	max-width: 880px;
}

/*
 * Keep legacy/Text Editor comparison tables on the same rail as article copy.
 * The scroll container owns any intrinsic table overflow so a wide table never
 * increases the page width on narrow screens.
 */
.wps-post-table-section {
	min-width: 0;
}

.wps-post-table-section > :is(h3, h4, h5) {
	align-self: stretch;
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: left !important;
}

.wps-post-table-section > .wp-block-table {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	margin-left: 0 !important;
	margin-right: 0 !important;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
}

.wps-post-table-section > .wp-block-table > table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	box-sizing: border-box;
}

.wps-post-table-section > .wp-block-table :is(th, td) {
	text-align: left;
	overflow-wrap: anywhere;
}

.wps-post-page .wps-hscroll {
	background: #f4f5f9;
}

.wps-post-page .wps-compare th,
.wps-post-page .wps-compare td {
	border-color: var(--wps-agent-line);
	background: #f4f5f9;
	color: var(--wps-agent-copy);
}

.wps-post-page .wps-compare thead th {
	background: #f4f5f9;
	color: var(--wps-agent-heading) !important;
}

.wps-post-section p,
.wps-post-section li {
	font-size: 1.06rem;
	line-height: 1.82;
}

.wps-post-callout {
	padding: 26px 28px;
	border-left: 5px solid var(--wps-agent-accent-2);
	border-radius: 0 20px 20px 0;
	background: #ffffff;
	box-shadow: var(--wps-agent-shadow);
}

.wps-post-cta {
	width: 100%;
	padding: 32px;
	border-radius: 24px;
	background: linear-gradient(135deg, #101827, #0e2432 64%, #0a3a27);
	color: #c8d4e3;
}

.wps-post-cta h2 {
	color: #ffffff !important;
}

/*
 * Saved posts created before the canonical CTA classes were added still use
 * the first Button as primary and the outline Button as secondary. Keep both
 * the legacy and explicit markup on the site's square button component.
 */
.wps-post-cta .wp-block-button .wp-block-button__link {
	min-height: 44px;
	padding: .65rem 1.5rem !important;
	border-radius: 0 !important;
	font-family: var(--wps-font-family) !important;
	font-weight: 500 !important;
	line-height: 1.2;
	text-decoration: none;
	transition: background .3s, border-color .3s, border-radius .3s, box-shadow .3s, transform .3s;
}

.wps-post-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	border: 0 !important;
	background-color: transparent !important;
	background-image: linear-gradient(40deg, var(--wps-color-secondary) 0%, var(--wps-color-gradient-end) 100%) !important;
	color: #ffffff !important;
}

.wps-post-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-image: linear-gradient(40deg, var(--wps-color-gradient-end) 0%, var(--wps-color-secondary) 100%) !important;
	color: #ffffff !important;
	transform: translateY(-10px);
}

.wps-post-cta .wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid rgba(255,255,255,.45) !important;
	background: transparent !important;
	background-image: none !important;
	color: #ffffff !important;
}

.wps-post-cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: rgba(255,255,255,.8) !important;
	background: transparent !important;
	color: #ffffff !important;
	transform: translateY(-10px);
}

/* --------------------------------------------------------------------------
   Product pages — shared structure, slug-specific palette
   -------------------------------------------------------------------------- */

.wps-product-page {
	--wps-product-panel: var(--wps-bg-surface, rgba(255,255,255,.05));
	--wps-product-panel-strong: rgba(255,255,255,.08);
	--wps-product-panel-inset: color-mix(in srgb, var(--wps-product-accent-2) 12%, rgba(0,0,0,.60));
	--wps-product-line: rgba(255,255,255,.11);
	--wps-product-text: var(--wps-text-head, #f3f7ff);
	--wps-product-muted: var(--wps-text-muted, #aebbd0);
	--wps-product-accent: var(--wps-text-headline, #44e095);
	--wps-product-accent-2: var(--wps-text-headline-2, #4480e0);
	--wps-product-accent-3: var(--wps-text-eyebrow, #9cffc3);
	--wps-agent-accent: var(--wps-product-accent);
	--wps-agent-heading: var(--wps-product-text);
	--wps-agent-panel: var(--wps-product-panel);
	--wps-agent-panel-strong: var(--wps-product-panel-strong);
	--wps-agent-line: var(--wps-product-line);
	--wps-agent-shadow: 0 24px 70px rgba(0,0,0,.30);
	background: transparent;
	color: var(--wps-product-text);
}

/*
 * Product palettes are body-level token overrides. The shared body rule in
 * common.css paints --wps-bg; every product pattern remains transparent.
 */
body:not(.wp-admin):has(.wps-product-page),
body.editor-styles-wrapper:has(.wps-product-page),
body.block-editor-iframe__body:has(.wps-product-page) {
	--wps-bg: radial-gradient(circle at 10% 8%, rgba(68,224,149,.18), transparent 28%), radial-gradient(circle at 92% 16%, rgba(68,128,224,.16), transparent 26%), linear-gradient(180deg, #0b0f19, #111929 52%, #0b0f19);
	--wps-bg-surface: rgba(255,255,255,.05);
	--wps-text: #f3f7ff;
	--wps-text-head: #f3f7ff;
	--wps-text-muted: #aebbd0;
	--wps-text-eyebrow: #9cffc3;
	--wps-text-headline: #44e095;
	--wps-text-headline-2: #4480e0;
}

body.page-ai-kit:not(.wp-admin),
body.editor-styles-wrapper.page-ai-kit,
body.block-editor-iframe__body.page-ai-kit {
	--wps-bg: radial-gradient(circle at 10% 8%, rgba(68,224,149,.18), transparent 28%), radial-gradient(circle at 92% 16%, rgba(68,128,224,.16), transparent 26%), linear-gradient(180deg, #0b0f19, #161f30 52%, #0b0f19);
	--wps-bg-surface: rgba(255,255,255,.05);
	--wps-text: #f3f7ff;
	--wps-text-head: #f3f7ff;
	--wps-text-muted: #aebbd0;
	--wps-text-eyebrow: #40ea84;
	--wps-text-headline: #44e095;
	--wps-text-headline-2: #4480e0;
}

body.page-gatey:not(.wp-admin),
body.editor-styles-wrapper.page-gatey,
body.block-editor-iframe__body.page-gatey {
	--wps-bg: radial-gradient(circle at 10% 8%, rgba(64,234,132,.18), transparent 28%), radial-gradient(circle at 92% 16%, rgba(167,119,255,.17), transparent 26%), linear-gradient(180deg, #0d051c, #0e1625 52%, #0d051c);
	--wps-bg-surface: rgba(255,255,255,.05);
	--wps-text: #f3f7ff;
	--wps-text-head: #f3f7ff;
	--wps-text-muted: #aebbd0;
	--wps-text-eyebrow: #9cffc3;
	--wps-text-headline: #40ea84;
	--wps-text-headline-2: #a777ff;
}

body.page-flow:not(.wp-admin),
body.editor-styles-wrapper.page-flow,
body.block-editor-iframe__body.page-flow {
	--wps-bg: radial-gradient(circle at 10% 8%, rgba(255,153,0,.18), transparent 28%), radial-gradient(circle at 92% 16%, rgba(124,92,255,.18), transparent 26%), linear-gradient(180deg, #05070c, #07121a 52%, #05070c);
	--wps-bg-surface: rgba(255,255,255,.05);
	--wps-text: #f3f7ff;
	--wps-text-head: #f3f7ff;
	--wps-text-muted: #aebbd0;
	--wps-text-eyebrow: #38bdf8;
	--wps-text-headline: #ff9900;
	--wps-text-headline-2: #7c5cff;
}

body.page-static-publisher:not(.wp-admin),
body.page-publisher:not(.wp-admin),
body.editor-styles-wrapper.page-static-publisher,
body.editor-styles-wrapper.page-publisher,
body.block-editor-iframe__body.page-static-publisher,
body.block-editor-iframe__body.page-publisher {
	--wps-bg: radial-gradient(circle at 10% 8%, rgba(68,227,238,.18), transparent 28%), radial-gradient(circle at 92% 16%, rgba(88,168,255,.18), transparent 26%), linear-gradient(180deg, #030817, #07142c 52%, #030817);
	--wps-bg-surface: #07142c;
	--wps-text: #f3f7ff;
	--wps-text-head: #f3f7ff;
	--wps-text-muted: #aebbd0;
	--wps-text-eyebrow: #59f0c3;
	--wps-text-headline: #44e3ee;
	--wps-text-headline-2: #58a8ff;
}

body.page-static-publisher:not(.wp-admin) .wps-product-page,
body.page-publisher:not(.wp-admin) .wps-product-page,
body.editor-styles-wrapper.page-static-publisher .wps-product-page,
body.editor-styles-wrapper.page-publisher .wps-product-page,
body.block-editor-iframe__body.page-static-publisher .wps-product-page,
body.block-editor-iframe__body.page-publisher .wps-product-page {
	--wps-product-panel-strong: #0a1d3d;
	--wps-product-line: rgba(100,180,255,.32);
}

.wps-product-page h1,
.wps-product-page h2,
.wps-product-page h3,
.wps-product-page h4 {
	color: var(--wps-product-text) !important;
}

.wps-product-page h1 {
	font-size: var(--fs-h1) !important;
}

.wps-product-page h2 {
	font-size: var(--fs-h2) !important;
}

.wps-product-page h3 {
	font-size: var(--fs-h3) !important;
}

.wps-product-page p,
.wps-product-page li,
.wps-product-page td {
	color: var(--wps-product-muted);
}

.wps-product-page a:not(.wp-block-button__link) {
	color: var(--wps-product-accent);
}

.wps-product-hero {
	display: grid !important;
	grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	width: min(1200px, 100%);
	margin: 0 auto !important;
	padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 7vw, 86px);
}

.wps-product-hero h1 {
	max-width: 850px;
	margin: 0 0 22px;
	font-size: var(--fs-h1) !important;
	font-weight: 850;
	letter-spacing: -0.045em;
	line-height: 1.02;
}

.wps-product-kicker {
	border-color: color-mix(in srgb, var(--wps-product-accent) 42%, transparent);
	background: color-mix(in srgb, var(--wps-product-accent) 10%, transparent);
	color: var(--wps-product-accent);
}

.wps-product-signal {
	padding: 26px;
	border: 1px solid var(--wps-product-line);
	border-radius: 26px;
	background: linear-gradient(180deg, var(--wps-product-panel-strong), var(--wps-product-panel));
	box-shadow: var(--wps-agent-shadow);
}

.wps-product-signal .wps-product-card {
	margin-top: 12px;
	padding: 16px;
	border-color: color-mix(in srgb, var(--wps-product-text) 12%, transparent);
	border-radius: 16px;
	background: var(--wps-product-panel-inset);
	box-shadow: none;
}

.wps-product-signal .wps-product-card > .wps-product-label {
	color: color-mix(in srgb, var(--wps-product-accent) 58%, var(--wps-product-muted)) !important;
	font-size: .68rem !important;
	letter-spacing: .07em;
}

.wps-product-card {
	transition: border-color .25s ease, background-color .25s ease;
}

.wps-product-card:hover {
	transform: none;
	border-color: color-mix(in srgb, var(--wps-product-accent) 45%, transparent);
}

.wps-product-metric {
	font-size: clamp(2rem, 4vw, 3.5rem) !important;
	font-weight: 850;
	line-height: 1;
	color: var(--wps-product-accent) !important;
}

.wps-product-diagram {
	margin: 28px 0;
	padding: 26px;
	overflow-x: auto;
	border: 1px solid var(--wps-product-line);
	border-radius: 20px;
	background: rgba(0,0,0,.26);
	color: var(--wps-product-accent-3) !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	line-height: 1.65;
	white-space: pre-wrap;
}

.wps-product-media {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
	gap: 32px;
	align-items: center;
}

.wps-product-media figure {
	overflow: hidden;
	border: 1px solid var(--wps-product-line);
	border-radius: 22px;
	box-shadow: var(--wps-agent-shadow);
}

.wps-product-media img {
	width: 100%;
	height: auto;
}

.wps-product-page .wps-agent-table {
	border-color: var(--wps-product-line);
	background: var(--wps-product-panel);
}

.wps-product-page .wps-agent-table th,
.wps-product-page .wps-agent-table td {
	border-color: var(--wps-product-line);
	background: transparent;
}

.wps-product-page .wps-agent-table th {
	background: var(--wps-product-panel-strong);
	color: var(--wps-product-text);
}

.wps-product-page .wps-agent-faq details {
	border-color: var(--wps-product-line);
	background: var(--wps-product-panel);
}

.wps-product-page .wps-agent-faq summary {
	color: var(--wps-product-text);
}

.wps-product-cta {
	padding: clamp(28px, 4vw, 44px);
	border: 1px solid color-mix(in srgb, var(--wps-product-accent) 38%, transparent);
	border-radius: 26px;
	background:
		radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--wps-product-accent-2) 20%, transparent), transparent 36%),
		linear-gradient(135deg, var(--wps-product-panel-strong), rgba(0,0,0,.26));
}

/* --------------------------------------------------------------------------
   Platform and agency pages — homepage-relative dark system
   -------------------------------------------------------------------------- */

.wps-dark-page {
	--wps-dark-panel: var(--wps-bg-surface, rgba(255,255,255,.05));
	--wps-dark-panel-strong: rgba(255,255,255,.08);
	--wps-dark-panel-inset: color-mix(in srgb, var(--wps-dark-accent-2) 12%, rgba(0,0,0,.60));
	--wps-dark-line: rgba(255,255,255,.12);
	--wps-dark-text: var(--wps-text-head, #eef6ff);
	--wps-dark-muted: var(--wps-text-muted, #b8c9e4);
	--wps-dark-accent: var(--wps-text-headline, #9cffc3);
	--wps-dark-accent-2: var(--wps-text-headline-2, #44e095);
	--wps-dark-accent-3: var(--wps-text-eyebrow, #8ecaff);
	--wps-agent-accent: var(--wps-dark-accent-2);
	--wps-agent-heading: var(--wps-dark-text);
	--wps-agent-panel: var(--wps-dark-panel);
	--wps-agent-panel-strong: var(--wps-dark-panel-strong);
	--wps-agent-line: var(--wps-dark-line);
	--wps-agent-shadow: 0 24px 70px rgba(0,0,0,.32);
	background: transparent;
	color: var(--wps-dark-text);
}

/*
 * Pattern roots and template containers are transparent visual-system scopes.
 * The shared body rule in common.css paints --wps-bg on both the front end and
 * the iframe editor canvas.
 */
body:not(.wp-admin):has(.wps-dark-page),
body.editor-styles-wrapper:has(.wps-dark-page),
body.block-editor-iframe__body:has(.wps-dark-page) {
	--wps-bg: radial-gradient(circle at 12% 10%, rgba(57,239,136,.18), transparent 28%), radial-gradient(circle at 90% 18%, rgba(130,201,255,.16), transparent 22%), radial-gradient(circle at 76% 82%, rgba(157,145,255,.12), transparent 22%), linear-gradient(180deg, #06090e, #09111a 54%, #06090e);
	--wps-bg-surface: rgba(255,255,255,.05);
	--wps-text: #eef6ff;
	--wps-text-head: #eef6ff;
	--wps-text-muted: #b8c9e4;
	--wps-text-eyebrow: #8ecaff;
	--wps-text-headline: #9cffc3;
	--wps-text-headline-2: #44e095;
}

.wps-product-page .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wps-dark-page .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	border: 0 !important;
	border-radius: 0 !important;
	color: #07111e;
	font-weight: 500;
	padding: .65rem 1.5rem !important;
	transition: background .3s, border-color .3s, border-radius .3s, box-shadow .3s, transform .3s;
}

.wps-product-page .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: transparent !important;
	background-image: linear-gradient(40deg, var(--wps-product-accent-2) 0%, var(--wps-product-accent) 100%) !important;
}

.wps-dark-page .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: transparent !important;
	background-image: linear-gradient(40deg, var(--wps-dark-accent-2) 0%, var(--wps-dark-accent) 100%) !important;
}

.wps-product-page .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-image: linear-gradient(40deg, var(--wps-product-accent) 0%, var(--wps-product-accent-2) 100%) !important;
	filter: none;
	transform: translateY(-10px);
}

.wps-dark-page .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-image: linear-gradient(40deg, var(--wps-dark-accent) 0%, var(--wps-dark-accent-2) 100%) !important;
	filter: none;
	transform: translateY(-10px);
}

/* Platform: close to the homepage family, but visibly more technical. */
body.page-platform:not(.wp-admin),
body.singular-platform:not(.wp-admin),
body:not(.wp-admin):has(.wps-platform-page),
body.editor-styles-wrapper.page-platform,
body.block-editor-iframe__body.page-platform {
	--wps-bg: linear-gradient(rgba(94,231,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(94,231,255,.035) 1px, transparent 1px), radial-gradient(circle at 12% 10%, rgba(68,224,149,.16), transparent 28%), radial-gradient(circle at 88% 16%, rgba(94,231,255,.15), transparent 24%), linear-gradient(180deg, #050b12, #0a1724 56%, #050b12);
	--wps-bg-surface: rgba(255,255,255,.05);
	--wps-text: #eef8ff;
	--wps-text-head: #eef8ff;
	--wps-text-muted: #afc4d8;
	--wps-text-eyebrow: #a99bff;
	--wps-text-headline: #5ee7ff;
	--wps-text-headline-2: #44e095;
	background-size: 40px 40px, 40px 40px, auto, auto, auto;
}

body.page-platform .wps-dark-card,
.page-platform .wps-dark-card,
body.singular-platform .wps-dark-card,
body:has(.wps-platform-page) .wps-dark-card,
.wps-platform-page .wps-dark-card {
	border-radius: 18px;
	border-left: 3px solid color-mix(in srgb, var(--wps-dark-accent) 55%, transparent);
}

/* Agency: relationship/portfolio tone, softer than the technical platform. */
body.page-wp-suite-for-agencies-aws-powered-client-solutions-on-wordpress:not(.wp-admin),
body.page-agency:not(.wp-admin),
body:not(.wp-admin):has(.wps-agency-page),
body.editor-styles-wrapper.page-wp-suite-for-agencies-aws-powered-client-solutions-on-wordpress,
body.editor-styles-wrapper.page-agency,
body.block-editor-iframe__body.page-wp-suite-for-agencies-aws-powered-client-solutions-on-wordpress,
body.block-editor-iframe__body.page-agency {
	--wps-bg: radial-gradient(ellipse at 10% 8%, rgba(134,214,255,.17), transparent 30%), radial-gradient(ellipse at 88% 16%, rgba(159,139,255,.18), transparent 28%), radial-gradient(ellipse at 70% 86%, rgba(137,241,181,.11), transparent 25%), linear-gradient(180deg, #0a0f1d, #101933 55%, #0a0f1d);
	--wps-bg-surface: rgba(255,255,255,.05);
	--wps-text: #eef4ff;
	--wps-text-head: #eef4ff;
	--wps-text-muted: #b8c5e6;
	--wps-text-eyebrow: #89f1b5;
	--wps-text-headline: #86d6ff;
	--wps-text-headline-2: #9f8bff;
}

body.page-wp-suite-for-agencies-aws-powered-client-solutions-on-wordpress .wps-dark-card,
.page-wp-suite-for-agencies-aws-powered-client-solutions-on-wordpress .wps-dark-card,
body.page-agency .wps-dark-card,
.page-agency .wps-dark-card,
body:has(.wps-agency-page) .wps-dark-card,
.wps-agency-page .wps-dark-card {
	border-radius: 28px;
}

/*
 * The Agency proof panel is a short vertical evidence stack, not a two-up
 * comparison. This keeps longer Marketplace proof readable beside the hero.
 */
.wps-agency-page .wps-dark-orbit .wps-dark-grid.two {
	grid-template-columns: 1fr;
}

.wps-agency-page .wps-dark-orbit .wps-dark-grid {
	margin-bottom: 0;
}

/* Deployment Access: operational AWS/stack character and tighter geometry. */
body.page-deployment-access:not(.wp-admin),
body.singular-deployment-access:not(.wp-admin),
body:not(.wp-admin):has(.wps-deployment-page),
body.editor-styles-wrapper.page-deployment-access,
body.block-editor-iframe__body.page-deployment-access {
	--wps-bg: radial-gradient(circle at 12% 8%, rgba(246,200,106,.15), transparent 26%), radial-gradient(circle at 90% 16%, rgba(143,90,36,.18), transparent 24%), linear-gradient(180deg, #070b12, #101727 48%, var(--wps-bg-dark) 100%);
	--wps-bg-surface: rgba(255,255,255,.05);
	--wps-text: #f5f8ff;
	--wps-text-head: #f5f8ff;
	--wps-text-muted: #b7c2d6;
	--wps-text-eyebrow: #c98a2e;
	--wps-text-headline: #f6c86a;
	--wps-text-headline-2: #8f5a24;
}

body.page-deployment-access:not(.wp-admin) .wpsuite-container,
body.singular-deployment-access:not(.wp-admin) .wpsuite-container,
body:not(.wp-admin):has(.wps-deployment-page) .wpsuite-container {
	max-width: none !important;
	padding-top: 0;
	padding-bottom: 0;
}

/* Never let template or Gutenberg containers repaint the body-level field. */
body:not(.wp-admin):has(:is(.wps-dark-page, .wps-product-page)) :is(main, .wpsuite-container, .wp-block-post-content),
body.editor-styles-wrapper:has(:is(.wps-dark-page, .wps-product-page)) .is-root-container,
body.block-editor-iframe__body:has(:is(.wps-dark-page, .wps-product-page)) .is-root-container {
	background: transparent !important;
}

body.page-deployment-access .wps-dark-card,
.page-deployment-access .wps-dark-card,
body.singular-deployment-access .wps-dark-card,
body:has(.wps-deployment-page) .wps-dark-card,
.wps-deployment-page .wps-dark-card {
	border-radius: 14px;
	box-shadow: 0 18px 48px rgba(0,0,0,.28);
}

/* Long operational explanations read better as two balanced rows. */
body.page-deployment-access .wps-dark-grid.four,
.page-deployment-access .wps-dark-grid.four,
body.singular-deployment-access .wps-dark-grid.four,
body:has(.wps-deployment-page) .wps-dark-grid.four,
.wps-deployment-page ~ .wps-dark-page .wps-dark-grid.four,
.wps-dark-grid.wps-dark-grid-long-copy {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Separate a section's narrative introduction from the operational cards. */
body.page-deployment-access .wps-dark-lead + .wps-dark-grid,
.page-deployment-access .wps-dark-lead + .wps-dark-grid,
body.singular-deployment-access .wps-dark-lead + .wps-dark-grid,
body:has(.wps-deployment-page) .wps-dark-lead + .wps-dark-grid,
.wps-deployment-page ~ .wps-dark-page .wps-dark-lead + .wps-dark-grid {
	margin-top: clamp(36px, 4vw, 48px) !important;
}

/* Deployment cards are informational surfaces, not floating controls. */
body.page-deployment-access .wps-dark-card,
.page-deployment-access .wps-dark-card,
body.singular-deployment-access .wps-dark-card,
body:has(.wps-deployment-page) .wps-dark-card,
.wps-deployment-page .wps-dark-card {
	transition: border-color .25s ease, background-color .25s ease;
}

body.page-deployment-access .wps-dark-card:hover,
.page-deployment-access .wps-dark-card:hover,
body.singular-deployment-access .wps-dark-card:hover,
body:has(.wps-deployment-page) .wps-dark-card:hover,
.wps-deployment-page .wps-dark-card:hover {
	transform: none;
}

body.page-deployment-access .wps-dark-layer-number,
.page-deployment-access .wps-dark-layer-number,
body.singular-deployment-access .wps-dark-layer-number,
body:has(.wps-deployment-page) .wps-dark-layer-number,
.wps-deployment-page .wps-dark-layer-number {
	border-radius: 10px;
}

.wps-dark-page h1,
.wps-dark-page h2,
.wps-dark-page h3,
.wps-dark-page h4 {
	color: var(--wps-dark-text) !important;
}

.wps-dark-page p,
.wps-dark-page li {
	color: var(--wps-dark-muted);
}

.wps-dark-kicker {
	border-color: color-mix(in srgb, var(--wps-dark-accent) 40%, transparent);
	background: color-mix(in srgb, var(--wps-dark-accent) 10%, transparent);
	color: var(--wps-dark-accent);
}

.wps-dark-hero {
	display: grid !important;
	grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
	gap: clamp(32px, 6vw, 76px);
	align-items: center;
	width: min(1200px, 100%);
	margin: 0 auto !important;
	padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 7vw, 86px);
}

.wps-dark-hero h1 {
	max-width: 850px;
	margin: 0 0 22px;
	font-size: var(--fs-h1) !important;
	font-weight: 850;
	letter-spacing: -0.045em;
	line-height: 1.08;
}

.wps-dark-orbit {
	padding: 28px;
	border: 1px solid var(--wps-dark-line);
	border-radius: 28px;
	background: linear-gradient(180deg, var(--wps-dark-panel-strong), var(--wps-dark-panel));
	box-shadow: var(--wps-agent-shadow);
}

.wps-dark-orbit .wps-dark-card + .wps-dark-card {
	margin-top: 12px;
}

.wps-dark-orbit .wps-dark-card {
	border-color: color-mix(in srgb, var(--wps-dark-text) 12%, transparent);
	border-radius: 16px;
	background: var(--wps-dark-panel-inset);
	box-shadow: none;
}

.wps-dark-orbit .wps-dark-card > .wps-dark-label {
	color: color-mix(in srgb, var(--wps-dark-accent-3) 58%, var(--wps-dark-muted)) !important;
	font-size: .68rem !important;
	letter-spacing: .07em;
}

.wps-dark-orbit > .wps-dark-card {
	display: flex;
	align-items: center;
	gap: 24px !important;
}

.wps-dark-orbit > .wps-dark-card .wps-dark-layer-number {
	flex: 0 0 auto;
	margin-bottom: 0 !important;
}

.wps-dark-page .wps-product-diagram {
	border-color: var(--wps-dark-line);
	color: var(--wps-dark-accent-3) !important;
}

.wps-dark-card {
	transition: border-color .25s ease, background-color .25s ease;
}

.wps-dark-card:hover {
	transform: none;
	border-color: color-mix(in srgb, var(--wps-dark-accent) 40%, transparent);
}

.wps-dark-layer-number {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: 16px !important;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--wps-dark-accent-2), var(--wps-dark-accent));
	color: #07111e !important;
	font-size: .8rem !important;
	font-weight: 900;
}

.wps-dark-page .wps-agent-steps > li {
	border-color: var(--wps-dark-line);
	background: var(--wps-dark-panel);
	color: var(--wps-dark-muted);
}

.wps-dark-page .wps-agent-steps > li::before {
	background: linear-gradient(135deg, var(--wps-dark-accent-2), var(--wps-dark-accent));
	color: #07111e;
}

.wps-dark-cta {
	width: 100%;
	padding: clamp(30px, 4vw, 46px);
	border: 1px solid color-mix(in srgb, var(--wps-dark-accent) 34%, transparent);
	border-radius: 28px;
	background:
		radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--wps-dark-accent-2) 22%, transparent), transparent 36%),
		linear-gradient(135deg, var(--wps-dark-panel-strong), rgba(0,0,0,.24));
}

/* Gutenberg layout margins must not collapse the final content-to-action gap. */
.wps-dark-hero .wps-dark-buttons,
.wps-dark-cta .wps-dark-buttons {
	margin-top: 24px !important;
}

/* Compatibility for hero markup saved before primary styling moved to the Buttons wrapper. */
.wps-dark-hero .wps-dark-buttons > .wps-btn-primary .wp-block-button__link,
.wps-dark-hero .wps-dark-buttons > .wps-btn-primary .wp-block-button__link:hover {
	color: #07111e !important;
}

.wps-dark-page .wps-btn-secondary .wp-block-button__link,
.wps-product-page .wps-btn-secondary .wp-block-button__link {
	border-color: rgba(255,255,255,.44) !important;
	background: transparent !important;
	color: #ffffff !important;
}

.wps-agent-single {
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
}

.wps-agent-single-footer {
	width: min(880px, 100%);
	margin: 0 auto !important;
	padding: 32px 0 64px;
	border-top: 1px solid rgba(15, 23, 42, .10);
}

.wps-agent-single-footer .wp-block-post-terms {
	margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   Cross-family content flow and stationary information surfaces
   -------------------------------------------------------------------------- */

/*
 * Gutenberg constrained layouts center narrower children independently. Keep
 * every section introduction on the section's left rail on larger screens.
 * Mobile centering is applied later without affecting article copy or cards.
 */
:is(
	.wps-agent-section,
	.wps-post-section,
	.wps-product-section,
	.wps-dark-section,
	.wps-solutions-section,
	.wps-agent-hero,
	.wps-post-hero,
	.wps-product-intro,
	.wps-dark-intro,
	.wps-agent-cta,
	.wps-post-cta,
	.wps-product-cta,
	.wps-dark-cta
) {
	text-align: left;
}

:is(
	.wps-agent-section,
	.wps-post-section,
	.wps-product-section:not(.wps-product-media),
	.wps-dark-section,
	.wps-solutions-section,
	.wps-agent-hero,
	.wps-post-hero,
	.wps-product-intro,
	.wps-dark-intro,
	.wps-agent-cta,
	.wps-post-cta,
	.wps-product-cta,
	.wps-dark-cta
) {
	gap: 0 !important;
}

:is(
	.wps-agent-section,
	.wps-post-section,
	.wps-product-section,
	.wps-dark-section,
	.wps-solutions-section,
	.wps-agent-hero,
	.wps-post-hero,
	.wps-product-intro,
	.wps-dark-intro,
	.wps-agent-cta,
	.wps-post-cta,
	.wps-product-cta,
	.wps-dark-cta
) > :is(
	.wps-agent-kicker,
	.wps-post-kicker,
	.wps-product-kicker,
	.wps-dark-kicker,
	.wps-agent-label,
	.wps-post-label,
	.wps-product-label,
	.wps-dark-label,
	.wps-solutions-eyebrow
) {
	align-self: flex-start;
	margin: 0 0 6px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: left;
}

:is(
	.wps-agent-section,
	.wps-post-section,
	.wps-product-section,
	.wps-dark-section,
	.wps-solutions-section,
	.wps-agent-hero,
	.wps-post-hero,
	.wps-product-intro,
	.wps-dark-intro,
	.wps-agent-cta,
	.wps-post-cta,
	.wps-product-cta,
	.wps-dark-cta
) > :is(
	.wps-agent-kicker,
	.wps-post-kicker,
	.wps-product-kicker,
	.wps-dark-kicker,
	.wps-agent-label,
	.wps-post-label,
	.wps-product-label,
	.wps-dark-label,
	.wps-solutions-eyebrow
) + :is(h1, h2, h3, h4) {
	margin-top: 0 !important;
}

:is(
	.wps-agent-section,
	.wps-post-section,
	.wps-product-section,
	.wps-dark-section,
	.wps-solutions-section,
	.wps-agent-hero,
	.wps-post-hero,
	.wps-product-intro,
	.wps-dark-intro,
	.wps-agent-cta,
	.wps-post-cta,
	.wps-product-cta,
	.wps-dark-cta
) > :is(h1, h2, h3, h4) {
	align-self: flex-start;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	text-align: left;
}

:is(
	.wps-agent-section,
	.wps-post-section,
	.wps-product-section,
	.wps-dark-section,
	.wps-solutions-section,
	.wps-agent-hero,
	.wps-post-hero,
	.wps-product-intro,
	.wps-dark-intro,
	.wps-agent-cta,
	.wps-post-cta,
	.wps-product-cta,
	.wps-dark-cta
) > :is(h1, h2, h3, h4) + :is(
	.wps-agent-lead,
	.wps-post-lead,
	.wps-product-lead,
	.wps-dark-lead,
	.wps-solutions-lead,
	p,
	ul,
	ol
) {
	margin-top: 16px !important;
}

:is(
	.wps-agent-section,
	.wps-post-section,
	.wps-product-section,
	.wps-dark-section,
	.wps-solutions-section,
	.wps-agent-hero,
	.wps-post-hero,
	.wps-product-intro,
	.wps-dark-intro,
	.wps-agent-cta,
	.wps-post-cta,
	.wps-product-cta,
	.wps-dark-cta
) > :is(
	.wps-agent-lead,
	.wps-post-lead,
	.wps-product-lead,
	.wps-dark-lead,
	.wps-solutions-lead,
	p,
	ul,
	ol
) {
	margin-bottom: 0 !important;
}

/*
 * Gutenberg constrained layouts center max-width lead blocks. On desktop the
 * lead belongs to the same left rail as its eyebrow and heading.
 */
:is(
	.wps-agent-section,
	.wps-post-section,
	.wps-product-section,
	.wps-dark-section,
	.wps-solutions-section,
	.wps-agent-hero,
	.wps-post-hero,
	.wps-product-intro,
	.wps-dark-intro,
	.wps-agent-cta,
	.wps-post-cta,
	.wps-product-cta,
	.wps-dark-cta
) > :is(
	.wps-agent-lead,
	.wps-post-lead,
	.wps-product-lead,
	.wps-dark-lead,
	.wps-solutions-lead
) {
	align-self: flex-start;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

:is(
	.wps-agent-section,
	.wps-post-section,
	.wps-product-section,
	.wps-dark-section,
	.wps-solutions-section,
	.wps-agent-hero,
	.wps-post-hero,
	.wps-product-intro,
	.wps-dark-intro,
	.wps-agent-cta,
	.wps-post-cta,
	.wps-product-cta,
	.wps-dark-cta
) > :is(
	.wps-agent-lead,
	.wps-post-lead,
	.wps-product-lead,
	.wps-dark-lead,
	.wps-solutions-lead,
	p,
	ul,
	ol
) + :is(p, ul, ol) {
	margin-top: 16px !important;
}

:is(
	.wps-agent-section,
	.wps-post-section,
	.wps-product-section,
	.wps-dark-section,
	.wps-solutions-section,
	.wps-agent-hero,
	.wps-post-hero,
	.wps-product-intro,
	.wps-dark-intro,
	.wps-agent-cta,
	.wps-post-cta,
	.wps-product-cta,
	.wps-dark-cta
) > :is(
	h1,
	h2,
	h3,
	h4,
	.wps-agent-lead,
	.wps-post-lead,
	.wps-product-lead,
	.wps-dark-lead,
	.wps-solutions-lead,
	p,
	ul,
	ol
) + :is(
	.wps-agent-grid,
	.wps-post-grid,
	.wps-product-grid,
	.wps-dark-grid,
	.wps-solutions-grid,
	.wps-agent-steps,
	.wps-agent-table,
	.wps-agent-faq,
	.wps-solutions-faq,
	.wp-block-details,
	details,
	.wps-solutions-answer,
	.wps-solutions-diagram,
	.wps-solutions-note,
	.wps-agent-quote,
	.wps-post-callout,
	.wps-agent-buttons,
	.wps-post-buttons,
	.wps-product-buttons,
	.wps-dark-buttons,
	.wps-post-meta
) {
	margin-top: 28px !important;
}

:is(
	.wps-agent-cta,
	.wps-post-cta,
	.wps-product-cta,
	.wps-dark-cta,
	.wps-agent-hero,
	.wps-post-hero,
	.wps-product-intro,
	.wps-dark-intro
) > :is(
	.wps-agent-lead,
	.wps-post-lead,
	.wps-product-lead,
	.wps-dark-lead,
	.wps-solutions-lead,
	p
) + :is(
	.wps-agent-buttons,
	.wps-post-buttons,
	.wps-product-buttons,
	.wps-dark-buttons,
	.wps-post-meta
) {
	margin-top: 24px !important;
}

/*
 * Cards are information surfaces in every WP Suite content family. Hover may
 * change a border, shadow, or color, but the surface itself never moves.
 */
:is(
	.wps-agent-card,
	.wps-post-card,
	.wps-product-card,
	.wps-dark-card,
	.wps-solutions-card,
	.wps-light-page .wps-card,
	.wps-contact-card,
	.wps-info-card,
	.wps-post-box li
) {
	transform: none !important;
	transition-property: background-color, border-color, box-shadow, color, opacity;
	text-align: left;
}

:is(
	.wps-agent-card,
	.wps-post-card,
	.wps-product-card,
	.wps-dark-card,
	.wps-solutions-card,
	.wps-light-page .wps-card,
	.wps-contact-card,
	.wps-info-card,
	.wps-post-box li
):hover {
	transform: none !important;
}

:is(
	.wps-agent-card,
	.wps-post-card,
	.wps-product-card,
	.wps-dark-card,
	.wps-solutions-card,
	.wps-light-page .wps-card,
	.wps-contact-card,
	.wps-info-card,
	.wps-post-callout,
	.wps-agent-quote,
	.wps-solutions-answer,
	.wps-solutions-note,
	.wps-product-signal,
	.wps-dark-orbit
) {
	text-align: left;
}

:is(
	.wps-agent-card,
	.wps-post-card,
	.wps-product-card,
	.wps-dark-card,
	.wps-solutions-card
) {
	gap: 0 !important;
}

:is(
	.wps-agent-card,
	.wps-post-card,
	.wps-product-card,
	.wps-dark-card,
	.wps-solutions-card
) > :is(
	.wps-agent-label,
	.wps-post-label,
	.wps-product-label,
	.wps-dark-label,
	.label
) {
	margin: 0 0 6px !important;
}

:is(
	.wps-agent-card,
	.wps-post-card,
	.wps-product-card,
	.wps-dark-card,
	.wps-solutions-card
) > :is(
	.wps-agent-label,
	.wps-post-label,
	.wps-product-label,
	.wps-dark-label,
	.label
) + :is(h2, h3, h4) {
	margin-top: 0 !important;
}

:is(
	.wps-agent-card,
	.wps-post-card,
	.wps-product-card,
	.wps-dark-card,
	.wps-solutions-card
) > :is(h2, h3, h4) {
	margin-bottom: 0 !important;
	text-align: left;
}

:is(
	.wps-agent-card,
	.wps-post-card,
	.wps-product-card,
	.wps-dark-card,
	.wps-solutions-card
) > :is(h2, h3, h4) + :is(p, ul, ol),
:is(
	.wps-agent-card,
	.wps-post-card,
	.wps-product-card,
	.wps-dark-card,
	.wps-solutions-card
) > :is(p, ul, ol) + :is(p, ul, ol) {
	margin-top: 14px !important;
}

.wps-product-card > .wps-product-metric + p {
	margin-top: 12px !important;
}

/*
 * Existing drafts created before 1.0.11 do not yet carry the explicit
 * wps-product-intro / wps-dark-intro class. Their first hero group is the same
 * semantic copy stack, so retain the new behavior without requiring a resave.
 */
:is(
	.wps-product-hero > .wp-block-group:first-child,
	.wps-dark-hero > .wp-block-group:first-child
) {
	gap: 0 !important;
	text-align: left;
}

:is(
	.wps-product-hero > .wp-block-group:first-child,
	.wps-dark-hero > .wp-block-group:first-child
) > :is(.wps-product-kicker, .wps-dark-kicker) {
	align-self: flex-start;
	margin: 0 0 6px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: left;
}

:is(
	.wps-product-hero > .wp-block-group:first-child,
	.wps-dark-hero > .wp-block-group:first-child
) > :is(.wps-product-kicker, .wps-dark-kicker) + h1 {
	margin-top: 0 !important;
}

:is(
	.wps-product-hero > .wp-block-group:first-child,
	.wps-dark-hero > .wp-block-group:first-child
) > h1 {
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	text-align: left;
}

:is(
	.wps-product-hero > .wp-block-group:first-child,
	.wps-dark-hero > .wp-block-group:first-child
) > h1 + :is(.wps-product-lead, .wps-dark-lead) {
	margin-top: 16px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
}

:is(
	.wps-product-hero > .wp-block-group:first-child,
	.wps-dark-hero > .wp-block-group:first-child
) > :is(.wps-product-lead, .wps-dark-lead) + :is(.wps-product-buttons, .wps-dark-buttons) {
	margin-top: 24px !important;
}

/* --------------------------------------------------------------------------
   Responsive and accessibility behavior
   -------------------------------------------------------------------------- */

.wps-agent-page :where(a, summary, button):focus-visible,
.wps-post-page :where(a, summary, button):focus-visible,
.wps-product-page :where(a, summary, button):focus-visible,
.wps-dark-page :where(a, summary, button):focus-visible {
	outline: 3px solid var(--wps-agent-accent, #44e095) !important;
	outline-offset: 3px;
}

@media (max-width: 960px) {
	.wps-agent-grid.four,
	.wps-product-grid.four,
	.wps-dark-grid.four,
	.wps-post-grid.four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wps-product-hero,
	.wps-dark-hero,
	.wps-product-media {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.wps-agent-section,
	.wps-post-section,
	.wps-product-section,
	.wps-dark-section,
	.wps-agent-hero,
	.wps-post-hero,
	.wps-product-hero,
	.wps-dark-hero,
	.wps-architecture-page .wps-solutions-section.hero,
	.wps-comparison-page .wps-solutions-section.hero,
	.wps-case-study-page .wps-solutions-section.hero {
		width: min(100% - 32px, 1200px);
	}

	/* The outer post-content rail owns the mobile inset. */
	.wps-post-section,
	.wps-post-hero,
	.wps-product-section,
	.wps-dark-section,
	.wps-product-hero,
	.wps-dark-hero {
		width: 100% !important;
		max-width: 1200px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.wps-agent-grid.two,
	.wps-agent-grid.three,
	.wps-agent-grid.four,
	.wps-product-grid.two,
	.wps-product-grid.three,
	.wps-product-grid.four,
	.wps-dark-grid.two,
	.wps-dark-grid.three,
	.wps-dark-grid.four,
	.wps-post-grid.two,
	.wps-post-grid.three,
	.wps-post-grid.four {
		grid-template-columns: 1fr !important;
	}

	body.page-deployment-access .wps-dark-grid.two,
	body.page-deployment-access .wps-dark-grid.four,
	body.singular-deployment-access .wps-dark-grid.two,
	body.singular-deployment-access .wps-dark-grid.four,
	body:has(.wps-deployment-page) .wps-dark-grid.two,
	body:has(.wps-deployment-page) .wps-dark-grid.four {
		grid-template-columns: 1fr !important;
	}

	.wps-agent-section,
	.wps-post-section,
	.wps-product-section,
	.wps-dark-section {
		padding-top: 52px;
		padding-bottom: 52px;
	}

	.wps-agent-hero,
	.wps-post-hero,
	.wps-architecture-page .wps-solutions-section.hero,
	.wps-comparison-page .wps-solutions-section.hero,
	.wps-case-study-page .wps-solutions-section.hero {
		margin-top: 24px !important;
		padding: 24px;
		border-radius: 22px;
	}

	.wps-product-hero,
	.wps-dark-hero {
		padding-top: clamp(24px, 6vw, 32px);
		padding-bottom: 48px;
	}

	.wps-dark-orbit {
		padding: 16px;
		border-radius: 20px;
	}

	.wps-dark-orbit > .wps-dark-card {
		display: grid !important;
		grid-template-columns: 38px minmax(0, 1fr);
		align-items: start;
		column-gap: 20px !important;
		row-gap: 12px !important;
		width: 100%;
		padding: 18px;
		text-align: left;
	}

	.wps-dark-orbit > .wps-dark-card .wps-dark-layer-number,
	.wps-dark-orbit > .wps-dark-card > p {
		margin: 0 !important;
	}

	.wps-dark-orbit > .wps-dark-card > p:not(.wps-dark-layer-number) {
		align-self: center;
		line-height: 1.45;
	}

	/* Homepage-like centered introductions, without centering card content. */
	body.page-deployment-access .wps-dark-section > :is(.wps-dark-label, .wps-dark-kicker),
	body.singular-deployment-access .wps-dark-section > :is(.wps-dark-label, .wps-dark-kicker),
	body:has(.wps-deployment-page) .wps-dark-section > :is(.wps-dark-label, .wps-dark-kicker) {
		align-self: center;
		width: fit-content;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center;
	}

	body.page-deployment-access .wps-dark-section > :is(h2, .wps-dark-lead),
	body.singular-deployment-access .wps-dark-section > :is(h2, .wps-dark-lead),
	body:has(.wps-deployment-page) .wps-dark-section > :is(h2, .wps-dark-lead) {
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center;
	}

	/*
	 * Outside-card section introductions center only on mobile. Long-form
	 * paragraphs, lists, card copy, callouts, diagrams, and tables stay left
	 * aligned for readable scanning.
	 */
	:is(
		.wps-agent-section,
		.wps-post-section,
		.wps-product-section,
		.wps-dark-section,
		.wps-solutions-section,
		.wps-agent-hero,
		.wps-post-hero,
		.wps-product-intro,
		.wps-dark-intro,
		.wps-agent-cta,
		.wps-post-cta,
		.wps-product-cta,
		.wps-dark-cta
	) > :is(
		.wps-agent-kicker,
		.wps-post-kicker,
		.wps-product-kicker,
		.wps-dark-kicker,
		.wps-agent-label,
		.wps-post-label,
		.wps-product-label,
		.wps-dark-label,
		.wps-solutions-eyebrow,
		h1,
		h2,
		h3,
		.wps-agent-lead,
		.wps-post-lead,
		.wps-product-lead,
		.wps-dark-lead,
		.wps-solutions-lead
	) {
		align-self: center;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center;
	}

	.wps-post-meta {
		justify-content: center;
		text-align: center;
	}

	:is(
		.wps-product-hero > .wp-block-group:first-child,
		.wps-dark-hero > .wp-block-group:first-child
	) > :is(
		.wps-product-kicker,
		.wps-dark-kicker,
		h1,
		.wps-product-lead,
		.wps-dark-lead
	) {
		align-self: center;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center;
	}

	:is(
		.wps-agent-card,
		.wps-post-card,
		.wps-product-card,
		.wps-dark-card,
		.wps-solutions-card,
		.wps-light-page .wps-card,
		.wps-contact-card,
		.wps-info-card,
		.wps-post-callout,
		.wps-agent-quote,
		.wps-solutions-answer,
		.wps-solutions-note,
		.wps-product-signal,
		.wps-dark-orbit
	),
	:is(
		.wps-agent-card,
		.wps-post-card,
		.wps-product-card,
		.wps-dark-card,
		.wps-solutions-card,
		.wps-light-page .wps-card,
		.wps-contact-card,
		.wps-info-card,
		.wps-post-callout,
		.wps-agent-quote,
		.wps-solutions-answer,
		.wps-solutions-note,
		.wps-product-signal,
		.wps-dark-orbit
	) :is(h2, h3, h4, p, ul, ol) {
		text-align: left;
	}

	.wps-dark-page .wps-agent-steps > li {
		padding: 14px 14px 14px 60px;
		line-height: 1.55;
	}

	.wps-agent-buttons,
	.wps-product-buttons,
	.wps-dark-buttons,
	.wps-post-buttons {
		width: 100%;
	}

	.wps-agent-buttons .wp-block-button,
	.wps-product-buttons .wp-block-button,
	.wps-dark-buttons .wp-block-button,
	.wps-post-buttons .wp-block-button,
	.wps-agent-buttons .wp-block-button__link,
	.wps-product-buttons .wp-block-button__link,
	.wps-dark-buttons .wp-block-button__link,
	.wps-post-buttons .wp-block-button__link {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wps-product-card,
	.wps-dark-card {
		transition: none;
	}

	.wps-product-card:hover,
	.wps-dark-card:hover {
		transform: none;
	}
}

/* Mobile heading-eyebrow alignment contract. */
@media (max-width: 767px) {
	:is(
		.wps-agent-section,
		.wps-post-section,
		.wps-product-section,
		.wps-dark-section,
		.wps-solutions-section,
		.wps-agent-hero,
		.wps-post-hero,
		.wps-product-intro,
		.wps-dark-intro,
		.wps-product-hero > .wp-block-group:first-child,
		.wps-dark-hero > .wp-block-group:first-child,
		.wps-agent-cta,
		.wps-post-cta,
		.wps-product-cta,
		.wps-dark-cta
	) > :is(
		.wps-agent-kicker,
		.wps-post-kicker,
		.wps-product-kicker,
		.wps-dark-kicker,
		.wps-agent-label,
		.wps-post-label,
		.wps-product-label,
		.wps-dark-label,
		.wps-solutions-eyebrow
	):has(+ :is(h1, h2, h3, h4)) {
		display: flex;
		align-self: center !important;
		justify-self: center !important;
		width: fit-content;
		max-width: 100%;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
	}
}