/* DM Sans Regular (400) */
@font-face {
	font-family: 'DM Sans';
	src: url('/font/DM_Sans/static/DMSans-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url('/font/DM_Sans/static/DMSans-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* DM Sans Medium (500) */
@font-face {
	font-family: 'DM Sans';
	src: url('/font/DM_Sans/static/DMSans-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url('/font/DM_Sans/static/DMSans-MediumItalic.ttf') format('truetype');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

/* DM Sans SemiBold (600) */
@font-face {
	font-family: 'DM Sans';
	src: url('/font/DM_Sans/static/DMSans-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url('/font/DM_Sans/static/DMSans-SemiBoldItalic.ttf') format('truetype');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

/* DM Sans Bold (700) */
@font-face {
	font-family: 'DM Sans';
	src: url('/font/DM_Sans/static/DMSans-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url('/font/DM_Sans/static/DMSans-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

.material-symbols-rounded {
	font-family: 'Material Symbols Rounded';
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	width: 1em;
	height: 1em;
	overflow: hidden;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}

:root {
	--font-primary: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-title: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--bg-main: #ffffff;
	--bg-body: #f8fafc;
	--bg-card: rgba(255, 255, 255, 0.82);
	--bg-subtle: #f1f5f9;
	--bg-input: #ffffff;
	--bg-hero:
		radial-gradient(ellipse 90% 650px at 50% -50px, rgba(65, 114, 243, 0.16) 0%, rgba(16, 198, 243, 0.08) 50%, transparent 80%),
		radial-gradient(circle 600px at 95% 30%, rgba(16, 198, 243, 0.07) 0%, transparent 70%),
		radial-gradient(circle 600px at 5% 70%, rgba(99, 102, 241, 0.07) 0%, transparent 70%);
	--bg-dots-pattern: radial-gradient(circle, rgba(99, 102, 241, 0.12) 1.25px, transparent 1.25px);
	--bg-grid-pattern:
		linear-gradient(to right, rgba(99, 102, 241, 0.035) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(99, 102, 241, 0.035) 1px, transparent 1px);

	--text-primary: #0f172a;
	--text-secondary: #475569;
	--text-muted: #94a3b8;

	--accent: #6366f1;
	--accent-light: #818cf8;
	--accent-hover: #4f46e5;
	--accent-gradient: linear-gradient(135deg, #4172f3 0%, #10c6f3 100%);
	--accent-glow: transparent;

	--border-color: #e2e8f0;
	--border-hover: #cbd5e1;
	--success: #10b981;
	--success-bg: rgba(16, 185, 129, 0.1);
	--error: #ef4444;
	--error-bg: rgba(239, 68, 68, 0.1);

	--radius-lg: 20px;
	--radius-md: 12px;
	--radius-sm: 8px;

	--card-shadow: none;
	--card-shadow-hover: none;
	--glow-shadow: none;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family:
		'DM Sans',
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		sans-serif;
	background-color: var(--bg-body);
	background-image: var(--bg-hero), var(--bg-dots-pattern), var(--bg-grid-pattern);
	background-size:
		100% 100%,
		24px 24px,
		72px 72px;
	background-position:
		0 0,
		0 0,
		0 0;
	background-attachment: fixed;
	color: var(--text-primary);
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Site Top Navigation Header */
header.header {
	position: sticky;
	top: 0;
	z-index: 1000;
	padding: 16px 24px;
}

.glassmorphism {
	backdrop-filter: blur(12px) saturate(180%);
	border-color: currentcolor !important;
	outline: none !important;
}

.header-container {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.brand-logo {
	font-size: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	/* background: rgba(79, 70, 229, 0.1); */
	border-radius: 10px;
}

.brand-name {
	font-size: 22px;
	font-weight: 700;
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: -0.5px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 24px;
	list-style: none;
}

.nav-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.nav-links a {
	color: var(--text-secondary);
	text-decoration: none;
	font-weight: 500;
	font-size: 14.5px;
	transition: color 0.2s ease;
}

.nav-links a:hover {
	color: var(--accent);
}

.btn-header {
	background: var(--accent-gradient);
	color: #ffffff !important;
	padding: 10px 20px;
	border-radius: 30px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-header:hover {
	box-shadow: none;
}

/* Hero Section */
.hero {
	position: relative;
	padding: 80px 24px 60px;
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}

.hero::before {
	content: '';
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 680px;
	max-width: 92vw;
	height: 340px;
	background: radial-gradient(ellipse at center, rgba(65, 114, 243, 0.18) 0%, rgba(16, 198, 243, 0.08) 50%, transparent 75%);
	filter: blur(50px);
	pointer-events: none;
	z-index: -1;
}

/* Hero 3-Tier Vidyst Layout */
.hero-stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 980px;
	margin: 0 auto 18px;
	gap: 6px;
}

.hero-tier {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-title);
	color: var(--text-secondary);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.2;
}

.hero-tier-bottom {
	font-size: 24px;
	color: var(--text-muted);
}

.hero-tier-prefix {
	color: var(--text-secondary);
	font-weight: 550;
	white-space: nowrap;
}

.hero-tier-grid {
	display: inline-grid;
	justify-content: start;
	justify-items: start;
	align-items: center;
	overflow: hidden;
	position: relative;
	min-height: 38px;
	vertical-align: middle;
}

.hero-tier-slot {
	grid-area: 1 / 1;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	white-space: nowrap;
	font-weight: 750;
	color: var(--text-primary);
	opacity: 0;
	transform: translateY(0.6em) scale(0.92);
	filter: blur(6px);
	transition:
		opacity 0.5s ease,
		transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1),
		filter 0.5s ease;
	will-change: transform, opacity, filter;
	pointer-events: none;
}

.hero-tier-slot.active {
	opacity: 1;
	transform: translateY(0) scale(1);
	filter: blur(0);
	pointer-events: auto;
}

.hero-tier-slot.slide-out {
	opacity: 0;
	transform: translateY(-0.6em) scale(0.92);
	filter: blur(6px);
	pointer-events: none;
}

.hero-tier-slot.no-transition {
	transition: none !important;
}

.rotator-icon {
	width: 32px;
	height: 32px;
	object-fit: contain;
	display: inline-block;
	flex-shrink: 0;
	border-radius: 7px;
	vertical-align: middle;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.hero-tier-bottom .rotator-icon {
	width: 30px;
	height: 30px;
}

.rotator-name {
	font-weight: 750;
	color: var(--text-primary);
	background: none !important;
	-webkit-text-fill-color: initial !important;
}

.rotator-badge-soon {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(99, 102, 241, 0.12);
	color: var(--accent);
	border: 1px solid rgba(99, 102, 241, 0.3);
	vertical-align: middle;
	line-height: 1;
	margin-left: 6px;
	box-shadow: none;
}

@media (max-width: 480px) {
	.rotator-badge-soon {
		font-size: 9px;
		padding: 2px 6px;
		margin-left: 4px;
	}
}

.hero h1,
.hero-title-rotator {
	font-size: 64px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -2.5px;
	margin: 0 auto;
	color: var(--text-primary);
	text-align: center;
	width: 100%;
	max-width: 960px;
}

.vidyst-grid {
	display: grid;
	justify-content: center;
	justify-items: center;
	align-items: center;
	overflow: hidden;
	padding: 0;
	min-height: 116px;
	position: relative;
	width: 100%;
	background: none !important;
	-webkit-text-fill-color: initial !important;
}

.vidyst-slot {
	grid-area: 1 / 1;
	display: block;
	text-align: center;
	width: 100%;
	white-space: normal;
	color: var(--text-primary);
	background: none !important;
	-webkit-text-fill-color: var(--text-primary) !important;
	opacity: 0;
	transform: translateY(0.6em) scale(0.92);
	filter: blur(6px);
	transition:
		opacity 0.5s ease,
		transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1),
		filter 0.5s ease;
	will-change: transform, opacity, filter;
	pointer-events: none;
}

.vidyst-slot.active {
	opacity: 1;
	transform: translateY(0) scale(1);
	filter: blur(0);
	pointer-events: auto;
}

.vidyst-slot.slide-out {
	opacity: 0;
	transform: translateY(-0.6em) scale(0.92);
	filter: blur(6px);
	pointer-events: none;
}

.vidyst-slot.no-transition {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.vidyst-slot {
		transition: opacity 0.3s ease !important;
		transform: none !important;
		filter: none !important;
	}

	.vidyst-slot.slide-out {
		transform: none !important;
		filter: none !important;
	}
}

.vidyst-slot span {
	display: inline !important;
	background: var(--accent-gradient) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

.hero p {
	color: var(--text-secondary);
	font-size: 18px;
	font-weight: 400;
	max-width: 680px;
	margin: 0 auto 36px;
	line-height: 1.6;
}

.hero-cta-group {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.btn-primary-lg {
	background: var(--accent-gradient);
	color: #ffffff;
	padding: 16px 32px;
	border-radius: 40px;
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
	transition: all 0.25s ease;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.btn-primary-lg:hover {
	transform: translateY(-2px);
	box-shadow: none;
}

.btn-secondary-lg {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	padding: 16px 28px;
	border-radius: 40px;
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	transition: all 0.2s ease;
	box-shadow: var(--card-shadow);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-secondary-lg:hover {
	background: #ffffff;
	border-color: var(--border-hover);
	transform: translateY(-2px);
	box-shadow: var(--card-shadow-hover);
}

.trust-badges {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
	color: var(--text-muted);
	font-size: 14px;
	font-weight: 500;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.trust-item svg {
	color: var(--success);
}

/* Extension Mockup Card */
.mockup-container {
	max-width: 960px;
	margin: 20px auto 70px;
	padding: 0 24px;
}

.mockup-card {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(226, 232, 240, 0.9);
	border-radius: var(--radius-lg);
	box-shadow: none;
	overflow: hidden;
	position: relative;
}

.mockup-header {
	background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.85) 100%);
	border-bottom: 1px solid var(--border-color);
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.window-dots {
	display: flex;
	gap: 6px;
}

.dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.dot-red {
	background: #ef4444;
}

.dot-yellow {
	background: #f59e0b;
}

.dot-green {
	background: #10b981;
}

.window-title {
	font-size: 13px;
	color: var(--text-muted);
	font-weight: 500;
	margin-left: 10px;
}

/* Typography: DM Sans for all Headings & Titles */
h1,
h2,
h3,
h4,
h5,
h6,
.hero h1,
.section-title h2,
.doc-header h2,
.legal-header h2,
.feature-card h3,
.step-card h3,
.plan-title,
.pricing-card-name,
.faq-question,
.brand-name,
.brand,
.nav-logo,
.browser-option-title,
.browser-menu-header,
.window-title,
[class*='-title'] {
	font-family: var(--font-title);
}

p {
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.65;
}

strong,
b,
.highlight-text {
	font-weight: 500;
}

.hero p,
.section-title p,
.section-subtitle,
.special-subtitle,
.plan-desc,
.step-card p,
.feature-card p,
.hero-badge,
.pricing-badge,
.browser-option-desc,
.pricing-subtitle,
.doc-section-subtitle,
[class*='-subtitle'] {
	font-family: var(--font-title);
}

.mockup-body {
	padding: 30px;
	background:
		radial-gradient(circle at 100% 100%, rgba(65, 114, 243, 0.04) 0%, transparent 50%),
		radial-gradient(circle at 0% 0%, rgba(16, 198, 243, 0.03) 0%, transparent 40%);
}

/* Local Scroll Video (80% width, centered, no shadow, no border) */
.local-video-section {
	width: 100%;
	margin: 30px auto 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 16px;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	background: transparent;
}

.local-video-wrapper {
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: none;
}

.local-video-wrapper video,
.local-video-link video {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	pointer-events: none;
	border-radius: 16px !important;
	transition: filter 0.25s ease;
}

.local-video-link {
	display: block;
	width: 100%;
	position: relative;
	cursor: pointer;
	text-decoration: none;
	overflow: hidden;
}

@media (max-width: 768px) {
	.local-video-wrapper {
		width: 95%;
		border-width: 3px;
	}
}

.gmail-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 18px 24px;
	margin-bottom: 16px;
	box-shadow: none;
	transition: all 0.2s ease;
}

.gmail-row:hover {
	border-color: rgba(99, 102, 241, 0.35);
	transform: translateX(3px);
	box-shadow: none;
}

.gmail-info {
	display: flex;
	align-items: center;
	gap: 16px;
}

.gmail-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--accent-gradient);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
}

.gmail-details h4 {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 2px;
}

.gmail-details p {
	font-size: 13px;
	color: var(--text-secondary);
}

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: var(--success-bg);
	color: var(--success);
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
}

.notification-popup {
	background: rgba(255, 255, 255, 0.98);
	border: 1px solid rgba(99, 102, 241, 0.3);
	border-radius: var(--radius-md);
	padding: 16px 20px;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 460px;
	margin: 20px auto 0;
	animation: floatPulse 3s infinite ease-in-out;
}

@keyframes floatPulse {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-4px);
	}
}

.notif-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.notif-icon {
	font-size: 22px;
}

.notif-text h5 {
	font-size: 14px;
	font-weight: 700;
	color: var(--text-primary);
}

.notif-text p {
	font-size: 12px;
	color: var(--text-secondary);
}

.notif-time {
	font-size: 12px;
	color: var(--accent);
	font-weight: 600;
}

/* Features Grid */
.features-section {
	max-width: 1050px;
	margin: 0 auto 80px;
	padding: 0 24px;
}

.section-title,
.legal-header {
	text-align: center;
	margin-bottom: 48px;
}

.section-title h2,
.legal-header h2 {
	font-size: 42px;
	font-weight: 700;
	letter-spacing: -1.25px;
	line-height: 1.2;
	margin-bottom: 12px;
	color: #0f172a;
}

.section-title p,
.legal-header p {
	color: var(--text-secondary);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	max-width: 650px;
	margin: 0 auto;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: #e2e8f0;
	border: 1px solid #e2e8f0;

	overflow: hidden;
	box-shadow:
		0 4px 20px -2px rgba(15, 23, 42, 0.04),
		0 2px 6px -1px rgba(15, 23, 42, 0.02);
}

@media (max-width: 900px) {
	.features-grid {
		grid-template-columns: repeat(2, 1fr);
		border-radius: 16px;
	}
}

@media (max-width: 600px) {
	.features-grid {
		grid-template-columns: 1fr;
		border-radius: 14px;
	}
}

.feature-card {
	background: #ffffff;
	border: none;
	border-radius: 0 !important;
	padding: 34px 30px 28px;
	box-shadow: none;
	transition: background-color 0.15s ease;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.feature-card:hover {
	background: #fafbfc;
}

.feature-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.feature-icon {
	width: auto;
	height: auto;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin: 0 !important;
	padding: 0 !important;
	flex-shrink: 0;
}

.feature-icon svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: currentColor;
	stroke-width: 2.2;
}

.feature-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.35;
	margin: 0 !important;
	width: fit-content;
}

/* Badge Color Themes matching reference */
.badge-blue {
	background: #eff6ff;
	color: #1d4ed8;
}

.badge-purple {
	background: #f5f3ff;
	color: #6d28d9;
}

.badge-amber {
	background: #fef3c7;
	color: #b45309;
}

.badge-slate {
	background: #f1f5f9;
	color: #334155;
}

.badge-orange {
	background: #ffedd5;
	color: #c2410c;
}

.badge-teal {
	background: #ccfbf1;
	color: #0f766e;
}

/* Specific icon colors matching their badge theme */
.feature-card:nth-child(1) .feature-icon {
	color: #2563eb;
}

.feature-card:nth-child(2) .feature-icon {
	color: #7c3aed;
}

.feature-card:nth-child(3) .feature-icon {
	color: #d97706;
}

.feature-card:nth-child(4) .feature-icon {
	color: #475569;
}

.feature-card:nth-child(5) .feature-icon {
	color: #ea580c;
}

.feature-card:nth-child(6) .feature-icon {
	color: #0d9488;
}

.feature-card h3:not(.feature-badge) {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -1px;
	color: var(--text-primary);
	line-height: 1.3;
	margin-bottom: 12px;
}

.feature-card p,
.feature-desc {
	color: #334155;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
	margin-bottom: 24px;
}

.feature-link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 500;
	color: #64748b;
	transition: color 0.15s ease;
	text-decoration: none;
}

.feature-link .arrow {
	transition: transform 0.15s ease;
	display: inline-block;
}

.feature-card:hover .feature-link {
	color: #2563eb;
}

.feature-card:hover .feature-link .arrow {
	transform: translateX(3px);
}

/* Steps Section (How Seenify Works Showcase) */
.steps-section {
	display: block;
	position: relative;
	background-color: #f8fafc;
	background-image:
		radial-gradient(ellipse 70% 360px at 50% 0%, rgba(65, 114, 243, 0.08) 0%, transparent 70%),
		radial-gradient(ellipse 60% 300px at 50% 100%, rgba(16, 198, 243, 0.05) 0%, transparent 70%),
		linear-gradient(to right, rgba(99, 102, 241, 0.035) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(99, 102, 241, 0.035) 1px, transparent 1px);
	background-size:
		100% 100%,
		100% 100%,
		36px 36px,
		36px 36px;
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	padding: 85px 24px;
	margin-bottom: 80px;
}

.steps-container {
	max-width: 1120px;
	width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 52px;
	align-items: center;
}

.steps-preview {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	overflow: hidden;
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.dashboard-preview-img {
	width: 100%;
	height: auto;
}

.steps-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.steps-content h2 {
	font-family: var(--font-title);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--text-primary);
	margin-bottom: 16px;
}

.steps-content > p {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--text-secondary);
	margin-bottom: 24px;
}

.steps-list {
	list-style: none;
	padding: 0;
	margin: 0 0 30px 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.steps-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.steps-list .step-check-icon {
	color: #10b981;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
}

.steps-list li div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.steps-list li strong {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--text-primary);
}

.steps-list li span {
	font-size: 13.5px;
	color: var(--text-secondary);
	line-height: 1.45;
}

.steps-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	width: 100%;
}

.steps-actions .steps-cta {
	width: auto;
	display: inline-flex;
	padding: 12px 24px;
}

.steps-actions .steps-cta-secondary {
	width: auto;
	display: inline-flex;
	padding: 12px 24px;
	background: #ffffff;
	border: 1px solid var(--border-color);
	color: var(--text-primary);
}

.steps-actions .steps-cta-secondary:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: rgba(99, 102, 241, 0.05);
}

@media (max-width: 960px) {
	.steps-container {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.steps-content h2 {
		font-size: 27px;
	}
}

/* Pricing Section */
.pricing-section {
	max-width: 1100px;
	width: 100%;
	margin: 0 auto 90px;
	padding: 0 24px;
	scroll-margin-top: 100px;
}

/* Badge-Integrated Pricing Headline (Reference Inspired) */
.pricing-header-badge-title,
.section-title.pricing-header-badge-title {
	text-align: center !important;
	margin: 0 auto 34px !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.pricing-badge-headline {
	font-family: var(--font-title);
	font-size: 36px !important;
	font-weight: 850;
	letter-spacing: -1px;
	line-height: 1.25;
	margin: 0 auto 12px !important;
	color: #0f172a;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center !important;
	gap: 6px;
	width: 100%;
}

.pricing-headline-row {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	text-align: center;
}

.pricing-headline-row.muted {
	color: #64748b;
}

.headline-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	vertical-align: middle;
}

.headline-badge.badge-green {
	background: #22c55e !important;
	color: #ffffff !important;
}

.headline-badge.badge-dark {
	background: #0f172a !important;
	color: #ffffff !important;
}

.headline-badge svg {
	width: 18px;
	height: 18px;
	display: block;
}

.pricing-header-badge-title p,
.section-title.pricing-header-badge-title p {
	color: var(--text-secondary);
	font-size: 17px !important;
	line-height: 1.55;
	max-width: 650px;
	margin: 0 auto !important;
	text-align: center !important;
}

.billing-toggle-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 auto 40px;
	flex-wrap: wrap;
}

.billing-toggle {
	display: inline-flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--border-color);
	border-radius: 999px;
	padding: 4px;
	box-shadow: var(--card-shadow);
}

.toggle-btn {
	border: none;
	background: transparent;
	padding: 8px 22px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-secondary);
	cursor: pointer;
	transition: all 0.2s ease;
}

.toggle-btn.active {
	background: var(--accent-gradient);
	color: #ffffff;
	box-shadow: none;
}

.save-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(16, 185, 129, 0.12);
	color: #059669;
	border: 1px solid rgba(16, 185, 129, 0.25);
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2px;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--border-color);
	border: 1px solid var(--border-color);
	border-radius: 0;
	align-items: stretch;
	margin-top: 24px;
}

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

.pricing-card {
	position: relative;
	background: #ffffff;
	border: none;
	border-radius: 0 !important;
	padding: 38px 28px 32px;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: background-color 0.2s ease;
}

.pricing-card:hover {
	transform: none;
	box-shadow: none;
	background: #ffffff;
}

.pricing-card.featured {
	position: relative;
	background: #ffffff;
	outline: 2px solid #6366f1;
	outline-offset: -1px;
	z-index: 2;
}

.pricing-card.featured:hover {
	box-shadow: none;
	transform: none;
}

.popular-tag {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--accent-gradient);
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	padding: 4px 14px;
	border-radius: 999px;
	box-shadow: none;
	white-space: nowrap;
	z-index: 3;
}

.plan-header {
	margin-bottom: 24px;
}

.plan-name-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.plan-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--text-primary);
}

.plan-tagline {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.5;
	min-height: 42px;
}

.plan-price-box {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 20px 0 6px;
}

.plan-currency {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-primary);
}

.plan-amount {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--text-primary);
	line-height: 1;
}

.plan-amount-tba {
	font-size: 26px !important;
	font-weight: 700 !important;
	letter-spacing: -0.5px !important;
	line-height: 1.2 !important;
}

.plan-period {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
}

.plan-billed-note {
	font-size: 12px;
	color: var(--text-muted);
	font-weight: 500;
	min-height: 18px;
}

.plan-divider {
	height: 1px;
	background: var(--border-color);
	margin: 24px 0;
}

.plan-features {
	list-style: none;
	margin-bottom: 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.plan-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.45;
}

.plan-features li .check-icon {
	color: #10b981;
	font-size: 19px;
	flex-shrink: 0;
	margin-top: 1px;
}

.plan-features li strong {
	color: var(--text-primary);
}

.plan-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px 22px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

.custom-button.plan-cta {
	width: 100%;
	border-radius: 2rem;
	padding: 13px 22px;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	box-sizing: border-box;
}

.custom-button.plan-cta .material-symbols-rounded {
	font-size: 18px;
	transition: transform 0.2s ease;
}

.custom-button.plan-cta:hover .material-symbols-rounded {
	transform: translateX(3px);
}

.custom-button.plan-cta.custom-button-primary {
	background-color: #2563eb;
	border-color: #2563eb;
	background-image: linear-gradient(#fff0, #ffffff36);
	box-shadow:
		inset 0 1px #ffffff40,
		0 2px 8px rgba(37, 99, 235, 0.25);
}

.custom-button.plan-cta.custom-button-primary:hover {
	background-color: #1d4ed8;
	border-color: #1d4ed8;
	box-shadow: none;
}

.plan-cta.btn-outline {
	background: #ffffff;
	border-color: var(--border-color);
	color: var(--text-primary);
}

.plan-cta.btn-outline:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: rgba(99, 102, 241, 0.05);
}

.plan-cta.btn-primary {
	background: var(--accent-gradient);
	color: #ffffff;
	box-shadow: none;
}

.plan-cta.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: none;
}

.pricing-guarantee-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px dashed var(--border-color);
}

.guarantee-item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 500;
}

.guarantee-item .material-symbols-rounded {
	color: var(--accent);
	font-size: 18px;
}

/* Cashfree-Style FAQ 2-Column Rounded Grid */
.faq-section {
	max-width: 1160px;
	width: 100%;
	margin: 0 auto 90px;
	padding: 0 24px;
	scroll-margin-top: 100px;
}

.faq-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 20px;
	align-items: start;
	margin-top: 40px;
}

.faq-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

@media (max-width: 860px) {
	.faq-list {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

.faq-item {
	background: #ffffff;
	border: 1px solid rgba(226, 232, 240, 0.95);
	border-radius: 20px;
	box-shadow: none;
	overflow: hidden;
	transition:
		border-color 0.25s ease,
		background-color 0.25s ease;
}

.faq-item:hover {
	border-color: rgba(99, 102, 241, 0.35);
	background: #ffffff;
}

.faq-item[open]:not(.is-closing) {
	border-color: rgba(99, 102, 241, 0.45);
	background: #ffffff;
}

.faq-item.is-closing {
	border-color: rgba(226, 232, 240, 0.95);
}

.faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	font-size: 15px;
	font-weight: 550;
	color: #0f172a;
	cursor: pointer;
	user-select: none;
	list-style: none;
	transition: color 0.2s ease;
}

.faq-question::-webkit-details-marker {
	display: none;
}

.faq-question span {
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.faq-question:hover span {
	color: var(--accent);
}

/* Subtle Rounded Square Plus Button (Cashfree Style) */
.faq-toggle-btn {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #f1f5f9;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #64748b;
	transition:
		transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
		background-color 0.2s ease,
		color 0.2s ease;
}

.faq-item:hover .faq-toggle-btn {
	background: #e2e8f0;
	color: #0f172a;
}

.faq-item[open]:not(.is-closing) .faq-toggle-btn {
	background: rgba(99, 102, 241, 0.12);
	color: var(--accent);
	transform: rotate(45deg);
}

.faq-item.is-closing .faq-toggle-btn {
	background: #f1f5f9;
	color: #64748b;
	transform: rotate(0deg);
}

.faq-chevron {
	width: 32px;
	height: 32px;
	padding: 8px;
	border-radius: 8px;
	background: #f1f5f9;
	stroke: #64748b;
	flex-shrink: 0;
	transition:
		transform 0.25s ease,
		background-color 0.2s ease,
		stroke 0.2s ease;
}

.faq-item[open]:not(.is-closing) .faq-chevron {
	transform: rotate(180deg);
	background: rgba(99, 102, 241, 0.12);
	stroke: var(--accent);
}

.faq-answer {
	padding: 0 22px 18px 22px;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.65;
	opacity: 0;
	transform: translateY(-6px);
	transition:
		opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.faq-item[open] .faq-answer {
	border-top: 1px solid #f1f5f9;
	padding-top: 14px;
	opacity: 1;
	transform: translateY(0);
}

.faq-item.is-closing .faq-answer {
	opacity: 0;
	transform: translateY(-6px);
	transition:
		opacity 0.18s ease,
		transform 0.18s ease;
}

/* Legal Section Container */
.legal-container {
	max-width: 900px;
	width: 100%;
	margin: 0 auto 80px;
	padding: 0 24px;
	scroll-margin-top: 100px;
}

.legal-header {
	text-align: center;
	margin-bottom: 40px;
}

.legal-header h2 {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -1px;
	line-height: 1.25;
	margin-bottom: 12px;
	color: #0f172a;
}

.legal-header p {
	color: var(--text-secondary);
	font-size: 17px;
	line-height: 1.55;
	max-width: 650px;
	margin: 0 auto;
}

.legal-nav-pills {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 20px;
	margin-bottom: 40px;
}

.legal-pill {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	padding: 8px 18px;
	border-radius: 30px;
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	transition: all 0.2s ease;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.legal-pill:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: #ffffff;
	transform: translateY(-1px);
	box-shadow: none;
}

.legal-pill svg,
.legal-pill .pill-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: currentColor;
}

/* Section Cards */
.doc-section {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 36px;
	box-shadow: var(--card-shadow);
	margin-bottom: 32px;
	scroll-margin-top: 100px;
	transition: all 0.2s ease;
}

.doc-section:hover {
	border-color: var(--border-hover);
	box-shadow: var(--card-shadow-hover);
	background: #ffffff;
}

.doc-header {
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 20px;
	margin-bottom: 24px;
}

.doc-header h2 {
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--text-primary);
}

.doc-meta {
	font-size: 13px;
	color: var(--text-muted);
}

.doc-body h3 {
	font-size: 17px;
	font-weight: 600;
	margin: 24px 0 10px;
	color: var(--accent);
}

.doc-body p {
	color: var(--text-secondary);
	margin-bottom: 14px;
	font-size: 15px;
}

.doc-body ul {
	margin: 0 0 16px 20px;
	color: var(--text-secondary);
	font-size: 15px;
}

.doc-body li {
	margin-bottom: 8px;
}

.info-box {
	background: rgba(99, 102, 241, 0.06);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: 16px 20px;
	margin: 20px 0;
}

.info-box p {
	margin: 0;
	color: var(--text-primary);
	font-size: 14px;
}

/* Contact Details Card */
.contact-card {
	background: var(--bg-subtle);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 24px;
	margin-top: 16px;
}

.contact-card h4 {
	font-size: 16px;
	margin-bottom: 8px;
	color: var(--text-primary);
}

.contact-card p {
	font-size: 14px;
	color: var(--text-secondary);
}

.contact-email {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}

.contact-email:hover {
	text-decoration: underline;
}

/* Modern Light Mega Footer with Giant Wordmark Branding (Cashfree Style) */
footer {
	position: relative;
	background-color: #ffffff;
	background-image:
		radial-gradient(ellipse 70% 320px at 50% 0%, rgba(65, 114, 243, 0.05) 0%, transparent 70%),
		linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	color: #64748b;
	padding: 72px 24px 32px;
	border-top: 1px solid #e2e8f0;
	margin-top: auto;
	text-align: left;
	overflow: hidden;
}

.footer-container {
	max-width: 1180px;
	margin: 0 auto;
}

/* Top Section: Navigation Columns */
.footer-top-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 56px;
}

.footer-brand-summary {
	padding-right: 20px;
}

.footer-brand-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	text-decoration: none;
}

.footer-brand-title img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.footer-brand-title span {
	font-family: var(--font-title);
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -0.5px;
}

.footer-brand-desc {
	font-size: 14px;
	line-height: 1.6;
	color: #64748b;
	margin-bottom: 20px;
	max-width: 340px;
}

.footer-trust-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.footer-trust-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	font-size: 11px;
	color: #475569;
	font-weight: 500;
}

.footer-col h4 {
	font-family: var(--font-title);
	font-size: 12px;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer-col ul li a {
	color: #64748b;
	text-decoration: none;
	font-size: 14px;
	font-weight: 450;
	transition:
		color 0.2s ease,
		transform 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Giant Branding Section (Cashfree Style) */
.footer-big-branding {
	border-top: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
	padding: 36px 0 28px;
	margin-bottom: 28px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	user-select: none;
}

.footer-big-branding-inner {
	display: inline-flex;
	align-items: center;
	gap: clamp(14px, 2.5vw, 28px);
	text-decoration: none;
}

.footer-big-brand-logo {
	width: clamp(52px, 8vw, 110px);
	height: clamp(52px, 8vw, 110px);
	object-fit: contain;
	filter: drop-shadow(0 10px 25px rgba(65, 114, 243, 0.2));
}

.footer-big-brand-name {
	font-family: var(--font-title);
	font-size: clamp(56px, 12vw, 160px);
	font-weight: 850;
	letter-spacing: -0.04em;
	line-height: 0.95;
	color: #0f172a;
	text-shadow: none;
	transition: color 0.2s ease;
}

/* Bottom Bar: Social + Copyright */
.footer-bottom-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	color: #64748b;
}

.footer-social-links {
	display: flex;
	align-items: center;
	gap: 12px;
}

.footer-social-links a {
	color: #64748b;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	transition: all 0.2s ease;
}

.footer-social-links a:hover {
	color: var(--accent);
	background: rgba(65, 114, 243, 0.08);
	border-color: rgba(65, 114, 243, 0.25);
	transform: translateY(-2px);
}

.footer-copyright {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	color: #64748b;
}

.footer-copyright a {
	color: #64748b;
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-copyright a:hover {
	color: var(--accent);
}

@media (max-width: 900px) {
	.footer-top-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	.footer-brand-summary {
		grid-column: span 2;
	}
}

@media (max-width: 600px) {
	.footer-top-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.footer-brand-summary {
		grid-column: span 1;
	}

	.footer-bottom-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

/* Responsive */
@media (max-width: 768px) {
	.hero-stage {
		gap: 6px;
		margin-bottom: 16px;
	}

	.hero-tier {
		font-size: 20px;
		gap: 8px;
	}

	.hero-tier-bottom {
		font-size: 19px;
	}

	.hero-tier-grid {
		min-height: 32px;
	}

	.rotator-icon {
		width: 26px;
		height: 26px;
	}

	.hero-tier-bottom .rotator-icon {
		width: 24px;
		height: 24px;
	}

	.hero h1,
	.hero-title-rotator {
		font-size: 38px;
		letter-spacing: -1.5px;
		line-height: 1.15;
	}

	.vidyst-grid {
		min-height: 84px;
	}

	.hero p {
		font-size: 16px;
	}

	.doc-section {
		padding: 24px;
	}

	.nav-links {
		display: none;
	}

	.gmail-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

@media (max-width: 480px) {
	.hero-stage {
		gap: 4px;
	}

	.hero-tier {
		font-size: 17px;
		gap: 6px;
	}

	.hero-tier-bottom {
		font-size: 16px;
	}

	.hero-tier-grid {
		min-height: 28px;
	}

	.rotator-icon {
		width: 22px;
		height: 22px;
	}

	.hero-tier-bottom .rotator-icon {
		width: 20px;
		height: 20px;
	}

	.hero h1,
	.hero-title-rotator {
		font-size: 30px;
		letter-spacing: -1px;
		line-height: 1.15;
	}

	.vidyst-grid {
		min-height: 66px;
	}
}

/* Special Page Sections (#welcome, #uninstall) */
.special-page-section {
	padding: 80px 24px 100px;
	max-width: 900px;
	margin: 0 auto;
	width: 100%;
}

.special-page-container {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.welcome-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	background: rgba(16, 185, 129, 0.1);
	color: #059669;
	border: 1px solid rgba(16, 185, 129, 0.25);
	border-radius: 30px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 24px;
}

.uninstall-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	background: rgba(239, 68, 68, 0.1);
	color: #dc2626;
	border: 1px solid rgba(239, 68, 68, 0.25);
	border-radius: 30px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 24px;
}

.update-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	background: rgba(65, 114, 243, 0.1);
	color: #3b82f6;
	border: 1px solid rgba(65, 114, 243, 0.25);
	border-radius: 30px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 24px;
}

.pulse-dot {
	width: 8px;
	height: 8px;
	background-color: #10b981;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
	animation: pulse 1.6s infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
	}

	70% {
		box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
	}
}

.special-page-container h1 {
	font-size: 48px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -1px;
	margin-bottom: 16px;
	color: var(--text-primary);
}

.special-page-container h1 span {
	background: var(--accent-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.special-subtitle {
	color: var(--text-secondary);
	font-size: 18px;
	max-width: 600px;
	margin: 0 auto 40px;
	line-height: 1.6;
}

.welcome-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	width: 100%;
	margin-bottom: 40px;
	text-align: left;
}

.welcome-card {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(226, 232, 240, 0.9);
	border-radius: var(--radius-lg);
	padding: 28px 24px;
	box-shadow: var(--card-shadow);
	transition: all 0.3s ease;
	position: relative;
}

.welcome-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--card-shadow-hover);
	border-color: var(--accent-light);
	background: #ffffff;
}

.welcome-card-num {
	width: 36px;
	height: 36px;
	background: var(--accent-gradient);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.welcome-card h3 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 8px;
	color: var(--text-primary);
}

.welcome-card p {
	font-size: 14px;
	color: var(--text-muted);
	line-height: 1.5;
}

.special-cta-group {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Feedback Form Styles for Uninstall Page */
.feedback-card {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(226, 232, 240, 0.9);
	border-radius: var(--radius-lg);
	padding: 32px;
	box-shadow: none;
	width: 100%;
	max-width: 560px;
	text-align: left;
}

.feedback-card h3 {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 20px;
	color: var(--text-primary);
	text-align: center;
}

.feedback-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
}

.feedback-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all 0.2s ease;
	background: var(--bg-body);
}

.feedback-option:hover {
	border-color: var(--accent-light);
	background: #ffffff;
}

.feedback-option input[type='radio'] {
	accent-color: var(--accent);
	width: 18px;
	height: 18px;
}

.feedback-option .option-text {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
}

.form-group textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: 14px;
	color: var(--text-primary);
	background: var(--bg-body);
	resize: vertical;
	outline: none;
	transition: border-color 0.2s ease;
	margin-bottom: 20px;
}

.form-group textarea:focus {
	border-color: var(--accent);
	background: #ffffff;
}

.reset-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	background: rgba(99, 102, 241, 0.08);
	color: var(--accent);
	border: 1px solid rgba(99, 102, 241, 0.25);
	border-radius: 30px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 24px;
}

/* Auth / Reset Card Styles */
.auth-card {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(226, 232, 240, 0.9);
	border-radius: var(--radius-lg);
	padding: 36px 32px;
	box-shadow: none;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	text-align: left;
	position: relative;
	box-sizing: border-box;
}

.auth-form-group {
	margin-bottom: 20px;
	width: 100%;
	box-sizing: border-box;
}

.auth-form-group label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 8px;
}

.auth-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

.auth-input-icon {
	position: absolute;
	left: 14px;
	color: var(--text-muted);
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	z-index: 2;
}

.auth-input {
	width: 100%;
	height: 48px;
	box-sizing: border-box;
	padding: 12px 42px 12px 44px;
	border: 1.5px solid var(--border-color);
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: 15px;
	color: var(--text-primary);
	background: #ffffff;
	outline: none;
	transition: all 0.2s ease;
}

.auth-input:focus {
	border-color: var(--accent);
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.auth-toggle-pwd {
	position: absolute;
	right: 12px;
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 20px;
	padding: 6px;
	border-radius: 4px;
	transition: color 0.2s ease;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.auth-toggle-pwd:hover {
	color: var(--text-primary);
}

.strength-meter-container {
	margin-top: 8px;
}

.strength-bar {
	height: 4px;
	background: #e2e8f0;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 4px;
}

.strength-fill {
	height: 100%;
	width: 0%;
	transition: all 0.3s ease;
	border-radius: 4px;
}

.strength-text {
	font-size: 12px;
	color: var(--text-muted);
	font-weight: 500;
}

.auth-alert-box {
	padding: 12px 16px;
	border-radius: var(--radius-md);
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 20px;
	display: none;
}

.auth-alert-error {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.25);
	color: #dc2626;
}

.auth-alert-success {
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.25);
	color: #059669;
}

.auth-btn-submit {
	width: 100%;
	padding: 14px 20px;
	background: var(--accent-gradient);
	color: #ffffff;
	font-weight: 700;
	font-size: 15px;
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: all 0.2s ease;
	box-shadow: none;
}

.auth-btn-submit:hover:not(:disabled) {
	opacity: 0.95;
	transform: translateY(-1px);
	box-shadow: none;
}

.auth-btn-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.auth-link-row {
	margin-top: 20px;
	text-align: center;
	font-size: 14px;
	color: var(--text-secondary);
}

.auth-link-row a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s;
}

.auth-link-row a:hover {
	text-decoration: underline;
}

/* Browser Dropdown Styles */
.browser-dropdown {
	position: relative;
	display: inline-block;
}

.browser-dropdown-toggle {
	cursor: pointer;
	border: none;
	outline: none;
	font-family: inherit;
	user-select: none;
}

.btn-browser-icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
	flex-shrink: 0;
	display: inline-block;
	vertical-align: middle;
	border-radius: 3px;
	pointer-events: none;
}

.steps-cta .btn-browser-icon,
.hero-browser-dropdown .btn-browser-icon {
	width: 20px;
	height: 20px;
}

.btn-header .btn-browser-icon {
	width: 16px;
	height: 16px;
}

.dropdown-chevron {
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	margin-left: 2px;
	flex-shrink: 0;
}

.browser-dropdown.open .dropdown-chevron,
.browser-dropdown-toggle[aria-expanded='true'] .dropdown-chevron {
	transform: rotate(180deg);
}

.browser-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 310px;
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: none;
	padding: 8px;
	z-index: 1100;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) scale(0.97);
	transition:
		opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
		visibility 0.2s ease;
	pointer-events: none;
	text-align: left;
}

.hero-browser-dropdown .browser-menu {
	left: 50%;
	right: auto;
	transform: translateX(-50%) translateY(8px) scale(0.97);
	width: 330px;
}

.browser-dropdown.open .browser-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.hero-browser-dropdown.open .browser-menu {
	transform: translateX(-50%) translateY(0) scale(1);
}

.browser-menu-header {
	padding: 6px 10px 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.browser-menu-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.browser-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--text-primary);
	transition: all 0.18s ease;
	background: transparent;
	border: 1px solid transparent;
}

.browser-option:hover:not(.disabled) {
	background: var(--bg-subtle);
	border-color: var(--border-color);
	transform: translateX(2px);
}

.browser-option-icon {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f8fafc;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	box-shadow: none;
}

.browser-option-content {
	flex: 1;
	min-width: 0;
}

.browser-option-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
	line-height: 1.2;
	display: flex;
	align-items: center;
	gap: 4px;
}

.browser-option-desc {
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.2;
	margin-top: 2px;
}

.browser-badges {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.browser-badge {
	font-size: 12px;
	font-weight: 500;
	padding: 2.5px 7px;
	border-radius: 12px;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	line-height: 1.25;
}

.browser-badge.available {
	background: rgba(16, 185, 129, 0.1);
	color: #059669;
	border: 1px solid rgba(16, 185, 129, 0.25);
}

.browser-badge.current {
	background: rgba(37, 99, 235, 0.1);
	color: #2563eb;
	border: 1px solid rgba(37, 99, 235, 0.28);
	font-weight: 600;
}

.browser-badge.coming-soon {
	background: #f1f5f9;
	color: #64748b;
	border: 1px solid var(--border-color);
	font-size: 10px;
	font-weight: 500;
}

.browser-option.is-current {
	background: rgba(37, 99, 235, 0.05);
}

.browser-option.is-current:hover {
	background: rgba(37, 99, 235, 0.09);
}

.browser-option.disabled {
	opacity: 0.62;
	cursor: not-allowed;
	user-select: none;
}

.browser-option.disabled:hover {
	background: rgba(241, 245, 249, 0.4);
}

@media (max-width: 768px) {
	.hero-browser-dropdown .browser-menu {
		width: calc(100vw - 40px);
		max-width: 320px;
	}
}

.custom-button {
	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	vertical-align: middle;
	background-color: #0f172a;
	background-image: linear-gradient(#fff0, #ffffff20);
	border: 1px solid #0f172a;
	border-radius: 2rem;
	width: auto;
	padding: 10px 22px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-shadow:
		inset 0 1px #ffffff30,
		0 2px 6px rgba(15, 23, 42, 0.12);
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.15s ease,
		box-shadow 0.2s ease;
}

.custom-button:hover {
	/* color: #fff;
	text-decoration: none;
	background-color: #2563eb;
	border-color: #2563eb;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); */
	background-color: #2563eb;
	border-color: #2563eb;
	background-image: linear-gradient(#fff0, #ffffff36);
	box-shadow:
		inset 0 1px #ffffff40,
		0 2px 8px rgba(37, 99, 235, 0.25);
}

.custom-button:active {
	background-color: #1d4ed8;
	border-color: #1d4ed8;
	transform: translateY(0);
	box-shadow: none;
}

/* -------------------------------------------------------------
 * Direct Website Purchase & Checkout Experience
 * ----------------------------------------------------------- */

/* Direct Website Purchase Email Bar */
.pricing-email-wrapper {
	max-width: 580px;
	width: 100%;
	margin: 0 auto 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.pricing-email-box {
	display: flex;
	align-items: center;
	background: #ffffff;
	border: 1.5px solid var(--border-color);
	border-radius: 999px;
	padding: 6px 10px 6px 18px;
	width: 100%;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
	transition: all 0.25s ease;
}

.pricing-email-box:focus-within {
	border-color: #6366f1;
	box-shadow:
		0 0 0 4px rgba(99, 102, 241, 0.12),
		0 4px 20px rgba(0, 0, 0, 0.06);
}

.pricing-email-box.shake {
	animation: shake 0.4s ease-in-out;
	border-color: #ef4444;
}

@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}

	20%,
	60% {
		transform: translateX(-6px);
	}

	40%,
	80% {
		transform: translateX(6px);
	}
}

.pricing-email-input-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.pricing-email-icon {
	color: #64748b;
	flex-shrink: 0;
}

.pricing-email-input {
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	color: #0f172a;
	width: 100%;
	padding: 6px 0;
}

.pricing-email-input::placeholder {
	color: #94a3b8;
	font-size: 14px;
}

.pricing-email-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f1f5f9;
	color: #475569;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
}

.pulse-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
	animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
	0% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
	}

	70% {
		box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
	}
}

.pricing-email-hint {
	font-size: 13px;
	color: #64748b;
	margin-top: 10px;
}

.pricing-email-error {
	font-size: 13px;
	color: #ef4444;
	font-weight: 600;
	margin-top: 6px;
}

/* Website Checkout Modal */
.checkout-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(15, 23, 42, 0.65);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 1;
	transition: opacity 0.2s ease;
}

.checkout-modal-dialog {
	position: relative;
	background: #ffffff;
	border-radius: 20px;
	max-width: 460px;
	width: 100%;
	padding: 32px 28px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	animation: modal-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-pop {
	0% {
		opacity: 0;
		transform: scale(0.95) translateY(10px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.checkout-modal-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: #f1f5f9;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #64748b;
	transition: all 0.2s ease;
}

.checkout-modal-close:hover {
	background: #e2e8f0;
	color: #0f172a;
}

.checkout-modal-header {
	text-align: center;
	margin-bottom: 22px;
}

.checkout-modal-icon {
	width: 52px;
	height: 52px;
	background: #eff6ff;
	color: #3b82f6;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.checkout-modal-title {
	font-family: var(--font-title);
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px;
}

.checkout-modal-subtitle {
	font-size: 14px;
	color: #64748b;
	margin: 0;
	line-height: 1.45;
}

.checkout-modal-summary {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 20px;
}

.modal-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	padding: 4px 0;
}

.modal-summary-label {
	color: #64748b;
}

.modal-summary-value {
	font-weight: 600;
	color: #0f172a;
}

.modal-summary-price {
	font-weight: 800;
	font-size: 16px;
	color: #2563eb;
}

.checkout-modal-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.modal-input-label {
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	text-align: left;
}

.modal-input-group {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	border: 1.5px solid #cbd5e1;
	border-radius: 10px;
	padding: 10px 14px;
	transition: all 0.2s ease;
}

.modal-input-group:focus-within {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.modal-input-icon {
	color: #94a3b8;
	flex-shrink: 0;
}

.modal-email-input {
	border: none;
	outline: none;
	background: transparent;
	width: 100%;
	font-size: 15px;
	color: #0f172a;
	font-family: inherit;
}

.modal-checkout-error {
	font-size: 13px;
	color: #ef4444;
	font-weight: 600;
	text-align: left;
}

.modal-submit-btn {
	width: 100% !important;
	justify-content: center !important;
	padding: 14px !important;
	margin-top: 6px;
	border-radius: 10px !important;
}

.modal-payment-badges {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 12px;
	color: #94a3b8;
	margin-top: 10px;
	flex-wrap: wrap;
}

/* Payment Success Banner */
.payment-success-banner {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10001;
	background: #0f172a;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 14px;
	padding: 14px 20px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	max-width: 600px;
	width: calc(100% - 40px);
	animation: slide-down 0.3s ease-out;
}

@keyframes slide-down {
	from {
		opacity: 0;
		transform: translate(-50%, -20px);
	}

	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

.payment-success-content {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.payment-success-icon {
	width: 32px;
	height: 32px;
	background: #22c55e;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: #ffffff;
	flex-shrink: 0;
}

.payment-success-text {
	display: flex;
	flex-direction: column;
	flex: 1;
	font-size: 13px;
	min-width: 200px;
}

.payment-success-text strong {
	font-size: 15px;
	color: #ffffff;
}

.payment-success-text span {
	color: #94a3b8;
}

.btn-success-action {
	padding: 8px 16px !important;
	font-size: 13px !important;
	border-radius: 8px !important;
	background: #3b82f6 !important;
	color: #ffffff !important;
	text-decoration: none;
	white-space: nowrap;
}

.btn-close-banner {
	background: transparent;
	border: none;
	color: #94a3b8;
	font-size: 16px;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
}

.btn-close-banner:hover {
	color: #ffffff;
}

/* -------------------------------------------------------------
 * Grammarly-Style Authentication & SSO Flow
 * ----------------------------------------------------------- */

.btn-login {
	background: transparent !important;
	border: 1px solid var(--border-color) !important;
	color: #0f172a !important;
	padding: 8px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}

.btn-login,
#header-login-btn {
	display: none !important;
}

.header-user-container {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-dashboard {
	/* background: var(--accent-gradient) !important; */
	color: #ffffff !important;
	padding: 8px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 999px !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease !important;
}

.btn-dashboard:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}

.user-plan-pill {
	background: #dbeafe;
	color: #1e40af;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	text-transform: uppercase;
}
/* Grammarly-Style Authentication Modal */
.auth-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 10001;
	background: rgba(15, 23, 42, 0.7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: auth-fade-in 0.2s ease;
}

@keyframes auth-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.auth-modal-dialog {
	position: relative;
	background: #ffffff;
	border-radius: 24px;
	max-width: 440px;
	width: 100%;
	padding: 36px 32px;
	box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.3);
	animation: auth-modal-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes auth-modal-pop {
	0% {
		opacity: 0;
		transform: scale(0.96) translateY(12px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.auth-modal-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: #f1f5f9;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #64748b;
	transition: all 0.2s ease;
}

.auth-modal-close:hover {
	background: #e2e8f0;
	color: #0f172a;
}

.auth-modal-header {
	text-align: center;
	margin-bottom: 24px;
}

.auth-brand-logo {
	width: 44px;
	height: 44px;
	margin: 0 auto 12px;
	display: block;
}

.auth-modal-title {
	font-family: var(--font-title);
	font-size: 24px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px;
}

.auth-modal-subtitle {
	font-size: 14px;
	color: #64748b;
	margin: 0;
	line-height: 1.45;
}

.auth-plan-banner {
	display: none !important;
}

.auth-plan-banner strong {
	color: #1d4ed8;
	font-weight: 700;
}

.auth-plan-price {
	font-weight: 800;
	color: #2563eb;
}

.auth-tabs {
	display: flex;
	background: #f1f5f9;
	padding: 4px;
	border-radius: 12px;
	margin-bottom: 22px;
}

.auth-tab-btn {
	flex: 1;
	border: none;
	background: transparent;
	padding: 9px;
	border-radius: 9px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	cursor: pointer;
	transition: all 0.2s ease;
}

.auth-tab-btn.active {
	background: #ffffff;
	color: #0f172a;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.auth-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.auth-input-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
}

.auth-label {
	font-size: 13px;
	font-weight: 600;
	color: #334155;
}

.auth-input {
	background: #ffffff;
	border: 1.5px solid #cbd5e1;
	border-radius: 10px;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 14px;
	color: #0f172a;
	outline: none;
	transition: all 0.2s ease;
}

.auth-input:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.12);
}

.auth-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #dc2626;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}

.auth-submit-btn {
	width: 100% !important;
	justify-content: center !important;
	padding: 13px !important;
	margin-top: 6px;
	border-radius: 10px !important;
	font-size: 15px !important;
}

.auth-extra-links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	color: #64748b;
	margin-top: 4px;
}

.auth-link {
	color: #2563eb;
	text-decoration: none;
	font-weight: 600;
}

.auth-link:hover {
	text-decoration: underline;
}

.auth-sso-note {
	text-align: center;
	font-size: 12px;
	color: #94a3b8;
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

/* -------------------------------------------------------------
 * Direct Website Purchase & Checkout Experience
 * ----------------------------------------------------------- */

/* Direct Website Purchase Email Bar */
.pricing-email-wrapper {
	max-width: 580px;
	width: 100%;
	margin: 0 auto 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.pricing-email-box {
	display: flex;
	align-items: center;
	background: #ffffff;
	border: 1.5px solid var(--border-color);
	border-radius: 999px;
	padding: 6px 10px 6px 18px;
	width: 100%;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
	transition: all 0.25s ease;
}

.pricing-email-box:focus-within {
	border-color: #6366f1;
	box-shadow:
		0 0 0 4px rgba(99, 102, 241, 0.12),
		0 4px 20px rgba(0, 0, 0, 0.06);
}

.pricing-email-box.shake {
	animation: shake 0.4s ease-in-out;
	border-color: #ef4444;
}

@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}

	20%,
	60% {
		transform: translateX(-6px);
	}

	40%,
	80% {
		transform: translateX(6px);
	}
}

.pricing-email-input-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.pricing-email-icon {
	color: #64748b;
	flex-shrink: 0;
}

.pricing-email-input {
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	color: #0f172a;
	width: 100%;
	padding: 6px 0;
}

.pricing-email-input::placeholder {
	color: #94a3b8;
	font-size: 14px;
}

.pricing-email-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f1f5f9;
	color: #475569;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
}

.pulse-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
	animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
	0% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
	}

	70% {
		box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
	}
}

.pricing-email-hint {
	font-size: 13px;
	color: #64748b;
	margin-top: 10px;
}

.pricing-email-error {
	font-size: 13px;
	color: #ef4444;
	font-weight: 600;
	margin-top: 6px;
}

/* Website Checkout Modal */
.checkout-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(15, 23, 42, 0.65);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 1;
	transition: opacity 0.2s ease;
}

.checkout-modal-dialog {
	position: relative;
	background: #ffffff;
	border-radius: 20px;
	max-width: 460px;
	width: 100%;
	padding: 32px 28px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	animation: modal-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-pop {
	0% {
		opacity: 0;
		transform: scale(0.95) translateY(10px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.checkout-modal-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: #f1f5f9;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #64748b;
	transition: all 0.2s ease;
}

.checkout-modal-close:hover {
	background: #e2e8f0;
	color: #0f172a;
}

.checkout-modal-header {
	text-align: center;
	margin-bottom: 22px;
}

.checkout-modal-icon {
	width: 52px;
	height: 52px;
	background: #eff6ff;
	color: #3b82f6;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.checkout-modal-title {
	font-family: var(--font-title);
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px;
}

.checkout-modal-subtitle {
	font-size: 14px;
	color: #64748b;
	margin: 0;
	line-height: 1.45;
}

.checkout-modal-summary {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 20px;
}

.modal-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	padding: 4px 0;
}

.modal-summary-label {
	color: #64748b;
}

.modal-summary-value {
	font-weight: 600;
	color: #0f172a;
}

.modal-summary-price {
	font-weight: 800;
	font-size: 16px;
	color: #2563eb;
}

.checkout-modal-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.modal-input-label {
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	text-align: left;
}

.modal-input-group {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	border: 1.5px solid #cbd5e1;
	border-radius: 10px;
	padding: 10px 14px;
	transition: all 0.2s ease;
}

.modal-input-group:focus-within {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.modal-input-icon {
	color: #94a3b8;
	flex-shrink: 0;
}

.modal-email-input {
	border: none;
	outline: none;
	background: transparent;
	width: 100%;
	font-size: 15px;
	color: #0f172a;
	font-family: inherit;
}

.modal-checkout-error {
	font-size: 13px;
	color: #ef4444;
	font-weight: 600;
	text-align: left;
}

.modal-submit-btn {
	width: 100% !important;
	justify-content: center !important;
	padding: 14px !important;
	margin-top: 6px;
	border-radius: 10px !important;
}

.modal-payment-badges {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 12px;
	color: #94a3b8;
	margin-top: 10px;
	flex-wrap: wrap;
}

/* Payment Success Banner */
.payment-success-banner {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10001;
	background: #0f172a;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 14px;
	padding: 14px 20px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	max-width: 600px;
	width: calc(100% - 40px);
	animation: slide-down 0.3s ease-out;
}

@keyframes slide-down {
	from {
		opacity: 0;
		transform: translate(-50%, -20px);
	}

	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

.payment-success-content {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.payment-success-icon {
	width: 32px;
	height: 32px;
	background: #22c55e;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: #ffffff;
	flex-shrink: 0;
}

.payment-success-text {
	display: flex;
	flex-direction: column;
	flex: 1;
	font-size: 13px;
	min-width: 200px;
}

.payment-success-text strong {
	font-size: 15px;
	color: #ffffff;
}

.payment-success-text span {
	color: #94a3b8;
}

.btn-success-action {
	padding: 8px 16px !important;
	font-size: 13px !important;
	border-radius: 8px !important;
	background: #3b82f6 !important;
	color: #ffffff !important;
	text-decoration: none;
	white-space: nowrap;
}

.btn-close-banner {
	background: transparent;
	border: none;
	color: #94a3b8;
	font-size: 16px;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
}

.btn-close-banner:hover {
	color: #ffffff;
}

/* -------------------------------------------------------------
 * Grammarly-Style Authentication & SSO Flow
 * ----------------------------------------------------------- */

.btn-login {
	background: transparent !important;
	border: 1px solid var(--border-color) !important;
	color: #0f172a !important;
	padding: 8px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}

.btn-login,
#header-login-btn {
	display: none !important;
}

.header-user-container {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-dashboard {
	background: var(--accent-gradient) !important;
	color: #ffffff !important;
	padding: 8px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 999px !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease !important;
}

.btn-dashboard:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}

.user-plan-pill {
	background: #dbeafe;
	color: #1e40af;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	text-transform: uppercase;
}

.btn-logout-link {
	background: transparent;
	border: none;
	color: #94a3b8;
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s ease;
}

.btn-logout-link:hover {
	color: #ef4444;
}

/* Grammarly-Style Authentication Modal */
.auth-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 10001;
	background: rgba(15, 23, 42, 0.7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: auth-fade-in 0.2s ease;
}

@keyframes auth-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.auth-modal-dialog {
	position: relative;
	background: #ffffff;
	border-radius: 24px;
	max-width: 440px;
	width: 100%;
	padding: 36px 32px;
	box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.3);
	animation: auth-modal-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes auth-modal-pop {
	0% {
		opacity: 0;
		transform: scale(0.96) translateY(12px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.auth-modal-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: #f1f5f9;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #64748b;
	transition: all 0.2s ease;
}

.auth-modal-close:hover {
	background: #e2e8f0;
	color: #0f172a;
}

.auth-modal-header {
	text-align: center;
	margin-bottom: 24px;
}

.auth-brand-logo {
	width: 44px;
	height: 44px;
	margin: 0 auto 12px;
	display: block;
}

.auth-modal-title {
	font-family: var(--font-title);
	font-size: 24px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px;
}

.auth-modal-subtitle {
	font-size: 14px;
	color: #64748b;
	margin: 0;
	line-height: 1.45;
}

.auth-plan-banner {
	display: none !important;
}

.auth-plan-banner strong {
	color: #1d4ed8;
	font-weight: 700;
}

.auth-plan-price {
	font-weight: 800;
	color: #2563eb;
}

.auth-tabs {
	display: flex;
	background: #f1f5f9;
	padding: 4px;
	border-radius: 12px;
	margin-bottom: 22px;
}

.auth-tab-btn {
	flex: 1;
	border: none;
	background: transparent;
	padding: 9px;
	border-radius: 9px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	cursor: pointer;
	transition: all 0.2s ease;
}

.auth-tab-btn.active {
	background: #ffffff;
	color: #0f172a;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.auth-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.auth-input-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
}

.auth-label {
	font-size: 13px;
	font-weight: 600;
	color: #334155;
}

.auth-input {
	background: #ffffff;
	border: 1.5px solid #cbd5e1;
	border-radius: 10px;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 14px;
	color: #0f172a;
	outline: none;
	transition: all 0.2s ease;
}

.auth-input:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.12);
}

.auth-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #dc2626;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}

.auth-submit-btn {
	width: 100% !important;
	justify-content: center !important;
	padding: 13px !important;
	margin-top: 6px;
	border-radius: 10px !important;
	font-size: 15px !important;
}

.auth-extra-links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	color: #64748b;
	margin-top: 4px;
}

.auth-link {
	color: #2563eb;
	text-decoration: none;
	font-weight: 600;
}

.auth-link:hover {
	text-decoration: underline;
}

.auth-sso-note {
	text-align: center;
	font-size: 12px;
	color: #94a3b8;
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

/* ------ DASHBOARD 3D STACK DESIGN -------- */

.mail-inbox-container {
	width: 82%;
	max-width: 1200px;
	margin: 150px auto 70px;
	position: relative;
}

.seenify-demo-stage {
	width: 100%;
	padding: 0;
	overflow: visible;
}

.mail-stack-wrapper {
	position: relative;
	width: 100%;
	perspective: 1200px;
}

.mail-stack-spacer {
	width: 100%;
	height: auto;
	display: block;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	user-select: none;
}

.mail-stack-card {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	transform-origin: top center;
	transition:
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.4s ease;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	background: transparent;
	border: none;
	box-shadow: none;
	will-change: transform;
}

.mail-stack-card img.mail-inbox-image {
	width: 100%;
	height: auto;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

/* Subtle Hover Preview on cards peeking behind */
.mail-stack-card:not([data-depth='0']):hover {
	filter: brightness(1.05) !important;
}

/* Modern Stack Indicator Dots & Controls */
.mail-stack-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}

.mail-stack-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 0;
}

.mail-stack-pause-btn {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid #e2e8f0;
	background: #ffffff;
	color: #64748b;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: all 0.2s ease;
	flex-shrink: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.mail-stack-pause-btn:hover {
	background: #f1f5f9;
	color: #1e293b;
	border-color: #cbd5e1;
	transform: scale(1.05);
}

.mail-stack-pause-btn:active {
	transform: scale(0.95);
}

.mail-stack-dot {
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: #cbd5e1;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mail-stack-dot:hover {
	background: #94a3b8;
}

.mail-stack-dot.active {
	width: 26px;
	background: #2563eb;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

@media (max-width: 1024px) {
	.mail-inbox-container {
		width: 90%;
		margin: 120px auto 55px;
	}
}

@media (max-width: 768px) {
	.mail-inbox-container {
		width: 94%;
		margin: 95px auto 40px;
	}
	.mail-stack-card {
		border-radius: 14px;
	}
	.mail-stack-card img.mail-inbox-image {
		border-radius: 14px;
	}
	.mail-stack-controls {
		margin-top: 20px;
	}
	.mail-stack-dot.active {
		width: 20px;
	}
}

/* Browser */
.seenify-browser {
	box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.3);
	width: 100%;
	max-width: 1356px;
	margin: auto;
	background: #f6f8fc;
	border-radius: 22px;
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
	color: #202124;
	aspect-ratio: 1356 / 860;
	display: flex;
	flex-direction: column;
}

/* Browser Top */
.browser-top {
	height: 53px;
	flex-shrink: 0;
	background: #dbe4fa;
	display: flex;
	align-items: center;
	padding: 0 16px;
	gap: 14px;
}

.browser-dots {
	display: flex;
	gap: 11px;
}

.browser-dots i {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ff6258;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.browser-dots i:nth-child(2) {
	background: #ffbd2e;
}

.browser-dots i:nth-child(3) {
	background: #28c840;
}

.browser-tab {
	height: 43px;
	width: 310px;
	background: #f8f9fc;
	border-radius: 14px 14px 0 0;
	display: flex;
	align-items: center;
	padding: 0 13px;
	gap: 9px;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
}

.gmail-logo {
	color: #e94235;
	font-weight: 900;
	font-size: 24px;
}

.tab-close {
	margin-left: auto;
	font-size: 22px;
}

.new-tab {
	font-size: 24px;
}

.browser-spacer {
	flex: 1;
}

.gemini-button {
	padding: 10px 17px;
	background: #f8f9fc;
	border-radius: 15px;
	font-size: 14px;
	font-weight: 600;
}

/* Browser Address */
.browser-address {
	height: 61px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 0 20px;
	border-bottom: 1px solid #dadce0;
	background: #f8f9fc;
	color: #5f6368;
	font-size: 19px;
}

.address-input {
	flex: 1;
	min-width: 0;
	height: 43px;
	background: #e7ebf5;
	border-radius: 30px;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 0 15px;
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
}

/* Gmail Header */
.gmail-layout {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.gmail-header {
	height: 86px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: 0 25px;
	gap: 35px;
	position: static !important;
	top: auto !important;
	z-index: 1 !important;
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: none !important;
}

.gmail-brand {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	min-width: 275px;
}

.hamburger {
	font-size: 23px;
	margin-right: 10px;
}

.gmail-brand .gmail-logo {
	font-size: 39px;
}

.gmail-title {
	font-size: 27px;
}

.gmail-search {
	height: 63px;
	max-width: 490px;
	flex: 1;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0 20px;
	border-radius: 40px;
	background: #e9eef6;
	font-size: 17px;
}

.gmail-search > span:first-child {
	font-size: 28px;
}

.search-clear {
	margin-left: auto;
	font-size: 28px;
}

.search-filter {
	font-size: 23px;
}

.gmail-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	font-size: 22px;
	white-space: nowrap;
}

.upgrade-btn {
	border: none;
	background: #d3e3fd;
	color: #17345e;
	padding: 14px 28px;
	border-radius: 30px;
	font-size: 16px;
}

.seenify-profile {
	width: 43px;
	height: 43px;
	color: white;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-weight: bold;
	font-size: 17px;
}

/* Gmail Body */
.gmail-body {
	flex: 1;
	min-height: 0;
	display: flex;
	padding-left: 0;
}

/* Sidebar */
.gmail-sidebar {
	width: 325px;
	flex-shrink: 0;
	padding: 8px 20px 0 10px;
}

.gmail-compose {
	height: 53px;
	width: 190px;
	background: #c2e7ff;
	color: #001d35;
	border: none;
	border-radius: 18px;
	font-size: 16px;
	margin-bottom: 10px;
}

.gmail-compose span {
	margin-right: 15px;
	font-size: 20px;
}

.gmail-navigation {
	display: flex;
	flex-direction: column;
}

.gmail-navigation a {
	height: 32px;
	display: flex;
	align-items: center;
	gap: 23px;
	padding: 0 27px;
	border-radius: 0 25px 25px 0;
	color: #303134;
	text-decoration: none;
	font-size: 16px;
}

.gmail-navigation a span {
	width: 20px;
	font-size: 20px;
}

.gmail-navigation a.selected {
	background: #d3e3fd;
	color: #0b254b;
	font-weight: 700;
}

.gmail-labels {
	margin: 38px 23px;
	display: flex;
	justify-content: space-between;
	font-size: 18px;
}

.gmail-labels span {
	font-size: 24px;
}

/* Main */
.gmail-main {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.gmail-content {
	flex: 1;
	min-height: 0;
	background: #fff;
	border-radius: 22px 22px 0 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Filters */
.gmail-filters {
	height: 84px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 0 10px;
}

.gmail-filters button {
	height: 40px;
	padding: 0 15px;
	border: 1px solid #888;
	border-radius: 10px;
	background: white;
	color: #444;
	font-size: 15px;
	white-space: nowrap;
}

.gmail-filters button span {
	margin-left: 10px;
}

.gmail-filters a {
	color: #0b57d0;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
	margin-left: 7px;
}

/* Toolbar */
.gmail-toolbar {
	height: 52px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
}

.toolbar-left,
.toolbar-right {
	display: flex;
	align-items: center;
	gap: 23px;
	color: #555;
	font-size: 20px;
}

.toolbar-left input,
.gmail-email input {
	width: 17px;
	height: 17px;
	accent-color: #0b57d0;
}

.toolbar-right {
	gap: 38px;
	font-size: 15px;
	color: #666;
}

/* Email Rows */
.gmail-emails {
	width: 100%;
}

.gmail-email {
	height: 36px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 24px;
	background: #f1f5fb;
	border-bottom: 1px solid #dce1e9;
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
}

.gmail-email:hover {
	box-shadow:
		inset 0 1px #dadce0,
		inset 0 -1px #dadce0;
}

.email-star {
	color: #b8bdc4;
	font-size: 23px;
}

.email-recipient {
	width: 220px;
	flex-shrink: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #454950;
}

/* Seenify Double Tick */
.seenify-ticks {
	width: 24px;
	height: 18px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.seenify-ticks svg {
	width: 22px;
	height: 17px;
	stroke: #12b981;
	stroke-width: 2.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.seenify-ticks.unread {
	visibility: hidden;
}

.email-subject {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #666b73;
}

.email-subject strong {
	color: #303134;
	font-weight: 500;
}

.gmail-email time {
	width: 65px;
	flex-shrink: 0;
	text-align: right;
	font-size: 14px;
	color: #666b73;
}

/* Footer */
.gmail-footer {
	margin-top: 160px;
	padding: 0 20px;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	color: #666b73;
	font-size: 13px;
}

.storage-info {
	width: 290px;
	flex-shrink: 0;
}

.storage-bar {
	height: 7px;
	border-radius: 10px;
	background: #dadce0;
	margin-bottom: 10px;
}

.footer-links {
	white-space: nowrap;
}

.account-activity {
	margin-left: auto;
	text-align: right;
	white-space: nowrap;
}

.account-activity span {
	display: block;
	margin-top: 8px;
}

/* Right Apps Sidebar */
.gmail-right-sidebar {
	width: 60px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	padding-top: 25px;
}

.gmail-right-sidebar span {
	font-size: 20px;
}

.calendar-icon {
	color: #4285f4;
}

.keep-icon {
	color: #fbbc04;
}

.tasks-icon {
	color: #4285f4;
}

.contacts-icon {
	color: #0b57d0;
}

.gmail-right-sidebar hr {
	width: 25px;
	border: 0;
	border-top: 1px solid #ddd;
}

.add-icon {
	font-size: 28px !important;
}

/* Responsive */
@media (max-width: 900px) {
	.seenify-demo-stage {
		padding: 10px;
	}

	.gmail-sidebar {
		width: 190px;
	}

	.gmail-brand {
		min-width: 180px;
	}

	.gmail-actions {
		gap: 10px;
	}

	.email-recipient {
		width: 145px;
	}

	.gmail-footer {
		font-size: 10px;
	}

	.storage-info {
		width: 150px;
	}
}

@media (max-width: 600px) {
	.seenify-demo-stage {
		padding: 0;
		overflow-x: auto;
	}

	.seenify-browser {
		min-width: 850px;
		aspect-ratio: auto;
		height: 540px;
		border-radius: 12px;
	}

	.gmail-sidebar {
		width: 190px;
	}
}