/**
 * SafePress Visual Builder
 * Version: 0.1.7.22
 * Style System Reset
 *
 * Goal:
 * - Keep Gutenberg style switching flexible.
 * - Legacy gray/outline block styles are not registered; legacy classes are neutralized and default gray panels are darkened.
 * - Light and dark SafePress styles remain stable.
 */

:root {
	--spvb-text-dark: #111827;
	--spvb-text-muted: #4b5563;
	--spvb-text-light: #ffffff;
	--spvb-text-light-muted: rgba(255, 255, 255, 0.86);
	--spvb-bg-light: #ffffff;
	--spvb-bg-soft: #ffffff;
	--spvb-bg-gray: #111827;
	--spvb-bg-gray-soft: #1f2937;
	--spvb-bg-dark: #111827;
	--spvb-bg-dark-soft: #1f2937;
	--spvb-border-light: rgba(17, 24, 39, 0.12);
	--spvb-border-dark: rgba(255, 255, 255, 0.20);
	--spvb-accent: #2563eb;
	--spvb-accent-dark: #1d4ed8;
	--spvb-radius-lg: 18px;
	--spvb-radius-xl: 26px;
	--spvb-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

/* Base layout */
.spvb-section {
	padding: clamp(42px, 7vw, 92px) clamp(18px, 4vw, 42px);
	margin-block: 0;
	box-sizing: border-box;
}

.spvb-compact {
	padding-block: clamp(28px, 5vw, 58px);
}

.spvb-section,
.spvb-card,
.spvb-panel,
.spvb-toc-card,
.spvb-product-summary,
.spvb-calculator-shell,
.spvb-newsletter-box,
.spvb-deal-callout,
.spvb-tech-console,
.spvb-visual-placeholder,
.is-style-safepress-card,
.is-style-safepress-hero-panel,
.is-style-safepress-soft-card,
.is-style-safepress-accent-card,
.is-style-safepress-gradient-card,
.is-style-safepress-dark-card {
	box-sizing: border-box;
}

.spvb-columns,
.spvb-grid-2,
.spvb-grid-3,
.spvb-grid-4 {
	gap: clamp(18px, 3vw, 34px) !important;
}

/* Surfaces */
.spvb-surface-light,
.spvb-style-calculator-tool {
	background: #ffffff;
	border: 1px solid var(--spvb-border-light);
	border-radius: var(--spvb-radius-xl);
}

.spvb-surface-gradient,
.is-style-safepress-gradient-card {
	background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 34%), linear-gradient(135deg, #ffffff 0%, #eef2ff 100%);
	border: 1px solid rgba(37, 99, 235, 0.16);
	border-radius: var(--spvb-radius-xl);
}

.spvb-surface-dark,
.spvb-panel-dark,
.spvb-style-dark-tech,
.spvb-tech-console,
.is-style-safepress-dark-card {
	background: radial-gradient(circle at top, rgba(37, 99, 235, 0.32), transparent 38%), linear-gradient(135deg, #0f172a 0%, #111827 58%, #1e1b4b 100%);
	border-radius: var(--spvb-radius-xl);
}

.spvb-style-affiliate-magazine {
	background: linear-gradient(180deg, #fff7ed 0%, #ffffff 45%, #ffffff 100%);
	border: 1px solid rgba(234, 88, 12, 0.12);
	border-radius: var(--spvb-radius-xl);
}

.spvb-card,
.spvb-panel,
.spvb-toc-card,
.spvb-product-summary,
.spvb-calculator-shell,
.spvb-newsletter-box,
.spvb-deal-callout,
.spvb-author-box,
.spvb-editorial-note,
.spvb-guarantee,
.spvb-warning-box,
.spvb-takeaways,
.spvb-tool-card,
.spvb-row-card,
.spvb-step-card,
.spvb-testimonial,
.spvb-icon-card,
.spvb-editor-pick,
.is-style-safepress-card,
.is-style-safepress-soft-card,
.is-style-safepress-hero-panel {
	padding: clamp(20px, 3vw, 32px);
	background: var(--spvb-bg-light);
	border: 1px solid var(--spvb-border-light);
	border-radius: var(--spvb-radius-lg);
	box-shadow: var(--spvb-shadow);
}


.is-style-safepress-accent-card,
.spvb-featured-card {
	background: linear-gradient(180deg, #eff6ff 0%, #ffffff 55%);
	border-color: rgba(37, 99, 235, 0.32);
}

.spvb-card-warning,
.spvb-warning-box {
	background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), #ffffff 48%);
}

.spvb-card-success {
	background: linear-gradient(180deg, rgba(16, 185, 129, 0.12), #ffffff 48%);
}

.spvb-visual-placeholder {
	padding: clamp(26px, 5vw, 54px);
	border-radius: var(--spvb-radius-xl);
	background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.28), transparent 34%), linear-gradient(135deg, #0f172a 0%, #111827 62%, #020617 100%) !important;
	color: #ffffff !important;
	border: 1px solid var(--spvb-border-dark);
}

/* Light contrast. Do not apply this when the same block is switched to dark style. */
.spvb-on-light:not(.is-style-safepress-dark-card),
.spvb-on-light:not(.is-style-safepress-dark-card) :where(h1, h2, h3, h4, h5, h6, p, li, figcaption, label, td, th, strong, em, span):not(.wp-block-button__link) {
	color: var(--spvb-text-dark) !important;
}

.spvb-on-light:not(.is-style-safepress-dark-card) .spvb-muted,
.spvb-on-light:not(.is-style-safepress-dark-card) .spvb-lead {
	color: var(--spvb-text-muted) !important;
}

/* Dark contrast. */
.spvb-on-dark,
.spvb-surface-dark,
.spvb-panel-dark,
.spvb-style-dark-tech,
.spvb-tech-console,
.spvb-visual-placeholder,
.is-style-safepress-dark-card,
.spvb-on-dark :where(h1, h2, h3, h4, h5, h6, p, li, figcaption, label, td, th, strong, em, span, a):not(.wp-block-button__link),
.spvb-surface-dark :where(h1, h2, h3, h4, h5, h6, p, li, figcaption, label, td, th, strong, em, span, a):not(.wp-block-button__link),
.spvb-panel-dark :where(h1, h2, h3, h4, h5, h6, p, li, figcaption, label, td, th, strong, em, span, a):not(.wp-block-button__link),
.spvb-style-dark-tech :where(h1, h2, h3, h4, h5, h6, p, li, figcaption, label, td, th, strong, em, span, a):not(.wp-block-button__link),
.spvb-tech-console :where(h1, h2, h3, h4, h5, h6, p, li, figcaption, label, td, th, strong, em, span, a):not(.wp-block-button__link),
.spvb-visual-placeholder :where(h1, h2, h3, h4, h5, h6, p, li, figcaption, label, td, th, strong, em, span, a):not(.wp-block-button__link),
.is-style-safepress-dark-card :where(h1, h2, h3, h4, h5, h6, p, li, figcaption, label, td, th, strong, em, span, a):not(.wp-block-button__link) {
	color: var(--spvb-text-light) !important;
}

.spvb-on-dark .spvb-muted,
.spvb-on-dark .spvb-lead,
.spvb-surface-dark .spvb-muted,
.spvb-surface-dark .spvb-lead,
.spvb-style-dark-tech .spvb-muted,
.spvb-style-dark-tech .spvb-lead,
.is-style-safepress-dark-card .spvb-muted,
.is-style-safepress-dark-card .spvb-lead {
	color: var(--spvb-text-light-muted) !important;
}


/* Core typography helpers */
.spvb-title-xl {
	font-size: clamp(2.2rem, 6vw, 5rem);
	line-height: 0.95;
	letter-spacing: -0.05em;
	margin-block: 0.3rem 1.1rem;
}

.spvb-lead {
	font-size: clamp(1.05rem, 2vw, 1.28rem);
	line-height: 1.65;
}

.spvb-center {
	max-width: 760px;
	margin-inline: auto;
}

.spvb-eyebrow,
.spvb-kicker,
.spvb-mini-label,
.spvb-badge {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.spvb-badge {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(37, 99, 235, 0.12);
	color: #1d4ed8 !important;
}

.spvb-on-dark .spvb-badge,
.is-style-safepress-dark-card .spvb-badge {
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff !important;
}

.spvb-list-check {
	padding-left: 1.2rem;
}

.spvb-list-check li {
	margin-block: 0.45rem;
}

.spvb-stat {
	font-size: clamp(1.8rem, 3vw, 2.8rem);
	font-weight: 900;
	line-height: 1;
	margin-bottom: 0.25rem;
}

.spvb-stat-light {
	color: #ffffff !important;
}

/* Buttons */
.wp-block-button.is-style-safepress-primary .wp-block-button__link,
.is-style-safepress-primary .wp-block-button__link {
	background: var(--spvb-accent) !important;
	color: #ffffff !important;
	border: 1px solid var(--spvb-accent) !important;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none !important;
}

.wp-block-button.is-style-safepress-primary .wp-block-button__link:hover,
.is-style-safepress-primary .wp-block-button__link:hover {
	background: var(--spvb-accent-dark) !important;
	color: #ffffff !important;
}

.wp-block-button.is-style-safepress-secondary .wp-block-button__link,
.is-style-safepress-secondary .wp-block-button__link {
	background: transparent !important;
	color: currentColor !important;
	border: 1px solid currentColor !important;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none !important;
}

.spvb-on-dark .is-style-safepress-secondary .wp-block-button__link,
.is-style-safepress-dark-card .is-style-safepress-secondary .wp-block-button__link {
	color: #ffffff !important;
	border-color: rgba(255,255,255,0.78) !important;
}

/* Tables */
.spvb-section table,
.spvb-card table,
.spvb-table table {
	width: 100%;
	border-collapse: collapse;
	background: #ffffff;
}

.spvb-section th,
.spvb-card th,
.spvb-table th {
	background: #111827 !important;
	color: #ffffff !important;
}

.spvb-section td,
.spvb-card td,
.spvb-table td {
	border: 1px solid rgba(148, 163, 184, 0.35);
	color: var(--spvb-text-dark) !important;
	background: #ffffff;
	padding: 0.85rem;
}

/* Small layout helpers */
.spvb-trust-bar,
.spvb-proof-strip,
.spvb-tool-strip,
.spvb-pricing-strip {
	align-items: center;
	border: 1px solid var(--spvb-border-light);
	border-radius: var(--spvb-radius-lg);
	padding: 1rem;
	background: var(--spvb-bg-soft);
}

.spvb-icon-dot,
.spvb-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 999px;
	background: rgba(37, 99, 235, 0.12);
	color: var(--spvb-accent) !important;
	font-weight: 800;
}

.spvb-price {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	margin: 0.2rem 0 0.8rem;
}

@media (max-width: 780px) {
	.spvb-section {
		padding-inline: 18px;
	}

	.spvb-title-xl {
		font-size: clamp(2rem, 12vw, 3.3rem);
	}
}


/* 0.1.6 additions: black/white production-safe patterns */
.spvb-answer-box {
	border-left: 6px solid var(--spvb-accent);
}

.spvb-section .spvb-table {
	overflow-x: auto;
}

.spvb-section .wp-block-columns.spvb-grid-3 > .wp-block-column,
.spvb-section .wp-block-columns.spvb-grid-2 > .wp-block-column {
	min-width: 0;
}

.spvb-featured-card .spvb-badge {
	background: rgba(37, 99, 235, 0.16);
}

@media (max-width: 780px) {
	.spvb-section .wp-block-buttons {
		justify-content: flex-start !important;
	}
}

/* 0.1.7.4 legacy cleanup.
 * Gray and Outline are no longer registered as selectable SafePress styles.
 * Existing saved blocks may still contain old is-style-* classes in post content.
 * Render those old classes as clean light cards instead of gray/outline surfaces.
 */
.is-style-safepress-gray,
.is-style-safepress-grey,
.is-style-safepress-gray-card,
.is-style-safepress-grey-card,
.is-style-safepress-outline-card,
.is-style-safepress-outline {
	background: #ffffff !important;
	color: var(--spvb-text-dark) !important;
	border: 1px solid var(--spvb-border-light) !important;
	border-radius: var(--spvb-radius-lg);
	box-shadow: var(--spvb-shadow);
}

.is-style-safepress-gray :where(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, a):not(.wp-block-button__link),
.is-style-safepress-grey :where(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, a):not(.wp-block-button__link),
.is-style-safepress-gray-card :where(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, a):not(.wp-block-button__link),
.is-style-safepress-grey-card :where(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, a):not(.wp-block-button__link),
.is-style-safepress-outline-card :where(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, a):not(.wp-block-button__link),
.is-style-safepress-outline :where(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, a):not(.wp-block-button__link) {
	color: var(--spvb-text-dark) !important;
}

.is-style-safepress-gray .spvb-muted,
.is-style-safepress-grey .spvb-muted,
.is-style-safepress-gray-card .spvb-muted,
.is-style-safepress-grey-card .spvb-muted,
.is-style-safepress-outline-card .spvb-muted,
.is-style-safepress-outline .spvb-muted,
.is-style-safepress-gray .spvb-lead,
.is-style-safepress-grey .spvb-lead,
.is-style-safepress-gray-card .spvb-lead,
.is-style-safepress-grey-card .spvb-lead,
.is-style-safepress-outline-card .spvb-lead,
.is-style-safepress-outline .spvb-lead {
	color: var(--spvb-text-muted) !important;
}

/* 0.1.7.7: white default cleanup.
 * The selectable legacy gray/outline styles are removed.
 * Some default helper surfaces previously looked gray because they used soft neutral backgrounds.
 * Keep default/light patterns white; use only explicit dark styles for dark sections.
 */
.spvb-surface-light,
.spvb-section.spvb-on-light,
.spvb-trust-bar,
.spvb-proof-strip,
.spvb-tool-strip,
.spvb-pricing-strip,
.spvb-logo-cloud,
.spvb-card,
.spvb-panel,
.spvb-toc-card,
.spvb-product-summary,
.spvb-calculator-shell,
.spvb-newsletter-box,
.spvb-deal-callout,
.spvb-author-box,
.spvb-editorial-note,
.spvb-guarantee,
.spvb-takeaways,
.is-style-safepress-card,
.is-style-safepress-soft-card,
.is-style-safepress-hero-panel {
	background-color: #ffffff;
}

.spvb-section.spvb-surface-dark,
.spvb-section.spvb-on-dark,
.spvb-panel-dark,
.spvb-style-dark-tech,
.spvb-tech-console,
.spvb-visual-placeholder,
.is-style-safepress-dark-card {
	background-color: initial;
}


/* 0.1.7.14 Gutenberg validation cleanup:
   color/background is controlled by CSS classes, not inline group styles.
   Nested light cards inside dark panels must remain readable. */
.spvb-on-dark .spvb-on-light,
.spvb-surface-dark .spvb-on-light,
.is-style-safepress-dark-card .spvb-on-light {
	background: #ffffff;
	color: var(--spvb-text-dark) !important;
}

.spvb-on-dark .spvb-on-light :where(h1, h2, h3, h4, h5, h6, p, li, figcaption, label, td, th, strong, em, span, a):not(.wp-block-button__link),
.spvb-surface-dark .spvb-on-light :where(h1, h2, h3, h4, h5, h6, p, li, figcaption, label, td, th, strong, em, span, a):not(.wp-block-button__link),
.is-style-safepress-dark-card .spvb-on-light :where(h1, h2, h3, h4, h5, h6, p, li, figcaption, label, td, th, strong, em, span, a):not(.wp-block-button__link) {
	color: var(--spvb-text-dark) !important;
}

.spvb-on-dark .spvb-on-light .spvb-muted,
.spvb-on-dark .spvb-on-light .spvb-lead,
.spvb-surface-dark .spvb-on-light .spvb-muted,
.spvb-surface-dark .spvb-on-light .spvb-lead {
	color: var(--spvb-text-muted) !important;
}


/* 0.1.7.15 Gutenberg validation cleanup:
   Text color is now controlled by SafePress surface classes instead of inline HTML color attributes.
   This keeps core/heading, core/paragraph, core/list and core/table blocks valid after insertion. */


/* 0.1.7.16 Gutenberg list/group validation cleanup:
   Pattern markup now includes wp-block-list on core/list HTML and missing wp:group comments around inner SafePress cards/consoles. */

/* 0.1.7.18 image-ready pattern layer.
   These styles support core/image blocks only; users should replace placeholder images after insertion. */
.spvb-image-ready .spvb-image-frame {
	margin: 0;
	border-radius: var(--spvb-radius-lg);
	overflow: hidden;
	border: 1px solid var(--spvb-border-light);
	background: #ffffff;
	box-shadow: var(--spvb-shadow);
}

.spvb-image-ready .spvb-image-frame img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: inherit;
}

.spvb-image-shadow {
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20);
}

.spvb-image-ready .spvb-avatar-image {
	width: 96px;
	height: 96px;
	margin: 0 0 1rem;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: var(--spvb-shadow);
}

.spvb-image-ready .spvb-avatar-image img {
	width: 96px;
	height: 96px;
	object-fit: cover;
}

.spvb-image-ready .spvb-image-wide {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.spvb-image-ready .spvb-image-portrait img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.spvb-image-ready .spvb-image-product img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.spvb-image-ready .spvb-image-illustration {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.18);
}

.spvb-avatar-card {
	text-align: left;
}


/* 0.1.7.19 modern image-ready additions.
   These classes keep image-heavy sections attractive without changing the stable style menu. */
.spvb-centerpiece-grid .spvb-center-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.spvb-mini-image-row {
	margin-top: 1rem;
	gap: 1rem;
}

.spvb-mini-image-row .wp-block-column {
	margin-bottom: 0;
}

.spvb-image-collage .spvb-image-frame + .wp-block-columns {
	margin-top: 1rem;
}

.spvb-inline-image-card .spvb-muted {
	margin-top: .75rem;
}

.spvb-layered-images {
	position: relative;
}

.spvb-layered-images .spvb-layered-small {
	max-width: 72%;
	margin: -3.5rem 0 0 auto;
	position: relative;
	z-index: 2;
}

.spvb-product-image-card .spvb-badge {
	margin-top: 1rem;
}

.spvb-step-image-card .spvb-image-frame {
	margin-bottom: 1rem;
}

@media (max-width: 780px) {
	.spvb-layered-images .spvb-layered-small {
		max-width: 100%;
		margin: 1rem 0 0;
	}
}

/* 0.1.7.20 Pro media patterns.
   Safe, lightweight visual effects only. No heavy 3D scripts or real-time chart code. */
.spvb-pro-media .spvb-video-frame {
	margin: 0;
	border-radius: var(--spvb-radius-lg);
	overflow: hidden;
	border: 1px solid var(--spvb-border-light);
	box-shadow: var(--spvb-shadow);
	background: #0f172a;
}

.spvb-legal-dark {
	background: #07111f;
	padding-top: 72px;
	padding-bottom: 72px;
}

.spvb-legal-dark .spvb-eyebrow,
.spvb-surface-dark .spvb-eyebrow {
	color: #93c5fd;
}

.spvb-legal-dark h1,
.spvb-legal-dark h2,
.spvb-legal-dark h3,
.spvb-legal-dark p,
.spvb-legal-dark li {
	color: #f8fafc;
}

.spvb-legal-dark .spvb-list-check li {
	color: #cbd5e1;
}

.spvb-motion-ready .spvb-motion-card,
.spvb-depth-scene .spvb-depth-card {
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.spvb-motion-ready .spvb-motion-card:hover,
.spvb-depth-scene .spvb-depth-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
	border-color: rgba(37, 99, 235, 0.32);
}

.spvb-depth-scene .spvb-depth-card {
	transform: perspective(900px) rotateX(0deg) rotateY(0deg);
}

.spvb-depth-scene .spvb-depth-card-strong {
	background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
	color: #ffffff;
}

.spvb-depth-scene .spvb-depth-card-strong h1,
.spvb-depth-scene .spvb-depth-card-strong h2,
.spvb-depth-scene .spvb-depth-card-strong h3,
.spvb-depth-scene .spvb-depth-card-strong p {
	color: #ffffff;
}

.spvb-chart-board {
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.32), transparent 36%), #0b1220;
}

.spvb-chart-board .spvb-fake-chart {
	margin-top: 1.25rem;
	padding: 1rem;
	border-radius: var(--spvb-radius-md);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.10);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.spvb-chart-board .spvb-fake-chart p {
	margin: .35rem 0;
	color: #bfdbfe;
	letter-spacing: .03em;
}

.spvb-orbital-hero .spvb-image-frame {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.spvb-grid-4 {
	gap: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	.spvb-motion-ready .spvb-motion-card,
	.spvb-depth-scene .spvb-depth-card {
		transition: none;
	}
	.spvb-motion-ready .spvb-motion-card:hover,
	.spvb-depth-scene .spvb-depth-card:hover {
		transform: none;
	}
}

@media (max-width: 980px) {
	.spvb-grid-4 {
		flex-wrap: wrap !important;
	}
}

/* 0.1.7.21 visual board and dynamic pattern upgrades */
.spvb-title-wide {
	font-size: clamp(2rem, 4.8vw, 4.2rem);
	line-height: 1.04;
	letter-spacing: -0.045em;
	max-width: 980px;
}

.spvb-clean-header {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding-block: clamp(56px, 9vw, 112px);
}

.spvb-moat-board,
.spvb-comparison-board,
.spvb-proof-rails,
.spvb-rss-panel,
.spvb-dynamic-strip {
	overflow: hidden;
}

.spvb-moat-center {
	transform: translateY(-4px);
	border-width: 2px;
}

.spvb-moat-node,
.spvb-compare-card,
.spvb-rail-card {
	position: relative;
}

.spvb-moat-node::before,
.spvb-compare-card::before,
.spvb-rail-card::before {
	content: "";
	display: block;
	width: 42px;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, #2563eb, #7c3aed);
	margin-bottom: 14px;
}

.spvb-moat-footer {
	margin-top: clamp(18px, 3vw, 34px);
	padding: clamp(18px, 3vw, 28px);
	border-radius: var(--spvb-radius-xl);
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(124, 58, 237, 0.08));
	border: 1px solid rgba(37, 99, 235, 0.16);
}

.spvb-decision-strip {
	margin-top: clamp(18px, 3vw, 30px);
	background: linear-gradient(135deg, #ffffff, #eff6ff);
}

.spvb-datetime {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(18px, 3vw, 28px);
	border-radius: var(--spvb-radius-lg);
	background: #0f172a;
	color: #ffffff;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.18);
}

.spvb-datetime-label {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.spvb-datetime time {
	font-size: clamp(1.35rem, 3vw, 2.2rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	color: #ffffff;
}

.spvb-rss-list h3 {
	margin-top: 0;
}

.spvb-rss-list a {
	font-weight: 700;
	text-decoration: none;
}

.spvb-rss-list a:hover {
	text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
	.spvb-moat-center,
	.spvb-compare-card,
	.spvb-rail-card {
		transition: transform 220ms ease, box-shadow 220ms ease;
	}
	.spvb-moat-center:hover,
	.spvb-compare-card:hover,
	.spvb-rail-card:hover {
		transform: translateY(-6px);
		box-shadow: 0 24px 64px rgba(15, 23, 42, 0.16);
	}
}


/* 0.1.7.22 modern comparison boards */
.spvb-comparison-modern .spvb-clean-comparison-header,
.spvb-toolkit-board .spvb-clean-comparison-header {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 0 clamp(24px, 4vw, 44px) !important;
}

.spvb-comparison-modern .spvb-title-wide,
.spvb-toolkit-board .spvb-title-wide {
	font-size: clamp(2.35rem, 5.4vw, 4.8rem);
	line-height: 1.02;
	letter-spacing: -0.055em;
}

.spvb-choice-grid {
	align-items: stretch !important;
}

.spvb-choice-card {
	position: relative;
	overflow: hidden;
	min-height: 100%;
	border: 1px solid rgba(37, 99, 235, 0.16);
}

.spvb-choice-card::after {
	content: "";
	position: absolute;
	right: -44px;
	top: -44px;
	width: 116px;
	height: 116px;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(37, 99, 235, 0.16), transparent 68%);
	pointer-events: none;
}

.spvb-choice-rank {
	font-size: clamp(2.3rem, 5vw, 4.4rem);
	line-height: 0.92;
	font-weight: 900;
	letter-spacing: -0.07em;
	color: rgba(37, 99, 235, 0.22) !important;
	margin: 0 0 12px !important;
}

.spvb-choice-meta {
	margin-block: 18px;
	padding: 14px 16px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(14, 165, 233, 0.06));
	border: 1px solid rgba(37, 99, 235, 0.12);
}

.spvb-choice-meta p {
	margin: 0 0 8px !important;
}

.spvb-choice-meta p:last-child {
	margin-bottom: 0 !important;
}

.spvb-comparison-modern .spvb-decision-strip {
	border: 1px solid rgba(37, 99, 235, 0.18);
	box-shadow: 0 22px 55px rgba(15, 23, 42, 0.10);
}

.spvb-toolkit-board .spvb-list-check {
	margin-top: 16px;
}


/* 0.1.7.24 Premium Gutenberg Lab: shapes, orbit gallery, motion, and details interactions */
.spvb-premium-lab .spvb-title-lg {
	max-width: 980px;
}

.spvb-image-circle-frame {
	aspect-ratio: 1 / 1;
	border-radius: 999px;
	overflow: hidden;
	border: 10px solid #ffffff;
	box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
	background: #ffffff;
}

.spvb-image-circle-frame img,
.spvb-image-hexagon img,
.spvb-orbit-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.spvb-image-hexagon {
	aspect-ratio: 1 / 1;
	clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
	overflow: hidden;
	margin-bottom: 22px !important;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.spvb-hex-card {
	text-align: center;
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
	color: #ffffff !important;
}

.spvb-hex-card h3,
.spvb-hex-card p {
	color: #ffffff !important;
}

.spvb-orbit-gallery {
	position: relative;
	min-height: clamp(520px, 64vw, 760px);
	margin-top: 48px;
}

.spvb-orbit-gallery > .wp-block-image {
	margin: 0 !important;
}

.spvb-orbit-center {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(58vw, 560px);
	transform: translate(-50%, -50%);
	border-radius: 28px;
	overflow: hidden;
	z-index: 2;
}

.spvb-orbit-thumb {
	position: absolute;
	width: clamp(86px, 12vw, 150px);
	aspect-ratio: 1.25 / 1;
	border-radius: 20px;
	overflow: hidden;
	border: 6px solid #ffffff;
	box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
	background: #ffffff;
	z-index: 3;
}

.spvb-orbit-gallery > .spvb-orbit-thumb:nth-of-type(2) { left: 7%; top: 9%; }
.spvb-orbit-gallery > .spvb-orbit-thumb:nth-of-type(3) { left: 42%; top: 0; }
.spvb-orbit-gallery > .spvb-orbit-thumb:nth-of-type(4) { right: 7%; top: 9%; }
.spvb-orbit-gallery > .spvb-orbit-thumb:nth-of-type(5) { right: 0; top: 44%; }
.spvb-orbit-gallery > .spvb-orbit-thumb:nth-of-type(6) { right: 10%; bottom: 8%; }
.spvb-orbit-gallery > .spvb-orbit-thumb:nth-of-type(7) { left: 42%; bottom: 0; }
.spvb-orbit-gallery > .spvb-orbit-thumb:nth-of-type(8) { left: 10%; bottom: 8%; }
.spvb-orbit-gallery > .spvb-orbit-thumb:nth-of-type(9) { left: 0; top: 44%; }

.spvb-middle-main-image {
	border-radius: 34px;
}

.spvb-motion-ribbon {
	overflow: hidden;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.08);
	margin: 34px 0;
	padding: 16px 0;
}

.spvb-motion-text {
	white-space: nowrap;
	font-size: clamp(1rem, 2vw, 1.35rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	color: #ffffff !important;
	margin: 0 !important;
	padding-left: 100%;
}

.spvb-glass-card {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
}

.spvb-action-bloom {
	padding: clamp(28px, 5vw, 54px);
	border-radius: 32px;
	background: linear-gradient(135deg, #0f172a, #1d4ed8);
	box-shadow: 0 30px 90px rgba(15, 23, 42, 0.22);
	color: #ffffff;
}

.spvb-action-bloom summary {
	cursor: pointer;
	list-style: none;
	font-weight: 900;
	font-size: clamp(1.35rem, 3vw, 2.35rem);
	letter-spacing: -0.04em;
	padding: 20px 24px;
	border-radius: 999px;
	background: #ffffff;
	color: #0f172a;
	text-align: center;
}

.spvb-action-bloom summary::-webkit-details-marker {
	display: none;
}

.spvb-bloom-buttons {
	margin-top: 24px !important;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.spvb-bloom-buttons .wp-block-button,
.spvb-bloom-buttons .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.spvb-reveal-card {
	border-radius: 24px;
	border: 1px solid rgba(37, 99, 235, 0.15);
	background: #ffffff;
	padding: 22px;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.spvb-reveal-card summary {
	cursor: pointer;
	font-weight: 900;
	font-size: 1.12rem;
	color: #0f172a;
}

.spvb-reveal-card p {
	margin-bottom: 0 !important;
}

.spvb-editorial-inline-image,
.spvb-sidebar-round-image {
	margin-block: 28px !important;
}

@media (prefers-reduced-motion: no-preference) {
	.spvb-motion-text {
		animation: spvb-marquee 18s linear infinite;
	}
	.spvb-orbit-thumb,
	.spvb-image-circle-frame,
	.spvb-image-hexagon {
		transition: transform 220ms ease, box-shadow 220ms ease;
	}
	.spvb-orbit-thumb:hover,
	.spvb-image-circle-frame:hover,
	.spvb-image-hexagon:hover {
		transform: translateY(-5px) scale(1.02);
	}
}

@keyframes spvb-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-150%); }
}

@media (max-width: 782px) {
	.spvb-orbit-gallery {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
		min-height: auto;
	}
	.spvb-orbit-center,
	.spvb-orbit-thumb {
		position: relative !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		width: 100% !important;
		transform: none !important;
	}
	.spvb-orbit-center {
		grid-column: 1 / -1;
	}
	.spvb-bloom-buttons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 0.1.7.24 Premium shape / motion / interaction tests */
.spvb-premium-shapes .spvb-image-circle-frame,
.spvb-thumb-circle,
.spvb-radial-center .spvb-image-circle-frame {
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}
.spvb-premium-shapes .spvb-image-circle-frame img,
.spvb-thumb-circle img,
.spvb-radial-center .spvb-image-circle-frame img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 999px;
}
.spvb-circle-image-shell { position: relative; display: grid; place-items: center; }
.spvb-mini-orbit-card {
  max-width: 250px;
  margin-top: -54px;
  position: relative;
  z-index: 2;
  border-radius: 22px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
}
.spvb-hex-grid { gap: 22px; margin-top: 32px; }
.spvb-hex-grid-second { max-width: 760px; margin-left: auto; margin-right: auto; }
.spvb-hex-card {
  min-height: 220px;
  padding: 34px 24px;
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.82), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(147, 197, 253, 0.25);
  clip-path: polygon(50% 0%, 95% 24%, 95% 76%, 50% 100%, 5% 76%, 5% 24%);
  display: grid;
  align-content: center;
  text-align: center;
  box-shadow: 0 22px 70px rgba(2, 6, 23, 0.28);
}
.spvb-hex-card h3,
.spvb-hex-card p { color: #fff; }
.spvb-hex-number { color: #93c5fd !important; font-weight: 900; letter-spacing: .12em; }
.spvb-orbit-gallery .spvb-center-orbit-image img { border-radius: 36px; box-shadow: 0 34px 100px rgba(15, 23, 42, .24); }
.spvb-mini-image-grid { gap: 14px; margin-bottom: 14px; }
.spvb-thumb-circle { margin-bottom: 0; transition: transform .28s ease; }
.spvb-thumb-circle:hover { transform: translateY(-4px) scale(1.04); }
.spvb-motion-text { overflow: hidden; }
.spvb-marquee-wrap {
  overflow: hidden;
  border: 1px solid rgba(147, 197, 253, .22);
  border-radius: 999px;
  padding: 14px 0;
  background: rgba(15, 23, 42, .7);
  margin-top: 26px;
  margin-bottom: 18px;
}
.spvb-marquee-line {
  white-space: nowrap;
  min-width: max-content;
  animation: spvbMarquee 22s linear infinite;
  font-weight: 800;
  color: #e0f2fe !important;
  margin: 0;
}
@keyframes spvbMarquee {
  from { transform: translateX(36%); }
  to { transform: translateX(-100%); }
}
.spvb-action-reveal {
  max-width: 860px;
  margin: 32px auto 0;
  border: 1px solid rgba(37, 99, 235, .22);
  border-radius: 28px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .12);
}
.spvb-action-reveal summary {
  cursor: pointer;
  list-style: none;
  text-align: center;
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 14px 24px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-weight: 900;
}
.spvb-action-reveal summary::-webkit-details-marker { display: none; }
.spvb-action-reveal[open] summary { margin-bottom: 18px; }
.spvb-mini-button-cloud { gap: 10px; }
.spvb-inline-float-visual { transform: rotate(1.5deg); }
.spvb-card-fan { position: relative; min-height: 330px; }
.spvb-fan-card {
  position: absolute;
  width: 62%;
  min-height: 160px;
  padding: 26px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(2, 6, 23, .24);
  transition: transform .25s ease;
}
.spvb-fan-card-one { left: 0; top: 52px; transform: rotate(-8deg); }
.spvb-fan-card-two { left: 19%; top: 22px; transform: rotate(2deg); z-index: 2; }
.spvb-fan-card-three { right: 0; top: 82px; transform: rotate(9deg); z-index: 3; }
.spvb-card-fan:hover .spvb-fan-card-one { transform: rotate(-11deg) translateY(-8px); }
.spvb-card-fan:hover .spvb-fan-card-two { transform: rotate(0deg) translateY(-12px); }
.spvb-card-fan:hover .spvb-fan-card-three { transform: rotate(12deg) translateY(-8px); }
.spvb-radial-center {
  padding: 28px;
  border-radius: 40px;
  background: radial-gradient(circle at top, #1d4ed8, #111827 70%);
  box-shadow: 0 34px 100px rgba(15, 23, 42, .22);
}
.spvb-radial-step { margin: 18px 0; }
@media (max-width: 781px) {
  .spvb-hex-card { clip-path: none; border-radius: 28px; min-height: auto; }
  .spvb-fan-card { position: relative; width: auto; left: auto; right: auto; top: auto; transform: none; margin-bottom: 16px; }
  .spvb-card-fan { min-height: auto; }
  .spvb-inline-float-visual { transform: none; }
  .spvb-marquee-line { animation-duration: 30s; }
}
@media (prefers-reduced-motion: reduce) {
  .spvb-marquee-line { animation: none; transform: none; }
  .spvb-thumb-circle,
  .spvb-fan-card { transition: none; }
}

/* SafePress 0.1.7.27 Gutenberg capability tests */
.spvb-test-details .wp-block-details,
.spvb-media-text-card,
.spvb-query-hub .spvb-card,
.spvb-test-dashboard .spvb-card {
  border: 1px solid rgba(15,23,42,.10);
}
.spvb-cover-hero .wp-block-cover__inner-container { width: 100%; }
.spvb-media-text-card {
  border-radius: 28px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(15,23,42,.10);
}
.spvb-gallery-proof .wp-block-image img {
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(15,23,42,.12);
}
.spvb-query-cards {
  display: grid;
  gap: 18px;
}
.spvb-video-embed {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.30);
}
.spvb-motion-card {
  background: #ffffff;
  color: #111827;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 18px 46px rgba(15,23,42,.18);
  transition: transform .22s ease, box-shadow .22s ease;
}
.spvb-motion-card:hover {
  transform: translateY(-8px) rotate(-1deg);
  box-shadow: 0 26px 70px rgba(15,23,42,.26);
}

/* SafePress 0.1.7.28 Kadence-inspired Pro Gutenberg patterns */
.spvb-pro-accordion-hub .spvb-pro-detail-card,
.spvb-tab-board .spvb-tab-card {
  border-radius: 24px;
  padding: 18px 20px;
  border: 1px solid rgba(37, 99, 235, .16);
  background: #ffffff;
  color: #111827;
  box-shadow: 0 18px 48px rgba(15,23,42,.10);
}
.spvb-pro-detail-card summary,
.spvb-tab-card summary {
  cursor: pointer;
  font-weight: 900;
  color: #0f172a;
}
.spvb-tab-board .spvb-tab-card[open] {
  border-color: rgba(147,197,253,.45);
  box-shadow: 0 24px 72px rgba(37,99,235,.22);
}
.spvb-metric-tile { text-align: center; }
.spvb-metric-number {
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1;
  font-weight: 950;
  color: #2563eb !important;
  margin-bottom: 10px;
}
.spvb-countdown-box {
  border-radius: 30px;
  padding: 24px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 24px 70px rgba(2,6,23,.25);
}
.spvb-countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.spvb-countdown div {
  border-radius: 18px;
  padding: 16px 10px;
  text-align: center;
  background: #eff6ff;
}
.spvb-countdown strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
  color: #0f172a;
}
.spvb-countdown span {
  display: block;
  margin-top: 6px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #475569;
  font-weight: 800;
}
.spvb-proof-gallery .wp-block-image img,
.spvb-testimonial-card img,
.spvb-avatar-circle img {
  border-radius: 22px;
  box-shadow: 0 16px 46px rgba(15,23,42,.14);
}
.spvb-avatar-circle img {
  border-radius: 999px;
  width: 74px;
  height: 74px;
  object-fit: cover;
}
.spvb-video-demo-panel .spvb-video-embed {
  border: 1px solid rgba(147,197,253,.22);
}
.spvb-toc-card {
  position: sticky;
  top: 32px;
}
.spvb-progress-stack {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}
.spvb-progress-item {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 16px 20px;
  background: #e5e7eb;
}
.spvb-progress-item p {
  position: relative;
  z-index: 2;
  margin: 0;
  font-weight: 900;
  color: #0f172a;
}
.spvb-progress-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  background: linear-gradient(90deg, #93c5fd, #2563eb);
}
.spvb-progress-80::before { width: 80%; }
.spvb-progress-65::before { width: 65%; }
.spvb-progress-45::before { width: 45%; }
.spvb-icon-card { min-height: 250px; }
.spvb-icon-bubble {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #eff6ff;
  color: #2563eb !important;
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 18px;
}
@media (max-width: 781px) {
  .spvb-countdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spvb-toc-card { position: relative; top: auto; }
}
