@charset "UTF-8";
/*
 * Athena XAI: product page sections (patterns/product-*.php).
 * Loaded on the four product pages and in the editor. Motion is transform and
 * opacity only; see assets/js/product-sections.js. The homepage hero's grid,
 * integration cards, client strip and final CTA come from theme.css.
 */

/* Section rhythm: every other section sits on the surface colour. */
.athena-product-steps,
.athena-product-deep,
.athena-related {
	background: var(--wp--preset--color--surface);
}

/* Grids built on flow-layout groups: cancel the flow margins. */
.athena-steps > *,
.athena-caps > *,
.athena-step > *,
.athena-tabset > *,
.athena-tabset__panel > *,
.athena-match > *,
.athena-match__side > *,
.athena-match__product > *,
.athena-related__grid > *,
.athena-convo > * {
	margin-block: 0 !important;
}

/* ── Hero ─────────────────────────────────────────────────────── */

.athena-product-hero h1 {
	font-size: clamp(2.375rem, 1.6rem + 2.6vw, 3.75rem);
}

.athena-availability {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* A demo needs the room: the hero's columns are even. */
.athena-product-hero .athena-hero__grid {
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 4vw, 4rem) !important;
	/* The copy is centred on the demo, as on the homepage (owner, 2026-11-06). */
	align-items: center;
}

.athena-product-hero .athena-hero__copy {
	padding-top: 0;
}

/* The logo strip belongs to the hero; it doesn't need a full section's air. */
.athena-product-hero + .athena-clients {
	padding-top: var(--wp--preset--spacing--40) !important;
	padding-bottom: var(--wp--preset--spacing--40) !important;
}

@media (max-width: 960px) {
	.athena-product-hero .athena-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Stacked hero: a wide, interactive demo under the copy (inc/product-pages.php hero()). */
.athena-product-hero--stacked .athena-hero__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.75rem, 3.5vw, 3rem) !important;
}

.athena-product-hero--stacked .athena-hero__copy {
	max-width: 46rem;
}

/* The demo's #demo anchor clears the sticky header. */
.athena-product-hero--stacked [data-athena-story] {
	scroll-margin-top: 6rem;
}

/* ── How it works ─────────────────────────────────────────────── */

.athena-steps {
	--athena-step-gap: 1.5rem;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem var(--athena-step-gap) !important;
	margin-top: clamp(2rem, 4vw, 3rem) !important;
	counter-reset: athena-step;
}

.athena-step {
	position: relative;
	z-index: 1;
	display: grid;
	align-content: start;
	gap: 0.5rem;
	counter-increment: athena-step;
}

/* Marker. The default state is done: a check mark, as with no JavaScript or reduced motion. */
.athena-step::before {
	content: "\2713";
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 0.5rem;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-weight: 750;
	transition: transform 0.45s var(--athena-ease);
}

/* The line from this marker's centre to the next one's, so it always ends on the marker. */
.athena-step:not(:last-child)::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 1.1875rem;
	left: 1.25rem;
	width: calc(100% + var(--athena-step-gap));
	height: 2px;
	background: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) 0 0 / 100% 100% no-repeat, var(--athena-border-strong);
	transition: background-size 0.7s var(--athena-ease);
}

.athena-steps.is-live .athena-step:not(.is-done)::after {
	background-size: 0 100%;
}

/* Current: number on a filled marker with a ring, heavier title. A stroke rather than a
   weight, so a title never rewraps and moves the page while the steps run. */
.athena-step.is-current::before {
	content: counter(athena-step);
	box-shadow: 0 0 0 4px var(--wp--preset--color--accent-soft);
	transform: scale(1.14);
}

.athena-step.is-current h3 {
	-webkit-text-stroke: 0.03em currentColor;
}

/* Upcoming: number on an outlined marker; text is never dimmed. */
.athena-steps.is-live .athena-step:not(.is-current):not(.is-done)::before {
	content: counter(athena-step);
	border-color: var(--athena-border-strong);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

/* Numbered process steps (steps( …, $numbered )): a static sequence, the number on every
   marker. product-sections.js leaves them alone. */
.athena-steps--numbered .athena-step::before {
	content: counter(athena-step);
}

.athena-step h3 {
	font-size: var(--wp--preset--font-size--large);
}

.athena-step p {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 860px) {
	.athena-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--athena-step-gap) !important;
	}

	.athena-step:not(:last-child)::after {
		top: 1.25rem;
		left: 1.1875rem;
		width: 2px;
		height: calc(100% + var(--athena-step-gap));
	}

	.athena-steps.is-live .athena-step:not(.is-done)::after {
		background-size: 100% 0;
	}

	.athena-step {
		padding-left: 3.5rem;
	}

	.athena-step::before {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
	}
}

/* ── Capabilities ─────────────────────────────────────────────── */

.athena-caps {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem !important;
	margin-top: clamp(2rem, 4vw, 3rem) !important;
}

/* Five cards: three over two on six tracks, the last two each half the row, so no single
   card stretches over two columns with one short line. The card itself (.athena-cap, its
   icon tile and icons) is shared: theme.css. */
@media (min-width: 961px) {
	.athena-caps:has(> .athena-cap:nth-child(5):last-child) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.athena-caps:has(> .athena-cap:nth-child(5):last-child) > .athena-cap {
		grid-column: span 2;
	}

	.athena-caps:has(> .athena-cap:nth-child(5):last-child) > .athena-cap:nth-child(n+4) {
		grid-column: span 3;
	}
}

/* Related products: the integration card with the capability icon tile. */
.athena-related__card::before {
	content: "";
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 0.5rem;
	border-radius: 12px;
	background-color: var(--wp--preset--color--accent-soft);
	background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-mask: var(--athena-icon) center / 1.5rem no-repeat;
	mask: var(--athena-icon) center / 1.5rem no-repeat;
}

.athena-related__card::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 1.75rem;
	left: 1.75rem;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-soft);
}

.athena-related__card::before {
	position: relative;
	z-index: 1;
}

/* Related products: the integration card with an icon. Same height across the row. */
.athena-related__grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem !important;
	margin-top: clamp(2rem, 4vw, 3rem) !important;
}

.athena-related__card::before {
	flex: none;
	margin-bottom: 0.25rem;
}

.athena-related__card .athena-integration__type {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	letter-spacing: 0;
	text-transform: none;
}

@media (max-width: 960px) {
	.athena-related__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Capability icons (.athena-cap--*): theme.css, shared with the home page. */

.athena-product-capabilities .athena-arrow-link {
	margin: 0;
}

.athena-docs-links {
	display: flex !important;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin-top: var(--wp--preset--spacing--40) !important;
}

/* The gap spaces the links; flow margins would stagger them in the row. */
.athena-docs-links > * {
	margin: 0 !important;
}

@media (max-width: 960px) {
	.athena-caps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.athena-caps {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Deep dive: tabs ──────────────────────────────────────────── */

.athena-tabset {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem !important;
	margin-top: clamp(2rem, 4vw, 3rem) !important;
}

/* Without JavaScript every panel shows, stacked, with its own label as a title. */
.athena-tabset__list {
	display: none;
}

.athena-tabset__label {
	margin-bottom: 0.75rem !important;
	font-weight: 700;
}

.has-js .athena-tabset__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.has-js .athena-tabset__label {
	display: none;
}

/* One cell, so the tallest panel reserves the height. */
.has-js .athena-tabset__panel {
	grid-area: 2 / 1;
	min-width: 0;
}

.has-js .athena-tabset__panel:not(.is-active) {
	visibility: hidden;
}

.athena-tabset__tab {
	min-height: 2.75rem;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--athena-border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--raised);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Hover devices only: on touch, :hover sticks to the last tapped tab. */
@media (hover: hover) {
	.athena-tabset__tab:hover {
		border-color: var(--wp--preset--color--brand);
	}
}

.athena-tabset__tab[aria-selected="true"] {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.athena-tabset__tab:focus-visible,
.athena-tabset__panel:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.athena-tabset__panel {
	border-radius: 20px;
}

/* Stacked walkthrough: its steps differ by up to 270 px, so each step takes its own
   height instead of the tallest one's. Only a visitor's tap changes it, and only what
   is below the tabs moves (no layout shift). Deep-dive examples keep the shared cell. */
@media (max-width: 960px) {
	/* Beats the walkthrough's `display: grid` for its panels further down. */
	.has-js .athena-walkthrough > .athena-tabset__panel:not(.is-active) {
		display: none;
	}
}

/* Phones: one row of tabs that scrolls sideways, faded at the end. The end padding
   lets the last tab scroll clear of the fade; the small inset keeps focus rings. */
@media (max-width: 781px) {
	.has-js .athena-tabset__list {
		flex-wrap: nowrap;
		margin-inline: -4px;
		padding: 4px 2.5rem 4px 4px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
	}

	.has-js .athena-tabset__list::-webkit-scrollbar {
		display: none;
	}

	.athena-tabset__tab {
		flex: none;
		white-space: nowrap;
	}
}

/* Phones and small tablets: four steps don't fit one row below 782 px, so they sit two by
   two, every label whole (wrapped when it must) and nothing to scroll. Arrow keys still
   go 1 → 2 → 3 → 4. */
@media (max-width: 781px) {
	.has-js .athena-walkthrough .athena-tabset__list:has(> .athena-tabset__tab:nth-child(4):last-child) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-inline: 0;
		padding: 0;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.has-js .athena-walkthrough .athena-tabset__list:has(> .athena-tabset__tab:nth-child(4):last-child) > .athena-tabset__tab {
		padding-inline: 0.75rem;
		line-height: 1.25;
		white-space: normal;
	}

	/* Six steps or more (Search Merchandising has eight): one sideways row would scroll
	   past most of them, so every step shows, two per row, the dashboard's full screen
	   name wrapped onto two lines where it must. Arrow keys still go 1 → 2 → … in order. */
	.has-js .athena-walkthrough .athena-tabset__list:has(> .athena-tabset__tab:nth-child(6)) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.4rem;
		margin-inline: 0;
		padding: 0;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.has-js .athena-walkthrough .athena-tabset__list:has(> .athena-tabset__tab:nth-child(6)) > .athena-tabset__tab {
		padding: 0.35rem 0.7rem;
		border-radius: 14px;
		line-height: 1.2;
		text-align: start;
		white-space: normal;
	}
}

/* Deep-dive examples with six tabs (Omnispect's "How hybrid search works"): a regular grid
   rather than a row that wraps one tab onto its own line or scrolls sideways. Three per row
   on tablets, two per row on phones; every label whole, the DOM (and arrow-key) order kept. */
@media (max-width: 1100px) {
	.has-js .athena-tabset:not(.athena-walkthrough) > .athena-tabset__list:has(> .athena-tabset__tab:nth-child(6):last-child) {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.5rem;
		margin-inline: 0;
		padding: 0;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.has-js .athena-tabset:not(.athena-walkthrough) > .athena-tabset__list:has(> .athena-tabset__tab:nth-child(6):last-child) > .athena-tabset__tab {
		padding-inline: 0.75rem;
		line-height: 1.25;
		white-space: normal;
	}
}

@media (max-width: 600px) {
	.has-js .athena-tabset:not(.athena-walkthrough) > .athena-tabset__list:has(> .athena-tabset__tab:nth-child(6):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.4rem;
	}
}

/* What goes in, what Athena understood. */
.athena-match {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem !important;
}

.athena-match__side {
	display: grid;
	align-content: start;
	gap: 0.75rem;
	padding: clamp(1.25rem, 3vw, 2rem) !important;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 20px;
	background: var(--wp--preset--color--raised);
}

.athena-match__label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 750;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.athena-match__query {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 650;
	line-height: 1.25;
}

.athena-match__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.athena-match__chips li {
	margin: 0;
	padding: 0.35rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 25%, transparent);
	border-radius: 999px;
	background: var(--wp--preset--color--accent-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
}

.athena-match__note {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* One compact card that reads left to right: query → understood terms → products. */
.athena-match--flow {
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 3rem !important;
	padding: 1.5rem clamp(1.25rem, 3vw, 2rem) !important;
	border: 1px solid var(--athena-border-strong);
	border-radius: 20px;
	background: var(--wp--preset--color--raised);
}

.athena-match--flow .athena-match__side {
	position: relative;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	background: none;
}

.athena-match--flow .athena-match__side + .athena-match__side::before {
	content: "\2192" / "";
	position: absolute;
	top: 1.5rem;
	left: -2.1rem;
	color: var(--wp--preset--color--accent);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
}

.athena-match--flow .athena-match__query {
	font-size: var(--wp--preset--font-size--large);
}

.athena-match__product {
	display: grid !important;
	grid-template-columns: 3.25rem minmax(0, 1fr) auto;
	gap: 0.75rem !important;
	align-items: center;
}

.athena-match__thumb {
	overflow: hidden;
	border-radius: 8px;
	background: var(--athena-tile, var(--wp--preset--color--surface));
}

.athena-match__name {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	line-height: 1.3;
}

.athena-match__price {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 750;
}

/* Mini-conversations. */
.athena-convo {
	display: grid !important;
	gap: 0.75rem !important;
	padding: clamp(1.25rem, 3vw, 2rem) !important;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 20px;
	background: var(--wp--preset--color--raised);
}

.athena-bubble {
	max-width: min(36rem, 85%);
	padding: 0.7rem 1rem;
	font-size: var(--wp--preset--font-size--small);
}

.athena-bubble--shopper {
	justify-self: end;
	border-radius: 16px 16px 4px 16px;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font-weight: 600;
}

.athena-bubble--assistant {
	justify-self: start;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px 16px 16px 16px;
	background: var(--wp--preset--color--surface);
}

.athena-note {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.athena-deep-note {
	margin-top: 1rem !important;
}

@media (prefers-reduced-motion: no-preference) {
	.athena-tabset__panel.is-entering .athena-match__side,
	.athena-tabset__panel.is-entering .athena-bubble {
		animation: athena-panel-in 0.45s var(--athena-ease) both;
	}

	.athena-tabset__panel.is-entering .athena-match__side--to,
	.athena-tabset__panel.is-entering .athena-bubble:nth-child(2) {
		animation-delay: 0.16s;
	}

	.athena-tabset__panel.is-entering .athena-match__side--products,
	.athena-tabset__panel.is-entering .athena-bubble:nth-child(3) {
		animation-delay: 0.32s;
	}
}

@keyframes athena-panel-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 781px) {
	.athena-match,
	.athena-match--flow {
		grid-template-columns: minmax(0, 1fr);
	}

	.athena-match--flow {
		gap: 2.5rem !important;
	}

	.athena-match--flow .athena-match__side + .athena-match__side::before {
		content: "\2193" / "";
		top: -1.9rem;
		left: 0;
	}
}

/* ── Use-case cards (Visual Search) ───────────────────────────── */

.athena-usecases {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem !important;
	margin-top: clamp(2rem, 4vw, 3rem) !important;
}

.athena-usecases > * {
	margin-block: 0 !important;
}

.athena-usecase {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	padding: 1.75rem !important;
	border: 1px solid var(--athena-border-strong);
	border-radius: 20px;
	background: var(--wp--preset--color--raised);
}

.athena-usecase > * {
	margin: 0 !important;
}

.athena-usecase p {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* "Try it in the demo": shown only once the demo's script has wired it (.is-live); its
   room is kept from the start with JavaScript, so nothing shifts when it appears.
   Without JavaScript it takes no room at all. */
.athena-try {
	display: none !important;
}

.has-js .athena-try {
	display: flex !important;
	align-self: end;
	margin-top: 0.5rem !important;
	visibility: hidden;
}

.has-js .athena-try.is-live {
	visibility: visible;
}

.athena-usecase:has(.athena-try) {
	grid-template-rows: auto auto 1fr;
}

.athena-try .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

/* Four scenarios: one row on wide screens, two by two below. */
.athena-usecases:has(> :nth-child(4):last-child) {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1180px) {
	.athena-usecases:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.athena-usecases,
	.athena-usecases:has(> :nth-child(4):last-child) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Availability badge (catalog value in the class) ──────────── */

.athena-badge {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.4rem;
	width: fit-content;
	max-width: 100%;
	padding: 0.35rem 0.85rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 30%, transparent);
	border-radius: 999px;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	line-height: 1.35;
}

.athena-badge__key {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.athena-badge--available {
	border-color: color-mix(in srgb, var(--athena-success) 45%, transparent);
	background: color-mix(in srgb, var(--athena-success) 12%, var(--wp--preset--color--raised));
}

.athena-badge--in-development,
.athena-badge--planned-q4-2026,
.athena-badge--closed-access {
	border-color: var(--athena-border-strong);
	background: var(--wp--preset--color--surface);
}

.athena-badge--small {
	padding: 0.2rem 0.65rem;
	font-size: var(--wp--preset--font-size--x-small);
}

/* A full sentence: a callout, not a pill. */
.athena-badge--callout {
	display: block;
	padding: 0.85rem 1.1rem;
	border-width: 0 0 0 4px;
	border-color: var(--wp--preset--color--accent);
	border-radius: 0 12px 12px 0;
	background: var(--wp--preset--color--raised);
	font-size: var(--wp--preset--font-size--medium);
}

.athena-product-hero .athena-badge {
	margin-top: 0.25rem;
}

/* ── Problem → outcome ────────────────────────────────────────── */

.athena-outcome {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3rem !important;
	margin-top: clamp(2rem, 4vw, 3rem) !important;
}

.athena-outcome > *,
.athena-outcome__side > * {
	margin-block: 0 !important;
}

.athena-outcome__side {
	position: relative;
	display: grid;
	align-content: start;
	gap: 1rem;
	padding: clamp(1.5rem, 3vw, 2rem) !important;
	border: 1px solid var(--athena-border-strong);
	border-radius: 20px;
	background: var(--wp--preset--color--raised);
}

/* The outcome card keeps the site's normal card border; the arrow and the ticks carry
   the "after". */

.athena-outcome__side--after::before {
	content: "\2192" / "";
	position: absolute;
	top: 50%;
	left: -2.2rem;
	color: var(--wp--preset--color--accent);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	transform: translateY(-50%);
}

.athena-outcome__side h3 {
	font-size: var(--wp--preset--font-size--large);
}

.athena-outcome__side ul {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.athena-outcome__side li {
	position: relative;
	padding-left: 1.75rem;
	color: var(--wp--preset--color--muted);
}

/* A bold lead-in to scan by. */
.athena-outcome__side li strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 750;
}

.athena-outcome__side li::before {
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 750;
}

.athena-outcome__side--before li::before {
	content: "\2715" / "";
	color: var(--wp--preset--color--muted);
}

.athena-outcome__side--after li {
	color: var(--wp--preset--color--contrast);
}

.athena-outcome__side--after li::before {
	content: "\2713" / "";
	color: var(--athena-success);
}

@media (max-width: 781px) {
	.athena-outcome {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem !important;
	}

	.athena-outcome__side--after::before {
		content: "\2193" / "";
		top: -1.9rem;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* ── In the dashboard: walkthrough and recreated screens ──────── */

.athena-product-walkthrough {
	background: var(--wp--preset--color--surface);
}

/* Numbered tabs read as steps. */
.athena-walkthrough .athena-tabset__tab {
	font-variant-numeric: tabular-nums;
}

/* The tallest step reserves the height (tabset); every step's card fills it. */
.has-js .athena-walkthrough .athena-tabset__panel {
	display: grid;
}

.athena-walkthrough__step {
	display: grid !important;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(1.5rem, 4vw, 3rem) !important;
	align-items: start;
	padding: clamp(1.25rem, 3vw, 2rem) !important;
	border: 1px solid var(--athena-border-strong);
	border-radius: 20px;
	background: var(--wp--preset--color--raised);
}

.athena-walkthrough__step > *,
.athena-walkthrough__text > *,
.athena-ui > *,
.athena-ui__window > *,
.athena-ui__head > *,
.athena-ui__group > *,
.athena-ui__fields > *,
.athena-ui__buttons > *,
.athena-ui__dialog > * {
	margin-block: 0 !important;
}

.athena-walkthrough__text {
	display: grid;
	gap: 1rem;
}

.athena-walkthrough__text h3 {
	font-size: var(--wp--preset--font-size--x-large);
}

.athena-walkthrough__list {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding-left: 1.4rem;
}

.athena-walkthrough__list li::marker {
	color: var(--wp--preset--color--accent);
	font-weight: 750;
}

.athena-walkthrough__tip {
	padding: 0.75rem 1rem;
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.athena-ui {
	display: grid;
	gap: 0.5rem;
	min-width: 0;
}

.athena-ui__caption {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.athena-ui__window {
	display: grid;
	gap: 1rem;
	padding: 1.1rem 1.25rem 1.25rem !important;
	border: 1px solid var(--wp--preset--color--border);
	border-top: 2.25rem solid var(--wp--preset--color--surface);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--athena-shadow-raised);
	font-size: var(--wp--preset--font-size--small);
}

/* Window chrome: three dots in the title bar. */
.athena-ui__window {
	position: relative;
}

.athena-ui__window::before {
	content: "";
	position: absolute;
	top: -1.45rem;
	left: 1rem;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--athena-border-strong);
	box-shadow: 1rem 0 0 var(--athena-border-strong), 2rem 0 0 var(--athena-border-strong);
}

.athena-ui__head {
	display: grid;
	gap: 0.2rem;
}

.athena-ui__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 750;
	line-height: 1.25;
}

.athena-ui__subtitle {
	color: var(--wp--preset--color--muted);
}

.athena-ui__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0;
	padding: 0 0 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	list-style: none;
	color: var(--wp--preset--color--muted);
}

.athena-ui__tabs strong {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline 2px var(--wp--preset--color--accent);
	text-underline-offset: 0.5rem;
}

.athena-ui__tabs:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Phones: one row that scrolls sideways (product-sections.js opens it at the open
   tab, so it is often scrolled), faded at both ends; the padding lets the first and
   last tabs scroll clear of the fades. */
@media (max-width: 781px) {
	.athena-ui__tabs {
		flex-wrap: nowrap;
		padding-right: 2rem;
		padding-left: 1.5rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 2rem), transparent);
		mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 2rem), transparent);
	}

	.athena-ui__tabs::-webkit-scrollbar {
		display: none;
	}

	.athena-ui__tabs li {
		flex: none;
		white-space: nowrap;
	}
}

.athena-ui__group {
	display: grid;
	gap: 0.4rem;
}

.athena-ui__label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
}

.athena-ui__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.athena-ui__chips li {
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--x-small);
}

/* The highlighted control: an accent ring and fill, readable in both schemes. */
.athena-ui__chips li:has(.athena-ui__mark),
.athena-ui__btn.is-highlighted,
.athena-ui__field.is-highlighted {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	background: var(--wp--preset--color--accent-soft);
}

.athena-ui__mark {
	background: none;
	color: inherit;
	font-weight: 750;
}

.athena-ui__buttons {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.athena-ui__btn {
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--athena-border-strong);
	border-radius: 8px;
	background: var(--wp--preset--color--raised);
	font-weight: 650;
}

.athena-ui__btn.is-highlighted {
	border-color: var(--wp--preset--color--accent);
}

.athena-ui__fields {
	display: grid;
	gap: 0.35rem;
}

.athena-ui__fields--form {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.athena-ui__field {
	display: grid;
	gap: 0.1rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	overflow-wrap: anywhere;
}

.athena-ui__field strong {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
}

.athena-ui__dialog {
	display: grid;
	gap: 0.6rem;
	padding: 1rem !important;
	border: 1px dashed var(--athena-border-strong);
	border-radius: 12px;
}

/* The dashboard sidebar: an area and its pages, the step's page highlighted. */
.athena-ui__nav {
	display: grid;
	gap: 0.35rem;
	max-width: 18rem;
	padding: 0.75rem !important;
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
}

.athena-ui__nav > * {
	margin-block: 0 !important;
}

.athena-ui__nav-area {
	font-weight: 750;
}

.athena-ui__nav-area::after {
	content: "\2304" / "";
	margin-left: 0.4rem;
	color: var(--wp--preset--color--muted);
}

.athena-ui__nav-pages {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0 0 0 0.75rem;
	border-left: 2px solid var(--wp--preset--color--border);
	list-style: none;
}

.athena-ui__nav-pages li {
	padding: 0.3rem 0.6rem;
	border-radius: 8px;
}

.athena-ui__nav-pages li:has(.athena-ui__mark) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	background: var(--wp--preset--color--accent-soft);
}

/* Sidebar beside the page's main area (ui_layout()); stacked when the screen is narrow. */
.athena-ui__layout {
	display: grid;
	grid-template-columns: minmax(9rem, 0.75fr) minmax(0, 1.25fr);
	gap: 1rem;
	align-items: start;
}

.athena-ui__layout > *,
.athena-ui__main > * {
	margin-block: 0 !important;
}

.athena-ui__main {
	display: grid;
	gap: 0.75rem;
	min-width: 0;
}

@media (max-width: 960px) {
	.athena-walkthrough__step {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 560px) {
	.athena-ui__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 480px) {
	.athena-ui__fields--form {
		grid-template-columns: minmax(0, 1fr);
	}

	.athena-ui__window {
		padding: 1rem !important;
	}
}

/* ── Capabilities list (catalog rows) ─────────────────────────── */

.athena-caplist {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 2.5rem !important;
	margin-top: clamp(2rem, 4vw, 3rem) !important;
}

.athena-caplist > *,
.athena-caplist__item > * {
	margin-block: 0 !important;
}

.athena-caplist__item {
	display: grid;
	align-content: start;
	gap: 0.4rem;
	padding: 1.25rem 0 !important;
	border-top: 1px solid var(--athena-border-strong);
}

.athena-caplist__item :is(h3, h4) {
	font-size: var(--wp--preset--font-size--large);
}

/* A grouped list (capability_groups()): each group's title and line above its own rows. */
.athena-capgroup {
	margin-top: clamp(2rem, 4vw, 3rem) !important;
}

.athena-capgroup > *,
.athena-capgroup__head > * {
	margin-block: 0 !important;
}

.athena-capgroup__head {
	display: grid;
	gap: 0.3rem;
}

.athena-capgroup__head h3 {
	font-size: var(--wp--preset--font-size--x-large);
}

.athena-capgroup__lead {
	color: var(--wp--preset--color--muted);
}

.athena-capgroup .athena-caplist {
	margin-top: 1rem !important;
}

.athena-caplist__item p:not(.athena-badge) {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.athena-caplist__key {
	color: var(--wp--preset--color--contrast);
	font-weight: 650;
}

.athena-caplist__item .athena-badge {
	margin-top: 0.25rem;
}

/* A long list (inc/product-pages.php caplist_more()): the first rows, then "Show all N".
   Without JavaScript the button is hidden and every row shows. */
.has-js .athena-caplist.is-collapsed > .athena-caplist__item:nth-child(n + 7) {
	display: none;
}

.athena-caplist__toggle {
	display: none;
	margin-top: 1.5rem !important;
}

.has-js .athena-caplist__toggle {
	display: block;
}

.athena-caplist__more {
	min-height: 2.75rem;
	padding: 0.6rem 1.4rem;
	border: 1px solid var(--athena-border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--raised);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 650;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.athena-caplist__more:hover {
	border-color: var(--wp--preset--color--brand);
}

.athena-caplist__more:focus-visible,
.athena-caplist__item :is(h3, h4):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Both labels share one cell: the button keeps its width when it toggles. */
.athena-caplist__more-label {
	display: grid;
}

.athena-caplist__more-label > span {
	grid-area: 1 / 1;
	visibility: hidden;
}

.athena-caplist__more[aria-expanded="false"] [data-label="more"],
.athena-caplist__more[aria-expanded="true"] [data-label="less"] {
	visibility: inherit;
}

@media (max-width: 781px) {
	.athena-caplist {
		grid-template-columns: minmax(0, 1fr);
	}

	.has-js .athena-caplist.is-collapsed > .athena-caplist__item:nth-child(n + 5) {
		display: none;
	}

	.athena-caplist__more {
		width: 100%;
	}

	.athena-caplist__more-label {
		justify-items: center;
	}
}

/* ── Phones: body copy at 16 px ───────────────────────────────── */

@media (max-width: 781px) {
	.athena-step p,
	.athena-cap p,
	.athena-caplist__item p:not(.athena-badge),
	.athena-usecase p,
	.athena-walkthrough__tip,
	.athena-integration p:not(.athena-integration__type):not(.athena-integration__more) {
		font-size: 1rem;
	}
}

/* ── AI Data Enricher ─────────────────────────────────────────── */

.athena-product-enricher {
	background: var(--wp--preset--color--surface);
}

/* Copy beside a panel (the Enricher; generic: .athena-split, e.g. About's story). */
.athena-enricher,
.athena-split {
	display: grid !important;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4rem) !important;
	align-items: start;
}

.athena-enricher > *,
.athena-enricher__copy > *,
.athena-split > *,
.athena-split__copy > *,
.athena-flow > * {
	margin-block: 0 !important;
}

.athena-enricher__copy,
.athena-split__copy {
	display: grid;
	gap: 1.1rem;
}

.athena-enricher__list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding-left: 1.25rem;
}

.athena-flow {
	display: grid;
	gap: 1rem;
	padding: clamp(1.25rem, 3vw, 2rem) !important;
	border: 1px solid var(--athena-border-strong);
	border-radius: 20px;
	background: var(--wp--preset--color--raised);
}

.athena-flow__label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 750;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.athena-flow__stages {
	display: grid;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: athena-flow;
}

.athena-flow__stages li {
	position: relative;
	display: grid;
	gap: 0.15rem;
	padding-left: 3rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	counter-increment: athena-flow;
}

.athena-flow__stages li::before {
	content: counter(athena-flow);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent);
	font-weight: 750;
}

.athena-flow__stages li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 2.25rem;
	bottom: -1.5rem;
	left: calc(1rem - 1px);
	width: 2px;
	background: var(--athena-border-strong);
}

.athena-flow__stages strong {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
}

@media (max-width: 960px) {
	.athena-enricher,
	.athena-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Before/after figures (a dated case study) ────────────────── */

.athena-figures {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1rem !important;
	margin-top: clamp(2rem, 4vw, 3rem) !important;
}

.athena-figures > *,
.athena-figure > *,
.athena-figures__foot > * {
	margin-block: 0 !important;
}

.athena-figure {
	display: grid;
	align-content: start;
	gap: 0.6rem;
	padding: 1.5rem !important;
	border: 1px solid var(--athena-border-strong);
	border-radius: 20px;
	background: var(--wp--preset--color--raised);
}

.athena-figure h3 {
	font-size: var(--wp--preset--font-size--medium);
}

.athena-figure p {
	display: grid;
	gap: 0.1rem;
}

.athena-figure__key {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.athena-figure__value {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 750;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.athena-figure__after {
	padding-top: 0.6rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.athena-figure__after .athena-figure__value {
	color: var(--athena-success);
	font-size: var(--wp--preset--font-size--x-large);
}

/* A lead figure (before_after() $feature): one large before → after, then the other
   figures as a compact row under a line that names both periods once. */
.athena-figures.has-lead {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.athena-figures.has-lead > :is(.athena-figure--lead, .athena-figures__legend) {
	grid-column: 1 / -1;
}

.athena-figure--lead {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	padding: clamp(1.5rem, 3vw, 2.25rem) !important;
}

.athena-figure--lead h3 {
	grid-column: 1 / -1;
	font-size: var(--wp--preset--font-size--large);
}

.athena-figure--lead .athena-figure__after {
	position: relative;
	padding-top: 0;
	border-top: 0;
}

.athena-figure--lead .athena-figure__value {
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
	line-height: 1.1;
}

.athena-figure--lead .athena-figure__after .athena-figure__value {
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
}

.athena-figure--lead .athena-figure__after::before {
	content: "\2192" / "";
	position: absolute;
	top: 50%;
	left: calc(-1 * clamp(1.5rem, 4vw, 3rem) / 2);
	color: var(--wp--preset--color--accent);
	font-size: 1.5rem;
	font-weight: 700;
	transform: translate(-50%, -50%);
}

.athena-figures__legend {
	margin-top: 0.5rem !important;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* Compact figures: label, then "before → after" on one line; the period keys stay in
   the text for screen readers, the legend above shows them once. */
.athena-figures.has-lead .athena-figure:not(.athena-figure--lead) {
	display: flex;
	flex-wrap: wrap;
	align-content: start;
	align-items: baseline;
	gap: 0.35rem 0.6rem;
	padding: 1rem 1.25rem !important;
	border-radius: 16px;
}

.athena-figures.has-lead .athena-figure:not(.athena-figure--lead) h3 {
	flex: 1 0 100%;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
}

.athena-figures.has-lead .athena-figure:not(.athena-figure--lead) .athena-figure__after {
	display: block;
	padding-top: 0;
	border-top: 0;
}

.athena-figures.has-lead .athena-figure:not(.athena-figure--lead) .athena-figure__before:has(+ .athena-figure__after) {
	display: block;
}

.athena-figures.has-lead .athena-figure:not(.athena-figure--lead) .athena-figure__before + .athena-figure__after::before {
	content: "\2192" / "";
	margin-right: 0.6rem;
	color: var(--wp--preset--color--muted);
	font-weight: 700;
}

.athena-figures.has-lead .athena-figure:not(.athena-figure--lead) .athena-figure__key {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.athena-figures.has-lead .athena-figure:not(.athena-figure--lead) .athena-figure__value {
	font-size: var(--wp--preset--font-size--large);
}

.athena-figures.has-lead .athena-figure:not(.athena-figure--lead) .athena-figure__after .athena-figure__value {
	font-size: var(--wp--preset--font-size--large);
}

@media (max-width: 960px) {
	.athena-figures.has-lead {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.athena-figure--lead {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.75rem;
	}

	.athena-figure--lead .athena-figure__after {
		padding-top: 0.75rem;
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.athena-figure--lead .athena-figure__after::before {
		content: none;
	}
}

.athena-figures__foot {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.25rem !important;
}

.athena-figures__foot .athena-note {
	max-width: 52rem;
	font-size: var(--wp--preset--font-size--small);
}

/* The link to the source: a full-size tap target. */
.athena-figures__source a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 650;
}

@media (max-width: 781px) {
	.athena-figure__key {
		font-size: 1rem;
	}
}

/* ── FAQ on a product page (the main FAQ's Details markup, faq.css) ── */

.athena-product-faq__list {
	max-width: 52rem;
	margin-top: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* ── Company and conversion pages (inc/product-pages.php page_hero()) ── */

.athena-page-hero h1 {
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
	text-wrap: balance;
}

.athena-page-hero .athena-hero__copy {
	max-width: 46rem;
	padding-top: 0;
}

.athena-page-hero .athena-hero__grid {
	grid-template-columns: minmax(0, 1fr);
}

/* The logo strip belongs to the hero, as on product pages. */
.athena-page-hero + .athena-clients {
	padding-top: var(--wp--preset--spacing--40) !important;
	padding-bottom: var(--wp--preset--spacing--40) !important;
}

/* Company pages on phones: capability cards with the icon beside the title, so the
   conversion form comes sooner. Product pages (no page hero) keep their cards. */
@media (max-width: 600px) {
	.athena-page-hero ~ .athena-section .athena-cap {
		grid-template-columns: 2.75rem minmax(0, 1fr);
		column-gap: 1rem;
		padding: 1.25rem !important;
	}

	.athena-page-hero ~ .athena-section .athena-cap::before {
		grid-row: span 2;
		margin-bottom: 0;
	}

	.athena-page-hero ~ .athena-section .athena-cap::after {
		top: 1.25rem;
		left: 1.25rem;
	}

	.athena-page-hero ~ .athena-section .athena-cap > * {
		grid-column: 2;
	}
}

/* One column: no glow over an empty right half (it would read as a missing image). */
.athena-page-hero:not(.athena-page-hero--split) {
	background-image: none;
}

/* Hero card (hero_card()): copy and card centred on each other, the card the narrower column. */
@media (min-width: 961px) {
	.athena-page-hero--split:has(.athena-hero-card) .athena-hero__grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		align-items: center;
	}
}

.athena-hero-card {
	display: grid;
	gap: 1rem;
	padding: clamp(1.5rem, 3vw, 2.25rem) !important;
	border: 1px solid var(--athena-border-strong);
	border-radius: 24px;
	background: var(--wp--preset--color--raised);
	box-shadow: var(--athena-shadow-raised);
}

.athena-hero-card > * {
	margin-block: 0 !important;
}

.athena-hero-card__title {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 750;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.athena-hero-card__list {
	display: grid;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.athena-hero-card__list li {
	position: relative;
	display: grid;
	gap: 0.1rem;
	padding-left: 1.75rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.athena-hero-card__list li::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 4px var(--wp--preset--color--accent-soft);
}

.athena-hero-card__list strong {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 650;
}

/* Compact link list (link_list()): rows with a title link and one line, the whole row the
   link's target (≥ 44 px). Columns where there is room. */
.athena-link-list {
	display: grid;
	/* Three columns at full width (six products: two even rows), fewer as it narrows. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: 0.75rem;
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0 !important;
	padding: 0;
	list-style: none;
}

.athena-link-list li {
	position: relative;
	display: grid;
	align-content: center;
	gap: 0.15rem;
	min-height: 2.75rem;
	padding: 0.85rem 2.75rem 0.85rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--raised);
	transition: border-color 0.2s ease;
}

.athena-link-list li::after {
	content: "→";
	position: absolute;
	top: 50%;
	right: 1.1rem;
	color: var(--wp--preset--color--accent);
	font-weight: 750;
	transform: translateY(-50%);
}

.athena-link-list li:hover,
.athena-link-list li:focus-within {
	border-color: var(--wp--preset--color--accent);
}

.athena-link-list a {
	color: var(--wp--preset--color--contrast);
	font-weight: 650;
	text-decoration: none;
}

/* The title link covers its row. */
.athena-link-list a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.athena-link-list a:focus-visible {
	outline: none;
}

.athena-link-list li:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.athena-link-list span {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* In a hero copy column (Contact's routes): one column, tighter rows, no list indent. */
.athena-page-hero .athena-hero__copy > .athena-link-list {
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	margin-top: 0 !important;
	padding-left: 0;
}

.athena-page-hero .athena-link-list li {
	padding-block: 0.65rem;
}

/* Steps and a form section share the surface colour: two full paddings would read as a gap. */
.athena-product-steps + .athena-form-section {
	padding-top: var(--wp--preset--spacing--40) !important;
}

/* A form section (form_section()) on one column: eyebrow and heading, then the form at
   once; the lead and the "what to include" list follow it. */
@media (max-width: 960px) {
	.athena-form-section .athena-split {
		row-gap: 1.1rem !important;
	}

	.athena-form-section .athena-split__copy {
		display: contents;
	}

	.athena-form-section .athena-split > .athena-form-card {
		order: 1;
		margin-top: 0.4rem !important;
	}

	.athena-form-section .athena-split__copy > .athena-lead,
	.athena-form-section .athena-split__copy > .wp-block-list {
		order: 2;
	}
}

/* A small label over a hero's own list (Contact's "What do you need?"). */
.athena-page-hero__label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 750;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* A dated figure on a link card (Customers' case study), set off from the card's sentence. */
.athena-integration__figure {
	padding: 0.75rem 1rem;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

/* A split whose columns differ in height: centred on each other, no empty block under one. */
.athena-split--center {
	align-items: center;
}

/* With a second column (a form): even columns, the copy at the top beside it. */
.athena-page-hero--split .athena-hero__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem) !important;
	align-items: start;
}

.athena-page-hero__aside > * {
	margin-block: 0 !important;
}

.athena-page-hero .athena-hero__copy > .wp-block-list {
	display: grid;
	gap: 0.5rem;
	padding-left: 1.25rem;
}

/* A one-line note under the buttons (e.g. "Prefer to explore first?"). */
.athena-page-hero__note {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 960px) {
	.athena-page-hero--split .athena-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40) !important;
	}

	.athena-page-hero .athena-hero__copy {
		gap: 1.1rem;
	}

	/* The hero card sums up the sections that follow: on one column it would repeat them
	   right before they appear, so the hero is copy only. */
	.athena-page-hero__aside:has(> .athena-hero-card) {
		display: none;
	}
}

/* Form card heading: the card's own title, smaller than a section heading. */
.athena-form-card > * {
	margin-block: 0 !important;
}

.athena-form-card > * + * {
	margin-top: 1.25rem !important;
}

.athena-form-card h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.athena-form-card__text {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* The #form anchor clears the sticky header. */
#form {
	scroll-margin-top: 6rem;
}

/* Three steps fill the row instead of leaving a fourth column empty. */
.athena-steps:has(> .athena-step:nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 860px) {
	.athena-steps:has(> .athena-step:nth-child(3):last-child) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Four cards: two by two, not three and one. Two link cards: one row of two. */
@media (min-width: 961px) {
	.athena-caps:has(> .athena-cap:nth-child(4):last-child),
	.athena-related__grid:has(> :nth-child(4):last-child),
	.athena-related__grid:has(> :nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* A section on the surface colour, for the alternating rhythm of a page built from helpers. */
.athena-section.is-surface {
	background: var(--wp--preset--color--surface);
}

/* Company facts: name, address and the certification line, as a quiet card. */
.athena-facts {
	display: grid;
	gap: 0.75rem;
	padding: clamp(1.25rem, 3vw, 2rem) !important;
	border: 1px solid var(--athena-border-strong);
	border-radius: 20px;
	background: var(--wp--preset--color--raised);
}

.athena-facts > * {
	margin-block: 0 !important;
}

.athena-facts h3 {
	font-size: var(--wp--preset--font-size--large);
}

.athena-facts p {
	color: var(--wp--preset--color--muted);
}

.athena-facts .athena-facts__name {
	color: var(--wp--preset--color--contrast);
	font-weight: 650;
}

/* Six steps: two rows of three, and the line ends with each row (no line into the gap). */
@media (min-width: 861px) {
	.athena-steps:has(> .athena-step:nth-child(6):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.athena-steps:has(> .athena-step:nth-child(6):last-child) > .athena-step:nth-child(3)::after {
		content: none;
	}
}

/* A button to another site that opens in the same tab (button( …, 'is-external' )), e.g. a
   store listing: a visible arrow says it leaves the site. */
.wp-block-button.is-external .wp-block-button__link::after {
	content: "\2197" / "";
	margin-left: 0.4em;
}

/* Four links: two even rows of two, not three and one. */
@media (min-width: 700px) {
	.athena-link-list:has(> li:nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* A short heading between two parts of one section (e.g. "Any other stack" under the
   platform cards). */
.athena-subhead {
	margin-top: var(--wp--preset--spacing--50) !important;
	font-size: var(--wp--preset--font-size--large);
}