/*
 * VOVO One components. Colours, spacing and radii come from theme.json presets,
 * so the Light and Dark styles recolour everything here without extra rules.
 */

/* Icons: one mask per icon, tinted with currentColor. */
.vovo-icon {
	--vovo-icon: none;
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--vovo-icon) center / contain no-repeat;
	mask: var(--vovo-icon) center / contain no-repeat;
}
.vovo-icon--chart { --vovo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5M4 19h16M8 15v-4M12 15V8M16 15v-6'/%3E%3C/svg%3E"); }
.vovo-icon--bolt { --vovo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3 5 14h6l-1 7 8-11h-6l1-7z'/%3E%3C/svg%3E"); }
.vovo-icon--shield { --vovo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.vovo-icon--layers { --vovo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5 9-5z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E"); }
.vovo-icon--users { --vovo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3 3-5 6-5s6 2 6 5M16 5.5a3 3 0 0 1 0 5M18 15c2 .5 3 2.5 3 5'/%3E%3C/svg%3E"); }
.vovo-icon--plug { --vovo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v5M15 3v5M6 8h12v3a6 6 0 0 1-12 0V8zM12 17v4'/%3E%3C/svg%3E"); }
.vovo-icon--clock { --vovo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.vovo-icon--check { --vovo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.vovo-icon--arrow { --vovo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.vovo-icon--sparkle { --vovo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z'/%3E%3C/svg%3E"); }
.vovo-icon--code { --vovo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 8-4 4 4 4M16 8l4 4-4 4M13.5 5l-3 14'/%3E%3C/svg%3E"); }
.vovo-icon--globe { --vovo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 3.5 5.5 3.5 9s-1 6.5-3.5 9c-2.5-2.5-3.5-5.5-3.5-9s1-6.5 3.5-9z'/%3E%3C/svg%3E"); }
.vovo-icon--mail { --vovo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); }
.vovo-icon--file { --vovo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h6'/%3E%3C/svg%3E"); }

.vovo-icon-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--link);
}

/* Small helpers. */
.vovo-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.35em 0.95em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--link);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
}
.vovo-gradient-text {
	background: linear-gradient(100deg, var(--wp--preset--color--link), var(--wp--preset--color--primary));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.vovo-lede {
	max-width: 36rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
}
.vovo-note {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}
.vovo-section-head {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
	justify-items: center;
}
.vovo-section-head > * { margin: 0; }

/* Hero. */
.vovo-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.vovo-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 0 auto auto;
	width: 85%;
	height: 100%;
	background: radial-gradient(ellipse 65% 85% at 72% 0%, color-mix(in srgb, var(--wp--preset--color--primary) 24%, transparent), transparent 72%);
	pointer-events: none;
}
.vovo-hero__actions { gap: var(--wp--preset--spacing--30); }
.vovo-ticks.vovo-hero__proof {
	display: flex;
	margin-top: var(--wp--preset--spacing--50);
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}
.vovo-hero__proof span { display: inline-flex; align-items: center; gap: 0.4em; }
.vovo-hero__proof .vovo-icon { width: 1.1em; height: 1.1em; color: var(--wp--preset--color--success); }

/* Product dashboard drawn in HTML/CSS (no screenshot). */
.vovo-dash {
	--dash-gap: 0.75rem;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--lifted);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	text-align: left;
}
.vovo-dash__bar {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.vovo-dash__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--wp--preset--color--border); }
.vovo-dash__url {
	margin-left: 0.75rem;
	padding: 0.15rem 0.8rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
}
.vovo-dash__body { display: grid; grid-template-columns: 9.5rem 1fr; min-height: 18rem; }
.vovo-dash__side {
	display: grid;
	align-content: start;
	gap: 0.35rem;
	padding: 1rem 0.75rem;
	border-right: 1px solid var(--wp--preset--color--border);
}
.vovo-dash__brand { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; font-weight: 700; }
.vovo-dash__brand i { width: 1.1rem; height: 1.1rem; border-radius: 0.35rem; background: var(--wp--preset--color--primary); }
.vovo-dash__nav { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.55rem; border-radius: var(--wp--custom--radius--small); color: var(--wp--preset--color--muted); }
.vovo-dash__nav .vovo-icon { width: 1rem; height: 1rem; }
.vovo-dash__nav--on { background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--link); font-weight: 600; }
.vovo-dash__main { display: grid; align-content: start; gap: var(--dash-gap); padding: 1rem; }
.vovo-dash__title { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 0.9375rem; }
.vovo-dash__pill { padding: 0.15rem 0.6rem; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--link); font-size: 0.6875rem; font-weight: 600; }
.vovo-dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dash-gap); }
.vovo-dash__kpi { padding: 0.7rem 0.8rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--medium); }
.vovo-dash__kpi small { display: block; color: var(--wp--preset--color--muted); font-size: 0.6875rem; }
.vovo-dash__kpi strong { display: block; font-size: 1.125rem; letter-spacing: -0.02em; }
.vovo-dash__up { color: var(--wp--preset--color--success); font-size: 0.6875rem; font-weight: 600; }
.vovo-dash__chart { padding: 0.7rem 0.8rem 0.4rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--medium); }
.vovo-dash__chart svg { display: block; width: 100%; height: auto; }
.vovo-dash__grid { stroke: var(--wp--preset--color--border); stroke-width: 1; }
.vovo-dash__line { fill: none; stroke: var(--wp--preset--color--primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.vovo-dash__area { fill: url(#vovo-dash-fill); }
.vovo-dash__stop-a { stop-color: var(--wp--preset--color--primary); stop-opacity: 0.35; }
.vovo-dash__stop-b { stop-color: var(--wp--preset--color--primary); stop-opacity: 0; }
.vovo-dash__rows { display: grid; gap: 0.5rem; }
.vovo-dash__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.2rem 0.75rem; }
.vovo-dash__row span:first-child { color: var(--wp--preset--color--muted); }
.vovo-dash__meter { grid-column: 1 / -1; height: 0.3rem; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--primary-soft); overflow: hidden; }
.vovo-dash__meter i { display: block; height: 100%; border-radius: inherit; background: var(--wp--preset--color--primary); }
.vovo-dash-wrap { position: relative; padding-bottom: 1.25rem; }
.vovo-dash__toast {
	position: absolute;
	right: 1.25rem;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--soft);
	font-weight: 600;
}
.vovo-dash__toast .vovo-icon { color: var(--wp--preset--color--success); }

/* Cards and grids. */
.vovo-card {
	height: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--surface);
}
.vovo-card > * { margin-block: 0; }
.vovo-card > * + * { margin-block-start: var(--wp--preset--spacing--30); }
.vovo-card h3, .vovo-card h4 { font-size: var(--wp--preset--font-size--large); letter-spacing: -0.015em; }
.vovo-card p { color: var(--wp--preset--color--muted); }
.vovo-grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}
.vovo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vovo-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vovo-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vovo-bento {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}
.vovo-bento > * { grid-column: span 2; }
.vovo-bento > .vovo-bento__wide { grid-column: span 4; }
.vovo-bento > .vovo-bento__half { grid-column: span 3; }
.vovo-bento .vovo-card { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.vovo-bento .vovo-card > * + * { margin-block-start: 0; }
.vovo-bento__visual { margin-top: auto !important; padding-top: var(--wp--preset--spacing--40); }
.vovo-spark { display: flex; align-items: flex-end; gap: 0.4rem; height: 5.5rem; }
.vovo-spark i { flex: 1; min-width: 0; border-radius: 0.4rem 0.4rem 0.15rem 0.15rem; background: color-mix(in srgb, var(--wp--preset--color--primary) 28%, transparent); }
.vovo-spark i:nth-child(5), .vovo-spark i:nth-child(8) { background: var(--wp--preset--color--primary); }

/* Trust and proof. */
.vovo-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--muted);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
}
.vovo-logos li { margin: 0; }
.vovo-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}
.vovo-metrics li { margin: 0; padding-inline-start: var(--wp--preset--spacing--40); border-inline-start: 2px solid var(--wp--preset--color--primary); }
.vovo-metrics strong { display: block; font-size: var(--wp--preset--font-size--xx-large); letter-spacing: -0.035em; line-height: 1.1; }
.vovo-metrics span { color: var(--wp--preset--color--muted); }
.vovo-quote { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.vovo-quote > p:first-child { color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--large); line-height: 1.5; }
.vovo-person { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); margin-top: auto !important; }
.vovo-person p { margin: 0; line-height: 1.3; }
.vovo-person p strong { color: var(--wp--preset--color--contrast); }
.vovo-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-weight: 700;
	font-size: 0.9375rem;
}

/* Integrations. */
.vovo-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
.vovo-tile {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface);
	font-weight: 600;
}

/* Split feature. */
.vovo-split { align-items: center; }
.vovo-steps { display: grid; gap: var(--wp--preset--spacing--40); margin: 0; padding: 0; list-style: none; counter-reset: vovo-step; }
.vovo-steps li { position: relative; margin: 0; padding-inline-start: 3rem; counter-increment: vovo-step; }
.vovo-steps li::before {
	content: counter(vovo-step);
	position: absolute;
	inset-inline-start: 0;
	top: 0.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--link);
	font-weight: 700;
}
.vovo-steps strong { display: block; }
.vovo-steps span { color: var(--wp--preset--color--muted); }
.vovo-panel {
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--soft);
}
.vovo-flow { display: grid; gap: 0.75rem; }
.vovo-flow__node { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--medium); background: var(--wp--preset--color--base); font-weight: 600; }
.vovo-flow__node small { display: block; color: var(--wp--preset--color--muted); font-weight: 400; }
.vovo-flow__node--on { border-color: var(--wp--preset--color--primary); }
.vovo-flow__node .vovo-icon-chip { width: 2.25rem; height: 2.25rem; }
.vovo-flow__join { width: 2px; height: 1.25rem; margin-inline-start: 1.9rem; background: var(--wp--preset--color--border); }
.vovo-feed { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.vovo-feed li { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0; }
.vovo-feed .vovo-avatar { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }
.vovo-feed p { margin: 0; line-height: 1.4; }
.vovo-feed small { color: var(--wp--preset--color--muted); }

/* Pricing and comparison. */
.vovo-price { position: relative; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.vovo-price--featured { border-color: var(--wp--preset--color--primary); box-shadow: var(--wp--preset--shadow--lifted); }
.vovo-price__badge {
	position: absolute;
	top: -0.85rem;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 0.25em 0.9em;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	white-space: nowrap;
}
.vovo-price__amount { margin: 0; color: var(--wp--preset--color--contrast) !important; font-size: var(--wp--preset--font-size--xx-large); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.vovo-price__amount small { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--medium); font-weight: 500; letter-spacing: 0; }
.vovo-ticks { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.vovo-ticks li { position: relative; margin: 0; padding-inline-start: 1.9rem; color: var(--wp--preset--color--contrast); }
.vovo-ticks li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.2em;
	width: 1.2rem;
	height: 1.2rem;
	background: var(--wp--preset--color--success);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vovo-price .wp-block-buttons { margin-top: auto; }
.vovo-price .wp-block-button, .vovo-price .wp-block-button__link { width: 100%; text-align: center; }

.vovo-table-wrap table { width: 100%; border-collapse: collapse; }
.vovo-table-wrap th, .vovo-table-wrap td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--wp--preset--color--border); text-align: center; }
.vovo-table-wrap th:first-child, .vovo-table-wrap td:first-child { text-align: left; }
.vovo-table-wrap thead th { color: var(--wp--preset--color--contrast); font-weight: 700; }
.vovo-table-wrap tbody td { color: var(--wp--preset--color--muted); }
.vovo-table-wrap tbody td:first-child { color: var(--wp--preset--color--contrast); font-weight: 500; }

/* FAQ. */
.vovo-faq { max-width: 48rem; margin-inline: auto; }
.vovo-faq details { margin: 0; border-bottom: 1px solid var(--wp--preset--color--border); }
.vovo-faq details:first-child { border-top: 1px solid var(--wp--preset--color--border); }
.vovo-faq summary { padding: var(--wp--preset--spacing--40) 0; cursor: pointer; font-weight: 600; font-size: var(--wp--preset--font-size--large); }
.vovo-faq details > p { margin: 0; padding-bottom: var(--wp--preset--spacing--40); color: var(--wp--preset--color--muted); }

/* Call to action and announcement bar. */
.vovo-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--wp--custom--radius--large);
	background: linear-gradient(135deg, #5736e8, #7d54ff 60%, #9a6bff);
	color: #fff;
	text-align: center;
}
.vovo-cta::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: auto -10% -60% auto;
	width: 60%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), transparent);
}
.vovo-cta h2, .vovo-cta p { color: #fff; }
.vovo-cta .wp-block-button__link { background: #fff; color: #191624; }
.vovo-cta .wp-block-button__link:hover { background: #eae4ff; color: #191624; }
.vovo-cta .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.vovo-cta .wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: #fff; }
.vovo-cta :focus-visible { outline-color: #fff; }
.vovo-announce { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); text-align: center; font-size: var(--wp--preset--font-size--small); }
.vovo-announce p { margin: 0; }
.vovo-announce a { color: inherit; font-weight: 700; }

/* Header and footer. */
.vovo-header .wp-block-navigation { gap: var(--wp--preset--spacing--40); }
.vovo-header .wp-block-buttons .wp-block-button__link { padding: 0.6em 1.2em; font-size: var(--wp--preset--font-size--small); }
.vovo-footer-cols { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--60); }
.vovo-footer-cols h2 { margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.vovo-footer-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.vovo-footer-cols li { margin: 0; }
.vovo-footer-cols a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.vovo-footer-cols a:hover { text-decoration: underline; }

/* Responsive. */
@media (max-width: 1024px) {
	.vovo-grid--4, .vovo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vovo-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vovo-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vovo-bento > *, .vovo-bento > .vovo-bento__wide, .vovo-bento > .vovo-bento__half { grid-column: span 1; }
	.vovo-bento > .vovo-bento__wide { grid-column: 1 / -1; }
	.vovo-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.vovo-grid--3, .vovo-grid--2 { grid-template-columns: minmax(0, 1fr); }
	.vovo-dash__body { grid-template-columns: 1fr; }
	.vovo-dash__side { display: none; }
	.vovo-dash__toast { right: 0.75rem; }
	.vovo-price__badge { top: -0.8rem; }
}
@media (max-width: 600px) {
	.vovo-grid--4, .vovo-tiles, .vovo-metrics, .vovo-bento { grid-template-columns: minmax(0, 1fr); }
	.vovo-bento > .vovo-bento__wide { grid-column: auto; }
	.vovo-dash__kpis { grid-template-columns: 1fr 1fr; }
	.vovo-dash__kpis > :last-child { display: none; }
	.vovo-footer-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Sections, header and footer. */
.vovo-section { padding-block: var(--wp--preset--spacing--90); }
.vovo-section--hero { padding-top: var(--wp--preset--spacing--80); }
.vovo-section--tight { padding-block: var(--wp--preset--spacing--80); }
.vovo-section-head { margin-bottom: var(--wp--preset--spacing--70); }
.vovo-hero__visual { margin-top: var(--wp--preset--spacing--70); }
.vovo-split-second { margin-top: var(--wp--preset--spacing--90); }
.vovo-price__line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.vovo-price__line > * { margin: 0; }
.vovo-cta__inner { display: grid; gap: var(--wp--preset--spacing--40); justify-items: center; padding-block: var(--wp--preset--spacing--80); padding-inline: var(--wp--preset--spacing--40); }
.vovo-cta__inner > * { margin: 0; }
.vovo-header { padding-block: var(--wp--preset--spacing--40); border-bottom: 1px solid var(--wp--preset--color--border); }
.vovo-footer { padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60); border-top: 1px solid var(--wp--preset--color--border); }
.vovo-footer .wp-block-separator { margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40); }

.vovo-hero__title { font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4.4rem); }
.vovo-hero .vovo-section-head .vovo-hero__title { max-width: 20ch; }

/* Layout resets for blocks placed in grids (the flow layout adds a top margin to siblings). */
.vovo-grid > *, .vovo-bento > *, .vovo-metrics > *, .vovo-tiles > * { margin-block: 0 !important; }
.vovo-steps { margin-block-start: var(--wp--preset--spacing--50) !important; }
.vovo-section .vovo-note { margin-top: var(--wp--preset--spacing--40); }
.vovo-card:has(> .vovo-quote), .vovo-card:has(> .wp-block-html) { display: flex; flex-direction: column; }
.vovo-card > .vovo-quote { flex: 1; }
.vovo-card p.vovo-price__badge { color: var(--wp--preset--color--on-primary); margin: 0; }
.vovo-price > .vovo-price__badge + * { margin-top: 0; }
@media (max-width: 600px) {
	.vovo-table-wrap th, .vovo-table-wrap td { padding: 0.7rem 0.4rem; font-size: var(--wp--preset--font-size--small); }
}

@media (max-width: 1100px) {
	.vovo-dash__body { grid-template-columns: 1fr; }
	.vovo-dash__side { display: none; }
}
@media (max-width: 900px) {
	.vovo-hero .wp-block-columns { flex-wrap: wrap !important; }
	.vovo-hero .wp-block-column { flex-basis: 100% !important; }
}
.wp-block-table.vovo-table-wrap table, .wp-block-table.vovo-table-wrap th, .wp-block-table.vovo-table-wrap td { border: 0; border-bottom: 1px solid var(--wp--preset--color--border); }
.wp-block-table.vovo-table-wrap thead { border: 0; }

/* ===== VOVO One v2 prototype additions (appended to components.css in the prototype build) ===== */

/* Hero v2: bolder headline, grid backdrop, layered stage. */
.vovo-hero--v2 { padding-bottom: var(--wp--preset--spacing--90); }
.vovo-hero--v2::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--border) 70%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--border) 70%, transparent) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 20%, transparent 75%);
	pointer-events: none;
}
.vovo-hero__title--xl { font-size: clamp(2.7rem, 1.1rem + 4.4vw, 5.2rem); line-height: 1.02; letter-spacing: -0.045em; }
.vovo-hero--v2 .vovo-lede { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); }
.vovo-eyebrow--live::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--success);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--success) 55%, transparent);
}
.vovo-hero--v2 .vovo-hero__actions .wp-block-button:first-child .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.6em; box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent); }
.vovo-hero--v2 .vovo-hero__actions .wp-block-button:first-child .wp-block-button__link::after {
	content: "";
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: var(--vovo-arrow) center / contain no-repeat;
	mask: var(--vovo-arrow) center / contain no-repeat;
	transition: transform 150ms ease;
}
.vovo-hero--v2 .vovo-hero__actions .wp-block-button:first-child .wp-block-button__link:hover::after { transform: translateX(3px); }
:root { --vovo-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.vovo-proof { display: flex; align-items: center; gap: 0.9rem; margin-top: var(--wp--preset--spacing--50); }
.vovo-proof p { margin: 0; line-height: 1.35; color: var(--wp--preset--color--contrast); }
.vovo-proof small { color: var(--wp--preset--color--muted); }
.vovo-avatars { display: inline-flex; flex: none; }
.vovo-avatars .vovo-avatar { width: 2.25rem; height: 2.25rem; font-size: 0.75rem; border: 2px solid var(--wp--preset--color--base); }
.vovo-avatars .vovo-avatar + .vovo-avatar { margin-inline-start: -0.6rem; }
.vovo-avatars .vovo-avatar:nth-child(2) { background: #2563eb; }
.vovo-avatars .vovo-avatar:nth-child(3) { background: #be2a8c; }
.vovo-avatars .vovo-avatar:nth-child(4) { background: #0e7f6b; }

.vovo-stage { position: relative; padding: 2.75rem 0.5rem 2.75rem 1.75rem; }
.vovo-stage__orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.vovo-stage__orb--a { top: -1rem; right: -2rem; width: 17rem; height: 17rem; background: color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent); }
.vovo-stage__orb--b { bottom: -1rem; left: 14%; width: 12rem; height: 12rem; background: color-mix(in srgb, #2563eb 40%, transparent); }
.vovo-dash--v2 { position: relative; z-index: 1; }
.vovo-dash--v2 .vovo-dash__body { min-height: 24rem; }
.vovo-dash__search { padding: 0.2rem 0.8rem 0.2rem 1.9rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--pill); color: var(--wp--preset--color--muted); font-size: 0.75rem; font-weight: 500; background: var(--wp--preset--color--base); }
.vovo-dash__upgrade { display: grid; gap: 0.35rem; margin-top: 0.6rem; padding: 0.7rem; border-radius: var(--wp--custom--radius--medium); background: var(--wp--preset--color--primary-soft); font-size: 0.75rem; }
.vovo-dash__upgrade span { color: var(--wp--preset--color--muted); }
.vovo-dash__legend { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.4rem; font-size: 0.75rem; color: var(--wp--preset--color--muted); }
.vovo-dash__legend strong { margin-right: auto; color: var(--wp--preset--color--contrast); font-size: 0.8125rem; }
.vovo-key { display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.35rem; border-radius: 50%; }
.vovo-key--a { background: var(--wp--preset--color--primary); }
.vovo-key--b { background: var(--wp--preset--color--muted); opacity: 0.55; }
.vovo-dash__line--alt { stroke: var(--wp--preset--color--muted); stroke-width: 1.6; stroke-dasharray: 4 5; opacity: 0.6; }
.vovo-dash__axis { display: flex; justify-content: space-between; padding-top: 0.3rem; color: var(--wp--preset--color--muted); font-size: 0.6875rem; }
.vovo-dash__table { display: grid; gap: 0.1rem; font-size: 0.75rem; }
.vovo-dash__trow { display: grid; grid-template-columns: 1.4fr 0.9fr 0.8fr; align-items: center; gap: 0.5rem; padding: 0.4rem 0.2rem; border-bottom: 1px solid var(--wp--preset--color--border); }
.vovo-dash__trow:last-child { border-bottom: 0; }
.vovo-dash__trow--head { color: var(--wp--preset--color--muted); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.vovo-chip { display: inline-flex; align-items: center; justify-self: start; padding: 0.12rem 0.6rem; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--link); font-size: 0.6875rem; font-weight: 600; line-height: 1.5; }
.vovo-chip--ok { background: color-mix(in srgb, var(--wp--preset--color--success) 16%, transparent); color: var(--wp--preset--color--success); }
.vovo-chip--warn { background: color-mix(in srgb, var(--wp--preset--color--warning) 18%, transparent); color: var(--wp--preset--color--warning); }
.vovo-chip--muted { background: var(--wp--preset--color--border); color: var(--wp--preset--color--muted); }

.vovo-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 0.95rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--medium); background: var(--wp--preset--color--surface); box-shadow: var(--wp--preset--shadow--lifted); font-size: 0.8125rem; font-weight: 600; color: var(--wp--preset--color--contrast); }
.vovo-float small { display: block; color: var(--wp--preset--color--muted); font-weight: 500; font-size: 0.6875rem; }
.vovo-float strong { font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.1; }
.vovo-float--a { top: 0; left: -0.25rem; flex-direction: column; align-items: flex-start; gap: 0.1rem; min-width: 8.5rem; }
.vovo-float--a .vovo-line { width: 100%; margin-top: 0.3rem; }
.vovo-float--b { right: -0.25rem; bottom: 5.2rem; }
.vovo-float--c { bottom: 0; left: 2.5rem; }
.vovo-float--c .vovo-icon { width: 1.1rem; height: 1.1rem; color: var(--wp--preset--color--success); }
.vovo-line { display: block; height: auto; }
.vovo-line path { fill: none; stroke: var(--wp--preset--color--primary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vovo-live { display: inline-flex; align-items: center; gap: 0.45rem; }
.vovo-live::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--wp--preset--color--success); }
.vovo-float .vovo-avatars .vovo-avatar { width: 1.7rem; height: 1.7rem; font-size: 0.625rem; }

@media (min-width: 1100px) {
	.vovo-dash--v2 { transform: perspective(1800px) rotateY(-9deg) rotateX(3deg); transform-origin: 60% 50%; }
}
@media (max-width: 1100px) {
	.vovo-stage { padding-inline: 0.25rem; }
	.vovo-float--a { left: 0.25rem; }
	.vovo-float--b { right: 0.25rem; }
}
@media (max-width: 781px) {
	.vovo-float--a { display: none; }
	.vovo-float--c { left: 0.75rem; }
	.vovo-float--b { bottom: 4rem; }
	.vovo-dash__trow { grid-template-columns: 1.3fr 0.9fr 0.8fr; }
}

/* Bento v2: asymmetric cells with real mini interfaces. */
.vovo-bento2 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vovo-bento2 > .vovo-bento__a { grid-column: span 4; }
.vovo-bento2 > .vovo-bento__b { grid-column: span 2; grid-row: span 2; }
.vovo-bento2 > .vovo-bento__c, .vovo-bento2 > .vovo-bento__d { grid-column: span 2; }
.vovo-bento2 > .vovo-bento__e, .vovo-bento2 > .vovo-bento__f { grid-column: span 3; }
.vovo-bento2 .vovo-card { position: relative; overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.vovo-bento2 .vovo-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent), transparent 70%); pointer-events: none; }
.vovo-bento2 .vovo-card:hover, .vovo-step:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--border)); box-shadow: var(--wp--preset--shadow--soft); }
.vovo-bigstat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.8rem; margin-bottom: 0.9rem; }
.vovo-bigstat strong { font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); letter-spacing: -0.04em; line-height: 1; color: var(--wp--preset--color--contrast); }
.vovo-bigstat small { flex-basis: 100%; color: var(--wp--preset--color--muted); }
.vovo-spark--tall { height: 7rem; }
.vovo-mini-flow .vovo-flow__node { padding: 0.65rem 0.85rem; }
.vovo-mini-flow .vovo-flow__join { height: 0.9rem; }
.vovo-mini-list { margin: 0; }
.vovo-icon-cloud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; justify-items: start; align-items: center; }
.vovo-icon-cloud .vovo-icon-chip { width: 2.75rem; height: 2.75rem; }
.vovo-icon-cloud small { grid-column: 1 / -1; color: var(--wp--preset--color--muted); font-weight: 600; }
.vovo-bubbles { display: grid; gap: 0.6rem; }
.vovo-bubble { display: flex; align-items: center; gap: 0.6rem; width: fit-content; max-width: 100%; padding: 0.5rem 0.9rem 0.5rem 0.55rem; border: 1px solid var(--wp--preset--color--border); border-radius: 999px; background: var(--wp--preset--color--base); }
.vovo-bubble p { margin: 0 !important; color: var(--wp--preset--color--contrast) !important; font-size: 0.875rem; line-height: 1.35; }
.vovo-bubble .vovo-avatar { width: 1.9rem; height: 1.9rem; font-size: 0.6875rem; }
.vovo-bubble--alt { margin-inline-start: 1.5rem; }
.vovo-bubble--alt .vovo-avatar { background: #2563eb; }
.vovo-perf { display: flex; align-items: center; gap: 1.1rem; }
.vovo-perf strong { display: block; color: var(--wp--preset--color--contrast); }
.vovo-perf small { color: var(--wp--preset--color--muted); }
.vovo-ring { --p: 99; display: grid; place-items: center; flex: none; width: 5.6rem; height: 5.6rem; border-radius: 50%; background: conic-gradient(var(--wp--preset--color--primary) calc(var(--p) * 1%), var(--wp--preset--color--border) 0); position: relative; }
.vovo-ring::before { content: ""; position: absolute; inset: 0.5rem; border-radius: 50%; background: var(--wp--preset--color--surface); }
.vovo-ring span { position: relative; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--wp--preset--color--contrast); }

/* Product showcase rows and panels. */
.vovo-split-row + .vovo-split-row { margin-top: var(--wp--preset--spacing--90); }
.vovo-report__head, .vovo-report__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vovo-report__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 1rem 0; }
.vovo-report__stats small, .vovo-report__foot span:last-child { color: var(--wp--preset--color--muted); font-size: 0.75rem; }
.vovo-report__stats strong { display: block; font-size: 1.4rem; letter-spacing: -0.03em; }
.vovo-report__foot { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--wp--preset--color--border); }
.vovo-rule { display: grid; gap: 0.1rem; }
.vovo-rule__step { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--medium); background: var(--wp--preset--color--base); font-weight: 600; }
.vovo-rule__step--on { border-color: var(--wp--preset--color--primary); }
.vovo-rule__join { width: 2px; height: 1.1rem; margin-inline-start: 1.6rem; background: var(--wp--preset--color--border); }
.vovo-rule__log { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem; color: var(--wp--preset--color--muted); }
.vovo-rule__log .vovo-icon { width: 1rem; height: 1rem; color: var(--wp--preset--color--success); }
.vovo-inbox { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
.vovo-inbox li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8rem; margin: 0; padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--wp--preset--color--border); }
.vovo-inbox li:last-child { border-bottom: 0; }
.vovo-inbox p { margin: 0; line-height: 1.3; }
.vovo-inbox small { display: block; color: var(--wp--preset--color--muted); }
.vovo-inbox .vovo-avatar { width: 2.25rem; height: 2.25rem; font-size: 0.75rem; }
.vovo-inbox li:nth-child(2) .vovo-avatar { background: #2563eb; }
.vovo-inbox li:nth-child(3) .vovo-avatar { background: #be2a8c; }

/* How it works: numbered, connected steps. */
.vovo-steps2 { position: relative; counter-reset: none; }
.vovo-step { position: relative; overflow: visible; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.vovo-step__num { position: absolute; top: 1.25rem; right: 1.5rem; color: color-mix(in srgb, var(--wp--preset--color--primary) 28%, transparent); font-size: 3rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
@media (min-width: 782px) {
	.vovo-steps2 > .vovo-step:not(:last-child)::after { content: ""; position: absolute; top: 3.4rem; right: calc(var(--wp--preset--spacing--50) * -1); width: var(--wp--preset--spacing--50); border-top: 2px dashed color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent); }
}

/* Results. */
.vovo-metrics2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
.vovo-metric { display: grid; gap: 0.15rem; padding: var(--wp--preset--spacing--50); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--large); background: var(--wp--preset--color--surface); }
.vovo-metric strong { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.9rem); letter-spacing: -0.045em; line-height: 1.05; }
.vovo-metric span { color: var(--wp--preset--color--muted); }
.vovo-metric .vovo-line { width: 100%; margin-top: 0.7rem; }
.vovo-quote--feature > p:first-child { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); line-height: 1.45; letter-spacing: -0.01em; }
.vovo-quote--feature::before { content: "\201C"; color: var(--wp--preset--color--primary); font-size: 4rem; line-height: 0.6; font-weight: 800; }

/* CTA: grid texture. */
.vovo-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to right, rgba(255,255,255,0.09) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.09) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000, transparent 80%); mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, #000, transparent 80%); }

/* Motion: small, purposeful, off for reduced-motion, no JavaScript. */
@keyframes vovo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes vovo-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--success) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 0.55rem transparent; } }
@keyframes vovo-rise { from { transform: translateY(26px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.vovo-float--a { animation: vovo-float 7s ease-in-out infinite; }
	.vovo-float--b { animation: vovo-float 8s ease-in-out -2s infinite; }
	.vovo-float--c { animation: vovo-float 9s ease-in-out -4s infinite; }
	.vovo-eyebrow--live::before, .vovo-live::before { animation: vovo-pulse 2.2s ease-out infinite; }
	@supports (animation-timeline: view()) {
		.vovo-reveal { animation: vovo-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
	}
}
@media (prefers-reduced-motion: reduce) {
	.vovo-bento2 .vovo-card, .vovo-step { transition: none; }
	.vovo-bento2 .vovo-card:hover, .vovo-step:hover { transform: none; }
}

/* v2 responsive. */
@media (max-width: 1024px) {
	.vovo-bento2 > .vovo-bento__a { grid-column: 1 / -1; }
	.vovo-bento2 > .vovo-bento__b { grid-row: auto; }
	.vovo-bento2 > .vovo-bento__c, .vovo-bento2 > .vovo-bento__d, .vovo-bento2 > .vovo-bento__e, .vovo-bento2 > .vovo-bento__f { grid-column: span 1; }
}
@media (max-width: 781px) {
	.vovo-metrics2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); }
	.vovo-split-row + .vovo-split-row { margin-top: var(--wp--preset--spacing--80); }
}
@media (max-width: 600px) {
	.vovo-bento2 > * { grid-column: 1 / -1 !important; }
	.vovo-metrics2 { grid-template-columns: minmax(0, 1fr); }
	.vovo-report__stats strong { font-size: 1.15rem; }
	.vovo-proof { align-items: flex-start; }
}
@media print { .vovo-reveal { animation: none !important; opacity: 1 !important; transform: none !important; } }

/* Prototype round 2: hero stage proportions. */
.vovo-hero__title--xl { font-size: clamp(2.6rem, 1rem + 4vw, 4.7rem); }
.vovo-float--a { width: 9.5rem; min-width: 0; }
.vovo-float--b { bottom: 0.2rem; right: 1.25rem; }
.vovo-float--c { bottom: 0.2rem; left: 2.5rem; }
.vovo-split-row .vovo-ticks { margin-top: var(--wp--preset--spacing--40) !important; }
.vovo-step__num::before { content: attr(data-n); }
/* Status chips: neutral text for contrast, colour carried by a dot (also not colour alone: the label says the state). */
.vovo-chip--ok, .vovo-chip--warn, .vovo-chip--muted { color: var(--wp--preset--color--contrast); gap: 0.4em; }
.vovo-chip--ok::before, .vovo-chip--warn::before, .vovo-chip--muted::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.vovo-chip--ok::before { background: var(--wp--preset--color--success); }
.vovo-chip--warn::before { background: var(--wp--preset--color--warning); }
.vovo-chip--muted::before { background: var(--wp--preset--color--muted); }
/* Tablet: keep the floating signups card above the window instead of over its data. */
@media (max-width: 1100px) { .vovo-stage { padding-top: 5rem; } .vovo-float--a { top: 0; } }

/* ===== v2 preview: brand mark, blog, single post, search, 404 ===== */

/* Brand mark before the site title (pure CSS, replaceable with a Site Logo block). */
.vovo-header .wp-block-site-title a { display: inline-flex; align-items: center; gap: 0.55rem; }
.vovo-header .wp-block-site-title a::before {
	content: "";
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 0.38rem;
	background: linear-gradient(135deg, var(--wp--preset--color--primary), #9b7bff);
	box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--wp--preset--color--primary) 80%, transparent);
}

/* Blog cards (text-first, no photos needed). */
.vovo-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50); margin: 0; padding: 0; list-style: none; }
.vovo-post-grid > li { margin: 0 !important; }
.vovo-post-card { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); position: relative; overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.vovo-post-card::before { content: ""; display: block; width: 3rem; height: 0.3rem; border-radius: 99px; background: linear-gradient(90deg, var(--wp--preset--color--primary), #9b7bff); }
.vovo-post-grid > li:nth-child(3n+2) .vovo-post-card::before { background: linear-gradient(90deg, #2563eb, #7aa7ff); }
.vovo-post-grid > li:nth-child(3n) .vovo-post-card::before { background: linear-gradient(90deg, #be2a8c, #f08bd0); }
.vovo-post-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--border)); box-shadow: var(--wp--preset--shadow--soft); }
.vovo-post-card > * { margin: 0 !important; }
.vovo-post-card__cat, .vovo-post-card__cat a { color: var(--wp--preset--color--link); font-size: var(--wp--preset--font-size--small); font-weight: 700; text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; }
.vovo-post-card .wp-block-post-title { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.2; }
.vovo-post-card .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.vovo-post-card .wp-block-post-title a:hover { text-decoration: underline; }
.vovo-post-card .wp-block-post-excerpt { color: var(--wp--preset--color--muted); }
.vovo-post-card .wp-block-post-excerpt__excerpt { margin: 0; }
.vovo-post-card__meta { margin-top: auto !important; padding-top: var(--wp--preset--spacing--30); gap: 0.4rem 0.9rem !important; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.vovo-post-card__meta .wp-block-post-author-name { color: var(--wp--preset--color--contrast); font-weight: 600; }
.vovo-post-card__meta > * { margin: 0 !important; }
@media (min-width: 1025px) {
	.vovo-post-grid > li:first-child { grid-column: span 2; }
	.vovo-post-grid > li:first-child .wp-block-post-title { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); }
	.vovo-post-grid > li:first-child .wp-block-post-excerpt { font-size: var(--wp--preset--font-size--large); }
}
.wp-block-query-pagination { margin-top: var(--wp--preset--spacing--70); gap: 1rem; }
.wp-block-query-pagination a, .wp-block-query-pagination-numbers .page-numbers { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.9rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); text-decoration: none; }
.wp-block-query-pagination-numbers .page-numbers.current { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); }

/* Single post. */
.vovo-post-head { text-align: center; }
.vovo-post-head > * { margin-inline: auto; }
.vovo-post-head .vovo-post-card__cat { display: block; }
.vovo-post-title { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem); letter-spacing: -0.04em; line-height: 1.06; max-width: 22ch; margin-top: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--40); }
.vovo-post-head .wp-block-post-excerpt { max-width: 40rem; }
.vovo-post-head .vovo-post-card__meta { justify-content: center; margin-top: var(--wp--preset--spacing--40) !important; }
.vovo-post-body { padding-bottom: var(--wp--preset--spacing--90); }
.vovo-post-body .wp-block-post-content { font-size: var(--wp--preset--font-size--large); line-height: 1.75; }
.vovo-post-body .wp-block-post-content > * + * { margin-block-start: 1.25em; }
.vovo-post-body .wp-block-post-content h2 { margin-top: 2em; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.vovo-post-body .wp-block-post-content h3 { margin-top: 1.6em; }
.vovo-post-body .wp-block-post-content ul, .vovo-post-body .wp-block-post-content ol { padding-inline-start: 1.4em; }
.vovo-post-body .wp-block-post-content li + li { margin-top: 0.45em; }
.vovo-post-body .wp-block-quote { margin-inline: 0; padding-block: 0.2em; font-size: 1.15em; }
.vovo-post-body .wp-block-quote p { color: var(--wp--preset--color--contrast); }
.vovo-post-body .wp-block-quote cite { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); font-style: normal; }
.vovo-author { margin-top: var(--wp--preset--spacing--70); padding: var(--wp--preset--spacing--50); height: auto; }
.vovo-author .wp-block-post-author__name { font-weight: 700; font-size: var(--wp--preset--font-size--large); }
.vovo-author .wp-block-post-author__byline { margin: 0 0 0.2rem; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.06em; }
.vovo-author .wp-block-post-author__bio { margin: 0.4rem 0 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--medium); }
.vovo-post-nav { margin-top: var(--wp--preset--spacing--60); gap: 1rem; }
.vovo-post-nav > * { flex: 1 1 14rem; padding: var(--wp--preset--spacing--40); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--medium); background: var(--wp--preset--color--surface); margin: 0 !important; }
.vovo-post-nav a { color: var(--wp--preset--color--contrast); font-weight: 600; text-decoration: none; }
.vovo-post-nav .post-navigation-link-next { text-align: end; }
.vovo-post-nav .post-navigation-link__label { display: block; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }

/* Search form and 404. */
.wp-block-search__inside-wrapper { gap: 0.5rem; max-width: 34rem; margin-inline: auto; }
.wp-block-search .wp-block-search__input { flex: 1 1 12rem; min-height: 3rem; padding-inline: 1.1rem; border-radius: var(--wp--custom--radius--pill); }
.wp-block-search .wp-block-search__button { min-height: 3rem; margin: 0; padding-inline: 1.4rem; border: 0; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); font-weight: 600; cursor: pointer; }
.wp-block-search .wp-block-search__button:hover { background: var(--wp--preset--color--primary-hover); }
.wp-block-search .wp-block-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.vovo-notfound { gap: var(--wp--preset--spacing--40); }
.vovo-404 { margin: 0; font-size: clamp(6rem, 3rem + 14vw, 12rem); font-weight: 800; letter-spacing: -0.07em; line-height: 0.9; background: linear-gradient(135deg, var(--wp--preset--color--primary), #9b7bff 55%, #be2a8c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.vovo-page-head { padding-bottom: 0; }

@media (max-width: 1024px) { .vovo-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vovo-post-grid { grid-template-columns: minmax(0, 1fr); } .vovo-post-nav .post-navigation-link-next { text-align: start; } }
@media (prefers-reduced-motion: reduce) { .vovo-post-card { transition: none; } .vovo-post-card:hover { transform: none; } }

/* ===== v2 round 3: closer to the original concept (energy glow, arcs, planet, bleeding tilted dashboard, gradient accent, split CTA) ===== */

/* Glow strengths come from theme.json (Light) and styles/dark.json (Dark): --wp--custom--glow--a/b/c and --arc. */
.vovo-hero--v2::before {
	inset: -12% -8% auto auto;
	width: 100%;
	height: 125%;
	aspect-ratio: auto;
	background:
		radial-gradient(ellipse 52% 58% at 76% 34%, color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--glow--a, 30%), transparent), transparent 70%),
		radial-gradient(ellipse 38% 42% at 94% 6%, color-mix(in srgb, #9b7bff var(--wp--custom--glow--b, 22%), transparent), transparent 70%),
		radial-gradient(ellipse 34% 38% at 52% 88%, color-mix(in srgb, #2563eb var(--wp--custom--glow--c, 12%), transparent), transparent 72%);
	-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
	mask-image: linear-gradient(to bottom, #000 62%, transparent);
}

/* Gradient accent word in the hero headline. */
.vovo-hero__title mark.has-inline-color {
	background-image: linear-gradient(95deg, var(--wp--preset--color--link), var(--wp--preset--color--primary) 52%, #c24fd6) !important;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent !important;
}

/* Arcs and planet behind the dashboard. */
.vovo-stage__arc { position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; border: 2px solid color-mix(in srgb, #a98bff var(--wp--custom--glow--arc, 40%), transparent); pointer-events: none; -webkit-mask-image: linear-gradient(130deg, #000 5%, transparent 58%); mask-image: linear-gradient(130deg, #000 5%, transparent 58%); }
.vovo-stage__arc--a { width: 36rem; top: -11rem; right: -12rem; }
.vovo-stage__arc--b { width: 25rem; top: -4.5rem; right: -5.5rem; border-width: 1.5px; transform: rotate(40deg); }
.vovo-stage__planet {
	position: absolute;
	z-index: 0;
	top: -0.25rem;
	right: 9%;
	width: 4.4rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 26%, #d8caff 0, #9a78ff 26%, #5232e0 58%, #170f4a 100%);
	box-shadow: 0 0 46px 8px color-mix(in srgb, #8f6bff var(--wp--custom--glow--a, 30%), transparent), inset -7px -9px 16px rgba(10, 6, 40, 0.4);
}
.vovo-stage { padding-top: 3.25rem; }
.vovo-stage__orb--a { width: 24rem; height: 24rem; background: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--glow--a, 30%), transparent); }

/* Big revenue figure, like the concept dashboard. */
.vovo-dash__kpis { grid-template-columns: 1.45fr 1fr 1fr; }
.vovo-dash__kpi--hero { background: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent), transparent 80%); border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--wp--preset--color--border)); }
.vovo-dash__kpi--hero strong { font-size: 1.75rem; letter-spacing: -0.04em; }

/* "+3x" card. */
.vovo-float--d { top: 5.4rem; right: 0.6rem; flex-direction: column; align-items: flex-start; gap: 0; padding: 0.6rem 0.95rem; }
.vovo-float--d strong { font-size: 2rem; letter-spacing: -0.05em; color: var(--wp--preset--color--link); line-height: 1; }

/* Tilted dashboard that bleeds off the right edge on wide screens. */
@media (min-width: 1100px) {
	.vovo-hero--v2 .vovo-stage { margin-right: calc((min(100vw, 1920px) - 1200px) / -2); }
	.vovo-hero--v2 .vovo-dash--v2 { transform: perspective(1900px) rotateY(-14deg) rotateX(5deg) rotate(-1.5deg) scale(1.07); transform-origin: 20% 50%; }
	.vovo-hero--v2 .vovo-dash--v2 .vovo-dash__body { min-height: 27rem; }
}
@media (max-width: 781px) { .vovo-float--d { display: none; } .vovo-stage__planet { right: 6%; width: 3.2rem; } .vovo-stage__arc--a { width: 24rem; right: -9rem; } .vovo-stage__arc--b { display: none; } }

/* Results as one row. */
.vovo-metrics2--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .vovo-metrics2--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .vovo-metrics2--row { grid-template-columns: minmax(0, 1fr); } }

/* Split call to action with a circular arrow, like the concept. */
.vovo-cta--split { text-align: left; background: radial-gradient(ellipse 60% 130% at 100% 50%, rgba(160, 128, 255, 0.55), transparent 62%), linear-gradient(120deg, #1a1150, #35219f 52%, #6a45ff); }
.vovo-cta__inner.vovo-cta__inner--split { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: var(--wp--preset--spacing--60); padding-inline: clamp(1.5rem, 5vw, 4.5rem); }
.vovo-cta__copy { display: grid; gap: var(--wp--preset--spacing--40); justify-items: start; }
.vovo-cta__copy > * { margin: 0; }
.vovo-cta__go { display: grid; place-items: center; width: clamp(4.5rem, 8vw, 6.5rem); aspect-ratio: 1; border-radius: 50%; background: #fff; color: #2a1a8a; box-shadow: 0 0 0 0.9rem rgba(255, 255, 255, 0.1), 0 24px 60px -12px rgba(0, 0, 0, 0.5); transition: transform 200ms ease; }
.vovo-cta__go .vovo-icon { width: 40%; height: 40%; }
.vovo-cta__go:hover { transform: scale(1.07); }
.vovo-cta__go:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
@media (max-width: 781px) { .vovo-cta__inner.vovo-cta__inner--split { grid-template-columns: minmax(0, 1fr); } .vovo-cta__go { display: none; } }
@media (prefers-reduced-motion: reduce) { .vovo-cta__go { transition: none; } .vovo-cta__go:hover { transform: none; } }
.vovo-float--d { top: 47%; right: 0.4rem; }
.vovo-stage__planet { top: 1.1rem; right: 15%; }
/* Round 3b: luminous rim and a planet that sits above the dashboard. */
.vovo-hero--v2 .vovo-dash--v2 { box-shadow: 0 0 0 1px color-mix(in srgb, #9b7bff var(--wp--custom--glow--rim, 16%), transparent), 0 44px 110px -26px color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--glow--rim, 16%), transparent), var(--wp--preset--shadow--lifted); }
.vovo-stage__planet { z-index: 2; top: -2.4rem; right: 21%; }
.vovo-hero--v2::before { -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.vovo-hero--v2::before {
	background:
		radial-gradient(ellipse 52% 58% at 76% 34%, color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--glow--a, 30%), transparent), transparent 70%),
		radial-gradient(ellipse 38% 42% at 94% 6%, color-mix(in srgb, #9b7bff var(--wp--custom--glow--b, 22%), transparent), transparent 70%),
		radial-gradient(ellipse 42% 46% at 4% 96%, color-mix(in srgb, #6a45ff var(--wp--custom--glow--c, 12%), transparent), transparent 72%),
		radial-gradient(ellipse 34% 38% at 52% 88%, color-mix(in srgb, #2563eb var(--wp--custom--glow--c, 12%), transparent), transparent 72%);
}
/* Round 3c: mobile fixes. */
.vovo-hero--v2::before { -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 78%); mask-image: linear-gradient(to bottom, #000 40%, transparent 78%); }
@media (max-width: 600px) {
	.vovo-dash__kpis { grid-template-columns: 1fr 1fr; }
	.vovo-dash__kpi--hero { grid-column: 1 / -1; }
	.vovo-dash__kpis > :nth-child(3) { display: none; }
}
@media (max-width: 781px) { .vovo-float--c { display: none; } .vovo-float--b { bottom: 0.4rem; right: 0.5rem; } }
@media (max-width: 600px) { .vovo-dash__kpis > :nth-child(2) { grid-column: 1 / -1; } }