/* ==========================================================================
	 Virtualizor - Enterprise marketing design system
	 Inspired by enterprise SaaS patterns (SolusVM / Veeam class):
	 restrained navy palette, solid CTAs, trust bands, generous whitespace
	 ========================================================================== */
:root{
	/* Brand - deep enterprise navy + restrained teal */
	--brand: #1a3a8f;
	--brand-dark: #12296b;
	--brand-light: #3d5fce;
	--brand-soft: #e8eefc;
	--accent: #0d9b8c;
	--accent-dark: #0a7a6e;
	--navy: #0b1b3a;
	--navy-mid: #132848;
	/* Light theme */
	--bg: #ffffff;
	--bg-soft: #f4f6fa;
	--bg-elevated: #ffffff;
	--bg-inset: #eef1f7;
	--text: #0c1628;
	--text-soft: #4a5568;
	--text-faint: #7a8599;
	--border: #e2e8f0;
	--border-strong: #c9d2e0;
	--shadow: 0 1px 2px rgba(11, 27, 58, 0.04), 0 4px 16px rgba(11, 27, 58, 0.05);
	--shadow-md: 0 4px 12px rgba(11, 27, 58, 0.06), 0 1px 3px rgba(11, 27, 58, 0.04);
	--shadow-lg: 0 16px 48px rgba(11, 27, 58, 0.10), 0 4px 12px rgba(11, 27, 58, 0.05);
	--header-bg: rgba(255, 255, 255, 0.92);
	--code-bg: #f0f3f9;
	/* Scale - tighter enterprise radii */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-pill: 6px;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3.5rem;
	--space-8: 6rem;
	--container: 1180px;
	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--transition: 160ms ease;
}
[data-theme="dark"]{
	--bg: #070d18;
	--bg-soft: #0c1524;
	--bg-elevated: #111b2e;
	--bg-inset: #0a1322;
	--text: #eef2f8;
	--text-soft: #a8b3c7;
	--text-faint: #6b7890;
	--border: #1e2a40;
	--border-strong: #2c3b56;
	--shadow: 0 1px 2px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.3);
	--shadow-md: 0 4px 12px rgba(0,0,0,0.35);
	--shadow-lg: 0 20px 48px rgba(0,0,0,0.5);
	--header-bg: rgba(7, 13, 24, 0.88);
	--code-bg: #0c1524;
	/* Brighter brand for dark UI - links, CTAs, accents stay readable */
	--brand: #6b8ef7;
	--brand-dark: #8ba4ff; /* lighter hover on dark surfaces */
	--brand-light: #a8bfff;
	--brand-soft: rgba(107, 142, 247, 0.18);
	--navy: #050a14;
	--navy-mid: #0c1524;
}
/* ==========================================================================
	 Reset & base
	 ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Do NOT set overflow-x here too: html+body both hidden forces overflow-y:auto
	   on both, which breaks position:sticky for .site-chrome (it stops pinning to
	   the viewport once scrolled). body's overflow-x below is enough to clip
	   horizontal overflow from wide children. */
}
body{
	margin: 0;
	font-family: var(--font);
	background: var(--bg);
	color: var(--text);
	line-height: 1.65;
	overflow-x: hidden;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background var(--transition), color var(--transition);
}
img, svg{ display: block; max-width: 100%; }
a{ color: var(--brand); text-decoration: none; transition: color var(--transition); }
a:hover{ color: var(--brand-dark); }
[data-theme="dark"] a:hover{ color: var(--brand-light); }
h1, h2, h3, h4{
	margin: 0 0 var(--space-3);
	line-height: 1.18;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--text);
}
p{ margin: 0 0 var(--space-4); color: var(--text-soft); }
ul{ margin: 0; padding: 0; }
li{ list-style: none; }
button{ font-family: inherit; }
.icon{
	width: 1.25em;
	height: 1.25em;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -0.2em;
}
/* ==========================================================================
	 Layout
	 ========================================================================== */
.container{
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 3vw, 2rem);
}
.section{ padding: var(--space-8) 0; }
.section-sm{ padding: calc(var(--space-6) + 0.25rem) 0; }
.section-alt{ background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-header{
	max-width: 680px;
	margin: 0 auto var(--space-7);
	text-align: center;
}
.section-header.left{ margin: 0 0 var(--space-7); text-align: left; }
.section-header h2{
	font-size: clamp(1.85rem, 3.5vw, 2.5rem);
	font-weight: 700;
}
.section-header p{
	font-size: 1.0625rem;
	margin-top: var(--space-3);
	line-height: 1.7;
}
.eyebrow{
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: var(--space-4);
	background: none;
	padding: 0;
	border-radius: 0;
}
.eyebrow .icon{ width: 14px; height: 14px; }
/* Grids */
.grid{ display: grid; gap: var(--space-5); }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
.grid-4{ grid-template-columns: repeat(2, 1fr); }
.grid-6{ grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px){
	.grid-4{ grid-template-columns: repeat(3, 1fr); }
	.grid-6{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px){
	.grid-2{ grid-template-columns: repeat(2, 1fr); }
	.grid-3{ grid-template-columns: repeat(3, 1fr); }
	.grid-4{ grid-template-columns: repeat(4, 1fr); }
	.grid-6{ grid-template-columns: repeat(6, 1fr); }
}
.grid-2.align-center{ align-items: center; }
@media (max-width: 899px){
	.grid-2 > *:nth-child(2){ order: -1; }
	.grid-2.keep-order > *:nth-child(2){ order: 0; }
}
/* ==========================================================================
	 Top bar + Header
	 - Chrome sticks to top always
	 - At land: topbar visible, main nav transparent over hero
	 - On scroll: topbar hides, nav gets solid/frosted theme color
	 ========================================================================== */
#main{
	margin-top: -113px;
}
#main > section:first-child:not(.hero-split):not(.page-header){
	padding-top: calc(3rem + 113px);
}
.site-chrome{
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
}
.topbar{
	background: var(--navy);
	color: rgba(255,255,255,0.78);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	overflow: hidden;
	max-height: 40px;
	transition:
		max-height 220ms ease,
		opacity 180ms ease,
		padding 220ms ease;
}
.topbar .container{
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 36px;
	gap: var(--space-4);
}
.topbar a{ color: rgba(255,255,255,0.88); font-weight: 600; }
.topbar a:hover{ color: #fff; }
.topbar-links{ display: flex; gap: var(--space-5); align-items: center; }
.topbar-meta{ display: none; }
@media (min-width: 720px){
	.topbar-meta{ display: block; color: rgba(255,255,255,0.55); }
}
/* Hide notification/top bar once page is scrolled */
body.is-scrolled .topbar{
	max-height: 0;
	min-height: 0;
	opacity: 0;
	pointer-events: none;
	border: none;
}
.site-header{
	position: relative; /* mobile drawer anchors here */
	/* Always under sticky chrome; transparent until scrolled */
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom: 1px solid transparent;
	box-shadow: none;
	transition:
		background 220ms ease,
		border-color 220ms ease,
		box-shadow 220ms ease,
		backdrop-filter 220ms ease;
}
/* Solid / theme header color after scroll */
body.is-scrolled .site-header{
	background: var(--header-bg);
	backdrop-filter: blur(16px) saturate(1.2);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	border-bottom-color: var(--border);
	box-shadow: 0 1px 0 rgba(11,27,58,0.03), 0 8px 24px rgba(11,27,58,0.06);
}
[data-theme="dark"] body.is-scrolled .site-header{
	box-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 12px 28px rgba(0,0,0,0.35);
}
.nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	height: 72px;
}
.brand{
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--text);
	letter-spacing: -0.03em;
	white-space: nowrap;
}
.brand:hover{ color: var(--text); }
/* Official Virtualizor logo (SVG) - light/dark from product theme colors */
.brand-logo{
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.brand-logo-img{
	height: 40px;
	width: auto;
	max-width: 176px;
	display: block;
}
.brand-logo-img-dark{ display: none; }
.brand-logo-img-light{ display: block; }
[data-theme="dark"] .brand-logo-img-light{ display: none; }
[data-theme="dark"] .brand-logo-img-dark{ display: block; }
/* Footer / always-dark surfaces: force light-on-dark wordmark */
.brand-logo--on-dark .brand-logo-img-light{ display: none !important; }
.brand-logo--on-dark .brand-logo-img-dark{ display: block !important; }
/* Legacy letter mark (fallback only) */
.brand-mark{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--brand);
	color: #fff;
	font-weight: 800;
	font-size: 0.95rem;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 35%, transparent);
}
.nav-links{
	display: flex;
	align-items: center;
	gap: 0.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-links > li > a,
.nav-dropdown-trigger{
	color: var(--text-soft);
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.5rem 0.85rem;
	border-radius: var(--radius-sm);
	transition: color var(--transition), background var(--transition);
}
.nav-links > li > a:hover,
.nav-links > li > a.active,
.nav-links > li > a.is-active,
.nav-item-has-dropdown:hover > .nav-dropdown-trigger,
.nav-item-has-dropdown > .nav-dropdown-trigger.active,
.nav-item-has-dropdown > .nav-dropdown-trigger.is-active{
	color: var(--text);
	background: var(--bg-inset);
}
.nav-actions{
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
/* Right cluster: Free trial + theme + hamburger */
.nav-actions-end{
	flex-shrink: 0;
	margin-left: auto;
}
.nav-actions-mobile-only{ display: none; }
/* Compact trial CTA next to theme (not a second fat button pair with Download) */
.btn-nav-trial{
	padding: 0.5rem 0.95rem;
	font-size: 0.85rem;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}
.nav-menu{
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex: 1;
	min-width: 0;
	justify-content: flex-end;
	margin-right: var(--space-3);
}
/* Theme toggle */
.theme-toggle{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	color: var(--text-soft);
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.theme-toggle:hover{ border-color: var(--border-strong); color: var(--text); }
.theme-toggle .icon-sun,
.theme-toggle .icon-moon,
.theme-toggle .icon-monitor{ display: none; width: 18px; height: 18px; }
.theme-toggle[data-mode="light"] .icon-sun{ display: block; }
.theme-toggle[data-mode="dark"] .icon-moon{ display: block; }
.theme-toggle[data-mode="system"] .icon-monitor{ display: block; }
.nav-toggle{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	color: var(--text);
	cursor: pointer;
}
@media (min-width: 980px){
	.nav-toggle{ display: none; }
	.nav-actions-mobile-only{ display: none !important; }
	.nav-links > li > a,
	.nav-dropdown-trigger{
		padding: 0.5rem 0.65rem;
		font-size: 0.875rem;
	}
}
@media (max-width: 979px){
	.btn-nav-trial{ display: none; }
	.nav-actions-mobile-only{
		display: flex;
		padding: var(--space-4);
		border-top: 1px solid var(--border);
	}
	.nav-actions-mobile-only .btn{ width: 100%; }
	.nav-menu{
		position: absolute;
		top: 72px;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-right: 0;
		flex: none;
		justify-content: flex-start;
		background: var(--bg-elevated);
		border-bottom: 1px solid var(--border);
		box-shadow: var(--shadow-lg);
		max-height: 0;
		overflow: hidden;
		transition: max-height 220ms ease;
	}
	.nav-menu.open{ max-height: 80vh; overflow-y: auto; }
	.nav-links{
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-2) var(--space-4);
	}
	.nav-links > li > a,
	.nav-dropdown-trigger{
		display: flex;
		padding: 0.85rem 0.5rem;
		border-radius: 0;
		border-bottom: 1px solid var(--border);
	}
	.nav-menu > .nav-actions{
		padding: var(--space-4);
		border-top: 1px solid var(--border);
		flex-wrap: wrap;
	}
}

/* ==========================================================================
	 Blog hub - padded featured images + polished recent cards
	 ========================================================================== */
.blog-section .section-header{ margin-bottom: var(--space-6); }
.blog-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	align-items: stretch;
}
@media (min-width: 720px){
	.blog-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px){
	.blog-grid{ grid-template-columns: repeat(3, 1fr); }
}
.blog-card{
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	padding: 0;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.blog-card:hover{
	border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
/* Image zone with padding so art is not flush to the card edge */
.blog-card-media{
	display: block;
	position: relative;
	width: 100%;
	padding: 0.85rem 0.85rem 0;
	background: transparent;
	text-decoration: none;
}
.blog-card-media-inner{
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: calc(var(--radius-md) - 2px);
	border: 1px solid var(--border);
	background:
		linear-gradient(160deg, var(--bg-inset) 0%, color-mix(in srgb, var(--brand) 5%, var(--bg-soft)) 100%);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 4%, transparent);
}
.blog-card-media img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	padding: 0.65rem;
	box-sizing: border-box;
	transition: transform 320ms ease;
}
.blog-card:hover .blog-card-media img{
	transform: scale(1.03);
}
.blog-card-body{
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.1rem 1.25rem 1.3rem;
	min-height: 0;
}
/* Featured: image + copy side-by-side on desktop */
.blog-card-featured{
	background: linear-gradient(145deg, var(--bg-elevated) 0%, color-mix(in srgb, var(--brand) 6%, var(--bg-elevated)) 100%);
	border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
}
.blog-card-featured .blog-card-media{
	padding: 1.15rem 1.15rem 0;
}
.blog-card-featured .blog-card-media-inner{
	aspect-ratio: 16 / 10;
}
.blog-card-featured .blog-card-media img{
	padding: 0.85rem 1rem;
}
@media (min-width: 900px){
	.blog-card-featured.has-image{
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: stretch;
	}
	.blog-card-featured .blog-card-media{
		padding: 1.25rem 0 1.25rem 1.25rem;
		height: 100%;
		display: flex;
	}
	.blog-card-featured .blog-card-media-inner{
		flex: 1;
		aspect-ratio: auto;
		min-height: 260px;
	}
	.blog-card-featured .blog-card-body{
		padding: 1.75rem 1.85rem 1.75rem 1.5rem;
		justify-content: center;
	}
}
.blog-card-featured .blog-card-body{
	padding: 1.35rem 1.5rem 1.55rem;
}
.blog-card-meta{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 1rem;
	margin-bottom: 0.7rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-faint);
}
.blog-cat{
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--brand) 12%, transparent);
	color: var(--brand);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.blog-card-title{
	margin: 0 0 0.6rem;
	font-size: 1.08rem;
	line-height: 1.35;
	letter-spacing: -0.02em;
}
.blog-card-featured .blog-card-title{ font-size: 1.4rem; }
.blog-card-title a{ color: var(--text); }
.blog-card-title a:hover{ color: var(--brand); }
.blog-card-summary{
	margin: 0 0 0.9rem;
	color: var(--text-soft);
	font-size: 0.92rem;
	line-height: 1.55;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.blog-card-featured .blog-card-summary{
	-webkit-line-clamp: 6;
	font-size: 0.98rem;
}
.blog-tags{
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.95rem;
}
.blog-tag{
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.18rem 0.5rem;
	border-radius: var(--radius-sm);
	background: var(--bg-inset);
	color: var(--text-soft);
	border: 1px solid var(--border);
}
.blog-card-foot{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--border);
	font-size: 0.85rem;
}
.blog-author{ color: var(--text-faint); font-weight: 500; }
.blog-read{
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--brand);
	white-space: nowrap;
	padding: 0.35rem 0.7rem;
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--brand) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.blog-read:hover{
	background: color-mix(in srgb, var(--brand) 16%, transparent);
	border-color: color-mix(in srgb, var(--brand) 40%, transparent);
	color: var(--brand);
	text-decoration: none;
}
.blog-card-featured .blog-read{
	padding: 0.45rem 0.9rem;
	font-size: 0.9rem;
}
.blog-archive-cta{
	margin-top: var(--space-8);
	text-align: center;
	padding: 1.75rem;
	border-radius: var(--radius-md);
	border: 1px dashed var(--border-strong);
	background: var(--bg-soft);
}
.blog-archive-cta p{
	margin: 0 0 1rem;
	color: var(--text-soft);
}
/* Nav dropdown */
.nav-item-has-dropdown{ position: relative; }
.nav-dropdown-trigger{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	background: none;
	border: none;
	font: inherit;
}
.nav-chevron{ transition: transform 160ms ease; opacity: 0.7; }
.nav-item-has-dropdown.open .nav-chevron,
.nav-item-has-dropdown:hover .nav-chevron{ transform: rotate(180deg); }
.nav-dropdown{
	display: none;
	position: absolute;
	/* Flush under trigger - no empty gap (that gap caused the menu to close mid-move) */
	top: 100%;
	left: 0;
	min-width: 260px;
	padding: 0.5rem;
	margin-top: 0;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	z-index: 200;
}
/* Invisible hover bridge above the panel so the pointer never "falls through" */
.nav-dropdown::before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}
.nav-dropdown a{
	display: block;
	padding: 0.7rem 0.85rem;
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-soft);
}
.nav-dropdown a:hover{
	background: var(--bg-soft);
	color: var(--brand);
}
.nav-dropdown a strong{ color: var(--text); }
@media (min-width: 980px){
	/* Full header height hit-area for Features item */
	.nav-item-has-dropdown{
		display: flex;
		align-items: center;
		align-self: stretch;
		height: 72px;
	}
	.nav-item-has-dropdown:hover .nav-dropdown,
	.nav-item-has-dropdown:focus-within .nav-dropdown{
		display: block;
	}
}
@media (max-width: 979px){
	.nav-dropdown{
		position: static;
		box-shadow: none;
		border: none;
		padding: 0 0 0.5rem 1rem;
		min-width: 0;
		display: none;
	}
	.nav-dropdown::before{ display: none; }
	.nav-item-has-dropdown.open .nav-dropdown{ display: block; }
}
/* ==========================================================================
	 Buttons - solid enterprise style
	 ========================================================================== */
.btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.7rem 1.35rem;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 0.9rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
	white-space: nowrap;
	letter-spacing: -0.01em;
}
.btn-primary{
	background: var(--brand);
	color: #fff;
	box-shadow: 0 1px 2px rgba(11,27,58,0.12), 0 4px 12px color-mix(in srgb, var(--brand) 28%, transparent);
}
.btn-primary:hover{
	background: var(--brand-dark);
	color: #fff;
	box-shadow: 0 2px 4px rgba(11,27,58,0.14), 0 8px 20px color-mix(in srgb, var(--brand) 30%, transparent);
}
.btn-outline{
	background: var(--bg-elevated);
	border-color: var(--border-strong);
	color: var(--text);
	box-shadow: 0 1px 2px rgba(11,27,58,0.04);
}
.btn-outline:hover{
	border-color: var(--brand);
	color: var(--brand);
	background: var(--brand-soft);
}
.btn-ghost{
	background: transparent;
	border-color: transparent;
	color: var(--text-soft);
	box-shadow: none;
}
.btn-ghost:hover{ color: var(--text); background: var(--bg-inset); }
.btn-lg{ padding: 0.9rem 1.75rem; font-size: 0.975rem; }
.btn-row{
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}

/* Dark mode buttons - readable on dark surfaces; brand tokens stay bright for text/links */
[data-theme="dark"] .btn-primary{
	background: linear-gradient(180deg, #6b8ef7 0%, #4f74ef 100%);
	color: #fff;
	border-color: transparent;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.35),
		0 6px 18px rgba(79, 116, 239, 0.38);
}
[data-theme="dark"] .btn-primary:hover{
	background: linear-gradient(180deg, #8ba4ff 0%, #6b8ef7 100%);
	color: #fff;
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.4),
		0 10px 24px rgba(107, 142, 247, 0.45);
}
[data-theme="dark"] .btn-outline{
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--border-strong);
	color: var(--text);
	box-shadow: none;
}
[data-theme="dark"] .btn-outline:hover{
	border-color: color-mix(in srgb, var(--brand) 55%, var(--border-strong));
	color: var(--brand-light);
	background: var(--brand-soft);
}
[data-theme="dark"] .btn-ghost:hover{
	background: rgba(255, 255, 255, 0.06);
	color: var(--text);
}
[data-theme="dark"] .hero-panel-tab.is-active{
	background: linear-gradient(180deg, #6b8ef7 0%, #4f74ef 100%);
	border-color: #5a7ff0;
	color: #fff;
}
/* ==========================================================================
	 Hero
	 ========================================================================== */
/*
	Hero layout mirrors /home/virtualizor/website Hero.jsx:
	- section: overflow-hidden (no panel cutting neighbors)
	- inner: max-w-7xl (80rem), gap-14, lg:grid-cols-2
	- screenshot: w-full natural height (no forced crop / bleed)
*/
.hero-split{
	position: relative;
	padding: calc(clamp(3rem, 6vw, 5rem) + 113px) 0 clamp(3rem, 6vw, 4.5rem);
	overflow: hidden;
	background:
		radial-gradient(ellipse 80% 60% at 10% -10%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 55%),
		radial-gradient(ellipse 50% 40% at 95% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%),
		linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 70%);
}
.hero-split::before{
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--border) 1px, transparent 1px),
		linear-gradient(90deg, var(--border) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: linear-gradient(180deg, rgba(0,0,0,0.28), transparent 80%);
	-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.28), transparent 80%);
	pointer-events: none;
	opacity: 0.5;
}
.hero-glow{ display: none; }
/* Match Tailwind max-w-7xl + px-6/lg:px-8 */
.hero-split .container{
	max-width: 80rem; /* 1280px - same as Next max-w-7xl */
	padding-left: clamp(1.25rem, 3vw, 2rem);
	padding-right: clamp(1.25rem, 3vw, 2rem);
}
.hero-grid{
	display: grid;
	gap: 3.5rem; /* gap-14 */
	align-items: center;
	position: relative;
	z-index: 1;
	width: 100%;
}
@media (min-width: 1024px){
	/* lg:grid-cols-2 - equal columns, both minmax(0,1fr) so images never overflow */
	.hero-grid{
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 3.5rem;
	}
}
.hero-text h1{
	font-size: clamp(1.85rem, 5vw, 2.85rem);
	margin-bottom: var(--space-4);
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.03em;
}
.hero-text .lead{
	font-size: clamp(1.02rem, 1.6vw, 1.15rem);
	max-width: 520px;
	margin-bottom: var(--space-6);
	line-height: 1.7;
	color: var(--text-soft);
}
.gradient-text{
	color: var(--brand);
	background: none;
	-webkit-text-fill-color: unset;
}
[data-theme="dark"] .gradient-text{
	color: var(--brand-light);
}
.hero-trust{
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border);
}
.hero-trust-item{
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.82rem;
	color: var(--text-soft);
	font-weight: 600;
}
.hero-trust-item .icon{ color: var(--accent); width: 1em; height: 1em; }
/* ==========================================================================
	 Client logo marquee - dual direction, grayscale → color on hover
	 ========================================================================== */
.clients-section{
	padding: var(--space-7) 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	overflow: hidden;
}
.clients-eyebrow{
	text-align: center;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand);
	margin: 0 0 0.5rem;
}
.clients-sub{
	text-align: center;
	font-size: 0.95rem;
	color: var(--text-soft);
	margin: 0 auto 1.75rem;
	max-width: 36rem;
}
.clients-cta{
	text-align: center;
	margin-top: 2rem;
}
.clients-marquee{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
	/* Soft edge fade so logos don't hard-cut at the viewport */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.clients-row{
	overflow: hidden;
	width: 100%;
}
.clients-track{
	display: flex;
	width: max-content;
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
}
.clients-group{
	display: flex;
	align-items: center;
	gap: 3.5rem;
	padding-right: 3.5rem;
	flex-shrink: 0;
}
.clients-group img{
	height: 2.15rem;
	width: auto;
	max-width: 150px;
	object-fit: contain;
	/* Default: black & white / muted */
	filter: grayscale(1) contrast(1.15);
	opacity: 0.42;
	transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
	user-select: none;
	pointer-events: auto;
}
.clients-group img:hover{
	filter: grayscale(0) contrast(1);
	opacity: 1;
	transform: scale(1.08);
}
/* Infinite scroll - RTL (default row); longer duration = slower flow */
.clients-row[data-dir="rtl"] .clients-track{
	animation: clients-marquee-rtl 420s linear infinite;
}
/* LTR opposite row */
.clients-row[data-dir="ltr"] .clients-track{
	animation: clients-marquee-ltr 420s linear infinite;
}
@keyframes clients-marquee-rtl{
	from{ transform: translateX(0); }
	to{ transform: translateX(-50%); }
}
@keyframes clients-marquee-ltr{
	from{ transform: translateX(-50%); }
	to{ transform: translateX(0); }
}
/* Pause entire marquee on hover (user can inspect logos) */
.clients-marquee:hover .clients-track{
	animation-play-state: paused;
}
/* Dark theme: lift logos slightly so grayscale still reads */
[data-theme="dark"] .clients-group img{
	opacity: 0.5;
	filter: grayscale(1) contrast(1.25) brightness(1.15);
}
[data-theme="dark"] .clients-group img:hover{
	filter: grayscale(0) contrast(1) brightness(1);
	opacity: 1;
}
@media (prefers-reduced-motion: reduce){
	.clients-row[data-dir="rtl"] .clients-track,
	.clients-row[data-dir="ltr"] .clients-track{
		animation: none;
		transform: none;
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
		max-width: var(--container);
		margin: 0 auto;
		padding: 0 1.25rem;
	}
	.clients-group{
		flex-wrap: wrap;
		justify-content: center;
		gap: 1.5rem 2rem;
		padding-right: 0;
	}
	.clients-group[aria-hidden="true"]{ display: none; }
}

/* How-it-works video */
.video-frame{
	max-width: 1100px;
	margin: 0 auto;
	padding: 0.45rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}
.site-video{
	display: block;
	width: 100%;
	height: auto;
	max-height: min(78vh, 640px);
	border-radius: calc(var(--radius-lg) - 2px);
	background: #0b1220;
	vertical-align: middle;
}
.video-caption{
	margin: 1rem auto 0;
	max-width: 960px;
	text-align: center;
	font-size: 0.8rem;
	color: var(--text-faint);
}
.video-caption code{
	font-size: 0.75rem;
	background: var(--bg-inset);
	padding: 0.1rem 0.35rem;
	border-radius: 4px;
	color: var(--text-soft);
}
@media (prefers-reduced-motion: reduce){
	.site-video{ /* user controls only; no autoplay forced */ }
}

/* Panel shot - same model as Next Hero: w-full image, rounded frame, no bleed */
.hero-visual{
	position: relative;
	width: 100%;
	min-width: 0; /* critical: allow grid child to shrink without overflowing */
	max-width: 100%;
}
.hero-panels{
	width: 100%;
	max-width: 100%;
}
.hero-panels-tabs{
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.85rem;
}
.hero-panel-tab{
	appearance: none;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	color: var(--text-soft);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.hero-panel-tab:hover{
	color: var(--text);
	border-color: var(--border-strong);
}
.hero-panel-tab.is-active{
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 35%, transparent);
}
.hero-panels-frame{
	position: relative;
	width: 100%;
	max-width: 100%;
	border-radius: 1rem; /* rounded-2xl */
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	box-shadow: 0 25px 50px -12px rgba(15, 23, 41, 0.18);
}
[data-theme="dark"] .hero-panels-frame{
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
}
.hero-panels-chrome{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--bg-soft);
	border-bottom: 1px solid var(--border);
	user-select: none;
}
.hero-panels-chrome .hm-dot{
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}
.hero-panels-url{
	margin-left: 0.35rem;
	flex: 1;
	min-width: 0;
	padding: 0.25rem 0.75rem;
	border-radius: 6px;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: 0.01em;
}
/* Natural image height - no aspect-ratio box that crops the shot */
.hero-panels-stage{
	position: relative;
	width: 100%;
	line-height: 0;
	background: var(--bg-soft);
}
.hero-panel-slide{
	margin: 0;
	width: 100%;
}
.hero-panel-slide[hidden]{
	display: none !important;
}
.hero-panel-slide img{
	display: block;
	width: 100%;
	height: auto; /* full panel visible - matches Next Image w-full */
	max-width: 100%;
}
/* Mobile: show under copy, still contained */
@media (max-width: 1023px){
	.hero-visual{
		order: -1;
		margin-bottom: 0.25rem;
	}
	.hero-panel-tab{ font-size: 0.75rem; padding: 0.4rem 0.7rem; }
}
/* Desktop only was Next default; we keep mobile but clamp width */
@media (min-width: 1024px){
	.hero-visual{ order: 0; }
}
.hero-mockup{
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	position: relative;
}
.hm-inner{
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--border);
}
.hm-titlebar{
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 11px 16px;
	border-bottom: 1px solid var(--border);
	background: var(--bg-soft);
}
.hm-dot{ width: 9px; height: 9px; border-radius: 50%; }
.hm-dot:nth-child(1){ background: #ff5f56; }
.hm-dot:nth-child(2){ background: #ffbd2e; }
.hm-dot:nth-child(3){ background: #27c93f; }
.hm-url{
	flex: 1;
	text-align: center;
	font-size: 0.68rem;
	color: var(--text-faint);
	font-family: "SF Mono", Menlo, Consolas, monospace;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 4px 10px;
	max-width: 220px;
	margin: 0 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hm-layout{ display: flex; min-height: 280px; }
.hm-sidebar{
	width: 140px;
	flex-shrink: 0;
	border-right: 1px solid var(--border);
	background: var(--navy);
	padding: 12px 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.hm-nav{
	padding: 7px 10px;
	border-radius: 5px;
	font-size: 0.68rem;
	font-weight: 600;
	color: rgba(255,255,255,0.55);
	display: flex;
	align-items: center;
	gap: 7px;
}
.hm-nav.active{
	background: rgba(255,255,255,0.1);
	color: #fff;
}
.hm-nav-sq{
	width: 10px; height: 10px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.55;
	flex-shrink: 0;
}
.hm-main{
	flex: 1;
	padding: 14px 16px;
	min-width: 0;
	background: var(--bg-elevated);
}
.hm-row-hdr{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.hm-page-title{ font-size: 0.78rem; font-weight: 700; color: var(--text); }
.hm-live-badge{
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--accent-dark);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	border-radius: 4px;
	padding: 3px 8px;
}
.hm-vps-row{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 8px;
	border-radius: 5px;
	margin-bottom: 3px;
	border: 1px solid transparent;
}
.hm-vps-row:nth-child(odd){ background: var(--bg-soft); }
.hm-status{ width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hm-status.on{ background: #16a34a; }
.hm-status.off{ background: var(--text-faint); }
.hm-vname{
	flex: 1;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hm-vtag{
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 2px 6px;
	border-radius: 3px;
	flex-shrink: 0;
}
.hm-vtag.kvm{ background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.hm-vtag.lxc{ background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-dark); }
.hm-vtag.ovz{ background: color-mix(in srgb, #d97706 12%, transparent); color: #b45309; }
.hm-vtag.xen{ background: color-mix(in srgb, #7c3aed 12%, transparent); color: #6d28d9; }
.hm-vram{ font-size: 0.66rem; color: var(--text-faint); width: 36px; text-align: right; flex-shrink: 0; }
.hm-float{
	position: absolute;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	padding: 9px 13px;
	font-size: 0.72rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	color: var(--text);
	z-index: 10;
}
.hm-float.bottom-right{ bottom: -6px; right: -8px; }
.hm-float.top-right{ top: 20px; right: -10px; }
.hm-float-dot{
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #16a34a;
	box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 20%, transparent);
}
/* ==========================================================================
	 Trust / platform strip
	 ========================================================================== */
.trust-band{
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	padding: 1.75rem 0;
}
.trust-band-label{
	text-align: center;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--text-faint);
	font-weight: 700;
	margin-bottom: 1.15rem;
}
.platform-logos{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.55rem 0.65rem;
}
.platform-logos .badge{
	min-width: 5.5rem;
	justify-content: center;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--text-soft);
	background: var(--bg-soft);
	border-color: var(--border);
	padding: 0.55rem 0.9rem;
}
/* ==========================================================================
	 Page header
	 ========================================================================== */
.page-header{
	padding: calc(clamp(2.5rem, 5vw, 3.75rem) + 113px) 0 clamp(2rem, 4vw, 2.75rem);
	border-bottom: 1px solid var(--border);
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 70% 80% at 100% 0%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 55%),
		var(--bg-soft);
}
.page-header .container{ position: relative; z-index: 1; }
.breadcrumb{
	font-size: 0.8rem;
	color: var(--text-faint);
	margin-bottom: var(--space-3);
	font-weight: 500;
}
.breadcrumb a{ color: var(--text-faint); font-weight: 600; }
.breadcrumb a:hover{ color: var(--brand); }
.page-header h1,
.page-header-copy h1,
.page-header-split .page-header-copy h1{
	font-size: clamp(2.1rem, 4.2vw, 2.85rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.16;
	max-width: 48rem;
	margin-top: 0.35rem;
	margin-bottom: 1.1rem;
	color: var(--text-heading, var(--text));
	text-wrap: balance;
}
.page-header .lead,
.page-header-copy .lead,
.page-header-split .page-header-copy .lead{
	font-size: clamp(1.05rem, 1.8vw, 1.15rem);
	line-height: 1.68;
	max-width: 44rem;
	text-align: left !important;
	text-justify: auto !important;
	hyphens: manual !important;
	color: var(--text-muted);
	margin-bottom: 1.5rem;
	text-wrap: pretty;
}
.page-header-split{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(140px, 240px);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
.page-header-split.has-wide-brand{
	grid-template-columns: minmax(0, 1fr) minmax(200px, 340px);
}
.page-header-brand{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
}
.page-header-brand-logo{
	display: block;
	width: min(100%, 220px);
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 12px 28px color-mix(in srgb, #2560ff 22%, transparent));
}
.page-header-brand-logo.brand-logo-wide{
	width: min(100%, 320px);
	max-height: 165px;
	object-fit: contain;
}
@media (max-width: 768px){
	.page-header-split{
		grid-template-columns: 1fr;
		text-align: left;
	}
	.page-header-brand{
		order: -1;
		justify-content: flex-start;
		padding: 0 0 0.25rem;
	}
	.page-header-brand-logo{
		width: min(42vw, 140px);
	}
	.page-header-brand-logo.brand-logo-wide{
		width: min(75vw, 240px);
	}
}
/* ==========================================================================
	 Infrastructure platform theater (features.html after 6 pillars)
	 Vertical stack: logo → horizontal capability marquee → hypervisors → VMs
	 Centered vertical spine + packets between layers
	 ========================================================================== */
.infra-hero{
	--infra-bg: #071120;
	--infra-line-a: rgba(61, 95, 206, 0.9);
	--infra-line-b: rgba(13, 155, 140, 0.75);
	--infra-card: rgba(255, 255, 255, 0.06);
	--infra-card-border: rgba(255, 255, 255, 0.12);
	--infra-text: #e8eefc;
	--infra-muted: #8b9bb8;
	position: relative;
	isolation: isolate;
	min-height: 100vh;
	padding: 4.5rem 0 5rem;
	overflow: hidden;
	background: var(--infra-bg);
	color: var(--infra-text);
}
/* Always dark stage even in site light mode - intentional product theater */
.infra-bg{
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.infra-particles{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.infra-mesh{
	position: absolute;
	inset: -10%;
	/* Soft ambient only - no harsh left-side flash */
	background:
		radial-gradient(ellipse 42% 38% at 50% 28%, rgba(26, 58, 143, 0.22), transparent 65%),
		radial-gradient(ellipse 32% 36% at 78% 55%, rgba(101, 40, 247, 0.12), transparent 60%),
		radial-gradient(ellipse 38% 30% at 50% 85%, rgba(13, 155, 140, 0.1), transparent 65%);
	/* Static mesh - avoid thunder-like pulse */
	animation: none;
}
.infra-grid{
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 20%, transparent 75%);
	opacity: 0.55;
}
.infra-glow{
	position: absolute;
	border-radius: 50%;
	filter: blur(72px);
	opacity: 0.28;
	/* No breathing / thundering pulse */
	animation: none;
}
/* Remove left-side flash (was infra-glow-a) */
.infra-glow-a{ display: none; }
.infra-glow-b{ width: 280px; height: 280px; right: 10%; top: 32%; background: rgba(101, 40, 247, 0.18); }
.infra-glow-c{ width: 220px; height: 220px; left: 50%; bottom: 10%; transform: translateX(-50%); background: rgba(13, 155, 140, 0.14); }
.infra-hero-inner{
	position: relative;
	z-index: 1;
	width: 100%;
}
.infra-hero-head{
	text-align: center;
	max-width: min(40rem, 100%);
	margin: 0 auto 2.25rem;
	padding: 0 0.25rem;
}
.infra-hero-head .eyebrow{ color: #8eb0ff; }
.infra-hero-head h2{
	margin: 0.35rem 0 0.75rem;
	font-size: clamp(1.55rem, 4vw, 2.65rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #f4f7ff;
	line-height: 1.15;
}
.infra-hero-head p{
	margin: 0;
	color: var(--infra-muted);
	font-size: clamp(0.95rem, 2vw, 1.02rem);
	line-height: 1.65;
}

/* ---- Vertical architecture stack (all layers centered) ---- */
.infra-stage{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	gap: 0;
}

.infra-layer-label{
	margin: 0 0 0.75rem;
	text-align: center;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--infra-muted);
}
.infra-layer-top{
	width: 100%;
	text-align: center;
}
.infra-layer-top .infra-layer-label{ margin-bottom: 0; }

/* Centered vertical spine + moving packets between layers */
.infra-connector{
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	height: 2.75rem;
	margin: 0.15rem 0;
	flex-shrink: 0;
}
.infra-connector-line{
	display: block;
	width: 2px;
	height: 100%;
	margin: 0 auto;
	border-radius: 999px;
	background: linear-gradient(
		180deg,
		rgba(61, 95, 206, 0.15),
		rgba(61, 95, 206, 0.95),
		rgba(13, 155, 140, 0.9)
	);
	box-shadow: 0 0 14px rgba(61, 95, 206, 0.45);
}
.infra-packet{
	position: absolute;
	left: 50%;
	top: 0;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	pointer-events: none;
	/* Slow glide down the spine - no hard blink */
	animation: infra-packet-y 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	opacity: 0;
}
.infra-packet-a{
	background: #8eb0ff;
	box-shadow: 0 0 8px rgba(61, 95, 206, 0.55);
}
.infra-packet-b{
	background: #0d9b8c;
	box-shadow: 0 0 8px rgba(13, 155, 140, 0.5);
	animation-delay: 1.5s;
}
.infra-packet-c{
	background: #fa8901;
	box-shadow: 0 0 8px rgba(250, 137, 1, 0.45);
	animation-delay: 3s;
}
@keyframes infra-packet-y{
	0%{ transform: translate3d(0, 0, 0); opacity: 0; }
	15%{ opacity: 0.85; }
	85%{ opacity: 0.85; }
	100%{ transform: translate3d(0, 2.5rem, 0); opacity: 0; }
}

/* Virtualizor glass core - full wordmark SVG */
.infra-core-wrap{
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 0.15rem 0.25rem;
}
.infra-core-glass{
	width: fit-content;
	max-width: min(100%, 560px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* Tight padding so logo dominates the card */
	padding: 1.55rem 1.85rem;
	border-radius: 16px;
	background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.035));
	border: 1px solid rgba(255,255,255,0.14);
	box-shadow:
		0 0 0 1px rgba(61, 95, 206, 0.12) inset,
		0 14px 36px rgba(0, 0, 0, 0.4),
		0 0 40px rgba(61, 95, 206, 0.14);
	backdrop-filter: blur(16px) saturate(1.2);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	/* Steady card - no pulsing glow */
	animation: none;
}
.infra-core-logo{
	display: block;
	/* Height-driven; width scales from SVG aspect ratio */
	width: auto;
	height: clamp(40px, 6.5vw, 56px);
	max-width: min(100%, 280px);
	object-fit: contain;
	filter: drop-shadow(0 3px 10px rgba(250,137,1,0.22));
}
.infra-core-tag{
	margin: 0.85rem 0 0;
	font-size: clamp(0.62rem, 1.6vw, 0.72rem);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--infra-muted);
}

/* Horizontal capability marquee (left → right continuous) */
.infra-marquee-block{
	width: 100%;
	padding: 0.25rem 0 0.35rem;
}
.infra-marquee{
	position: relative;
	width: 100%;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.infra-marquee-fade{
	display: none; /* mask handles edges */
}
.infra-marquee-track{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.65rem;
	width: max-content;
	/* Horizontal flow left → right (seamless loop via duplicated set) */
	animation: infra-marquee 55s linear infinite;
	will-change: transform;
	padding: 5px;
}
@keyframes infra-marquee{
	from{ transform: translate3d(-50%, 0, 0); }
	to{ transform: translate3d(0, 0, 0); }
}
.infra-marquee:hover .infra-marquee-track{
	animation-play-state: paused;
}
.infra-cap{
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 0.5rem 0.95rem;
	border-radius: 999px;
	font-size: clamp(0.68rem, 1.5vw, 0.78rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #e8eefc;
	background: var(--infra-card);
	border: 1px solid var(--infra-card-border);
	box-shadow: 0 8px 24px rgba(0,0,0,0.35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Hypervisor layer */
.infra-hyper{
	width: 100%;
	max-width: 720px;
	padding: 0.15rem 0.5rem 0;
	text-align: center;
}
.infra-hyper-row{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}
.infra-hyper-chip{
	padding: 0.55rem 0.95rem;
	border-radius: 10px;
	font-size: clamp(0.72rem, 1.6vw, 0.8rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #e8eefc;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 6px 18px rgba(0,0,0,0.25);
	/* Static chips - no wobble */
	transform: none;
}

/* VM cluster */
.infra-vms{
	width: 100%;
	max-width: 900px;
	padding: 0.15rem 0.25rem 0;
}
.infra-vm-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}
@media (min-width: 720px){
	.infra-vm-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.infra-vm{
	padding: 0.85rem 0.9rem;
	border-radius: 12px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	box-shadow: 0 10px 28px rgba(0,0,0,0.3);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	/* Steady cards - no float wobble */
	transform: none;
	min-width: 0;
	transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.infra-vm:hover{
	border-color: rgba(255,255,255,0.18);
	box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.infra-vm-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.65rem;
	gap: 0.5rem;
}
.infra-vm-name{
	font-size: 0.82rem;
	font-weight: 700;
	color: #f0f4ff;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.infra-vm-led{
	flex-shrink: 0;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 999px;
	background: #22c55e;
	box-shadow: 0 0 6px rgba(34, 197, 94, 0.45);
	/* Soft steady pulse - no blink */
	animation: infra-led-soft 3.6s ease-in-out infinite;
	opacity: 1;
}
@keyframes infra-led-soft{
	0%, 100%{ opacity: 0.85; box-shadow: 0 0 5px rgba(34, 197, 94, 0.35); }
	50%{ opacity: 1; box-shadow: 0 0 8px rgba(34, 197, 94, 0.55); }
}
.infra-meter{
	display: grid;
	grid-template-columns: 2.1rem minmax(0, 1fr);
	gap: 0.4rem;
	align-items: center;
	margin-bottom: 0.35rem;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--infra-muted);
}
.infra-bar{
	height: 5px;
	border-radius: 999px;
	background: rgba(255,255,255,0.08);
	overflow: hidden;
	min-width: 0;
}
.infra-bar > i{
	display: block;
	height: 100%;
	width: var(--p, 50%);
	border-radius: inherit;
	background: linear-gradient(90deg, #1a3a8f, #3d5fce);
	/* Long ease so meter drift never snaps */
	transition: width 2.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.infra-bar-net > i{
	background: linear-gradient(90deg, #0a7a6e, #0d9b8c);
}

/* Reduced motion */
.infra-reduced .infra-marquee-track,
.infra-reduced .infra-packet,
.infra-reduced .infra-vm-led{
	animation: none !important;
}
.infra-reduced .infra-marquee-track{
	transform: none;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	max-width: 100%;
}
.infra-reduced .infra-marquee-track .infra-cap[aria-hidden="true"]{
	display: none;
}
.infra-reduced .infra-marquee{
	mask-image: none;
	-webkit-mask-image: none;
	overflow: visible;
}

/* Small phones */
@media (max-width: 479px){
	.infra-hero{ padding: 3.25rem 0 3.75rem; }
	.infra-core-glass{ padding: 0.4rem 0.55rem; }
	.infra-core-logo{ height: 38px; max-width: 100%; }
	.infra-cap{ padding: 0.42rem 0.75rem; }
	.infra-connector{ height: 2.25rem; }
	.infra-vm{ padding: 0.7rem 0.7rem; }
	.infra-vm-grid{ gap: 0.55rem; }
}
/* Large screens - keep stack centered, widen stage slightly */
@media (min-width: 1100px){
	.infra-stage{ max-width: 1000px; }
	.infra-core-logo{ height: 40px; }
	.infra-connector{ height: 3rem; }
}

/* ==========================================================================
	 How it works - scroll-pinned stack (BACKUP - features.html GSAP HIW)
	 Inspired by Next HowItWorks: bare metal → Virtualizor → VMs
	 ========================================================================== */
.hiw-section{
	position: relative;
	background: var(--bg-soft);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.hiw-pin{
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 4rem 0;
	box-sizing: border-box;
}
.hiw-grid{
	display: grid;
	gap: 2.5rem;
	align-items: center;
	width: 100%;
}
@media (min-width: 1024px){
	.hiw-grid{
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: 3rem;
	}
}
.hiw-copy h2{
	font-size: clamp(2rem, 4vw, 2.85rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0.35rem 0 0;
	color: var(--text);
}
.hiw-grad{
	background: linear-gradient(105deg, var(--brand) 0%, #3d5fce 45%, #6528F7 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hiw-steps{
	list-style: none;
	margin: 2.25rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}
.hiw-step{
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	opacity: 0.28;
	transition: opacity 0.2s ease;
}
.hiw-num{
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: 800;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	color: var(--text-soft);
}
.hiw-num-0{
	border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
	background: color-mix(in srgb, var(--brand) 12%, transparent);
	color: var(--brand);
}
.hiw-num-1{
	border-color: color-mix(in srgb, #4300FF 28%, var(--border));
	background: color-mix(in srgb, #4300FF 10%, transparent);
	color: #4300FF;
}
[data-theme="dark"] .hiw-num-1{ color: #a78bfa; }
.hiw-num-2{
	border-color: color-mix(in srgb, #6528F7 30%, var(--border));
	background: color-mix(in srgb, #6528F7 12%, transparent);
	color: #6528F7;
}
[data-theme="dark"] .hiw-num-2{ color: #c4b5fd; }
.hiw-step-title{
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.02em;
}
.hiw-step-body{
	display: block;
	margin-top: 0.35rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--text-soft);
	font-weight: 500;
	max-width: 28rem;
}
/* Right stack */
.hiw-stack{
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
}
.hiw-vms{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	position: relative;
	z-index: 3;
}
@media (min-width: 640px){
	.hiw-vms{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hiw-vm{
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	padding: 1rem;
	box-shadow: var(--shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hiw-vm:hover{
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}
.hiw-vm-top{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.hiw-os{
	width: 1.65rem;
	height: 1.65rem;
	border-radius: 6px;
	display: inline-block;
}
.hiw-os-ubuntu{ background: linear-gradient(135deg, #e95420, #772953); }
.hiw-os-debian{ background: linear-gradient(135deg, #a80030, #d70a53); }
.hiw-os-alma{ background: linear-gradient(135deg, #0f2c52, #2b3648); }
.hiw-os-rocky{ background: linear-gradient(135deg, #10b981, #065f46); }
.hiw-os-win{ background: linear-gradient(135deg, #0078d4, #00bcf2); }
.hiw-os-fedora{ background: linear-gradient(135deg, #51a2da, #294172); }
.hiw-led{
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: #22c55e;
	box-shadow: 0 0 8px 1px rgba(34, 197, 94, 0.35);
}
.hiw-vm-name{
	margin: 0.75rem 0 0.2rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--text);
}
.hiw-vm-meta{
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--text-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hiw-hyper{
	position: relative;
	z-index: 2;
}
.hiw-hyper-inner{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	padding: 1.15rem 1.25rem;
	border-radius: 12px;
	text-align: left;
	background: linear-gradient(105deg, #1a3a8f 0%, #3d5fce 45%, #6528F7 100%);
	box-shadow: 0 12px 28px rgba(61, 95, 206, 0.35);
	color: #fff;
}
.hiw-vz-mark{
	display: inline-flex;
	flex-shrink: 0;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
.hiw-hyper-title{
	margin: 0;
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #fff;
}
.hiw-hyper-sub{
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255,255,255,0.9);
}
.hiw-metal{
	position: relative;
	z-index: 1;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	padding: 1.15rem 1.25rem;
	box-shadow: var(--shadow);
}
.hiw-metal-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.hiw-metal-title{
	margin: 0;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--text);
}
.hiw-leds{
	display: flex;
	gap: 0.35rem;
}
.hiw-leds [data-led]{
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 999px;
	background: #22c55e;
	display: block;
}
.hiw-metal-stats{
	margin-top: 0.85rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}
.hiw-metal-stats span{
	text-align: center;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--text-soft);
	padding: 0.5rem 0.35rem;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--bg-soft);
}
/* Static fallback (no GSAP / reduced motion) */
.hiw-static .hiw-step{ opacity: 1 !important; }
.hiw-static [data-metal],
.hiw-static [data-hypervisor],
.hiw-static [data-vm]{
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}
@media (max-width: 1023px){
	.hiw-pin{
		min-height: auto;
		padding: 3rem 0;
	}
}

/* ==========================================================================
	 Virtualizor orchestration flow (BACKUP styles - virtflow SVG)
	 ========================================================================== */
.virtflow-section{
	position: relative;
	overflow: hidden;
}
.virtflow-stage{
	position: relative;
	margin: 0 auto 1.75rem;
	max-width: 1000px;
	padding: 0.75rem;
	border-radius: 20px;
	border: 1px solid var(--border);
	background:
		radial-gradient(ellipse 70% 55% at 50% 45%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
		var(--bg-elevated);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}
.virtflow-svg{
	display: block;
	width: 100%;
	height: auto;
	max-height: min(70vh, 560px);
}
/* SVG theme hooks */
.virtflow-svg .vf-grad-a{ stop-color: var(--brand); }
.virtflow-svg .vf-grad-b{ stop-color: var(--accent); }
.virtflow-svg .vf-grad-c{ stop-color: var(--brand-light); }
.virtflow-svg .vf-marker{ fill: var(--brand); }
.virtflow-svg .vf-grid path{
	stroke: var(--border);
	stroke-width: 1;
	fill: none;
}
.virtflow-svg .vf-card{
	fill: var(--bg-elevated);
	stroke: var(--border);
	stroke-width: 1.5;
}
.virtflow-svg .vf-stroke{
	fill: none;
	stroke: var(--text-soft);
	stroke-width: 1.6;
}
.virtflow-svg .vf-soft{ fill: color-mix(in srgb, var(--brand) 8%, transparent); }
.virtflow-svg .vf-dot-ok{ fill: var(--accent); stroke: none; }
.virtflow-svg .vf-label{
	fill: var(--text);
	font-family: var(--font);
	font-size: 12px;
	font-weight: 700;
}
.virtflow-svg .vf-mini{
	fill: var(--text-faint);
	font-family: var(--font);
	font-size: 9px;
	font-weight: 600;
}
.virtflow-svg .vf-chip-text{
	fill: var(--text);
	font-family: var(--font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.virtflow-svg .vf-flow{
	fill: none;
	stroke: url(#vf-line);
	stroke-width: 2;
	stroke-linecap: round;
	opacity: 0.9;
}
.virtflow-svg .vf-flow-soft{ stroke: var(--border-strong); stroke-width: 1.5; opacity: 0.8; }
.virtflow-svg .vf-flow-delay{ opacity: 0.75; }
.virtflow-svg .vf-orbit{
	fill: none;
	stroke: var(--border-strong);
	stroke-width: 1.25;
	stroke-dasharray: 4 6;
	opacity: 0.7;
}
.virtflow-svg .vf-core-ring{
	fill: none;
	stroke: url(#vf-ring);
	stroke-width: 2.5;
}
.virtflow-svg .vf-core-ring-inner{
	fill: var(--bg-elevated);
	stroke: var(--border);
	stroke-width: 1.5;
}
.virtflow-svg .vf-core-title{
	fill: var(--text);
	font-family: var(--font);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.virtflow-svg .vf-core-sub{
	fill: var(--text-faint);
	font-family: var(--font);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
/* Official mark colors (brand) */
.virtflow-svg .vz-orange{ fill: #fa8901; }
.virtflow-svg .vz-blue{ fill: #4b5e82; }
[data-theme="dark"] .virtflow-svg .vz-blue{ fill: #7a90b8; }
.virtflow-svg .vf-vm{
	fill: color-mix(in srgb, var(--brand) 22%, var(--bg-elevated));
	stroke: var(--brand);
	stroke-width: 1.5;
}
.virtflow-svg .vf-vm-accent{
	fill: color-mix(in srgb, var(--accent) 28%, var(--bg-elevated));
	stroke: var(--accent);
}
.virtflow-svg .vf-ico{
	fill: none;
	stroke: var(--brand);
	stroke-width: 1.6;
}
.virtflow-svg .vf-ico-dot{
	fill: var(--brand);
	stroke: none;
}
.virtflow-svg .vf-ico-line{
	fill: none;
	stroke: var(--accent);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* dashed pulse animation on primary paths */
.virtflow-svg .vf-pulse{
	fill: none;
	stroke: var(--brand);
	stroke-width: 2.5;
	stroke-dasharray: 10 140;
	stroke-linecap: round;
	opacity: 0.85;
	animation: vf-dash 3.2s linear infinite;
}
.virtflow-svg .vf-pulse-2{
	stroke: var(--accent);
	animation-duration: 2.6s;
	animation-delay: 0.4s;
}
@keyframes vf-dash{
	to{ stroke-dashoffset: -150; }
}
@media (prefers-reduced-motion: reduce){
	.virtflow-svg .vf-pulse,
	.virtflow-svg .vf-pulse-2{ animation: none; stroke-dasharray: none; opacity: 0.4; }
}
.virtflow-legend{
	display: grid;
	gap: 0.85rem;
	max-width: 720px;
	margin: 0 auto;
}
@media (min-width: 800px){
	.virtflow-legend{ gap: 1rem; }
}
.virtflow-legend-item{
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--text-soft);
}
.virtflow-legend-item strong{ color: var(--text); font-weight: 700; }
.virtflow-legend-swatch{
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin-top: 0.3rem;
	border-radius: 4px;
	border: 1px solid var(--border);
}
.virtflow-swatch-core{
	background: linear-gradient(135deg, #fa8901, #4b5e82);
	border: none;
}
.virtflow-swatch-virt{
	background: color-mix(in srgb, var(--brand) 35%, var(--bg-elevated));
	border-color: var(--brand);
}
.virtflow-swatch-orbit{
	background: color-mix(in srgb, var(--accent) 35%, var(--bg-elevated));
	border-color: var(--accent);
}
[data-theme="dark"] .virtflow-stage{
	background:
		radial-gradient(ellipse 70% 55% at 50% 45%, color-mix(in srgb, var(--brand-light) 14%, transparent), transparent 70%),
		var(--bg-elevated);
}

/* ==========================================================================
	 Product taxonomy catalog (BACKUP styles - kept if old tax cards restored)
	 Custom SVGs: stroke/fill via CSS vars → light + dark safe
	 ========================================================================== */
.tax-section{
	position: relative;
}
.tax-section .section-header{
	max-width: 40rem;
}
.tax-grid{
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}
@media (min-width: 720px){
	.tax-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px){
	.tax-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tax-card{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.35rem 1.4rem 1.4rem;
	border-radius: 14px;
	border: 1px solid var(--border);
	background:
		linear-gradient(165deg, var(--bg-elevated) 0%, var(--bg-elevated) 55%, var(--bg-soft) 100%);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.tax-card::before{
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--brand), var(--accent));
	opacity: 0.85;
}
.tax-card:hover{
	border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.tax-card-head{
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
}
.tax-card-head h3{
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--text);
}
.tax-lead{
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--text-soft);
}
/* SVG icon plate */
.tax-svg{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	box-shadow: var(--shadow);
}
.tax-svg svg{
	width: 2rem;
	height: 2rem;
	display: block;
}
/* Theme-aware strokes/fills - no hard-coded black/white paths */
.tax-stroke{
	stroke: var(--text-soft);
	stroke-width: 1.75;
	fill: none;
}
.tax-stroke-brand{
	stroke: var(--brand);
	stroke-width: 2;
}
.tax-stroke-accent{
	stroke: var(--accent);
	stroke-width: 2.25;
}
.tax-fill-soft{
	fill: color-mix(in srgb, var(--brand) 10%, transparent);
}
.tax-fill-brand{
	fill: var(--brand);
	stroke: none;
}
.tax-fill-accent{
	fill: var(--accent);
	stroke: none;
}
[data-theme="dark"] .tax-fill-soft{
	fill: color-mix(in srgb, var(--brand-light) 16%, transparent);
}
[data-theme="dark"] .tax-stroke{
	stroke: var(--text-soft);
}
[data-theme="dark"] .tax-stroke-brand{
	stroke: var(--brand-light);
}
[data-theme="dark"] .tax-fill-brand{
	fill: var(--brand-light);
}
.tax-chips{
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tax-chips li{
	display: inline-flex;
	align-items: center;
	padding: 0.28rem 0.65rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--text-soft);
	background: var(--bg-inset);
	border: 1px solid var(--border);
	list-style: none;
	transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.tax-card:hover .tax-chips li{
	border-color: color-mix(in srgb, var(--brand) 22%, var(--border));
}
.tax-footnote{
	margin: 2rem auto 0;
	max-width: 40rem;
	text-align: center;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--text-faint);
}

/* ==========================================================================
	 Cards
	 ========================================================================== */
.card{
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 1.5rem 1.4rem;
	box-shadow: var(--shadow);
	transition: border-color var(--transition), box-shadow var(--transition);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}
/* NOC partners directory */
/* Partner directory - classic unstructured wrap (logos + name chips) */
.partner-grid{
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	justify-content: center;
}
.partner-logo{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 145px;
	height: 60px;
	padding: 0.5rem;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	filter: grayscale(1);
	opacity: 0.8;
	transition: filter var(--transition), opacity var(--transition), border-color var(--transition);
	text-decoration: none;
}
a.partner-logo:hover{
	filter: grayscale(0);
	opacity: 1;
	border-color: var(--border-strong);
}
.partner-logo img{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.partner-chip{
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1rem;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	color: var(--text-soft);
	font-size: 0.9rem;
	text-decoration: none;
	transition: border-color var(--transition), color var(--transition);
}
a.partner-chip:hover{
	border-color: var(--accent);
	color: var(--text);
}
.partner-logo.is-hidden,
.partner-logo[hidden],
.partner-chip.is-hidden,
.partner-chip[hidden]{
	display: none !important;
}
/* Features catalog: main 6 + accordion for secondary pillars */
.features-more{
	margin-top: var(--space-7);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.features-more-toggle{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	max-width: 28rem;
	margin: 0 auto;
	padding: 0.85rem 1.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--bg-elevated);
	box-shadow: var(--shadow);
	cursor: pointer;
	color: var(--text);
	font: inherit;
	text-align: left;
	transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.features-more-toggle:hover{
	border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
	box-shadow: var(--shadow-md);
}
.features-more-toggle:focus-visible{
	outline: 2px solid color-mix(in srgb, var(--brand) 50%, transparent);
	outline-offset: 2px;
}
.features-more-toggle-label{
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}
.features-more-toggle-text{
	font-weight: 700;
	font-size: 0.98rem;
	letter-spacing: -0.01em;
}
.features-more-toggle-hint{
	font-size: 0.8rem;
	color: var(--text-soft);
	font-weight: 500;
}
.features-more-toggle-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--bg-soft);
	border: 1px solid var(--border);
	flex-shrink: 0;
	transition: transform 220ms ease, background 180ms ease;
}
.features-more-toggle-icon .icon{
	width: 18px;
	height: 18px;
}
.features-more.is-open .features-more-toggle-icon{
	transform: rotate(180deg);
	background: color-mix(in srgb, var(--brand) 12%, var(--bg-elevated));
	border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
	color: var(--brand);
}
.features-more-panel{
	overflow: hidden;
	margin-top: 0;
	max-height: 0;
	opacity: 0;
	/* max-height is set in px via JS (scrollHeight) so the panel can grow past the
	   original 7 media cards - a fixed 1400px was clipping the 33 capability cards. */
	transition: max-height 0.45s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.features-more.is-open .features-more-panel{
	margin-top: 1.5rem;
	/* Fallback if JS hasn't run yet - must be large enough for 7 media + 33 category cards */
	max-height: 20000px;
	opacity: 1;
}
/* Keep panel in layout for height animation even when [hidden] */
.features-more-panel[hidden]{
	display: block !important;
	visibility: hidden;
	pointer-events: none;
}
.features-more.is-open .features-more-panel{
	visibility: visible;
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce){
	.features-more-panel,
	.features-more-toggle-icon{
		transition: none;
	}
	.features-more.is-open .features-more-panel{
		max-height: none;
	}
}

.features-more-divider{
	height: 1px;
	background: var(--border);
	margin: 2rem 0 1.75rem;
}

/* Search toolbar inside More features panel */
.features-more-toolbar{
	margin-bottom: 1.75rem;
}
.features-more-search{
	display: flex;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	padding: 0.7rem 0.85rem 0.7rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--bg-elevated);
	box-shadow: var(--shadow);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.features-more-search:focus-within{
	border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
	box-shadow: var(--shadow-md), 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}
.features-more-search-icon{
	display: inline-flex;
	color: var(--text-faint);
	flex-shrink: 0;
}
.features-more-search-icon .icon{
	width: 18px;
	height: 18px;
}
.features-more-search-input{
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 0.98rem;
	line-height: 1.4;
	padding: 0.15rem 0;
}
.features-more-search-input::placeholder{
	color: var(--text-faint);
}
.features-more-search-input::-webkit-search-cancel-button{
	-webkit-appearance: none;
	appearance: none;
}
.features-more-search-clear{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.85rem;
	height: 1.85rem;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--bg-soft);
	color: var(--text-soft);
	cursor: pointer;
	flex-shrink: 0;
	transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.features-more-search-clear:hover{
	background: color-mix(in srgb, var(--brand) 10%, var(--bg-elevated));
	border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
	color: var(--brand);
}
.features-more-search-clear .icon{
	width: 14px;
	height: 14px;
}
.features-more-search-clear[hidden]{
	display: none !important;
}
.features-more-search-status{
	margin: 0.7rem 0 0;
	font-size: 0.88rem;
	color: var(--text-soft);
	line-height: 1.45;
}
.features-more-search-status strong{
	color: var(--text);
	font-weight: 700;
}
.features-more-search-status.is-filtered{
	color: var(--brand);
}
.features-more-search-status.is-empty{
	color: var(--text-soft);
}

/* Section labels: 7 highlights, then full catalog */
.features-more-section-head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}
.features-more-section-title{
	margin: 0;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
}
.features-more-section-meta{
	color: var(--text-faint);
	font-size: 0.85rem;
	white-space: nowrap;
}
.features-more-section-lead{
	margin: -0.35rem 0 1.35rem;
	font-size: 0.92rem;
	color: var(--text-soft);
	max-width: 42rem;
	line-height: 1.5;
}
.features-more-section[hidden],
.features-more-divider[hidden],
.capability-category[hidden]{
	display: none !important;
}
.features-more-panel a.card.is-search-hidden{
	display: none !important;
}

/* Empty search state */
.features-more-empty{
	text-align: center;
	padding: 2.5rem 1.25rem;
	border: 1px dashed var(--border);
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
}
.features-more-empty[hidden]{
	display: none !important;
}
.features-more-empty-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.85rem;
	border-radius: 999px;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	color: var(--text-faint);
}
.features-more-empty-icon .icon{
	width: 20px;
	height: 20px;
}
.features-more-empty strong{
	display: block;
	font-size: 1.05rem;
	margin-bottom: 0.4rem;
}
.features-more-empty p{
	margin: 0 0 1.1rem;
	color: var(--text-soft);
	font-size: 0.92rem;
}
.features-more-empty .btn{
	min-width: 8rem;
}

.capability-category + .capability-category{
	margin-top: 2.5rem;
}
.capability-category-head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--border);
}
.capability-category-head h3{
	margin: 0;
	font-size: 1.15rem;
}
.capability-category-count{
	color: var(--text-faint);
	font-size: 0.85rem;
	white-space: nowrap;
}

.card-with-media{
	padding: 0;
}
/* Image on top */
.card-thumb{
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--bg-soft);
	border-bottom: 1px solid var(--border);
	overflow: hidden;
	flex-shrink: 0;
}
.card-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 280ms ease;
}
a.card-with-media:hover .card-thumb img{
	transform: scale(1.03);
}
/* Body: title row → details → link */
.card-body{
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.15rem 1.35rem 1.35rem;
	min-height: 0;
}
.card-title-row{
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.65rem;
}
.card-title-row .card-icon{
	flex-shrink: 0;
	margin: 0;
	width: 40px;
	height: 40px;
}
.card-title-row h3{
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
}
.card-body p{
	margin: 0 0 0.85rem;
	flex: 1;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--text-soft);
}
.card-body .card-link{
	margin-top: auto;
	align-self: flex-start;
}
a.card{ color: inherit; }
a.card:hover{
	border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
	box-shadow: var(--shadow-md);
	color: inherit;
}
.card h3{
	font-size: 1.05rem;
	margin-bottom: 0.5rem;
	font-weight: 700;
}
.card p{
	margin-bottom: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	flex: 1;
}
.card p:not(:last-child){ margin-bottom: var(--space-3); }
.card-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: var(--brand-soft);
	color: var(--brand);
	margin-bottom: 1.1rem;
	border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent);
}
.card-icon.accent{
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent-dark);
	border-color: color-mix(in srgb, var(--accent) 18%, transparent);
}
.card-icon .icon{ width: 20px; height: 20px; }
.card-link{
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 700;
	font-size: 0.875rem;
	margin-top: 1rem;
	color: var(--brand);
}
.card:hover .card-link{ gap: 0.55rem; }
.check-list{ display: flex; flex-direction: column; gap: 0.85rem; }
.check-list li{
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	color: var(--text-soft);
	font-size: 0.95rem;
	line-height: 1.55;
}
.check-list .icon{
	flex-shrink: 0;
	color: var(--accent);
	margin-top: 0.15em;
	width: 1.1em;
	height: 1.1em;
}
.check-list-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0.65rem 1.5rem;
}
/* ==========================================================================
	 FAQ accordion (native <details>)
	 ========================================================================== */
.faq-list{
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 46rem;
	margin: 0 auto;
}
.faq-item{
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 0.25rem 1.25rem;
}
.faq-item summary{
	cursor: pointer;
	list-style: none;
	padding: 1rem 0;
	font-weight: 600;
	color: var(--text);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::before{
	content: "+";
	display: inline-block;
	width: 1.1em;
	margin-right: 0.5rem;
	color: var(--accent);
}
.faq-item[open] summary::before{ content: "\2212"; }
.faq-item .faq-body{
	padding: 0 0 1.1rem;
	color: var(--text-soft);
	font-size: 0.95rem;
	line-height: 1.6;
}
/* ==========================================================================
	 Badges / tags
	 ========================================================================== */
.tag-list{ display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badge{
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 0.45rem 0.9rem;
	border-radius: var(--radius-sm);
	background: var(--bg-inset);
	border: 1px solid var(--border);
	color: var(--text);
	font-weight: 600;
	font-size: 0.85rem;
}
a.badge:hover{
	border-color: var(--brand);
	color: var(--brand);
	background: var(--brand-soft);
}
/* ==========================================================================
	 Stats - enterprise metrics
	 ========================================================================== */
.stats{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}
@media (min-width: 720px){
	.stats{ grid-template-columns: repeat(3, 1fr); }
}
.stat{
	padding: 1.5rem 1.25rem;
	text-align: center;
	border-right: 1px solid var(--border);
}
.stat:last-child{ border-right: none; }
@media (max-width: 719px){
	.stat:nth-child(2){ border-right: none; }
	.stat:nth-child(1),
	.stat:nth-child(2){ border-bottom: 1px solid var(--border); }
	/* 3 stats on 2-col mobile: orphan last item centers under the pair above */
	.stats > .stat:last-child:nth-child(odd){
		grid-column: 1 / -1;
		justify-self: center;
		width: 100%;
		max-width: 50%;
	}
}
.stat{
	padding: 1.35rem 1.25rem;
	text-align: center;
}
.stat .stat-num{
	font-size: clamp(1.85rem, 3.5vw, 2.35rem);
	font-weight: 800;
	color: var(--brand);
	letter-spacing: -0.03em;
	line-height: 1.1;
	background: none;
	-webkit-text-fill-color: unset;
}
.stat .stat-label{
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text);
	margin-top: 0;
	line-height: 1.45;
	max-width: 18rem;
	margin-left: auto;
	margin-right: auto;
}
.stat .stat-num + .stat-label{
	margin-top: 0.35rem;
	font-size: 0.84rem;
	font-weight: 500;
	color: var(--text-soft);
	max-width: 14rem;
}
.soft-panel{
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 0;
	box-shadow: var(--shadow);
	overflow: hidden;
}
/* VPC / feature stats: full white section + soft-panel card */
.section-stats-white{
	background: var(--bg);
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--border);
}
.section-stats-white .soft-panel{
	background: #fff;
	box-shadow: var(--shadow-md);
}
[data-theme="dark"] .section-stats-white .soft-panel{
	background: var(--bg-elevated);
}
.section-stats-white .stats{
	background: transparent;
}
.section-stats-white .stat{
	padding: 1.65rem 1.35rem;
}
/* ==========================================================================
	 Mockups / feature rows
	 ========================================================================== */
.mockup{
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}
.mockup-bar{
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border);
	background: var(--bg-soft);
}
.mockup-dot{
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--border-strong);
}
.mockup-dot:nth-child(1){ background: #ff5f56; }
.mockup-dot:nth-child(2){ background: #ffbd2e; }
.mockup-dot:nth-child(3){ background: #27c93f; }
.mockup-body{
	padding: var(--space-5);
	display: grid;
	gap: var(--space-3);
}
.mockup-row{ display: flex; gap: var(--space-3); align-items: center; }
.mockup-block{
	border-radius: var(--radius-sm);
	background: var(--bg-inset);
}
.feature-row{ padding: var(--space-8) 0; }
.feature-row:nth-of-type(even){ background: var(--bg-soft); }
.feature-row .eyebrow{ margin-bottom: var(--space-3); }
.feature-row h2{
	font-size: clamp(1.55rem, 3vw, 2.15rem);
	font-weight: 700;
	margin-bottom: 1rem;
}
.feature-row p.lead{
	font-size: 1.05rem;
	line-height: 1.7;
	margin-bottom: 1.35rem;
}
/* ==========================================================================
	 CTA banner - dark card + pill buttons (aligned with Next Cta.jsx)
	 ========================================================================== */
.cta-section{
	position: relative;
	overflow: hidden;
}
.cta-wrap{
	max-width: 72rem; /* ~max-w-6xl */
}
.cta-banner{
	border-radius: 1.5rem; /* rounded-3xl */
	padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 5rem);
	text-align: center;
	background: #060814;
	color: #fff;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow:
		0 25px 50px -12px rgba(26, 58, 143, 0.25),
		0 0 0 1px rgba(255,255,255,0.03) inset;
}
/* Glow blobs + subtle grid */
.cta-banner::before{
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 55% 50% at 50% 0%, color-mix(in srgb, var(--brand) 28%, transparent), transparent 65%),
		radial-gradient(ellipse 40% 45% at 80% 100%, color-mix(in srgb, #6528F7 18%, transparent), transparent 60%),
		linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
	background-size: auto, auto, 40px 40px, 40px 40px;
	pointer-events: none;
}
.cta-banner > *{ position: relative; z-index: 1; }
.cta-badge{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--brand-light) 35%, transparent);
	background: color-mix(in srgb, var(--brand) 14%, transparent);
	color: var(--brand-light);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.cta-badge-dot{
	position: relative;
	display: inline-flex;
	width: 0.5rem;
	height: 0.5rem;
}
.cta-badge-ping{
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: var(--brand-light);
	opacity: 0.65;
	animation: cta-ping 1.4s cubic-bezier(0,0,0.2,1) infinite;
}
.cta-badge-core{
	position: relative;
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--brand-light);
}
@keyframes cta-ping{
	75%, 100%{ transform: scale(2.2); opacity: 0; }
}
.cta-banner h2{
	color: #fff;
	font-size: clamp(1.85rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0 0 1rem;
}
.cta-banner > p{
	color: #94a3b8;
	max-width: 36rem;
	margin: 0 auto 2rem;
	font-size: clamp(0.98rem, 1.5vw, 1.1rem);
	line-height: 1.7;
}
/* Pill action row */
.cta-actions{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 0.85rem;
	margin: 0 auto;
	max-width: 22rem;
}
@media (min-width: 640px){
	.cta-actions{
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		max-width: none;
		gap: 0.85rem;
	}
}
.btn-cta{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		transform 180ms ease,
		background 180ms ease,
		border-color 180ms ease,
		box-shadow 180ms ease,
		filter 180ms ease,
		color 180ms ease;
	white-space: nowrap;
}
.btn-cta:hover{ transform: translateY(-2px); }
.btn-cta:active{ transform: translateY(0); }
/* Primary - gradient pill */
.btn-cta-primary{
	color: #fff !important;
	background: linear-gradient(105deg, #1a3a8f 0%, #3d5fce 45%, #6528F7 100%);
	box-shadow: 0 12px 28px rgba(61, 95, 206, 0.4);
	border-color: transparent;
}
.btn-cta-primary:hover{
	color: #fff !important;
	filter: brightness(1.08);
	box-shadow: 0 16px 36px rgba(61, 95, 206, 0.5);
}
/* Secondary - glass outline */
.btn-cta-secondary{
	color: #fff !important;
	background: rgba(255,255,255,0.04);
	border-color: rgba(255,255,255,0.14);
	box-shadow: none;
}
.btn-cta-secondary:hover{
	color: #fff !important;
	background: rgba(255,255,255,0.1);
	border-color: rgba(255,255,255,0.28);
}
/* Ghost - minimal text chip */
.btn-cta-ghost{
	color: #cbd5e1 !important;
	background: transparent;
	border-color: transparent;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	font-weight: 600;
}
.btn-cta-ghost:hover{
	color: #fff !important;
	background: rgba(255,255,255,0.06);
}
/* Trust / proof row under CTA actions */
.cta-proof{
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	max-width: 52rem;
	margin: 2.25rem auto 0;
	padding: 0 0.25rem;
}
@media (min-width: 640px){
	.cta-proof{
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}
.cta-proof-item{
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	text-align: left;
	padding: 0.9rem 1rem;
	border-radius: 14px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.cta-proof-icon{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 10px;
	color: #8eb0ff;
	background: color-mix(in srgb, var(--brand, #1a3a8f) 22%, transparent);
	border: 1px solid color-mix(in srgb, var(--brand-light, #3d5fce) 30%, transparent);
}
.cta-proof-item strong{
	display: block;
	font-size: 0.88rem;
	font-weight: 700;
	color: #f1f5f9;
	letter-spacing: -0.01em;
	margin-bottom: 0.15rem;
}
.cta-proof-item span{
	display: flex;
	font-size: 0.78rem;
	line-height: 1.4;
	color: #94a3b8;
	align-items: center;
	justify-content: center;
}
.cta-platforms{
	margin-top: 1.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.cta-platforms > p{
	margin: 0 0 0.85rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #64748b;
}
.cta-platforms-list{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: #cbd5e1;
}
.cta-platforms-list span:not(.cta-sep){
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 999px;
	padding: 0.28rem 0.75rem;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cta-platforms-list span:not(.cta-sep):hover{
	color: #fff;
	background: color-mix(in srgb, var(--brand) 20%, rgba(255,255,255,0.08));
	border-color: var(--brand-light);
}
.cta-sep{ display: none; }

/* ==========================================================================
   World-Class Enterprise CTA Banner Layout (.cta-banner-pro)
   ========================================================================== */
.cta-banner-pro {
	position: relative;
	text-align: left;
	padding: 3.25rem 3rem 2.5rem;
	background:
		radial-gradient(ellipse 80% 60% at 10% -10%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%),
		radial-gradient(ellipse 70% 50% at 90% 110%, color-mix(in srgb, #6528F7 25%, transparent), transparent 65%),
		linear-gradient(145deg, #091326 0%, #0d1a36 60%, #081122 100%);
	border: 1px solid color-mix(in srgb, var(--brand-light) 30%, rgba(255, 255, 255, 0.12));
	border-radius: 1.5rem;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.cta-pro-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 2.5rem;
	align-items: center;
}

.cta-pro-copy .cta-badge {
	margin-bottom: 0.85rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.85rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #94a3b8;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
}

.cta-pro-copy h2 {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: 800;
	color: #fff;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin-bottom: 0.85rem;
}

.cta-pro-copy .cta-lead {
	font-size: 1rem;
	line-height: 1.65;
	color: #cbd5e1;
	margin-bottom: 1.5rem;
	max-width: 52ch;
}

.cta-pro-copy .cta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	justify-content: flex-start;
	margin-bottom: 2rem;
}

.cta-pro-proof {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cta-pro-proof-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.cta-pro-proof-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--brand-light) 22%, transparent);
	border: 1px solid color-mix(in srgb, var(--brand-light) 30%, transparent);
	color: #8eb0ff;
	flex-shrink: 0;
}

.cta-pro-proof-item strong {
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	color: #f1f5f9;
	line-height: 1.3;
}

.cta-pro-proof-item span {
	font-size: 0.74rem;
	color: #94a3b8;
	line-height: 1.3;
}

/* CLI Terminal Card */
.cta-terminal-card {
	background: #060c18;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 1rem;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.cta-terminal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.65rem 1rem;
	background: rgba(255, 255, 255, 0.03);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cta-terminal-dots {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.cta-terminal-dots span {
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
}
.cta-terminal-dots .dot-red { background: #ff5f56; }
.cta-terminal-dots .dot-yellow { background: #ffbd2e; }
.cta-terminal-dots .dot-green { background: #27c93f; }

.cta-terminal-title {
	font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.76rem;
	color: #94a3b8;
	font-weight: 600;
}

.cta-terminal-copy-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.72rem;
	font-weight: 600;
	color: #cbd5e1;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0.4rem;
	padding: 0.2rem 0.55rem;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.cta-terminal-copy-btn:hover {
	background: var(--brand);
	color: #fff;
}

.cta-terminal-body {
	padding: 1.25rem 1.15rem;
	font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.82rem;
	line-height: 1.7;
	color: #e2e8f0;
}

.cta-terminal-body .cmd-comment { color: #64748b; }
.cta-terminal-body .cmd-prompt { color: #10b981; font-weight: 700; }
.cta-terminal-body .cmd-kw { color: #38bdf8; }

.cta-terminal-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	padding: 0.75rem 1.15rem;
	background: rgba(255, 255, 255, 0.02);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 0.74rem;
	color: #10b981;
	font-weight: 600;
}

/* Tablet & Mobile Responsiveness */
@media (max-width: 1024px) {
	.cta-pro-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.cta-banner-pro {
		padding: 2.5rem 1.75rem 2rem;
	}
}

@media (max-width: 768px) {
	.cta-pro-proof {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 1rem;
	}
}

@media (max-width: 640px) {
	.cta-banner-pro {
		padding: 2rem 1.15rem 1.5rem;
		border-radius: 1.15rem;
	}
	.cta-pro-copy .cta-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.cta-pro-copy .cta-actions .btn-cta {
		width: 100%;
		justify-content: center;
	}
	.cta-terminal-body {
		font-size: 0.75rem;
		padding: 1rem 0.85rem;
		overflow-x: auto;
	}
}
/* Features page CTA - slightly richer glow after dark platform theater */
.cta-banner-features::before{
	background:
		radial-gradient(ellipse 60% 55% at 50% -5%, color-mix(in srgb, var(--brand) 34%, transparent), transparent 68%),
		radial-gradient(ellipse 42% 48% at 85% 105%, color-mix(in srgb, #6528F7 20%, transparent), transparent 62%),
		radial-gradient(ellipse 36% 40% at 12% 90%, rgba(13, 155, 140, 0.14), transparent 60%),
		linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
	background-size: auto, auto, auto, 40px 40px, 40px 40px;
}
.cta-banner-features .cta-actions{
	margin-top: 0.25rem;
}
/* Legacy overrides if other pages still use old btn classes inside cta-banner */
.cta-banner .btn-row{ justify-content: center; margin-top: 0.5rem; }
.cta-banner .btn-outline{
	border-radius: 999px;
	border-color: rgba(255,255,255,0.14);
	color: #fff;
	background: rgba(255,255,255,0.04);
	padding: 0.95rem 1.75rem;
}
.cta-banner .btn-outline:hover{
	border-color: rgba(255,255,255,0.28);
	color: #fff;
	background: rgba(255,255,255,0.1);
}
.cta-banner .btn-primary{
	border-radius: 999px;
	background: linear-gradient(105deg, #1a3a8f 0%, #3d5fce 45%, #6528F7 100%);
	color: #fff;
	padding: 0.95rem 1.75rem;
	box-shadow: 0 12px 28px rgba(61, 95, 206, 0.4);
}
.cta-banner .btn-primary:hover{
	filter: brightness(1.08);
	color: #fff;
	background: linear-gradient(105deg, #1a3a8f 0%, #3d5fce 45%, #6528F7 100%);
}
.cta-banner .btn-ghost{
	border-radius: 999px;
	color: #cbd5e1;
}
.cta-banner .btn-ghost:hover{
	color: #fff;
	background: rgba(255,255,255,0.06);
}
/* ==========================================================================
	 Footer - dark enterprise
	 ========================================================================== */
/* Newsletter band (above footer) */
.nl-band{
	position: relative;
	padding: clamp(2.5rem, 5vw, 3.5rem) 0;
	background:
		radial-gradient(ellipse 60% 80% at 10% 50%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%),
		radial-gradient(ellipse 50% 70% at 90% 40%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
		linear-gradient(180deg, var(--bg-soft), var(--bg));
	border-top: 1px solid var(--border);
}
.nl-band-inner{
	display: grid;
	gap: 1.75rem;
	align-items: center;
}
@media (min-width: 768px){
	.nl-band-inner{ grid-template-columns: 1.1fr 1fr; gap: 2.5rem; }
}
.nl-eyebrow{
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: 0.5rem;
}
.nl-copy h2{
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	margin: 0 0 0.5rem;
	letter-spacing: -0.02em;
}
.nl-copy p{
	margin: 0;
	color: var(--text-soft);
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 28rem;
}
.nl-form-row{
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}
@media (min-width: 520px){
	.nl-form-row{ flex-direction: row; align-items: stretch; }
}
.nl-input{
	flex: 1;
	min-width: 0;
	padding: 0.95rem 1.15rem;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--bg-elevated);
	color: var(--text);
	font: inherit;
	font-size: 0.95rem;
	box-shadow: var(--shadow);
	outline: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.nl-input:focus{
	border-color: var(--brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.nl-submit{
	border: none;
	white-space: nowrap;
	cursor: pointer;
	font: inherit;
}
.nl-consent{
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin-top: 0.85rem;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--text-soft);
	cursor: pointer;
}
.nl-consent input{
	margin-top: 0.2rem;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	accent-color: var(--brand);
	cursor: pointer;
}
.nl-consent a{
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.nl-hint{
	margin: 0.65rem 0 0;
	font-size: 0.78rem;
	color: var(--text-faint);
	line-height: 1.45;
}
.nl-status{
	margin: 0.65rem 0 0;
	font-size: 0.88rem;
	font-weight: 600;
}
.nl-status-ok{ color: var(--accent-dark); }
[data-theme="dark"] .nl-status-ok{ color: var(--accent); }
.nl-status-err{ color: #dc2626; }
.sr-only{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Footer - dark attractive */
.site-footer{
	position: relative;
	border-top: none;
	padding: 3.75rem 0 1.75rem;
	background: #060814;
	color: rgba(255,255,255,0.7);
	overflow: hidden;
}
.footer-glow{
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 40% 50% at 20% 0%, rgba(26, 58, 143, 0.35), transparent 60%),
		radial-gradient(ellipse 35% 45% at 85% 100%, rgba(101, 40, 247, 0.18), transparent 55%),
		linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
	background-size: auto, auto, 40px 40px, 40px 40px;
}
.footer-inner{ position: relative; z-index: 1; }
.site-footer .brand{ color: #fff; }
.site-footer .brand:hover{ color: #fff; }
.site-footer .brand-mark{
	background: var(--brand-light);
	box-shadow: none;
}
.footer-top{
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-bottom: 2.5rem;
	margin-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 768px){
	.footer-top{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}
.footer-brand-block p{
	max-width: 360px;
	font-size: 0.9rem;
	color: rgba(255,255,255,0.55);
	line-height: 1.65;
	margin: 1rem 0 0;
}
.footer-social{
	display: flex;
	gap: 0.65rem;
	margin-top: 1.25rem;
}
.footer-social a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.1);
	background: rgba(255,255,255,0.03);
	color: rgba(255,255,255,0.7);
	transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.footer-social a:hover{
	color: #fff;
	border-color: rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.08);
	transform: translateY(-2px);
}
.footer-status{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	padding: 0.9rem 1.15rem;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.08);
	background: rgba(255,255,255,0.03);
	font-size: 0.82rem;
	color: rgba(255,255,255,0.75);
}
.footer-status-dot{
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 999px;
	background: #22c55e;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}
.footer-status a{
	color: var(--brand-light);
	font-weight: 700;
}
.footer-status a:hover{ color: #fff; }
.footer-grid{
	display: grid;
	gap: 2.5rem 2rem;
	grid-template-columns: 1fr;
}
.footer-grid-wide{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px){
	.footer-grid{ grid-template-columns: 1.6fr 1fr 1fr 1fr; }
	.footer-grid-wide{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px){
	.footer-grid-wide{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.footer-col h4{
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255,255,255,0.92);
	margin-bottom: 0.45rem;
	font-weight: 700;
}
.footer-col-rule{
	display: block;
	width: 1.5rem;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--brand-light), #6528F7);
	margin-bottom: 1rem;
}
.footer-col ul{ display: flex; flex-direction: column; gap: 0.55rem; list-style: none; padding: 0; margin: 0; }
.footer-col li{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
}
.footer-col a{
	color: rgba(255,255,255,0.65);
	font-size: 0.9rem;
	font-weight: 500;
	transition: color 160ms ease, transform 160ms ease;
}
.footer-col a:hover{ color: #fff; }
.footer-link-soon{
	opacity: 0.55;
	cursor: default;
	pointer-events: none;
}
.footer-tag{
	display: inline-flex;
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: rgba(34, 197, 94, 0.15);
	color: #4ade80;
}
.footer-tag-soon{
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.55);
}
.footer-brand p{
	max-width: 300px;
	font-size: 0.9rem;
	color: rgba(255,255,255,0.55);
	line-height: 1.65;
	margin-top: 1rem;
}
.footer-bottom{
	margin-top: 3rem;
	padding-top: 1.35rem;
	border-top: 1px solid rgba(255,255,255,0.08);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: space-between;
	align-items: center;
	font-size: 0.8rem;
	color: rgba(255,255,255,0.4);
}
.footer-bottom-links{
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.25rem;
}
.footer-bottom-links a{
	color: rgba(255,255,255,0.5);
	font-weight: 600;
}
.footer-bottom-links a:hover{ color: #fff; }

/* Scroll-to-top: circle = launch pad only; rocket alone flies bottom → top
   IMPORTANT: do NOT put transform on .scroll-top while flying - any transform
   on an ancestor makes position:fixed children stick to that ancestor, not the
   viewport, so the rocket never leaves the pad. */
.scroll-top{
	--st-right: 1.15rem;
	--st-bottom: 1.25rem;
	--st-size: 3.25rem;
	--st-rocket: 28px;
	position: fixed;
	right: var(--st-right);
	bottom: var(--st-bottom);
	z-index: 120; /* above sticky header (100) */
	width: var(--st-size);
	height: var(--st-size);
	border: none;
	padding: 0;
	border-radius: 999px;
	cursor: pointer;
	background: transparent;
	overflow: visible;
	opacity: 0;
	/* Center rocket in the pad (no margin hacks) */
	display: flex;
	align-items: center;
	justify-content: center;
	/* Use only opacity for show/hide - no transform on the pad button */
	pointer-events: none;
	transition: opacity 200ms ease;
}
.scroll-top[hidden]{
	display: none !important;
}
.scroll-top.is-visible{
	display: flex;
	opacity: 1;
	pointer-events: auto;
}
.scroll-top.is-visible[hidden]{
	display: flex !important; /* keep flex centering if attr races */
}
/* Launch pad - light: white circle; dark: brand blue (inverted) */
.scroll-top-pad{
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid rgba(26, 58, 143, 0.1);
	box-shadow:
		0 2px 6px rgba(15, 23, 42, 0.08),
		0 10px 24px rgba(15, 23, 42, 0.14),
		0 0 0 1px rgba(15, 23, 42, 0.04);
	transition: box-shadow 200ms ease, border-color 200ms ease, opacity 200ms ease, background 200ms ease;
}
.scroll-top-pad::after{
	/* subtle inner ring - not dashed “launch pad” noise */
	content: "";
	position: absolute;
	inset: 18%;
	border-radius: 999px;
	border: 1px solid rgba(26, 58, 143, 0.08);
	pointer-events: none;
}
.scroll-top.is-visible:hover:not(.is-flying):not(.is-launching) .scroll-top-pad{
	border-color: rgba(61, 95, 206, 0.28);
	box-shadow:
		0 4px 10px rgba(15, 23, 42, 0.1),
		0 14px 28px rgba(26, 58, 143, 0.16);
}
/* Rocket - light: theme blue on white pad */
.scroll-top-rocket{
	position: relative;
	z-index: 2;
	display: block;
	width: var(--st-rocket);
	height: var(--st-rocket);
	margin: 0; /* flex on .scroll-top centers this */
	flex-shrink: 0;
	/* No transform transition - it cancels CSS keyframe animations on transform */
	transition: none;
	pointer-events: none;
	filter: drop-shadow(0 1px 2px rgba(26, 58, 143, 0.15));
}
.scroll-top.is-visible:hover:not(.is-flying):not(.is-launching) .scroll-top-rocket{
	filter: drop-shadow(0 2px 4px rgba(26, 58, 143, 0.25));
}
.scroll-top-rocket .st-body{
	fill: #1a3a8f; /* Virtualizor theme blue */
}
.scroll-top-rocket .st-fin{
	fill: none;
	stroke: #3d5fce;
	stroke-width: 1.8;
	stroke-linejoin: round;
}
.scroll-top-rocket .st-window{
	fill: #ffffff;
	stroke: #3d5fce;
	stroke-width: 1.2;
}
/* Fiery Rocket Thrust Flame */
.st-flame-group {
	opacity: 0;
	transform: scaleY(0);
	transform-origin: 24px 37px;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.st-flame-outer {
	fill: #ff4500;
}
.st-flame-inner {
	fill: #ffea00;
}

/* Hover pre-ignition spark */
.scroll-top.is-visible:hover:not(.is-flying):not(.is-launching) .st-flame-group {
	opacity: 0.75;
	transform: scaleY(0.75);
	filter: drop-shadow(0 2px 6px rgba(255, 69, 0, 0.7));
}

/* Ignition on click & launch */
.scroll-top.is-launching .st-flame-group,
.scroll-top.is-flying .st-flame-group {
	opacity: 1;
	transform: scaleY(1);
	animation: st-flame-thrust 0.08s ease-in-out infinite alternate;
}

/* Dark mode rocket - invert: blue pad + white rocket */
[data-theme="dark"] .scroll-top-pad{
	background: #1a3a8f;
	border-color: rgba(168, 191, 255, 0.22);
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.45),
		0 10px 28px rgba(26, 58, 143, 0.45),
		0 0 0 1px rgba(107, 142, 247, 0.2);
}
[data-theme="dark"] .scroll-top-pad::after{
	border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] .scroll-top.is-visible:hover:not(.is-flying):not(.is-launching) .scroll-top-pad{
	border-color: rgba(168, 191, 255, 0.4);
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.5),
		0 14px 32px rgba(61, 95, 206, 0.5),
		0 0 0 1px rgba(107, 142, 247, 0.35);
}
[data-theme="dark"] .scroll-top-rocket{
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
[data-theme="dark"] .scroll-top.is-visible:hover:not(.is-flying):not(.is-launching) .scroll-top-rocket{
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
[data-theme="dark"] .scroll-top-rocket .st-body{
	fill: #ffffff;
}
[data-theme="dark"] .scroll-top-rocket .st-fin{
	stroke: #d7e2ff;
}
[data-theme="dark"] .scroll-top-rocket .st-window{
	fill: #1a3a8f;
	stroke: #c5d4ff;
}
[data-theme="dark"] .scroll-top.is-launching .scroll-top-pad{
	border-color: rgba(168, 191, 255, 0.45);
	box-shadow:
		0 0 0 4px rgba(107, 142, 247, 0.22),
		0 4px 12px rgba(0, 0, 0, 0.45),
		0 12px 28px rgba(61, 95, 206, 0.45);
}
[data-theme="dark"] .scroll-top.is-flying .scroll-top-rocket{
	filter: drop-shadow(0 4px 14px rgba(168, 191, 255, 0.45));
}

/* Launch crouch on pad */
.scroll-top.is-launching{
	pointer-events: none;
}
.scroll-top.is-launching .scroll-top-rocket{
	animation: st-crouch 0.3s ease-in-out;
}
.scroll-top.is-launching .scroll-top-pad{
	border-color: rgba(61, 95, 206, 0.35);
	box-shadow:
		0 0 0 4px rgba(61, 95, 206, 0.14),
		0 4px 10px rgba(15, 23, 42, 0.1),
		0 12px 26px rgba(26, 58, 143, 0.18);
}
@keyframes st-crouch{
	0%{ transform: translateY(0) scale(1) rotate(0deg); }
	25%{ transform: translateY(2px) scale(0.95) rotate(-1.5deg); }
	50%{ transform: translateY(4px) scale(0.92) rotate(1.5deg); }
	75%{ transform: translateY(-1px) scale(1.02) rotate(-1deg); }
	100%{ transform: translateY(-6px) scale(1.08) rotate(0deg); }
}

/* Rocket only: pad stays; rocket travels bottom → top of viewport */
.scroll-top.is-flying{
	pointer-events: none;
}
.scroll-top.is-flying .scroll-top-pad{
	animation: st-pad-dim 0.9s ease forwards;
}
.scroll-top.is-flying .scroll-top-rocket{
	/* Detach from pad: true viewport fixed (parent has NO transform) */
	position: fixed;
	right: calc(var(--st-right) + (var(--st-size) - var(--st-rocket)) / 2);
	bottom: calc(var(--st-bottom) + (var(--st-size) - var(--st-rocket)) / 2);
	left: auto;
	top: auto;
	width: var(--st-rocket);
	height: var(--st-rocket);
	margin: 0;
	z-index: 130;
	transform-origin: center center;
	animation: st-rocket-fly 1s linear forwards;
	/* Blue rocket glow during flight */
	filter: drop-shadow(0 4px 12px rgba(26, 58, 143, 0.5));
}
.scroll-top.is-flying .st-flame{
	animation: st-flame 0.12s ease-in-out infinite alternate;
	transform-origin: center bottom;
}
@keyframes st-rocket-fly{
	0%{
		transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
		opacity: 1;
	}
	12%{
		transform: translate3d(0, -8vh, 0) scale(1.08) rotate(-5deg);
		opacity: 1;
	}
	45%{
		transform: translate3d(4px, -48vh, 0) scale(1.1) rotate(3deg);
		opacity: 1;
	}
	78%{
		transform: translate3d(-2px, -82vh, 0) scale(0.95) rotate(-2deg);
		opacity: 0.95;
	}
	100%{
		transform: translate3d(0, calc(-100vh - 3rem), 0) scale(0.7) rotate(0deg);
		opacity: 0;
	}
}
@keyframes st-flame{
	from{ transform: scaleY(1) scaleX(1); }
	to{ transform: scaleY(1.55) scaleX(0.8); }
}
@keyframes st-flame-thrust{
	0%{
		transform: scaleY(1) scaleX(0.9);
		filter: drop-shadow(0 4px 10px rgba(255, 69, 0, 0.9)) drop-shadow(0 8px 16px rgba(255, 170, 0, 0.7));
	}
	100%{
		transform: scaleY(1.65) scaleX(1.15);
		filter: drop-shadow(0 8px 18px rgba(255, 69, 0, 1)) drop-shadow(0 14px 28px rgba(255, 230, 0, 0.9));
	}
}
@keyframes st-pad-dim{
	0%{
		box-shadow: 0 0 0 5px rgba(61, 95, 206, 0.18), 0 10px 24px rgba(15, 23, 42, 0.14);
	}
	40%{
		box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 10px 22px rgba(15, 23, 42, 0.12);
	}
	100%{
		opacity: 0.75;
		box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 8px 18px rgba(15, 23, 42, 0.1);
	}
}
@media (prefers-reduced-motion: reduce){
	.scroll-top{ transition: none; }
	.scroll-top.is-flying .scroll-top-rocket,
	.scroll-top.is-launching .scroll-top-rocket,
	.scroll-top.is-flying .scroll-top-pad{ animation: none !important; }
}
@media (max-width: 600px){
	.scroll-top{
		--st-right: 0.85rem;
		--st-bottom: 5.5rem;
	}
}

/* ==========================================================================
	 Utilities
	 ========================================================================== */
.text-center{ text-align: center; }
.mt-0{ margin-top: 0; }
.mb-0{ margin-bottom: 0; }
.divider{
	height: 1px;
	background: var(--border);
	border: none;
	margin: 0;
}
code, pre{
	font-family: "SF Mono", "Fira Code", Consolas, Menlo, monospace;
	background: var(--code-bg);
	border-radius: var(--radius-sm);
}
code{ padding: 0.15em 0.4em; font-size: 0.9em; }
pre{
	padding: var(--space-4);
	overflow-x: auto;
	border: 1px solid var(--border);
	font-size: 0.85rem;
	line-height: 1.6;
}
pre code{ background: none; padding: 0; }
::selection{ background: color-mix(in srgb, var(--brand) 22%, transparent); }
/* ==========================================================================
	 API Terminal
	 ========================================================================== */
.api-section{
	background: var(--bg-soft);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.code-terminal{
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: var(--shadow-lg);
}
.ct-header{
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 10px 16px;
	background: #0f172a;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ct-dot{ width: 9px; height: 9px; border-radius: 50%; }
.ct-dot:nth-child(1){ background: #ff5f56; }
.ct-dot:nth-child(2){ background: #ffbd2e; }
.ct-dot:nth-child(3){ background: #27c93f; }
.ct-title{
	margin-left: auto;
	font-size: 0.68rem;
	font-family: "SF Mono", Menlo, Consolas, monospace;
	color: rgba(255,255,255,0.35);
}
.ct-body{
	margin: 0;
	border: none;
	border-radius: 0;
	padding: var(--space-5);
	background: #0b1220;
	font-family: "SF Mono", "Fira Code", Menlo, Consolas, monospace;
	font-size: 0.78rem;
	line-height: 1.8;
	overflow-x: auto;
	white-space: pre;
	color: #8899bb;
}
.ct-body .c-prompt{ color: rgba(136,153,187,0.4); }
.ct-body .c-cmd{ color: #a9b8d8; }
.ct-body .c-str{ color: #86efac; }
.ct-body .c-key{ color: #f9a8d4; }
.ct-body .c-num{ color: #fcd34d; }
.ct-body .c-punct{ color: rgba(169,184,216,0.5); }
.ct-body .c-sep{ display: block; border-top: 1px solid rgba(255,255,255,0.06); margin: var(--space-3) 0; }
/* ==========================================================================
	 Panel shots + comparison tables
	 ========================================================================== */
.panel-shot{
	margin: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--bg-elevated);
	box-shadow: var(--shadow-md);
}
.panel-shot img{
	width: 100%;
	display: block;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background: var(--bg-soft);
}
.feature-hero-shot img{
	aspect-ratio: 21 / 9;
	max-height: 360px;
	object-fit: cover;
}
.panel-shot-chrome{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--bg-soft);
	border-bottom: 1px solid var(--border);
}
.panel-shot-url{
	margin-left: auto;
	font-size: 0.7rem;
	font-family: "SF Mono", Menlo, Consolas, monospace;
	color: var(--text-faint);
	background: var(--bg-inset);
	border-radius: 4px;
	padding: 3px 10px;
}
.panel-shot-body{ padding: 14px 16px 8px; }
.panel-shot-titlebar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 0.85rem;
}
.shot-row{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	margin-bottom: 4px;
	background: var(--bg-soft);
	font-size: 0.78rem;
	border: 1px solid var(--border);
}
.shot-dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.shot-dot.on{ background: #16a34a; }
.shot-dot.off{ background: var(--text-faint); }
.shot-name{ flex: 1; font-weight: 600; color: var(--text); }
.shot-tag{
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 2px 6px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--brand) 12%, transparent);
	color: var(--brand);
}
.shot-meta{ color: var(--text-faint); width: 48px; text-align: right; }
.shot-status{ color: var(--text-soft); font-weight: 600; min-width: 64px; text-align: right; }
.panel-shot figcaption{
	padding: 0.85rem 1.1rem;
	font-size: 0.8rem;
	color: var(--text-soft);
	border-top: 1px solid var(--border);
	background: var(--bg-soft);
	line-height: 1.45;
}
.code-basis{
	margin-top: 1.1rem;
	font-size: 0.82rem;
	color: var(--text-faint);
	font-family: "SF Mono", Menlo, Consolas, monospace;
	padding: 0.65rem 0.85rem;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	display: inline-block;
	max-width: 100%;
	word-break: break-word;
}
.code-basis strong{
	font-family: var(--font);
	color: var(--text-soft);
	font-weight: 700;
	margin-right: 0.35rem;
}
.table-wrap{
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	max-width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-elevated);
	box-shadow: var(--shadow);
}
.compare-table{
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	min-width: 640px;
}
.compare-table th,
.compare-table td{
	padding: 1rem 1.15rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
	line-height: 1.5;
}
.compare-table thead th{
	background: var(--navy);
	color: rgba(255,255,255,0.9);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	border-bottom: none;
}
.compare-table thead th:first-child{ border-radius: 0; }
.compare-table tbody th{
	font-weight: 600;
	color: var(--text);
	width: 22%;
	background: var(--bg-soft);
}
.compare-table .td-us{
	background: color-mix(in srgb, var(--brand) 5%, transparent);
	font-weight: 550;
	color: var(--text);
}
.compare-table .td-us .icon{
	width: 14px;
	height: 14px;
	color: var(--accent);
	margin-right: 6px;
}
.compare-table tbody tr:hover td,
.compare-table tbody tr:hover th{
	background: color-mix(in srgb, var(--brand) 4%, var(--bg-elevated));
}
.compare-table tr:last-child th,
.compare-table tr:last-child td{ border-bottom: none; }
/* Proof / testimonial style blocks */
.proof-strip{
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}
@media (min-width: 800px){
	.proof-strip{ grid-template-columns: repeat(3, 1fr); }
}
.proof-card{
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 1.5rem;
	box-shadow: var(--shadow);
}
.proof-card .proof-kicker{
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: 0.65rem;
}
.proof-card h3{
	font-size: 1rem;
	margin-bottom: 0.5rem;
}
.proof-card p{ font-size: 0.9rem; margin: 0; }
/* Enterprise section label */
.enterprise-kicker{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 1rem;
}
.enterprise-kicker::before,
.enterprise-kicker::after{
	content: "";
	height: 1px;
	width: 40px;
	background: var(--border-strong);
}
/* Fix for feature pages using old keep-order class */
.keep-order{}

/* ==========================================================================
   Marketing-site additions: media figures, cookie banner, placeholders
   ========================================================================== */
.media-figure{
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	box-shadow: var(--shadow-md);
}
.media-figure img{
	width: 100%;
	height: auto;
	display: block;
}
.media-figure figcaption{
	padding: 0.75rem 1rem;
	font-size: 0.85rem;
	color: var(--text-faint);
	border-top: 1px solid var(--border);
	background: var(--bg-soft);
}
.img-placeholder{
	aspect-ratio: 16 / 9;
	background:
		linear-gradient(135deg, var(--navy) 0%, var(--brand) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.9);
	text-align: center;
	padding: 2rem;
	font-weight: 600;
}
.img-placeholder span{
	display: block;
	font-size: 0.8rem;
	font-weight: 500;
	opacity: 0.7;
	margin-top: 0.35rem;
}
/* Fixed bottom floating cookie consent bar (Accept / Reject) */
.cookie-banner{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 300;
	padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
	background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid var(--border);
	box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.12);
	animation: cookie-banner-in 320ms ease-out;
}
@keyframes cookie-banner-in{
	from{ transform: translateY(100%); opacity: 0; }
	to{ transform: translateY(0); opacity: 1; }
}
.cookie-banner[hidden]{ display: none !important; }
.cookie-banner-inner{
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	align-items: stretch;
}
@media (min-width: 720px){
	.cookie-banner-inner{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
	}
}
.cookie-banner-copy{
	flex: 1;
	min-width: 0;
}
.cookie-banner-title{
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 0.3rem;
	letter-spacing: -0.01em;
}
.cookie-banner p,
.cookie-banner-copy p{
	font-size: 0.84rem;
	margin: 0;
	color: var(--text-soft);
	line-height: 1.5;
}
.cookie-banner a{
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}
.cookie-banner-actions{
	display: flex;
	flex-shrink: 0;
	gap: 0.55rem;
	align-items: center;
}
.cookie-banner-actions .btn{
	min-width: 6.5rem;
	justify-content: center;
	font-weight: 650;
}
.cookie-btn-reject{
	/* keep outline style - secondary action */
}
.cookie-btn-accept{
	/* primary Accept */
}
/* Leave room so rocket / content is not fully covered on mobile */
body.cookie-banner-visible .scroll-top{
	bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 720px){
	body.cookie-banner-visible .scroll-top{
		bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
	}
}
body.nav-open{ overflow: hidden; }
.skip-link{
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--brand);
	color: #fff;
	padding: 0.6rem 1rem;
	border-radius: var(--radius-sm);
}
.skip-link:focus{ left: 1rem; top: 1rem; }
.breadcrumb{
	font-size: 0.85rem;
	color: var(--text-faint);
	margin-bottom: var(--space-3);
}
.breadcrumb a{ color: var(--text-soft); }
.page-header{
	padding: calc(clamp(2.5rem, 5vw, 3.75rem) + 113px) 0 clamp(2rem, 4vw, 2.75rem);
	background: var(--bg-soft);
	border-bottom: 1px solid var(--border);
}
.page-header h1{
	font-size: clamp(1.9rem, 4vw, 2.75rem);
}
.page-header .lead{
	font-size: 1.1rem;
	max-width: 42rem;
	margin-bottom: 0;
}
.pricing-card{
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.75rem;
	box-shadow: var(--shadow);
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}
.pricing-card.featured{
	border-color: var(--brand);
	box-shadow: var(--shadow-lg), 0 0 0 1px var(--brand);
}
.pricing-card h3{ margin-bottom: 0.35rem; }
.pricing-card .price-note{
	font-size: 0.9rem;
	color: var(--text-faint);
	margin-bottom: 1rem;
}
.pricing-card ul{
	flex: 1;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}
.pricing-card li{
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-size: 0.92rem;
	color: var(--text-soft);
	margin-bottom: 0.55rem;
	list-style: none;
}
.pricing-card li .icon{
	flex-shrink: 0;
	width: 1.05rem;
	height: 1.05rem;
	color: var(--accent);
	margin-top: 0.15rem;
}
/* Pricing page - period toggle + tiers + table + Backuply */
.price-compare-link{
	margin: 1rem 0 0;
	font-size: 0.95rem;
	font-weight: 600;
}
.price-billing-toggle{
	display: inline-flex;
	margin: 0 auto 0.75rem;
	padding: 0.25rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--bg-soft);
	gap: 0.2rem;
}
.price-toggle-btn{
	appearance: none;
	border: none;
	background: transparent;
	color: var(--text-soft);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	padding: 0.55rem 1.35rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.price-toggle-btn.is-active{
	background: var(--bg-elevated);
	color: var(--text);
	box-shadow: var(--shadow);
}
.price-toggle-btn:hover{ color: var(--text); }
.price-toggle-hint{
	text-align: center;
	font-size: 0.85rem;
	color: var(--text-faint);
	margin: 0 0 2rem;
}
.price-tier-grid{ margin-bottom: 3rem; }
.price-tier-top{ margin-bottom: 0.5rem; }
.price-badge{
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--brand-soft);
	color: var(--brand);
	margin-bottom: 0.65rem;
}
.price-badge-pro{
	background: color-mix(in srgb, var(--accent) 16%, transparent);
	color: var(--accent-dark);
}
[data-theme="dark"] .price-badge-pro{ color: var(--accent); }
.price-amount{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.15rem 0.35rem;
	margin: 0.35rem 0 0.25rem;
}
.price-currency{
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--text);
}
.price-num{
	font-size: clamp(2.4rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--text);
}
.price-period{
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-faint);
}
.price-amount-free .price-num{ color: var(--brand); }
.price-inr{
	font-size: 0.85rem;
	color: var(--text-faint);
	margin: 0 0 0.75rem;
}
.price-ribbon{
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--brand);
	color: #fff;
}
.price-table-wrap{ margin-top: 0.5rem; }
/* Full-width intro so copy uses the container right edge (not section-header 680px cap) */
.price-table-wrap .section-header{
	max-width: none;
	width: 100%;
	margin: 0 0 1.25rem;
	text-align: left;
}
.price-table-wrap .section-header p,
.price-table-wrap .price-table-intro p{
	max-width: none;
	width: 100%;
	margin-top: 0.5rem;
	margin-left: 0;
	margin-right: 0;
	line-height: 1.65;
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: none;
}
.price-table-title{
	font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important;
	margin-bottom: 0.35rem !important;
	max-width: none;
}
.price-table-scroll{
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-elevated);
	box-shadow: var(--shadow);
}
.price-table{
	width: 100%;
	border-collapse: collapse;
	min-width: 420px;
	font-size: 0.92rem;
}
.price-table th,
.price-table td{
	padding: 0.85rem 1.1rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
}
.price-table th{
	background: var(--bg-soft);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-soft);
}
.price-table tbody tr:hover{ background: var(--bg-soft); }
.price-table-unlimited td{
	background: color-mix(in srgb, var(--brand) 6%, var(--bg-elevated));
	border-bottom: none;
}
.price-table-note,
.price-footer-note{
	margin-top: 1rem;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--text-faint);
	text-align: center;
}
.price-muted{
	font-size: 0.8em;
	font-weight: 500;
	color: var(--text-faint);
}
.backuply-card .price-ribbon{
	background: linear-gradient(105deg, var(--brand), #6528F7);
}
.section-header.left{ margin-left: 0; text-align: left; }
.section-header.left p{ margin-left: 0; }
/* Legal documents (Privacy, Terms, Cookies): full readable width, document card */
.legal-page-header .lead{
	max-width: 46rem;
}
.legal-header-links{
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1.15rem;
	margin-top: 1.15rem;
}
.legal-header-links a{
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--brand, #1a3a8f);
	text-decoration: none;
}
.legal-header-links a:hover{ text-decoration: underline; }
.legal-section{
	padding-top: 1.5rem;
}
.legal-shell{
	max-width: min(72rem, 100%);
	margin: 0 auto;
}
.legal-doc,
.legal-content{
	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 3.5vw, 3rem);
	border-radius: var(--radius-lg, 1rem);
	border: 1px solid var(--border);
	background: var(--bg-elevated, var(--bg));
	box-shadow: var(--shadow, 0 10px 30px rgba(15, 23, 42, 0.06));
}
.legal-doc h2,
.legal-content h2{
	font-size: clamp(1.2rem, 2vw, 1.45rem);
	font-weight: 750;
	margin-top: 2.25rem;
	margin-bottom: 0.75rem;
	scroll-margin-top: 5.5rem;
	letter-spacing: -0.02em;
	color: var(--text);
}
.legal-doc h2:first-of-type,
.legal-content h2:first-of-type{ margin-top: 1.5rem; }
.legal-doc h3{
	font-size: 1.05rem;
	font-weight: 700;
	margin-top: 1.65rem;
	margin-bottom: 0.55rem;
	scroll-margin-top: 5.5rem;
	color: var(--text);
}
.legal-doc p,
.legal-doc li,
.legal-content p,
.legal-content li{
	color: var(--text-soft);
	line-height: 1.75;
	font-size: 0.98rem;
}
/* Justify only policy body copy - not TOC / meta / callouts */
.legal-doc > p:not(.legal-meta),
.legal-content > p:not(.legal-meta),
.legal-doc > ul:not(.legal-toc-list) > li,
.legal-content > ul:not(.legal-toc-list) > li,
.legal-doc > ol:not(.legal-toc-list) > li,
.legal-content > ol:not(.legal-toc-list) > li{
	text-align: justify;
	text-justify: inter-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}
.legal-doc p,
.legal-content p{ margin-bottom: 0.95rem; }
.legal-doc ul,
.legal-content ul{
	padding-left: 1.35rem;
	margin: 0 0 1.15rem;
}
.legal-doc li,
.legal-content li{
	list-style: disc;
	margin-bottom: 0.5rem;
}
/* Table of contents: always left (never justified) */
.legal-doc .legal-toc,
.legal-doc .legal-toc-title,
.legal-doc .legal-toc-list,
.legal-doc .legal-toc-list li,
.legal-doc .legal-toc-list a,
.legal-content .legal-toc,
.legal-content .legal-toc-list,
.legal-content .legal-toc-list li,
.legal-content .legal-toc-list a{
	text-align: left !important;
	text-justify: auto;
	-webkit-hyphens: manual;
	hyphens: manual;
}
.legal-doc .legal-toc-list{
	padding-left: 1.25rem;
	align-items: center;
}
.legal-doc h2,
.legal-doc h3,
.legal-content h2,
.legal-content h3,
.legal-callout{
	text-align: left;
	text-justify: auto;
	hyphens: manual;
}
.legal-meta{
	text-align: left;
	text-justify: auto;
	hyphens: manual;
	font-size: 0.9rem;
	color: var(--text-faint);
	margin: 0 0 1.5rem;
	padding-bottom: 1.15rem;
	border-bottom: 1px solid var(--border);
}
.legal-callout{
	padding: 1rem 1.15rem;
	margin: 0 0 2rem;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--bg-soft);
	font-size: 0.92rem !important;
	line-height: 1.7 !important;
}
.legal-toc{
	padding: 1.35rem 1.5rem;
	margin: 0 0 2rem;
	border-radius: var(--radius-md, 12px);
	border: 1px solid var(--border);
	background: var(--bg-soft);
}
.legal-toc-title{
	margin: 0 0 0.85rem !important;
	font-size: 1.05rem !important;
	font-weight: 700;
	color: var(--text);
}
.legal-toc-list{
	margin: 0;
	padding-left: 1.25rem;
	columns: 1;
}
@media (min-width: 720px){
	.legal-toc-list{ columns: 2; column-gap: 2rem; }
}
@media (min-width: 1100px){
	.legal-toc-list{ columns: 3; column-gap: 1.75rem; }
}
.legal-toc-list li{
	list-style: decimal;
	margin-bottom: 0.4rem;
	break-inside: avoid;
	font-size: 0.92rem;
}
.legal-toc-list a{
	color: var(--brand, #1a3a8f);
	text-decoration: none;
	font-weight: 500;
}
.legal-toc-list a:hover{ text-decoration: underline; }
.legal-doc .table-scroll{
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 1.25rem;
}
.legal-table{
	width: 100%;
	min-width: 36rem;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.legal-table th,
.legal-table td{
	border: 1px solid var(--border);
	padding: 0.7rem 0.85rem;
	text-align: left;
	vertical-align: top;
	color: var(--text-soft);
	line-height: 1.55;
	word-wrap: break-word;
}
.legal-table th{
	background: var(--bg-soft);
	color: var(--text);
	font-weight: 700;
	font-size: 0.82rem;
}
.legal-table code{
	font-size: 0.84em;
}
.cookie-pref-panel{
	margin: 0 0 1.35rem;
	padding: 1.15rem 1.25rem;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--bg-soft);
}
.cookie-pref-intro{
	margin: 0 0 0.5rem !important;
	font-size: 0.92rem !important;
}
.cookie-pref-status{
	margin: 0 0 0.9rem !important;
	font-weight: 600;
	color: var(--text) !important;
	font-size: 0.95rem !important;
}
.cookie-pref-actions{
	margin-bottom: 0.75rem;
}
.email-obf{
	word-break: break-word;
}
/* ==========================================================================
	 Contact / Support page - enterprise layout
	 ========================================================================== */

/* Header: copy + restrained visual */
.contact-page-header{
	padding-bottom: clamp(1.75rem, 3vw, 2.25rem);
}
.contact-header-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	align-items: center;
}
@media (min-width: 960px){
	.contact-header-grid{
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: 2.5rem 3rem;
	}
}
.contact-header-copy .lead{
	margin-bottom: 1.25rem;
}
.contact-header-actions{
	margin-top: 0.25rem;
}
.contact-header-visual{
	margin: 0;
	max-width: 22rem;
	justify-self: start;
	border-radius: 0.9rem;
	overflow: hidden;
	border: 1px solid var(--border);
	background: #050d1a;
	box-shadow:
		0 16px 40px rgba(15, 23, 42, 0.12),
		0 0 0 1px rgba(26, 58, 143, 0.06);
}
@media (min-width: 960px){
	.contact-header-visual{
		max-width: 100%;
		justify-self: end;
	}
}
.contact-header-visual img{
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center center;
	vertical-align: middle;
}

/* Trust strip */
.contact-trust{
	border-bottom: 1px solid var(--border);
	background: var(--bg);
}
.contact-trust-list{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 800px){
	.contact-trust-list{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.contact-trust-list li{
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1.15rem 1.1rem;
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
@media (min-width: 800px){
	.contact-trust-list li{ border-bottom: 0; }
	.contact-trust-list li:last-child{ border-right: 0; }
}
@media (max-width: 799px){
	.contact-trust-list li:nth-child(2n){ border-right: 0; }
	.contact-trust-list li:nth-last-child(-n+2){ border-bottom: 0; }
}
.contact-trust-list strong{
	font-size: 0.98rem;
	font-weight: 750;
	letter-spacing: -0.02em;
	color: var(--text);
}
.contact-trust-list span{
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--text-faint);
}

/* Primary support / sales cards */
.contact-primary-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.15rem;
	max-width: 60rem;
	margin: 0 auto;
}
@media (min-width: 860px){
	.contact-primary-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; }
}
.contact-primary{
	display: flex;
	flex-direction: column;
	padding: 1.35rem 1.3rem 1.25rem;
	border-radius: 1rem;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	box-shadow: var(--shadow, 0 8px 24px rgba(15, 23, 42, 0.04));
}
.contact-primary-support{
	border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
	background:
		linear-gradient(165deg, color-mix(in srgb, var(--brand) 7%, var(--bg-elevated)), var(--bg-elevated));
}
.contact-primary-top{
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	margin-bottom: 0.95rem;
}
.contact-primary-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 12px;
	background: color-mix(in srgb, var(--brand) 12%, var(--bg-soft));
	color: var(--brand);
	border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
}
.contact-primary-icon.accent{
	background: color-mix(in srgb, #6528F7 12%, var(--bg-soft));
	color: #6528F7;
	border-color: color-mix(in srgb, #6528F7 22%, var(--border));
}
.contact-primary-icon .icon,
.contact-primary-icon svg{
	width: 1.25rem;
	height: 1.25rem;
}
.contact-primary-label{
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.68rem;
	font-weight: 750;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-faint);
}
.contact-primary h3{
	margin: 0;
	font-size: 1.25rem;
	font-weight: 750;
	letter-spacing: -0.02em;
}
.contact-primary > p{
	margin: 0 0 0.85rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--text-soft);
}
.contact-primary-points{
	list-style: none;
	margin: 0 0 1.1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.contact-primary-points li{
	position: relative;
	padding-left: 1.15rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--text);
	line-height: 1.4;
}
.contact-primary-points li::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0.45rem;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 999px;
	background: var(--brand);
	opacity: 0.75;
}
.contact-primary-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: auto;
}

/* Tighter section headers on contact */
.contact-section-tight{
	margin-bottom: 1.25rem;
}
.contact-section-tight h2{
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}
.contact-section-tight p{ display: none; }

/* Evaluate: demos + trial */
.contact-eval-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	max-width: 52rem;
	margin: 0 auto;
}
@media (min-width: 720px){
	.contact-eval-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.contact-eval{
	padding: 1.25rem 1.25rem 1.15rem;
	border-radius: 1rem;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	box-shadow: var(--shadow);
}
.contact-eval-featured{
	border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
	background:
		linear-gradient(165deg, color-mix(in srgb, var(--brand) 6%, var(--bg-elevated)), var(--bg-elevated));
}
.contact-eval-badge{
	display: inline-flex;
	margin-bottom: 0.5rem;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-soft);
	background: var(--bg-soft);
	border: 1px solid var(--border);
}
.contact-eval-badge-brand{
	color: #fff;
	background: linear-gradient(105deg, #1a3a8f, #3d5fce);
	border-color: transparent;
}
.contact-eval h3{
	margin: 0 0 0.35rem;
	font-size: 1.1rem;
	font-weight: 750;
	letter-spacing: -0.02em;
}
.contact-eval p{
	margin: 0 0 0.95rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--text-soft);
}

/* Office + large map */
.contact-office-layout{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	align-items: stretch;
}
@media (min-width: 768px){
	.contact-office-layout{
		grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.45fr);
		gap: 1.35rem;
		min-height: 420px;
	}
}
.contact-office-info{
	padding: 1.5rem 1.4rem;
	border-radius: 1rem;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
}
.contact-office-product{
	margin: 0 0 0.85rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-soft);
}
.contact-office-address{
	margin: 0 0 0.85rem;
	font-style: normal;
	line-height: 1.7;
	color: var(--text);
	font-size: 0.95rem;
}
.contact-office-note{
	margin: 0 0 1rem;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--text-faint);
}
.contact-office-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	list-style: none;
	margin: auto 0 0;
	padding: 0.9rem 0 0;
	border-top: 1px solid var(--border);
}
.contact-office-meta a{
	font-size: 0.88rem;
	font-weight: 650;
	color: var(--brand);
	text-decoration: none;
}
.contact-office-meta a:hover{ text-decoration: underline; }

.contact-map{
	position: relative;
	min-height: 360px;
	border-radius: 1rem;
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--bg-soft);
	box-shadow: var(--shadow);
}
.contact-map iframe{
	display: block;
	width: 100%;
	height: 100%;
	min-height: 360px;
	border: 0;
}
@media (min-width: 768px){
	.contact-map{
		min-height: 420px;
	}
	.contact-map iframe{
		min-height: 420px;
		height: 100%;
		position: absolute;
		inset: 0;
	}
}
@media (min-width: 1100px){
	.contact-office-layout{ min-height: 460px; }
	.contact-map,
	.contact-map iframe{ min-height: 460px; }
}

/* Legacy simple card (other pages if any) */
.contact-card{
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
}
.contact-card h3{ margin-bottom: 0.5rem; }
.steps{ counter-reset: step; }
.step-item{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	margin-bottom: 1.25rem;
}
.step-num{
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: var(--brand-soft);
	color: var(--brand);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.95rem;
}
.feature-media{
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border);
	background: #070d18;
}
.feature-media img{ width: 100%; height: auto; display: block; }
.tag-list{ display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badge{
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.7rem;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-soft);
}
.trust-logos{
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;
	justify-content: center;
	opacity: 0.85;
}
.trust-logos span{
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--text-faint);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ==========================================================================
	 OS Templates catalog
	 ========================================================================== */
.os-stats-section{ padding: 1.75rem 0; }
.os-stats{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.85rem;
}
@media (min-width: 800px){
	.os-stats{ grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}
.os-stat{
	padding: 1.15rem 1.25rem;
	border-radius: var(--radius-md, 12px);
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	box-shadow: var(--shadow, 0 8px 24px rgba(15,23,42,0.05));
	text-align: center;
}
.os-stat-value{
	display: block;
	font-size: clamp(1.5rem, 3vw, 1.85rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--text);
	line-height: 1.1;
}
.os-stat-label{
	display: block;
	margin-top: 0.35rem;
	font-size: 0.82rem;
	color: var(--text-faint);
	font-weight: 500;
}
.os-catalog-section{ padding: 2.5rem 0 4rem; }
.os-toolbar{
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.25rem;
}
.os-search-wrap{
	position: relative;
	flex: 1;
}
.os-search-icon{
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-faint);
	pointer-events: none;
	display: flex;
}
.os-search{
	width: 100%;
	padding: 0.9rem 1rem 0.9rem 2.75rem;
	border-radius: 999px;
	border: 1px solid var(--border-strong, var(--border));
	background: var(--bg-elevated);
	color: var(--text);
	font: inherit;
	font-size: 0.95rem;
	outline: none;
	box-shadow: var(--shadow);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.os-search:focus{
	border-color: var(--brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.os-filters{
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 0.85rem;
	align-items: flex-end;
}
.os-filter{
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-faint);
	letter-spacing: 0.02em;
}
.os-filter-check{
	flex-direction: row;
	align-items: center;
	gap: 0.45rem;
	padding-bottom: 0.55rem;
	font-size: 0.85rem;
	color: var(--text-soft);
	cursor: pointer;
}
.os-filter-check input{
	width: 1rem;
	height: 1rem;
	accent-color: var(--brand);
	cursor: pointer;
}
.os-select{
	min-width: 10.5rem;
	padding: 0.65rem 2rem 0.65rem 0.85rem;
	border-radius: 10px;
	border: 1px solid var(--border-strong, var(--border));
	background: var(--bg-elevated);
	color: var(--text);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
}
.os-table-card{
	border-radius: var(--radius-lg, 1rem);
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	box-shadow: var(--shadow, 0 10px 30px rgba(15,23,42,0.06));
	overflow: hidden;
}
.os-table-scroll{
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.os-table{
	width: 100%;
	min-width: 680px;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.os-table thead th{
	text-align: left;
	padding: 0.85rem 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-faint);
	background: var(--bg-soft);
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}
.os-table tbody td{
	padding: 0.9rem 1rem;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
	color: var(--text-soft);
}
.os-table tbody tr:last-child td{ border-bottom: none; }
.os-table tbody tr:hover td{
	background: color-mix(in srgb, var(--brand) 5%, transparent);
}
.os-type-cell{
	display: flex;
	align-items: center;
	gap: 0.7rem;
}
.os-type-icon{
	width: 28px;
	height: 28px;
	border-radius: 8px;
	object-fit: contain;
	background: var(--bg-soft);
	border: 1px solid var(--border);
	padding: 2px;
	flex-shrink: 0;
}
.os-type-name{
	font-weight: 600;
	color: var(--text);
	font-size: 0.9rem;
}
.os-pill{
	display: inline-block;
	margin-left: 0.25rem;
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	background: color-mix(in srgb, var(--brand) 14%, transparent);
	color: var(--brand);
	vertical-align: middle;
}
.os-virt-badge{
	display: inline-flex;
	align-items: center;
	padding: 0.28rem 0.55rem;
	border-radius: 8px;
	font-size: 0.78rem;
	font-weight: 650;
	border: 1px solid var(--border);
	background: var(--bg-soft);
	color: var(--text);
	white-space: nowrap;
}
.os-name-cell{
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}
.os-name{
	font-weight: 650;
	color: var(--text);
	word-break: break-word;
}
.os-file{
	font-size: 0.78rem;
	color: var(--text-faint);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	word-break: break-all;
}
.os-size{
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.os-col-action{ width: 5.5rem; text-align: right; }
.os-row-link{
	font-size: 0.82rem;
	font-weight: 650;
	color: var(--brand);
	text-decoration: none;
}
.os-row-link:hover{ text-decoration: underline; }
.os-empty{
	margin: 0;
	padding: 2rem 1.25rem;
	text-align: center;
	color: var(--text-soft);
	font-size: 0.95rem;
}
.os-footnote{
	margin: 0;
	padding: 0.85rem 1.15rem 1.1rem;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--text-faint);
	border-top: 1px solid var(--border);
	background: var(--bg-soft);
}
.os-loading-row td{
	text-align: center;
	color: var(--text-faint);
	padding: 2rem 1rem !important;
}
.btn-sm{
	padding: 0.55rem 0.9rem;
	font-size: 0.85rem;
}

/* OS templates pagination */
.os-pager-bar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	padding: 0.85rem 1.15rem;
	border-top: 1px solid var(--border);
	background: var(--bg-elevated);
}
.os-page-meta{
	margin: 0;
	font-size: 0.85rem;
	color: var(--text-soft);
	font-weight: 500;
}
.os-pagination{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}
.os-page-btn{
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.55rem;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--bg-soft);
	color: var(--text);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 650;
	cursor: pointer;
	transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.os-page-btn:hover:not(:disabled):not(.is-active){
	border-color: var(--brand);
	color: var(--brand);
}
.os-page-btn.is-active{
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}
.os-page-btn:disabled{
	opacity: 0.45;
	cursor: not-allowed;
}
.os-page-ellipsis{
	padding: 0 0.2rem;
	color: var(--text-faint);
	font-weight: 600;
}
.os-table{ min-width: 560px; }

.text-justify{
	text-align: justify !important;
	text-justify: inter-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* ==========================================================================
   Related / More features - compact cards; only the image flips on hover
   Title bar stays fixed. Hover image → short description on the reverse face.
   Prototype first on features/vpc.html
   ========================================================================== */
.related-features{
	background: var(--bg-soft);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
}
.related-features-head{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	margin-bottom: 1.15rem;
}
.related-features-copy{
	max-width: 36rem;
}
.related-features-copy .eyebrow{
	margin-bottom: 0.25rem;
}
.related-features-copy h2{
	font-size: clamp(1.2rem, 2.2vw, 1.45rem);
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.02em;
}
.related-features-copy p{ display: none; }
.related-features-all{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.9rem;
	font-size: 0.875rem;
}
.related-features-all .icon{
	width: 15px;
	height: 15px;
}
.related-features-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem;
}
@media (min-width: 640px){
	.related-features-grid{
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px){
	.related-features-grid{
		grid-template-columns: repeat(4, 1fr);
		gap: 1rem;
	}
}

/* Static card shell - only the media block flips */
.related-feature-card{
	display: flex;
	flex-direction: column;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow);
	color: inherit;
	text-decoration: none;
	outline: none;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}
.related-feature-card:hover,
.related-feature-card:focus-visible{
	border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
	box-shadow: var(--shadow-md);
	color: inherit;
}
.related-feature-card:focus-visible{
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent), var(--shadow-md);
}

/* Image area only - full card width; slightly taller so 16:9 doesn’t leave side gap */
.related-feature-media{
	display: block;
	width: 100%;
	perspective: 900px;
	background: #070d18;
	border-bottom: 1px solid var(--border);
	overflow: hidden;
}
.related-feature-flip{
	position: relative;
	display: block;
	width: 100%;
	height: 138px;
	transform-style: preserve-3d;
	transition: transform 0.4s ease;
}
@media (min-width: 1024px){
	.related-feature-flip{ height: 148px; }
}
.related-feature-card:hover .related-feature-flip,
.related-feature-card:focus-within .related-feature-flip{
	transform: rotateY(180deg);
}
.related-feature-face{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.related-feature-front{
	transform: rotateY(0deg);
}
.related-feature-front img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.related-feature-back{
	transform: rotateY(180deg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 0.85rem;
	background: linear-gradient(160deg, #0b1b3a 0%, #132a52 100%);
	color: #fff;
}
.related-feature-desc{
	display: block;
	font-size: 0.78rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.9);
	text-align: center;
	margin: 0;
}

/* Fixed label under image - never flips */
.related-feature-label{
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.55rem 0.75rem 0.65rem;
	background: var(--bg-elevated);
	flex-shrink: 0;
}
.related-feature-tag{
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--brand);
	line-height: 1.2;
}
.related-feature-tag .icon{
	width: 12px;
	height: 12px;
	stroke-width: 2.25;
	flex-shrink: 0;
}
.related-feature-title{
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--text);
}
.related-feature-link{
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: 0.25rem;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--brand);
}
.related-feature-link .icon{
	width: 13px;
	height: 13px;
}

/* Touch: no flip - keep image + title only */
@media (hover: none){
	.related-feature-card:hover .related-feature-flip,
	.related-feature-card:focus-within .related-feature-flip{
		transform: none;
	}
	.related-feature-back{ display: none; }
}

/* Reduced motion: fade description instead of 3D flip */
@media (prefers-reduced-motion: reduce){
	.related-feature-flip{
		transition: none;
		transform: none !important;
	}
	.related-feature-face{
		position: absolute;
		inset: 0;
	}
	.related-feature-back{
		opacity: 0;
		transform: none;
		transition: opacity 0.2s ease;
	}
	.related-feature-card:hover .related-feature-back,
	.related-feature-card:focus-within .related-feature-back{
		opacity: 1;
	}
}

.feature-detail .related-feature-desc,
.feature-detail .related-features-copy p{
	text-align: left;
	text-justify: auto;
	hyphens: manual;
}
.feature-detail .related-feature-desc{
	text-align: center;
}

/* Feature detail pages: multi-line body copy looks even when justified */
.feature-detail .section-header p,
.feature-detail .feature-row p.lead,
.feature-detail .feature-copy .lead,
.feature-detail .virt-callout-card > p,
.feature-detail .virt-platform-card > p,
.feature-detail .virt-steps .card > p,
.feature-detail .virt-os-logos-note,
.feature-detail #templates p.lead,
.feature-detail #templates .virt-callout-card p{
	text-align: justify;
	text-justify: inter-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}
/* Keep short UI rows left-aligned, but ensure cta-banner content remains centered */
.feature-detail .check-list,
.feature-detail .check-list li,
.feature-detail .virt-mini-list,
.feature-detail .virt-mini-list li,
.feature-detail .eyebrow,
.feature-detail h1,
.feature-detail h2,
.feature-detail h3{
	text-align: left;
	text-justify: auto;
	hyphens: manual;
}
.cta-banner,
.cta-banner h2,
.cta-banner p,
.feature-detail .cta-banner h2,
.feature-detail .cta-banner p {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.feature-detail #templates .feature-copy .lead,
.feature-detail #templates .virt-callout-card > p.text-justify,
.feature-detail #templates .virt-os-logos-note{
	text-align: justify;
	text-justify: inter-word;
}
/* Virtualization feature detail page */
.virt-steps .card{ position: relative; padding-top: 1.5rem; }
.virt-step-num{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--brand) 14%, transparent);
	color: var(--brand);
	font-weight: 800;
	font-size: 0.9rem;
	margin-bottom: 0.75rem;
}
/* Platform cards: equal body + bullets pinned so row 1 and row 2 align the same */
.virt-platform-card{
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100%;
}
.virt-platform-card.card-with-media{
	padding: 0;
	overflow: hidden;
}
.virt-platform-card.card-with-media .card-body{
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.15rem 1.25rem 1.35rem;
	min-height: 0;
}
.virt-platform-card .card-icon{
	flex-shrink: 0;
}
.virt-platform-card h3{
	margin-top: 0.35rem;
	margin-bottom: 0.55rem;
	flex-shrink: 0;
}
.virt-platform-card > p,
.virt-platform-card .card-body > p{
	flex: 1 1 auto;
	margin: 0 !important;
	/* Even body height in a 3-col row so bullet blocks share one baseline */
	min-height: 6.75em;
}
@media (max-width: 899px){
	.virt-platform-card > p,
	.virt-platform-card .card-body > p{ min-height: 0; }
}
.virt-platform-card .card-thumb img{
	transition: transform 280ms ease;
}
.virt-platform-card:hover .card-thumb img{
	transform: scale(1.03);
}
.virt-mini-list{
	margin: 1rem 0 0;
	padding: 0.9rem 0 0 1.15rem;
	border-top: 1px solid var(--border);
	color: var(--text-soft);
	font-size: 0.88rem;
	line-height: 1.5;
	list-style: disc;
	list-style-position: outside;
	flex-shrink: 0;
	width: 100%;
	box-sizing: border-box;
}
.virt-mini-list li{
	margin: 0 0 0.45rem;
	padding-left: 0.15rem;
	list-style: disc;
	text-align: left;
	text-justify: auto;
	hyphens: manual;
}
.virt-mini-list li:last-child{
	margin-bottom: 0;
}
/* Grid cells stretch so all 6 platform cards share equal card height per row */
.feature-detail .grid.grid-3 > .virt-platform-card{
	align-self: stretch;
}
.virt-badge-row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin-top: 1.75rem;
	width: 100%;
}
.virt-badge-row .badge {
	text-align: center;
	padding: 0.65rem 0.5rem;
	font-size: 0.88rem;
	font-weight: 600;
	border-radius: var(--radius-md, 0.6rem);
	background: #ffffff;
	border: 1px solid var(--border);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
[data-theme="dark"] .virt-badge-row .badge {
	background: var(--bg-elevated, #111b2e);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.virt-badge-row .badge:hover {
	border-color: var(--brand);
	color: var(--brand);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
@media (max-width: 992px) {
	.virt-badge-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
	}
	.virt-badge-row .badge {
		padding: 0.45rem 0.85rem;
	}
}
.virt-callout-card{
	height: 100%;
	background: var(--bg-soft);
}
.virt-callout-card h3{ margin-top: 0; }
.virt-callout-card p{ margin-bottom: 0.85rem; }
.virt-callout-card p:last-child{ margin-bottom: 0; }
.virt-cap-table{ min-width: 640px; }
.virt-cap-table td,
.virt-cap-table th{ vertical-align: top; }

/* OS logo strip on virtualization "per-virt" card */
.virt-os-logos{
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: 1rem 0 0.85rem;
	align-items: center;
	justify-content: center;
}
.virt-os-logo{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--bg-elevated, var(--bg));
	box-shadow: var(--shadow, 0 4px 12px rgba(15,23,42,0.05));
	transition: border-color 160ms ease, transform 160ms ease;
}
.virt-os-logo:hover{
	border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
	transform: translateY(-1px);
}
.virt-os-logo img{
	width: 1.65rem;
	height: 1.65rem;
	object-fit: contain;
	display: block;
}
.virt-os-logos-note{
	margin: 0 !important;
	font-size: 0.88rem !important;
	line-height: 1.55 !important;
	color: var(--text-faint) !important;
}

/* Spec rows: tick | title | - | detail (aligned like a small table) */
.feature-spec-list{
	list-style: none;
	margin: 1.15rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.feature-spec-list li{
	display: grid;
	grid-template-columns: 1.25rem minmax(8.5rem, 11.5rem) 0.75rem minmax(0, 1fr);
	column-gap: 0.55rem;
	align-items: start;
	color: var(--text-soft);
	font-size: 0.95rem;
	line-height: 1.5;
}
.feature-spec-list .icon{
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.18rem;
	color: var(--accent);
	flex-shrink: 0;
}
.feature-spec-title{
	font-weight: 700;
	color: var(--text);
	line-height: 1.45;
	/* Keep title column clean; wrap only if very long */
	word-break: break-word;
}
.feature-spec-sep{
	color: var(--text-faint);
	font-weight: 600;
	text-align: center;
	line-height: 1.45;
	user-select: none;
}
.feature-spec-desc{
	color: var(--text-soft);
	line-height: 1.5;
	text-align: left;
	min-width: 0;
}
@media (max-width: 520px){
	.feature-spec-list li{
		grid-template-columns: 1.25rem minmax(0, 1fr);
		row-gap: 0.15rem;
	}
	.feature-spec-sep{ display: none; }
	.feature-spec-title{ grid-column: 2; }
	.feature-spec-desc{
		grid-column: 2;
		padding-left: 0;
	}
}

/* Premium Spec Table Card with White Background & Tickmarks */
.spec-table-card {
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 0.75rem);
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
	overflow: hidden;
	margin-top: 1.25rem;
}
[data-theme="dark"] .spec-table-card {
	background: var(--bg-elevated, #111b2e);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.spec-table-card .os-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	text-align: left;
}
.spec-table thead th {
	background: var(--bg-soft, #f8fafc);
	padding: 0.75rem 1rem;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-faint);
	border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .spec-table thead th {
	background: rgba(255, 255, 255, 0.03);
}
.spec-table tbody td {
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
}
.spec-table tbody tr:last-child td {
	border-bottom: none;
}
.spec-table tbody tr:hover td {
	background: color-mix(in srgb, var(--brand) 4%, transparent);
}
.spec-check-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent, #0d9b8c) 14%, transparent);
	color: var(--accent, #0d9b8c);
}
.spec-check-badge .icon {
	width: 14px;
	height: 14px;
	stroke-width: 2.5;
}
.spec-table .spec-name {
	font-weight: 700;
	color: var(--text);
	white-space: nowrap;
}
.spec-table .spec-desc {
	color: var(--text-soft);
	line-height: 1.45;
}

/* Day-to-day Operations Showcase & Sandwich Layout (3 Cards - Center Image - 3 Cards) */
.virt-lifecycle-sandwich-grid {
	display: grid;
	grid-template-columns: 1fr 1.25fr 1fr;
	gap: 1.5rem;
	align-items: center;
	margin-top: 2.25rem;
}
.virt-lifecycle-col {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
}
.virt-lifecycle-center-col {
	display: flex;
	justify-content: center;
	align-items: center;
}
.virt-lifecycle-center-img {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	border-radius: var(--radius-md, 0.85rem);
	overflow: hidden;
	border: 1px solid var(--border);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
.virt-lifecycle-center-img img {
	width: 100%;
	height: auto;
	display: block;
}

/* Wide screen refinement (>= 1400px) */
@media (min-width: 1400px) {
	.virt-lifecycle-sandwich-grid {
		gap: 2rem;
		grid-template-columns: 1fr 1.3fr 1fr;
	}
	.virt-lifecycle-center-img {
		max-width: 580px;
	}
}

/* Tablet refinement (640px to 992px) */
@media (max-width: 992px) {
	.virt-lifecycle-sandwich-grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
	.virt-lifecycle-center-col {
		order: -1;
		margin-bottom: 0.5rem;
	}
	.virt-lifecycle-center-img {
		max-width: 600px;
	}
	.virt-lifecycle-col {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 1rem;
	}
}

/* Mobile refinement (< 640px) */
@media (max-width: 640px) {
	.virt-lifecycle-sandwich-grid {
		margin-top: 1.5rem;
		gap: 1.25rem;
	}
	.virt-lifecycle-col {
		grid-template-columns: 1fr;
		gap: 0.85rem;
	}
	.virt-spec-card {
		padding: 1.1rem 1.15rem;
	}
	.virt-spec-card-head h3 {
		font-size: 1.02rem;
	}
	.virt-spec-card p {
		font-size: 0.88rem;
	}
}
.virt-spec-card {
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 0.85rem);
	padding: 1.35rem 1.4rem;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
[data-theme="dark"] .virt-spec-card {
	background: var(--bg-elevated, #111b2e);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.virt-spec-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1), 0 4px 10px rgba(15, 23, 42, 0.05);
	border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
}
.virt-spec-card-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.virt-spec-card-head h3 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--text);
}
.virt-spec-card p {
	margin: 0;
	font-size: 0.93rem;
	color: var(--text-soft);
	line-height: 1.55;
}

/* Supported Platforms Showcase Cards */
.platform-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 1.75rem;
}
.platform-showcase-card {
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 0.85rem);
	padding: 1.25rem 1.35rem;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
[data-theme="dark"] .platform-showcase-card {
	background: var(--bg-elevated, #111b2e);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.platform-showcase-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
	border-color: color-mix(in srgb, var(--accent, #0d9b8c) 40%, var(--border));
}
.platform-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.platform-card-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.platform-card-title h3 {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--text);
}
.platform-card-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--brand) 10%, transparent);
	color: var(--brand);
	display: flex;
	align-items: center;
	justify-content: center;
}
.platform-card-icon.accent {
	background: color-mix(in srgb, var(--accent, #0d9b8c) 12%, transparent);
	color: var(--accent, #0d9b8c);
}
.platform-type-pill {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.2rem 0.55rem;
	border-radius: 20px;
	background: var(--bg-soft);
	color: var(--text-soft);
	border: 1px solid var(--border);
}
.platform-features-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: 0.2rem;
}
.platform-tag-chip {
	font-size: 0.78rem;
	font-weight: 500;
	padding: 0.22rem 0.65rem;
	border-radius: 6px;
	background: color-mix(in srgb, var(--brand) 6%, var(--bg-soft));
	color: var(--text-soft);
	border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
}

@media (max-width: 992px) {
	.platform-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.platform-card-grid {
		grid-template-columns: 1fr;
	}
}

/* ─── Feature teaser (e.g. Virtualization → Docker funnel) ─── */
.feature-teaser-badge{
	display: inline-flex;
	align-items: center;
	width: fit-content;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	color: #fff;
	background: linear-gradient(105deg, var(--brand), var(--accent));
	margin-bottom: 0.65rem;
}
.feature-teaser.addon-teaser{
	background:
		radial-gradient(ellipse 80% 70% at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
		radial-gradient(ellipse 60% 50% at 0% 100%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 50%),
		var(--bg-elevated, var(--bg-soft));
	border-color: color-mix(in srgb, var(--brand) 20%, var(--border));
}
.virt-mini-link{
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.75rem;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--brand);
	text-decoration: none;
}
.virt-mini-link:hover{ text-decoration: underline; }
.virt-mini-link .icon{ width: 14px; height: 14px; }

/* ─── Premium add-on teaser (Storage → Backuply funnel) ─── */
.addon-teaser{
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 2rem 2.5rem;
	align-items: center;
	padding: 1.75rem 1.75rem 1.75rem 2rem;
	border-radius: 1.15rem;
	border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
	background:
		radial-gradient(ellipse 80% 70% at 100% 0%, color-mix(in srgb, #6528F7 12%, transparent), transparent 55%),
		radial-gradient(ellipse 60% 50% at 0% 100%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 50%),
		var(--bg-elevated, var(--bg-soft));
	box-shadow: 0 12px 40px color-mix(in srgb, var(--brand) 8%, transparent);
}
.addon-teaser-badge{
	display: inline-flex;
	align-items: center;
	width: fit-content;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	color: #fff;
	background: linear-gradient(105deg, var(--brand), #6528F7);
	margin-bottom: 0.65rem;
}
.addon-teaser-copy .eyebrow{ margin-bottom: 0.35rem; }
.addon-teaser-copy h2{ margin: 0 0 0.65rem; max-width: 28ch; }
.addon-teaser-copy .lead{ margin-bottom: 0.65rem; max-width: 46ch; }
.addon-teaser-hint{
	font-size: 0.95rem;
	color: var(--text-soft);
	max-width: 48ch;
	margin: 0;
}
.addon-teaser-media{
	margin: 0;
}
.addon-teaser-media img{
	border-radius: 0.85rem;
	border: 1px solid var(--border);
	box-shadow: 0 10px 28px rgba(11, 27, 58, 0.12);
}
.addon-teaser-media figcaption{
	margin-top: 0.55rem;
	font-size: 0.82rem;
	color: var(--text-faint);
	text-align: center;
}
.addon-teaser-pricing{
	align-items: stretch;
}
.addon-teaser-price-card{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.5rem 1.35rem;
	border-radius: 1rem;
	border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
	background: var(--bg, #fff);
	text-align: center;
}
.addon-teaser-price-amount{
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.15rem;
	flex-wrap: wrap;
}
.addon-teaser-price-card .price-num{
	font-size: 2.75rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--text);
	line-height: 1;
}
.addon-teaser-price-card .price-currency{
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--text-soft);
}
.addon-teaser-price-card .price-period{
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-faint);
	margin-left: 0.25rem;
}
.addon-teaser-price-card p{
	font-size: 0.9rem;
	color: var(--text-soft);
	margin: 0;
}
[data-theme="dark"] .addon-teaser-price-card{
	background: color-mix(in srgb, var(--bg-elevated, #111) 90%, #1a3a8f 10%);
}
[data-theme="dark"] .addon-teaser-media img{
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* Backuply how-it-works journey */
.backuply-journey{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
.backuply-step{
	position: relative;
	padding-top: 1.35rem;
}
.backuply-step-num{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	margin-bottom: 0.75rem;
	font-weight: 800;
	font-size: 0.9rem;
	color: #fff;
	background: linear-gradient(135deg, var(--brand), #6528F7);
	box-shadow: 0 4px 14px color-mix(in srgb, #6528F7 35%, transparent);
}
.backuply-step h3{ margin-top: 0; }
.backuply-compare-card{
	position: relative;
}
.backuply-compare-featured{
	border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
	box-shadow: 0 10px 32px color-mix(in srgb, var(--brand) 10%, transparent);
}
.backuply-compare-featured .addon-teaser-badge{
	position: absolute;
	top: 1rem;
	right: 1rem;
	margin: 0;
}


/* Backuply Engine Header Logo & 1-Line Minimal Cards Layout */
.backuply-header-logo-badge img {
	filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--brand) 25%, transparent));
}

.backuply-cards-row {
	margin-top: 1.75rem;
}

.backuply-inline-card {
	cursor: pointer;
	border: 1px solid var(--border);
	background: var(--card-bg);
	border-radius: 12px;
	padding: 1.15rem 1.35rem;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	display: flex;
	align-items: center;
}

.backuply-inline-card:hover,
.backuply-inline-card:focus-visible {
	transform: translateY(-3px);
	border-color: var(--brand);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 16%, transparent);
	outline: none;
}

.backuply-inline-content {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
}

.backuply-inline-content .card-icon {
	margin-bottom: 0;
	flex-shrink: 0;
}

.backuply-inline-content h3 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
	color: var(--text);
	flex-grow: 1;
	line-height: 1.25;
}

.backuply-chevron {
	color: var(--brand);
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.backuply-inline-card:hover .backuply-chevron {
	transform: translateX(3px);
}

/* Modal CSS (No Image, Compact, Crisp 14px Border Radius) */
.backuply-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.backuply-modal.is-active {
	opacity: 1;
	pointer-events: auto;
}

.backuply-modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(10, 14, 26, 0.75);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Modal CSS (Inline Image Grid, No-Scroll, Steady Perfectly Centered Close Button) */
.backuply-crisp-modal {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: 820px;
	max-height: 90vh;
	overflow: hidden;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	transform: scale(0.96) translateY(8px);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.backuply-modal.is-active .backuply-crisp-modal {
	transform: scale(1) translateY(0);
}

/* Steady, perfectly centered Close X button */
.backuply-modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 15;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.08);
	border: 1px solid var(--border);
	color: var(--text);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0;
	margin: 0;
	transform: none !important;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.backuply-modal-close:hover {
	background: var(--brand);
	color: #fff;
	border-color: var(--brand);
	transform: none !important;
}

.backuply-modal-body-clean {
	padding: 1rem 1.25rem;
}

.backuply-modal-top-bar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.2rem;
}

.backuply-modal-badge {
	display: inline-block;
	padding: 0.22rem 0.65rem;
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, var(--brand), #6528F7);
	border-radius: 999px;
}

/* Inline Grid: Checklist on left, compact feature preview image on right */
.backuply-modal-inline-grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 1.25rem;
	align-items: center;
	margin-top: 0.35rem;
}

.backuply-modal-inline-media {
	background: color-mix(in srgb, var(--brand) 4%, #000);
	padding: 0.6rem;
	border-radius: 10px;
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
}

.backuply-modal-inline-media img {
	width: 100%;
	height: auto;
	max-height: 140px;
	object-fit: contain;
	border-radius: 6px;
	display: block;
}

.backuply-modal-checklist-wrapper {
	margin-top: 0.85rem;
}

.backuply-modal-checklist-wrapper h4 {
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
}

.backuply-modal-spec-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 1rem;
	padding-top: 0.85rem;
	border-top: 1px dashed var(--border);
}

.backuply-modal-spec-item .spec-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
}

.backuply-modal-spec-item .spec-val {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--text);
	margin-top: 0.15rem;
}

/* Dark mode compatibility */
[data-theme="dark"] .backuply-inline-card {
	background: #141824;
	border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .backuply-inline-card:hover {
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
	border-color: var(--brand);
}

[data-theme="dark"] .backuply-crisp-modal {
	background: #121724;
	border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .backuply-modal-close {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

[data-theme="dark"] .backuply-modal-inline-media {
	background: #0d111a;
	border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
	.backuply-modal-inline-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.backuply-modal-body-clean {
		padding: 1.5rem;
	}
	.backuply-modal-inline-media img {
		max-height: 120px;
	}
}







/* Modal */
.backuply-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.backuply-modal.is-active {
	opacity: 1;
	pointer-events: auto;
}

.backuply-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 14, 26, 0.75);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.backuply-modal-box {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: 900px;
	max-height: calc(100vh - 2rem);
	overflow: visible;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
	transform: scale(0.95) translateY(10px);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.backuply-modal.is-active .backuply-modal-box {
	transform: scale(1) translateY(0);
}

.backuply-modal-close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 50;
	width: 2rem;
	height: 2rem;
	border-radius: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	color: var(--text-soft, #94a3b8);
	font-size: 1.5rem;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease, opacity 0.2s ease;
	opacity: 0.75;
}

.backuply-modal-close:hover {
	background: transparent;
	border: none;
	box-shadow: none;
	color: var(--brand-light, #3d5fce);
	opacity: 1;
}

.backuply-modal-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
}

.backuply-modal-media {
	position: relative;
	background: color-mix(in srgb, var(--brand) 8%, var(--bg-soft, #0b1b3a));
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem;
	border-right: 1px solid var(--border);
}

.backuply-modal-media img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
	object-fit: cover;
}

.backuply-modal-caption {
	margin-top: 1.25rem;
}

.backuply-modal-badge {
	display: inline-block;
	padding: 0.25rem 0.65rem;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, var(--brand), #6528F7);
	border-radius: 999px;
	margin-bottom: 0.5rem;
}

.backuply-modal-caption p {
	font-size: 0.85rem;
	color: var(--text-faint, var(--text-soft));
	margin: 0;
}

.backuply-modal-details {
	padding: 2.5rem 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.backuply-modal-details h2 {
	margin-top: 0.35rem;
	margin-bottom: 0.75rem;
}

/* Split Top Section & Full-Width 100% 5-Bullet Rows Modal */
.backuply-modal-top-grid {
	display: grid;
	grid-template-columns: 1fr 200px;
	gap: 1.5rem;
	align-items: center;
	padding-right: 2.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border);
}

.backuply-modal-top-media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.backuply-modal-top-media img {
	width: 100%;
	max-height: 135px;
	border-radius: 10px;
	border: 1px solid var(--border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	object-fit: cover;
}

.backuply-modal-checklist-wrapper {
	margin-top: 1rem;
}

.backuply-modal-checklist-wrapper h4 {
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand-light, #3d5fce);
	margin-bottom: 0.65rem;
}

.check-list-rows {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	width: 100%;
}

.check-list-rows li {
	width: 100%;
	font-size: 0.88rem;
	line-height: 1.45;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.35rem 0.75rem;
	background: color-mix(in srgb, var(--brand) 6%, transparent);
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent);
}

.check-list-rows li i {
	color: var(--brand-light, #3d5fce);
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.backuply-modal-spec-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 1rem;
	padding-top: 0.85rem;
	border-top: 1px dashed var(--border);
}

.backuply-modal-spec-item {
	display: flex;
	flex-direction: column;
}

.backuply-modal-spec-item .spec-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-faint, var(--text-soft));
}

.backuply-modal-spec-item .spec-val {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--text);
	margin-top: 0.2rem;
}

[data-theme="dark"] .backuply-modal-box {
	background: #121724;
	border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .backuply-modal-close {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

@media (max-width: 900px) {
	.backuply-pure-cycle {
		max-width: 620px;
		min-height: 460px;
	}
	.backuply-pure-node {
		width: 190px;
	}
	.backuply-hub-core img {
		width: 86px;
		max-height: 58px;
	}
}

/* Stack on small screens - hub first, then stages */
@media (max-width: 720px) {
	.backuply-pure-cycle {
		aspect-ratio: auto;
		min-height: 0;
		max-height: none;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.6rem;
		padding: 0.5rem 0 0.25rem;
	}
	.backuply-cycle-hub {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		order: 0;
		pointer-events: auto;
	}
	.backuply-pure-node {
		position: relative;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
		width: min(260px, 100%);
		max-width: 280px;
	}
	.node-pure-top { order: 1; }
	.node-pure-right { order: 2; }
	.node-pure-left { order: 3; }
}

@media (max-width: 840px) {
	.backuply-modal-grid {
		grid-template-columns: 1fr;
	}
	.backuply-modal-media {
		border-right: none;
		border-bottom: 1px solid var(--border);
		padding: 1.5rem;
	}
	.backuply-modal-details {
		padding: 1.5rem;
	}
	.backuply-modal-spec-row {
		grid-template-columns: 1fr;
	}
}





@media (max-width: 992px) {
	.addon-teaser{
		grid-template-columns: 1fr;
		padding: 1.35rem;
	}
	.backuply-journey{
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.backuply-journey{
		grid-template-columns: 1fr;
	}
}

.flex {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
}

/* ==========================================================================
	 404 Page Styling
	 ========================================================================== */
.page-header-404 {
	text-align: center;
	padding-top: calc(clamp(3rem, 6vw, 4.5rem) + 113px);
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.page-header-404 .container {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.page-header-404 h1 {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.page-header-404 .lead {
	margin-left: auto;
	margin-right: auto;
	text-align: center !important;
}
.badge-404 {
	font-size: clamp(3.5rem, 8vw, 5.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	background: linear-gradient(135deg, var(--brand) 0%, #3b82f6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 0.5rem;
	user-select: none;
}
.quick-search-wrapper {
	max-width: 36rem;
	margin: 1.5rem auto 2.5rem;
	position: relative;
}
.quick-search-wrapper .search-icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	pointer-events: none;
	width: 18px;
	height: 18px;
}
.quick-search-wrapper input {
	width: 100%;
	padding: 0.85rem 1rem 0.85rem 2.75rem;
	font-size: 0.95rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	color: var(--text);
	transition: border-color var(--transition), box-shadow var(--transition);
}
.quick-search-wrapper input:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
.card-404-link {
	text-decoration: none;
	color: inherit;
	transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.card-404-link:hover {
	transform: translateY(-2px);
	border-color: var(--brand);
	box-shadow: var(--shadow);
}
.feather-inline {
	width: 16px;
	height: 16px;
	vertical-align: -2px;
}

/* ==========================================================================
	 Office Location Tabs
	 ========================================================================== */
.office-tabs-wrapper {
	width: 100%;
}
.office-tabs {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 2rem;
	justify-content: center;
	flex-wrap: wrap;
}
.office-tab-btn {
	padding: 0.75rem 1.4rem;
	font-size: 0.95rem;
	font-weight: 600;
	border-radius: var(--radius-md, 0.5rem);
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	color: var(--text-muted);
	cursor: pointer;
	transition: all var(--transition, 0.2s ease);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.office-tab-btn:hover {
	color: var(--brand);
	border-color: color-mix(in srgb, var(--brand) 40%, transparent);
}
.office-tab-btn.active {
	background: var(--brand);
	color: #ffffff;
	border-color: var(--brand);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 35%, transparent);
}
.office-tab-panel {
	transition: opacity 0.25s ease-in-out;
}

/* ==========================================================================
	 Newsletter Scroll Popup Modal
	 ========================================================================== */
.vz-newsletter-popup {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	background: rgba(10, 15, 30, 0.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
.vz-newsletter-popup.open {
	display: flex;
	opacity: 1;
}
.vz-newsletter-popup-dialog {
	position: relative;
	width: 100%;
	max-width: 28rem;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: 1.25rem;
	padding: 2.25rem 1.75rem 1.75rem;
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.35);
	text-align: center;
	transform: translateY(20px) scale(0.96);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.vz-newsletter-popup.open .vz-newsletter-popup-dialog {
	transform: translateY(0) scale(1);
}
.vz-newsletter-popup-x {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: transparent;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--text-muted);
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	border-radius: 50%;
	transition: color 0.2s, background 0.2s;
}
.vz-newsletter-popup-x:hover {
	color: var(--text);
	background: color-mix(in srgb, var(--border) 50%, transparent);
}
.vz-newsletter-popup-icon {
	width: 3.25rem;
	height: 3.25rem;
	margin: 0 auto 1.25rem;
	background: color-mix(in srgb, var(--brand) 12%, transparent);
	color: var(--brand);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vz-newsletter-popup h3 {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--text-heading, var(--text));
}
.vz-newsletter-popup p {
	font-size: 0.92rem;
	color: var(--text-muted);
	margin: 0 0 1.5rem;
	line-height: 1.55;
}
.vz-newsletter-form-group {
	display: flex;
	gap: 0.5rem;
	flex-direction: column;
}
@media (min-width: 480px) {
	.vz-newsletter-form-group {
		flex-direction: row;
	}
}
.vz-newsletter-input {
	flex: 1;
	padding: 0.75rem 1rem;
	border-radius: var(--radius-md, 0.5rem);
	border: 1px solid var(--border);
	background: var(--bg-soft);
	color: var(--text);
	font-size: 0.92rem;
}
.vz-newsletter-input:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
.vz-newsletter-submit {
	padding: 0.75rem 1.25rem;
	white-space: nowrap;
}
.vz-newsletter-privacy {
	font-size: 0.78rem;
	color: var(--text-faint);
	margin: 0.65rem 0 0 !important;
	line-height: 1.45;
	text-align: left;
}
.vz-newsletter-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin-top: 0.85rem;
	text-align: left;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--text-soft);
	cursor: pointer;
}
.vz-newsletter-consent input {
	margin-top: 0.2rem;
	flex-shrink: 0;
	accent-color: var(--brand);
}
.vz-newsletter-consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.vz-newsletter-consent a:hover {
	color: var(--brand);
}
.vz-newsletter-status {
	margin: 0.85rem 0 0;
	padding: 0.7rem 0.85rem;
	border-radius: var(--radius-md, 0.5rem);
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.45;
	text-align: left;
}
.vz-newsletter-status.is-ok {
	color: var(--accent-dark);
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
[data-theme="dark"] .vz-newsletter-status.is-ok {
	color: var(--accent);
}
.vz-newsletter-status.is-err {
	color: #b91c1c;
	background: color-mix(in srgb, #dc2626 10%, transparent);
	border: 1px solid color-mix(in srgb, #dc2626 28%, transparent);
}
[data-theme="dark"] .vz-newsletter-status.is-err {
	color: #fca5a5;
}
/* ==========================================================================
	 NOC program page
	 ========================================================================== */
.noc-hero .lead{ max-width: 46rem; }
.noc-hero-actions{
	margin-top: 1.5rem;
	flex-wrap: wrap;
	gap: 0.65rem;
}
.noc-jump{
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 0.35rem;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.noc-jump a{
	font-size: 0.82rem;
	font-weight: 650;
	color: var(--text-soft);
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.noc-jump a:hover{
	color: var(--brand);
	border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
	background: color-mix(in srgb, var(--brand) 8%, var(--bg-elevated));
}
.noc-stats{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 640px){
	.noc-stats{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px){
	.noc-stats{ grid-template-columns: repeat(4, 1fr); gap: 0; }
}
.noc-stats .stat{
	padding: 0.35rem 1rem;
}
@media (min-width: 1000px){
	.noc-stats .stat:not(:last-child){
		border-right: 1px solid var(--border);
	}
}
.noc-stats .stat-value{
	font-size: 1.65rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--text);
	line-height: 1.15;
	margin-bottom: 0.35rem;
}
.noc-stats .stat-label{
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--text-soft);
}
/* Why NOC + Best-for card */
.noc-why-header{ margin-bottom: var(--space-6); max-width: 46rem; }
.noc-why-header p{ margin: 0; color: var(--text-soft); font-size: 1.05rem; line-height: 1.6; }
.noc-why-grid{
	align-items: stretch;
	gap: 1.5rem;
}
@media (min-width: 900px){
	.noc-why-grid{
		grid-template-columns: 1.15fr 0.95fr;
		gap: 1.75rem;
	}
}
.noc-why-copy{
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}
.noc-why-checks{
	margin: 0;
	padding: 1.15rem 1.25rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	box-shadow: var(--shadow-sm);
}
.noc-why-checks li{
	font-size: 0.95rem;
}
.noc-why-actions{
	margin-top: 1.25rem;
	flex-wrap: wrap;
}
.noc-aside-card{
	/* Keep side/top at 0 so head can full-bleed border; pad bottom so note never touches edge */
	padding: 0 0 1.5rem;
	height: 100%;
	overflow: hidden;
	border-color: color-mix(in srgb, var(--brand) 22%, var(--border));
	background:
		linear-gradient(165deg, color-mix(in srgb, var(--brand) 8%, var(--bg-elevated)) 0%, var(--bg-elevated) 42%);
	box-shadow: var(--shadow-md);
}
.noc-aside-head{
	padding: 1.4rem 1.4rem 1.1rem;
	border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}
.noc-aside-badge{
	display: inline-flex;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand);
	background: color-mix(in srgb, var(--brand) 14%, transparent);
	padding: 0.28rem 0.65rem;
	border-radius: 999px;
	margin-bottom: 0.75rem;
}
.noc-aside-intro{
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--text-soft);
}
.noc-audience{
	list-style: none;
	margin: 0;
	padding: 1rem 1.4rem 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}
.noc-audience li{
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.7rem 0.75rem;
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--bg-inset) 88%, transparent);
	border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.noc-audience-icon{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.15rem;
	height: 2.15rem;
	border-radius: 0.65rem;
	background: color-mix(in srgb, var(--brand) 12%, var(--bg-elevated));
	color: var(--brand);
	border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
}
.noc-audience-icon .icon{
	width: 1.05rem;
	height: 1.05rem;
}
.noc-audience li > span:last-child{
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}
.noc-audience strong{
	color: var(--text);
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1.3;
}
.noc-audience-desc{
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--text-faint);
}
.noc-aside-note{
	margin: 0.65rem 1.4rem 0;
	padding: 0.85rem 1rem;
	border-radius: var(--radius-sm);
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--text-faint);
	background: var(--bg-inset);
	border: 1px dashed color-mix(in srgb, var(--border) 95%, var(--brand));
}
.noc-aside-note a{
	color: var(--brand);
	font-weight: 600;
	text-decoration: none;
}
.noc-aside-note a:hover{ text-decoration: underline; }

/* NOC vs standalone - dual choice cards */
.noc-vs-cards{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.15rem;
	align-items: stretch;
}
@media (min-width: 860px){
	.noc-vs-cards{
		grid-template-columns: 1fr 1.08fr;
		gap: 1.35rem;
	}
}
.noc-vs-card{
	position: relative;
	padding: 1.45rem 1.4rem 1.4rem;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100%;
}
.noc-vs-card-featured{
	border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
	background:
		linear-gradient(165deg, color-mix(in srgb, var(--brand) 10%, var(--bg-elevated)) 0%, var(--bg-elevated) 48%);
	box-shadow: 0 14px 36px color-mix(in srgb, var(--brand) 12%, transparent);
}
.noc-vs-ribbon{
	position: absolute;
	top: 0.95rem;
	right: 0.95rem;
	font-size: 0.68rem;
	font-weight: 750;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.28rem 0.55rem;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	line-height: 1.2;
}
.noc-vs-card-top{ margin-bottom: 1rem; padding-right: 6.5rem; }
.noc-vs-card:not(.noc-vs-card-featured) .noc-vs-card-top{ padding-right: 0; }
.noc-vs-kicker{
	display: inline-flex;
	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 0.45rem;
}
.noc-vs-kicker-brand{ color: var(--brand); }
.noc-vs-card h3{
	margin: 0 0 0.45rem;
	font-size: 1.28rem;
	letter-spacing: -0.02em;
}
.noc-vs-fit{
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--text-soft);
}
.noc-vs-list{
	list-style: none;
	margin: 0 0 1.15rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	flex: 1;
}
.noc-vs-list li{
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--text-soft);
}
.noc-vs-list .icon{
	flex-shrink: 0;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.18em;
	color: var(--accent);
}
.noc-vs-list a{
	color: var(--brand);
	font-weight: 600;
	text-decoration: none;
}
.noc-vs-list a:hover{ text-decoration: underline; }
.noc-vs-min{
	margin: 0 0 1rem;
	padding: 0.7rem 0.85rem;
	border-radius: var(--radius-sm);
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--text-soft);
	background: color-mix(in srgb, var(--brand) 8%, var(--bg-inset));
	border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
}
.noc-vs-min strong{ color: var(--text); }
.noc-vs-cta{
	margin-top: auto;
	width: 100%;
	justify-content: center;
}
.btn-block{
	display: inline-flex;
	width: 100%;
	justify-content: center;
}
.noc-vs-cta-row{
	margin-top: auto;
	flex-wrap: wrap;
	gap: 0.55rem;
}
.noc-vs-cta-row .btn{ flex: 1 1 auto; justify-content: center; }

/* legacy noc-vs-table (unused) kept safe if any residual */
.noc-vs-scroll{ margin-top: 0.35rem; }

.noc-benefit-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 700px){
	.noc-benefit-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px){
	.noc-benefit-grid{ grid-template-columns: repeat(4, 1fr); }
}
.noc-benefit-card{
	padding: 1.25rem 1.3rem 1.35rem;
	height: 100%;
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.noc-benefit-card:hover{
	border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
/* Icons: same .card-icon pattern as feature / hub cards */
.noc-benefit-card .card-icon{
	margin-bottom: 0.9rem;
}
.noc-benefit-card h3{
	margin: 0 0 0.45rem;
	font-size: 1.02rem;
	letter-spacing: -0.02em;
}
.noc-benefit-card p{
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--text-soft);
}
.noc-price-note{
	margin: 0 0 1.15rem;
	padding: 0.95rem 1.15rem;
	border-radius: var(--radius-md);
	border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border));
	background: color-mix(in srgb, var(--brand) 8%, var(--bg-elevated));
	color: var(--text-soft);
	font-size: 0.92rem;
	line-height: 1.55;
}
.noc-price-note strong{ color: var(--text); }
.noc-price-scroll{ margin-top: 0.25rem; }
.noc-price-table th[scope="row"]{
	background: transparent;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--text);
	min-width: 9.5rem;
	vertical-align: middle;
}
.noc-slab-name{ display: block; }
.noc-slab-hint{
	display: block;
	margin-top: 0.2rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--text-faint);
	text-transform: none;
	letter-spacing: 0;
}
.noc-slab-pill{
	display: inline-flex;
	margin-top: 0.35rem;
	margin-bottom: 0.15rem;
	padding: 0.12rem 0.45rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: var(--brand);
	color: #fff;
}
.noc-amt{
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: -0.02em;
	color: var(--text);
}
.noc-per{
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-faint);
	margin-left: 0.1rem;
}
.noc-price-table tr.noc-price-mid td,
.noc-price-table tr.noc-price-mid th{
	background: color-mix(in srgb, var(--brand) 4%, var(--bg-elevated));
}
.noc-price-table tr.noc-price-best td,
.noc-price-table tr.noc-price-best th{
	background: color-mix(in srgb, var(--brand) 9%, var(--bg-elevated));
}
.noc-steps{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 720px){
	.noc-steps{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px){
	.noc-steps{ grid-template-columns: repeat(4, 1fr); }
}
.noc-step{
	padding: 1.3rem 1.25rem 1.4rem;
	height: 100%;
	position: relative;
}
.noc-step-num{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	font-weight: 800;
	font-size: 0.9rem;
	margin-bottom: 0.85rem;
	color: #fff;
	background: var(--brand);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 35%, transparent);
}
.noc-step h3{
	margin: 0 0 0.45rem;
	font-size: 1.05rem;
}
.noc-step p{
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--text-soft);
}
.noc-demo-panel{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	align-items: stretch;
	padding: 1.5rem;
	border-radius: calc(var(--radius-md) + 2px);
	border: 1px solid var(--border);
	background: linear-gradient(145deg, var(--bg-elevated) 0%, color-mix(in srgb, var(--brand) 6%, var(--bg-elevated)) 100%);
	box-shadow: var(--shadow-sm);
}
@media (min-width: 900px){
	.noc-demo-panel{
		grid-template-columns: 1.2fr 0.9fr;
		padding: 1.75rem;
		gap: 1.5rem;
	}
}
.noc-demo-copy h2{ margin: 0.35rem 0 0.65rem; }
.noc-demo-copy p{ color: var(--text-soft); margin: 0 0 1rem; }
.noc-demo-copy .btn{ margin-top: 1.15rem; }
.noc-demo-creds{
	padding: 1.35rem 1.4rem;
	height: 100%;
	background: var(--bg-elevated);
}
.noc-demo-creds h3{
	margin: 0 0 1rem;
	font-size: 1.05rem;
}
.noc-cred-list{
	margin: 0 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.noc-cred-list > div{
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 0.5rem;
	align-items: center;
	padding: 0.65rem 0.75rem;
	border-radius: var(--radius-sm);
	background: var(--bg-inset);
	border: 1px solid var(--border);
}
.noc-cred-list dt{
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-faint);
}
.noc-cred-list dd{
	margin: 0;
	font-size: 0.95rem;
}
.noc-cred-list code{
	font-size: 0.95rem;
	font-weight: 700;
	padding: 0.15rem 0.4rem;
	border-radius: 0.35rem;
	background: color-mix(in srgb, var(--brand) 10%, var(--bg-elevated));
	color: var(--text);
}
.noc-cred-hint{
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--text-faint);
}
.noc-faq{ max-width: 820px; }

/* NOC polish: plan legend, vs table, partners teaser */
.noc-plan-legend{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 0.75rem;
	margin: 0 0 1.15rem;
}
.noc-plan-chip{
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.7rem 0.95rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	min-width: min(100%, 11rem);
	flex: 1 1 11rem;
}
.noc-plan-chip strong{
	font-size: 0.88rem;
	font-weight: 750;
	color: var(--text);
}
.noc-plan-chip span{
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--text-faint);
}
.noc-plan-link{
	font-size: 0.88rem;
	font-weight: 650;
	color: var(--brand);
	text-decoration: none;
	white-space: nowrap;
	padding: 0.35rem 0;
}
.noc-plan-link:hover{ text-decoration: underline; }
.noc-partners-teaser{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 1.5rem;
	padding: 1.5rem 1.6rem;
	border-radius: calc(var(--radius-md) + 2px);
	border: 1px solid var(--border);
	background: linear-gradient(135deg, var(--bg-elevated) 0%, color-mix(in srgb, var(--brand) 7%, var(--bg-elevated)) 100%);
	box-shadow: var(--shadow-sm);
}
.noc-partners-teaser h2{
	margin: 0.3rem 0 0.5rem;
	font-size: clamp(1.25rem, 2vw, 1.55rem);
}
.noc-partners-teaser p{
	margin: 0;
	max-width: 40rem;
	color: var(--text-soft);
	font-size: 0.95rem;
	line-height: 1.55;
}
.noc-partners-teaser .btn-row{ margin: 0; flex-wrap: wrap; }



/* Home page compare teaser (links to /compare) - solid card, no transparent cells */
.home-compare-wrap{
	margin-top: 0.25rem;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	overflow-x: auto;
}
[data-theme="dark"] .home-compare-wrap{
	background: var(--bg-elevated);
}
.home-compare-table{
	min-width: 520px;
	font-size: 0.9rem;
	background: #fff;
}
[data-theme="dark"] .home-compare-table{
	background: var(--bg-elevated);
}
.home-compare-table th,
.home-compare-table td{
	background: #fff;
}
[data-theme="dark"] .home-compare-table th,
[data-theme="dark"] .home-compare-table td{
	background: var(--bg-elevated);
}
.home-compare-table thead th{
	background: var(--navy);
	color: rgba(255,255,255,0.95);
}
.home-compare-table thead th.th-vz{
	background: var(--brand);
	color: #fff;
}
.home-compare-table tbody th{
	width: 18%;
	min-width: 8.5rem;
	background: #f6f8fc;
	color: var(--text);
}
[data-theme="dark"] .home-compare-table tbody th{
	background: color-mix(in srgb, var(--bg-inset) 90%, var(--bg-elevated));
}
.home-compare-table tbody td.td-us{
	/* solid tint on white - not transparent over section bg */
	background: color-mix(in srgb, var(--brand) 8%, #fff);
	font-weight: 600;
}
[data-theme="dark"] .home-compare-table tbody td.td-us{
	background: color-mix(in srgb, var(--brand) 16%, var(--bg-elevated));
}
.home-compare-table tbody tr:hover th{
	background: #eef2f8;
}
.home-compare-table tbody tr:hover td{
	background: #f8fafc;
}
.home-compare-table tbody tr:hover td.td-us{
	background: color-mix(in srgb, var(--brand) 12%, #fff);
}
[data-theme="dark"] .home-compare-table tbody tr:hover th,
[data-theme="dark"] .home-compare-table tbody tr:hover td{
	background: color-mix(in srgb, var(--brand) 6%, var(--bg-elevated));
}
[data-theme="dark"] .home-compare-table tbody tr:hover td.td-us{
	background: color-mix(in srgb, var(--brand) 20%, var(--bg-elevated));
}
.home-compare-actions{
	margin-top: 1.35rem;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.65rem;
}

/* Compare matrix page */
.compare-legend{
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1.1rem;
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	color: var(--text-faint);
}
.compare-legend-item{
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.compare-legend-swatch{
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 0.25rem;
	border: 1px solid var(--border);
	flex-shrink: 0;
}
.compare-legend-swatch-vz{
	background: color-mix(in srgb, var(--brand) 18%, transparent);
	border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
}
.compare-scroll-hint{
	display: none;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.65rem;
	padding: 0.55rem 0.75rem;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--text-soft);
	background: var(--bg-soft);
	border: 1px dashed var(--border);
	border-radius: var(--radius-md);
}
.compare-scroll-hint .icon,
.compare-scroll-hint svg{
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--brand);
}

/* Scroll shell: horizontal swipe on phone/tablet, keeps page from shifting sideways */
.compare-matrix-wrap{
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	margin-top: 0.25rem;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-gutter: stable;
	box-sizing: border-box;
	background: var(--bg-elevated);
}
.compare-matrix-wrap::-webkit-scrollbar{
	height: 8px;
}
.compare-matrix-wrap::-webkit-scrollbar-thumb{
	background: color-mix(in srgb, var(--text) 22%, transparent);
	border-radius: 999px;
}
.compare-matrix-wrap::-webkit-scrollbar-track{
	background: var(--bg-soft);
}

/*
 * Full-width matrix: always fill the card on laptop/desktop.
 * min-width only creates horizontal scroll when the viewport is narrower.
 * Never use width: max-content here - that was shrinking the table.
 */
#matrix .compare-matrix-wrap{
	width: 100% !important;
	max-width: 100% !important;
}
#matrix .compare-table.compare-matrix,
#matrix .compare-table.compare-matrix-marks,
.compare-table.compare-matrix,
.compare-table.compare-matrix-marks{
	width: 100% !important;
	min-width: 56rem; /* scroll only when container < this */
	max-width: none !important;
	font-size: 0.86rem;
	table-layout: fixed !important;
	border-collapse: separate;
	border-spacing: 0;
}
/* Real column widths via <colgroup> - reliable even when group rows colspan the first body row */
#matrix .cmp-col-feature,
.compare-matrix-marks .cmp-col-feature{
	width: 18%;
}
#matrix .cmp-col-prod,
.compare-matrix-marks .cmp-col-prod{
	width: 11.714%; /* 82% / 7 product columns */
}
/* Center tick marks in product columns */
#matrix .compare-table.compare-matrix-marks thead th:not(:first-child),
#matrix .compare-table.compare-matrix-marks tbody td,
.compare-table.compare-matrix-marks thead th:not(:first-child),
.compare-table.compare-matrix-marks tbody td{
	text-align: center;
	vertical-align: middle;
	padding: 0.7rem 0.35rem;
	box-sizing: border-box;
}
/* Feature label column */
#matrix .compare-table.compare-matrix-marks thead th:first-child,
#matrix .compare-table.compare-matrix-marks tbody th[scope="row"],
.compare-table.compare-matrix-marks thead th:first-child,
.compare-table.compare-matrix-marks tbody th[scope="row"]{
	text-align: left;
	vertical-align: middle;
	box-sizing: border-box;
}
/* Beat generic .compare-table tbody th { width: 22% } */
#matrix .compare-table tbody th[scope="row"]{
	width: auto;
}
.compare-table.compare-matrix-marks tbody td .cmp-mark{
	margin-left: auto;
	margin-right: auto;
}
.compare-matrix thead th.th-vz{
	background: var(--brand);
	color: #fff;
}
/* Sticky feature column while scrolling sideways (mobile/tablet) */
.compare-matrix thead th:first-child,
.compare-matrix tbody th[scope="row"]{
	position: sticky;
	left: 0;
	z-index: 2;
	box-shadow: 4px 0 10px color-mix(in srgb, var(--text) 6%, transparent);
}
.compare-matrix thead th:first-child{
	z-index: 3;
	background: var(--navy);
	color: rgba(255,255,255,0.95);
}
.compare-matrix-marks tbody th[scope="row"]{
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: -0.01em;
	background: var(--bg-elevated);
	padding: 0.7rem 0.85rem;
}
.compare-matrix .td-us{
	font-weight: 600;
}
.compare-matrix tr.compare-row-key .td-us{
	background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.compare-matrix-marks td.td-us{
	background: color-mix(in srgb, var(--brand) 7%, transparent);
}
.compare-table.compare-matrix-marks thead th{
	white-space: nowrap;
	padding: 0.85rem 0.4rem;
	font-size: 0.68rem;
}
/* Category group headers (Billing, Network, …) */
.compare-group-row th{
	text-align: left !important;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-soft);
	background: var(--bg-soft) !important;
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--border);
	box-shadow: none !important;
	position: sticky !important;
	left: 0;
	z-index: 1;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}
/* Yes / partial / no marks */
.cmp-mark{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.65rem;
	height: 1.65rem;
	border-radius: 999px;
	border: 1px solid transparent;
	line-height: 0;
	cursor: default;
	flex-shrink: 0;
}
.cmp-mark-svg{
	width: 0.95rem;
	height: 0.95rem;
	display: block;
}
.cmp-mark-yes{
	color: #0d9b6c;
	background: color-mix(in srgb, #0d9b6c 12%, transparent);
	border-color: color-mix(in srgb, #0d9b6c 28%, transparent);
}
.cmp-mark-partial{
	color: #c47a12;
	background: color-mix(in srgb, #c47a12 12%, transparent);
	border-color: color-mix(in srgb, #c47a12 28%, transparent);
}
.cmp-mark-no{
	color: var(--text-faint);
	background: color-mix(in srgb, var(--text) 5%, transparent);
	border-color: var(--border);
}
[data-theme="dark"] .cmp-mark-yes{
	color: #3dcea0;
	background: color-mix(in srgb, #3dcea0 14%, transparent);
}
[data-theme="dark"] .cmp-mark-partial{
	color: #e0a84a;
	background: color-mix(in srgb, #e0a84a 14%, transparent);
}
.compare-footnote{ margin-top: 1rem; max-width: 56rem; }
.compare-takeaways{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 860px){
	.compare-takeaways{ grid-template-columns: 1fr 1fr; }
}
.compare-takeaway{
	padding: 1.35rem 1.4rem 1.45rem;
	height: 100%;
}
.compare-takeaway h3{
	margin: 0 0 0.85rem;
	font-size: 1.08rem;
}
.compare-takeaway .check-list{ margin: 0; }

/* Show swipe hint only when the table is likely to overflow */
@media (max-width: 1100px){
	.compare-scroll-hint{ display: inline-flex; }
}

/* Tablet polish - keep width 100% / min-width scroll model; never max-content */
@media (max-width: 1024px){
	.compare-table.compare-matrix,
	.compare-table.compare-matrix-marks{
		min-width: 52rem;
		font-size: 0.84rem;
	}
	.compare-table.compare-matrix-marks tbody th[scope="row"]{
		font-size: 0.84rem;
		padding: 0.6rem 0.7rem;
	}
}

/* Phone polish */
@media (max-width: 640px){
	.compare-legend{
		gap: 0.5rem 0.85rem;
		font-size: 0.8rem;
	}
	.compare-table.compare-matrix,
	.compare-table.compare-matrix-marks{
		min-width: 46rem;
		font-size: 0.8rem;
	}
	.compare-table.compare-matrix-marks thead th{
		padding: 0.7rem 0.35rem;
		font-size: 0.62rem;
		letter-spacing: 0.04em;
	}
	.compare-table.compare-matrix-marks tbody th[scope="row"]{
		font-size: 0.78rem;
		padding: 0.55rem 0.55rem;
		line-height: 1.25;
	}
	.compare-table.compare-matrix-marks tbody td{
		padding: 0.5rem 0.25rem;
	}
	.cmp-mark{
		width: 1.45rem;
		height: 1.45rem;
	}
	.cmp-mark-svg{
		width: 0.85rem;
		height: 0.85rem;
	}
	.compare-group-row th{
		font-size: 0.7rem;
		padding: 0.55rem 0.6rem;
	}
	.compare-footnote{
		font-size: 0.82rem;
	}
	#overview .btn-row{
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	#overview .btn-row .btn{
		flex: 1 1 auto;
		justify-content: center;
		min-width: min(100%, 9.5rem);
	}
}


/* NOC partners search toolbar (restored after null-byte corruption) */
.partners-toolbar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 0 0 1.5rem;
}
.partners-search-label{
	position: relative;
	flex: 1 1 16rem;
	min-width: min(100%, 16rem);
	max-width: 28rem;
	display: block;
	margin: 0;
}
.partners-search-icon{
	position: absolute;
	left: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-faint);
	pointer-events: none;
}
.partners-search-input{
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 1rem 0.7rem 2.65rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	color: var(--text);
	font: inherit;
	font-size: 0.92rem;
	outline: none;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.partners-search-input::placeholder{
	color: var(--text-faint);
}
.partners-search-input::-webkit-search-cancel-button{
	-webkit-appearance: none;
	appearance: none;
	height: 14px;
	width: 14px;
	margin-right: 0.15rem;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
	cursor: pointer;
}
.partners-search-input:focus{
	border-color: color-mix(in srgb, var(--brand) 45%, var(--border));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
.partners-filters{
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}
.partners-filter{
	appearance: none;
	border: 1px solid var(--border);
	background: var(--bg-inset);
	color: var(--text-soft);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 650;
	padding: 0.45rem 0.75rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.partners-filter:hover{
	border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
	color: var(--text);
}
.partners-filter.is-active{
	background: color-mix(in srgb, var(--brand) 12%, transparent);
	border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
	color: var(--brand);
}
.partners-count{
	margin: 0 0 0 0 auto;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-faint);
	white-space: nowrap;
}
@media (max-width: 640px){
	.partners-search-label{
		max-width: none;
		flex: 1 1 100%;
	}
	.partners-count{ margin-left: 0; width: 100%; }
}
.partners-empty{
	text-align: center;
	padding: 2rem 1rem;
	color: var(--text-soft);
	font-weight: 500;
}
.partners-footnote{
	margin: 1.75rem 0 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--text-faint);
}
/* sr-only if not already defined globally */
.sr-only:not(:focus):not(:active){
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.partners-join-actions{ margin-top: 1.25rem; }

/* ==========================================================================
	 Floating events - clean FAB + compact panel
	 ========================================================================== */
.vz-events{
	--vz-ev-w: 380px;
	--vz-fab: 48px;
	--vz-date-w: 72px;
	position: fixed;
	left: 1rem;
	bottom: 1.25rem;
	z-index: 860;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	pointer-events: none;
	font-family: var(--font);
}
.vz-events > *{ pointer-events: auto; }
.vz-events[hidden]{ display: none !important; }

/* FAB */
.vz-events-fab{
	position: relative;
	width: var(--vz-fab);
	height: var(--vz-fab);
	padding: 0;
	margin: 0;
	border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border));
	border-radius: 50%;
	background: var(--bg-elevated);
	color: var(--brand);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 140ms ease, box-shadow 140ms ease, color 140ms ease, border-color 140ms ease;
}
.vz-events-fab:hover,
.vz-events-fab:focus-visible{
	background: var(--brand);
	color: #fff;
	border-color: var(--brand);
	box-shadow: var(--shadow-md);
	outline: none;
}
.vz-events-fab:focus-visible{
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
}
.vz-events.is-open .vz-events-fab{
	background: var(--brand);
	color: #fff;
	border-color: var(--brand);
}
.vz-events-fab-svg{ display: block; }

/* Quiet red alert dot */
.vz-events-fab-dot{
	position: absolute;
	top: 3px;
	right: 3px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #e11d48;
	border: 1.5px solid var(--bg-elevated);
}
.vz-events-fab-dot[hidden]{ display: none !important; }
.vz-events.is-open .vz-events-fab-dot{
	border-color: var(--brand);
}

/* Panel */
.vz-events-panel{
	width: var(--vz-ev-w);
	max-width: min(var(--vz-ev-w), calc(100vw - 1.5rem));
	max-height: min(68vh, 520px);
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--bg-elevated);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transform-origin: bottom left;
	pointer-events: none;
	transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}
.vz-events-panel[hidden]{ display: none !important; }
.vz-events.is-open .vz-events-panel{
	display: flex !important;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.vz-events-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.8rem 0.85rem 0.75rem 1rem;
	border-bottom: 1px solid var(--border);
}
.vz-events-title{
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--text);
	line-height: 1.25;
}
.vz-events-close{
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--text-faint);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}
.vz-events-close:hover,
.vz-events-close:focus-visible{
	background: var(--bg-inset);
	color: var(--text);
	outline: none;
}

.vz-events-list{
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0.7rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	scrollbar-width: thin;
}

/* Event card */
.vz-event-card{
	display: grid;
	grid-template-columns: var(--vz-date-w) minmax(0, 1fr);
	gap: 0.85rem;
	padding: 0.75rem 0.75rem 0.7rem 0.65rem;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--bg);
	align-items: start;
}
.vz-event-card.is-featured{
	border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
}

/* Mini calendar date tile - room for multi-day ranges */
.vz-event-date{
	display: flex;
	flex-direction: column;
	width: var(--vz-date-w);
	min-width: var(--vz-date-w);
	border-radius: 9px;
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	text-align: center;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(11, 27, 58, 0.04);
}
.vz-event-date-month{
	display: block;
	width: 100%;
	padding: 0.32rem 0.2rem;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: var(--brand);
}
.vz-event-date-body{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.12rem;
	padding: 0.45rem 0.3rem 0.4rem;
	background: var(--bg);
	min-height: 2.6rem;
}
/* Single day */
.vz-event-date-day{
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--text);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
/* Multi-day: 15 - 18 on one clear row */
.vz-event-date-range{
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.12rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.vz-event-date-range .vz-event-date-day{
	font-size: 1.05rem;
}
.vz-event-date-sep{
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-faint);
	padding: 0 0.02rem;
	line-height: 1;
}
.vz-event-date-year{
	display: block;
	padding: 0 0.2rem 0.4rem;
	font-size: 0.65rem;
	font-weight: 650;
	letter-spacing: 0.02em;
	color: var(--text-faint);
	background: var(--bg);
}
.vz-event-date.is-ongoing .vz-event-date-month{
	background: var(--text-soft);
}
.vz-event-date.is-ongoing .vz-event-date-day{
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--text-soft);
}

.vz-event-body{ min-width: 0; padding-top: 0.05rem; }
.vz-event-type{
	display: inline-block;
	margin: 0 0 0.2rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-faint);
}
.vz-event-name{
	margin: 0 0 0.2rem;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text);
}
.vz-event-meta{
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--text-soft);
}
.vz-event-summary{
	margin: 0.35rem 0 0;
	font-size: 0.76rem;
	line-height: 1.45;
	color: var(--text-faint);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Action row: site + calendars */
.vz-event-actions{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.55rem;
}
.vz-event-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	height: 28px;
	padding: 0 0.55rem;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--bg-elevated);
	color: var(--text-soft);
	font-size: 0.72rem;
	font-weight: 650;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.vz-event-btn:hover,
.vz-event-btn:focus-visible{
	border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
	color: var(--brand);
	background: color-mix(in srgb, var(--brand) 6%, var(--bg-elevated));
	outline: none;
}
.vz-event-btn-primary{
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}
.vz-event-btn-primary:hover,
.vz-event-btn-primary:focus-visible{
	background: var(--brand-dark);
	border-color: var(--brand-dark);
	color: #fff;
}
.vz-event-btn svg{
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.vz-events-foot{
	padding: 0.5rem 0.85rem 0.65rem;
	border-top: 1px solid var(--border);
	background: var(--bg-soft);
}
.vz-events-foot-link{
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--brand);
	text-decoration: none;
}
.vz-events-foot-link:hover{ text-decoration: underline; }

@media (max-width: 900px){
	.vz-events{
		left: 0.75rem;
		bottom: 5.5rem;
		--vz-ev-w: 340px;
	}
	.vz-events-panel{
		width: min(var(--vz-ev-w), calc(100vw - 1.25rem));
		max-height: min(55vh, 440px);
	}
}
@media (max-width: 480px){
	.vz-events{
		--vz-fab: 46px;
		--vz-ev-w: min(360px, calc(100vw - 1rem));
		--vz-date-w: 64px;
	}
}
@media (prefers-reduced-motion: reduce){
	.vz-events-panel,
	.vz-events-fab{ transition: none !important; }
}

/* Features dropdown: all 13 features in 3 columns */
.nav-dropdown.nav-dropdown-cols a{ white-space: nowrap; }
@media (min-width: 980px){
	.nav-item-has-dropdown:hover .nav-dropdown.nav-dropdown-cols,
	.nav-item-has-dropdown:focus-within .nav-dropdown.nav-dropdown-cols{
		display: grid;
		grid-template-columns: repeat(3, max-content);
		column-gap: 0.25rem;
		min-width: 0;
	}
	.nav-dropdown.nav-dropdown-cols .nav-dropdown-all{
		grid-column: 1 / -1;
		margin-top: 0.25rem;
		border-top: 1px solid var(--border);
		border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	}
}

/* Teaser tooltip beside the calendar button */
.vz-events-teaser{
	position: absolute;
	left: calc(var(--vz-fab) + 0.65rem);
	bottom: 0;
	display: flex;
	align-items: flex-start;
	width: max-content;
	max-width: min(300px, calc(100vw - var(--vz-fab) - 2.5rem));
	background: var(--bg-elevated);
	border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
	border-radius: 12px;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-8px);
	transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}
.vz-events-teaser.is-visible{ opacity: 1; visibility: visible; transform: translateX(0); }
/* Arrow pointing at the button */
.vz-events-teaser::before{
	content: "";
	position: absolute;
	left: -6px;
	bottom: 16px;
	width: 10px;
	height: 10px;
	background: var(--bg-elevated);
	border-left: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
	border-bottom: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
	transform: rotate(45deg);
}
.vz-events-teaser-body{
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.65rem 0.4rem 0.7rem 0.9rem;
	border: 0;
	background: none;
	text-align: left;
	font: inherit;
	color: var(--text);
	cursor: pointer;
}
.vz-events-teaser-label{
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand);
}
.vz-events-teaser-name{ font-size: 0.9rem; font-weight: 700; line-height: 1.25; }
.vz-events-teaser-meta{ font-size: 0.78rem; color: var(--text-soft); line-height: 1.3; }
.vz-events-teaser-close{
	flex: none;
	width: 26px;
	height: 26px;
	margin: 0.35rem 0.35rem 0 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--text-soft);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
}
.vz-events-teaser-close:hover{ background: var(--bg-soft); color: var(--text); }
.vz-events.is-open .vz-events-teaser{ display: none; }
@media (prefers-reduced-motion: reduce){ .vz-events-teaser{ transition: none; } }

/* Mobile-only: smaller buttons (desktop unchanged) */
@media (max-width: 979px){
	.nav-actions-end .btn-nav-trial{
		padding: 0.3rem 0.8rem;
		font-size: 0.8rem;
		min-height: 34px;
	}
}
@media (max-width: 767px){
	.btn{ padding: 0.4rem 1.05rem; font-size: 0.85rem; }
	.btn-lg{ padding: 0.55rem 1.35rem; font-size: 0.9rem; }
	.btn-cta{ padding: 0.6rem 1.5rem; font-size: 0.85rem; }
	.btn-sm{ padding: 0.3rem 0.8rem; font-size: 0.8rem; }
}

/* Header: keep logo intact and fit 8 nav items between the desktop breakpoint and ~1140px */
@media (min-width: 980px) and (max-width: 1139px){
	.brand{ flex-shrink: 0; margin-right: 0.5rem; }
	.brand-logo-img{ height: 32px; }
	.nav-links > li > a,
	.nav-dropdown-trigger{ padding: 0.5rem 0.4rem; font-size: 0.84rem; white-space: nowrap; }
}