body.bodywobg {
  position: relative;
}

body.bodywobg::after {
  content: '';
  position: fixed;
  top: 62px;
  left: 0;
  width: 100%;
  height: calc(100vh - 62px);
  background: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: -1;
}

#h2v-header-wrapper {
  z-index: 999999 !important;
}

/* =============================================================================
   HOME PAGE – INTRO SECTION UNDER HERO
============================================================================= */
.h2v-home-intro {
	padding: 0 20px 80px; /* removed top padding entirely */
	background: transparent;
}

.h2v-home-intro-inner {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}

.h2v-home-intro-inner h2 {
	font-size: 34px;
	font-weight: 700;
	color: #1f2a37;
	margin-bottom: 16px;
}

.h2v-home-intro-subtitle {
	font-size: 18px;
	color: #4b5563;
	max-width: 760px;
	margin: 0 auto 50px;
	line-height: 1.6;
}

/* =============================================================================
   CARD GRID
============================================================================= */
.h2v-home-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

.h2v-home-card {
	background: #ffffff;
	border-radius: 14px;
	padding: 30px 26px;
	text-align: left;
	border: 1px solid #e5e7eb;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.h2v-home-card h3 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 10px;
	color: #1f2a37;
}

.h2v-home-card p {
	font-size: 15px;
	line-height: 1.6;
	color: #4b5563;
}

/* =============================================================================
   RESPONSIVE
============================================================================= */
@media (max-width: 1000px) {
	.h2v-home-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.h2v-home-cards {
		grid-template-columns: 1fr;
	}

	.h2v-home-intro-inner h2 {
		font-size: 28px;
	}
}

/* =============================================================================
   HERO SECTION
============================================================================= */
.h2v-hero-section {
	padding: 25px 20px 10px;
	background: transparent;
	text-align: center;
}

.h2v-hero-containerC {
	max-width: 1150px;
	margin: 0 auto;
}

/* HEADLINE */
.h2v-hero-titleC {
	font-size: 46px;
	color: #1d3557;
	font-weight: 700;
	line-height: 1.18;
	margin-bottom: 20px;
}

/* SUBTITLE — remove bottom spacing control */
.h2v-hero-subtitleC {
	font-size: 20px;
	color: #1d3557;
	max-width: 750px;
	margin: 0 auto; /* spacing handled by button row */
	line-height: 1.45;
}

/* =============================================================================
   BUTTON GROUP — SINGLE SOURCE OF VERTICAL SPACING
============================================================================= */
.h2v-hero-buttonsC {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	margin: 28px 0; /* EQUAL spacing above and below buttons */
}

/* PRIMARY BUTTON */
.h2v-hero-btn {
	background: #457b9d !important;
	color: white !important;
	padding: 14px 28px !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	border: none !important;
	transition: background 0.25s ease !important;
	cursor: pointer !important;
	margin: 0;
}

.h2v-hero-btn:hover {
	background: #1d3557 !important;
	color: #ffffff !important;
}

/* SECONDARY BUTTON */
.h2v-hero-btn-secondary {
	background: #457b9d !important;
	color: white !important;
	padding: 14px 28px !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	border: none !important;
	transition: background 0.25s ease !important;
	cursor: pointer !important;
	margin: 0;
}

.h2v-hero-btn-secondary:hover {
	background: #1d3557 !important;
	color: #ffffff !important;
}

/* SUPPORT LIST */
.h2v-hero-listC {
	list-style: none;
	padding: 0;
	margin: 0 auto 40px;
	font-size: 17px;
	color: #1d3557;
	max-width: 420px;
	line-height: 1.45;
}

.h2v-hero-listC li {
	margin-bottom: 10px;
}

/* IMAGE / VIDEO (NOT USED HERE) */
.h2v-hero-image-wrapperC {
	margin-top: 25px;
}

.h2v-hero-imageC {
	width: 100%;
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

/* MOBILE */
@media (max-width: 768px) {

	.h2v-hero-titleC {
		font-size: 34px;
	}

	.h2v-hero-subtitleC {
		font-size: 18px;
	}
}

/* ============================================================
   FORM ERROR - REUSABLE INLINE ERROR MESSAGE
============================================================ */
.h2v-form-error-inline {
	color: #dc2626;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	margin: 0;
	padding: 3px 0px;
	min-height: 21px; /* Reserve space for one line of text */
	display: block; /* Always visible */
	line-height: 1.0;
}

/* ============================================================
   H2V GLOBAL DESIGN TOKENS — CANONICAL
============================================================ */
:root {
	--h2v-header-bg:		#426B79;
	--h2v-header-text:		#ffffff;

	--h2v-btn-bg:			#426B79;
	--h2v-btn-hover:		#355863;

	--h2v-panel-bg:			#D2D2D2;
	--h2v-text-dark:		#374151;
	--h2v-border-light:		#d1d5db;
}

/* ============================================================
   HEADER HOME RESULTS PANEL — GOLD STANDARD
============================================================ */
.header-home-results-panel {
	padding: 0;
	max-width: 520px;
	margin: 20px auto;
	background: var(--h2v-panel-bg);
	border-radius: 12px;
	overflow: hidden;
	box-shadow:
		0 15px 20px rgba(0,0,0,0.18),
		15px 0 20px rgba(0,0,0,0.18);
	font-family: Montserrat, Arial, sans-serif;
	box-sizing: border-box;
}

/* ============================================================
   HEADER BAR
============================================================ */
.header-panel-header {
	height: 42px;
	background: var(--h2v-header-bg);
	color: var(--h2v-header-text);
	font-size: 1.18em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 14px;
	border-radius: 12px 12px 0 0;
	letter-spacing: 0.01em;
	box-sizing: border-box;
}

.header-panel-title {
	font-weight: 700;
	color: white;
}


/* ============================================================
   H2V BLUE BUTTON — GOLD STANDARD
============================================================ */
button.header-blue-btn {
	background-color: var(--h2v-btn-bg);
	color: var(--h2v-header-text);
	padding: 10px 26px;
	border-radius: 8px;
	font-size: 1em;
	font-weight: 600;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: background-color 0.25s ease;
	box-sizing: border-box;
	margin-top: 10px;
}

button.header-blue-btn:hover {
	background-color: var(--h2v-btn-hover);
}

button.header-blue-btn:disabled {
	opacity: 0.65 !important;
	cursor: not-allowed !important;
}

button.width200 {	width: 200px;	}
button.width250 {	width: 250px;	}
button.width300 {	width: 300px;	}
button.width350 {	width: 350px;	}

button.alignleft {	margin-right: auto; text-align: left;	}
button.alignright {	margin-left: auto; text-align: right;	}

fieldset legend {
	width: auto;
}

/* ============================================================
   WEBFLOW TABS - CUSTOM STYLING
============================================================ */

/* Make tabs fill full width */
.w-tabs .tabs-menu,
.w-tabs .w-tab-menu {
	display: flex;
	width: 100%;
	background: transparent;
	border: 2px solid #426B79;
	border-radius: 8px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.w-tabs .w-tab-link {
	flex: 1;
	text-align: center;
	background: #5a8d99;
	color: #ffffff;
	padding: 5px 7px;
	border: none;
	font-weight: 500;
	font-size: 1em;
	cursor: pointer;
	transition: background 0.3s ease;
	border-right: 1px solid rgba(255,255,255,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto; 
	min-height: 12px;                /* Reduced minimum height for single-line tabs */
	white-space: normal;
	line-height: 1.3;
}

.w-tabs .w-tab-link:last-child {
	border-right: none;
}

/* Active/current tab */
.w-tabs .w-tab-link.w--current {
	background: #426B79;
	font-weight: 700;
}

/* Hover state */
.w-tabs .w-tab-link:hover {
	background: #4a7d89;
}

/* Tab content area - full width */
.w-tab-content,
.w-tabs-content {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.w-tab-pane {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
}

.w-tabs {
	margin-bottom: 0px;
}

.w-tab-pane > *:first-child {
	margin-top: 10px !important;
}

/* ============================================================
   PAGE TITLE BAR - GENERIC STYLING
============================================================ */
.h2v-title-bar {
	width: 100%;
	height: 50px;
	font-family: Montserrat, Arial, sans-serif;
}

.h2v-title-bar h1 {
	width: 100%;
	height: 40px;
	margin: 0px 0px 0px 0px;
	font-size: 1.4em;
	font-weight: 700;
	color: #ffffff;
	background: #426B79;
	border-radius: 8px;
	box-shadow:
		0 15px 15px rgba(0,0,0,0.18),
		15px 0 15px rgba(0,0,0,0.18);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
   SECTION CONTAINER - GENERIC STYLING
============================================================ */
.h2v-section-container {
	width: 100%;  /* Changed from fit-content */
	max-width: 100%;
	background: #ffffff;
	border-radius: 12px;
	padding: 0;
	margin: 10px auto auto auto ;
	box-shadow:
		0 15px 15px rgba(0,0,0,0.18),
		15px 0 15px rgba(0,0,0,0.18);
}
/* ============================================================
   BUTTON CONTAINER - GENERIC STYLING
============================================================ */
.button-container {
	width: 100%;
	max-width: 100%;
	border: 1px solid #cccccc;
	border-radius: 10px;
	margin-top: 10px;
	padding: 5px 16px 5px 16px;
	background: #ffffff;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	box-shadow:
		0 6px 16px rgba(0,0,0,0.30),
		6px 0 16px rgba(0,0,0,0.30);
	font-family: system-ui, sans-serif;
}

.button-container button {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Single button: align right */
.button-container:has(button:only-child) {
	justify-content: flex-end !important;
}

/* Force right alignment when needed */
.button-container-right {
	justify-content: flex-end !important;
}

/* Override to space-between when back button is visible */
.button-container-right.has-back-button {
	justify-content: space-between !important;
}

/* ============================================================
   H2V GRID CONTAINER - FIT CONTENT LAYOUT
============================================================ */
#h2vGridContainer {
	width: 100% !important;
	max-width: 900px !important;
	margin: 0px 5px 5px 5px !important;
	padding: 0px Auto 5px Auto !important;
	display: block;
	flex-direction: column;
	gap: 0;
}

/* All children match the widest child (the grid) */
#h2vGridContainer > * {
	width: 100%;
}

/* Button container inside grid container */
#h2vGridContainer .button-container {
	width: 100% !important;
}

/* Section container inside grid container */
#h2vGridContainer .h2v-section-container {
	width: 100% !important;
}

/* ============================================================
   DESCRIPTION / GUIDED STEP CONTEXT (GLOBAL)
============================================================ */
#guided-step-context {
	background: #B9DDE3;
	border-radius: 8px;
	padding: 18px 22px;
	margin: 16px 20px 22px;
	border-left: 6px solid #426B79;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#guided-step-context .guided-step-title {
	font-size: 16px;
	font-weight: 600;
	color: #426B79;
	margin-bottom: 6px;
}

#guided-step-context .guided-step-description {
	font-size: 14px;
	color: #444;
	line-height: 1.4;
	margin: 0;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 520px) {
	.button-container {
		flex-direction: column;
		align-items: center;
	}
}


/* =============================================================================
   H2V MASTER RESPONSIVE SPACING SYSTEM
   Horizontal padding removed - controlled by Webflow embed settings
============================================================================= */

/* =============================================================================
   STANDARD CONTAINER WIDTHS
============================================================================= */
.h2v-container-standard,
.h2v-pricing-container,
.h2v-register-container,
.h2v-contact-container {
	max-width: 1150px;
	margin: 0 auto;
	padding: 0; /* No horizontal padding */
}

/* Wider containers for content-heavy pages */
.h2v-container-wide {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
}

/* Narrow containers for forms */
.h2v-container-narrow,
.h2v-login-container,
.h2v-forgot-password-container {
	max-width: 600px;
	margin: 0 auto;
	padding: 0;
}

/* =============================================================================
   STANDARD SECTION PADDING
============================================================================= */
.h2v-section-standard,
.h2v-pricing-section,
.h2v-register-section,
.h2v-contact-section {
	padding: 0 0 40px; /* Top: 0, Sides: 0, Bottom: 40px */
}

/* =============================================================================
   GRID SYSTEMS WITH CONSISTENT GAPS
============================================================================= */

/* 3-column grid (desktop) */
.h2v-grid-3col,
.h2v-pricing-context {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	padding: 0; /* No horizontal padding */
}

/* 4-column grid (desktop) */
.h2v-grid-4col,
.h2v-pricing-reassurance-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	padding: 0;
}

/* 2-column grid (desktop) */
.h2v-grid-2col,
.h2v-contact-grid,
.h2v-register-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 35px;
	padding: 0;
}

/* Auto-fit grid (flexible columns) */
.h2v-grid-autofit,
.h2v-pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 35px;
	padding: 0;
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS - TABLET (768px and below)
============================================================================= */
@media (max-width: 768px) {
	/* Container padding stays 0 */
	.h2v-container-standard,
	.h2v-container-wide,
	.h2v-container-narrow,
	.h2v-pricing-container,
	.h2v-register-container,
	.h2v-contact-container,
	.h2v-login-container,
	.h2v-forgot-password-container {
		padding: 0;
	}
	
	/* Section padding - only bottom */
	.h2v-section-standard,
	.h2v-pricing-section,
	.h2v-register-section,
	.h2v-contact-section {
		padding: 0 0 30px;
	}
	
	/* 3-column grids become 1-column */
	.h2v-grid-3col,
	.h2v-pricing-context {
		grid-template-columns: 1fr;
		gap: 25px;
		padding: 0;
	}
	
	/* 4-column grids become 2-column */
	.h2v-grid-4col,
	.h2v-pricing-reassurance-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
		padding: 0;
	}
	
	/* 2-column grids become 1-column */
	.h2v-grid-2col,
	.h2v-contact-grid,
	.h2v-register-grid {
		grid-template-columns: 1fr;
		gap: 30px;
		padding: 0;
	}
	
	/* Auto-fit grids */
	.h2v-grid-autofit,
	.h2v-pricing-grid {
		grid-template-columns: 1fr;
		gap: 30px;
		padding: 0;
	}
	
	/* Make tabs scrollable horizontally on mobile */
	@media (max-width: 768px) {
		.w-tabs .tabs-menu,
		.w-tabs .w-tab-menu {
			display: flex;
			flex-wrap: nowrap;
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			gap: 0;
			border-radius: 8px;
			align-items: stretch; /* ADD THIS - makes all tabs same height */
		}
		
		.w-tabs .w-tab-link {
			flex-shrink: 0;
			min-width: auto;
			white-space: normal; /* Allow text to wrap */
			padding: 8px 16px;
			font-size: 0.9em;
			line-height: 1.3;
			height: auto; /* Allow natural height */
		}
	}	
	/* Optional: Add scroll indicator shadows */
	.w-tabs .tabs-menu::after,
	.w-tabs .w-tab-menu::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 20px;
		background: linear-gradient(to left, rgba(0,0,0,0.1), transparent);
		pointer-events: none;
		opacity: 0.5;
	}
	
	/* Show a small scrollbar */
	.w-tabs .tabs-menu::-webkit-scrollbar,
	.w-tabs .w-tab-menu::-webkit-scrollbar {
		height: 3px;
	}
	
	.w-tabs .tabs-menu::-webkit-scrollbar-thumb,
	.w-tabs .w-tab-menu::-webkit-scrollbar-thumb {
		background: #888;
		border-radius: 2px;
	}
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS - MOBILE (600px and below)
============================================================================= */
@media (max-width: 600px) {
	/* Container padding stays 0 */
	.h2v-container-standard,
	.h2v-container-wide,
	.h2v-container-narrow,
	.h2v-pricing-container,
	.h2v-register-container,
	.h2v-contact-container,
	.h2v-login-container,
	.h2v-forgot-password-container {
		padding: 0;
	}
	
	/* Section padding - only bottom */
	.h2v-section-standard,
	.h2v-pricing-section,
	.h2v-register-section,
	.h2v-contact-section {
		padding: 0 0 25px;
	}
	
	/* All grids with reduced gaps */
	.h2v-grid-3col,
	.h2v-grid-4col,
	.h2v-grid-2col,
	.h2v-grid-autofit,
	.h2v-pricing-context,
	.h2v-pricing-reassurance-cards,
	.h2v-contact-grid,
	.h2v-register-grid,
	.h2v-pricing-grid {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 0;
	}
	
	/* 4-column grids still single column */
	.h2v-grid-4col,
	.h2v-pricing-reassurance-cards {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS - EXTRA SMALL (480px and below)
============================================================================= */
@media (max-width: 480px) {
	/* Container padding stays 0 */
	.h2v-container-standard,
	.h2v-container-wide,
	.h2v-container-narrow,
	.h2v-pricing-container,
	.h2v-register-container,
	.h2v-contact-container,
	.h2v-login-container,
	.h2v-forgot-password-container {
		padding: 0;
	}
	
	/* Section padding - only bottom */
	.h2v-section-standard,
	.h2v-pricing-section,
	.h2v-register-section,
	.h2v-contact-section {
		padding: 0 0 20px;
	}
	
	/* Tighter gaps on very small screens */
	.h2v-grid-3col,
	.h2v-grid-4col,
	.h2v-grid-2col,
	.h2v-grid-autofit,
	.h2v-pricing-context,
	.h2v-pricing-reassurance-cards,
	.h2v-contact-grid,
	.h2v-register-grid,
	.h2v-pricing-grid {
		gap: 15px;
		padding: 0;
	}
}

/* =============================================================================
   SUMMARY OF STANDARD GAPS
============================================================================= */
/*
ALL HORIZONTAL PADDING: 0 (controlled by Webflow embed settings)

Grid Gaps:
Desktop: 30-35px
Tablet:  25-30px
Mobile:  20px
X-Small: 15px

Bottom Padding:
Desktop: 40px
Tablet:  30px
Mobile:  25px
X-Small: 20px
*/

/* ============================================================
   RESOURCE CARDS
============================================================ */

.h2v-resource-card {
	background: #f7f9fb;
	border-radius: 14px;
	padding: 35px 28px;
	box-shadow: 0 4px 18px rgba(0,0,0,0.07);
	display: flex;
	flex-direction: column;
	text-align: left;
	transition: all 0.25s ease;
}

.h2v-resource-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 6px 28px rgba(0,0,0,0.12);
}

.h2v-resource-title {
	font-size: 22px;
	font-weight: 700;
	color: #1d3557;
	margin-bottom: 14px;
	line-height: 1.3;
}

.h2v-resource-description {
	font-size: 16px;
	color: #333;
	line-height: 1.5;
	margin-bottom: 20px;
	flex-grow: 1;
}

.h2v-resource-link {
	font-size: 16px;
	font-weight: 600;
	color: #457b9d;
	text-decoration: none;
	transition: color 0.2s ease;
	align-self: flex-start;
}

.h2v-resource-link:hover {
	color: #1d3557;
	text-decoration: underline;
}

/* ============================================================
   UTILITY CLASS - ROUND BOTTOM CORNERS
============================================================ */
.h2v-round-bottom {
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

/* ============================================================
   BODY PADDING FOR FIXED HEADER WITH GLOBAL ERROR BAR
============================================================ */
body {
	padding-top: 62px !important;
	margin-top: 0 !important;
	transition: padding-top 0.3s ease !important;
}

/* Extra safety - push first content element down */
body > div:first-of-type:not(#h2v-header-wrapper) {
	margin-top: 20px !important;
}

/* Remove body padding only when there's NO header */
body:not(:has(#h2v-header-wrapper)) {
	padding-top: 0 !important;
}

body:not(:has(#h2v-header-wrapper)) > div:first-of-type {
	margin-top: 0 !important;
}

/* Ensure header stays on top */
#h2v-header-wrapper {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 999999 !important;
}

/* When global error bar is active, add extra padding to body */
body.has-global-error {
	padding-top: 92px !important; /* 62px menu + 30px error bar */
}

#video-player {
	width: 100%;
	height: 100vh; /* or specific height */
	position: relative;
}

/* =============================================================================
   HOW IT WORKS PAGE – SAFE ISOLATED ADDITIONS
   (Appended to existing master stylesheet)
============================================================================= */

/* -----------------------------
   3-STEP SYSTEM (Page Specific)
------------------------------ */

.h2v-how-steps {
	padding: 20px 0 30px;   /* tighter spacing */
	text-align: center;
}

.h2v-how-steps-inner {
	max-width: 1100px;
	margin: 0 auto;
}

.h2v-how-steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: 1000px;
	margin: 30px auto 0 auto;  /* centers panels */
}

.h2v-how-step-card {
	background: #ffffff;
	border-radius: 14px;
	padding: 30px 26px;
	text-align: left;
	border: 1px solid #e5e7eb;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.h2v-how-step-card h3 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 10px;
	color: #1f2a37;
}

.h2v-how-step-card p {
	font-size: 15px;
	line-height: 1.6;
	color: #4b5563;
}


/* -----------------------------
   WHAT SELLERS EXPERIENCE
------------------------------ */

.h2v-how-section {
	padding: 30px 0 40px;   /* reduced top gap */
	text-align: center;
}

.h2v-how-inner {
	max-width: 900px;
	margin: 0 auto;
}

.h2v-how-subtitle {
	font-size: 18px;
	color: #1f2a37;          /* darker for contrast */
	font-weight: 500;
	max-width: 700px;
	margin: 12px auto 25px;
	line-height: 1.6;
}

.h2v-how-list {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 600px;
	font-size: 17px;
	line-height: 1.8;
	color: #1f2a37;
	font-weight: 500;
}

.h2v-how-list li {
	margin-bottom: 10px;
}


/* -----------------------------
   COMPARISON SECTION
------------------------------ */

.h2v-how-compare {
	padding: 40px 0 50px;
	text-align: center;
}

.h2v-how-compare-inner {
	max-width: 1100px;
	margin: 0 auto;
}

.h2v-how-compare-box {
	background: #ffffff;
	border-radius: 14px;
	padding: 40px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.06);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	margin-top: 30px;
}

.h2v-how-col h3 {
	font-size: 20px;
	margin-bottom: 15px;
	color: #1f2a37;
}

.h2v-how-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	color: #4b5563;
}

.h2v-how-col li {
	border-bottom: 1px solid #e5e7eb;
	padding: 8px 0;
}


/* -----------------------------
   FINAL CTA
------------------------------ */

.h2v-how-cta {
	padding: 50px 0 60px;
	text-align: center;
}

.h2v-how-cta-inner {
	max-width: 900px;
	margin: 0 auto;
}

.h2v-how-cta-inner h2 {
	font-size: 32px;
	margin-bottom: 10px;
	color: #1f2a37;
}

.h2v-how-cta-inner p {
	font-size: 18px;
	color: #4b5563;
	margin-bottom: 25px;
}


/* -----------------------------
   RESPONSIVE (Safe Overrides)
------------------------------ */

@media (max-width: 900px) {
	.h2v-how-steps-grid {
		grid-template-columns: 1fr;
	}

	.h2v-how-compare-box {
		grid-template-columns: 1fr;
	}
}

/* .status-message		{ min-height: 1.2em; font-size: 0.9rem; } */

.header-panel-status {
	font-weight:	400;
	font-size:		0.9em;
	min-height:		1.2em;
	opacity:		0.95;
	white-space:	nowrap;
	text-align:		right;
}

.status-error		{ color: #FFD700; }  /* gold - maximum contrast on teal */
.status-success		{ color: white; }  /* bright white */

@keyframes statusFlash {
	0%, 100%	{ opacity: 1; }
	25%			{ opacity: 0.2; }
	50%			{ opacity: 1; }
	75%			{ opacity: 0.2; }
}
.status-flash		{ animation: statusFlash 0.8s ease-in-out; }

.required-star {
	color: #dc2626;
	margin-left: 2px;
}