/*
Theme Name: Lawft Live
Description: Professional law practice management theme with advanced mega menus and Apollo-style features
Version: 2.0
Author: Lawft Team
*/

@import url('css/apollo-style-correct.css');
@import url('css/forethought-mega-menu.css');
@import url('css/header-fixes.css');
@import url('css/modern-footer.css');
@import url('css/blog-styles.css');
@import url('client-journeys-forethought.css');
@import url('css/cloud-background.css');

/* Reset and Base Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	line-height: 1.6;
	color: #333;
	background: #f4f6f8;
}

/* New buttons style */
.theme_Btn {
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: inline-block;
  padding: 12px 20px;
  text-align: center;
  transition: color 0.4s ease-in-out;
  z-index: 1;
  min-width: 170px;
  border-radius: 8px;
  font-weight: 600;
  color: white;
}

.btnText {
  transition: color 0.4s ease-in-out;
}

/* Specific button background colors */
.blue_Btn {
  background: #3b82f6;
}

.green_Btn {
  background: #22c55e;
}

.white_Btn {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  color: #111827;
}

/* Hover background animation shape */
.theme_Btn::before {
  content: "";
  position: absolute;
  bottom: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  z-index: -1;
  transition: all 0.5s ease-in-out;
}

/* Unique hover backgrounds */
.blue_Btn::before {
  background: #9ccafd;
}

.green_Btn::before {
  background: #a6e58a;
}

.white_Btn::before {
  background: #9ccafd;
}

/* Hover effects */
.theme_Btn:hover::before {
  width: 300px;
  height: 300px;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}

.theme_Btn:hover {
  color: white;
}

.white_Btn:hover {
  color: #111827;
}

.blue_Btn:hover > span,
.white_Btn:hover > span{
  color: #1E3A8A;
}
.green_Btn:hover > span {
  color: #1A5A2E;
}

/* Ensure no white space at top */
body.front-page {
	margin: 0;
	padding: 0;
}

body.front-page #page {
	margin: 0;
	padding: 0;
}

/* Header Structure */
.ft-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	background: rgba(255, 255, 255, 0.3); /* Transparent for frosted glass */
	backdrop-filter: blur(20px); /* Frosted glass blur effect */
	-webkit-backdrop-filter: blur(20px); /* Safari support */
	border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
	height: 80px;
	transition: all 0.3s ease; /* Smooth transitions */
}

/* Enhanced frosted glass effect on scroll */
.ft-header.scrolled {
	background: rgba(255, 255, 255, 0.5); /* Still transparent but slightly more opaque when scrolled */
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.ft-header__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	height: 100%;
}

.ft-header__wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

.ft-header__logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: 0;
}

.ft-header__logo-link {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.ft-header__logo-image {
	height: 32px;
	width: auto;
	display: block;
	max-width: 200px;
}

.ft-header__logo-text {
	font-size: 24px;
	font-weight: 700;
	color: #1a2332;
	text-decoration: none;
}

/* Ensure no hover effects on logo - STRENGTHENED */
.ft-header__logo-link:hover,
.ft-header__logo-image:hover,
.ft-header__logo-text:hover,
.ft-header__logo:hover,
.ft-header__brand:hover,
.ft-header__brand a:hover,
.ft-header__logo-link:focus,
.ft-header__logo-image:focus,
.ft-header__logo-text:focus,
.ft-header__logo:focus,
.ft-header__brand:focus,
.ft-header__brand a:focus {
	transform: none !important;
	opacity: 1 !important;
	filter: none !important;
	box-shadow: none !important;
	color: inherit !important;
	text-decoration: none !important;
	background: none !important;
	border: none !important;
	outline: none !important;
}

/* Navigation Menu */
.ft-header__navigation {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-left: 12px;
}

.ft-header__menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 4px;
}

.ft-header__menu > li {
	position: relative;
	margin: 0 4px;
}

.ft-header__menu > li > a {
	color: #1a2332;
	text-decoration: none;
	font-weight: 500;
	font-size: 18px;
	padding: 8px 0;
	transition: color 0.3s ease;
	display: flex;
	align-items: center;
	line-height: 1;
	position: relative;
}

/* Hover line effect - centered under menu item */
.ft-header__menu > li > a::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, #52B880, #D8FF91);
	transition: width 0.6s ease;
}

.ft-header__menu > li:hover > a {
	color: #52B880;
	background: transparent;
}

.ft-header__menu > li:hover > a::after {
	width: 100%;
}

/* Dropdown Menu */
/* Dropdown Base Styles - All dropdowns center on page */
.ft-header__dropdown {
	position: fixed !important;
	top: 80px;
	left: 50% !important;
	transform: translateX(-50%) !important;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease;
	padding: 40px;
	margin: 0 !important;
	z-index: 9999;
	/* Force all dropdowns to appear in exact same centered position */
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.ft-header__menu > li:hover .ft-header__dropdown {
	opacity: 1;
	visibility: visible;
}

/* Features Mega Menu - Two Column Layout */
.mega-menu-features {
	min-width: 600px;
	max-width: 700px;
}

.mega-menu-features .ft-header__dropdown-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

/* Solutions Mega Menu - Three Column Layout */
.mega-menu-solutions {
	min-width: 800px;
	max-width: 900px;
}

.mega-menu-solutions .ft-header__dropdown-content {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
}

/* Pricing Mega Menu - Single Column Layout */
.mega-menu-pricing {
	min-width: 300px;
	max-width: 400px;
}

.mega-menu-pricing .ft-header__dropdown-content {
	display: block;
}

/* Resources Mega Menu - Three Column Layout */
.mega-menu-resources {
	min-width: 700px;
	max-width: 800px;
}

.mega-menu-resources .ft-header__dropdown-content {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
}

/* Company Mega Menu - Single Column Layout */
.mega-menu-company {
	min-width: 300px;
	max-width: 400px;
}

.mega-menu-company .ft-header__dropdown-content {
	display: block;
}

.ft-header__dropdown-sidebar {
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
}

.ft-header__dropdown-sidebar h3 {
	font-size: 18px;
	font-weight: 600;
	color: #1a2332;
	margin-bottom: 12px;
}

.ft-header__dropdown-sidebar p {
	font-size: 14px;
	color: #666;
	margin-bottom: 16px;
	line-height: 1.5;
}

.ft-header__dropdown-section {
	padding: 0;
}

.ft-header__dropdown-section h3 {
	font-size: 14px;
	font-weight: 600;
	color: #666666;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 20px;
}

.ft-header__dropdown-item {
	display: block;
	padding: 12px 16px;
	color: #333333;
	text-decoration: none;
	border-radius: 6px;
	transition: all 0.3s ease;
	margin-bottom: 8px;
	position: relative;
}

.ft-header__dropdown-item:hover {
	border: 2px solid #3b82f6;
	background: transparent;
}

/* CTA Button */
.ft-header__cta {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	margin-left: 8px;
}

/* CTA Section (Airtable-style) */
.ft-header__cta-section {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 12px;
}

/* Pre-footer CTA buttons with starburst effects */
.pre-footer-cta .ft-cta-primary,
.pre-footer-cta .ft-cta-secondary {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 32px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	transition: all 0.3s ease;
	overflow: hidden;
	white-space: nowrap;
	border: 2px solid transparent;
	cursor: pointer;
	min-width: 180px;
}

/* Primary CTA - Green with starburst */
.pre-footer-cta .ft-cta-primary {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	color: white;
	border-color: rgba(255, 255, 255, 0.2);
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

/* Secondary CTA - Blue with starburst */
.pre-footer-cta .ft-cta-secondary {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: white;
	border-color: rgba(255, 255, 255, 0.2);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

/* Starburst effect for pre-footer CTA buttons */
.pre-footer-cta .ft-cta-primary::before,
.pre-footer-cta .ft-cta-secondary::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(
		circle,
		rgba(255, 255, 255, 0.4) 0%,
		rgba(255, 255, 255, 0.2) 30%,
		rgba(255, 255, 255, 0.1) 60%,
		transparent 100%
	);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
	opacity: 0;
}

/* Starburst activation on hover */
.pre-footer-cta .ft-cta-primary:hover::before,
.pre-footer-cta .ft-cta-secondary:hover::before {
	width: 400px;
	height: 400px;
	opacity: 1;
}

/* Hover effects */
.pre-footer-cta .ft-cta-primary:hover {
	background: linear-gradient(135deg, #059669 0%, #047857 100%);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
	border-color: rgba(255, 255, 255, 0.3);
}

.pre-footer-cta .ft-cta-secondary:hover {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
	border-color: rgba(255, 255, 255, 0.3);
}

/* Ensure text stays above starburst effect */
.pre-footer-cta .ft-cta-primary .cta-button__text,
.pre-footer-cta .ft-cta-secondary .cta-button__text,
.pre-footer-cta .ft-cta-primary span,
.pre-footer-cta .ft-cta-secondary span {
	position: relative;
	z-index: 2;
	font-weight: 600;
}

/* Blue Login Button (matching CTA style) */
.ft-cta-login {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 14px 32px;
	background-color: #3b82f6;
	color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	overflow: hidden;
	line-height: 1;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.ft-cta-primary:hover {
	background-color: #47a372;
	border-color: #1a2332;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(82, 184, 128, 0.3);
	color: #1a2332;
}

.ft-cta-login:hover {
	background-color: #2563eb;
	border-color: #1a2332;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
	color: #1a2332;
}

/* CTA button circle styles REMOVED for cleaner design */

/* Login button circle styles REMOVED for cleaner design */

.cta-button__text,
.login-button__text {
	position: relative;
	z-index: 2;
}

/* Circle hover effects REMOVED for cleaner design */

/* Mobile Menu Toggle */
.ft-header__mobile-toggle {
	display: none;
	flex-direction: column;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	gap: 4px;
	z-index: 10001;
}

.ft-header__mobile-toggle span {
	width: 24px;
	height: 3px;
	background: #1a2332;
	transition: all 0.3s ease;
	border-radius: 2px;
}

.ft-header__mobile-toggle.active span:nth-child(1) {
	transform: rotate(45deg) translate(6px, 6px);
}

.ft-header__mobile-toggle.active span:nth-child(2) {
	opacity: 0;
}

.ft-header__mobile-toggle.active span:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

.stack-layer-image img {
	width: 100%;
}


/* Mobile Menu Styles */
@media (max-width: 768px) {
	.ft-header__navigation {
		position: fixed;
		top: 80px;
		left: 0;
		right: 0;
		background: white;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
		transform: translateY(-100%);
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
		z-index: 10000;
		max-height: calc(100vh - 80px);
		overflow-y: auto;
	}

	.ft-header__navigation.mobile-menu-open {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.ft-header__menu {
		flex-direction: column;
		padding: 20px;
		gap: 0;
	}

	.ft-header__menu > li {
		width: 100%;
		margin: 0;
		border-bottom: 1px solid #e2e8f0;
	}

	.ft-header__menu > li > a {
		padding: 16px 0;
		font-size: 18px;
		display: block;
		width: 100%;
	}

	.ft-header__mobile-toggle {
		display: flex !important;
		margin-left: auto;
	}

	.ft-header__cta-section {
		display: none !important;
	}

	.ft-cta-primary,
	.ft-cta-login {
		width: 100%;
		justify-content: center;
		padding: 18px 32px; /* Increased padding for better mobile touch */
		font-size: 16px; /* Ensure readable font size */
		min-height: 48px; /* Minimum touch target size */
	}
}

.hamburger-line {
	width: 24px;
	height: 3px;
	background: #333;
	border-radius: 2px;
	transition: all 0.3s ease;
}

/* Header Spacer */
.ft-header__spacer {
	height: 80px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.ft-header__container {
		padding: 0 10px;
	}
	
	.ft-header__menu {
		position: fixed;
		top: 80px;
		left: -100%;
		width: 100%;
		height: calc(100vh - 80px);
		background: #ffffff;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding: 40px 20px;
		transition: left 0.3s ease;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		gap: 24px;
	}

	.ft-header__logo-image {
		height: 36px;
		max-width: 160px;
	}

	.ft-header__logo {
		padding: 10px 0;
	}  
	.ft-header__menu > li {
		width: 100%;
		border-bottom: 1px solid #eee;
	}

	.ft-header__menu > li > a {
		padding: 20px 0;
		font-size: 18px;
	}

	.ft-header__dropdown {
		position: static;
		transform: none;
		box-shadow: none;
		border-radius: 0;
		background: #f8f9fa;
		margin: 0;
		padding: 20px;
		opacity: 1;
		visibility: visible;
		display: none;
		min-width: auto;
		max-width: none;
	}

	.ft-header__dropdown.active {
		display: block;
	}

	.ft-header__dropdown-content {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.ft-header__mobile-toggle {
		display: flex !important;
		margin-left: auto;
	}

	.ft-header__mobile-toggle.active .hamburger-line:nth-child(1) {
		transform: rotate(45deg) translate(6px, 6px);
	}

	.ft-header__mobile-toggle.active .hamburger-line:nth-child(2) {
		opacity: 0;
	}

	.ft-header__mobile-toggle.active .hamburger-line:nth-child(3) {
		transform: rotate(-45deg) translate(6px, -6px);
	}

	.ft-header__navigation {
		order: 3;
		flex: none;
	}

	.ft-header__cta {
		display: none !important;
	}
	
	.ft-header__cta-section {
		display: none !important;
	}
}

@media (min-width: 769px) {
	.ft-header__mobile-toggle {
		display: none;
	}
}

/* Content Spacing */
.site-content {
	padding-top: 40px;
}

/* Focus States for Accessibility */
.ft-header__menu a:focus,
.ft-cta-primary:focus,
.ft-header__mobile-toggle:focus {
	outline: none;
}

/* Ensure smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* Header Hero Section - Two Column Layout */
.header-hero-section {
	background: #ffffff;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: 0;
	position: relative;
	overflow: hidden;
}

/* Header Hero Container */
.header-hero-container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 60px;
	display: grid;
	grid-template-columns: 40fr 60fr;
	gap: 60px;
	align-items: center;
	min-height: 100vh;
	position: relative;
	z-index: 2;
}

.hero-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
	min-height: 70vh;
	position: relative;
	z-index: 3;
}

/* Left Side - Text Content */
.header-hero-content {
	z-index: 2;
	position: relative;
}

.header-hero-title {
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: #1e293b;
	margin-bottom: 24px;
	letter-spacing: -0.02em;
}

.title-static {
	color: #1e293b;
}

.title-typewriter {
	color: var(--primary-color, #52B880);
	font-weight: 800;
	position: relative;
}

.title-cursor {
	color: var(--primary-color, #52B880);
	animation: blink 1s infinite;
	font-weight: 400;
}

.header-hero-secondary {
	font-size: 2rem;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 32px;
	line-height: 1.3;
}

.header-hero-description {
	margin-bottom: 48px;
}

.description-line-1 {
	font-size: 2.2rem;
	font-weight: 700;
	color: #53b87f;
	margin-top: 32px;
	margin-bottom: 16px;
	line-height: 1.3;
}

.description-line-2 {
	font-size: 1.125rem;
	color: #64748b;
	line-height: 1.6;
	margin: 0;
}

/* CTA Buttons */
.header-hero-ctas {
	display: flex;
	gap: 24px;
	align-items: center;
}

.cta-primary,
.cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 32px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

/* Sunburst effect for all CTA buttons */
.cta-primary::before,
.cta-secondary::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 50%, transparent 70%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.6s ease;
	z-index: 1;
}

.cta-primary:hover::before,
.cta-secondary:hover::before {
	width: 300px;
	height: 300px;
}

/* Ensure text stays above sunburst effect */
.cta-primary .cta-text,
.cta-secondary .cta-text,
.cta-primary span,
.cta-secondary span {
	position: relative;
	z-index: 2;
}

.cta-primary {
	background: #62bd8a;
	color: white;
	border: 2px solid #ffffff;
}

.cta-primary:hover {
	background: #47a372;
	border-color: #47a372;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(82, 184, 128, 0.3);
	color: white;
}

.cta-secondary {
	background: transparent;
	color: #52B880;
	border: 2px solid #52B880;
}

.cta-secondary:hover {
	background: #52B880;
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(82, 184, 128, 0.2);
}

/* CTA circle styles REMOVED for cleaner design */

/* CTA Button Hover Effects - circle effects REMOVED */

/* Right Side - Visual Section */
/* Right Side - Video Section */
.header-hero-visual {
	position: relative;
	z-index: 1;
}

.visual-container {
	position: relative;
	width: 100%;
	height: 100%;
}

.video-showcase {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	aspect-ratio: 16/9;
	width: 100%;
}

.hero-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

/* Video frame styling */
.video-frame {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	border-radius: 16px;
}

.video-border {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 2px solid rgba(82, 184, 128, 0.3);
	border-radius: 16px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.video-showcase:hover .video-border {
	opacity: 1;
}

/* Video controls styling */
.hero-video::-webkit-media-controls-panel {
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(10px);
}

.hero-video::-webkit-media-controls-play-button,
.hero-video::-webkit-media-controls-volume-slider,
.hero-video::-webkit-media-controls-timeline,
.hero-video::-webkit-media-controls-current-time-display,
.hero-video::-webkit-media-controls-time-remaining-display {
	filter: brightness(1.2);
}

/* Legacy product showcase styles for fallback */
.product-showcase {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	background: white;
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
}

.product-screenshot {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px;
}

.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	cursor: pointer;
}

.product-showcase:hover .video-overlay {
	opacity: 1;
}

.play-button {
	width: 64px;
	height: 64px;
	background: rgba(82, 184, 128, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	transition: all 0.3s ease;
}

.play-button:hover {
	background: #52B880;
	transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 1024px) {
	.header-hero-container {
		grid-template-columns: 1fr;
		gap: 48px;
		text-align: center;
		padding: 0 24px;
	}

	.hero-container {
		grid-template-columns: 1fr;
		gap: 48px;
		text-align: center;
		padding: 0 24px;
		min-height: auto;
	}

	.header-hero-title {
		font-size: 3rem;
	}

	.header-hero-secondary {
		font-size: 1.75rem;
	}

	.header-hero-ctas {
		justify-content: center;
	}

	/* Video responsive adjustments */
	.video-showcase {
		max-width: 600px;
		margin: 0 auto;
	}
}

@media (max-width: 768px) {
	.header-hero-section {
		padding: 40px 0 20px 0;
		min-height: auto;
	}

	.header-hero-container {
		gap: 16px;
		padding: 0 16px;
	}

	.hero-container {
		gap: 16px;
		padding: 0 16px;
		min-height: auto;
		grid-template-columns: 1fr;
	}

	.header-hero-title {
		font-size: 2.5rem;
		margin-bottom: 16px;
	}

	.header-hero-visual {
		order: -1;
		max-height: 250px;
		overflow: hidden;
		margin-bottom: 16px;
		margin-top: 0;
	}

	.hero-video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		max-height: 250px;
	}

	.header-hero-secondary {
		font-size: 1.5rem;
		margin-bottom: 24px;
	}

	.description-line-1 {
		font-size: 1.125rem;
	}

	.description-line-2 {
		font-size: 1rem;
	}

	/* Mobile video optimizations */
	.video-showcase {
		border-radius: 12px;
		box-shadow: 0 15px 30px -8px rgba(0, 0, 0, 0.2);
	}

	.hero-video {
		border-radius: 12px;
	}

	.video-frame,
	.video-border {
		border-radius: 12px;
	}

	/* Ensure video controls are touch-friendly on mobile */
	.hero-video::-webkit-media-controls-panel {
		height: 44px; /* Larger touch targets */
		bottom: 0;
		position: absolute;
	}
	
	.video-showcase {
		position: relative;
	}
}

@media (max-width: 480px) {
	.header-hero-title {
		font-size: 2rem;
		line-height: 1.3;
	}

	.header-hero-secondary {
		font-size: 1.25rem;
	}

	.header-hero-ctas {
		flex-direction: column;
		gap: 16px;
		align-items: center;
	}

	.cta-primary,
	.cta-secondary {
		width: 100%;
		max-width: 280px;
		justify-content: center;
	}

	/* Small mobile video adjustments */
	.video-showcase {
		border-radius: 8px;
		aspect-ratio: 16/9; /* Maintain aspect ratio on small screens */
	}

	.hero-video {
		border-radius: 8px;
	}

	.video-frame,
	.video-border {
		border-radius: 8px;
	}

	/* Larger video controls for small screens */
	.hero-video::-webkit-media-controls-panel {
		height: 48px;
	}

	.hero-video::-webkit-media-controls-play-button {
		width: 48px;
		height: 48px;
	}
}
}

.header-hero-ctas {
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.cta-primary,
.cta-secondary {
	width: 100%;
	justify-content: center;
	padding: 16px 24px;
}
}
@media (max-width: 480px) {
	.ft-header__logo-image {
		height: 32px;
		max-width: 140px;
	}

	.hero-container {
		padding: 0 12px;
		gap: 24px;
	}

	.header-hero-title {
		font-size: 2rem;
		line-height: 1.3;
	}

	.header-hero-secondary {
		font-size: 1.25rem;
	}
}

/* Work Your Way Section */
.hero-new-section {
	padding: 120px 0 60px 0; /* Match hero section margins */
	min-height: 941px; /* Match hero section total visual spacing */
	background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* Animation states - REMOVED TO SHOW CONTENT */
.header-hero-content > * {
	opacity: 1;
	transform: translateY(0);
}

.hero-new-content {
	max-width: 1400px;
	width: 100%;
	margin: 0 auto 30px;
	padding: 0 40px;
	text-align: center;
}

.hero-new-title {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
	color: #1e293b;
	margin-bottom: 24px;
	letter-spacing: -0.02em;
	text-align: center;
}

.title-line-1 {
	display: block;
	font-weight: 600;
	color: #64748b;
}

.title-line-2 {
	font-weight: 700;
	color: #1e293b;
}

.typewriter-text {
	color: var(--primary-color, #52B880);
	position: relative;
	font-weight: 800;
	font-size: 1.1em;
	text-shadow: 0 2px 4px rgba(82, 184, 128, 0.2);
}

.typewriter-cursor {
	color: var(--primary-color, #52B880);
	animation: blink 1s infinite;
	font-weight: 400;
}

@keyframes blink {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0; }
}

.hero-new-subtitle {
	font-size: 2rem;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 32px;
	line-height: 1.3;
	margin: 0 auto;
}

.hero-new-description {
	font-size: 1.125rem;
	color: #64748b;
	line-height: 1.6;
	margin: 0 auto;
}

/* Image Comparison Slider - Enhanced to eliminate all white space */
.image-comparison {
	max-width: 1200px;
	width: calc(100% - 160px);
	margin: 0 auto;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	position: relative;
	cursor: pointer;
	background: transparent; /* Ensure no background color shows through */
}

.comparison-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 33.33%; /* 3:1 aspect ratio (1/3 = 0.3333) to match image dimensions 2560×852 */
	overflow: hidden;
	cursor: grab;
	background: transparent; /* Ensure no background color shows through */
	display: block; /* Ensure proper display */
	border: 2px solid white;
}

.comparison-container:active {
	cursor: grabbing;
}

.before-image,
.after-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain; /* Show entire image without cropping */
	object-position: center; /* Center the image content */
	user-select: none;
	pointer-events: none;
	display: block;
	max-width: 100%;
	min-width: 100%; /* Ensure minimum width coverage */
	min-height: 100%; /* Ensure minimum height coverage */
	background: transparent; /* No background color */
	border: none; /* Remove any potential borders */
	outline: none; /* Remove any potential outlines */
}

.after-image {
	clip-path: inset(0 50% 0 0);
	transition: clip-path 0.1s ease-out;
}

.comparison-slider {
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: 100%;
	background: #ffffff;
	transform: translateX(-50%);
	z-index: 10;
	transition: left 0.1s ease-out;
}

.comparison-slider::before,
.comparison-slider::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 20px;
	height: 20px;
	background: #ffffff;
	border-radius: 50%;
	transform: translateX(-50%);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.comparison-slider::before {
	top: 20px;
}

.comparison-slider::after {
	bottom: 20px;
}

.comparison-handle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px;
	height: 48px;
	background: #ffffff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	cursor: grab;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: all 0.2s ease;
	z-index: 20;
	pointer-events: auto;
}

.comparison-handle:hover {
	transform: translate(-50%, -50%) scale(1.1);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.comparison-handle:active {
	cursor: grabbing;
	transform: translate(-50%, -50%) scale(0.95);
}

.comparison-handle:focus {
	outline: 2px solid #52B880;
	outline-offset: 2px;
}

.handle-icon {
	color: #64748b;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.handle-icon svg {
	width: 20px;
	height: 20px;
}

/* Additional rules to ensure perfect image display without white space */
.image-comparison img {
	vertical-align: top; /* Remove any baseline spacing */
	line-height: 0; /* Remove any line height spacing */
}

.image-comparison * {
	box-sizing: border-box; /* Ensure consistent box model */
}

/* Ensure no gaps or spacing around the image comparison */
.hero-new-section .image-comparison {
	margin-top: 0;
	margin-bottom: 0;
}

/* Force images to show entirely on all devices */
@media screen {
	.before-image,
	.after-image {
		object-fit: contain !important;
		width: 100% !important;
		height: 100% !important;
		background: none !important;
	}
}

/* Responsive Design */
@media (max-width: 768px) {
	.hero-new-section {
		padding: 60px 0 40px 0; /* Reduced top padding */
		min-height: auto; /* Allow natural height */
		margin-top: 0;
	}

	.hero-new-title {
		font-size: 2rem;
		margin-bottom: 20px;
		line-height: 1.3;
	}

	.title-line-1 {
		font-size: 0.9em;
		margin-bottom: 0.2em;
	}

	.title-line-2 {
		font-size: 1em;
	}

	.typewriter-text {
		font-size: 1.2em;
		font-weight: 900;
	}

	.hero-new-subtitle {
		font-size: 1.125rem;
	}

	.hero-new-content {
		margin-bottom: 20px;
		padding: 0 20px;
	}

	.image-comparison {
		width: calc(100% - 80px);
		margin: 0 auto;
		border-radius: 8px;
		background: transparent; /* Ensure no background shows on mobile */
	}

	.comparison-container {
		height: 0;
		padding-bottom: 33.33%; /* Maintain 3:1 aspect ratio on mobile */
		background: transparent; /* Ensure no background shows on mobile */
	}

	/* Ensure images show entirely on mobile */
	.before-image,
	.after-image {
		object-fit: contain; /* Show entire image without cropping on mobile */
		min-width: 100%;
		min-height: 100%;
		background: transparent;
	}

	.comparison-handle {
		width: 40px;
		height: 40px;
	}

	.handle-icon svg {
		width: 16px;
		height: 16px;
	}
}

@media (max-width: 480px) {
	.hero-new-title {
		font-size: 1.75rem;
		line-height: 1.3;
	}

	.title-line-1 {
		font-size: 0.85em;
		margin-bottom: 0.3em;
	}

	.title-line-2 {
		font-size: 0.95em;
	}

	.typewriter-text {
		font-size: 1.3em;
		font-weight: 900;
		display: block;
		margin-top: 0.2em;
	}

	.hero-new-subtitle {
		font-size: 1rem;
	}

	.comparison-container {
		height: 50vh;
		min-height: 350px;
	}
}

/* Ensure proper spacing from header */
body.front-page .site-main {
	padding-top: 0;
	margin-top: 0;
}

body.front-page .container {
	max-width: none;
	padding: 0 40px; /* Ensure minimum 40px horizontal padding */
}

/* Animation states - REMOVED TO SHOW CONTENT */
.hero-new-title,
.hero-new-subtitle,
.image-comparison {
	opacity: 1;
	transform: translateY(0);
}


/* Container */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

/* Section Styles */
.features-section,
.stats-section,
.services-section,
.cta-section {
	padding: 120px 0 60px 0; /* Match hero section margins */
	min-height: 941px; /* Match hero section total visual spacing */
}

.features-section {
	background: #ffffff;
	min-height: 941px; /* Match hero section total visual spacing */
}

.stats-section {
	background: #f8fafc;
	min-height: 941px; /* Match hero section total visual spacing */
}

.services-section {
	background: #ffffff;
	min-height: 941px; /* Match hero section total visual spacing */
}

.cta-section {
	background: linear-gradient(135deg, var(--primary-color, #52B880) 0%, #2d5a3d 100%);
	color: white;
	padding: 80px 0 40px 0; /* Reduced padding */
	min-height: auto; /* Remove excessive min-height */
}

/* Section Headers */
.section-header {
	text-align: center;
	margin-bottom: 60px;
}

.section-header h2 {
	font-size: 3.5rem; /* 56px */
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 16px;
	line-height: 1.2;
}

.section-header p {
	font-size: 1.125rem;
	color: #64748b;
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}

.cta-section .section-header h2,
.cta-section h2 {
	color: white;
}

.cta-section .section-header p,
.cta-section p {
	color: rgba(255, 255, 255, 0.9);
}

/* Features Grid */
.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 40px;
	margin-top: 60px;
}

.feature-item {
	text-align: center;
	padding: 40px 20px;
	border-radius: 12px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
	/* Removed translateY animation to prevent icon bobbing */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-icon {
	font-size: 3rem;
	margin-bottom: 24px;
	display: block;
}

/* SVG Icon Styling for Custom Lawft Icons */
.feature-svg-icon {
	width: 64px;
	height: 64px;
	display: block;
	margin: 0 auto;
}

.feature-item h3 {
	font-size: 1.5rem;
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 16px;
}

.feature-item p {
	color: #64748b;
	line-height: 1.6;
}

/* Stats Grid */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 40px;
	margin-top: 60px;
}

.stat-item {
	text-align: center;
	padding: 40px 20px;
}

.stat-number {
	font-size: 4rem;
	font-weight: 700;
	color: var(--primary-color, #52B880);
	margin-bottom: 12px;
	line-height: 1;
}

.stat-label {
	font-size: 1.125rem;
	color: #64748b;
	font-weight: 500;
}

/* Services Grid */
.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
	margin-top: 60px;
}

.service-item {
	background: white;
	padding: 40px 30px;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: 1px solid #e2e8f0;
}

.service-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.service-icon {
	font-size: 2.5rem;
	margin-bottom: 20px;
	display: block;
}

.service-item h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 12px;
}

.service-item p {
	color: #64748b;
	line-height: 1.6;
	font-size: 0.95rem;
}

/* CTA Section */
.cta-content {
	text-align: center;
	max-width: 600px;
	margin: 0 auto;
}

.cta-content h2 {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 20px;
	line-height: 1.2;
}

.cta-content p {
	font-size: 1.125rem;
	margin-bottom: 40px;
	line-height: 1.6;
}

.cta-buttons {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Button Styles */
.btn {
	display: inline-block;
	padding: 16px 32px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	border: 2px solid transparent;
	font-size: 1rem;
	cursor: pointer;
}

.btn-primary {
	background: white;
	color: var(--primary-color, #52B880);
	border-color: white;
}

.btn-primary:hover {
	background: transparent;
	color: white;
	border-color: white;
}

.btn-secondary {
	background: transparent;
	color: white;
	border-color: white;
}

.btn-secondary:hover {
	background: white;
	color: var(--primary-color, #52B880);
}

/* Responsive Design for Sections */
@media (max-width: 768px) {
	.features-section,
	.stats-section,
	.services-section,
	.cta-section {
		padding: 100px 0 40px 0; /* Match hero section mobile minimum */
		min-height: 658px; /* Match mobile hero section total visual spacing (70% of 941px) */
	}

	/* Ensure front-page container has proper mobile padding */
	body.front-page .container {
		padding: 0 32px; /* Consistent mobile horizontal padding */
	}

	.section-header h2 {
		font-size: 2rem;
	}

	.section-header {
		margin-bottom: 40px;
	}

	.features-grid,
	.stats-grid,
	.services-grid {
		gap: 30px;
		margin-top: 40px;
	}

	.stat-number {
		font-size: 3rem;
	}

	.cta-content h2 {
		font-size: 2rem;
	}

	.cta-buttons {
		flex-direction: column;
		align-items: center;
	}

	.btn {
		width: 100%;
		max-width: 300px;
		text-align: center;
	}
}


/* Pain Points vs Solutions Section - Foundational Design Principles */
.pain-solutions-fixed {
	/* Match hero section margins */
	padding: 120px 0 60px 0;
	min-height: 941px; /* Match hero section total visual spacing */
	/* 60% neutral background */
	background: #fafafa;
	position: relative;
}

.pain-solutions-fixed .section-header {
	text-align: center;
	margin-bottom: 80px; /* 10 * 8px */
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.pain-solutions-fixed .section-header h2 {
	font-size: 3rem;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 24px;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.pain-solutions-fixed .section-header p {
	/* Major Third Scale: 16px * 1.25 = 20px = 1.25rem */
	font-size: 1.25rem;
	/* 60% neutral - secondary text */
	color: #4a4a4a;
	/* 150% line height for paragraphs */
	line-height: 1.5;
	margin: 0 auto;
}

.problems-solutions-wrapper {
	/* 12-column grid container */
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px; /* Match hero section padding */
}

.problem-solution-row {
	display: grid;
	/* 12-column grid: 6 columns each */
	grid-template-columns: 1fr 1fr;
	gap: 64px; /* 8 * 8px */
	margin-bottom: 96px; /* 12 * 8px */
	align-items: stretch;
}

.problem-solution-row:last-child {
	margin-bottom: 0;
}

.problem-card,
.solution-card {
	/* Updated to match work your way cards - light borders that darken on hover */
	background: white;
	border: 2px solid #e2e8f0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	border-radius: 16px;
	padding: 48px 40px;
	position: relative;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	transition: all 0.3s ease;
}

/* Light red border for problem cards at rest */
.problem-card {
	border-color: #fecaca;
}

/* Light green border for solution cards at rest */
.solution-card {
	border-color: #dcfce7;
}

/* Hover effects - match work your way cards with darker borders */
.problem-card:hover {
	border-color: #dc2626;
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.solution-card:hover {
	border-color: #22c55e;
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card-badge {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 8px 16px;
	border-radius: 4px;
	margin-bottom: 24px;
	width: fit-content;
	/* FIXED VISIBILITY - clearly visible badges with proper contrast */
	background: rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.problem-badge {
	/* 10% accent color */
	color: #dc2626;
}

.solution-badge {
	/* 10% accent color */
	color: #22c55e;
}

/* Badge hover effects */
.problem-card:hover .problem-badge {
	background: rgba(220, 38, 38, 0.1);
	border: 1px solid rgba(220, 38, 38, 0.2);
}

.solution-card:hover .solution-badge {
	background: rgba(34, 197, 94, 0.1);
	border: 1px solid rgba(34, 197, 94, 0.2);
}

.problem-card h3,
.solution-card h3 {
	/* Major Third Scale: 16px * 1.25^3 = 31.25px ≈ 1.95rem */
	font-size: 1.95rem;
	font-weight: 700;
	/* 60% neutral - primary text */
	color: #1a1a1a;
	margin-bottom: 16px; /* 2 * 8px */
	/* Reduced line height for headings */
	line-height: 1.25;
	/* Tighter letter spacing for headings */
	letter-spacing: -0.01em;
}

.problem-card p,
.solution-card p {
	/* Base font size */
	font-size: 1rem;
	/* 150% line height for paragraphs */
	line-height: 1.5;
	/* 60% neutral - secondary text */
	color: #4a4a4a;
	flex-grow: 1;
	font-weight: 400;
	/* Default letter spacing for body text */
	letter-spacing: 0;
}

/* Conversion-focused CTA after each solution - replaced with actual links in HTML */
.solution-card .learn-more-link {
	display: inline-block;
	margin-top: 24px; /* 3 * 8px */
	font-size: 0.9rem;
	font-weight: 600;
	color: #22c55e;
	text-decoration: none;
	transition: color 0.3s ease, transform 0.2s ease;
}

.solution-card .learn-more-link:hover {
	color: #16a34a;
	transform: translateX(4px);
}

/* Responsive Grid System */
/* Tablet: 8-column grid */
@media (max-width: 1024px) {
	.problems-solutions-wrapper {
		max-width: 768px;
		padding: 0 40px; /* Match hero section padding */
	}

	.problem-solution-row {
		gap: 48px; /* 6 * 8px */
	}

	.problem-card,
	.solution-card {
		padding: 40px 32px; /* 5 * 8px, 4 * 8px */
		min-height: 320px; /* 40 * 8px */
	}

	.problem-card h3,
	.solution-card h3 {
		/* Scale down proportionally */
		font-size: 1.56rem; /* 1.95 * 0.8 */
	}
}

/* Mobile: 4-column grid */
@media (max-width: 768px) {
	.pain-solutions-fixed {
		padding: 100px 0 40px 0; /* Match hero section mobile minimum */
		min-height: 658px; /* Match mobile hero section total visual spacing */
	}

	.pain-solutions-fixed .section-header {
		margin-bottom: 56px; /* 7 * 8px */
	}

	.pain-solutions-fixed .section-header h2 {
		/* Scale down for mobile */
		font-size: 1.95rem;
	}

	.pain-solutions-fixed .section-header p {
		font-size: 1.1rem;
	}

	.problems-solutions-wrapper {
		padding: 0 32px; /* Slightly reduced for mobile but consistent */
	}

	.problem-solution-row {
		/* Single column on mobile */
		grid-template-columns: 1fr;
		gap: 32px; /* 4 * 8px */
		margin-bottom: 64px; /* 8 * 8px */
	}

	.problem-card,
	.solution-card {
		padding: 32px 24px; /* 4 * 8px, 3 * 8px */
		min-height: 280px; /* 35 * 8px */
	}

	.problem-card h3,
	.solution-card h3 {
		font-size: 1.56rem;
	}

	.problem-card p,
	.solution-card p {
		font-size: 0.95rem;
	}
}

@media (max-width: 480px) {
	.pain-solutions-fixed .section-header h2 {
		/* Major Third Scale: 16px * 1.25^2 = 25px = 1.56rem */
		font-size: 1.56rem;
	}

	.problem-card h3,
	.solution-card h3 {
		/* Major Third Scale: 16px * 1.25^2 = 25px = 1.56rem */
		font-size: 1.25rem;
	}

	.problem-card p,
	.solution-card p {
		font-size: 0.9rem;
	}
}


/* Feature Showcase Section - Sticky Scroll Implementation */
.feature-showcase-section {
	/* Match hero section padding and spacing */
	padding: 120px 0 60px 0;
	min-height: 941px; /* Match hero section total visual spacing */
	/* 30% secondary background */
	background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
	position: relative;
	overflow: hidden;
}

.feature-showcase-container {
	/* 12-column grid container */
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px; /* Match hero section padding */
}

.feature-showcase-section .section-header {
	text-align: center;
	margin-bottom: 32px; /* Reduced from 96px to eliminate blank space */
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 64px; /* Add some top padding for breathing room */
}

.feature-showcase-section .section-header h2 {
	/* Major Third Scale: 16px * 1.25^4 = 39.06px ≈ 2.44rem */
	font-size: 2.44rem;
	font-weight: 700;
	/* 60% neutral - primary text */
	color: #1a1a1a;
	margin-bottom: 24px; /* 3 * 8px */
	/* Tighter letter spacing for large headings */
	letter-spacing: -0.02em;
	/* Reduced line height for headings */
	line-height: 1.2;
}

.feature-showcase-section .section-header p {
	/* Major Third Scale: 16px * 1.25 = 20px = 1.25rem */
	font-size: 1.25rem;
	/* 60% neutral - secondary text */
	color: #4a4a4a;
	/* 150% line height for paragraphs */
	line-height: 1.5;
	margin: 0 auto;
}

/* Apollo-Style Feature Tabs and Cards */
.feature-showcase-section {
	padding: 120px 0 60px 0; /* Match hero section margins */
	background: #f4f6f8;
}

.feature-showcase-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

/* Tab Navigation */
.feature-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 0;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feature-tab {
	flex: 1;
	padding: 16px 24px;
	background: #e2e8f0;
	border: none;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: all 0.3s ease;
	color: #64748b;
	position: relative;
}

.feature-tab:hover {
	background: #cbd5e1;
	color: #475569;
}

.feature-tab.active {
	background: #52B880;
	color: white;
}

/* Tab Content Cards */
.feature-tab-content {
	position: relative;
	min-height: 500px;
}

.feature-card {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease;
	border-radius: 0 0 16px 16px;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.feature-card.active {
	opacity: 1;
	visibility: visible;
}

/* Different colored backgrounds for each card */
.feature-card[data-content="sentiment"] {
	background: linear-gradient(135deg, #D8FF91 0%, #A7F3D0 100%);
}

.feature-card[data-content="calendar"] {
	background: linear-gradient(135deg, #C084FC 0%, #DDD6FE 100%);
}

.feature-card[data-content="automation"] {
	background: linear-gradient(135deg, #60A5FA 0%, #BFDBFE 100%);
}

.feature-card[data-content="tracking"] {
	background: linear-gradient(135deg, #F472B6 0%, #FBCFE8 100%);
}

.feature-card-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	padding: 64px;
	min-height: 500px;
	align-items: center;
}

/* Left Content */
.feature-content-left h3 {
	font-size: 2.5rem;
	font-weight: 700;
	color: #1a202c;
	margin-bottom: 32px;
	line-height: 1.2;
}

.feature-benefits {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.benefit-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
}

.benefit-icon {
	font-size: 20px;
	width: 24px;
	text-align: center;
}

.benefit-text {
	font-size: 16px;
	font-weight: 500;
	color: #2d3748;
}

/* Right Content - Visuals */
.feature-content-right {
	display: flex;
	align-items: center;
	justify-content: center;
}

.feature-visual {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 12px;
	padding: 32px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(10px);
	width: 100%;
	max-width: 400px;
}

/* Sentiment Visual */
.sentiment-dashboard {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.message-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border-radius: 8px;
	background: #f8fafc;
	border-left: 4px solid;
}

.message-item.positive {
	border-left-color: #10b981;
}

.message-item.neutral {
	border-left-color: #6b7280;
}

.message-item.negative {
	border-left-color: #ef4444;
}

.message-text {
	font-size: 14px;
	color: #374151;
	font-style: italic;
}

.sentiment-score {
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 4px;
}

.sentiment-score.positive {
	color: #10b981;
}

.sentiment-score.neutral {
	color: #6b7280;
}

.sentiment-score.negative {
	color: #ef4444;
}

/* Calendar Visual */
.calendar-interface {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.calendar-event {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
	background: #f8fafc;
	border-left: 4px solid;
}

.calendar-event.court {
	border-left-color: #dc2626;
}

.calendar-event.meeting {
	border-left-color: #2563eb;
}

.calendar-event.deadline {
	border-left-color: #d97706;
}

.event-time {
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	min-width: 60px;
}

.event-title {
	font-size: 14px;
	color: #374151;
	flex: 1;
}

.event-status {
	font-size: 11px;
	color: #10b981;
	background: #ecfdf5;
	padding: 2px 8px;
	border-radius: 12px;
}

/* Automation Visual */
.workflow-chain {
	display: flex;
	align-items: center;
	gap: 16px;
}

.workflow-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px;
	border-radius: 8px;
	background: #f8fafc;
	flex: 1;
	text-align: center;
}

.workflow-step.active {
	background: #ecfdf5;
	border: 2px solid #10b981;
}

.workflow-step.processing {
	background: #fef3c7;
	border: 2px solid #f59e0b;
}

.workflow-step.pending {
	background: #ede9fe;
	border: 2px solid #8b5cf6;
}

.step-icon {
	font-size: 24px;
}

.step-text {
	font-size: 12px;
	font-weight: 600;
	color: #374151;
}

.workflow-arrow {
	font-size: 20px;
	color: #6b7280;
}

/* Time Tracking Visual */
.time-tracker {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tracking-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
	background: #f8fafc;
}

.activity {
	font-size: 14px;
	color: #374151;
	flex: 1;
}

.time {
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
	min-width: 60px;
}

.status {
	font-size: 11px;
	color: #10b981;
	background: #ecfdf5;
	padding: 2px 8px;
	border-radius: 12px;
}

/* Responsive Design */
@media (max-width: 1024px) {
	.feature-card-inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 48px 32px;
	}

	.feature-content-left h3 {
		font-size: 2rem;
		text-align: center;
	}

	.feature-tabs {
		flex-wrap: wrap;
	}

	.feature-tab {
		flex: 1 1 50%;
		font-size: 12px;
		padding: 12px 16px;
	}
}

@media (max-width: 768px) {
	.feature-showcase-container {
		padding: 0 32px; /* Slightly reduced for mobile but consistent */
	}

	.feature-card-inner {
		padding: 32px 24px;
	}

	.feature-content-left h3 {
		font-size: 1.75rem;
		margin-bottom: 24px;
	}

	.feature-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.feature-tabs::-webkit-scrollbar {
		display: none;
	}

	.feature-tab {
		flex: 0 0 auto;
		min-width: 120px;
		font-size: 11px;
		padding: 10px 12px;
		white-space: nowrap;
	}

}.workflow-chain {
		flex-direction: column;
		gap: 12px;
	}

	.workflow-arrow {
		transform: rotate(90deg);
	}
}1;
}

/* Feature Content */
.feature-content {
	display: grid;
	/* 12-column grid: 7 columns text, 5 columns visual */
	grid-template-columns: 7fr 5fr;
	align-items: center;
	/* 8-point spacing */
	gap: 64px; /* 8 * 8px */
	padding: 64px; /* 8 * 8px */
	position: relative;
	z-index: 2;
}

.feature-text h3 {
	/* Major Third Scale: 16px * 1.25^3 = 31.25px ≈ 1.95rem */
	font-size: 1.95rem;
	font-weight: 700;
	/* 60% neutral - primary text */
	color: #1a1a1a;
	margin-bottom: 16px; /* 2 * 8px */
	/* Reduced line height for headings */
	line-height: 1.25;
	/* Tighter letter spacing for headings */
	letter-spacing: -0.01em;
}

.feature-text p {
	/* Base font size */
	font-size: 1rem;
	/* 150% line height for paragraphs */
	line-height: 1.5;
	/* 60% neutral - secondary text */
	color: #4a4a4a;
	margin-bottom: 32px; /* 4 * 8px */
	font-weight: 400;
}

/* Feature Benefits */
.feature-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 12px; /* 1.5 * 8px */
}

.benefit-tag {
	/* Major Third Scale: 16px * 1.25^-1 = 12.8px ≈ 0.8rem */
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 8px 16px; /* 1 * 8px, 2 * 8px */
	border-radius: 20px; /* 2.5 * 8px */
	/* 10% accent color */
	background: rgba(34, 197, 94, 0.1);
	color: #22c55e;
	border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Feature Visuals */
.feature-visual {
	position: relative;
	height: 320px; /* 40 * 8px */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Sentiment Demo */
.sentiment-demo {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px; /* 2 * 8px */
}

.message-bubble {
	background: white;
	border-radius: 12px;
	padding: 16px 20px; /* 2 * 8px, 2.5 * 8px */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	position: relative;
	animation: float 3s ease-in-out infinite;
}

.message-bubble:nth-child(2) {
	animation-delay: -1s;
}

.message-bubble:nth-child(3) {
	animation-delay: -2s;
}

.message-text {
	display: block;
	font-size: 0.9rem;
	color: #374151;
	margin-bottom: 8px; /* 1 * 8px */
}

.sentiment-indicator {
	font-size: 0.8rem;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 6px;
	display: inline-block;
}

.sentiment-indicator.positive {
	background: rgba(34, 197, 94, 0.1);
	color: #22c55e;
}

.sentiment-indicator.neutral {
	background: rgba(107, 114, 128, 0.1);
	color: #6b7280;
}

.sentiment-indicator.negative {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}

/* Calendar Demo */
.calendar-demo {
	width: 100%;
	background: white;
	border-radius: 12px;
	padding: 24px; /* 3 * 8px */
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.calendar-header {
	text-align: center;
	margin-bottom: 24px; /* 3 * 8px */
}

.month {
	font-size: 1.1rem;
	font-weight: 600;
	color: #1a1a1a;
}

.calendar-events {
	display: flex;
	flex-direction: column;
	gap: 12px; /* 1.5 * 8px */
}

.calendar-event {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px; /* 2 * 8px */
	padding: 12px 16px; /* 1.5 * 8px, 2 * 8px */
	border-radius: 8px; /* 1 * 8px */
	border-left: 4px solid;
}

.calendar-event.court {
	background: rgba(239, 68, 68, 0.05);
	border-left-color: #ef4444;
}

.calendar-event.meeting {
	background: rgba(59, 130, 246, 0.05);
	border-left-color: #3b82f6;
}

.calendar-event.deadline {
	background: rgba(245, 158, 11, 0.05);
	border-left-color: #f59e0b;
}

.event-time {
	font-weight: 600;
	font-size: 0.9rem;
	color: #374151;
}

.event-title {
	font-size: 0.9rem;
	color: #1a1a1a;
}

.event-status {
	font-size: 0.8rem;
	color: #22c55e;
	font-weight: 500;
}

/* Automation Demo */
.automation-demo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px; /* 2 * 8px */
	flex-wrap: wrap;
}

.workflow-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px; /* 1 * 8px */
	padding: 16px; /* 2 * 8px */
	border-radius: 12px;
	min-width: 80px; /* 10 * 8px */
	transition: all 0.3s ease;
}

.workflow-step.active {
	background: rgba(34, 197, 94, 0.1);
	border: 2px solid #22c55e;
}

.workflow-step.processing {
	background: rgba(59, 130, 246, 0.1);
	border: 2px solid #3b82f6;
	animation: pulse 2s infinite;
}

.workflow-step.pending {
	background: rgba(107, 114, 128, 0.1);
	border: 2px solid #d1d5db;
}

.step-icon {
	font-size: 1.5rem;
}

.step-text {
	font-size: 0.8rem;
	font-weight: 600;
	text-align: center;
	color: #374151;
}

.workflow-arrow {
	font-size: 1.2rem;
	color: #9ca3af;
	font-weight: bold;
}

/* Time Tracking Demo */
.timetracking-demo {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px; /* 2 * 8px */
}

.time-entry {
	display: flex;
	align-items: center;
	gap: 16px; /* 2 * 8px */
	background: white;
	border-radius: 12px;
	padding: 16px 20px; /* 2 * 8px, 2.5 * 8px */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border-left: 4px solid #e5e7eb;
	transition: all 0.3s ease;
}

.time-entry.active {
	border-left-color: #22c55e;
	background: rgba(34, 197, 94, 0.02);
}

.time-icon {
	font-size: 1.2rem;
	flex-shrink: 0;
}

.time-details {
	display: flex;
	flex-direction: column;
	gap: 4px; /* 0.5 * 8px */
	flex: 1;
}

.time-task {
	font-size: 0.9rem;
	font-weight: 600;
	color: #1a1a1a;
}

.time-duration {
	font-size: 0.8rem;
	font-weight: 700;
	color: #22c55e;
}

.time-status {
	font-size: 0.75rem;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Feature Showcase CTA */
.feature-showcase-cta {
	text-align: center;
	padding: 64px 32px; /* 8 * 8px, 4 * 8px */
	background: white;
	border-radius: 16px; /* 2 * 8px */
	box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
}

.feature-showcase-cta h3 {
	/* Major Third Scale: 16px * 1.25^3 = 31.25px ≈ 1.95rem */
	font-size: 1.95rem;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 16px; /* 2 * 8px */
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.feature-showcase-cta p {
	font-size: 1.1rem;
	color: #4a4a4a;
	line-height: 1.5;
	margin-bottom: 32px; /* 4 * 8px */
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* Animations */
@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

/* Responsive Design - Following Grid System */
/* Tablet: 8-column grid */
@media (max-width: 1024px) {
	.feature-showcase-container {
		max-width: 768px;
		padding: 0 40px; /* Match hero section padding */
	}

	.feature-content {
		/* 8-column grid: 5 columns text, 3 columns visual */
		grid-template-columns: 5fr 3fr;
		gap: 48px; /* 6 * 8px */
		padding: 48px; /* 6 * 8px */
	}

	.feature-visual {
		height: 280px; /* 35 * 8px */
	}
}

/* Mobile: 4-column grid */
@media (max-width: 768px) {
	.feature-showcase-section {
		padding: 100px 0 40px 0; /* Match hero section mobile minimum (hero has 100px on mobile) */
		min-height: 658px; /* Match mobile hero section total visual spacing */
	}

	.feature-showcase-section .section-header {
		margin-bottom: 64px; /* 8 * 8px */
	}

	.feature-showcase-section .section-header h2 {
		font-size: 1.95rem;
	}

	.feature-showcase-section .section-header p {
		font-size: 1.1rem;
	}

	.feature-showcase-container {
		padding: 0 32px; /* Slightly reduced for mobile but consistent */
	}

	.feature-content {
		/* Single column on mobile */
		grid-template-columns: 1fr;
		gap: 32px; /* 4 * 8px */
		padding: 32px; /* 4 * 8px */
		text-align: center;
	}

	.feature-visual {
		height: 240px; /* 30 * 8px */
	}

	.feature-number {
		top: 16px; /* 2 * 8px */
		left: 16px; /* 2 * 8px */
		font-size: 2.44rem;
	}

	.automation-demo {
		flex-direction: column;
		gap: 12px; /* 1.5 * 8px */
	}

	.workflow-arrow {
		transform: rotate(90deg);
	}
}

@media (max-width: 480px) {
	.feature-showcase-section .section-header h2 {
		font-size: 1.56rem;
	}

	.feature-text h3 {
		font-size: 1.25rem;
	}

	.feature-text p {
		font-size: 0.95rem;
	}

	.feature-showcase-cta h3 {
		font-size: 1.25rem;
	}

	.feature-showcase-cta p {
		font-size: 1rem;
	}
}


.hero-dot {
	position: absolute;
	width: 6px;
	height: 6px;
	background: linear-gradient(135deg, #D8FF91 0%, #52B880 100%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	opacity: 0.1;
	pointer-events: none;
}



/* ===== TRUE HORIZONTAL SCROLL-JACKING FEATURE SHOWCASE ===== */

/* Feature Showcase Section */
.feature-showcase-section {
	position: relative;
	height: 100vh;
	overflow: hidden;
	background: #ffffff;
	padding: 120px 0 260px 0; /* Added 200px bottom padding to show card edges */
}

.feature-showcase-section .section-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	text-align: center;
	padding: 40px 0;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
}

.feature-showcase-section .section-header h2 {
	font-size: 2.5rem;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 16px;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.feature-showcase-section .section-header p {
	font-size: 1.1rem;
	color: #4a4a4a;
	line-height: 1.5;
}

/* Horizontal Scroll Container */
.horizontal-scroll-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

/* Individual Feature Cards */
.horizontal-feature-card {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 80px;
	padding-top: 140px; /* Account for header */
}

/* Card Background with Apollo-style colors */
.card-background {
	width: 100%;
	max-width: 1200px;
	height: calc(100vh - 200px);
	border-radius: 24px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

/* Different background colors for each card (Apollo-style) */
.sentiment-bg {
	background: #edfef6;
}

.calendar-bg {
	background: #fef3f3;
}

.automation-bg {
	background: #f0f9ff;
}

.tracking-bg {
	background: #fefce8;
}

/* Card Content Layout */
.card-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	height: 100%;
	padding: 60px 80px;
	align-items: center;
}

/* Left Side Content */
.card-left {
	color: #1a1a1a;
}

.card-label {
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.8;
	margin-bottom: 24px;
}

.card-left h3 {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 40px;
	letter-spacing: -0.02em;
}

.feature-benefits {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.benefit-item {
	display: flex;
	align-items: center;
	gap: 16px;
	opacity: 0.9;
}

.benefit-icon {
	font-size: 1.5rem;
	width: 32px;
	text-align: center;
}

.benefit-text {
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.4;
}

/* Right Side Visual */
.card-right {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.feature-visual {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border-radius: 16px;
	padding: 40px;
	width: 100%;
	max-width: 400px;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Sentiment Visual */
.sentiment-dashboard {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.message-item {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 12px;
	padding: 16px;
	color: #1a1a1a;
}

.message-text {
	font-size: 0.95rem;
	margin-bottom: 8px;
	line-height: 1.4;
}

.sentiment-score {
	font-size: 0.85rem;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 6px;
	display: inline-block;
}

.sentiment-score.positive {
	background: rgba(34, 197, 94, 0.1);
	color: #16a34a;
}

.sentiment-score.neutral {
	background: rgba(107, 114, 128, 0.1);
	color: #6b7280;
}

.sentiment-score.negative {
	background: rgba(239, 68, 68, 0.1);
	color: #dc2626;
}

/* Calendar Visual */
.calendar-interface {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.calendar-event {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 8px;
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: #1a1a1a;
}

.event-time {
	font-weight: 600;
	font-size: 0.9rem;
	min-width: 60px;
}

.event-title {
	flex: 1;
	font-weight: 500;
}

.event-status {
	font-size: 0.8rem;
	padding: 4px 8px;
	border-radius: 4px;
	background: rgba(52, 211, 153, 0.1);
	color: #059669;
	font-weight: 500;
}

/* Automation Visual */
.workflow-chain {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

.workflow-step {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	color: #1a1a1a;
	min-width: 200px;
}

.step-icon {
	font-size: 1.5rem;
	display: block;
	margin-bottom: 8px;
}

.step-text {
	font-weight: 500;
	font-size: 0.9rem;
}

.workflow-arrow {
	font-size: 1.5rem;
	color: rgba(255, 255, 255, 0.7);
	font-weight: bold;
}

/* Time Tracking Visual */
.time-tracker {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tracking-item {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 8px;
	padding: 16px;
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 16px;
	align-items: center;
	color: #1a1a1a;
}

.activity {
	font-weight: 500;
}

.time {
	font-weight: 600;
	color: #059669;
}

.status {
	font-size: 0.8rem;
	padding: 4px 8px;
	border-radius: 4px;
	background: rgba(52, 211, 153, 0.1);
	color: #059669;
	font-weight: 500;
}

/* Active card indicator */
.horizontal-feature-card.active .card-background {
	transform: scale(1.02);
	box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
}

/* Scroll indicator */
.scroll-indicator {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	gap: 8px;
}

.scroll-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;
}

.scroll-dot.active {
	background: rgba(255, 255, 255, 0.8);
	transform: scale(1.2);
}

/* Responsive Design */
@media (max-width: 1024px) {
	.horizontal-feature-card {
		padding: 0 40px;
		padding-top: 120px;
	}

	.card-content {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 40px;
		text-align: center;
	}

	.card-left h3 {
		font-size: 2.5rem;
	}

	.feature-showcase-section .section-header h2 {
		font-size: 2rem;
	}
}

@media (max-width: 768px) {
	.horizontal-feature-card {
		padding: 0 20px;
		padding-top: 100px;
	}

	.card-content {
		padding: 30px 20px;
	}

	.card-left h3 {
		font-size: 2rem;
	}

	.feature-showcase-section .section-header {
		padding: 20px;
	}

	.feature-showcase-section .section-header h2 {
		font-size: 1.8rem;
	}

	.feature-showcase-section .section-header p {
		font-size: 1rem;
	}
}
/* Apollo horizontal scroller */
#apollo-showcase {
	position: relative;
	height: 100vh;      /* pin height */
	overflow: hidden;   /* avoid double scrollbars while pinned */
}

#apollo-showcase .apollo-feature-layers {
	display: flex;
	flex-wrap: nowrap;
	transform: translate3d(0,0,0);
	will-change: transform;
}

#apollo-showcase .apollo-feature {
	min-width: 100vw;   /* one panel per viewport */
	height: 100vh;
	overflow: hidden;
}

/* Tabs */
#apollo-showcase .apollo-tabs {
	position: sticky;   /* stays visible as you scroll */
	top: 0;
	z-index: 5;
	display: flex;
	gap: .5rem;
	padding: .75rem 1rem;
}

#apollo-showcase .apollo-tab.active,
#apollo-showcase .apollo-tab.is-active {
	font-weight: 700;
	text-decoration: underline;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	#apollo-showcase { height: auto; }
	#apollo-showcase .apollo-feature { height: auto; min-width: 100%; }
}



/* ===== HORIZONTAL SCROLL SECTION STYLES ===== */

/* Platform intro section */
.lawft-platform-section {
	background: transparent;
}

.platform-intro {
	padding: 80px 0 40px 0;
	text-align: center;
}

.h-section .platform-intro {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	padding: 20px 0;
	z-index: 10;
}

.platform-intro h2 {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 24px;
	color: #1e293b;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.platform-intro p {
	font-size: 18px;
	color: #666;
	max-width: 600px;
	margin: 0 auto;
}

/* Horizontal scroll wrapper */
.h-section-wrapper {
	position: relative;
	width: 100%;
	background: transparent;
}

	.h-section {
		position: sticky;
		top: 120px; /* Account for header height */
		height: auto; /* Changed from 60vh to auto to prevent cutting off slides */
		min-height: 80vh; /* Ensure enough space for content */
		overflow: hidden;
		display: flex;
		aligns: flex-start;
		background: transparent;
	}

/* Tabs styling */
.tabs {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 320px); /* Keep tabs narrower for better appearance */
	height: 80px;
	top: 80px; /* Position below the Your Tools heading */
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	z-index: 20;
	background: rgba(255, 255, 255, 0);
	padding: 6px;
	border-radius: 999px;
	}

.tab {
	width: 24%;
	color: #444;
	background: #f7f5f2;
	border-radius: 8px;
	border: 2px solid white;
	height: 3.5em;
	transition: color 0.18s ease, border-color 0.22s ease, transform 0.12s ease;
	cursor: pointer;
	user-select: none;
	padding: 8px 14px;
	font-size: 16px;
	font-weight: 500;
}

/* Default tab colors - using specified colors */
.tab[data-index="0"] {
	background: #8bf8c4 !important; /* Green */
	color: #1a1a1a !important;
}

.tab[data-index="1"] {
	background: #d8b4fe !important; /* Light Purple */
	color: #1a1a1a !important;
}

.tab[data-index="2"] {
	background: #8aceff !important; /* Blue */
	color: #1a1a1a !important;
}

.tab[data-index="3"] {
	background: #ffe785 !important; /* Yellow */
	color: #1a1a1a !important;
}

.tab[aria-current="true"] {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Active tab colors - using specified colors */
.tab[data-index="0"][aria-current="true"] {
	background: #8bf8c4 !important; /* Green */
	color: #1a1a1a !important;
}

.tab[data-index="1"][aria-current="true"] {
	background: #d8b4fe !important; /* Light Purple */
	color: #1a1a1a !important;
}

.tab[data-index="2"][aria-current="true"] {
	background: #8aceff !important; /* Blue */
	color: #1a1a1a !important;
}

.tab[data-index="3"][aria-current="true"] {
	background: #ffe785 !important; /* Yellow */
	color: #1a1a1a !important;
	}

	/* Slides container */
	.slides {
		height: 100%;
		border-radius: 10px;
		display: flex;
		gap: 0; /* No gap between slides for seamless colored backgrounds */
		margin-top: 180px; /* Position below heading (60px) + tabs (80px) + spacing (40px) */
		transition: transform 420ms cubic-bezier(0.22, 0.9, 0.36, 1);
	}

.slide {
	flex: 0 0 100vw; /* Full viewport width for colored background */
	height: 100%;
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding: 0; /* Remove padding from slide itself */
	box-sizing: border-box;
	border-radius: 0; /* Remove border radius for seamless background */
	border: none; /* Remove border */
}

		.slide-inner {
			width: 100%;
			max-width: calc(100vw - 400px); /* Content area with 200px margins on each side */
			margin: 0 200px; /* 200px margins on each side */
			display: flex;
			flex-direction: column;
			justify-content: start;
			row-gap: 20px;
			padding: 4rem 2rem; /* Move padding to inner content */
			background: rgba(255, 255, 255, 0.95); /* Default background - will be overridden by specific slide colors */
			border-radius: 16px; /* Rounded corners for card effect */
			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* Subtle shadow for card effect */
			border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
			margin-top: 20px; /* Reduced from 100px */
			margin-bottom: 40px; /* Reduced from 100px to show more content */
		}

	/* Specific card colors for each slide */
	.slide.s0 .slide-inner {
		background: #edfef6; /* AI sentiment analysis card color */
		border: 2px solid #8bf8c4; /* Green border */
	}
	
	.slide.s1 .slide-inner {
		background: #faf5ff; /* Smart calendaring card color - light purple */
		border: 2px solid #d8b4fe; /* Light purple border */
	}
	
	.slide.s2 .slide-inner {
		background: #f0f9ff; /* Automation engine card color */
		border: 2px solid #8aceff; /* Blue border */
	}
	
	.slide.s3 .slide-inner {
		background: #fffbeb; /* Time tracking platform card color */
		border: 2px solid #ffe785; /* Yellow border */
	}

.slide-info {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 40px;
}

	.slide-media {
		width: 100%;
		height: 100%;
		background: #ffffff;
		border-radius: 16px;
		display: flex;
		aligns: center;
		justify-content: center;
		padding: 40px;
	}

.slide-media img,
.slide-media video {
	border-radius: 16px;
}

.slide .title {
	font-size: clamp(24px, 4vw, 36px);
	margin: 0 0 16px 0;
	font-weight: 700;
	color: #1a1a1a;
}

.slide .desc {
	color: #666;
	line-height: 1.6;
	margin-bottom: 24px;
	font-size: 16px;
}

.panel-card {
	background: #ffffff;
	padding: 0px 0px 0px 24px;
	width: 50%;
	border-radius: 16px;
}

.panel-card ul {
	list-style: none;
	padding: 0;
	margin: 20px 0 0 0;
}

.panel-card li {
	padding: 8px 0;
	color: #666;
	position: relative;
	padding-left: 20px;
}

.panel-card li:before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #10b981;
	font-weight: bold;
}

/* Feature stats */
.feature-stats {
	display: flex;
	gap: 40px;
	justify-content: center;
	align-items: center;
}

.stat-item {
	text-align: center;
}

.stat-number {
	font-size: 48px;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 8px;
}

.stat-label {
	font-size: 14px;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

	/* Slide colors - transparent to show clouds */
	.slide.s0 {
		background: transparent;
	}
	
	.slide.s1 {
		background: transparent;
	}
	
	.slide.s2 {
		background: transparent;
	}
	
	.slide.s3 {
		background: transparent;
	}

/* Button styles for horizontal scroll section */
.lawft-platform-section .btn {
	cursor: pointer;
	user-select: none;
	padding: 12px 24px;
	font-weight: 500;
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
	border-radius: 8px;
	transition: all 0.2s ease;
	text-decoration: none;
	display: inline-block;
	margin-right: 12px;
}

.lawft-platform-section .btn-dark {
	background-color: #1a1a1a;
	color: #fff;
	border: 1px solid #1a1a1a;
}

.lawft-platform-section .btn-dark:hover {
	background-color: #333;
	transform: translateY(-1px);
}

.lawft-platform-section .btn-transparent {
	background-color: transparent;
	color: #1a1a1a;
	border: 1px solid #1a1a1a;
}

.lawft-platform-section .btn-transparent:hover {
	background-color: #f9f9f9;
	transform: translateY(-1px);
}

/* Platform CTA section */
.platform-cta {
	padding: 80px 0;
	text-align: center;
	background: #f9f9f9;
}

.platform-cta h3 {
	font-size: 36px;
	font-weight: 700;
	margin-bottom: 16px;
	color: #1a1a1a;
}

.platform-cta p {
	font-size: 18px;
	color: #666;
	margin-bottom: 32px;
}

/* Responsive design */
@media (prefers-reduced-motion: reduce) {
	.slides {
		transition: none !important;
	}
}

@media (max-width: 1024px) {
	.slide-info {
		flex-direction: column;
		gap: 20px;
	}

	.panel-card {
		width: 100%;
	}

	.feature-stats {
		gap: 20px;
	}

	.stat-number {
		font-size: 36px;
	}

	/* Reduce content margins on tablets */
	.slide-inner {
		margin: 0 80px; /* 80px margins on each side for tablet */
		max-width: calc(100vw - 160px);
	}

	.tabs {
		width: calc(100% - 160px); /* Adjust tabs width for tablet */
	}
}

@media (max-width: 768px) {
	.tabs {
		flex-direction: column;
		height: auto;
		gap: 4px;
		padding: 12px;
		width: calc(100% - 40px); /* Smaller width on mobile */
	}

	.tab {
		width: 100%;
		height: auto;
		padding: 12px;
		font-size: 12px;
	}

	.slides {
		margin-top: 200px; /* Increased to position below tabs on mobile */
	}

	.slide {
		padding: 0; /* Keep no padding on slide itself */
	}

	.slide-inner {
		margin: 0 20px; /* Smaller margins on mobile */
		max-width: calc(100vw - 40px);
		padding: 2rem 1rem 2rem 1rem; /* Ensure bottom padding */
		margin-bottom: 80px; /* Ensure bottom edge is visible */
	}
	
	.slide-media {
		height: auto; /* Allow content to determine height */
		min-height: 150px; /* Minimum height for consistency */
		padding: 20px; /* Reduced padding on mobile */
		overflow: visible; /* Show all content */
		margin-bottom: 20px; /* Add white space below */
	}
	
	.feature-stats {
		flex-direction: row; /* Keep stats side-by-side on mobile */
		flex-wrap: wrap; /* Allow wrapping if needed */
		gap: 20px; /* Reduced gap on mobile */
	}
	
	.stat-number {
		font-size: 32px; /* Smaller font on mobile */
	}
	
	.stat-label {
		font-size: 12px; /* Smaller label on mobile */
	}

	.platform-intro h2 {
		font-size: 32px;
	}

	.platform-cta h3 {
		font-size: 28px;
	}
}



/* Theme Button Styles */
.themeBtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 28px;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	overflow: hidden;
	z-index: 1;
	min-width: 160px;
	height: 48px;
}

/* Button text wrapper */
.themeBtn .button-text {
	position: relative;
	z-index: 3;
	transition: color 0.3s ease;
	text-align: center;
	width: 100%;
}
.themeBtn:hover .btnText{
    z-index: 2;
}
.blueBtn:hover  .btnText{
    color: #1e3a8a;
}
.greenBtn:hover  .btnText{
    color: #1a5a2e;
}
/* Sunrise effect overlay - starts as small circle at bottom center */
.themeBtn::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	transform: translateX(-50%);
	transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 2;
	opacity: 0;
}

/* Blue Button */
.themeBtn.blueBtn {
	background: #3b82f6;
	color: white;
	border: 2px solid #3b82f6;
}

.themeBtn.blueBtn::before {
	background: radial-gradient(
		circle at center,
		#dbeafe 0%,
		#bfdbfe 40%,
		#93c5fd 70%,
		#3b82f6 100%
	);
}

.themeBtn.blueBtn:hover::before {
	width: 400px;
	height: 400px;
	opacity: 1;
	border-radius: 50%;
}

.themeBtn.blueBtn:hover .button-text {
	color: #1e3a8a;
}

/* Green Button */
.themeBtn.greenBtn {
	background: #22c55e;
	color: white;
	border: 2px solid #22c55e;
}

.themeBtn.greenBtn::before {
	background: radial-gradient(
		circle at center,
		#cdf793 0%,
		#b1eb8c 40%,
		#9fe18a 70%,
		#22c55e 100%
	);
}

.themeBtn.greenBtn:hover::before {
	width: 400px;
	height: 400px;
	opacity: 1;
	border-radius: 50%;
}

.themeBtn.greenBtn:hover .button-text {
	color: #1a5a2e;
}

/* Size Variants */
.themeBtn.large {
	padding: 0 36px;
	font-size: 18px;
	line-height: 1;
	min-width: 200px;
	height: 56px;
}

.themeBtn.large:hover::before {
	width: 500px;
	height: 500px;
}

/* Focus states for accessibility */
.themeBtn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.themeBtn.greenBtn:focus {
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
}

/* Active states */
.themeBtn:active {
	transform: translateY(1px);
}

/* Additional hover effects for enhanced interaction */
.themeBtn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.themeBtn.greenBtn:hover {
	border-color: #16a34a;
}

.themeBtn.blueBtn:hover {
	border-color: #2563eb;
}

/* Ensure proper stacking context */
.themeBtn {
	isolation: isolate;
}

/* Mobile Optimization */
@media (max-width: 768px) {
	.themeBtn {
		padding: 0 24px;
		font-size: 15px;
		line-height: 1;
		min-width: 140px;
		height: 44px;
	}

	.themeBtn:hover::before {
		width: 250px;
		height: 250px;
	}

	.themeBtn.large {
		padding: 0 28px;
		font-size: 16px;
		line-height: 1;
		min-width: 160px;
		height: 48px;
	}

	.themeBtn.large:hover::before {
		width: 300px;
		height: 300px;
	}
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
	.themeBtn::before {
		transition: none;
	}

	.themeBtn .button-text {
		transition: none;
	}
}



/* Customization Features Styles */
.customization-features {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 600px;
}

.feature-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	font-size: 16px;
	line-height: 1.5;
}

.checkmark {
	color: #22c55e;
	font-weight: bold;
	font-size: 18px;
	flex-shrink: 0;
	margin-top: 2px;
}

.feature-item strong {
	color: #1f2937;
	font-weight: 600;
}

.feature-item {
	color: #4b5563;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
	.customization-features {
		margin-top: 24px;
		gap: 12px;
	}

	.feature-item {
		font-size: 15px;
		padding: 8px 0;
		gap: 10px;
	}

	.checkmark {
		font-size: 16px;
	}
}


/* Work Your Way Cards Styles - Matching Pricing Page Exactly */
.work-your-way-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 32px;
	max-width: 1200px;
	width: calc(100% - 160px);
	margin: 30px auto 60px;
	padding: 0;
}

.way-card {
	background: white;
	border: 2px solid #e2e8f0;
	border-radius: 16px;
	padding: 32px;
	position: relative;
	transition: all 0.3s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* First and third cards start with very light green */
.way-card:nth-child(1),
.way-card:nth-child(3) {
	border-color: #dcfce7;
}

/* Middle card starts with very light blue */
.way-card:nth-child(2) {
	border-color: #dbeafe;
}

.way-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* First and third cards hover green */
.way-card:nth-child(1):hover,
.way-card:nth-child(3):hover {
	border-color: #22c55e;
}

/* Middle card hovers blue */
.way-card:nth-child(2):hover {
	border-color: #3b82f6;
}

.way-card-title {
	font-size: 28px;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 16px;
	line-height: 1.3;
}

.way-card-description {
	font-size: 16px;
	line-height: 1.6;
	color: #475569;
	margin: 0;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
	.work-your-way-cards {
		grid-template-columns: 1fr;
		gap: 24px;
		margin: 40px auto;
		width: calc(100% - 80px);
		padding: 0;
	}
	
	.way-card {
		padding: 24px;
	}
	
	.way-card-title {
		font-size: 24px;
		margin-bottom: 12px;
	}
	
	.way-card-description {
		font-size: 15px;
	}
}

/* Image Comparison Introduction Text */
.image-comparison-intro {
	text-align: center;
	margin: 40px auto 30px;
	max-width: 600px;
	padding: 0 40px;
}

.image-comparison-intro .section-title {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 16px;
	color: #1e293b;
	text-align: center;
}

.image-comparison-intro p {
	font-size: 1.1rem;
	color: #64748b;
	margin: 0;
	font-weight: 500;
}

@media (max-width: 768px) {
	.image-comparison-intro {
		margin: 30px auto 25px;
		padding: 0 20px;
	}
	
	.image-comparison-intro p {
		font-size: 1rem;
	}
}

/* Client Journey Timeline Styles */
.client-journey-timeline-container {
	margin: 60px auto;
	text-align: center;
	max-width: 100%;
	padding: 0 20px;
	overflow: hidden;
	position: relative;
}

.client-journey-timeline {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
	background: white;
	padding: 20px;
	box-sizing: border-box;
}

/* Timeline Phase Tooltips */
.timeline-tooltip {
	position: absolute;
	background: white;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
	padding: 20px;
	min-width: 280px;
	max-width: 320px;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.3s ease;
	pointer-events: none;
	border: 1px solid #e2e8f0;
}

.timeline-tooltip.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.timeline-tooltip h3 {
	margin: 0 0 8px 0;
	font-size: 18px;
	font-weight: 700;
	color: #1e293b;
}

.timeline-tooltip .phase-subtitle {
	font-size: 14px;
	color: #64748b;
	margin-bottom: 16px;
	font-weight: 500;
}

.timeline-tooltip .automation-section {
	margin-bottom: 16px;
}

.timeline-tooltip .automation-section:last-child {
	margin-bottom: 0;
}

.timeline-tooltip .automation-title {
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
}

.timeline-tooltip .automation-title::before {
	content: "⚡";
	margin-right: 6px;
	font-size: 12px;
}

.timeline-tooltip .automation-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.timeline-tooltip .automation-list li {
	font-size: 13px;
	color: #64748b;
	margin-bottom: 4px;
	padding-left: 16px;
	position: relative;
}

.timeline-tooltip .automation-list li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: #94a3b8;
}

.timeline-tooltip .tasks-section {
	border-top: 1px solid #f1f5f9;
	padding-top: 12px;
	margin-top: 12px;
}

.timeline-tooltip .tasks-title {
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.timeline-tooltip .tasks-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.timeline-tooltip .tasks-list li {
	font-size: 12px;
	color: #94a3b8;
	margin-bottom: 3px;
	padding-left: 12px;
	position: relative;
}

.timeline-tooltip .tasks-list li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: #cbd5e1;
	font-size: 10px;
}

/* Phase-specific tooltip colors */
.timeline-tooltip.phase-1 h3 { color: #3b82f6; }
.timeline-tooltip.phase-2 h3 { color: #10b981; }
.timeline-tooltip.phase-3 h3 { color: #f59e0b; }
.timeline-tooltip.phase-4 h3 { color: #ef4444; }
.timeline-tooltip.phase-5 h3 { color: #8b5cf6; }

.timeline-tooltip.phase-1 .automation-title::before { color: #3b82f6; }
.timeline-tooltip.phase-2 .automation-title::before { color: #10b981; }
.timeline-tooltip.phase-3 .automation-title::before { color: #f59e0b; }
.timeline-tooltip.phase-4 .automation-title::before { color: #ef4444; }
.timeline-tooltip.phase-5 .automation-title::before { color: #8b5cf6; }

@media (max-width: 768px) {
	.client-journey-timeline-container {
		margin: 40px auto;
		padding: 0 10px;
	}
	
	.client-journey-timeline {
		padding: 15px;
		border-radius: 12px;
	}
	
	.timeline-tooltip {
		min-width: 260px;
		max-width: 280px;
		padding: 16px;
	}
}

/* Lead Features Styles */
.lead-features {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 800px;
	margin: 0 auto;
	padding: 0 20px;
}

.lead-features .feature-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 0;
	font-size: 18px;
	line-height: 1.6;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.lead-features .feature-item:last-child {
	border-bottom: none;
}

.lead-features .checkmark {
	color: #22c55e;
	font-weight: bold;
	font-size: 20px;
	flex-shrink: 0;
	margin-top: 2px;
}

.lead-features .feature-item strong {
	color: #1f2937;
	font-weight: 600;
}

.lead-features .feature-item {
	color: #4b5563;
}

/* Mobile responsive adjustments for lead features */
@media (max-width: 768px) {
	.lead-features {
		gap: 16px;
		padding: 0 16px;
	}

	.lead-features .feature-item {
		font-size: 16px;
		padding: 12px 0;
		gap: 12px;
	}

	.lead-features .checkmark {
		font-size: 18px;
	}
}


/* Make prefooter buttons the same width */
.pre-footer-cta-buttons .themeBtn {
	min-width: 200px;
	width: 200px;
}

.pre-footer-cta-buttons {
	display: flex;
	gap: 16px;
	justify-content: center;
	align-items: center;
}