/**
 * Eminence Grey: content sections (block patterns) and scroll motion.
 *
 * Every section is a full-width core Group with class "eg-section".
 * Motion only runs when motion.js has added .eg-motion to <html>; without JS
 * (or with reduced motion) everything is simply visible.
 */

/* ------------------------------------------------------------------------
   Neutralize block-editor wrappers inside our sections
   ------------------------------------------------------------------------ */
.eg-section,
.eg-section *,
.eg-section *::before,
.eg-section *::after {
	box-sizing: border-box;
}

.eg-section .wp-block-group__inner-container {
	display: contents;
}

.eg-section :is(.wp-block-group__inner-container, [class*="is-layout-"]) > *,
.eg-section > * {
	margin-block: 0;
}

.single-content .eg-section h2,
.single-content .eg-section h3,
.single-content .eg-section p {
	margin: 0;
}

/* WordPress's "constrained" layout centers every block with margin: auto !important.
   Everything in a section sits on the left edge of its column instead. */
.eg-section :is(.wp-block-group__inner-container, [class*="is-layout-"]) > *,
.editor-styles-wrapper .eg-section :is(.wp-block-group__inner-container, [class*="is-layout-"]) > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: left;
}

.eg-section :is(.wp-block-group__inner-container, [class*="is-layout-"]) > :not(.eg-statement):not(.eg-lede):not(.eg-section__frame) {
	max-width: none;
}

/* The frame is the content-width container: keep it centered. Needs !important to beat
   the left-align rule above. */
.eg-section :is(.wp-block-group__inner-container, [class*="is-layout-"]) > .eg-section__frame,
.editor-styles-wrapper .eg-section :is(.wp-block-group__inner-container, [class*="is-layout-"]) > .eg-section__frame {
	margin-left: auto !important;
	margin-right: auto !important;
}

@supports not (text-box: trim-start cap alphabetic) {
	.single-content .eg-section .eg-statement {
		margin-top: -0.14em;
	}
}

/* ------------------------------------------------------------------------
   Section frame: mono index rail (3 cols) + body (9 cols)
   ------------------------------------------------------------------------ */
.eg-section {
	--eg-edge: var(--global-content-edge-padding, 72px);
	position: relative;
	background: var(--global-palette8);
}

/* On the front end the content layer (#inner-wrap) already carries the page background, so
   sections stay transparent. That lets the fixed prism (effects.js) show between the page
   background and the section content. */
.eg-custom-header .eg-section:not(:is(.eg-section--band, [class*="is-style-eg-band-"])):not(:is(.eg-section--closing, .is-style-eg-closing)) {
	background: none;
}

/* Kadence adds a bottom margin to every block in the content; sections butt together
   (their own padding sets the rhythm). */
.single-content .eg-section {
	margin-block: 0;
}

.eg-section__frame {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	width: 100%;
	max-width: var(--global-content-width, 1440px); /* Kadence content width */
	margin-inline: auto;
	padding: clamp(72px, 10vw, 144px) var(--global-content-edge-padding, 72px);
}

.eg-section__index {
	grid-column: 1 / span 3;
	align-self: start;
	display: flex;
	gap: 14px;
	align-items: baseline;
	color: var(--global-palette4);
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.eg-section__index strong {
	color: var(--eg-lav, #cbb8ee);
	font-weight: 500;
}

.eg-section__body {
	grid-column: 4 / -1;
	display: grid;
	gap: 32px;
	min-width: 0;
}

.single-content .eg-section .eg-statement {
	max-width: 22ch; /* 16ch pushed longer headings to four lines */
	text-box: trim-start cap alphabetic; /* cap height sits on the top line, level with the index label */
	font-size: clamp(2.25rem, 4.8vw, 4.75rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.single-content .eg-section .eg-lede {
	max-width: 56ch;
	color: var(--global-palette4);
	font-size: clamp(1.125rem, 1.4vw, 1.3rem);
	line-height: 1.55;
}

.eg-mono {
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Text link with arrow */
.single-content .eg-link a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
	color: var(--global-palette3);
	font-size: 1.0625rem;
	text-decoration: none;
}

.single-content .eg-link a::after {
	content: "";
	width: 0.8em;
	height: 0.8em;
	background: currentColor;
	-webkit-mask: var(--eg-arrow-icon) center / contain no-repeat;
	mask: var(--eg-arrow-icon) center / contain no-repeat;
	transition: transform 0.2s ease;
}

.single-content .eg-link a:hover {
	color: var(--eg-lav, #cbb8ee);
}

.single-content .eg-link a:hover::after {
	transform: translate(2px, -2px);
}

/* Several links side by side (a Row block holding .eg-link paragraphs):
   space them out and let them wrap on narrow screens. */
.eg-section .is-layout-flex:has(> .eg-link) {
	flex-wrap: wrap;
	gap: 16px 48px;
}

/* Divider between sections: subtle, and only as wide as the content */
.eg-section + .eg-section:not(:is(.eg-section--closing, .is-style-eg-closing)) .eg-section__frame::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--eg-edge);
	right: var(--eg-edge);
	height: 1px;
	background: var(--global-palette7);
	opacity: 0.7;
}

/* ------------------------------------------------------------------------
   Segment grid (compact, anchored items)
   ------------------------------------------------------------------------ */
.eg-segments {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 48px;
	border-top: 1px solid var(--global-palette6);
}

.eg-segment {
	display: grid;
	align-content: start;
	gap: 12px;
	padding: 28px 0 32px;
	border-bottom: 1px solid var(--global-palette7);
	scroll-margin-top: 8px; /* on top of the page-wide header offset in header.css */
}

.single-content .eg-segment h3 {
	font-size: clamp(1.4rem, 1.9vw, 1.85rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.01em;
	transition: color 0.3s;
}

.single-content .eg-segment p {
	max-width: 48ch;
	color: var(--global-palette4);
	font-size: 1.0625rem;
}

/* Highlight the segment a jump link landed on */
.single-content .eg-segment:target h3 {
	color: var(--eg-lav, #cbb8ee);
}

/* ------------------------------------------------------------------------
   Comparison rows (label | question); .is-featured highlights one row
   ------------------------------------------------------------------------ */
.eg-compare {
	border-top: 1px solid var(--global-palette6);
}

.eg-compare__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 24px;
	align-items: baseline;
	padding: 22px 0;
	border-bottom: 1px solid var(--global-palette7);
}

.single-content .eg-compare__row p {
	margin: 0;
	color: var(--global-palette4);
	font-size: 1.0625rem;
}

.single-content .eg-compare__row p:first-child {
	color: var(--global-palette3);
	font-size: clamp(1.15rem, 1.5vw, 1.4rem);
	font-weight: 500;
}

.eg-compare__row:is(.is-featured, .is-style-eg-featured) {
	position: relative;
	background: linear-gradient(90deg, rgb(203 184 238 / 0.08), transparent 70%);
}

.eg-compare__row:is(.is-featured, .is-style-eg-featured)::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	bottom: -1px;
	width: 2px;
	background: var(--eg-lav, #cbb8ee);
}

.single-content .eg-compare__row:is(.is-featured, .is-style-eg-featured) p {
	padding-left: 16px;
}

.single-content .eg-compare__row:is(.is-featured, .is-style-eg-featured) p + p {
	padding-left: 0;
}

.single-content .eg-compare__row:is(.is-featured, .is-style-eg-featured) p:first-child {
	color: var(--eg-lav, #cbb8ee);
}

/* ------------------------------------------------------------------------
   Partner grid (Coalition): logo, name, role
   ------------------------------------------------------------------------ */
.eg-partners {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 40px;
	border-top: 1px solid var(--global-palette6);
}

.eg-partner {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 32px 0 36px;
	border-bottom: 1px solid var(--global-palette7);
}

/* Every logo sits in the same box so rows line up regardless of the mark's shape */
.single-content .eg-partner .wp-block-image,
.editor-styles-wrapper .eg-partner .wp-block-image {
	display: flex;
	align-items: center;
	height: 64px;
	margin: 0 0 14px;
}

.eg-partner .wp-block-image img {
	width: auto;
	height: auto;
	max-width: min(100%, 170px);
	max-height: 56px;
	object-fit: contain;
	opacity: 0.9;
	transition: opacity 0.3s;
}

.eg-partner:hover .wp-block-image img {
	opacity: 1;
}

.single-content .eg-partner .eg-mono {
	margin: 0;
	color: var(--eg-lav, #cbb8ee);
}

.single-content .eg-partner p:not(.eg-mono) {
	margin: 0;
	max-width: 32ch;
	color: var(--global-palette4);
	font-size: 1.0625rem;
}

@media (max-width: 900px) {
	.eg-partners {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

/* ------------------------------------------------------------------------
   On this page (jump links)
   ------------------------------------------------------------------------ */
.eg-section--jumpnav .eg-section__frame {
	padding-block: 22px;
	align-items: center;
}

.eg-section--jumpnav .eg-section__index {
	align-self: center;
	margin-bottom: 0;
}

.single-content .eg-jumpnav,
.editor-styles-wrapper .eg-jumpnav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-content .eg-jumpnav li,
.editor-styles-wrapper .eg-jumpnav li {
	margin: 0;
}

.single-content .eg-jumpnav a,
.editor-styles-wrapper .eg-jumpnav a {
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	color: var(--global-palette3);
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s;
}

.single-content .eg-jumpnav a:is(:hover, :focus-visible) {
	border-bottom-color: var(--eg-lav, #cbb8ee);
	color: var(--eg-lav, #cbb8ee);
}

/* ------------------------------------------------------------------------
   Spec grid (capabilities)
   ------------------------------------------------------------------------ */
.eg-specs {
	display: grid;
	grid-auto-flow: column; /* one column per item: 3 or 4 both fill the row */
	grid-auto-columns: minmax(0, 1fr);
	border-top: 1px solid var(--global-palette6);
}

.eg-spec {
	position: relative;
	display: grid;
	align-content: start;
	gap: 18px;
	min-width: 0;
	padding: 24px 24px 32px 0;
	border-right: 1px solid var(--global-palette7);
}

.eg-spec + .eg-spec {
	padding-left: 24px;
}

.eg-spec:last-child {
	border-right: 0;
}

.eg-spec::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--eg-lav, #cbb8ee);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}

.eg-spec:hover::before {
	transform: scaleX(1);
}

.eg-spec .eg-mono {
	color: var(--global-palette5);
}

.single-content .eg-spec h3 {
	font-size: clamp(1.4rem, 1.9vw, 1.85rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.single-content .eg-spec p:not(.eg-mono) {
	color: var(--global-palette4);
	font-size: 1.0625rem;
}

/* ------------------------------------------------------------------------
   Split (audiences): each half is one big link
   ------------------------------------------------------------------------ */
.eg-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--global-palette6);
}

.eg-split__item {
	position: relative;
	display: grid;
	align-content: space-between;
	gap: 20px;
	min-height: 240px;
	padding: 28px 28px 32px 0;
	border-right: 1px solid var(--global-palette7);
	transition: background-color 0.3s;
}

.eg-split__item + .eg-split__item {
	padding-left: 28px;
	border-right: 0;
}

.single-content .eg-split__item h3 {
	font-size: clamp(2rem, 3.6vw, 3.5rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.025em;
}

.single-content .eg-split__item h3 a {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	color: var(--global-palette3);
	text-decoration: none;
}

/* Stretch the heading link over the whole half */
.single-content .eg-split__item h3 a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.single-content .eg-split__item h3 a::after {
	content: "";
	flex-shrink: 0;
	width: 0.5em;
	height: 0.5em;
	margin-top: 0.15em;
	background: currentColor;
	-webkit-mask: var(--eg-arrow-icon) center / contain no-repeat;
	mask: var(--eg-arrow-icon) center / contain no-repeat;
	transition: transform 0.25s ease;
}

.eg-split__item:hover {
	background: var(--global-palette9);
}

.single-content .eg-split__item:hover h3 a {
	color: var(--eg-lav, #cbb8ee);
}

.single-content .eg-split__item:hover h3 a::after {
	transform: translate(4px, -4px);
}

.single-content .eg-split__item p {
	max-width: 38ch;
	color: var(--global-palette4);
}

/* ------------------------------------------------------------------------
   Roles row (coalition)
   ------------------------------------------------------------------------ */
.eg-roles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--global-palette7);
}

.single-content .eg-roles p {
	padding: 16px 0;
	border-bottom: 1px solid var(--global-palette7);
	color: var(--global-palette5);
}

/* ------------------------------------------------------------------------
   FAQ (core Details blocks)
   ------------------------------------------------------------------------ */
.eg-faq {
	border-top: 1px solid var(--global-palette6);
}

.eg-faq__item {
	border-bottom: 1px solid var(--global-palette7);
}

.eg-faq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 26px 0;
	list-style: none;
	cursor: pointer;
	color: var(--global-palette3);
	font-size: clamp(1.25rem, 1.8vw, 1.6rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	transition: color 0.2s;
}

.eg-faq__item summary::-webkit-details-marker {
	display: none;
}

/* Plus that turns into an x when open */
.eg-faq__item summary::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
	transition: transform 0.3s ease;
}

.eg-faq__item[open] summary::after {
	transform: rotate(45deg);
}

.eg-faq__item summary:hover,
.eg-faq__item[open] summary {
	color: var(--eg-lav, #cbb8ee);
}

.eg-faq__item summary:focus-visible {
	outline: 1px solid var(--eg-lav, #cbb8ee);
	outline-offset: 4px;
}

.single-content .eg-faq__item p,
.editor-styles-wrapper .eg-faq__item p {
	max-width: 62ch;
	margin: 0;
	padding-bottom: 28px;
	color: var(--global-palette4);
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* ------------------------------------------------------------------------
   Architecture diagram
   ------------------------------------------------------------------------ */
.eg-diagram {
	overflow-x: auto;
	border: 1px solid var(--global-palette7);
	background: var(--global-palette9);
}

.eg-diagram svg {
	display: block;
	width: 100%;
	min-width: 640px;
	height: auto;
}

.eg-diagram text {
	fill: var(--global-palette4);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.1em;
}

.eg-diagram .t-strong {
	fill: var(--global-palette3);
	font-family: var(--global-body-font-family, sans-serif);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0;
}

.eg-diagram .box {
	fill: var(--global-palette8);
	stroke: var(--global-palette5);
	stroke-width: 1;
}

.eg-diagram .box--accent {
	fill: #1a1530;
	stroke: var(--eg-lav, #cbb8ee);
}

.eg-diagram .wire {
	fill: none;
	stroke: var(--global-palette6);
	stroke-width: 1.25;
}

.eg-diagram .wire--dash {
	stroke: var(--eg-lav, #cbb8ee);
	stroke-dasharray: 4 5;
	animation: eg-dash 1.2s linear infinite;
}

@keyframes eg-dash {
	to {
		stroke-dashoffset: -18;
	}
}

.eg-diagram .pulse {
	fill: var(--eg-lav, #cbb8ee);
}

.eg-two {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* ------------------------------------------------------------------------
   Closing band: brand background runs the full browser width,
   slow drift + scroll parallax
   ------------------------------------------------------------------------ */
:is(.eg-section--closing, .is-style-eg-closing) {
	background: var(--global-palette8);
	color: #fff;
}

:is(.eg-section--closing, .is-style-eg-closing) .eg-section__frame {
	/* Background runs the full browser width; content lines up with every other section
	   (same as the statement bands). */
	max-width: none;
	padding-inline: max(var(--eg-edge), calc((100% - var(--global-content-width, 1440px)) / 2 + var(--eg-edge)));
	clip-path: inset(0);
	isolation: isolate;
}

:is(.eg-section--closing, .is-style-eg-closing) .eg-section__frame::after {
	content: "";
	position: absolute;
	inset: -8% 0;
	z-index: -1;
	background: #0d1224 url("../img/eg-bg-band.webp") center / cover no-repeat;
	transform: translate3d(0, calc(var(--eg-par, 0) * -60px), 0);
	animation: eg-bg-drift 36s ease-in-out infinite alternate;
}

@keyframes eg-bg-drift {
	from {
		scale: 1;
		translate: 0 0;
	}
	to {
		scale: 1.12;
		translate: -2.5% 2%;
	}
}

.single-content :is(.eg-section--closing, .is-style-eg-closing) :is(h2, h3) {
	color: #fff;
}

.single-content :is(.eg-section--closing, .is-style-eg-closing) .eg-lede,
:is(.eg-section--closing, .is-style-eg-closing) .eg-section__index {
	color: #c9cfdb;
}

:is(.eg-section--closing, .is-style-eg-closing) .eg-section__index strong {
	color: #cbb8ee;
}

/* Closing band buttons use the standard site button (violet outline, glow on hover). */

/* ------------------------------------------------------------------------
   Motion (only with JS, never with reduced motion)
   ------------------------------------------------------------------------ */

/* Heading words rise from behind their line */
.eg-motion .eg-rise-line {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.eg-motion .eg-rise-word {
	display: inline-block;
	transform: translateY(105%);
	transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, 0) * 60ms);
}

.eg-motion .is-in .eg-rise-word {
	transform: none;
}

/* Everything else in a section lifts in, staggered */
.eg-motion .eg-lift {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.9s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--d, 0) * 90ms + 250ms);
}

.eg-motion .is-in .eg-lift {
	opacity: 1;
	transform: none;
}

/* Grid lines draw, then items rise one after another */
.eg-motion :is(.eg-specs, .eg-split, .eg-roles, .eg-faq, .eg-segments, .eg-compare, .eg-partners) {
	border-top-color: transparent;
	background: linear-gradient(var(--global-palette6), var(--global-palette6)) top left / 0 1px no-repeat;
	transition: background-size 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}

.eg-motion .eg-roles {
	background-image: linear-gradient(var(--global-palette7), var(--global-palette7));
}

.eg-motion .is-in :is(.eg-specs, .eg-split, .eg-roles, .eg-faq, .eg-segments, .eg-compare, .eg-partners) {
	background-size: 100% 1px;
}

/* Diagram boxes assemble */
.eg-motion .eg-diagram g {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.eg-motion .eg-diagram g:nth-of-type(2) { transition-delay: 0.15s; }
.eg-motion .eg-diagram g:nth-of-type(3) { transition-delay: 0.3s; }
.eg-motion .eg-diagram g:nth-of-type(4) { transition-delay: 0.45s; }

.eg-motion .is-in .eg-diagram g {
	opacity: 1;
	transform: none;
}

/* Heading drifts a touch slower than the page (parallax) */
.eg-motion .eg-section .eg-statement {
	translate: 0 calc(var(--eg-par, 0.5) * -24px + 12px);
}

/* ------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
	.eg-section__index {
		grid-column: 1 / -1;
		margin-bottom: 28px;
	}

	.eg-section--jumpnav .eg-section__index {
		margin-bottom: 12px;
	}

	.eg-section__body {
		grid-column: 1 / -1;
	}

	.eg-specs {
		grid-auto-flow: row;
		grid-template-columns: 1fr 1fr;
	}

	.eg-spec:nth-child(2) {
		border-right: 0;
	}

	.eg-spec:nth-child(3) {
		padding-left: 0;
		border-top: 1px solid var(--global-palette7);
	}

	.eg-spec:nth-child(4) {
		border-top: 1px solid var(--global-palette7);
	}

	.eg-two {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.eg-compare__row {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.eg-specs,
	.eg-split,
	.eg-roles,
	.eg-segments {
		grid-template-columns: 1fr;
	}

	.eg-spec,
	.eg-spec + .eg-spec,
	.eg-split__item,
	.eg-split__item + .eg-split__item {
		padding-left: 0;
		padding-right: 0;
		border-right: 0;
	}

	.eg-spec + .eg-spec,
	.eg-split__item + .eg-split__item {
		border-top: 1px solid var(--global-palette7);
	}

	.eg-split__item {
		min-height: 180px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.eg-section--closing, .is-style-eg-closing) .eg-section__frame::after,
	.eg-diagram .wire--dash {
		animation: none;
	}
}

/* ========================================================================
   Effects (assets/js/effects.js). Without JS, or with reduced motion,
   everything below shows at rest: statements lit, prism drawn, steps visible.
   ======================================================================== */

/* ------------------------------------------------------------------------
   Statement band: big scroll-lit statement on a brand background.
   Pick the background with .eg-band--1 ... .eg-band--4 on the section.
   ------------------------------------------------------------------------ */
:is(.eg-section--band, [class*="is-style-eg-band-"]) {
	color: #fff;
}

:is(.eg-section--band, [class*="is-style-eg-band-"]) .eg-section__frame {
	/* Background runs the full browser width; the content lines up with every other
	   section (same left edge as the content-width frame). */
	max-width: none;
	padding-block: clamp(120px, 16vw, 240px);
	padding-inline: max(var(--eg-edge), calc((100% - var(--global-content-width, 1440px)) / 2 + var(--eg-edge)));
	clip-path: inset(0);
	isolation: isolate;
}

:is(.eg-section--band, [class*="is-style-eg-band-"]) .eg-section__frame::after {
	content: "";
	position: absolute;
	inset: -10% 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgb(8 9 15 / 0.55), rgb(8 9 15 / 0.1) 70%),
		#0d1224 url("../img/eg-bg-band-1.webp") center / cover no-repeat;
	transform: translate3d(0, calc(var(--eg-par, 0.5) * -80px + 40px), 0);
	animation: eg-bg-drift 40s ease-in-out infinite alternate;
}

:is(.eg-band--2, .is-style-eg-band-2) .eg-section__frame::after { background-image: linear-gradient(90deg, rgb(8 9 15 / 0.55), rgb(8 9 15 / 0.1) 70%), url("../img/eg-bg-band-2.webp"); }
:is(.eg-band--3, .is-style-eg-band-3) .eg-section__frame::after { background-image: linear-gradient(90deg, rgb(8 9 15 / 0.55), rgb(8 9 15 / 0.1) 70%), url("../img/eg-bg-band-3.webp"); }
:is(.eg-band--4, .is-style-eg-band-4) .eg-section__frame::after { background-image: linear-gradient(90deg, rgb(8 9 15 / 0.55), rgb(8 9 15 / 0.1) 70%), url("../img/eg-bg-band-4.webp"); }

/* Bands sit flush: no divider line above or below */
:is(.eg-section--band, [class*="is-style-eg-band-"]) .eg-section__frame::before,
:is(.eg-section--band, [class*="is-style-eg-band-"]) + .eg-section .eg-section__frame::before {
	display: none;
}

:is(.eg-section--band, [class*="is-style-eg-band-"]) .eg-section__index {
	color: #c9cfdb;
}

.single-content .eg-section .eg-lit {
	max-width: 20ch;
	margin: 0;
	color: #fff;
	font-size: clamp(2.5rem, 5.6vw, 6rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-wrap: balance;
	text-box: trim-start cap alphabetic;
}

.eg-fx .eg-lit__w {
	color: rgb(255 255 255 / 0.16);
	transition: color 0.45s ease;
}

.eg-fx .eg-lit__w.is-lit {
	color: #fff;
}

.single-content :is(.eg-section--band, [class*="is-style-eg-band-"]) .eg-lede {
	color: #c9cfdb;
}

/* ------------------------------------------------------------------------
   Prism trace: add .eg-prism to any section. effects.js puts a large, faint
   triangle at the browser's right edge while that section is on screen.
   ------------------------------------------------------------------------ */
.eg-prism__art {
	position: fixed;
	top: 58%;
	right: -34vw; /* mostly off-screen: a structure behind the page, not an object beside a row */
	z-index: 0;
	width: min(78vw, 1250px);
	opacity: 0;
	transform: translateY(-50%) rotate(calc(-24deg + var(--eg-rot, 0deg)));
	transform-origin: 50% 55%;
	pointer-events: none;
	will-change: transform, opacity;
}

.eg-prism__art svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.eg-prism__lines line {
	fill: none;
	stroke: rgb(203 184 238 / 0.32);
	stroke-width: 1;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	visibility: hidden;
}

/* Facets: a grey version of the icon, with a hint of lavender on the two purple faces */
.eg-prism__facets polygon {
	stroke: none;
	opacity: calc(var(--eg-fill, 0) * var(--eg-facet, 0.05));
}

.eg-prism__facets .f1 { fill: #c9cfdb; --eg-facet: 0.04; }
.eg-prism__facets .f2 { fill: #c9cfdb; --eg-facet: 0.02; }
.eg-prism__facets .f3 { fill: #8b9bbd; --eg-facet: 0.05; }
.eg-prism__facets .f4 { fill: #8b9bbd; --eg-facet: 0.07; }
.eg-prism__facets .f5 { fill: #cbb8ee; --eg-facet: 0.09; }
.eg-prism__facets .f6 { fill: #cbb8ee; --eg-facet: 0.05; }

/* ------------------------------------------------------------------------
   Pinned chapter: sticky diagram + scrolling steps
   ------------------------------------------------------------------------ */
.eg-chapter {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	column-gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

.eg-chapter__stage {
	position: sticky;
	top: calc(var(--eg-chrome-height, 80px) + var(--wp-admin--admin-bar--height, 0px) + 48px);
}

.eg-chapter__stage svg {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	overflow: visible;
}

.eg-track {
	fill: none;
	stroke: var(--global-palette6);
	stroke-width: 1;
	opacity: 0.6;
}

.eg-track__fill {
	fill: none;
	stroke: var(--eg-lav, #cbb8ee);
	stroke-width: 2;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.eg-core {
	fill: var(--eg-lav, #cbb8ee);
	animation: eg-core-pulse 2.4s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes eg-core-pulse {
	50% {
		transform: scale(1.8);
		opacity: 0.4;
	}
}

.eg-node__dot {
	fill: var(--global-palette8);
	stroke: var(--global-palette5);
	stroke-width: 1.5;
	transition: fill 0.4s, stroke 0.4s;
}

.eg-node__halo {
	fill: none;
	stroke: var(--eg-lav, #cbb8ee);
	stroke-width: 1;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.5);
	transition: opacity 0.4s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.eg-node text {
	fill: var(--global-palette5);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: fill 0.4s;
}

.eg-node.is-done .eg-node__dot {
	fill: rgb(203 184 238 / 0.35);
	stroke: var(--eg-lav, #cbb8ee);
}

.eg-node.is-active .eg-node__dot {
	fill: var(--eg-lav, #cbb8ee);
	stroke: var(--eg-lav, #cbb8ee);
}

.eg-node.is-active .eg-node__halo {
	opacity: 1;
	transform: none;
}

.eg-node:is(.is-active, .is-done) text {
	fill: var(--global-palette3);
}

.eg-steps {
	counter-reset: eg-step;
}

.eg-step {
	padding-block: clamp(56px, 16vh, 160px);
	border-top: 1px solid var(--global-palette7);
}

.eg-step:first-child {
	padding-top: 8px;
	border-top: 0;
}

.eg-fx .eg-step {
	opacity: 0.28;
	transition: opacity 0.45s ease;
}

.eg-fx .eg-step.is-active {
	opacity: 1;
}

.single-content .eg-step h3 {
	margin: 0;
	font-size: clamp(2rem, 3.4vw, 3.5rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.025em;
}

.single-content .eg-step h3::before {
	counter-increment: eg-step;
	content: counter(eg-step, decimal-leading-zero);
	display: block;
	margin-bottom: 14px;
	color: var(--eg-lav, #cbb8ee);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
}

.single-content .eg-step p {
	max-width: 44ch;
	margin: 16px 0 0;
	color: var(--global-palette4);
	font-size: 1.0625rem;
}

@media (max-width: 900px) {
	.eg-chapter {
		grid-template-columns: 1fr;
	}

	.eg-chapter__stage {
		position: relative;
		top: auto;
		max-width: 400px;
		margin-bottom: 24px;
	}

	.eg-step {
		padding-block: 40px;
	}

	.eg-prism__art {
		right: -70vw;
		width: 150vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.eg-section--band, [class*="is-style-eg-band-"]) .eg-section__frame::after,
	.eg-core {
		animation: none;
	}
}

/* ------------------------------------------------------------------------
   Corner glow (opt-in): add the class eg-glow to a section or group block
   (Advanced > Additional CSS class). Soft light rising from the lower left.
   Retune per block with --eg-glow-core / --eg-glow-mid / --eg-glow-strength.
   Not for statement bands: their background image covers it.
   The hero version lives in hero.css (Hero panel toggle).
   ------------------------------------------------------------------------ */
:is(.eg-glow, .is-style-eg-glow) {
	--eg-glow-core: #aa78ff; /* bright violet center (solid; the gradient sets the fade) */
	--eg-glow-mid: #694e9b;  /* brand purple wash */
	--eg-glow-strength: 1;
}

:is(.eg-glow, .is-style-eg-glow):not(.eg-hero) {
	position: relative;
	isolation: isolate;
	overflow: clip; /* clip, not hidden: keeps sticky children (jump nav, pinned chapters) working */
}

:is(.eg-glow, .is-style-eg-glow):not(.eg-hero)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 55% 70% at 0% 80%, color-mix(in srgb, var(--eg-glow-core) 50%, transparent) 0%, color-mix(in srgb, var(--eg-glow-core) 28%, transparent) 30%, color-mix(in srgb, var(--eg-glow-core) 10%, transparent) 58%, transparent 85%),
		radial-gradient(ellipse 110% 120% at 0% 80%, color-mix(in srgb, var(--eg-glow-mid) 50%, transparent) 0%, color-mix(in srgb, var(--eg-glow-mid) 22%, transparent) 40%, color-mix(in srgb, var(--eg-glow-mid) 6%, transparent) 70%, transparent 95%);
	/* Fade out before the bottom edge so there's no hard line into the next row */
	-webkit-mask-image: linear-gradient(to top, transparent, #000 35%);
	mask-image: linear-gradient(to top, transparent, #000 35%);
	mix-blend-mode: screen;
	transform-origin: 0 100%;
	opacity: var(--eg-glow-strength);
	animation: eg-glow-row 14s ease-in-out infinite alternate;
}

@keyframes eg-glow-row {
	to {
		scale: 1.12;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.eg-glow, .is-style-eg-glow):not(.eg-hero)::before {
		animation: none;
	}
}

/* ------------------------------------------------------------------------
   Legal / long-form text (Privacy Policy, Terms, Mobile Data Policy; single posts use .eg-section--prose)
   Outer group: "eg-section eg-section--legal" (Full width), then the usual
   eg-section__frame > eg-section__index + eg-section__body. Plain paragraph,
   heading and list blocks go straight into the body; no classes needed on them.
   Set the page's Hero style to "Compact".
   ------------------------------------------------------------------------ */
:is(.eg-section--legal, .eg-section--prose) .eg-section__frame {
	min-height: 55vh; /* short policies still fill the page above the footer */
	padding-block: clamp(56px, 7vw, 104px) clamp(72px, 9vw, 128px);
	align-content: start;
}

:is(.eg-section--legal, .eg-section--prose) .eg-section__index {
	position: sticky;
	top: calc(var(--eg-chrome-height, 80px) + var(--wp-admin--admin-bar--height, 0px) + 32px);
	flex-wrap: wrap;
	row-gap: 6px;
}

:is(.eg-section--legal, .eg-section--prose) .eg-section__body {
	display: block;
	grid-column: 4 / -1;
	max-width: 46rem !important; /* readable line length; !important beats the section-wide max-width: none reset near the top of this file */
}

.single-content :is(.eg-section--legal, .eg-section--prose) .eg-section__body :is(p, li) {
	color: var(--global-palette4);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.single-content :is(.eg-section--legal, .eg-section--prose) .eg-section__body p {
	margin: 0 0 1.1em;
}

.single-content :is(.eg-section--legal, .eg-section--prose) .eg-section__body h2 {
	margin: 2.2em 0 0.7em;
	color: var(--global-palette3);
	font-size: clamp(1.375rem, 1.8vw, 1.75rem);
	font-weight: 500;
	line-height: 1.2;
}

.single-content :is(.eg-section--legal, .eg-section--prose) .eg-section__body h3 {
	margin: 1.8em 0 0.5em;
	color: var(--global-palette3);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

.single-content :is(.eg-section--legal, .eg-section--prose) .eg-section__body :is(h2, h3):first-child {
	margin-top: 0;
}

.single-content :is(.eg-section--legal, .eg-section--prose) .eg-section__body :is(ul, ol) {
	margin: 0 0 1.25em;
	padding-left: 1.25em;
}

.single-content :is(.eg-section--legal, .eg-section--prose) .eg-section__body li {
	margin: 0 0 0.4em;
}

.single-content :is(.eg-section--legal, .eg-section--prose) .eg-section__body li::marker {
	color: var(--eg-lav, #cbb8ee);
}

.single-content :is(.eg-section--legal, .eg-section--prose) .eg-section__body a {
	color: var(--eg-lav, #cbb8ee);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.single-content :is(.eg-section--legal, .eg-section--prose) .eg-section__body a:hover {
	color: var(--global-palette3);
}

.single-content :is(.eg-section--legal, .eg-section--prose) .eg-section__body strong {
	color: var(--global-palette3);
	font-weight: 600;
}

/* A one-paragraph policy reads as a lede instead of a lone line of body copy */
.single-content .eg-section--legal .eg-section__body:not(:has(h2, h3)) p {
	max-width: 56ch;
	font-size: clamp(1.125rem, 1.4vw, 1.3rem);
	line-height: 1.6;
}

/* No staggered lift on long text: dozens of blocks would take seconds to appear */
.eg-motion :is(.eg-section--legal, .eg-section--prose) .eg-lift {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (max-width: 900px) {
	:is(.eg-section--legal, .eg-section--prose) .eg-section__index {
		position: static;
	}

	:is(.eg-section--legal, .eg-section--prose) .eg-section__body {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------------
   Theme templates: 404, single post, post archives (404.php, single.php, archive.php)
   ------------------------------------------------------------------------ */
.eg-template {
	margin: 0;
}

.eg-template .eg-section__frame {
	min-height: 55vh;
	align-content: start;
}

/* Text links in a wrapping row (404 page) */
.single-content .eg-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-content .eg-links li {
	margin: 0;
}

/* Post list: archives (.eg-post) and the News list pattern (core Query Loop) */
.single-content .eg-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	column-gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--global-palette7);
}

.single-content .eg-posts > li {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 28px 0 32px;
	border-bottom: 1px solid var(--global-palette7);
}

.single-content .eg-posts .eg-post__date {
	margin: 0;
	color: var(--global-palette4);
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.single-content .eg-section .eg-posts .eg-post__title {
	margin: 0;
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	font-weight: 500;
	line-height: 1.2;
	text-wrap: balance;
}

.single-content .eg-posts .eg-post__title a {
	color: var(--global-palette3);
	text-decoration: none;
}

.single-content .eg-posts .eg-post__title a:hover,
.single-content .eg-posts .eg-post__title a:focus-visible {
	color: var(--eg-lav, #cbb8ee);
}

.single-content .eg-posts .eg-post__excerpt,
.single-content .eg-posts .eg-post__excerpt p {
	margin: 0;
	color: var(--global-palette4);
	font-size: 1rem;
	line-height: 1.6;
}

.single-content .eg-posts .wp-block-post-excerpt__more-text {
	display: none; /* the title is the link */
}

/* Pagination: archive (the_posts_pagination) and Query Loop */
.single-content .eg-section :is(.pagination .nav-links, .wp-block-query-pagination) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
}

.single-content .eg-section :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--global-palette7);
	color: var(--global-palette3);
	font-size: 0.9375rem;
	text-decoration: none;
}

.single-content .eg-section .page-numbers.current {
	border-color: var(--eg-lav, #cbb8ee);
	color: var(--eg-lav, #cbb8ee);
}

.single-content .eg-section a:is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover {
	border-color: var(--global-palette3);
}

.single-content .eg-section .wp-block-query-pagination-numbers {
	display: flex;
	gap: 8px;
}

/* Single post extras */
.single-content .eg-section .eg-post__image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 40px;
}

.single-content .eg-section .eg-post__back {
	margin-top: 48px;
}

/* ------------------------------------------------------------------------
   Home page (2026-10 copy): ruled lede, lists in spec items, label row,
   news card, centered closing
   ------------------------------------------------------------------------ */

/* Lede with a rule above it, full body width */
.single-content .eg-section .eg-lede.eg-ruled {
	max-width: none;
	padding-top: 32px;
	border-top: 1px solid var(--global-palette6);
}

/* Bullet list inside a spec item */
.single-content .eg-spec ul {
	display: grid;
	gap: 6px;
	margin: 0;
	padding-left: 1.1em;
	color: var(--global-palette4);
	font-size: 1rem;
	line-height: 1.45;
}

.single-content .eg-spec li {
	margin: 0;
}

.single-content .eg-spec li::marker {
	color: var(--eg-lav, #cbb8ee);
}

/* Label row: "A + B + C" (List block, class eg-chips). Desktop: one row, items and
   "+" signs spread evenly (each li is display: contents so its text and its "+" are
   both flex items of the row). Line breaks inside an item come from Shift+Enter. */
.single-content .eg-section ul.eg-chips {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 18px 0;
	list-style: none;
	border-block: 1px solid var(--global-palette6);
	color: var(--eg-lav, #cbb8ee);
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.single-content .eg-chips li {
	display: contents;
}

.single-content .eg-chips li + li::before {
	content: "+";
	content: "+" / "";
	color: #fff;
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
}

/* Tablet and down: the row becomes a tidy grid of labels (no "+", no forced breaks) */
@media (max-width: 1024px) {
	.single-content .eg-section ul.eg-chips {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
		gap: 14px 32px;
	}

	.single-content .eg-chips li {
		display: block;
	}

	.single-content .eg-chips li + li::before {
		display: none;
	}

	.single-content .eg-chips br {
		display: none;
	}
}

/* Narrow screens: forced line breaks in wide headings create orphans; let them balance */
@media (max-width: 782px) {
	.single-content .eg-section .eg-statement.eg-wide br {
		display: none;
	}
}

/* News card (static item on the home page) */
.single-content .eg-news-card {
	display: grid;
	gap: 16px;
	padding-top: 32px;
	border-top: 1px solid var(--global-palette6);
}

.single-content .eg-news-card .eg-mono {
	color: var(--eg-lav, #cbb8ee);
}

.single-content .eg-news-card h3 {
	max-width: 40ch;
	margin: 0;
	font-size: clamp(1.25rem, 1.6vw, 1.6rem);
	font-weight: 500;
	line-height: 1.25;
}

.single-content .eg-news-card p:not(.eg-mono) {
	max-width: 72ch;
	color: var(--global-palette4);
}

.single-content .eg-news-card .wp-block-buttons {
	margin-top: 8px;
}

/* Centered section (no index rail): add class eg-section--center */
.eg-section--center .eg-section__frame {
	display: block;
}

.eg-section--center .eg-section__index {
	display: none;
}

.eg-section--center .eg-section__body {
	justify-items: center;
}

.single-content .eg-section--center .eg-section__body > *,
.single-content .eg-section--center .eg-section__body :is(.wp-block-group__inner-container, [class*="is-layout-"]) > * {
	margin-inline: auto !important;
	text-align: center;
}

.single-content .eg-section--center .eg-statement,
.single-content :is(.eg-section--closing, .is-style-eg-closing).eg-section--center .eg-statement {
	max-width: none;
	font-size: clamp(2.25rem, 4.8vw, 4.75rem);
}

.eg-section--center .wp-block-buttons {
	justify-content: center;
}

/* Full-width heading or lede (class eg-wide): drops the measure cap */
.single-content .eg-section .eg-statement.eg-wide,
.single-content .eg-section .eg-lede.eg-wide {
	max-width: none;
}

/* Government button: light gray outline to set it apart from the violet Enterprise button
   (#c9cfdb, about 13:1 on the page); fills light gray with dark text on hover.
   Add class eg-btn-gov to a Button block (Advanced > Additional CSS class). */
.single-content .wp-block-button.eg-btn-gov .wp-block-button__link {
	border-color: #c9cfdb;
	color: var(--global-palette3); /* white text and arrow; gray border */
}

.single-content .wp-block-button.eg-btn-gov .wp-block-button__link:is(:hover, :focus-visible) {
	background: #c9cfdb;
	border-color: #c9cfdb;
	box-shadow: 0 0 24px rgb(201 207 219 / 0.35);
	color: #08090e;
}


/* ------------------------------------------------------------------------
   Glow violet accents (--eg-glow, style.css) on the plain dark sections only.
   Band, closing and hero backgrounds keep the lavender (violet fails there).
   ------------------------------------------------------------------------ */
/* Section number only; the small label words keep their quieter colors (bright violet
   at that size is hard to read even though it passes). */
.eg-section:not(:is(.eg-section--band, [class*="is-style-eg-band-"], .eg-section--closing, .is-style-eg-closing)) .eg-section__index strong {
	color: var(--eg-glow);
}

.single-content .eg-section:not(:is(.eg-section--band, [class*="is-style-eg-band-"], .eg-section--closing, .is-style-eg-closing)) .eg-spec li::marker {
	color: var(--eg-glow);
}

.eg-section:not(:is(.eg-section--band, [class*="is-style-eg-band-"], .eg-section--closing, .is-style-eg-closing)) .eg-spec::before {
	background: var(--eg-glow);
	box-shadow: 0 0 12px var(--eg-glow-soft);
}

.single-content .eg-section:not(:is(.eg-section--band, [class*="is-style-eg-band-"], .eg-section--closing, .is-style-eg-closing)) .eg-link a:hover {
	color: var(--eg-glow);
}

/* Post card meta row: category link + date (archives and the News list Query Loop) */
.single-content .eg-posts .eg-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.single-content .eg-posts .eg-post__cat,
.single-content .eg-posts .eg-post__cat a {
	margin: 0;
	color: var(--eg-lav, #cbb8ee);
	text-decoration: none;
}

.single-content .eg-posts .eg-post__cat a:hover,
.single-content .eg-posts a.eg-post__cat:hover {
	text-decoration: underline;
}

/* Editor-only instruction box in the post starters (inc/post-starters.php).
   The PHP removes it from the front end, so this styling only ever shows in the editor. */
.eg-editor-note {
	margin-bottom: 32px;
	padding: 20px 24px;
	border-left: 4px solid #e0b100;
	background: #fff4c2;
	color: #1a1a1a;
}

.eg-editor-note :is(p, li, strong, em, a) {
	color: #1a1a1a;
}

.eg-editor-note ul {
	margin: 12px 0 0;
	padding-left: 1.2em;
}

/* Stacked layout: the 28px gap under the index label was being zeroed by the
   section paragraph reset (.single-content .eg-section p); restore it. */
@media (max-width: 900px) {
	.single-content .eg-section .eg-section__index {
		margin-bottom: 24px;
	}

	.single-content .eg-section.eg-section--jumpnav .eg-section__index {
		margin-bottom: 12px;
	}
}

/* Template rails (archive, single post, 404): the bold part is a word, not a number,
   so it keeps the lavender like other small label text (violet is for numbers only).
   On archives and posts it links back up (News & Resources / the category). */
.eg-template .eg-section .eg-section__index strong,
.eg-template .eg-section .eg-section__index strong a {
	color: var(--eg-lav, #cbb8ee);
	text-decoration: none;
}

.eg-template .eg-section .eg-section__index strong a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Home: latest post card (core Query Loop, 1 post) reuses .eg-news-card */
.single-content .eg-news-latest .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-content .eg-news-latest .wp-block-post-template > li {
	margin: 0;
}

.single-content .eg-news-card .eg-news-card__cat,
.single-content .eg-news-card .eg-news-card__cat a {
	margin: 0;
	color: var(--eg-lav, #cbb8ee);
	text-decoration: none;
}

.single-content .eg-news-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.single-content .eg-news-card .wp-block-post-title a:is(:hover, :focus-visible) {
	color: var(--eg-lav, #cbb8ee);
}

.single-content .eg-news-card .eg-news-card__excerpt,
.single-content .eg-news-card .eg-news-card__excerpt p {
	margin: 0;
	max-width: 72ch;
	color: var(--global-palette4);
	font-style: italic;
}

.single-content .eg-news-card .wp-block-post-excerpt__more-text {
	display: none;
}

/* Read More (core Read More block) dressed as the outline button */
.single-content .eg-news-card a.eg-news-card__more {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	width: max-content;
	min-height: 46px;
	margin-top: 8px;
	padding: 10px 20px;
	border: 1px solid var(--eg-glow, #9d61fa);
	color: var(--global-palette3); /* white text and arrow, like the other buttons */
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.single-content .eg-news-card a.eg-news-card__more::after {
	content: "";
	flex-shrink: 0;
	width: 0.8em;
	height: 0.8em;
	background-color: currentColor;
	-webkit-mask: var(--eg-arrow-icon) center / contain no-repeat;
	mask: var(--eg-arrow-icon) center / contain no-repeat;
	transition: transform 0.2s ease;
}

.single-content .eg-news-card a.eg-news-card__more:is(:hover, :focus-visible) {
	background: var(--eg-glow, #9d61fa);
	box-shadow: 0 0 24px var(--eg-glow-soft, rgb(157 97 250 / 0.45));
	color: #08090e;
}

.single-content .eg-news-card a.eg-news-card__more:is(:hover, :focus-visible)::after {
	transform: translate(2px, -2px);
}

/* Comparison rows: header row (CHALLENGE | SOLUTION) and a smaller second line in the label */
.single-content .eg-compare__row.eg-compare__head p,
.single-content .eg-compare__row.eg-compare__head p:first-child {
	color: var(--eg-lav, #cbb8ee);
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.single-content .eg-compare__row.eg-compare__head {
	padding-block: 14px;
}

.single-content .eg-compare__sub {
	display: block;
	margin-top: 6px;
	color: var(--global-palette4);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.45;
}

/* Pull quote inside a section */
.single-content .eg-section .eg-pullquote {
	margin: 0;
	padding: 4px 0 4px 28px;
	border-left: 2px solid var(--eg-glow, #9d61fa);
}

.single-content .eg-section .eg-pullquote p {
	color: var(--global-palette3);
	font-size: clamp(1.25rem, 1.8vw, 1.6rem);
	line-height: 1.45;
}

.single-content .eg-section .eg-pullquote cite {
	display: block;
	margin-top: 18px;
	color: var(--global-palette4);
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 0.75rem;
	font-style: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Small reference list (e.g. Orders & Directives) and fine-print disclaimer */
.single-content .eg-orders {
	display: grid;
	gap: 10px;
	padding: 20px 24px;
	border: 1px solid var(--global-palette7);
}

.single-content .eg-orders .eg-mono {
	color: var(--eg-lav, #cbb8ee);
}

.single-content .eg-orders p:not(.eg-mono) {
	color: var(--global-palette4);
	font-size: 1rem;
	line-height: 1.6;
}

.single-content .eg-section .eg-disclaimer {
	max-width: 72ch;
	color: var(--global-palette4);
	font-size: 0.875rem;
	line-height: 1.55;
}