/* Global Resets & Theme Variables */
*, *::before, *::after {
	box-sizing: border-box;
}
:root {
	--bg-desktop: url('https://www.viewmoreinfo.com/assets/images/index.webp');
	--bg-paper: #faf9f6;   /* Premium cream/off-white paper stock */
	--primary: #2c382e;    /* Deep slate/forest */
	--accent: #68861b;     /* Sage accent */
	--text-dark: #33302c;  /* Charcoal body text */
	--text-muted: #615c55; /* Subtle metadata text */
	--shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 1px 8px rgba(0, 0, 0, 0.04);
}
/* Mobile-First Base Layout (Smartphones & Tablets) */
body {
	background-color: var(--bg-paper);
	margin: 0;
	padding: 20px 15px 20px 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: var(--text-dark);
	-webkit-font-smoothing: antialiased;
}
html {
	scroll-behavior: smooth;
}
a.url-style, 
a.url-style:link, 
a.url-style:visited {
	color: #68861b !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	border-bottom: 1px dotted #68861b !important;
	padding-bottom: 2px !important;
	transition: color 0.2s ease, border-color 0.2s ease !important;
}
a.url-style:hover, 
a.url-style:focus,
a.url-style:active {
	color: #526b15 !important;
	border-bottom: 1px solid #526b15 !important;
	opacity: 1 !important;
}
.scroll-top-link:hover {
	color: var(--accent); /* Lights up with your signature sage color on hover */
}
.sales-container {
	background-color: rgba(250, 249, 246, 0.95); /* Page color and opacity */
	width: 100%;
	max-width: 210mm;
	padding: 4mm;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	line-height: 1.4;
}
/* Premium CTA Interactions */
.cta-premium-email-btn:hover {
	background-color: #465a13 !important;
	color: #ffffff !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
	transform: translateY(-2px);
}
.cta-premium-email-btn:active {
	transform: translateY(0);
}
/* Desktop/Laptop Enhancement (Screens wider than Letter + padding) */
@media screen and (min-width: 790px) {
	body {
		background-image: var(--bg-desktop) !important;
		background-attachment: fixed !important; /* Smooth scrolling: paper slides over the image */
		background-position: center center !important; /* Keeps the texture balanced */
		background-repeat: no-repeat !important;
		background-size: cover !important; /* Scales perfectly across all monitor sizes */
		padding: 40px 20px;
		gap: 40px;
	}
	.sales-container {
		width: 8.5in;        /* US Letter Width */
		min-height: 11in;   /* US Letter Height */
		padding: 16mm;
		box-shadow: var(--shadow);
		border-radius: 2px;
	}
	.scroll-fab {
		right: auto; /* Clears the mobile right alignment */
		left: 25px;  /* Anchors it cleanly to the left edge of the monitor */
	}
}
/* Print Layout: Flawless layout for PDF compilers and physical printing */
@page {
	size: letter;
	margin: 0.6in;  /* Reduced default browser print margins to unlock vertical space */
}
/* Floating Scroll Action Button (Base / Mobile) */
.scroll-fab {
	position: fixed;
	/* On mobile: sits on the right, perfectly spaced next to the print button */
	bottom: 25px;
	left: 25px;
	z-index: 1000;
	background-color: var(--primary);
	color: #faf9f6;
	border: none;
	border-radius: 50%; /* Perfect circle since it's just an icon */
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	outline: 0px solid rgba(250, 249, 246, 0.4);
	outline-offset: 2px;
}
.scroll-fab:hover {
	background-color: #1a241c;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.scroll-fab:active {
	transform: translateY(1px);
}
/* Floating Print Action Button (Base / Mobile) */
.print-fab {
	position: fixed;
	bottom: 25px;
	right: 25px;
	z-index: 1000;
	background-color: var(--primary);
	color: #faf9f6;
	border: none;
	border-radius: 50px;
	padding: 14px 24px;
	font-size: 10.5pt;
	font-weight: bold;
	letter-spacing: 0.5px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	gap: 8px;
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	outline: 0px solid rgba(250, 249, 246, 0.4);
	outline-offset: 2px;
}
.print-fab:hover {
	background-color: #1a241c;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.print-fab:active {
	transform: translateY(1px);
}
/* Content Layer stacking above backgrounds */
.sales-body {
	position: relative;
	z-index: 10;
}
/* Typography & Structural Classes */
.sales-hero {
	border-bottom: 2px solid var(--accent);
	padding-bottom: 15px;
	margin-bottom: 25px;
}
.hero-headline {
	font-size: 22pt;
	font-weight: 700;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 5px 0;
}
.hero-subheadline {
	font-size: 12pt;
	font-weight: 500;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0 0 15px 0;
}
@media screen and (min-width: 790px) {
	.hero-headline { font-size: 26pt; }
	.hero-subheadline { font-size: 14pt; }
}
.feature-heading {
	font-size: 12pt;
	font-weight: 700;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 35px;
	margin-bottom: 12px;
	border-left: 4px solid var(--accent);
	padding-left: 10px;
}
.feature-heading-nlb {
	font-size: 12pt;
	font-weight: 700;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 35px;
	margin-bottom: 12px;
}
@media screen and (min-width: 790px) {
	.feature-heading { font-size: 13pt; }
}
.feature-desc {
	margin-bottom: 20px;
	text-align: justify;
}
/* Product Feature Card Blocks */
.feature-card {
	margin-bottom: 22px;
}
.feature-card-header {
	margin-bottom: 8px;
}
.feature-title {
	font-weight: 700;
	color: #3d4a3f;
	font-size: 12pt;
	margin-bottom: 3px;
}
.feature-meta {
	color: var(--text-muted);
	font-size: 12pt;
	font-style: italic;
}
/* Flex adjustment to layout feature card headers horizontally on desktop/print screens */
@media screen and (min-width: 600px) {
	.feature-card {
		background: rgba(233, 233, 233, 0.0);
		border-radius: 8px;
		padding: 24px 24px 6px 24px;
		margin-bottom: 20px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle depth */
		border: 1px solid rgba(210, 205, 195, 0.8); /* Soft border matching your palette */
	}
	.feature-title { margin-bottom: 0; }
}
.feature-list {
	margin: 0;
	padding-left: 20px;
}
.feature-list li {
	margin-bottom: 12px;
	text-align: justify;
}
/* Sales Pitch Body Rules */
.sales-pitch p {
	margin-bottom: 15px;
	text-align: justify;
	line-height: 1.4;
}
/* Screen Hover Effect for the Demo Button */
.demo-button:hover {
	background-color: #536c15 !important; /* A slightly deeper, premium brand green */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Slightly deeper shadow on hover */
	transform: translateY(-1px); /* Subtle lift effect */
}
.demo-button:active {
	transform: translateY(0); /* Pushes down slightly when clicked */
}
.mr-1 {
	margin-right: 1px;
}
/* ================= Web Footer Layout ================= */
.vmipub-footer {
	width: 100%;
	text-align: center;
	font-size: 9.5pt;
	color: rgba(250, 249, 246, 0.6); /* Blends elegantly into the tabletop web background */
	padding: 0px 0 0px 0;
	letter-spacing: 0.5px;
	font-weight: 300;
	user-select: none;
}
.vmipub-footer a {
	color: #faf9f6 !important;
	text-decoration: none !important;
	font-weight: 600;
	border-bottom: 1px dotted rgba(250, 249, 246, 0.4);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.vmipub-footer a:hover {
	color: var(--accent) !important;
	border-bottom-color: var(--accent);
}
/* Mobile specific adjustment so it doesn't get awkward with the mobile background */
@media screen and (max-width: 639px) {
	.vmipub-footer {
		color: var(--text-muted); /* Darker text so it's legible on the cream mobile view */
		padding-bottom: 110px;    /* Extra clearance so it sits safely below the mobile FAB button */
	}
	.vmipub-footer a {
		color: var(--primary) !important;
		border-bottom-color: var(--accent);
	}
}