/*
  AIO Digital theme: components.
  Ported from projects/aio-digital-website/styles.css onto WordPress block markup.
  Tokens (colours, type scale, spacing) are in theme.json and reach this file as
  --wp--preset--* variables. Built mobile first on an 8px grid.
  Contrast: text colours on dark use only passing pairs (see the project README).
*/

:root {
	--aio-bg-raised: var(--wp--preset--color--raised-navy, #06172f);
	--aio-surface: var(--wp--preset--color--deep-navy, #0b1f3b);
	--aio-muted: var(--wp--preset--color--muted, #b9c6d8);
	--aio-blue: var(--wp--preset--color--aio-blue, #1769e0);
	--aio-blue-dark: var(--wp--preset--color--aio-blue-dark, #1259c2);
	--aio-cyan: var(--wp--preset--color--electric-cyan, #00d6f5);
	--aio-border: rgba(255, 255, 255, 0.09);
	--aio-border-strong: rgba(255, 255, 255, 0.18);
	--aio-radius: 14px;
	--aio-radius-small: 8px;
	--aio-header-height: 96px;
	--aio-s: 8px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--aio-header-height);
}

body {
	-webkit-font-smoothing: antialiased;
}

a {
	text-underline-offset: 0.18em;
}

:focus-visible {
	outline: 3px solid var(--aio-cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

img,
svg {
	max-width: 100%;
}

/* Two-tone headline accent: AIO Blue to Electric Cyan. Main (h1) headlines only, so cyan
   stays a controlled signal (AIO Blue on navy is 3.7:1, which passes for large text).
   The "Accent gradient" format is offered only on level-1 headings (assets/js/editor.js). */
h1 .accent-text {
	background: linear-gradient(90deg, var(--aio-blue), var(--aio-cyan));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@media (forced-colors: active) {
	h1 .accent-text {
		background: none;
		color: CanvasText;
	}
}

.muted,
.section-intro,
.is-style-lead {
	color: var(--aio-muted);
}

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

.section-intro {
	font-size: var(--wp--preset--font-size--large);
}

.text-link {
	font-weight: 600;
}

.text-link::after {
	content: " \2192";
}

/* Draft markers: every .todo must be filled in before publishing. */
.todo {
	background: #fff3b0;
	color: #031126;
	padding: 0 4px;
	font-weight: 600;
}

/* ---------- Page frame ---------- */
/* Header, main and footer sit flush; sections provide their own spacing. */
.wp-site-blocks > * + *,
main.site-main > *,
main.site-main > .wp-block-post-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---------- Header ---------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--aio-border);
}

/* The blur sits on a pseudo-element: backdrop-filter on the header itself would trap
   the mobile menu overlay (position: fixed) inside the header. */
.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(3, 17, 38, 0.8);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.site-header .header-inner {
	align-items: center;
	gap: calc(var(--aio-s) * 3);
	min-height: var(--aio-header-height);
}

/* Logo on a white plate: used whenever the white (reverse) logo file isn't in the theme.
   The approved full-colour logo then sits on a controlled white background. The logo
   file has transparent margins; the plate frames only the lock-up, with clear space of
   at least the cyan dot's diameter on every side. The logo is never recoloured or
   distorted, only framed. In the header, any logo other than the white one gets the
   plate, whatever block style is chosen. */
.wp-block-site-logo.is-style-plate,
.site-header .wp-block-site-logo:not(.is-style-reverse) {
	--logo-width: 190px;
	--clear: calc(var(--logo-width) * 0.056); /* the cyan dot's diameter */
	flex-shrink: 0;
	margin-right: auto;
	line-height: 0;
}

.wp-block-site-logo.is-style-plate a,
.site-header .wp-block-site-logo:not(.is-style-reverse) a {
	display: block;
	width: calc(var(--logo-width) * 0.66 + var(--clear) * 2);
	height: calc(var(--logo-width) * 0.285 + var(--clear) * 2);
	padding: var(--clear);
	overflow: hidden;
	background: #fff;
	border-radius: var(--aio-radius-small);
}

.wp-block-site-logo.is-style-plate img,
.site-header .wp-block-site-logo:not(.is-style-reverse) img {
	width: var(--logo-width) !important; /* shows a ~125px lock-up, above the 120px minimum */
	max-width: none;
	height: auto !important;
	margin: calc(var(--logo-width) * -0.028) 0 0 calc(var(--logo-width) * -0.146);
	border-radius: 0;
}

/* White (reverse) logo on dark backgrounds: no plate. The file is trimmed to the
   artwork, and the header's own spacing gives more than the dot's-width clear space. */
.wp-block-site-logo.is-style-reverse {
	--logo-width: 125px; /* above the 120px minimum */
	flex-shrink: 0;
	margin-right: auto;
	line-height: 0;
}

.wp-block-site-logo.is-style-reverse a {
	display: block;
	padding: calc(var(--logo-width) * 0.056); /* clear space: the cyan dot's diameter */
	margin: calc(var(--logo-width) * -0.056);
	border-radius: var(--aio-radius-small);
}

.wp-block-site-logo.is-style-reverse img {
	width: var(--logo-width) !important;
	max-width: none;
	height: auto !important;
	border-radius: 0;
}

/* Main navigation */
.wp-block-navigation.main-nav .wp-block-navigation__container {
	gap: calc(var(--aio-s) * 0.5);
}

.wp-block-navigation.main-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 calc(var(--aio-s) * 1.75);
	border-radius: var(--aio-radius-small);
	color: var(--aio-muted);
	text-decoration: none;
}

.wp-block-navigation.main-nav .wp-block-navigation-item__content:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

/* Items marked "nav-mobile-only" (e.g. Get in touch) show only in the mobile menu. */
.wp-block-navigation.main-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .nav-mobile-only {
	display: none;
}

/* Menu button, styled like the static site's "Menu" control. */
.wp-block-navigation.main-nav .wp-block-navigation__responsive-container-open {
	align-items: center;
	gap: var(--aio-s);
	min-height: 44px;
	padding: 0 calc(var(--aio-s) * 2);
	border: 1px solid var(--aio-border-strong);
	border-radius: var(--aio-radius-small);
	color: var(--wp--preset--color--cloud);
	font-weight: 600;
}

.wp-block-navigation.main-nav .wp-block-navigation__responsive-container-open::after {
	content: "Menu";
}

.wp-block-navigation.main-nav .wp-block-navigation__responsive-container-open svg {
	width: 20px;
	height: 20px;
}

/* The design collapses to the menu button below 960px (core collapses at 600px). */
@media (min-width: 600px) and (max-width: 959px) {
	.wp-block-navigation.main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation.main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Open mobile menu */
.wp-block-navigation.main-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: calc(var(--aio-s) * 3);
}

.wp-block-navigation.main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	padding-top: calc(var(--aio-s) * 8);
	gap: var(--aio-s);
}

.wp-block-navigation.main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: var(--aio-s);
}

.wp-block-navigation.main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.wp-block-navigation.main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	width: 100%;
	min-height: 56px;
	padding: 0 calc(var(--aio-s) * 2);
	color: var(--wp--preset--color--cloud);
	font-size: var(--wp--preset--font-size--large);
	border: 1px solid var(--aio-border);
}

.wp-block-navigation.main-nav .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--aio-border-strong);
	border-radius: var(--aio-radius-small);
}

.site-header .header-cta {
	display: none;
}

@media (min-width: 960px) {
	.site-header .header-cta {
		display: flex;
	}
}

/* ---------- Buttons ---------- */
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--aio-s);
	min-height: 52px;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-button .wp-block-button__link:hover {
	box-shadow: 0 10px 34px rgba(23, 105, 224, 0.5);
}

.wp-block-button .wp-block-button__link::after {
	content: "\2192";
	transition: transform 0.15s ease;
}

.wp-block-button .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

.wp-block-button.button-small .wp-block-button__link {
	min-height: 44px;
	padding: 0 calc(var(--aio-s) * 2.5);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-button.button-small .wp-block-button__link::after {
	content: none;
}

.wp-block-button.button-large .wp-block-button__link {
	min-height: 56px;
	padding: 0 calc(var(--aio-s) * 4);
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	color: #fff;
	background: rgba(255, 255, 255, 0.03);
	border-color: var(--aio-border-strong);
	box-shadow: none;
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.4);
	box-shadow: none;
}

.wp-block-buttons {
	gap: calc(var(--aio-s) * 2);
}

/* ---------- Section labels ---------- */
.is-style-section-label,
.is-style-eyebrow,
.card-step {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aio-cyan); /* 10.7:1 on Midnight, 9.9:1 on Deep Navy */
}

.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: calc(var(--aio-s) * 2);
}

.is-style-eyebrow.has-text-align-center {
	justify-content: center;
}

.is-style-eyebrow::before,
.is-style-eyebrow::after {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	flex-shrink: 0;
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	overflow: hidden;
	padding-top: calc(var(--aio-s) * 16);
	padding-bottom: calc(var(--aio-s) * 14);
	background:
		radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.5), transparent),
		radial-gradient(1px 1px at 28% 68%, rgba(255, 255, 255, 0.35), transparent),
		radial-gradient(1.5px 1.5px at 44% 14%, rgba(255, 255, 255, 0.4), transparent),
		radial-gradient(1px 1px at 63% 82%, rgba(255, 255, 255, 0.4), transparent),
		radial-gradient(1px 1px at 78% 30%, rgba(255, 255, 255, 0.45), transparent),
		radial-gradient(1.5px 1.5px at 90% 60%, rgba(23, 105, 224, 0.8), transparent),
		radial-gradient(1px 1px at 6% 88%, rgba(255, 255, 255, 0.3), transparent),
		radial-gradient(900px 480px at 50% -10%, rgba(23, 105, 224, 0.28), transparent 70%),
		var(--wp--preset--color--midnight-navy);
	background-size: 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 420px 420px, 100% 100%, auto;
}

/* Glowing rings: a graphic device for movement and connection. Not the logo. */
.hero .hero-rings {
	position: absolute;
	top: 50%;
	left: 78%;
	width: 360px;
	height: 360px;
	margin: 0;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(23, 105, 224, 0.55);
	border-radius: 50%;
	box-shadow: 0 0 80px rgba(23, 105, 224, 0.25), inset 0 0 60px rgba(23, 105, 224, 0.15);
	pointer-events: none;
}

.hero .hero-rings::before {
	content: "";
	position: absolute;
	inset: -110px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 50%;
}

.hero .hero-rings::after {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 50%;
	background: var(--aio-cyan);
	box-shadow: 0 0 8px rgba(0, 214, 245, 0.5);
	transform-origin: 6px 186px;
	animation: aio-orbit 20s linear infinite;
}

@keyframes aio-orbit {
	to {
		transform: rotate(360deg);
	}
}

.hero .hero-inner {
	position: relative;
	margin-block-start: 0;
}

.hero-inner > * {
	margin-block: 0;
}

.hero-inner > .is-style-eyebrow {
	margin-bottom: calc(var(--aio-s) * 4);
}

.hero h1 {
	max-width: 14ch;
	margin-bottom: calc(var(--aio-s) * 2);
}

.hero h1 .accent-text {
	display: block;
}

.hero-inner > .is-style-lead {
	max-width: 38em;
}

.is-style-lead {
	font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
}

.hero-inner > .actions {
	margin-top: calc(var(--aio-s) * 5);
}

.proof-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--aio-s) calc(var(--aio-s) * 2);
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--aio-muted);
}

.hero-inner > .proof-row {
	margin-top: calc(var(--aio-s) * 6);
}

.proof-row li {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--aio-s) * 2);
	margin: 0;
}

.proof-row li:first-child::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--aio-cyan);
}

.proof-row li + li::before {
	content: "";
	width: 20px;
	height: 1px;
	background: var(--aio-border-strong);
}

/* ---------- Sections ---------- */
.section {
	padding-top: calc(var(--aio-s) * 13);
	padding-bottom: calc(var(--aio-s) * 13);
}

.section-raised {
	background: var(--aio-bg-raised);
	border-top: 1px solid var(--aio-border);
	border-bottom: 1px solid var(--aio-border);
}

.section-head {
	margin-bottom: calc(var(--aio-s) * 7);
}

.section-head > * {
	margin-block: 0 calc(var(--aio-s) * 2);
}

.section-head > :last-child {
	margin-bottom: 0;
}

.wp-block-columns.split {
	column-gap: calc(var(--aio-s) * 10);
	row-gap: calc(var(--aio-s) * 6);
	margin-bottom: 0;
}

.wp-block-columns.split > .wp-block-column > * {
	margin-block: 0 calc(var(--aio-s) * 2);
}

.wp-block-columns.split > .wp-block-column > :last-child {
	margin-bottom: 0;
}

/* ---------- Cards ---------- */
.card-grid {
	display: grid;
	gap: calc(var(--aio-s) * 3);
	padding: 0;
	list-style: none;
}

.card-grid > * {
	margin: 0;
}

.is-style-card {
	padding: calc(var(--aio-s) * 4);
	background: var(--aio-surface);
	border: 1px solid var(--aio-border);
	border-radius: var(--aio-radius);
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.is-style-card:hover {
	border-color: rgba(23, 105, 224, 0.6);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
	transform: translateY(-3px);
}

.is-style-card > * {
	margin-block: 0;
}

.is-style-card p {
	color: var(--aio-muted);
}

.is-style-card h2,
.is-style-card h3 {
	margin-bottom: calc(var(--aio-s) * 2);
}

.is-style-card .card-step {
	margin-bottom: var(--aio-s);
	letter-spacing: 0.12em;
	color: var(--aio-cyan);
}

.card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: calc(var(--aio-s) * 3);
	border: 1px solid rgba(23, 105, 224, 0.5);
	border-radius: 10px;
	background: rgba(23, 105, 224, 0.12);
	color: var(--aio-cyan);
}

/* Card icons live in CSS (not in page content), so any editor can save the page without
   WordPress stripping them. Single stroke weight, rounded joins: the brand icon rules.
   Add a new icon with another .card-icon-<name> rule and that class on the icon. */
.card-icon::before {
	content: "";
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: var(--icon) center / 24px 24px no-repeat;
	mask: var(--icon) center / 24px 24px no-repeat;
}

.card-icon-search {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
}

.card-icon-code {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5M13.5 5l-3 14'/%3E%3C/svg%3E");
}

.card-icon-cycle {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 0 1-14.2 5M4 12a8 8 0 0 1 14.2-5'/%3E%3Cpath d='M18.5 3v4h-4M5.5 21v-4h4'/%3E%3C/svg%3E");
}

@media (forced-colors: active) {
	.card-icon::before {
		background: CanvasText;
	}
}

/* ---------- Product panel ---------- */
.is-style-panel {
	position: relative;
	padding: calc(var(--aio-s) * 4);
	background: linear-gradient(160deg, rgba(23, 105, 224, 0.18), transparent 55%), var(--aio-surface);
	border: 1px solid var(--aio-border-strong);
	border-radius: calc(var(--aio-radius) * 1.3);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(23, 105, 224, 0.12);
}

.is-style-panel > * {
	margin-block: 0 calc(var(--aio-s) * 2);
}

.is-style-panel > :last-child {
	margin-bottom: 0;
}

.is-style-panel > .panel-head {
	align-items: center;
	gap: calc(var(--aio-s) * 2);
	padding-bottom: calc(var(--aio-s) * 3);
	margin-bottom: calc(var(--aio-s) * 3);
	border-bottom: 1px solid var(--aio-border);
}

.panel-head > * {
	margin: 0;
}

.product-name {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.status {
	display: inline-flex;
	align-items: center;
	gap: var(--aio-s);
	padding: 4px 12px;
	border: 1px solid var(--aio-border-strong);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
}

.status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--aio-cyan);
	box-shadow: 0 0 0 4px rgba(0, 214, 245, 0.15);
}

/* ---------- Checklist ---------- */
.wp-block-list.is-style-checklist {
	display: grid;
	gap: calc(var(--aio-s) * 1.5);
	padding: 0;
	list-style: none;
}

.wp-block-list.is-style-checklist li {
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(var(--aio-s) * 1.5);
	margin: 0;
	padding: calc(var(--aio-s) * 1.5) calc(var(--aio-s) * 2);
	border: 1px solid var(--aio-border);
	border-radius: var(--aio-radius-small);
	background: rgba(255, 255, 255, 0.03);
	font-weight: 600;
}

.wp-block-list.is-style-checklist li::before {
	content: "";
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--aio-blue);
}

/* Tick drawn with borders. */
.wp-block-list.is-style-checklist li::after {
	content: "";
	position: absolute;
	left: calc(var(--aio-s) * 2 + 7px);
	top: 50%;
	width: 5px;
	height: 9px;
	margin-top: -6px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ---------- Principles ---------- */
.principles {
	display: grid;
	gap: calc(var(--aio-s) * 2);
}

.principles > * {
	margin: 0;
}

.is-style-principle {
	padding: calc(var(--aio-s) * 3);
	background: var(--aio-surface);
	border: 1px solid var(--aio-border);
	border-left: 3px solid var(--aio-blue);
	border-radius: var(--aio-radius-small);
}

.is-style-principle > * {
	margin-block: 0;
}

.is-style-principle h3 {
	margin-bottom: var(--aio-s);
}

.is-style-principle p {
	color: var(--aio-muted);
}

/* ---------- Values ---------- */
.values {
	display: grid;
	gap: calc(var(--aio-s) * 3);
}

.values > .value {
	display: flex;
	flex-direction: column;
	gap: var(--aio-s);
	margin: 0;
	padding: calc(var(--aio-s) * 3) calc(var(--aio-s) * 3) calc(var(--aio-s) * 3.5);
	border-top: 2px solid var(--aio-blue);
	background: linear-gradient(180deg, rgba(23, 105, 224, 0.1), transparent 70%);
	border-radius: 0 0 var(--aio-radius-small) var(--aio-radius-small);
}

.values > .value > * {
	margin: 0;
	color: var(--aio-muted);
	font-size: 0.9688rem;
}

.values > .value > .value-name {
	color: var(--wp--preset--color--cloud);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

/* ---------- Closing call to action ---------- */
.cta-band {
	position: relative;
	overflow: hidden;
	padding-top: calc(var(--aio-s) * 14);
	padding-bottom: calc(var(--aio-s) * 14);
	background:
		radial-gradient(700px 360px at 50% 0%, rgba(23, 105, 224, 0.35), transparent 70%),
		var(--aio-surface);
	border-top: 1px solid var(--aio-border);
}

.cta-band > * {
	margin-block: 0;
}

.cta-band h2 {
	max-width: 18ch;
	margin-bottom: calc(var(--aio-s) * 2);
}

.cta-band p {
	max-width: 36em;
	margin-bottom: calc(var(--aio-s) * 5);
}

/* ---------- Footer ---------- */
.site-footer {
	padding-top: calc(var(--aio-s) * 9);
	padding-bottom: calc(var(--aio-s) * 4);
	background: var(--wp--preset--color--footer-navy, #020c1b);
	border-top: 1px solid var(--aio-border);
	color: var(--aio-muted); /* 10.4:1 */
	font-size: var(--wp--preset--font-size--small);
}

.site-footer > * {
	margin-block: 0;
}

.footer-grid {
	display: grid;
	gap: calc(var(--aio-s) * 5);
	padding-bottom: calc(var(--aio-s) * 6);
}

.footer-grid > * {
	margin: 0;
}

.footer-grid > * > * {
	margin-block: 0 calc(var(--aio-s) * 2);
}

.footer-brand p {
	max-width: 30em;
}

.site-footer .footer-name {
	margin-bottom: calc(var(--aio-s) * 1.5);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.site-footer .footer-heading {
	margin-bottom: calc(var(--aio-s) * 1.5);
	color: #fff;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.footer-links {
	padding: 0;
	list-style: none;
}

.footer-links li {
	margin: 0;
}

.footer-links li a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
}

.site-footer a {
	color: var(--aio-muted);
	text-decoration: none;
}

.site-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.site-footer .footer-brand a {
	text-decoration: underline;
}

.site-footer .footer-registration {
	margin-top: calc(var(--aio-s) * 2);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.9;
}

.footer-legal {
	padding-top: calc(var(--aio-s) * 3);
	border-top: 1px solid var(--aio-border);
	font-size: var(--wp--preset--font-size--x-small);
}

.footer-legal > * {
	margin: 0;
}

/* ---------- Inner pages ---------- */
.page-head {
	position: relative;
	padding-top: calc(var(--aio-s) * 11);
	padding-bottom: calc(var(--aio-s) * 7);
	background:
		radial-gradient(800px 360px at 50% -20%, rgba(23, 105, 224, 0.3), transparent 70%),
		var(--wp--preset--color--midnight-navy);
	border-bottom: 1px solid var(--aio-border);
}

.page-head > * {
	margin-block: 0;
}

.page-head > * + * {
	margin-top: calc(var(--aio-s) * 2);
}

.page-head p,
.page-head .wp-block-term-description {
	color: var(--aio-muted);
}

.page-head .wp-block-post-title,
.page-head h1 {
	margin-bottom: 0;
}

.page-head .wp-block-search {
	max-width: 560px;
}

.section .wp-block-post-featured-image {
	margin-bottom: calc(var(--aio-s) * 5);
}

.prose p,
.prose li {
	color: var(--aio-muted);
}

.prose a {
	color: #fff;
}

.prose h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-top: calc(var(--aio-s) * 5);
}

.prose > h2:first-child {
	margin-top: 0;
}

.prose h3 {
	margin-top: calc(var(--aio-s) * 4);
}

.prose ul,
.prose ol {
	padding-left: 1.25em;
}

/* Posts */
.wp-block-post-template.card-grid {
	display: grid;
}

.post-cards .wp-block-post-title a {
	text-decoration: none;
}

.post-cards .wp-block-post-title a:hover {
	text-decoration: underline;
}

.post-cards .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: var(--aio-s);
	color: #fff;
	font-weight: 600;
}

.wp-block-query-pagination {
	margin-top: calc(var(--aio-s) * 6);
	gap: var(--aio-s);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 calc(var(--aio-s) * 1.5);
	border: 1px solid var(--aio-border-strong);
	border-radius: var(--aio-radius-small);
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--aio-blue);
	border-color: var(--aio-blue);
}

.post-nav {
	margin-top: calc(var(--aio-s) * 3);
}

.post-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.wp-block-post-terms a {
	color: var(--aio-muted);
}

.wp-block-separator {
	border-color: var(--aio-border-strong);
	opacity: 1;
}

/* Forms: search, comments */
.wp-block-search__input,
.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments-form textarea {
	min-height: 44px;
	padding: calc(var(--aio-s) * 1.25) calc(var(--aio-s) * 2);
	color: var(--wp--preset--color--cloud);
	background: var(--aio-surface);
	border: 1px solid var(--aio-border-strong);
	border-radius: var(--aio-radius-small);
	font: inherit;
}

.wp-block-search__inside-wrapper {
	gap: var(--aio-s);
}

.wp-block-search__button,
.wp-block-post-comments-form .wp-element-button {
	min-height: 44px;
	margin-left: 0;
	padding: 0 calc(var(--aio-s) * 2.5);
}

/* ---------- Grid breakpoints: balanced rows, no orphans (1 -> 2 -> 4, or 1 -> 3) ---------- */
@media (min-width: 420px) {
	.wp-block-list.is-style-checklist {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 600px) {
	.footer-grid,
	.principles,
	.values {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 720px) {
	.card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1000px) {
	.values {
		grid-template-columns: repeat(4, 1fr);
	}

	.site-footer .footer-grid {
		grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	}
}

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
	.hero .hero-rings {
		left: 50%;
		top: 30%;
		opacity: 0.5;
	}
}

@media (max-width: 600px) {
	:root {
		--aio-header-height: 84px;
	}

	.wp-block-site-logo.is-style-plate,
	.site-header .wp-block-site-logo:not(.is-style-reverse) {
		--logo-width: 184px; /* ~121px visible lock-up */
	}

	.wp-block-site-logo.is-style-reverse {
		--logo-width: 121px;
	}

	.section {
		padding-top: calc(var(--aio-s) * 9);
		padding-bottom: calc(var(--aio-s) * 9);
	}

	.hero {
		padding-top: calc(var(--aio-s) * 10);
		padding-bottom: calc(var(--aio-s) * 9);
	}

	.is-style-eyebrow {
		letter-spacing: 0.1em;
	}

	.is-style-eyebrow::before,
	.is-style-eyebrow::after {
		display: none;
	}

	.proof-row {
		gap: var(--aio-s) calc(var(--aio-s) * 3);
	}

	.proof-row li + li::before {
		display: none;
	}

	.is-style-card,
	.is-style-panel {
		padding: calc(var(--aio-s) * 3);
	}
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	.is-style-card:hover {
		transform: none;
	}
}