/*
 * Hypera Agri components.
 *
 * theme.json owns colour, type scale and spacing. This file owns the small set
 * of components that block markup cannot express: the header, the buttons, the
 * cards, the tables, the forms. Nothing here restates a token.
 */

/*
 * Constrained layout centres every child narrower than the content width, and
 * it does so with !important. Copy is read from the left edge, so anything
 * carrying its own measure opts out here. This is the only !important we use.
 */
section .hy-lead,
section .hy-measure,
section .hy-note,
section .hy-caveat,
section .hy-form,
section .hy-form__success,
section .hy-faq,
section .hy-trust-row,
section .hy-eyebrow,
section .hy-micro,
section .hy-actions,
section .hy-timeline {
	margin-left: 0 !important;
	margin-right: auto !important;
}

section .has-text-align-center.hy-lead,
section .has-text-align-center.hy-actions {
	margin-left: auto !important;
}

:root {
	--hy-header-height: 4.5rem;
	--hy-radius-card: 8px;
	--hy-radius-chip: 4px;
	--hy-shadow: 0 1px 2px rgba(11, 18, 32, 0.06), 0 8px 24px rgba(11, 18, 32, 0.06);
	--hy-thermal: linear-gradient(90deg, #0E1621 0%, #3B2A5A 22%, #B4342B 52%, #E4572E 74%, #F2C14E 100%);
	--hy-motion: 160ms ease-out;
}

/* ---------------------------------------------------------------- surface */

/*
 * Inter carries an optical-size axis. Letting the browser use it keeps large
 * headings tight and small print open, which is most of the difference between
 * a typeface being present and a typeface being set.
 */
html {
	font-optical-sizing: auto;
}

h1,
h2 {
	text-wrap: balance;
}

.hy-lead,
.hy-measure p {
	text-wrap: pretty;
}

/*
 * Dark sections get the same 24px rule grid the image placeholders use, at the
 * edge of visibility. It is what stops a large dark block reading as a void.
 */
.has-deep-background-color {
	background-image:
		linear-gradient(to right, rgba(226, 232, 239, 0.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(226, 232, 239, 0.045) 1px, transparent 1px);
	background-size: 24px 24px;
	background-position: center top;
}

/*
 * theme.json colours links ink, which is correct on paper and invisible on deep
 * — measured at 1.03:1, the same colour as the surface it sits on. Ember is what
 * the visual guide specifies for links on dark, and it measures 5.6:1 there.
 */
.has-deep-background-color a:not(.hy-btn):not(.wp-element-button),
.has-deep-2-background-color a:not(.hy-btn):not(.wp-element-button) {
	color: var(--wp--preset--color--ember);
}

.has-deep-background-color a:not(.hy-btn):hover,
.has-deep-2-background-color a:not(.hy-btn):hover {
	color: #F2C14E;
}

/* A short thermal tick above a section heading. Decoration, never behind text. */
.hy-tick {
	display: block;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: var(--hy-thermal);
	margin: 0 0 1.25rem;
}

/* ---------------------------------------------------------------- measure */

.hy-lead {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
	max-width: 60ch;
}

.hy-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #B4342B;
	margin-bottom: 1.25rem;
}

/* Every eyebrow carries the thermal tick. One rule, every section. */
.hy-eyebrow::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: var(--hy-thermal);
	margin-top: 0.75rem;
}

.has-deep-background-color .hy-eyebrow {
	color: var(--wp--preset--color--ember);
}

.hy-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
}

.hy-measure {
	max-width: 68ch;
}

.hy-micro {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--dust);
}

/* ---------------------------------------------------------------- buttons */

.hy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.85rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--hy-radius-chip);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	background: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--ink);
}

.hy-btn:hover,
.hy-btn:focus {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.hy-btn--secondary {
	background: transparent;
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.hy-btn--ink {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.hy-btn--ink:hover,
.hy-btn--ink:focus {
	color: var(--wp--preset--color--paper);
}

.has-deep-background-color .hy-btn--secondary,
.hy-header__nav-panel .hy-btn--secondary {
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--paper);
}

@media (prefers-reduced-motion: no-preference) {
	.hy-btn {
		transition: background-color var(--hy-motion), transform var(--hy-motion), box-shadow var(--hy-motion);
	}

	.hy-btn:hover {
		transform: translateY(-1px);
		box-shadow: var(--hy-shadow);
	}
}

.hy-btn:hover {
	background: #D14A22;
}

.hy-btn--secondary:hover {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent);
}

.has-deep-background-color .hy-btn--secondary:hover {
	background: color-mix(in srgb, var(--wp--preset--color--paper) 12%, transparent);
}

.hy-btn--ink:hover {
	background: #1B2941;
}

.hy-btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.hy-textlink {
	display: inline-block;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hy-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

/* ---------------------------------------------------------------- header */

.hy-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
	backdrop-filter: saturate(1.2) blur(8px);
	-webkit-backdrop-filter: saturate(1.2) blur(8px);
	border-bottom: 1px solid transparent;
}

.hy-header.is-stuck {
	border-bottom-color: var(--wp--preset--color--line);
}

.hy-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	max-width: 76rem;
	margin-inline: auto;
	min-height: var(--hy-header-height);
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.hy-logo {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-weight: 640;
	font-size: 1.125rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	margin-right: auto;
}

.hy-logo__mark {
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: var(--hy-thermal);
	transform: translateY(-1px);
}

.hy-logo__sub {
	color: var(--wp--preset--color--slate);
	font-weight: 500;
}

.hy-header__nav-panel {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.hy-nav {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.hy-nav__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hy-nav__link,
.hy-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
	border-radius: var(--hy-radius-chip);
}

.hy-nav__link:hover,
.hy-nav__toggle:hover {
	color: #B4342B;
}

.hy-nav__item {
	position: relative;
}

.hy-nav__toggle[aria-expanded="true"] .hy-nav__caret {
	transform: rotate(180deg);
}

.hy-nav__caret {
	width: 10px;
	height: 10px;
	flex: none;
}

.hy-nav__submenu {
	position: absolute;
	top: calc(100% - 0.25rem);
	left: 0;
	min-width: 17rem;
	margin: 0;
	padding: 0.5rem;
	list-style: none;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hy-radius-card);
	box-shadow: var(--hy-shadow);
	display: none;
}

/*
 * Without JavaScript the submenu opens on hover and on focus, so every link
 * stays reachable by keyboard. With JavaScript the button owns it, which is
 * the accessible behaviour, and hover alone no longer opens anything.
 */
.hy-nav__item:hover > .hy-nav__submenu,
.hy-nav__item:focus-within > .hy-nav__submenu {
	display: block;
}

.js .hy-nav__item:hover > .hy-nav__submenu,
.js .hy-nav__item:focus-within > .hy-nav__submenu {
	display: none;
}

.js .hy-nav__submenu:not([hidden]) {
	display: block;
}

.hy-nav__submenu a {
	display: block;
	padding: 0.6rem 0.75rem;
	border-radius: var(--hy-radius-chip);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.hy-nav__submenu a:hover {
	background: var(--wp--preset--color--mist);
	color: #B4342B;
}

.hy-nav__submenu span {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
}

.hy-header__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hy-radius-chip);
	background: none;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 900px) {
	.js .hy-header__burger {
		display: inline-flex;
	}

	/* No JavaScript: the panel stays part of the header, stacked. */
	.hy-header__nav-panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
		width: 100%;
		padding: 0 0 1rem;
	}

	.js .hy-header__nav-panel {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		padding: 1rem clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
		background: var(--wp--preset--color--paper);
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.js .hy-header__nav-panel.is-open {
		display: flex;
	}

	.hy-header__inner {
		flex-wrap: wrap;
	}

	.js .hy-header__inner {
		flex-wrap: nowrap;
	}

	.hy-nav,
	.hy-nav__list {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.hy-nav__submenu {
		position: static;
		border: 0;
		box-shadow: none;
		padding-left: 0.75rem;
	}

	.hy-header__cta {
		width: 100%;
	}
}

.hy-header__sentinel {
	position: absolute;
	top: 0;
	height: 1px;
	width: 1px;
}

/* ---------------------------------------------------------------- sections */

.hy-section {
	position: relative;
}

.hy-thermal-rule {
	height: 4px;
	background: var(--hy-thermal);
	border-radius: 2px;
}

.hy-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

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

.hy-grid-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.hy-grid-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

/*
 * Stat rows read as one instrument with three channels, not three loose blocks.
 * Hairline rules between them do that; the first cell never gets one.
 */
.hy-grid-3 > .hy-stat {
	padding-left: clamp(1.25rem, 2.5vw, 2rem);
	border-left: 1px solid var(--wp--preset--color--line);
}

.hy-grid-3 > .hy-stat:first-child {
	padding-left: 0;
	border-left: 0;
}

.has-deep-background-color .hy-grid-3 > .hy-stat {
	border-left-color: rgba(226, 232, 239, 0.16);
}

@media (max-width: 640px) {
	.hy-grid-3 > .hy-stat {
		padding-left: 0;
		border-left: 0;
		padding-top: 1.5rem;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.hy-grid-3 > .hy-stat:first-child {
		padding-top: 0;
		border-top: 0;
	}
}

.hy-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------- cards */

.hy-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hy-radius-card);
	overflow: hidden;
}

.hy-card h2,
.hy-card h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
}

.hy-card p {
	margin: 0;
}

.hy-card__source {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
	font-style: normal;
}

.hy-card__index {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--slate);
	line-height: 1;
}

/* Cards sit on a hairline until hovered, then the one shadow does the lifting. */
.hy-card {
	box-shadow: none;
}

.hy-card--featured::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--hy-thermal);
}

.hy-card--featured {
	padding-top: calc(clamp(1.25rem, 2.5vw, 1.75rem) + 4px);
}

.hy-card--dark {
	background: var(--wp--preset--color--deep-2);
	border-color: rgba(226, 232, 239, 0.14);
	color: var(--wp--preset--color--paper);
}

.hy-card--dark .hy-card__source {
	color: var(--wp--preset--color--dust);
}

@media (prefers-reduced-motion: no-preference) {
	.hy-card {
		transition: box-shadow var(--hy-motion), transform var(--hy-motion);
	}

	.hy-card--link:hover {
		box-shadow: var(--hy-shadow);
		transform: translateY(-1px);
	}
}

.hy-card--link a {
	text-decoration: none;
	color: inherit;
}

.hy-card--link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.hy-card--link:hover h3 {
	color: #B4342B;
}

/* Use-case grids. Every item in a query loop is a card. */

.hy-uc-grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hy-uc-grid > li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hy-radius-card);
	overflow: hidden;
}

.hy-uc-grid > li::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--hy-thermal);
}

.hy-uc-grid > li > * {
	margin: 0;
}

.hy-uc-grid .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.hy-uc-grid .wp-block-post-title a:hover {
	color: #B4342B;
	text-decoration: underline;
}

.hy-uc-grid .wp-block-post-featured-image {
	margin: -0.65rem 0 0;
	border-radius: var(--hy-radius-chip);
	overflow: hidden;
}

.hy-uc-grid .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

@media (prefers-reduced-motion: no-preference) {
	.hy-uc-grid > li {
		transition: box-shadow var(--hy-motion), transform var(--hy-motion);
	}

	.hy-uc-grid > li:hover {
		box-shadow: var(--hy-shadow);
		transform: translateY(-1px);
	}
}

/* ---------------------------------------------------------------- caveat */

.hy-caveat {
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--ember);
	border-radius: 0 var(--hy-radius-card) var(--hy-radius-card) 0;
	background: var(--wp--preset--color--mist);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 60ch;
}

.hy-caveat p {
	margin: 0;
}

.hy-caveat strong {
	display: block;
	font-weight: 640;
}

/* ---------------------------------------------------------------- monitored items */

/* Two columns on desktop, one on mobile. Never three — the measure breaks. */
.hy-monitored {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 4vw, 2.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.hy-monitored {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hy-monitored__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 52ch;
}

.hy-monitored__item h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
}

.hy-monitored__item p {
	margin: 0;
}

.hy-monitored__item cite {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
	font-style: normal;
}

.hy-monitored__chip {
	align-self: flex-start;
}

/* ---------------------------------------------------------------- steps */

/* Four steps read as 2x2, not as a row of four. One column on mobile. */
.hy-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.hy-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hy-steps__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 46ch;
}

.hy-steps__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--2-xl);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--slate);
	font-variant-numeric: tabular-nums;
}

.hy-steps__item h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
}

.hy-steps__item p {
	margin: 0;
}

.hy-steps__item cite {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
	font-style: normal;
}

/* ---------------------------------------------------------------- tables */

.hy-table-wrap {
	overflow-x: auto;
}

.hy-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
}

.hy-table th,
.hy-table td {
	text-align: left;
	padding: 0.9rem 1rem 0.9rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
}

.hy-table thead th {
	font-weight: 640;
	white-space: nowrap;
}

/*
 * The last column is ours. It gets a tinted channel and a thermal cap so the
 * comparison resolves at a glance, without a second accent colour.
 */
.hy-table thead th:last-child {
	color: #B4342B;
	position: relative;
}

.hy-table--compare thead th:last-child,
.hy-table--compare tbody td:last-child {
	background: var(--wp--preset--color--mist);
	padding-left: 1rem;
	padding-right: 1rem;
}

.hy-table--compare thead th:last-child {
	border-top: 3px solid transparent;
	border-image: var(--hy-thermal) 1;
	border-bottom-color: var(--wp--preset--color--line);
}

.hy-table--compare tbody tr:last-child td:last-child {
	border-bottom-left-radius: var(--hy-radius-card);
	border-bottom-right-radius: var(--hy-radius-card);
}

.hy-table td:last-child {
	font-weight: 500;
}

.hy-table tbody th {
	font-weight: 500;
	color: var(--wp--preset--color--slate);
	width: 30%;
}

@media (max-width: 700px) {
	.hy-table,
	.hy-table thead,
	.hy-table tbody,
	.hy-table tr,
	.hy-table th,
	.hy-table td {
		display: block;
		width: auto;
	}

	.hy-table thead {
		display: none;
	}

	.hy-table tbody tr {
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--hy-radius-card);
		padding: 1rem;
		margin-bottom: 1rem;
	}

	.hy-table tbody th,
	.hy-table tbody td {
		border: 0;
		padding: 0.25rem 0;
	}

	.hy-table tbody td::before {
		content: attr(data-label);
		display: block;
		font-size: var(--wp--preset--font-size--xs);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--wp--preset--color--slate);
	}
}

/* ---------------------------------------------------------------- placeholders */

.hy-placeholder {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.hy-placeholder__svg {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--hy-radius-card);
	border: 1px solid rgba(226, 232, 239, 0.18);
}

.hy-placeholder__caption {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
	max-width: 52ch;
}

.has-deep-background-color .hy-placeholder__caption {
	color: var(--wp--preset--color--dust);
}

/* ---------------------------------------------------------------- breadcrumb */

.hy-breadcrumb {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
}

.hy-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hy-breadcrumb__item {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
}

.hy-breadcrumb a {
	color: var(--wp--preset--color--slate);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* A link that is the whole list item is a target, not prose. Same 24px floor. */
.wp-block-list li > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.hy-breadcrumb a:hover {
	color: #B4342B;
	text-decoration: underline;
}

/* ---------------------------------------------------------------- FAQ */

.hy-faq {
	border-top: 1px solid var(--wp--preset--color--line);
	max-width: 68ch;
}

.hy-faq details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0;
}

.hy-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 1.1rem 2.5rem 1.1rem 0;
	font-weight: 600;
	position: relative;
	min-height: 44px;
}

.hy-faq summary::-webkit-details-marker {
	display: none;
}

.hy-faq summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.25rem;
	color: var(--wp--preset--color--slate);
}

.hy-faq details[open] summary::after {
	content: "\2212";
}

.hy-faq details > *:not(summary) {
	margin: 0 0 1.1rem;
	max-width: 62ch;
}

/* ---------------------------------------------------------------- filters */

.hy-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
	padding: 1.25rem 0;
	border-block: 1px solid var(--wp--preset--color--line);
}

.hy-filters__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	min-width: 12rem;
	flex: 1 1 12rem;
}

.hy-filters label,
.hy-form label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.hy-filters select,
.hy-form input,
.hy-form select,
.hy-form textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hy-radius-chip);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
}

.hy-filters__actions {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin: 0;
}

/* ---------------------------------------------------------------- forms */

.hy-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 42rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hy-radius-card);
	background: var(--wp--preset--color--paper);
}

.hy-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.25rem;
}

.hy-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.hy-form__hint,
.hy-form__error {
	font-size: var(--wp--preset--font-size--xs);
}

.hy-form__hint {
	color: var(--wp--preset--color--slate);
}

.hy-form__error {
	color: #A32B1C;
	font-weight: 600;
}

.hy-form input[aria-invalid="true"],
.hy-form select[aria-invalid="true"],
.hy-form textarea[aria-invalid="true"] {
	border-color: #A32B1C;
	border-width: 2px;
}

.hy-form__required {
	color: var(--wp--preset--color--slate);
	font-weight: 400;
}

.hy-form__consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: start;
}

.hy-form__consent input {
	width: 24px;
	height: 24px;
	min-height: 24px;
	margin-top: 0.15rem;
}

.hy-form__consent label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	line-height: 1.5;
}

.hy-form__summary {
	border: 2px solid #A32B1C;
	border-radius: var(--hy-radius-chip);
	padding: 1rem;
	background: #FDF3F0;
}

.hy-form__summary p {
	margin: 0 0 0.5rem;
	font-weight: 640;
}

.hy-form__summary ul {
	margin: 0;
	padding-left: 1.25rem;
	font-size: var(--wp--preset--font-size--sm);
}

.hy-form__success {
	border: 1px solid var(--wp--preset--color--signal);
	border-left: 3px solid var(--wp--preset--color--signal);
	border-radius: var(--hy-radius-card);
	background: color-mix(in srgb, var(--wp--preset--color--signal) 7%, transparent);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	max-width: 42rem;
}

.hy-form__success strong {
	display: block;
	margin-bottom: 0.35rem;
}

.hy-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hy-trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
}

.hy-trust-row li::before {
	content: "\2713";
	margin-right: 0.4rem;
	color: var(--wp--preset--color--signal);
	font-weight: 700;
}

/* ---------------------------------------------------------------- post meta */

.hy-meta {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hy-radius-card);
	background: var(--wp--preset--color--mist);
}

.hy-meta dt {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--slate);
	margin-bottom: 0.25rem;
}

.hy-meta dd {
	margin: 0;
}

.hy-meta__metric {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	line-height: 1.2;
}

.hy-meta__source {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
}

/* ---------------------------------------------------------------- timeline */

.hy-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2rem);
}

.hy-timeline__item {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: 1.25rem;
	padding-bottom: clamp(1.5rem, 3vw, 2rem);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.hy-timeline__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.hy-timeline__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	color: var(--wp--preset--color--slate);
	line-height: 1.2;
}

.hy-timeline__item h3 {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--xl);
}

.hy-timeline__item p {
	margin: 0;
	max-width: 62ch;
}

@media (max-width: 600px) {
	.hy-timeline__item {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}
}

/* ---------------------------------------------------------------- footer */

.hy-footer {
	background: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--dust);
	font-size: var(--wp--preset--font-size--sm);
	border-top: 4px solid transparent;
	border-image: var(--hy-thermal) 1;
	background-image:
		linear-gradient(to right, rgba(226, 232, 239, 0.035) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(226, 232, 239, 0.035) 1px, transparent 1px);
	background-size: 24px 24px;
}

.hy-footer__inner {
	max-width: 76rem;
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 4vw, 3rem);
}

.hy-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: clamp(2rem, 4vw, 3rem);
}

.hy-footer h2 {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--paper);
	margin: 0 0 1rem;
}

.hy-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

/*
 * Standalone links clear the 24px target minimum on their own rather than
 * leaning on the spacing exception in SC 2.5.8.
 */
.hy-footer a {
	color: var(--wp--preset--color--dust);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.hy-footer a:hover {
	color: var(--wp--preset--color--ember);
	text-decoration: underline;
}

.hy-footer__bottom {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(226, 232, 239, 0.14);
	display: grid;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.6;
}

/* ---------------------------------------------------------------- pagination */

.wp-block-query-pagination {
	font-size: var(--wp--preset--font-size--sm);
}

/* ---------------------------------------------------------------- skip link */

.hy-skip {
	position: absolute;
}

/* ---------------------------------------------------------------- misc */

.hy-hr {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	margin: 0;
}

.hy-note {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--slate);
	max-width: 60ch;
}

/* Author-facing, but it is on a public page, so it meets the same 4.5:1 bar. */
.hy-todo {
	display: block;
	border: 1px dashed var(--wp--preset--color--amber);
	border-radius: var(--hy-radius-chip);
	padding: 0.75rem 1rem;
	font-size: var(--wp--preset--font-size--xs);
	color: #573A04;
	background: #FDF6E7;
}

/* ---------------------------------------------------------------- field intelligence layer */

body {
	overflow-x: clip;
}

.hy-scroll-progress {
	position: fixed;
	inset: 0 0 auto;
	z-index: 1000;
	height: 3px;
	background: var(--hy-thermal);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

.hy-hero-scene {
	isolation: isolate;
	overflow: hidden;
}

.hy-hero-scene::before,
.hy-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 78% 42%, rgba(228, 87, 46, 0.15), transparent 32%),
		linear-gradient(115deg, transparent 54%, rgba(242, 193, 78, 0.055) 54.2%, transparent 54.4%);
	z-index: -1;
}

.hy-hero-scene .hy-hero__grid {
	grid-template-columns: minmax(0, 0.82fr) minmax(26rem, 1.18fr);
	gap: clamp(2.5rem, 6vw, 5rem);
}

.hy-hero__copy,
.hy-hero-media {
	position: relative;
	z-index: 1;
}

.hy-hero__copy h1 {
	font-size: clamp(3rem, 6.8vw, 6.25rem) !important;
	line-height: 0.94;
	letter-spacing: -0.055em;
}

.hy-illustration {
	width: 100%;
}

.hy-illustration__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border: 1px solid rgba(226, 232, 239, 0.2);
	border-radius: var(--hy-radius-card);
	background: var(--wp--preset--color--deep-2);
	box-shadow: 0 24px 70px rgba(4, 8, 15, 0.28);
	transform: translate3d(0, var(--hy-parallax-y, 0), 0);
}

.hy-illustration__frame::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to right, rgba(226, 232, 239, 0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(226, 232, 239, 0.08) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.42), transparent 74%);
	pointer-events: none;
}

.hy-illustration__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hy-illustration__reticle {
	position: absolute;
	inset: 1rem;
	z-index: 2;
	border: solid rgba(226, 232, 239, 0.58);
	border-width: 1px 0 0 1px;
	width: 2rem;
	height: 2rem;
	pointer-events: none;
}

.hy-illustration__reticle::after {
	content: "";
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--ember);
	box-shadow: 0 0 0 5px rgba(228, 87, 46, 0.16);
}

.hy-hero-media .hy-placeholder__caption {
	max-width: 60ch;
	padding-left: 0.85rem;
	border-left: 2px solid var(--wp--preset--color--ember);
}

.hy-domain-visual {
	margin-block: clamp(2rem, 5vw, 4rem);
}

.hy-domain-visual .hy-illustration__frame {
	max-height: 34rem;
}

.hy-domain-visual .hy-placeholder__caption {
	margin-top: 0.25rem;
}

.hy-page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.hy-page-hero::after {
	content: "";
	position: absolute;
	right: clamp(1rem, 6vw, 5rem);
	top: 50%;
	width: clamp(7rem, 18vw, 14rem);
	aspect-ratio: 1;
	border: 1px solid rgba(226, 232, 239, 0.15);
	border-radius: 50%;
	box-shadow: 0 0 0 2rem rgba(226, 232, 239, 0.025), 0 0 0 4rem rgba(226, 232, 239, 0.018);
	transform: translateY(-50%);
	pointer-events: none;
	z-index: -1;
}

.hy-proof {
	background:
		linear-gradient(135deg, rgba(242, 193, 78, 0.06), transparent 36%),
		var(--wp--preset--color--mist);
}

.hy-proof .hy-stat {
	position: relative;
	padding: 1.2rem clamp(1.2rem, 2.5vw, 2rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hy-radius-card);
	background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
}

.hy-proof .hy-stat:first-child {
	padding-left: clamp(1.2rem, 2.5vw, 2rem);
	border-left: 1px solid var(--wp--preset--color--line);
}

.hy-proof .hy-stat::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--hy-thermal);
}

.hy-card,
.hy-uc-grid > li,
.hy-form {
	box-shadow: 0 16px 48px rgba(11, 18, 32, 0.045);
}

.hy-card::after,
.hy-uc-grid > li::after {
	content: "";
	position: absolute;
	inset: auto -2rem -3rem auto;
	width: 7rem;
	aspect-ratio: 1;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ember) 20%, transparent);
	border-radius: 50%;
	pointer-events: none;
}

.hy-cta-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.hy-cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 82% 50%, rgba(242, 193, 78, 0.2), transparent 24%),
		repeating-linear-gradient(90deg, transparent 0 47px, rgba(11, 18, 32, 0.05) 48px);
	pointer-events: none;
	z-index: -1;
}

.hy-form {
	position: relative;
	max-width: 52rem;
	border-top: 4px solid transparent;
	border-image: var(--hy-thermal) 1;
}

.hy-form input:focus-visible,
.hy-form select:focus-visible,
.hy-form textarea:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--wp--preset--color--ember) 42%, transparent);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--ember);
}

.hy-catalogue-status {
	position: relative;
	max-width: 48rem;
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hy-radius-card);
	background: var(--wp--preset--color--paper);
	box-shadow: var(--hy-shadow);
	overflow: hidden;
}

.hy-catalogue-status::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--hy-thermal);
}

.hy-motion-ready [data-hy-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 420ms ease-out var(--hy-reveal-delay, 0ms), transform 420ms ease-out var(--hy-reveal-delay, 0ms);
}

.hy-motion-ready [data-hy-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 900px) {
	.hy-hero-scene .hy-hero__grid {
		grid-template-columns: 1fr;
	}

	.hy-hero-media {
		max-width: 48rem;
	}

	.hy-page-hero::after {
		right: -4rem;
		op: 32%;
	}
}

@media (max-width: 640px) {
	.hy-hero__copy h1 {
		font-size: clamp(3.2rem, 18vw, 5rem) !important;
	}

	.hy-proof .hy-stat,
	.hy-proof .hy-stat:first-child {
		padding: 1.2rem;
		border: 1px solid var(--wp--preset--color--line);
	}

	.hy-illustration__frame {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.hy-scroll-progress {
		display: none;
	}

	.hy-motion-ready [data-hy-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}

	.hy-illustration__frame {
		transform: none !important;
	}
}