/*
Theme Name:   AnnexOps Child
Template:     annexops
Description:  Child theme for AnnexOps. Put site-specific CSS, PHP and template overrides here so parent theme updates never overwrite them.
Version:      1.0.14
Requires at least: 6.6
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  annexops-child
*/

/*
 * The parent theme loads this file after its own stylesheet, so rules here
 * win without extra specificity. Prefer the --fx-* CSS variables (set from the
 * Customizer) over hard-coded colours, e.g. color: var(--fx-primary);
 */

/* ==========================================================================
   Home page (built from AnnexOps Builder blocks)
   ========================================================================== */

/* Hero glow fades out before the hero's bottom edge, so the trust chips
   tucked up against it don't sit on a hard cut-off line. */
.ao-home-hero .fxb-hero__decor,
.ao-platform-hero .fxb-hero__decor {
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
	mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

/* Trust chips under the hero: centred and tucked up against it. */
.ao-trust .fxb-list { justify-content: center; }
.ao-trust { margin-top: -40px; }

/* Deadline cards. */
.ao-deadline {
	--ao-accent: #15803d;
	height: 100%;
	padding: 28px;
	border: 1px solid var(--fx-border);
	border-top: 3px solid var(--ao-accent);
	border-radius: 14px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--ao-accent) 6%, #fff), #fff 55%);
}
.ao-deadline--pushed { --ao-accent: #c2410c; }
.ao-deadline--later  { --ao-accent: var(--fx-primary); }
.ao-deadline > * { margin-block: 0 12px; }
.ao-deadline__badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ao-accent) 12%, #fff);
	color: var(--ao-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.ao-deadline__date { font-size: 24px; }
.ao-deadline__text { font-size: 14px; }

/* Compact countdown tiles inside the cards: four across. */
.ao-deadline .fxb-countdown { margin-top: 20px; }
.ao-deadline .fxb-countdown__units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ao-deadline .fxb-countdown__unit { min-width: 0; padding: 12px 4px; }
.ao-deadline .fxb-countdown__value { font-size: 26px; }
.ao-deadline .fxb-countdown__label { font-size: 10px; letter-spacing: .06em; }
.ao-deadline .fxb-countdown__done { font-size: 18px; font-weight: 600; color: var(--ao-accent); }

.ao-footnote { font-size: 13px; color: var(--fx-meta); }
.ao-footnote-link { text-align: right; font-weight: 600; }
.ao-footnote-link a { text-decoration: none; }

/* Regulation ticker band. */
.ao-ticker { margin: 0; font-weight: 500; }

/* Product screenshots. */
.ao-shot img { border-radius: 14px; }

/* Annex III risk pyramid: tiers widen from prohibited (top) to minimal. */
.ao-risk {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}
.ao-risk__tier {
	--ao-accent: #15803d;
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 28px;
	align-items: center;
	width: 100%;
	margin: 0 !important;
	padding: 22px 28px;
	border: 1px solid color-mix(in srgb, var(--ao-accent) 22%, var(--fx-border));
	border-left: 6px solid var(--ao-accent);
	border-radius: 14px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--ao-accent) 9%, #fff), #fff 70%);
}
.ao-risk__tier--prohibited { --ao-accent: #b91c1c; max-width: 640px; }
.ao-risk__tier--high       { --ao-accent: #c2410c; max-width: 800px; }
.ao-risk__tier--limited    { --ao-accent: #1d4ed8; max-width: 960px; }
.ao-risk__tier--minimal    { --ao-accent: #15803d; max-width: 1120px; }
.ao-risk__badge {
	grid-row: 1 / span 2;
	justify-self: start;
	margin: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--ao-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.ao-risk__title { margin: 0 0 4px; font-size: 20px; color: var(--ao-accent); }
.ao-risk__text  { margin: 0; font-size: 15px; }

@media (max-width: 781px) {
	.ao-footnote-link { text-align: left; }
	.ao-trust { margin-top: -24px; }
	.ao-risk__tier { grid-template-columns: minmax(0, 1fr); max-width: none; padding: 20px; }
	.ao-risk__badge { grid-row: auto; margin-bottom: 12px; }
}

/* ==========================================================================
   About page
   ========================================================================== */

/* Origin-story pull quote (sticky beside the long text). */
.ao-pullquote {
	padding: 32px;
	border-left: 4px solid var(--fx-primary);
	border-radius: 0 14px 14px 0;
	background: color-mix(in srgb, var(--fx-primary) 7%, #fff);
}
.ao-pullquote__text {
	margin-top: 0;
	color: var(--fx-primary);
	font-family: var(--fx-font-heading);
	font-size: 22px;
	line-height: 1.45;
}

/* "We are not lawyers" closing note. */
.ao-callout {
	margin-top: 32px;
	padding: 24px 28px;
	border: 1px solid color-mix(in srgb, var(--fx-primary) 25%, #fff);
	border-radius: 14px;
	background: color-mix(in srgb, var(--fx-primary) 6%, #fff);
}
.ao-callout p { margin: 0; }

/* Origin-story penalty figure. */
.ao-stat {
	margin-top: 28px;
	padding: 24px 28px;
	border-radius: 14px;
	background: linear-gradient(120deg, var(--fx-primary), var(--fx-secondary));
	color: #fff;
}
.ao-stat p { margin: 0; color: inherit; }
.ao-stat__value {
	font-family: var(--fx-font-heading);
	font-size: 40px;
	font-weight: 600;
	line-height: 1.1;
}
.ao-stat__value span { font-size: 24px; opacity: .85; }
.ao-stat__text { margin-top: 8px !important; font-size: 14px; opacity: .92; }

/* Stats band continuing the purple hero. */
.ao-about-hero { padding-bottom: 32px; }
.ao-about-stats .fxb-counters { max-width: 880px; margin-inline: auto; }

/* White cards: story sidebar (timeline, A2G services), parent company. */
.ao-card {
	padding: 28px;
	border: 1px solid var(--fx-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 40px -30px color-mix(in srgb, var(--fx-primary) 45%, transparent);
}
.ao-card > * + * { margin-top: 12px; }
.ao-card--wide { padding: 40px; }
.ao-card__kicker {
	margin: 0;
	color: var(--fx-primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.ao-card__title { margin-top: 6px !important; font-size: 22px; }
.ao-card__link { margin-top: 18px !important; font-weight: 600; }
.ao-card__link a { text-decoration: none; }
@media (min-width: 782px) {
	.ao-story .wp-block-column:last-child { position: sticky; top: 110px; }
}

/* "Outside vs inside" comparison. */
.ao-compare {
	--ao-accent: #b91c1c;
	height: 100%;
	padding: 28px;
	border: 1px solid color-mix(in srgb, var(--ao-accent) 22%, var(--fx-border));
	border-top: 4px solid var(--ao-accent);
	border-radius: 16px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--ao-accent) 6%, #fff), #fff 45%);
}
.ao-compare--ours { --ao-accent: var(--fx-primary); }
.ao-compare__title { margin: 0 0 12px; font-size: 18px; color: var(--ao-accent); }

/* Offices beside the parent-company text. */
.ao-office {
	margin-top: 14px;
	padding: 18px 20px;
	border: 1px solid var(--fx-border);
	border-radius: 12px;
	background: var(--fx-alt-bg);
}
.ao-office > * { margin: 0; }
.ao-office__name { margin-bottom: 6px !important; font-size: 17px; }
.ao-office p { font-size: 14px; }
.ao-office__tag {
	margin-top: 8px !important;
	color: var(--fx-primary);
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.ao-card--wide .ao-callout { margin-top: 14px; font-size: 14px; }

/* "At a glance" fact sheet. */
.ao-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid var(--fx-border);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
}
.ao-fact {
	margin: 0 !important;
	padding: 22px 24px;
	border-right: 1px solid var(--fx-border);
	border-bottom: 1px solid var(--fx-border);
}
.ao-fact:nth-child(4n) { border-right: 0; }
.ao-fact:nth-last-child(-n+4) { border-bottom: 0; }
.ao-fact__label {
	display: block;
	margin-bottom: 6px;
	color: var(--fx-meta);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.ao-fact__value { color: var(--fx-heading); font-size: 15px; }
@media (max-width: 1023px) {
	.ao-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ao-fact:nth-child(4n) { border-right: 1px solid var(--fx-border); }
	.ao-fact:nth-child(2n) { border-right: 0; }
	.ao-fact:nth-last-child(-n+4) { border-bottom: 1px solid var(--fx-border); }
	.ao-fact:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 600px) {
	.ao-facts { grid-template-columns: minmax(0, 1fr); }
	.ao-fact { border-right: 0 !important; border-bottom: 1px solid var(--fx-border) !important; }
	.ao-fact:last-child { border-bottom: 0 !important; }
	.ao-card--wide { padding: 24px; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.ao-form-card {
	padding: 36px;
	border: 1px solid var(--fx-border);
	border-top: 3px solid var(--fx-primary);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--fx-primary) 35%, transparent);
}
.ao-form-card > h3 { margin-top: 0; }
@media (max-width: 781px) { .ao-form-card { padding: 24px; } }

/* ==========================================================================
   Solutions mega menu (Explorer layout: categories · solutions · preview)
   ========================================================================== */

@media (min-width: 1024px) {
	/* Tall enough for five rows of solution tiles. */
	.fx-mega--explorer .fx-mega__body { min-height: 580px; }

	/* Category names ("AnnexOps Compliance") on one line. */
	.fx-mega--explorer .fx-mega__items { flex-basis: 320px; }
	.fx-menu--primary > li.fx-has-mega .fx-mega--explorer .fx-mega__items > li > .sub-menu { left: 320px; }

	.fx-menu--primary .fx-mega--explorer .sub-menu a,
	.fx-menu--primary .fx-mega--explorer .sub-menu a:hover { padding: 10px 12px; }

	/* Category overview card in the preview column. */
	.fx-mega__snap-card--category .fx-mega__snap-placeholder {
		background:
			radial-gradient(120px 90px at 85% 20%, color-mix(in srgb, var(--fx-primary) 35%, transparent), transparent 70%),
			linear-gradient(135deg, color-mix(in srgb, var(--fx-primary) 18%, #fff), var(--fx-alt-bg));
	}
	/* Page-hero screenshots: a hairline so the light image doesn't blend into the card. */
	.fx-mega__snap-media img { border: 1px solid var(--fx-border); }

	.fx-mega__snap-count {
		margin: 4px 0 0;
		color: var(--fx-primary);
		font-size: 13px;
		font-weight: 600;
	}
}

/* Narrow desktops: drop the preview column, keep solutions in two columns. */
@media (min-width: 1024px) and (max-width: 1240px) {
	.fx-mega--explorer .fx-mega__items { flex-basis: 250px; }
	.fx-menu--primary > li.fx-has-mega .fx-mega--explorer .fx-mega__items > li > .sub-menu {
		left: 250px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.fx-menu--primary .fx-mega__snap { display: none; }
}

/* ==========================================================================
   Header: "Sign in" (outlined) next to the solid header button
   ========================================================================== */

.fx-header__cta.ao-signin {
	margin-right: 10px;
	border: 1.5px solid var(--fx-primary);
	background: transparent;
	color: var(--fx-primary);
}
.fx-header__cta.ao-signin:hover,
.fx-header__cta.ao-signin:focus-visible {
	background: var(--fx-primary);
	color: #fff;
}

/* "Book an expert call": solid, in the secondary colour so it reads apart from the header button. */
.fx-header__cta.ao-expert-call {
	margin-right: 10px;
	background: var(--fx-secondary);
	color: #fff;
}
.fx-header__cta.ao-expert-call:hover,
.fx-header__cta.ao-expert-call:focus-visible {
	background: color-mix(in srgb, var(--fx-secondary) 85%, #000);
	color: #fff;
}

/* Frameworks dropdown: "AI Governance (our core)" reads first and largest;
   "We also implement" sits after a divider, in the regular smaller links. */
@media (min-width: 1024px) {
	.fx-menu--primary .fx-mega--columns .fx-mega__items > li.ao-mega-core .sub-menu a {
		color: var(--fx-heading);
		font-family: var(--fx-font-heading);
		font-size: 17px;
		font-weight: 600;
	}
	.fx-menu--primary .fx-mega--columns .fx-mega__items > li.ao-mega-core .sub-menu a::before {
		background: var(--fx-primary);
	}
	.fx-menu--primary .fx-mega--columns .fx-mega__items > li.ao-mega-also {
		padding-left: 26px;
		border-left: 1px solid var(--fx-border);
	}
}

/* Small laptops: tighter menu links; below 1200px "Sign in" steps aside so
   "Book an expert call" still fits next to the menu. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.fx-menu--primary > li > a { padding-inline: 7px; }
	.fx-header__cta.ao-expert-call { margin-right: 0; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.fx-header__extras .fx-header__cta.ao-signin { display: none; }
}

/* ==========================================================================
   Floating "AI Analyzer" tab on the right edge (the header button's setting)
   ========================================================================== */

.ao-float-cta {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 12px;
	border-radius: 0 12px 12px 0; /* Rotated 180°, so these land on the left (inner) side. */
	background: linear-gradient(180deg, var(--fx-primary), var(--fx-secondary));
	box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--fx-primary) 70%, transparent);
	color: #fff;
	font-family: var(--fx-font-heading);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	writing-mode: vertical-rl;
	transform: translateY(-50%) rotate(180deg);
	transition: padding .2s ease, box-shadow .2s ease;
}
.ao-float-cta:hover,
.ao-float-cta:focus-visible {
	padding-right: 16px;
	color: #fff;
	box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--fx-primary) 85%, transparent);
}
.ao-float-cta__icon { display: flex; transform: rotate(90deg); }
.ao-float-cta__icon svg { width: 18px; height: 18px; }

/* Phones: icon only, so the tab does not cover text. */
@media (max-width: 782px) {
	.ao-float-cta { padding: 12px 9px; }
	.ao-float-cta__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media print {
	.ao-float-cta { display: none; }
}

/* ==========================================================================
   Platform page (products overview)
   ========================================================================== */

/* GPAI alert bar above the hero. */
.ao-alert-band { background: #fff7ed; border-bottom: 1px solid #fed7aa; }
.ao-alert { padding: 14px 0; text-align: center; }
.ao-alert p { margin: 0; color: #9a3412; font-size: 14px; }
.ao-alert a { color: #c2410c; font-weight: 700; white-space: nowrap; }

/* Hero: live dashboard card on the right. */
.ao-platform-hero .fxb-hero__title em { font-style: normal; }
.ao-platform-hero .fxb-hero__media--blocks > * + * { margin-top: 10px; }
.ao-dash__kicker { color: #c2410c; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ao-dash__title { margin-top: 4px !important; font-size: 20px; }
.ao-dash__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 6px !important; }
.ao-dash__stat {
	margin: 0 !important;
	padding: 14px;
	border: 1px solid var(--fx-border);
	border-radius: 12px;
	color: var(--fx-meta);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
}
.ao-dash__stat strong { display: block; color: var(--fx-primary); font-family: var(--fx-font-heading); font-size: 30px; letter-spacing: 0; }
.ao-dash__stat--ok strong { color: #15803d; }
.ao-dash__row {
	--ao-dot: #15803d;
	position: relative;
	margin: 0 !important;
	padding: 10px 12px 10px 30px;
	border: 1px solid var(--fx-border);
	border-radius: 10px;
	background: var(--fx-alt-bg);
	font-size: 13.5px;
}
.ao-dash__row + .ao-dash__row { margin-top: 8px !important; }
.ao-dash__row::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 12px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ao-dot);
	transform: translateY(-50%);
}
.ao-dash__row--warn { --ao-dot: #d97706; }
.ao-dash__row--info { --ao-dot: var(--fx-primary); }

/* Deadline strip: all five milestones side by side on desktop (scrolls on smaller screens). */
@media (min-width: 1024px) {
	.ao-deadlines .fxb-tl--horizontal { grid-auto-columns: minmax(0, 1fr); overflow: visible; }
}

/* "Use one / five / all 20" cards on the purple band. */
.ao-path {
	position: relative;
	height: 100%;
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 16px;
	background: rgba(255, 255, 255, .08);
}
.ao-path > * { margin-top: 0; }
.ao-path__num {
	position: absolute;
	top: 14px;
	right: 22px;
	margin: 0 !important;
	font-family: var(--fx-font-heading);
	font-size: 56px;
	font-weight: 800;
	line-height: 1;
	opacity: .18;
}
.ao-path__icon { margin-bottom: 8px !important; font-size: 28px; }
.ao-path__title { font-size: 20px; }
.ao-path__label { margin: 16px 0 8px !important; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }

/* Role cards ("Find your path"). */
.ao-role {
	--ao-accent: var(--fx-primary);
	height: 100%;
	padding: 28px;
	border: 1px solid color-mix(in srgb, var(--ao-accent) 25%, var(--fx-border));
	border-top: 4px solid var(--ao-accent);
	border-radius: 16px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--ao-accent) 7%, #fff), #fff 55%);
}
.ao-role--legal   { --ao-accent: #15803d; }
.ao-role--founder { --ao-accent: #c2410c; }
.ao-role > * { margin-top: 0; }
.ao-role__icon { margin-bottom: 10px !important; font-size: 30px; }
.ao-role__kicker { margin-bottom: 6px !important; color: var(--ao-accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ao-role__title { font-size: 19px; }
.ao-role__link { margin-top: 16px !important; font-weight: 700; }
.ao-role__link a { color: var(--ao-accent); text-decoration: none; }

/* Seven-stage journey. */
.ao-journey { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.ao-stage {
	margin: 0 !important;
	padding: 20px 14px;
	border: 1px solid var(--fx-border);
	border-radius: 14px;
	background: #fff;
	text-align: center;
}
.ao-stage > * { margin-top: 0; }
.ao-stage__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 12px !important;
	border-radius: 50%;
	background: color-mix(in srgb, var(--fx-primary) 10%, #fff);
	font-size: 24px;
}
.ao-stage__title { margin-bottom: 6px !important; font-size: 15px; }
.ao-stage__text { font-size: 13px; line-height: 1.5; }
.ao-stage .fxb-list { justify-content: center; }
@media (max-width: 1100px) { .ao-journey { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 781px)  { .ao-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* How products connect. */
.ao-flow { max-width: 900px; margin-inline: auto; }
.ao-flow__row {
	display: grid;
	grid-template-columns: 1fr 120px 1fr auto;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px !important;
	padding: 14px 18px;
	border: 1px solid var(--fx-border);
	border-radius: 12px;
	background: #fff;
	font-size: 14.5px;
}
.ao-flow__row a { color: var(--fx-heading); font-weight: 600; text-decoration: none; }
.ao-flow__row a:hover { color: var(--fx-primary); }
.ao-flow__verb {
	position: relative;
	padding-top: 12px;
	color: var(--fx-primary);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: center;
	text-transform: uppercase;
}
.ao-flow__verb::before { content: "→"; position: absolute; top: -8px; left: 0; right: 0; font-size: 18px; letter-spacing: 0; }
.ao-flow__note {
	padding: 4px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--fx-primary) 10%, #fff);
	color: var(--fx-primary);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
@media (max-width: 781px) {
	.ao-flow__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.ao-flow__verb { padding-top: 0; text-align: left; }
	.ao-flow__verb::before { position: static; margin-right: 6px; }
	.ao-flow__note { justify-self: start; }
}

/* Recommended-product cards and tips. */
.ao-tip {
	margin-top: 16px !important;
	padding: 12px 16px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--fx-primary) 8%, #fff);
	font-size: 13.5px;
}
.ao-tip p { margin: 0; }
.ao-tag {
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #dcfce7;
	color: #15803d;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
}
.ao-tag--live { background: #fef3c7; color: #b45309; }
/* Inside linked list items only <em>/<strong> survive: <em> = free, <strong> = live. */
.ao-card .fxb-list__text em,
.ao-card .fxb-list__text strong {
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #dcfce7;
	color: #15803d;
	font-size: 10.5px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
}
.ao-card .fxb-list__text strong { background: #fef3c7; color: #b45309; }

/* ==========================================================================
   Trust Centre (legal documents in vertical tabs)
   ========================================================================== */

.ao-trust-hero .fxb-hero__title em { font-style: normal; }
.ao-trust-pills .fxb-list { margin-top: -24px; }

.ao-lg-callout {
	--ao-accent: var(--fx-primary);
	margin: 18px 0;
	padding: 16px 20px;
	border: 1px solid color-mix(in srgb, var(--ao-accent) 30%, #fff);
	border-left: 4px solid var(--ao-accent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--ao-accent) 7%, #fff);
	font-size: 14.5px;
}
.ao-lg-callout p { margin: 0; }
.ao-lg-callout--warn   { --ao-accent: #d97706; }
.ao-lg-callout--danger { --ao-accent: #b91c1c; }
.ao-lg-callout--good   { --ao-accent: #15803d; }
.ao-lg-review { margin: 0; }

/* One document. */
.ao-lg-doc { font-size: 15px; }
.ao-lg-label { margin: 0 0 6px; color: var(--fx-primary); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ao-lg-title { margin: 0 0 6px; font-size: 30px; }
.ao-lg-lead { margin: 0 0 14px; color: var(--fx-meta); }
.ao-lg-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--fx-border); }
.ao-lg-pills span { padding: 4px 12px; border: 1px solid var(--fx-border); border-radius: 999px; background: var(--fx-alt-bg); font-size: 12.5px; font-weight: 600; }
.ao-lg-doc h3 { display: flex; align-items: center; gap: 10px; margin: 32px 0 12px; font-size: 19px; }
.ao-lg-doc h4 { margin: 20px 0 8px; font-size: 16px; }
.ao-lg-section-num {
	display: inline-grid;
	place-items: center;
	min-width: 30px;
	height: 26px;
	padding: 0 6px;
	border-radius: 7px;
	background: var(--fx-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
.ao-lg-doc ul { padding-left: 20px; }
.ao-lg-doc li { margin-bottom: 8px; }
.ao-lg-doc code { padding: 1px 6px; border-radius: 5px; background: var(--fx-alt-bg); font-size: 13px; }
.ao-lg-doc table { width: 100%; margin: 12px 0 18px; border-collapse: collapse; font-size: 13.5px; }
.ao-lg-doc th { padding: 10px 12px; background: var(--fx-heading); color: #fff; font-size: 12px; text-align: left; }
.ao-lg-doc td { padding: 10px 12px; border-bottom: 1px solid var(--fx-border); vertical-align: top; }
.ao-lg-doc tr:nth-child(even) td { background: var(--fx-alt-bg); }
@media (max-width: 781px) {
	.ao-lg-doc table { display: block; overflow-x: auto; }
}

/* Cookie categories. */
.ao-lg-cookie-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 12px 0 18px; }
.ao-lg-cookie-cat { padding: 16px 18px; border: 1px solid var(--fx-border); border-radius: 12px; background: #fff; font-size: 14px; }
.ao-lg-cookie-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ao-lg-cookie-cat-name { font-weight: 700; }
.ao-lg-cookie-badge { padding: 2px 10px; border-radius: 999px; background: #fef3c7; color: #b45309; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ao-lg-badge-required { background: #dcfce7; color: #15803d; }
@media (max-width: 781px) { .ao-lg-cookie-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Insights (blog) hero: most recent + most popular
   ========================================================================== */

.ao-insights-hero .fxb-heading__title em { font-style: normal; }
.ao-hero-panel {
	height: 100%;
	padding: 22px;
	border: 1px solid var(--fx-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 40px -30px color-mix(in srgb, var(--fx-primary) 45%, transparent);
}
.ao-hero-panel__label {
	margin: 0 0 16px !important;
	color: var(--fx-primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.ao-hero-panel__label span { margin-right: 4px; }

/* Most popular: numbered ranking. */
.ao-popular { counter-reset: ao-rank; gap: 0 !important; }
.ao-popular .fxb-post-card {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: start;
	padding: 14px 0;
	border-top: 1px solid var(--fx-border);
	counter-increment: ao-rank;
}
.ao-popular .fxb-post-card:first-child { padding-top: 0; border-top: 0; }
.ao-popular .fxb-post-card::before {
	content: counter(ao-rank, decimal-leading-zero);
	color: color-mix(in srgb, var(--fx-primary) 45%, #fff);
	font-family: var(--fx-font-heading);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
}
.ao-popular .fxb-post-card__body { padding: 0 !important; }
.ao-popular .fxb-post-card__title { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
.ao-popular .fxb-post-card__date { font-size: 12px; }

/* ==========================================================================
   Single post sidebar: action card + category pills
   ========================================================================== */

.ao-post-actions {
	display: grid;
	gap: 10px;
	padding: 20px;
	border: 1px solid var(--fx-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--fx-primary) 55%, transparent);
}
.ao-post-actions__title { margin: 0 0 2px; color: var(--fx-heading); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ao-post-actions__btn {
	display: grid;
	gap: 2px;
	padding: 12px 16px;
	border: 1.5px solid var(--fx-primary);
	border-radius: 10px;
	color: var(--fx-primary);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.ao-post-actions__btn strong { font-size: 15px; }
.ao-post-actions__btn strong::after { content: " →"; }
.ao-post-actions__btn span { font-size: 12.5px; opacity: .8; }
.ao-post-actions__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--fx-primary) 70%, transparent); }
.ao-post-actions__btn--primary { background: var(--fx-primary); color: #fff; }
.ao-post-actions__btn--secondary { border-color: var(--fx-secondary); background: var(--fx-secondary); color: #fff; }
.ao-post-actions__btn--ghost { background: transparent; }
.ao-post-actions__btn--primary strong,
.ao-post-actions__btn--secondary strong,
.ao-post-actions__btn--primary:hover,
.ao-post-actions__btn--secondary:hover { color: #fff; }
.ao-post-actions__btn--ghost strong { color: var(--fx-primary); }

/* Sidebar post lists (most popular / most recent). */
.ao-side-posts .fxb-post-card__title { font-size: 14.5px; }
.ao-recent { gap: 0 !important; }
.ao-recent .fxb-post-card { padding: 12px 0; border-top: 1px solid var(--fx-border); }
.ao-recent .fxb-post-card:first-child { padding-top: 0; border-top: 0; }
.ao-recent .fxb-post-card__body { padding: 0 !important; }
.ao-recent .fxb-post-card__title { margin: 4px 0 0; line-height: 1.4; }
.ao-recent .fxb-post-card__date { font-size: 12px; }

/* "In this article" in the left rail: wide screens get a 250px rail with the
   card (sticky) and the share buttons in a row under it. */
@media (min-width: 1280px) {
	.fx-post-layout--sidebar { grid-template-columns: 250px minmax(0, 1fr) minmax(280px, 300px); gap: 48px; }
	.fx-post-layout__rail { position: sticky; top: calc(var(--fx-hh, 88px) + 28px); align-self: start; }
	.fx-post-layout__rail .fx-toc--card { margin-bottom: 20px; padding: 20px; max-height: calc(100vh - 260px); overflow-y: auto; }
	.fx-post-layout__rail .fx-share--rail { position: static; flex-direction: row; flex-wrap: wrap; }
	.fx-post-layout__rail .fx-share--rail .fx-share__label { width: 100%; margin-bottom: 0; }
}
/* Narrower: rail keeps only the share icons; the folded "In this article" shows above the article. */
@media (max-width: 1279px) {
	.fx-post-layout__rail .fx-toc--card { display: none; }
	.fx-post-layout--sidebar .fx-toc--inline { display: block; }
}

/* Category pills (sidebar + modal). */
.ao-cat-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ao-cat-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--fx-border);
	border-radius: 999px;
	background: var(--fx-alt-bg);
	color: var(--fx-heading);
	font-size: 13px;
	text-decoration: none;
}
.ao-cat-pill span { color: var(--fx-meta); font-size: 11.5px; }
.ao-cat-pill:hover,
.ao-cat-pill.is-current { border-color: var(--fx-primary); background: color-mix(in srgb, var(--fx-primary) 9%, #fff); color: var(--fx-primary); }
.ao-cat-more {
	margin-top: 14px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fx-primary);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
.ao-cat-modal {
	width: min(640px, calc(100vw - 32px));
	max-height: min(640px, calc(100vh - 64px));
	padding: 24px;
	border: 0;
	border-radius: 18px;
	box-shadow: 0 40px 80px -30px rgba(23, 18, 31, .45);
}
.ao-cat-modal::backdrop { background: rgba(23, 18, 31, .5); backdrop-filter: blur(2px); }
.ao-cat-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ao-cat-modal__title { margin: 0; color: var(--fx-heading); font-family: var(--fx-font-heading); font-size: 20px; font-weight: 700; }
.ao-cat-modal__close {
	width: 36px;
	height: 36px;
	border: 1px solid var(--fx-border);
	border-radius: 50%;
	background: #fff;
	color: var(--fx-heading);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

/* ==========================================================================
   Homepage (Developer Guide, Oct 2026)
   ========================================================================== */

/* Hero: small note under the buttons. */
.ao-hero-note {
	margin: 18px 0 0;
	color: var(--fx-text);
	font-size: 14px;
	letter-spacing: .01em;
}

/* Hero: the panel brings its own card, so the hero's blocks column has no frame. */
.ao-home-hero .fxb-hero__media--blocks {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* Hero: AI inventory product panel (stand-in for a real screenshot). */
.ao-inventory {
	overflow: hidden;
	border: 1px solid var(--fx-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--fx-primary) 45%, transparent);
	font-size: 14px;
	text-align: left;
}
.ao-inventory__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--fx-border);
	background: var(--fx-alt-bg);
}
.ao-inventory__bar > span { width: 9px; height: 9px; border-radius: 50%; background: var(--fx-border); }
.ao-inventory__bar strong { margin-left: 10px; color: var(--fx-heading); font-family: var(--fx-font-heading); }
.ao-inventory__bar em { margin-left: auto; color: var(--fx-text); font-size: 12px; font-style: normal; }
.ao-inventory__rows { margin: 0; padding: 6px 20px; list-style: none; }
.ao-inventory__rows li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--fx-border);
}
.ao-inventory__rows li:last-child { border-bottom: 0; }
.ao-inventory__rows b { color: var(--fx-heading); font-weight: 600; }
.ao-inventory__rows span { grid-row: 2; color: var(--fx-text); font-size: 12.5px; }
.ao-risk-chip {
	grid-row: 1 / span 2;
	align-self: center;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	white-space: nowrap;
}
.ao-risk-chip--high { background: #fde8ef; color: #b3134f; }
.ao-risk-chip--limited { background: #fff4e0; color: #a35a00; }
.ao-risk-chip--minimal { background: #e7f6ee; color: #18794e; }
.ao-inventory__core,
.ao-inventory__also {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 20px;
}
.ao-inventory__core { padding-top: 16px; border-top: 1px solid var(--fx-border); }
.ao-inventory__also { padding-top: 10px; padding-bottom: 20px; }
.ao-fw-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border: 1px solid var(--fx-border);
	border-radius: 999px;
	color: var(--fx-text);
	font-size: 12px;
	font-weight: 600;
}
.ao-fw-badge--lg {
	padding: 9px 18px;
	border-color: transparent;
	background: linear-gradient(135deg, var(--fx-primary), var(--fx-secondary));
	color: #fff;
	font-family: var(--fx-font-heading);
	font-size: 16px;
}

/* Framework badges: "Our core" large, "We also implement" smaller. */
.ao-fw-badges .ao-fw-badges__label,
.ao-fw-groups .ao-fw-badges__label {
	margin: 28px 0 12px;
	color: var(--fx-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-align: center;
	text-transform: uppercase;
}
.ao-fw-badges .fxb-list--pills { justify-content: center; }
.ao-fw-badges__core.fxb-list--pills .fxb-list__item {
	padding: 16px 32px;
	border-color: transparent;
	background: linear-gradient(135deg, var(--fx-primary), var(--fx-secondary));
	box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--fx-primary) 80%, transparent);
	transition: transform .2s ease, box-shadow .2s ease;
}
.ao-fw-badges__core.fxb-list--pills .fxb-list__item:has(.fxb-list__link):hover {
	border-color: transparent;
	background: linear-gradient(135deg, var(--fx-primary), var(--fx-secondary));
	transform: translateY(-2px);
}
.ao-fw-badges__core .fxb-list__text,
.ao-fw-badges__core .fxb-list__link:hover .fxb-list__text {
	color: #fff;
	font-family: var(--fx-font-heading);
	font-size: 20px;
	font-weight: 700;
}
@media (max-width: 782px) {
	/* Badge rows scroll sideways on phones. */
	.ao-fw-badges .fxb-list--pills {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		margin-inline: -16px;
		padding: 2px 16px 8px;
		scrollbar-width: none;
	}
	.ao-fw-badges .fxb-list--pills::-webkit-scrollbar { display: none; }
	.ao-fw-badges .fxb-list--pills > li { flex: 0 0 auto; }
	.ao-fw-badges__core.fxb-list--pills .fxb-list__item { padding: 13px 22px; }
	.ao-fw-badges__core .fxb-list__text { font-size: 17px; }
}

/* Centred standalone buttons under a section. */
.ao-center-buttons { margin-top: 36px; }
.ao-center-buttons .wp-block-button__link {
	padding: 15px 30px;
	font-size: 15px;
	font-weight: 600;
}

/* "We cover the rest too": framework tiles. */
.ao-rest__tiles { margin-top: 36px; }
.ao-rest__tiles .fxb-ib { position: relative; }
.ao-rest__tiles .fxb-ib__title a::after { content: ""; position: absolute; inset: 0; }
.ao-rest__tiles .fxb-ib:hover { border-color: var(--fx-primary); }
@media (max-width: 782px) {
	/* Framework tiles: a compact 3-up grid on phones instead of a long stack. */
	.fxb-grid.fxb-icon-boxes.ao-rest__tiles:not(.fxb-logos) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
	.ao-rest__tiles .fxb-ib__icon { width: 52px; height: 52px; margin-bottom: 10px; }
	.ao-rest__tiles .fxb-ib__icon svg { width: 22px; height: 22px; }
	.ao-rest__tiles .fxb-ib__title { font-size: 15px; }
}

/* ==========================================================================
   Horizontal timeline (homepage, Platform): the scroll box clipped the dots'
   halo and the card shadows. Give it room on every side (negative margins keep
   it aligned), move the line with it, and fit all cards on small laptops.
   ========================================================================== */

.fxb-tl--horizontal {
	margin: -12px -12px -8px;
	padding: 12px 12px 20px;
	scroll-padding-inline: 12px;
}
.fxb-tl--horizontal::before {
	top: 21px;
	right: 12px;
	left: 12px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.fxb-tl--horizontal { grid-auto-columns: minmax(0, 1fr); gap: 16px; }
	.fxb-tl--horizontal .fxb-tl__card { padding: 22px 20px; }
}

/* ==========================================================================
   Card shadows, site-wide. The builder's "Corporate" style uses borderless
   cards with large soft shadows (up to 35–70px blur), wider than the gaps
   between cards, so neighbouring shadows ran together. Tighter shadows, plus a
   hairline border so cards keep their edge.
   ========================================================================== */

html:root {
	--fxb-shadow-sm: 0 1px 2px rgba(24, 20, 44, .04), 0 6px 14px -8px rgba(24, 20, 44, .12);
	--fxb-shadow: 0 2px 4px rgba(24, 20, 44, .05), 0 12px 24px -12px rgba(24, 20, 44, .18);
	--fxb-shadow-lg: 0 4px 8px rgba(24, 20, 44, .05), 0 20px 40px -18px rgba(24, 20, 44, .24);
}
body :is(.fxb-ib--card .fxb-ib, .fxb-plan, .fxb-quote, .fxb-team--card .fxb-member, .fxb-tl__card, .fxb-contact--cards .fxb-contact__item, .fxb-faq__card, .fxb-logos--boxed .fxb-logo, .fxb-counters--boxed .fxb-counter, .fxb-promo--bordered, .fxb-post-card) {
	border-color: var(--fxb-border);
}
body .fxb-is-dark :is(.fxb-quote, .fxb-plan, .fxb-tl__card, .fxb-faq__card) {
	border-color: rgba(255, 255, 255, .12);
}

/* ==========================================================================
   Framework pages (Developer Guide §3)
   ========================================================================== */

/* "From the EU AI Act experts at AnnexOps" strip under the hero. */
.ao-expert-strip {
	border-top: 1px solid var(--fx-border);
	border-bottom: 1px solid var(--fx-border);
	background: color-mix(in srgb, var(--fx-primary) 6%, #fff);
}
.ao-expert-strip .ao-expert-strip__link {
	margin: 0;
	padding: 14px 0;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}
.ao-expert-strip__link a { color: var(--fx-primary); text-decoration: none; }
.ao-expert-strip__link a:hover { text-decoration: underline; }

/* "Why AnnexOps": one highlighted line. */
.ao-why-line .fxb-heading { max-width: 860px; margin-inline: auto; }
.ao-why-line .fxb-heading__title {
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.3;
}
.ao-why-line .fxb-heading__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 24px auto 0;
	background: linear-gradient(90deg, var(--fx-primary), var(--fx-secondary));
}

/* Overview: groups. */
.ao-fw-groups .ao-fw-badges__label:first-child { margin-top: 0; }
.ao-fw-groups .ao-fw-groups__core + .ao-fw-badges__label { margin-top: 56px; }
.ao-fw-groups__core .fxb-ib__title { font-size: 24px; }

/* ==========================================================================
   Services, Why AnnexOps, Compare, Trust (Developer Guide §4)
   ========================================================================== */

/* Services: "AI governance" box large and highlighted, "Wider compliance" plainer. */
.ao-service-boxes { gap: 28px; align-items: stretch !important; }
.ao-service-box {
	height: 100%;
	padding: clamp(28px, 3.4vw, 48px);
	border: 1px solid var(--fx-border);
	background: #fff;
}
.ao-service-box--core {
	border: 0;
	background: linear-gradient(150deg, var(--fx-primary), color-mix(in srgb, var(--fx-primary) 55%, var(--fx-secondary)));
	box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--fx-primary) 70%, transparent);
	color: #fff;
}
.ao-service-box .ao-service-box__label {
	margin: 0 0 8px;
	color: var(--fx-primary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.ao-service-box .ao-service-box__title { margin: 0 0 24px; font-size: clamp(24px, 2.4vw, 32px); }
.ao-service-box--core .ao-service-box__label { color: rgba(255, 255, 255, .8); }
.ao-service-box--core .ao-service-box__title,
.ao-service-box--core .fxb-list__text { color: #fff; }
.ao-service-box--core .fxb-list { --fxb-list-accent: #fff; font-size: 17px; }
.ao-service-box .fxb-list { margin-bottom: 0; }

/* Why AnnexOps: alternating rows. */
.ao-why-row__cols { align-items: center !important; gap: clamp(32px, 5vw, 72px); }
.ao-why-point .ao-why-point__num {
	margin: 0 0 10px;
	background: linear-gradient(135deg, var(--fx-primary), var(--fx-secondary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: var(--fx-font-heading);
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
}
.ao-why-point .ao-why-point__title { margin: 0 0 14px; font-size: clamp(26px, 2.6vw, 36px); }
.ao-why-point .ao-why-point__text { margin: 0; font-size: 18px; line-height: 1.7; }
.ao-why-visual {
	display: grid;
	place-items: center;
	align-content: center;
	gap: 18px;
	min-height: 300px;
	padding: 32px;
	border: 1px solid var(--fx-border);
	background:
		radial-gradient(260px 180px at 80% 10%, color-mix(in srgb, var(--fx-secondary) 14%, transparent), transparent 70%),
		radial-gradient(260px 200px at 10% 90%, color-mix(in srgb, var(--fx-primary) 14%, transparent), transparent 70%),
		#fff;
}
.ao-why-visual__icon {
	display: grid;
	place-items: center;
	width: 104px;
	height: 104px;
	background: linear-gradient(135deg, var(--fx-primary), var(--fx-secondary));
	color: #fff;
}
.ao-why-visual__label { color: var(--fx-heading); font-family: var(--fx-font-heading); font-size: 18px; font-weight: 700; }
.ao-why-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--fx-border); }
@media (max-width: 781px) {
	/* Stack text first on phones, whichever side the visual sits on desktop. */
	.ao-why-row__cols--flip { flex-direction: column-reverse; }
	.ao-why-visual { min-height: 220px; }
}

/* Compare table. */
.ao-cmp { overflow-x: auto; margin: 0; }
.ao-cmp table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.ao-cmp th,
.ao-cmp td { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--fx-border); text-align: center; }
.ao-cmp th:first-child,
.ao-cmp td:first-child { color: var(--fx-heading); font-weight: 600; text-align: left; }
.ao-cmp thead th { color: var(--fx-heading); font-family: var(--fx-font-heading); font-size: 14px; vertical-align: bottom; }
.ao-cmp .ao-cmp__us { background: color-mix(in srgb, var(--fx-primary) 7%, #fff); color: var(--fx-primary); font-weight: 700; }
.ao-cmp thead .ao-cmp__us { background: var(--fx-primary); color: #fff; }

/* Draft notes (remove before publishing). */
.ao-draft-note {
	margin: 0 0 28px;
	padding: 14px 18px;
	border-left: 4px solid #d97706;
	background: #fff7ed;
	color: #7c2d12;
	font-size: 15px;
}

/* Homepage "Two ways to work with us": the platform and the experts. */
.ao-way { display: flex; flex-direction: column; }
.ao-way .ao-way__text { margin: -8px 0 22px; font-size: 16px; line-height: 1.65; }
.ao-service-box--core .ao-way__text { color: rgba(255, 255, 255, .85); }
.ao-way .fxb-list { margin-bottom: 28px; }
.ao-way .ao-way__cta { margin-top: auto; }
.ao-way .ao-way__cta .wp-block-button__link { padding: 14px 26px; font-size: 15px; font-weight: 600; }
.ao-service-box--core .ao-way__cta .wp-block-button__link { background: #fff; color: var(--fx-primary); }
.ao-service-box--core .ao-way__cta .wp-block-button__link:hover { background: color-mix(in srgb, #fff 88%, var(--fx-primary)); }

/* Phones: the two-part hero headline fits in three lines at 375px. */
@media (max-width: 480px) {
	.ao-home-hero .fxb-hero__title { font-size: 31px; }
}

/* ==========================================================================
   "Solutions" mega menu, framework first (inc/solutions-menu.php)
   Tab strip · one pane per framework · Platform row. Desktop only; phones use
   the app menu with the same items.
   ========================================================================== */

.ao-sol { display: none; }

@media (min-width: 1024px) {
	.fx-header__inner:has(.ao-has-solutions) { position: relative; }
	.fx-menu--primary > li.ao-has-solutions { position: static; }

	.ao-sol {
		--ao-sol-soft: color-mix(in srgb, var(--fx-primary) 4%, #fff);
		--ao-sol-lav: color-mix(in srgb, var(--fx-primary) 10%, #fff);
		--ao-sol-lav-border: color-mix(in srgb, var(--fx-primary) 22%, #fff);
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 60;
		display: block;
		padding: 22px 28px;
		border: 1px solid var(--fx-border);
		border-top: 2px solid var(--fx-primary);
		border-radius: 0 0 12px 12px;
		background: #fff;
		box-shadow: 0 30px 60px -20px rgba(20, 16, 40, .25);
		color: var(--fx-heading);
		font-size: 15px;
		line-height: 1.4;
		text-align: left;
		text-transform: none;
		letter-spacing: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		pointer-events: none;
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}
	/* Hover bridge between the Solutions link and the panel. */
	.ao-sol::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
	.fx-menu--primary > li.ao-has-solutions:hover > .ao-sol,
	.fx-menu--primary > li.ao-has-solutions:focus-within > .ao-sol,
	.fx-menu--primary > li.ao-has-solutions.is-open > .ao-sol {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		transition-delay: 0s;
	}
	.fx-menu--primary > li.ao-has-solutions > .ao-sol.is-closed { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
	.ao-sol a { text-decoration: none; }
	.ao-sol ul { margin: 0; padding: 0; list-style: none; }
	.ao-sol ul li + li { border-top: 0; }

	.ao-sol__top { display: grid; grid-template-columns: 316px minmax(0, 1fr); gap: 28px; align-items: stretch; }
	/* Never taller than the screen below the header: the panel scrolls instead. */
	.ao-sol { max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; }

	/* Tab strip. */
	.ao-sol__strip { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 12px; background: var(--ao-sol-soft); }
	.ao-sol-group { padding: 7px 12px 2px; color: var(--fx-primary); font-size: 12px; font-weight: 800; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; }
	.ao-sol-group:first-child { padding-top: 3px; }
	.ao-sol .ao-sol-tab {
		display: block;
		padding: 5px 12px 5px 13px;
		border: 1px solid transparent;
		border-left: 3px solid transparent;
		border-radius: 10px;
		color: var(--fx-heading);
		transition: background-color .15s ease, border-color .15s ease;
	}
	.ao-sol .ao-sol-tab:hover { background: var(--ao-sol-lav); color: var(--fx-heading); }
	.ao-sol .ao-sol-tab[aria-selected="true"] { border-color: var(--ao-sol-lav-border); border-left-color: var(--fx-primary); background: #fff; }
	.ao-sol .ao-sol-tab:focus-visible { outline: 2px solid var(--fx-primary); outline-offset: 2px; }
	.ao-sol-tab__name { display: block; font-family: var(--fx-font-heading); font-size: 15px; font-weight: 700; line-height: 1.3; }
	.ao-sol-tab[aria-selected="true"] .ao-sol-tab__name { color: var(--fx-primary); }
	.ao-sol-tab__tag,
	.ao-sol-item__tag { display: block; overflow: hidden; color: var(--fx-text); font-size: 12px; font-style: italic; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }

	/* Panes: without JavaScript all of them show, stacked. */
	.ao-sol__panes { display: flex; flex-direction: column; min-width: 0; }
	.ao-sol-pane { display: flex; flex: 1 1 auto; flex-direction: column; }
	.ao-sol-pane + .ao-sol-pane { margin-top: 28px; }
	.ao-sol[data-js] .ao-sol-pane { display: none; }
	.ao-sol[data-js] .ao-sol-pane.is-active { display: flex; margin-top: 0; animation: ao-sol-fade .12s ease; }
	@keyframes ao-sol-fade { from { opacity: 0; } }

	.ao-sol-pane__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 2px 10px 0; }
	.ao-sol .ao-sol-pane__title { margin: 0; font-family: var(--fx-font-heading); font-size: 19px; font-weight: 700; line-height: 1.3; }
	.ao-sol .ao-sol-pane__title a { color: var(--fx-heading); }
	.ao-sol .ao-sol-pane__title a:hover { color: var(--fx-primary); }
	.ao-sol-pane__meta { color: var(--fx-text); font-size: 12px; }
	.ao-sol .ao-sol-pane__link { margin-left: auto; color: var(--fx-primary); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
	.ao-sol .ao-sol-pane__link:hover { color: var(--fx-secondary); }
	.ao-sol-pane__link svg { display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
	.ao-sol .ao-sol-pane__strap { margin: 3px 0 0; padding: 0 10px; color: var(--fx-text); font-size: 13px; line-height: 1.5; }

	/* Items: two columns filled top to bottom; a fixed floor keeps every pane the same height. */
	.ao-sol .ao-sol-pane__items {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(var(--ao-sol-rows, 5), minmax(56px, auto));
		align-content: start;
		column-gap: 28px;
		min-height: 280px;
		margin-top: 14px;
	}
	.ao-sol .ao-sol-item a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--fx-heading); transition: background-color .15s ease; }
	.ao-sol .ao-sol-item a:hover { background: var(--ao-sol-soft); color: var(--fx-heading); }
	.ao-sol .ao-sol-item a:hover .ao-sol-item__title { color: var(--fx-primary); }
	.ao-sol .ao-sol-item a:focus-visible { outline: 2px solid var(--fx-primary); outline-offset: -2px; }
	.ao-sol-item__title { display: block; font-family: var(--fx-font-heading); font-size: 15px; font-weight: 700; line-height: 1.3; }

	/* Platform row, under every tab. */
	.ao-sol-platform { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fx-border); }
	.ao-sol-platform__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0 10px 6px; }
	.ao-sol-platform__label { color: var(--fx-primary); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
	.ao-sol-platform__sub { color: var(--fx-text); font-size: 12px; }
	.ao-sol .ao-sol-platform__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
}

/* Narrow desktop: a 240px strip, one column of items, Platform 2 × 4. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.ao-sol { padding: 18px 20px; border-radius: 0; }
	.ao-sol__top { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; }
	.ao-sol-tab__tag { white-space: normal; }
	.ao-sol .ao-sol-pane__items { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: minmax(52px, auto); min-height: 0; }
	.ao-sol .ao-sol-platform__items { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.ao-sol,
	.ao-sol * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Sticky header: no flicker when it shrinks
   The header shrinks at 80px of scroll (88px → 58px). As it sits in the page
   flow, the content jumped up 30px and the browser pulled the scroll position
   back under 80px, so the header grew again, shrank again… A bottom margin
   that grows exactly as the header shrinks (same transition) keeps its space
   in the page constant; the margin sits under the sticky header, out of view.
   ========================================================================== */

.fx-header-sticky:not(.fx-header-transparent) .fx-header {
	margin-bottom: calc(var(--fx-header-h) - var(--fx-hh));
	transition: background-color var(--fx-transition), box-shadow var(--fx-transition), border-color var(--fx-transition), margin-bottom var(--fx-transition);
}

/* ==========================================================================
   Framework automation pages (e.g. /nis2-compliance-automation/)
   ========================================================================== */

/* Menu links land below the sticky header. */
.ao-nis2-how [id],
#how, #capabilities, #free-check, #coverage, .ao-cap-card[id] { scroll-margin-top: 110px; }

/* Illustrative sample cards (hero hub card, Art 21 measures). */
.ao-ex-card {
	padding: 24px 25px 25px;
	border: 1px solid var(--fx-border);
	border-top: 4px solid var(--fx-primary);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(24, 20, 44, .04), 0 12px 28px -16px rgba(24, 20, 44, .18);
	text-align: left;
}
.ao-ex-card__label { display: block; margin-bottom: 10px; color: var(--fx-primary); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ao-ex-card .ao-ex-card__title { margin: 0 0 16px; color: var(--fx-heading); font-family: var(--fx-font-heading); font-size: 18px; font-weight: 700; }
.ao-ex-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ao-ex-card__stat { padding: 12px 14px; border-left: 4px solid var(--ao-stat); border-radius: 8px; background: color-mix(in srgb, var(--fx-primary) 4%, #fff); }
.ao-ex-card__stat b { display: block; color: var(--ao-stat); font-family: var(--fx-font-heading); font-size: 28px; line-height: 1.1; }
.ao-ex-card__stat span { display: block; margin-top: 4px; color: var(--fx-text); font-size: 12.5px; line-height: 1.35; }
.ao-ex-card__rows,
.ao-ex-card__badges { margin: 0; padding: 0; list-style: none; }
.ao-ex-card__rows li { position: relative; padding: 9px 0 9px 20px; border-top: 1px solid var(--fx-border); color: var(--fx-heading); font-size: 14px; }
.ao-ex-card__rows li::before { content: ""; position: absolute; top: 50%; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--ao-dot); transform: translateY(-50%); }
.ao-ex-card__badges li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--fx-border); color: var(--fx-heading); font-size: 14px; }
.ao-badge { flex: none; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--fx-primary) 10%, #fff); color: var(--fx-primary); font-size: 12px; font-style: normal; font-weight: 700; }
.ao-badge--amber { background: #fff4e0; color: #a35a00; }

/* How it works: icon + text items beside the measures card. */
.ao-how-cols { gap: clamp(32px, 5vw, 64px); margin-top: 28px; }
.ao-how-item { display: flex; gap: 16px; padding: 0 0 22px; }
.ao-how-item + .ao-how-item { padding-top: 22px; border-top: 1px solid var(--fx-border); }
.ao-how-item__body > * { margin: 0; }
.ao-how-item h3,
.ao-cap-card h3 { margin: 0 0 8px; font-size: 19px; }
.ao-how-item p,
.ao-cap-card p { margin: 0; font-size: 15.5px; line-height: 1.65; }
.ao-nis2-ico {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--fx-primary) 10%, transparent);
	color: var(--fx-primary);
}
.ao-nis2-ico svg { width: 22px; height: 22px; }

/* Capability cards. */
.ao-cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.ao-cap-card {
	padding: 28px;
	border: 1px solid var(--fx-border);
	background: #fff;
	box-shadow: 0 1px 2px rgba(24, 20, 44, .04), 0 6px 14px -8px rgba(24, 20, 44, .12);
}
.ao-cap-card .ao-nis2-ico { margin-bottom: 18px; }
@media (max-width: 1023px) { .ao-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ao-cap-grid { grid-template-columns: minmax(0, 1fr); } }
/* The block layout's gap between stacked blocks does not apply inside these grids and rows. */
.ao-cap-grid > *,
.ao-how-item > *,
.ao-how-cols .wp-block-column > .ao-how-item { margin-block: 0; }
.ao-how-item__body > *:first-child { margin-top: 0; }

/* Integrations pills with brand logos (icon set "brands"). */
.ao-brand-pills.fxb-list--pills .fxb-list__marker svg { width: 18px; height: 18px; }
.ao-brand-pills.fxb-list--pills .fxb-list__item { gap: 9px; }
.ao-badge--green { background: #e7f6ee; color: #18794e; }
.ao-badge--red { background: #fde8ea; color: #b4232f; }

/* ==========================================================================
   Language switcher (inc/language-switcher.php)
   ========================================================================== */

.ao-lang { position: relative; margin-right: 12px; }
.ao-lang summary {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--fx-heading);
	font-size: 14px;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}
.ao-lang summary::-webkit-details-marker { display: none; }
.ao-lang summary:hover,
.ao-lang[open] summary { background: var(--fx-alt-bg); color: var(--fx-primary); }
.ao-lang summary:focus-visible { outline: 2px solid var(--fx-primary); outline-offset: 2px; }
.ao-lang summary .fx-icon:last-child { transition: transform .2s ease; }
.ao-lang[open] summary .fx-icon:last-child { transform: rotate(180deg); }
.ao-lang__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 120;
	min-width: 180px;
	margin: 0;
	padding: 6px;
	border: 1px solid var(--fx-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 28px -12px rgba(20, 16, 40, .28);
	list-style: none;
}
.ao-lang__menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 7px;
	color: var(--fx-heading);
	font-size: 14px;
	text-decoration: none;
}
.ao-lang__menu a:hover { background: var(--fx-alt-bg); color: var(--fx-primary); }
.ao-lang__menu a[aria-current] { color: var(--fx-primary); font-weight: 600; }
.ao-lang__code {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 20px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--fx-primary) 10%, #fff);
	color: var(--fx-primary);
	font-size: 11px;
	font-weight: 700;
}
/* Phones use the menu rows instead. */
@media (max-width: 1023px) { .fx-header .ao-lang { display: none; } }

/* Cookie banner (Complianz): fade in instead of sliding up. The slide animates
   the banner's position, which PageSpeed counts as layout shift (CLS). */
@keyframes ao-cmplz-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1023px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner { bottom: 0 !important; animation: ao-cmplz-fade .3s ease-out 1s both !important; }
}

/* Hero: slide the text up without fading it in. Text that starts invisible
   only counts as painted once visible, which delayed LCP by ~1s on mobile. */
@keyframes ao-rise-soft { from { transform: translateY(14px); } to { transform: none; } }
.fxb-hero__content > * { animation-name: ao-rise-soft !important; }

/* Author-bio profile icons (inline SVG, see inc/performance.php). */
.ao-bio-icon { display: inline-block; vertical-align: middle; color: var(--fx-heading); transition: color .2s ease; }
a:hover > .ao-bio-icon { color: var(--fx-primary); }