/* =============================================================================
   BRAND COLOUR TOKENS — THE STANDARD  (#M, 2026-09-25)
   =============================================================================
   Every brand colour in the product is one of these. New work uses the token,
   never a raw hex. See CLAUDE.md, "Brand colour tokens".

   THIS FILE IS THE CANONICAL DEFINITION. The three blocks that mirror it
   -- h2v-theme.css, newlisting.css and approval_routes._SHELL -- exist only
   because those surfaces load none of the same stylesheets, and
   Scripts/test_brand_tokens.py fails if any of them drifts from this one.

   ONE GREEN, NOT TWO (#N, 2026-09-25). --h2c-teal (#426b79) and --h2c-teal-dark
   (#355863) are gone. They sat 12 and 16 away in RGB from --h2c-green and
   --h2c-green-dark, which is deltaE 7.84 and 7.20 in Lab -- about a quarter of
   the distance from this green to the navy, and nothing anyone would call a
   different colour with the two side by side. The product was carrying a
   "billboard green" and an "app teal" that were the same colour under two
   names. Every reference now points at the green.

   --h2c-green-dark IS NOW ALSO THE HOVER, which --h2c-teal-dark used to be. It
   keeps its other job as the darker stop of the diagonal photo placeholders;
   both jobs want "the darker green" and there is no longer a reason for two.

   --h2c-green REPLACED A GRADIENT. The billboard headers were
   linear-gradient(to bottom, #4a7c7e, #3a6264) and the social kit had taken
   the TOP STOP as its flat panel colour, so the two could never match -- half
   the header was always darker than the kit. The gradient is gone and both are
   the midpoint, #426f71, which is the colour the middle of that header was
   already painting. Measured off the rendered pixel at 50%, which agrees with
   the arithmetic mean of the two stops.
   ============================================================================= */

:root {
	--h2c-green:       #426f71;
	--h2c-green-dark:  #3a6264;
	--h2c-navy:        #193758;
	--h2c-navy-dark:   #16304c;
	--h2c-navy-hero:   #1d3557;
	--h2c-green-muted: #7a9c9e;
	--h2c-warn:        #b45309;
	--h2c-bad:         #b42318;
	--h2c-gold:        #c9a24c;
	--h2c-gold-dark:   #b0872f;
	--h2c-gold-bright: #d4af37;
}

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: var(--h2c-navy-hero);
	font-weight: 700;
	line-height: 1.18;
	margin-bottom: 20px;
}

/* SUBTITLE — remove bottom spacing control */
.h2v-hero-subtitleC {
	font-size: 20px;
	color: var(--h2c-navy-hero);
	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: var(--h2c-navy-hero) !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: var(--h2c-navy-hero) !important;
	color: #ffffff !important;
}

/* SUPPORT LIST */
.h2v-hero-listC {
	list-style: none;
	padding: 0;
	margin: 0 auto 40px;
	font-size: 17px;
	color: var(--h2c-navy-hero);
	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:		var(--h2c-green);
	--h2v-header-text:		#ffffff;

	--h2v-btn-bg:			var(--h2c-green);
	--h2v-btn-hover:		var(--h2c-green-dark);

	--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 var(--h2c-green);
	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: var(--h2c-green);
	font-weight: 700;
}

/* Hover state */
.w-tabs .w-tab-link:hover {
	background: var(--h2c-green);
}

/* 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: var(--h2c-green);
	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: #e8f0f2;
	border: 1.5px solid var(--h2c-green);
	border-radius: 10px;
	padding: 18px 22px;
	margin: 16px 20px 22px;
}

#guided-step-context .guided-step-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--h2c-green);
	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: var(--h2c-navy-hero);
	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: var(--h2c-navy-hero);
	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;
}

/* =============================================================================
   BILLBOARD BRAND BLOCK — the graphic, the brokerage name and the licence as
   one centred stack. Used under the brokerage logo and under the agent
   headshot, on the listing, agent, brokerage and client billboards.

   WHY IT LIVES HERE AND NOWHERE ELSE.

   These four classes used to be defined in all four billboard stylesheets, and
   the four copies had drifted: billboard-listing.css centred the block and its
   licence, while agent / account / client left-aligned them. The listing page
   loads BOTH billboard-listing.css and billboard-agent.css, agent last — so
   the same licence rendered centred on one page and left on another with
   nobody having chosen either. billboard-account.css additionally had its
   mobile override sitting ABOVE its base rule, where a media query's zero
   specificity meant it never applied at any width.

   Every billboard page loads h2v.css, and it loads BEFORE the per-page
   stylesheets, so one definition here governs all of them. Do not re-add these
   selectors to a billboard-*.css file — a page-level copy silently wins and
   the fork starts again.

   Centred at every width, so there is no breakpoint at which the two brand
   blocks on a page disagree, and no mobile override to get mis-ordered.
   ============================================================================= */
.h2v-bb-brand-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

/* The brokerage name. Capped at the logo's own width so it WRAPS under the
   logo rather than running out past both its edges, and centred because a
   wrapped line that is not centred reads as a mistake. Header and footer share
   this one declaration, which is what makes them identical rather than
   similar. */
.h2v-bb-broker-name,
.h2v-vdh-broker-name {
	font-family: Montserrat, Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: #ffffff;
	line-height: 1.25;
	text-align: center;
	max-width: 180px;
	overflow-wrap: break-word;
}

/* THE AGENT HEADER'S BLOCK IS WIDER, AND THIS OVERRIDE LIVES HERE ON PURPOSE
   (#X, 2026-09-25). The 180px cap above is shared by the header and the footer,
   and this file's own note says a page-level copy is how the
   .h2v-bb-brand-block fork started -- so the one surface that differs is scoped
   beside the default, where whoever edits the shared rule will see it.

   200px IS MEASURED, NOT CHOSEN. "Silver Springs Realty Group" needs 195px on
   one line at the type it already has (13px/600 Montserrat, 0.5px tracking) --
   measured off the rendered page, not estimated -- and the licence needs 181.
   200 clears both with a little room, and the font is untouched: the brief
   asked for width, not a smaller name.

   overflow-wrap NORMAL, not the shared rule's break-word: a brokerage name long
   enough to still wrap at 200 must break at a SPACE, never mid-word -- the
   defect #O chased across all four billboards. */
/* THE LOGO CARD'S SIZE AND FRAME, ONCE (#AA, 2026-09-25).
   #Z sized this card in billboard-agent.css. The CLIENT billboard renders the
   same header from its OWN stylesheet and never loads that file, so it kept a
   180x145 card with a 2px rounded frame while the agent and listing pages had
   180x180 with the headshot's 4px square one -- the same header, two looks.

   It lives here because every billboard page loads h2v.css, and the selector
   only matches the three pages that have this header. The two page stylesheets
   have had these four declarations REMOVED rather than left to fight: they load
   after this file, so an equal-specificity copy there would simply win and the
   fork would carry on quietly. */
#h2v-billboard-agent-header .h2v-billboard-broker-logo {
	width: 180px;
	height: 180px;
	border: 4px solid var(--h2c-gold-bright);
	border-radius: 0;
}

#h2v-billboard-agent-header .h2v-bb-brand-block {
	width: 200px;
	/* left:auto IS THE WHOLE FIX FOR THE RIGHT-HAND GAP (#Z, 2026-09-25).
	   _renderLicenceUnder copies top/right/bottom/left off the LOGO'S COMPUTED
	   STYLE, skipping anything that reads `auto`. For an absolutely positioned
	   element the computed style resolves ALL FOUR to pixels -- that logo
	   computes left:700px as well as the right:20px its stylesheet declares --
	   so the block inherited both.
	   With width:auto that was harmless: left + right + auto width simply gave
	   the block whatever was between them. The moment #X gave this block an
	   explicit width:200px the box became OVER-CONSTRAINED, and CSS resolves
	   that by DISCARDING `right` in a left-to-right document. left:700 won and
	   the block sat flush against the header's edge -- 0px, against the
	   headshot's 30 on the other side.
	   Clearing left lets the copied right:20px govern again. The same shape is
	   waiting on the account and client billboards: their blocks are still
	   width:auto, so nothing shows, and giving one of them a width would
	   reproduce this exactly. */
	left: auto !important;
}
#h2v-billboard-agent-header .h2v-bb-broker-name,
#h2v-billboard-agent-header .h2v-bb-broker-license {
	max-width: 200px;
	overflow-wrap: normal;
	word-break: normal;
}
/* flex:0 0 auto, or the card does not get the height it asks for: the block is
   a flex COLUMN, so flex-shrink:1 applies to HEIGHT and the card was being
   squeezed by whatever sat below it -- 145 declared, 69 rendered. A declared
   size the layout quietly overrules is worse than none, because the next person
   reads the number and believes it. */
#h2v-billboard-agent-header .h2v-bb-brand-block > .h2v-billboard-broker-logo {
	flex: 0 0 auto;
}
/* THE TWO STACKS SIT ON THE SAME LINES (#Y).
   Under the headshot, the agent licence is ONE element that wraps to two lines,
   so its second line follows the first with no gap -- just line-height. Under
   the logo, the brokerage name and the licence are two SEPARATE elements, and
   the block's 6px gap put the second one 7px lower than the agent's.

   So the block's gap goes to 0 and the 6px is re-applied as the NAME's own
   top margin: the card-to-first-line distance is preserved and the
   name-to-licence distance becomes pure line-height, exactly as on the left.
   1.2 at 13px is 15.6px -- the licence's own line-height, to the pixel. */
/* THE BROKER BLOCK ONLY. Written unscoped first, it closed the AGENT block's
   photo-to-licence gap as well -- both blocks carry this class, and the agent's
   licence went flush against the headshot. :has() keys on the logo card the
   block actually contains, which is the same technique the contact icons above
   use to tell two identical <div>s apart. */
#h2v-billboard-agent-header .h2v-bb-brand-block:has(> #h2v-bb-broker-logo),
#h2v-billboard-agent-header .h2v-bb-brand-block:has(> .h2v-billboard-broker-logo) {
	gap: 0;
}
#h2v-billboard-agent-header .h2v-bb-broker-name {
	margin-top: 6px;
	line-height: 1.2;
}

/* The name is the link to the brokerage page, so it looks like one: the
   licence line's gold, underlined. */
#h2v-billboard-agent-header .h2v-bb-broker-name-link {
	color: var(--h2c-gold-bright);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* white-space: normal, not nowrap. A long brokerage licence used to force this
   block wider than the graphic above it, which is what pushed it off-centre on
   a phone. */
.h2v-bb-broker-license,
.h2v-bb-agent-license,
.h2v-vdh-broker-license {
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--h2c-gold-bright);
	line-height: 1.3;
	text-align: center;
	white-space: normal;
	max-width: 180px;
	overflow-wrap: break-word;
}

/* ============================================================================
   BILLBOARD CONTACT ICONS  (#B5, 2026-09-24)

   THE CIRCLES WERE NEVER ICONS. `.h2v-billboard-contact-icon` is an empty
   <div> in the Webflow shell, and all four billboard stylesheets drew it as a
   28px gold-bordered circle with a translucent fill and NO glyph source of any
   kind — no content, no ::before, no background-image, no SVG, nowhere in the
   codebase. Nothing was failing to load; there was nothing to load. It read as
   a bullet that had lost its icon because that is exactly what it looked like.

   THE RULE LIVES HERE, NOT IN THE FOUR PAGE STYLESHEETS. Those four already
   forked once over .h2v-bb-brand-block (see the block above) and the fix was
   one definition in h2v.css, which every billboard loads and loads first.
   Adding a page-level copy is how that fork starts again.

   MARKUP IS NOT OURS TO CHANGE. The shell is in Webflow and both icons are the
   same empty <div> with no modifier class, so the glyph is chosen by what the
   group actually CONTAINS rather than by its position: :has() keys on the
   phone/email span that sits beside it, which survives a group being hidden,
   reordered, or one of the two being absent.

   PROGRESSIVE, SO IT CANNOT REGRESS. A browser without :has() matches neither
   rule and gets exactly today's empty circle — no worse than the status quo.
   Unicode glyphs with the U+FE0E text-presentation selector rather than an
   icon font: the house style is a unicode glyph in the markup (CLAUDE.md's
   eyeball for password show/hide, "never a FA icon"), and FE0E stops the two
   rendering as full-colour emoji on platforms that default to that.
============================================================================ */
.h2v-billboard-contact-group:has(.h2v-billboard-contact-phone) .h2v-billboard-contact-icon,
.h2v-billboard-contact-group:has(.h2v-billboard-contact-email) .h2v-billboard-contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 15px;
	color: var(--h2c-gold-bright);
}

.h2v-billboard-contact-group:has(.h2v-billboard-contact-phone) .h2v-billboard-contact-icon::before {
	content: "\260E\FE0E";			/* ☎ BLACK TELEPHONE, text presentation */
}

.h2v-billboard-contact-group:has(.h2v-billboard-contact-email) .h2v-billboard-contact-icon::before {
	content: "\2709\FE0E";			/* ✉ ENVELOPE, text presentation */
}

/* ============================================================================
   UNDER-REVIEW LISTING CARDS  (#F6, 2026-09-24)

   On the agent and brokerage pages a listing awaiting approval showed a small
   "UNDER REVIEW" pill in the corner of its card. It was easy to read as a
   decoration on the photo rather than a statement about the listing, and it
   said two words where the listing page says a sentence — so the same listing
   described itself differently depending on which page you reached it from.

   It is now a BAR ACROSS THE CARD, above the photo, with the listing page's
   own wording and colour. PER CARD: a live listing's card carries nothing, and
   neither page gets a page-wide bar — only the listing under review is under
   review, and saying it page-wide would be false about the others.

   ONE DEFINITION, HERE. These three rules were byte-identical in
   billboard-agent.css and billboard-account.css (checked before moving), which
   is exactly the fork .h2v-bb-brand-block went through above. Every billboard
   page loads this file and loads it first. Do not re-add them to a
   billboard-*.css file.
============================================================================ */
.billboard-listing-card.is-under-review {
	position: relative;
	overflow: hidden;
}

/* THE BAR. Static, not absolute, so it takes part in the card's flow and the
   photo moves down to make room — an absolutely-positioned bar would sit ON the
   photo and cover the top of it, which is the thing the agent is trying to
   look at. First child of the card, so it lands above the image. */
.billboard-listing-card.is-under-review::before {
	content: "UNDER REVIEW \2014  This listing is being reviewed and isn't published yet.";
	display: block;
	position: static;
	z-index: 3;
	background: var(--h2c-warn);
	color: #ffffff;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.2px;
	text-align: center;
	padding: 8px 12px;
}

/* The lines across it. pointer-events:none so the card stays clickable, and
   z-index below the bar so the bar stays legible through them. */
.billboard-listing-card.is-under-review::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(180, 83, 9, 0.10) 0px,
		rgba(180, 83, 9, 0.10) 3px,
		rgba(180, 83, 9, 0)    3px,
		rgba(180, 83, 9, 0)    16px
	);
}

@media (max-width: 560px) {
	.billboard-listing-card.is-under-review::before {
		font-size: 11px;
		padding: 7px 10px;
	}
}


/* =============================================================================
   BILLBOARD PAGE CARD — ROUNDED CORNERS  (#L, 2026-09-24)
   =============================================================================
   The listing, agent, brokerage and client billboards all sat in a square-
   cornered block while every other surface in the product -- the wizard
   (newlisting.css, 16px + overflow:hidden), the review page (.page-card in
   approval_routes._SHELL, the same two) and the social kit (.skq-page-card,
   the same two) -- is a rounded card. Same value, taken from those three, not
   a fourth opinion.

   ON .container-69 AND NOT ON THE HEADERS. The green header is a different
   element on each of the four pages, and on the LISTING page the agent header
   appears a second time near the BOTTOM -- so a rule keyed on the header
   classes would have rounded the top of a mid-page block there. The Webflow
   container wraps all of them, on all four pages, and nowhere else: checked
   against every live public page (/, login, registration, pricing,
   how-it-works, contact, marketing-plan, advertising, newlisting) and
   `container-69` appears on the billboards alone.

   OVERFLOW:HIDDEN IS THE HALF THAT MATTERS. Rounding the container alone
   leaves the header's own square green corner painted over the curve -- the
   header carries its own background, and so does .h2v-vd-header-bar inside it.
   Clipping is what makes the green follow the curve rather than poke out of
   it. It does not affect the lightbox: that is position:fixed, and no ancestor
   here sets transform, filter or perspective, so it still escapes to the
   viewport.

   THE CLIENT BILLBOARD GETS IT TOO. It was not in the brief, but it is the
   same wrapper on the same page shell; excluding it would have meant writing
   MORE code to keep one of four square, which is how the .h2v-bb-brand-block
   fork started. */
.container-69 {
	border-radius: 16px;
	overflow: hidden;
}

/* =============================================================================
   EVERY STACKED PANEL IS A ROUNDED CARD  (#AB, 2026-09-25)
   =============================================================================
   The rule above rounds the page CONTAINER, which is why the top panel looked
   rounded and nothing below it did: .container-69 clips its own outer corners,
   so the first panel got the top two, the last got the bottom two, and every
   panel in between was square on all four.

   16px is the container's own value, which is the wizard's, the review page's
   and the social kit's -- not a fifth opinion.

   overflow:hidden IS THE HALF THAT MATTERS on the coloured panels. The agent and
   brokerage headers paint their own green, and so do children inside them; round
   the panel without clipping and the child's square corner paints straight over
   the curve. It does not affect the listing page's lightbox: that is
   position:fixed, and nothing here sets transform, filter or perspective.

   ONE RULE, HERE. Every billboard page loads this file; the four page
   stylesheets get no copy, which is the rule this file's own notes keep
   repeating. */
.h2v-panel-card,
#h2v-lead-panel,
#h2v-billboard-agent-header,
#h2v-billboard-broker-header,
.billboard-listings-section {
	border-radius: 16px;
	overflow: hidden;
	/* margin-TOP 0 as well as bottom. #h2v-lead-panel already carries
	   `margin: 20px 0` of its own, and these panels sit in separate Webflow
	   embeds, so the two margins do NOT collapse into one -- the gap above the
	   lead panel came out 40 while every other gap was 20. One margin per gap,
	   set here, and the panel's own is overridden rather than added to. */
	margin-top: 0;
	margin-bottom: 20px;
}

/* THE LISTING PAGE'S HEADER AND BODY ARE ONE CARD IN TWO ELEMENTS. They are
   separate siblings in separate Webflow embeds, but the green header sits
   directly on top of the hero photo -- #S put it there deliberately -- so
   rounding them separately would open a gap straight through the middle of the
   page's main card. Top corners on one, bottom corners on the other, no margin
   between them: one card, as far as anyone looking at it is concerned. */
.h2v-vd-header-embed {
	border-radius: 16px 16px 0 0;
	overflow: hidden;
	margin-bottom: 0;
}
.h2v-vd-body-embed {
	border-radius: 0 0 16px 16px;
	overflow: hidden;
	margin-bottom: 20px;
}

/* The social kit steps its own card down to 14px on a phone; this follows it,
   so the two never disagree at a width where both are on screen in one
   session. */
@media (max-width: 559px) {
	.container-69 {
		border-radius: 14px;
	}
}


/* =============================================================================
   THE PENDING TAG ON A FEATURED CARD (#AK, 2026-09-26)
   A listing under contract stays in Featured Properties -- it is still being
   marketed and the deal can fall through -- so the card has to say so rather
   than disappear.

   HERE, NOT IN billboard-agent.css / billboard-account.css. Those two files
   are the fork #AA spent a pass unpicking: a page-level copy loads after
   h2v.css, wins on equal specificity, and the two pages drift apart in silence.
   Every billboard loads this file, and loads it first.

   The card needs position:relative for the tag to sit on it. That is set here
   too, scoped to a card that HAS the tag, so no other card's positioning moves.
============================================================================= */
.billboard-listing-card.is-pending { position: relative; }

.billboard-listing-tag.is-pending {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 5px 11px;
	border-radius: 999px;
	background: #ffffff;
	color: var(--h2c-gold-dark);
	border: 1px solid var(--h2c-gold-dark);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	/* The card image is a photograph, so the chip needs its own ground to stay
	   legible whatever is behind it -- white fill, not a translucent overlay. */
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* h2c-btn-secondary:start -- THE SECONDARY BUTTON (2026-09-28-E).
   App pages only: the wizard, the review/approval pages, /mylistings. Filled
   --h2c-green, white text, 8px radius, bold, no border, no shadow; hover
   --h2c-green-dark. One primary (gold) per screen; every other button is this.
   CANONICAL IN h2v.css, mirrored verbatim in newlisting.css and the approval
   shell -- test_brand_tokens.py fails if a copy drifts. `html body` lifts it
   over each page's own button rules without !important. */
html body .h2c-btn-secondary { background: var(--h2c-green); color: #fff; border: 0; border-radius: 8px; font-weight: 700; box-shadow: none; cursor: pointer; }
html body .h2c-btn-secondary:hover:not([disabled]) { background: var(--h2c-green-dark); color: #fff; border-color: transparent; }
/* Destructive (Cancel listing): red text, never a filled button. */
html body .h2c-btn-destructive { background: none; color: var(--h2c-bad); border: 0; font-weight: 700; box-shadow: none; cursor: pointer; }
/* h2c-btn-secondary:end */