/**
 * ERPWAPRO design system: tokens, foundations and reusable components.
 * Keep brand gradients on small accents and primary calls to action.
 */

:root {
	/* Brand primitives: preserve the logo palette. */
	--color-brand-magenta: #fb0b7a;
	--color-brand-pink: #fc2d60;
	--color-brand-coral: #fc4f4f;
	--color-brand-orange: #fc733e;
	--color-brand-gold: #fc9b2b;

	/* Semantic colors: use these for content and interface elements. */
	--color-background: #fff;
	--color-surface: #fff;
	--color-surface-muted: #f8f9fc;
	--color-surface-hover: #eef0f5;
	--color-surface-brand: #fff5f8;
	--color-surface-warm: #fff8ef;
	--color-text: #191b26;
	--color-text-muted: #5e6475;
	--color-text-on-brand: #10121b;
	--color-link: #a40c50;
	--color-link-hover: #850940;
	--color-border: #e1e4eb;
	--color-border-strong: #737b8c;
	--color-focus: var(--color-link);
	--color-disabled-background: var(--color-surface-hover);
	--color-disabled-text: var(--color-text-muted);

	/* The soft gradient is reserved for optional small decorative accents. */
	--gradient-brand: linear-gradient(
		110deg,
		var(--color-brand-magenta) 0%,
		var(--color-brand-pink) 25%,
		var(--color-brand-coral) 50%,
		var(--color-brand-orange) 75%,
		var(--color-brand-gold) 100%
	);
	--gradient-brand-soft: linear-gradient(
		110deg,
		var(--color-surface-brand) 0%,
		var(--color-surface-warm) 100%
	);

	/* System fonts avoid font downloads and font-swap layout shifts. */
	--font-family-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-family-heading: var(--font-family-body);
	--font-family-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	--font-size-xs: 0.8125rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	--font-size-xl: clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem);
	--font-size-2xl: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
	--font-size-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
	--font-size-4xl: clamp(2.25rem, 1.65rem + 2.6vw, 3.75rem);
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--line-height-tight: 1.15;
	--line-height-heading: 1.25;
	--line-height-body: 1.65;
	--line-height-control: 1.4;
	--letter-spacing-heading: -0.025em;

	/* Spacing: a 4px base at the default browser font size. */
	--space-0: 0;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--section-space: clamp(3rem, 2rem + 4vw, 6rem);
	--card-padding: clamp(1.25rem, 1rem + 1vw, 2rem);

	--radius-xs: 0.375rem;
	--radius-sm: 0.625rem;
	--radius-md: 1rem;
	--radius-lg: 1.5rem;
	--radius-pill: 9999px;

	--shadow-xs: 0 1px 2px rgb(25 27 38 / 4%);
	--shadow-sm: 0 2px 8px rgb(25 27 38 / 5%);
	--shadow-md: 0 8px 24px rgb(25 27 38 / 7%);
	--shadow-lg: 0 16px 40px rgb(25 27 38 / 9%);

	/* Container widths include their inline padding. */
	--container-narrow: 820px;
	--container: 1320px;
	--container-wide: 1440px;
	--container-gutter: clamp(1rem, 4vw, 2rem);
	--content-measure: 70ch;
	--control-min-height: 2.75rem;
	--focus-ring-width: 3px;
	--focus-ring-offset: 3px;

	--duration-fast: 120ms;
	--duration-base: 200ms;
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--transition-colors: color var(--duration-fast) var(--ease-standard),
		background-color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
	--transition-shadow: box-shadow var(--duration-base) var(--ease-standard);

	/* Header/footer geometry and layers. Match the navigation media query below. */
	--breakpoint-navigation: 64rem;
	--header-min-height: 4.5rem;
	--header-sticky-offset: 0px;
	--header-open-top: 0px;
	--header-panel-top: var(--header-min-height);
	--admin-bar-height: 32px;
	--logo-width: 12rem;
	--logo-width-mobile: 9.5rem;
	--logo-max-height: 3rem;
	--icon-size: 1.5rem;
	--icon-size-small: 1rem;
	--cart-badge-size: 1.25rem;
	--submenu-width: 18rem;
	--footer-description-width: 36ch;
	--brand-detail-size: 3px;
	--z-header: 100;
	--z-backdrop: 1;
	--z-navigation: 2;
	--color-backdrop: rgb(25 27 38 / 20%);
	--scroll-lock-top: 0px;
	--scrollbar-width: 0px;
	--transition-transform: transform var(--duration-fast) var(--ease-standard);

	/* Homepage typography and component measurements. */
	--font-size-display: clamp(2.5rem, 1.5rem + 3.3vw, 4.5rem);
	--letter-spacing-eyebrow: 0.12em;
	--hero-space: clamp(3rem, 6vw, 5rem);
	--heading-measure: 24ch;
	--hero-heading-measure: 15ch;
	--icon-tile-size: 3rem;
	--choice-size: 1.125rem;
	--ui-dot-size: 0.375rem;
	--ui-note-width: 24rem;
	--ui-background-angle: -3deg;
}

/* Document foundations. */

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

.site-main,
.site-main [id],
.site-footer [id] {
	scroll-margin-top: calc(var(--header-panel-top) + var(--space-6));
}

body {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--header-sticky-offset));
	min-height: calc(100dvh - var(--header-sticky-offset));
	margin: 0;
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-family-body);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 var(--space-4);
	color: var(--color-text);
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-heading);
}

h1 {
	font-size: var(--font-size-4xl);
	line-height: var(--line-height-tight);
}

h2 {
	font-size: var(--font-size-3xl);
}

h3 {
	font-size: var(--font-size-2xl);
}

h4 {
	font-size: var(--font-size-xl);
}

h5 {
	font-size: var(--font-size-lg);
}

h6 {
	font-size: var(--font-size-base);
}

p,
ul,
ol,
dl {
	margin-block: 0 var(--space-6);
}

strong,
b {
	font-weight: var(--font-weight-bold);
}

small {
	font-size: var(--font-size-sm);
}

::selection {
	background: var(--color-surface-brand);
	color: var(--color-text);
}

img,
video {
	max-width: 100%;
	height: auto;
}

iframe {
	max-width: 100%;
}

figure {
	margin-inline: 0;
}

button,
input,
select,
textarea {
	max-width: 100%;
	font: inherit;
}

code,
kbd,
samp,
pre {
	font-family: var(--font-family-mono);
}

pre {
	max-width: 100%;
	overflow-x: auto;
}

a {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: var(--transition-colors);
}

a:where(:hover) {
	color: var(--color-link-hover);
}

:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

/* Reusable layout primitives; no page-specific composition. */

.container,
.site-main {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.container--wide {
	max-width: var(--container-wide);
}

.site-main {
	flex: 1 0 auto;
	min-width: 0;
	padding-block: var(--space-12);
}

.section {
	padding-block: var(--section-space);
}

.section--muted {
	background: var(--color-surface-muted);
}

.prose {
	max-width: var(--content-measure);
}

.entry-content > :where(h2, h3, h4, h5, h6):not(:first-child),
.prose > :where(h2, h3, h4, h5, h6):not(:first-child) {
	margin-block-start: var(--space-10);
}

.text-muted,
.entry-meta,
.site-info,
.wp-caption-text,
.gallery-caption {
	color: var(--color-text-muted);
}

/* Shared button component; the header CTA also avoids generic plugin overrides. */

.card {
	min-width: 0;
	padding: var(--card-padding);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
}

.card > :first-child {
	margin-block-start: 0;
}

.card > :last-child {
	margin-block-end: 0;
}

:is(.button, .header-cta) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--control-min-height);
	max-width: 100%;
	padding: var(--space-3) var(--space-6);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-control);
	text-align: center;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: anywhere;
	vertical-align: middle;
	cursor: pointer;
	transition: var(--transition-colors), var(--transition-shadow);
}

.button--primary {
	border-color: var(--color-link);
	background-color: var(--color-brand-magenta);
	background-image: var(--gradient-brand);
	/* Dark text retains at least 4.8:1 contrast across the brand gradient. */
	color: var(--color-text-on-brand);
	box-shadow: var(--shadow-sm);
}

.button--secondary {
	border-color: var(--color-border-strong);
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: var(--shadow-xs);
}

@media (hover: hover) {
	:is(.button, .header-cta):where(:not(:disabled, [aria-disabled="true"])):hover {
		box-shadow: var(--shadow-md);
	}

	.button--secondary:where(:not(:disabled, [aria-disabled="true"])):hover {
		border-color: var(--color-text-muted);
		background: var(--color-surface-hover);
	}
}

:is(.button, .header-cta):where(:not(:disabled, [aria-disabled="true"])):active {
	box-shadow: var(--shadow-xs);
}

/* Use native disabled on buttons. aria-disabled links also need activation handling. */
:is(.button, .header-cta):where(:disabled, [aria-disabled="true"]) {
	border-color: var(--color-border-strong);
	background: var(--color-disabled-background);
	color: var(--color-disabled-text);
	box-shadow: none;
	cursor: not-allowed;
}

/* Shared B2B price: net first, gross directly below at every viewport width.
 * Values come from WooCommerce; currency and tax labels belong in the markup. */

.erp-price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-1);
	min-width: 0;
	max-width: 100%;
	text-align: start;
	font-variant-numeric: tabular-nums;
}

.erp-price__net,
.erp-price__gross {
	display: block;
	max-width: 100%;
	margin: 0;
	overflow-wrap: anywhere;
	white-space: normal;
}

.erp-price__net {
	color: var(--color-text);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
}

.erp-price__gross {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-body);
}

/* Site header and navigation. One WordPress menu serves every screen size. */

body.admin-bar {
	--header-sticky-offset: var(--wp-admin--admin-bar--height, var(--admin-bar-height));
}

.site-header {
	position: sticky;
	z-index: var(--z-header);
	top: var(--header-sticky-offset);
	flex-shrink: 0;
	width: 100%;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
}

.site-header__inner {
	position: relative;
	z-index: var(--z-navigation);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3) var(--space-4);
	min-height: var(--header-min-height);
	padding-block: var(--space-3);
}

.site-branding {
	min-width: 0;
}

.site-branding :where(.custom-logo-link, .site-title) {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	min-height: var(--control-min-height);
	vertical-align: middle;
}

.site-branding .custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, var(--logo-width-mobile));
	max-height: var(--logo-max-height);
	object-fit: contain;
}

.site-title {
	color: var(--color-text);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-heading);
	text-decoration: none;
}

.header-navigation {
	grid-column: 1 / -1;
	order: 3;
	min-width: 0;
}

.mobile-navigation {
	padding-block: var(--space-4);
}

.header-actions {
	display: flex;
	justify-self: end;
	order: 2;
	align-items: center;
	gap: var(--space-2);
}

.icon {
	display: block;
	flex-shrink: 0;
	width: var(--icon-size);
	height: var(--icon-size);
}

.cart-link,
.mobile-menu-toggle,
.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: var(--control-min-height);
	min-height: var(--control-min-height);
	padding: var(--space-2);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--color-text);
	line-height: var(--line-height-control);
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition-colors);
}

.cart-link {
	position: relative;
	padding-inline-end: var(--space-4);
}

.cart-link__count {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--cart-badge-size);
	min-height: var(--cart-badge-size);
	padding-inline: var(--space-1);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface-brand);
	color: var(--color-link);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-control);
}

.mobile-menu-toggle {
	border-color: var(--color-border-strong);
}

.mobile-menu-toggle .close-icon,
.mobile-menu-toggle[aria-expanded="true"] .menu-icon {
	display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .close-icon {
	display: block;
}

.site-header [hidden] {
	display: none !important;
}

.primary-navigation .menu,
.primary-navigation .sub-menu,
.footer-navigation .menu,
.footer-navigation .sub-menu,
.footer-legal-navigation .menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-navigation li {
	position: relative;
	min-width: 0;
}

.primary-navigation .menu-item-has-children {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
}

.primary-navigation .sub-menu {
	grid-column: 1 / -1;
	padding-inline-start: var(--space-4);
}

:where(.primary-navigation) a {
	display: flex;
	align-items: center;
	min-height: var(--control-min-height);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-xs);
	color: var(--color-text);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
}

:where(.primary-navigation) a[aria-current="page"] {
	color: var(--color-link);
	font-weight: var(--font-weight-semibold);
	text-decoration: underline;
	text-underline-offset: var(--space-1);
}

.submenu-toggle .icon {
	width: var(--icon-size-small);
	height: var(--icon-size-small);
	transition: var(--transition-transform);
}

.submenu-toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.header-cta {
	width: 100%;
	margin-block-start: var(--space-4);
	font-size: var(--font-size-sm);
}

.mobile-navigation-backdrop {
	position: fixed;
	z-index: var(--z-backdrop);
	top: var(--header-panel-top);
	inset-inline: 0;
	bottom: 0;
	background: var(--color-backdrop);
}

body.has-mobile-menu {
	position: fixed;
	inset-inline: 0;
	top: var(--scroll-lock-top);
	width: 100%;
	padding-inline-end: var(--scrollbar-width);
	overflow: hidden;
}

.site-header.is-menu-open {
	position: fixed;
	inset-inline: 0;
	top: var(--header-open-top);
}

.site-header.is-menu-open .mobile-navigation {
	position: fixed;
	z-index: var(--z-navigation);
	inset-inline: 0;
	top: var(--header-panel-top);
	max-height: calc(100vh - var(--header-panel-top));
	max-height: calc(100dvh - var(--header-panel-top));
	padding: var(--space-4) var(--container-gutter) var(--space-8);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
}

@media (hover: hover) {
	.cart-link:hover,
	.mobile-menu-toggle:hover,
	.submenu-toggle:hover,
	:where(.primary-navigation) a:hover {
		background-color: var(--color-surface-hover);
		color: var(--color-link);
	}
}

/* Light footer. The short brand rule is its only gradient detail. */

.site-footer {
	flex-shrink: 0;
	width: 100%;
	padding-block: var(--space-12) var(--space-6);
	border-top: 1px solid var(--color-border);
	background: var(--color-surface-muted);
}

.footer-grid,
.footer-company-information {
	display: grid;
	gap: var(--space-8);
}

.footer-grid > *,
.footer-company-information > * {
	min-width: 0;
}

.footer-brand::before {
	display: block;
	width: var(--space-12);
	height: var(--brand-detail-size);
	margin-block-end: var(--space-6);
	border-radius: var(--radius-pill);
	background: var(--gradient-brand);
	content: "";
}

.footer-description {
	max-width: var(--footer-description-width);
	margin-block: var(--space-4) 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	white-space: pre-line;
}

.footer-heading {
	margin-block: 0 var(--space-3);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	letter-spacing: normal;
}

:where(.footer-navigation, .footer-legal-navigation) a {
	display: inline-flex;
	align-items: center;
	min-height: var(--control-min-height);
	padding-block: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	text-decoration: none;
}

:where(.footer-navigation, .footer-legal-navigation) a:where(:hover, [aria-current="page"]) {
	color: var(--color-link);
	text-decoration: underline;
}

.footer-navigation .sub-menu {
	padding-inline-start: var(--space-4);
}

.footer-company-information {
	margin-block-start: var(--space-8);
	padding-block-start: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.footer-company-text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	white-space: pre-line;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-6);
	margin-block-start: var(--space-10);
	padding-block-start: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.footer-bottom .site-info {
	margin: 0;
	font-size: var(--font-size-sm);
}

.footer-legal-navigation .menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
}

/* Native media queries cannot use var(); 64rem matches --breakpoint-navigation. */
@media (min-width: 64rem) {
	.site-header__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: var(--space-6);
	}

	.site-branding .custom-logo {
		max-width: min(100%, var(--logo-width));
	}

	.header-navigation {
		display: flex;
		grid-column: auto;
		order: 2;
		align-items: center;
		justify-content: flex-end;
		gap: var(--space-6);
		padding: 0;
	}

	.header-actions {
		grid-column: 3;
		order: 3;
	}

	.primary-navigation {
		min-width: 0;
	}

	.primary-navigation > .menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: var(--space-1);
	}

	.primary-navigation > .menu > li > .sub-menu {
		position: absolute;
		top: 100%;
		inset-inline-end: 0;
		width: var(--submenu-width);
		padding: var(--space-2);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-surface);
		box-shadow: var(--shadow-sm);
	}

	.header-cta {
		flex-shrink: 0;
		width: auto;
		margin: 0;
	}

	.footer-grid {
		grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	}

	.footer-brand {
		grid-column: auto;
	}
}

@media (min-width: 48rem) and (max-width: 63.999rem) {
	.footer-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.footer-brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 48rem) {
	.footer-company-information {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* WordPress moves the admin bar out of the viewport on small screens. */
@media (max-width: 782px) {
	body.admin-bar {
		--admin-bar-height: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar {
		--header-sticky-offset: 0px;
	}
}

/* WordPress content compatibility. */

.entry-content::after {
	display: table;
	clear: both;
	content: "";
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignleft,
.alignright {
	display: block;
	margin-block: var(--space-4);
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	font-size: var(--font-size-sm);
}

/* Keyboard access and user preferences. */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.screen-reader-text:focus {
	position: fixed;
	z-index: 100000;
	top: var(--space-4);
	left: var(--space-4);
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--space-3) var(--space-4);
	overflow: visible;
	clip-path: none;
	border-radius: var(--radius-xs);
	background: var(--color-surface);
	color: var(--color-text);
	white-space: normal;
}

@media (min-width: 48rem) {
	.alignleft {
		float: left;
		margin-inline-end: var(--space-6);
	}

	.alignright {
		float: right;
		margin-inline-start: var(--space-6);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0s;
		--duration-base: 0s;
	}
}

@media (forced-colors: active) {
	:focus-visible {
		outline-color: Highlight;
	}

	:is(.button, .header-cta),
	:is(.button, .header-cta):where(:not(:disabled, [aria-disabled="true"])):hover,
	:is(.button, .header-cta):where(:not(:disabled, [aria-disabled="true"])):active {
		border-color: ButtonText;
		background: ButtonFace;
		color: ButtonText;
		box-shadow: none;
	}

	:is(.button, .header-cta):where(:disabled, [aria-disabled="true"]) {
		border-color: GrayText;
		color: GrayText;
	}
}

@media (forced-colors: active) {
	.cart-link,
	.mobile-menu-toggle,
	.submenu-toggle,
	.cart-link__count {
		border-color: ButtonText;
		color: ButtonText;
	}

	.mobile-navigation-backdrop {
		background: Canvas;
	}
}

/* Match the navigation breakpoint. No-JavaScript navigation stays visible. */
.js .site-header:not(.is-navigation-ready) .primary-navigation .sub-menu {
	display: none;
}

@media (max-width: 63.999rem) {
	.js .site-header:not(.is-navigation-ready) .mobile-navigation {
		display: none;
	}
}

@media (min-width: 64rem) {
	html:not(.js) .primary-navigation > .menu > li > .sub-menu {
		display: none;
	}

	html:not(.js) .primary-navigation > .menu > li:where(:hover, :focus-within) > .sub-menu {
		display: block;
	}
}

/* Prevent a mobile-navigation flash using external CSS only. */
@media (scripting: enabled) {
	.site-header:not(.is-navigation-ready) .primary-navigation .sub-menu {
		display: none;
	}
}

@media (scripting: enabled) and (max-width: 63.999rem) {
	.site-header:not(.is-navigation-ready) .mobile-navigation {
		display: none;
	}
}

/* ERPWAPRO homepage. Section backgrounds span the viewport; content uses containers. */

.site-main.homepage {
	max-width: none;
	padding: 0;
}

.homepage .section-heading {
	margin-block-end: var(--space-10);
}

.homepage .section-heading h2 {
	max-width: var(--heading-measure);
	margin-block-end: 0;
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-block: 0 var(--space-4);
	color: var(--color-link);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-control);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
}

.eyebrow-mark {
	width: var(--space-2);
	height: var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--gradient-brand);
}

.home-hero {
	padding-block: var(--hero-space);
}

.hero-layout {
	display: grid;
	align-items: center;
	gap: var(--space-12);
}

.hero-copy,
.erp-visual,
.selection-copy {
	min-width: 0;
}

.hero-copy h1 {
	max-width: var(--hero-heading-measure);
	margin-block-end: var(--space-6);
	font-size: var(--font-size-display);
}

.hero-lead {
	max-width: var(--content-measure);
	margin-block-end: var(--space-8);
	color: var(--color-text-muted);
	font-size: var(--font-size-lg);
}

.home-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.home-actions .button {
	flex: 1 1 auto;
}

.homepage .button .icon,
.program-card__link .icon {
	width: var(--icon-size-small);
	height: var(--icon-size-small);
}

/* Decorative ERP process illustration, with no interactive controls or image requests. */

.erp-visual {
	position: relative;
	margin: 0;
	padding-block-start: var(--space-6);
}

.erp-visual::before {
	position: absolute;
	inset: 0 var(--space-4) var(--space-12) 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-muted);
	content: "";
}

.erp-window {
	position: relative;
	margin-inline-start: var(--space-3);
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--shadow-md);
}

.erp-window::before {
	display: block;
	height: var(--brand-detail-size);
	background: var(--gradient-brand);
	content: "";
}

.erp-window__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
}

.window-dots {
	display: flex;
	gap: var(--space-1);
}

.window-dots i,
.erp-window__indicator {
	width: var(--ui-dot-size);
	height: var(--ui-dot-size);
	border-radius: var(--radius-pill);
	background: var(--color-border-strong);
}

.erp-window__indicator {
	background: var(--color-brand-magenta);
}

.erp-window__body {
	padding: var(--space-4);
}

.erp-window__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-block-end: var(--space-6);
}

.ui-caption {
	display: block;
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-eyebrow);
}

.erp-window__heading p {
	margin: var(--space-1) 0 0;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
}

.ui-avatar,
.icon-tile,
.service-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--icon-tile-size);
	height: var(--icon-tile-size);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-brand);
	color: var(--color-link);
}

.ui-avatar {
	width: var(--space-10);
	height: var(--space-10);
	font-weight: var(--font-weight-semibold);
}

.erp-modules {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
}

.erp-module {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-muted);
}

.erp-module .icon {
	width: var(--icon-size-small);
	height: var(--icon-size-small);
	margin-block-end: var(--space-2);
	color: var(--color-link);
}

.erp-module > span {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

.erp-module small {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

.erp-flow {
	margin-block-start: var(--space-6);
	padding-block-end: var(--space-6);
}

.erp-flow__steps {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-2);
	margin-block-start: var(--space-3);
	font-size: var(--font-size-xs);
}

.erp-flow__steps .icon {
	width: var(--icon-size-small);
	height: var(--icon-size-small);
	color: var(--color-link);
	transform: rotate(90deg);
}

.erp-visual__note {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	width: fit-content;
	max-width: min(100%, var(--ui-note-width));
	margin: calc(-1 * var(--space-6)) var(--space-4) 0 auto;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
}

.erp-visual__note strong,
.erp-visual__note div > span {
	display: block;
	font-size: var(--font-size-sm);
}

.erp-visual__note div > span {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

.erp-visual figcaption {
	position: relative;
	margin-block-start: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	text-align: center;
}

/* Product discovery and company processes. */

.home-programs {
	border-top: 1px solid var(--color-border);
}

.program-grid,
.services-grid,
.audience-grid {
	display: grid;
	gap: var(--space-5);
}

.program-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--space-6);
	transition: var(--transition-colors), var(--transition-shadow);
}

.program-card .icon-tile {
	margin-block-end: var(--space-6);
}

.program-card__category {
	margin-block: 0 var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
}

.program-card h3 {
	margin-block-end: var(--space-4);
	font-size: var(--font-size-xl);
}

.program-card__description {
	flex-grow: 1;
	margin-block-end: var(--space-6);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.program-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: var(--control-min-height);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

.program-card__link::after {
	position: absolute;
	inset: 0;
	border-radius: var(--radius-md);
	content: "";
}

.program-card:focus-within {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

@media (hover: hover) {
	.program-card:hover {
		border-color: var(--color-border-strong);
		box-shadow: var(--shadow-md);
	}

	.program-card:hover .program-card__link {
		text-decoration: underline;
	}
}

.home-services,
.home-selection {
	background: var(--color-surface-muted);
}

.service-item {
	padding-block: var(--space-4);
}

.service-icon {
	margin-block-end: var(--space-5);
	background: var(--color-surface);
}

.service-item h3 {
	font-size: var(--font-size-xl);
}

.service-item p {
	max-width: var(--content-measure);
	margin: 0;
	color: var(--color-text-muted);
}

.audience-tile {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--space-2) var(--space-4);
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.audience-tile > .icon {
	grid-row: span 2;
	color: var(--color-link);
}

.audience-tile h3 {
	margin: 0;
	font-size: var(--font-size-base);
}

.audience-tile p {
	grid-column: 2;
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.home-process {
	padding-block-start: 0;
}

.process-list {
	display: grid;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.process-list li {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-width: 0;
}

.process-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--icon-tile-size);
	height: var(--icon-tile-size);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface-muted);
	color: var(--color-link);
	font-family: var(--font-family-mono);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

.process-list h3 {
	margin: 0;
	font-size: var(--font-size-lg);
}

.home-cta {
	padding-block: 0;
}

.home-cta__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-6);
	padding: var(--space-8) var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface-brand);
}

.home-cta__panel h2 {
	max-width: var(--heading-measure);
}

.home-cta__panel div > p:last-child {
	max-width: var(--content-measure);
	margin: 0;
	color: var(--color-text-muted);
}

.home-cta__panel > .button {
	flex-shrink: 0;
}

.faq-list details { border-top: 1px solid var(--color-border); }
.faq-list details:last-child { border-bottom: 1px solid var(--color-border); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: var(--control-min-height); padding: var(--space-6) var(--space-2); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-heading); list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::marker { content: ""; }
.faq-list .faq-chevron { flex: 0 0 var(--icon-size); color: var(--color-link); transition: var(--transition-transform); }
.faq-list details[open] .faq-chevron { transform: rotate(180deg); }
.faq-list details[open] summary { color: var(--color-link); }
.faq-list details > p { margin: 0; padding: 0 var(--space-2) var(--space-6); color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) {
 .faq-list .faq-chevron { transition: none; }
}

/* Selection-form preview: no submission, collection or analytics implementation. */

.home-selection:focus-visible {
	outline-offset: calc(-1 * var(--focus-ring-width));
}

.selection-layout {
	display: grid;
	align-items: start;
	gap: var(--space-10);
}

.selection-copy h2 {
	max-width: var(--heading-measure);
}

.selection-copy > p:not(.eyebrow) {
	max-width: var(--content-measure);
	color: var(--color-text-muted);
	font-size: var(--font-size-lg);
}

.selection-note {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	margin-block-start: var(--space-8);
}

.selection-note .icon-tile {
	background: var(--color-surface);
}

.selection-note p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.selection-form {
	width: 100%;
}

.form-preview-notice {
	margin-block-end: var(--space-6);
	padding: var(--space-3) var(--space-4);
	border-inline-start: var(--brand-detail-size) solid var(--color-link);
	border-radius: var(--radius-xs);
	background: var(--color-surface-brand);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.selection-form fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.form-fields-row {
	display: grid;
	gap: 0 var(--space-4);
}

.form-field {
	margin-block-end: var(--space-5);
}

.form-field label,
.form-needs legend {
	display: block;
	margin-block-end: var(--space-2);
	color: var(--color-text);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

.form-field input,
.form-field textarea {
	display: block;
	width: 100%;
	min-height: var(--control-min-height);
	padding: var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
}

.form-field textarea {
	resize: vertical;
}

.selection-form :where(input, textarea):disabled {
	opacity: 1;
	background: var(--color-surface-muted);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

.selection-form .form-needs {
	margin-block-end: var(--space-5);
}

.need-option {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--control-min-height);
	font-size: var(--font-size-sm);
}

.need-option input {
	flex-shrink: 0;
	width: var(--choice-size);
	height: var(--choice-size);
	margin: 0;
	accent-color: var(--color-link);
}

.selection-form > .button {
	width: 100%;
}

@media (min-width: 36rem) {
	.home-actions .button {
		flex: 0 1 auto;
	}

	.program-grid,
	.audience-grid,
	.form-fields-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.erp-visual::before {
		transform: rotate(var(--ui-background-angle));
	}

	.erp-window__body {
		padding: var(--space-6);
	}

	.erp-module {
		padding: var(--space-4);
	}

	.erp-flow__steps {
		flex-direction: row;
		align-items: center;
		gap: var(--space-1);
	}

	.erp-flow__steps .icon {
		transform: none;
	}
}

@media (min-width: 48rem) {
	.services-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-10);
	}

	.process-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.process-list li {
		flex-direction: column;
		align-items: flex-start;
		padding-block-start: var(--space-6);
		border-top: 1px solid var(--color-border);
	}

	.home-cta__panel {
		padding: var(--space-12);
	}
}

@media (min-width: 64rem) {
	.hero-layout {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--space-12);
	}

	.program-grid,
	.audience-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.home-cta__panel {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-12);
	}

	.selection-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: var(--space-16);
	}
}

/* WAPRO Mag landing: extends shared components without changing the homepage. */

.site-main.mag-landing {
	max-width: none;
	padding: 0;
}

.mag-landing .section-heading {
	margin-block-end: var(--space-10);
}

.mag-landing .section-heading h2 {
	max-width: var(--heading-measure);
	margin-block-end: 0;
}

.mag-landing .button .icon,
.mag-text-link .icon {
	width: var(--icon-size-small);
	height: var(--icon-size-small);
	flex-shrink: 0;
}

.mag-landing section[tabindex]:focus-visible {
	outline-offset: calc(-1 * var(--focus-ring-width));
}

.mag-hero {
	padding-block: var(--hero-space);
}

.mag-hero h1 {
	max-width: var(--heading-measure);
	font-size: var(--font-size-4xl);
}

.mag-hero .hero-copy,
.mag-price-layout > div {
	min-width: 0;
}

.mag-visual::before {
	inset-block-end: var(--space-8);
}

.mag-ui-process {
	display: grid;
	gap: var(--space-3);
}

.mag-ui-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-muted);
}

.mag-ui-row .icon-tile {
	background: var(--color-surface);
}

.mag-ui-row > div {
	flex: 1;
	min-width: 0;
}

.mag-ui-row strong,
.mag-ui-row div > span {
	display: block;
}

.mag-ui-row strong {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

.mag-ui-row div > span {
	margin-block-start: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

.mag-ui-row > .icon {
	flex-shrink: 0;
	width: var(--icon-size-small);
	height: var(--icon-size-small);
	color: var(--color-link);
}

.mag-ui-footer {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-block-start: var(--space-6);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

.mag-ui-footer .icon {
	flex-shrink: 0;
	color: var(--color-link);
}

.mag-intro {
	border-block: 1px solid var(--color-border);
	background: var(--color-surface-muted);
}

.mag-lead {
	max-width: var(--content-measure);
	margin-block-end: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-lg);
}

.mag-grid {
	display: grid;
	gap: var(--space-5);
}

.mag-content-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.mag-content-card .icon-tile {
	margin-block-end: var(--space-6);
}

.mag-content-card h3,
.mag-service h3 {
	font-size: var(--font-size-xl);
}

.mag-content-card p,
.mag-service p {
	margin-block-end: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.mag-content-card .mag-text-link {
	margin-block-start: auto;
	padding-block-start: var(--space-6);
}

.mag-text-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--control-min-height);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

.mag-text-link:hover {
	text-decoration: underline;
}

/* The view follows the configuration and quantity limits supplied by ERPWAPRO Core. */

.mag-configurator {
	display: grid;
	align-items: start;
	gap: var(--space-6);
}

.mag-configurator__options {
	display: grid;
	gap: var(--space-8);
}

.mag-choice-group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mag-choice-group legend {
	max-width: 100%;
	margin-block-end: var(--space-4);
	padding: 0;
	font-weight: var(--font-weight-semibold);
}

.mag-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-8);
	height: var(--space-8);
	margin-inline-end: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface-muted);
	color: var(--color-link);
	font-family: var(--font-family-mono);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	vertical-align: middle;
}

.mag-choices {
	display: grid;
	gap: var(--space-3);
}

.mag-choice {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--control-min-height);
	padding: var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	transition: var(--transition-colors);
}

.mag-choice:has(:checked) {
	border-color: var(--color-link);
	background: var(--color-surface-brand);
}

.mag-choice:has(:focus-visible) {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

.mag-choice input {
	flex-shrink: 0;
	width: var(--choice-size);
	height: var(--choice-size);
	margin: 0;
	accent-color: var(--color-link);
}

.mag-seat-control label {
	display: block;
	margin-block-end: var(--space-4);
	font-weight: var(--font-weight-semibold);
}

.mag-seat-control :is(input, select) {
	width: 100%;
	min-height: var(--control-min-height);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	opacity: 1;
}

.mag-seat-control :is(input, select):disabled {
	background: var(--color-surface-muted);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

.mag-control-note {
	display: block;
	margin-block: var(--space-3) 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
}

.mag-summary {
	position: relative;
	overflow: hidden;
}

.mag-summary::before {
	position: absolute;
	inset: 0 0 auto;
	height: var(--brand-detail-size);
	background: var(--gradient-brand);
	content: "";
}

.mag-summary h3 {
	margin-block-end: var(--space-6);
	font-size: var(--font-size-xl);
}

.mag-summary__details {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	font-size: var(--font-size-sm);
}

.mag-summary__details > div {
	display: grid;
	gap: var(--space-1);
}

.mag-summary dt {
	color: var(--color-text-muted);
}

.mag-summary dd {
	margin: 0;
	font-weight: var(--font-weight-semibold);
}

.mag-summary__price {
	margin-block: var(--space-6);
	padding-block-start: var(--space-5);
	border-block-start: 1px solid var(--color-border);
}

.mag-summary__price > span:first-child {
	font-size: var(--font-size-sm);
}

.mag-summary__price .erp-price {
	margin-block: var(--space-2);
}

.mag-summary__price .erp-price__net {
	font-size: var(--font-size-3xl);
}

.mag-summary > .button {
	width: 100%;
}

.mag-summary > .mag-text-link {
	margin-block-start: var(--space-4);
}

.mag-price-layout {
	display: grid;
	align-items: center;
	gap: var(--space-8);
}

.mag-license-period {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-block: var(--space-6) 0;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

.mag-license-period .icon {
	flex-shrink: 0;
	color: var(--color-link);
}

.mag-price-card dl {
	margin: 0;
}

.mag-price-card dl > div {
	display: grid;
	gap: var(--space-2);
	padding-block: var(--space-4);
}

.mag-price-card dl > div + div {
	border-block-start: 1px solid var(--color-border);
}

.mag-price-card dt {
	font-size: var(--font-size-sm);
}

.mag-price-card dd {
	margin: 0;
}

/* Preserve native table semantics and contain horizontal scrolling on narrow screens. */
.mag-comparison {
	padding-block-start: 0;
}

.mag-comparison-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-block-end: var(--space-6);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface-muted);
}

.mag-comparison-help p {
	margin: 0;
	font-weight: var(--font-weight-semibold);
}

.mag-comparison-scroll {
	max-width: 100%;
	margin-block: var(--space-4);
	overflow-x: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.mag-comparison-table {
	width: 100%;
	min-width: var(--container-narrow);
	table-layout: fixed;
	border-spacing: 0;
	background: var(--color-surface);
	font-size: var(--font-size-sm);
}

.mag-comparison-table th,
.mag-comparison-table td {
	padding: var(--space-5) var(--space-4);
	text-align: center;
	vertical-align: middle;
}

.mag-comparison-table tr > :first-child {
	width: 24%;
	text-align: start;
}

.mag-comparison-table thead th {
	background: var(--color-surface-muted);
	font-weight: var(--font-weight-bold);
}

.mag-comparison-table tbody th {
	font-weight: var(--font-weight-medium);
}

.mag-comparison-table tbody tr > * {
	border-block-start: 1px solid var(--color-border);
}

.mag-comparison-table tbody tr:hover {
	background: var(--color-surface-muted);
}

.mag-service {
	padding-block: var(--space-4);
}

.mag-support-statement {
	max-width: var(--container-narrow);
	margin-block: var(--space-10) 0;
	padding-inline-start: var(--space-6);
	border-inline-start: var(--brand-detail-size) solid var(--color-link);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
}

.mag-faq details {
	border-block-start: 1px solid var(--color-border);
}

.mag-faq details:last-child {
	border-block-end: 1px solid var(--color-border);
}

.mag-faq summary {
	min-height: var(--control-min-height);
	padding: var(--space-6) var(--space-2);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-heading);
	cursor: pointer;
}

.mag-faq summary::marker {
	color: var(--color-link);
}

.mag-faq details[open] summary {
	color: var(--color-link);
}

.mag-faq details > p {
	margin: 0;
	padding: 0 var(--space-2) var(--space-6);
	color: var(--color-text-muted);
}

@media (min-width: 36rem) {
	.mag-grid--four,
	.mag-choices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mag-summary__details > div {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-4);
	}

	.mag-summary dd {
		text-align: end;
	}
}

@media (min-width: 48rem) {
	.mag-grid--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.mag-grid--four {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.mag-configurator {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	}

	.mag-summary.mag-summary--fits {
		position: sticky;
		top: calc(var(--header-panel-top) + var(--space-6));
	}

	.mag-price-layout {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: var(--space-16);
	}
}

/* Only complete, verified price pairs may enter the presentation layer. */
.mag-configurator [hidden] {
	display: none;
}

.mag-choice__caption {
	display: block;
	margin-block-start: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
}

.mag-summary__lines {
	margin: var(--space-4) 0;
	padding-inline-start: var(--space-5);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.mag-price-status {
	margin: 0;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-control);
	color: var(--color-text);
}

.mag-configurator [aria-invalid="true"] {
	border-color: var(--color-focus);
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

/* Mag-only refinements. Container geometry and shared header/homepage stay unchanged. */
.mag-configurator > *,
.mag-choices > * {
	min-width: 0;
}

.mag-landing .mag-choice {
	border-color: var(--color-border);
}

.mag-landing .mag-choice:has(:checked) {
	border-color: var(--color-link);
	font-weight: var(--font-weight-semibold);
}

.mag-choices--variants,
.mag-choices--purchase {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mag-choices .mag-choice {
	gap: var(--space-2);
	padding: var(--space-3);
}

.mag-choices--variants .mag-choice:has(.mag-choice__caption) {
	grid-column: 1 / -1;
}

.mag-seat-stepper {
	display: grid;
	grid-template-columns: var(--control-min-height) minmax(var(--space-16), 1fr) var(--control-min-height);
	gap: var(--space-2);
	max-width: var(--ui-note-width);
}

.mag-seat-stepper button {
	min-height: var(--control-min-height);
	padding: 0;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	font: inherit;
	font-size: var(--font-size-xl);
	cursor: pointer;
	transition: var(--transition-colors);
}

.mag-seat-stepper button:enabled:hover {
	border-color: var(--color-link);
	background: var(--color-surface-brand);
}

.mag-seat-stepper button:disabled {
	border-color: var(--color-border);
	background: var(--color-disabled-background);
	color: var(--color-disabled-text);
	cursor: not-allowed;
}

.mag-seat-stepper input {
	min-width: 0;
	text-align: center;
	font-weight: var(--font-weight-semibold);
	font-variant-numeric: tabular-nums;
}

.mag-single-license {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	font-weight: var(--font-weight-medium);
}

.mag-single-license .icon {
	color: var(--color-link);
	flex-shrink: 0;
}

.mag-summary__unit {
	margin-block-start: var(--space-6);
	padding-block-start: var(--space-5);
	border-block-start: 1px solid var(--color-border);
}

.mag-summary__unit > p {
	margin-block: 0 var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.mag-summary__unit .erp-price__net,
.mag-summary__lines .erp-price__net {
	font-size: var(--font-size-lg);
}

.mag-summary__lines {
	display: grid;
	gap: var(--space-5);
	margin-block: var(--space-6) 0;
	padding: var(--space-5) 0 0;
	border-block-start: 1px solid var(--color-border);
	list-style: none;
}

.mag-summary__lines li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: var(--space-2);
}

.mag-summary__lines li > strong {
	grid-column: 1 / -1;
	color: var(--color-text);
	font-weight: var(--font-weight-medium);
}

.mag-summary__lines li:not(:has(.erp-price)) .mag-line-quantity {
	grid-column: 1 / -1;
}

.mag-summary__price > .mag-price-status {
	margin-block-start: var(--space-3);
}

.mag-summary .erp-price__net,
.mag-summary .erp-price__gross {
	overflow-wrap: anywhere;
}

.mag-summary__contact {
	margin-block-start: var(--space-6);
}

.mag-order-status {
	margin-block: var(--space-6) 0;
	padding: var(--space-4);
	border-radius: var(--radius-sm);
	background: var(--color-surface-muted);
	font-weight: var(--font-weight-semibold);
}

.mag-service-steps {
	margin: var(--space-8) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: mag-service;
}

.mag-service-steps > li {
	counter-increment: mag-service;
}

.mag-service-steps > li::before {
	display: block;
	margin-block-end: var(--space-3);
	color: var(--color-link);
	font-family: var(--font-family-mono);
	font-size: var(--font-size-sm);
	content: counter(mag-service, decimal-leading-zero);
}

.mag-service-steps .service-icon {
	display: none;
}

.mag-benefits .icon-tile {
	margin-block-end: var(--space-4);
}

@media (min-width: 36rem) {
	.mag-benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.mag-choices--variants {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mag-choices .mag-choice {
		gap: var(--space-3);
		padding: var(--space-4);
	}

	.mag-choices--variants .mag-choice:has(.mag-choice__caption) {
		grid-column: auto;
	}

	.mag-benefits {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.mag-benefits > :last-child {
		grid-column: span 2;
	}
}

/* Editorial links to the program and service landings. */
.mag-related-links {
	margin-block-end: var(--space-8);
}