/* ================================================================
   EVERMILE — GLOBAL STYLESHEET
   common.css v1.0.0

   TABLE OF CONTENTS
   1.  CSS Variables & Root
   2.  Reset & Base Styles
   3.  Typography
   4.  Layout Utilities
   5.  Buttons
   6.  Site Header & Navigation
   7.  Hero Section
   8.  Clients / Logo Marquee Section
   9.  Feature Illustration Section
   10. Scale Orders Section
   11. Process Steps Section
   12. Savings Calculator Section
   13. Features Grid Section
   14. Platform Tabs & Courier Network
   15. Testimonials Section
   16. Blog / Insights Section
   17. CTA Banner Section
   18. Site Footer
   19. Page & Blog Templates
   20. 404 Page
   21. Responsive — Tablet (max 1024px)
   22. Responsive — Mobile (max 768px)
   23. Responsive — Small Mobile (max 480px)
   24. Scroll Reveal Animations
================================================================ */


/* ================================================================
   1. CSS VARIABLES & ROOT
================================================================ */
:root {
	/* Brand Colors */
	--clr-primary:        #4355F6;
	--clr-primary-light:  #EEF0FF;
	--clr-primary-dark:   #2D3BE0;
	--clr-primary-hover:  #3244E8;

	/* Neutral & Text */
	--clr-dark:           #0D0D1A;
	--clr-dark-secondary: #1A1A2E;
	--clr-text:           #1F2937;
	--clr-text-muted:     #6B7280;
	--clr-text-light:     #9CA3AF;

	/* Backgrounds */
	--clr-white:          #FFFFFF;
	--clr-bg-light:       #F8F9FF;
	--clr-bg-section:     #F4F5FF;
	--clr-bg-card:        #FFFFFF;

	/* Status */
	--clr-green:          #16A34A;
	--clr-green-light:    #DCFCE7;
	--clr-green-text:     #15803D;
	--clr-orange:         #F97316;
	--clr-orange-light:   #FFF7ED;
	--clr-red:            #EF4444;

	/* Borders */
	--clr-border:         #E5E7EB;
	--clr-border-light:   #F3F4F6;
	--clr-border-focus:   #4355F6;

	/* Shadows */
	--shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-md:  0 4px 24px rgba(0, 0, 0, 0.08);
	--shadow-lg:  0 10px 40px rgba(0, 0, 0, 0.12);
	--shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.15);
	--shadow-card: 0 2px 16px rgba(67, 85, 246, 0.08);

	/* Radii */
	--radius-xs:  4px;
	--radius-sm:  6px;
	--radius-md:  12px;
	--radius-lg:  16px;
	--radius-xl:  24px;
	--radius-2xl: 32px;
	--radius-full: 9999px;

	/* Typography */
	--font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	--fw-light:   300;
	--fw-regular: 400;
	--fw-medium:  500;
	--fw-semi:    600;
	--fw-bold:    700;
	--fw-extra:   800;
	--fw-black:   900;

	/* Spacing */
	--section-pad:     100px;
	--section-pad-sm:  64px;
	--container-pad:   24px;
	--max-width:       1200px;

	/* Transitions */
	--t-fast:    all 0.15s ease;
	--t-base:    all 0.25s ease;
	--t-slow:    all 0.4s ease;

	/* Header */
	--header-h:  72px;
}


/* ================================================================
   2. RESET & BASE STYLES
================================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font);
	font-size: 1rem;
	font-weight: var(--fw-regular);
	line-height: 1.6;
	color: var(--clr-text);
	background-color: var(--clr-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.nav-open {
	overflow: hidden;
}

img,
video,
iframe {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: var(--t-base);
}

button {
	cursor: pointer;
	border: none;
	background: none;
	font-family: var(--font);
}

ul,
ol {
	list-style: none;
}

input,
textarea,
select {
	font-family: var(--font);
	font-size: inherit;
}

/* Screen-reader only utility */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Focus visible for accessibility */
:focus-visible {
	outline: 2px solid var(--clr-primary);
	outline-offset: 3px;
}


/* ================================================================
   3. TYPOGRAPHY
================================================================ */
h1, h2, h3, h4, h5, h6 {
	font-weight: var(--fw-bold);
	line-height: 1.15;
	color: var(--clr-dark);
	letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
	line-height: 1.7;
	color: var(--clr-text-muted);
}

strong {
	font-weight: var(--fw-semi);
	color: var(--clr-text);
}

/* Highlight text (used in headings) */
.text-primary   { color: var(--clr-primary); }
.text-dark      { color: var(--clr-dark); }
.text-muted     { color: var(--clr-text-muted); }
.text-white     { color: var(--clr-white); }
.text-green     { color: var(--clr-green); }

/* Heading underline accent */
.heading-highlight {
	color: var(--clr-primary);
	text-decoration: underline;
	text-decoration-style: wavy;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	text-decoration-color: var(--clr-primary);
}


/* ================================================================
   4. LAYOUT UTILITIES
================================================================ */
.container {
	width: 100%;
	max-width: var(--max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}

.section {
	padding-top: var(--section-pad);
	padding-bottom: var(--section-pad);
}

.section--sm {
	padding-top: var(--section-pad-sm);
	padding-bottom: var(--section-pad-sm);
}

.section--bg {
	background-color: var(--clr-bg-light);
}

.section-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: var(--fw-semi);
	color: var(--clr-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 16px;
}

.section-header {
	text-align: center;
	margin-bottom: 60px;
}

.section-header h2 {
	margin-bottom: 16px;
}

.section-header p {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.0625rem;
}

.operations-cta {
	margin-top: 32px;
	display: flex;
	justify-content: center;
}

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.grid         { display: grid; }


/* ================================================================
   5. BUTTONS
================================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	font-family: var(--font);
	font-size: 0.9375rem;
	font-weight: var(--fw-semi);
	line-height: 1;
	border-radius: var(--radius-full);
	transition: var(--t-base);
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
}

.btn:focus-visible {
	outline: 2px solid var(--clr-primary);
	outline-offset: 3px;
}

.btn-primary {
	background-color: var(--clr-primary);
	color: var(--clr-white);
	border: 2px solid var(--clr-primary);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background-color: var(--clr-primary-hover);
	border-color: var(--clr-primary-hover);
	color: var(--clr-white);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(67, 85, 246, 0.35);
}

.btn-dark {
	background-color: var(--clr-dark);
	color: var(--clr-white);
	border: 2px solid var(--clr-dark);
}

.btn-dark:hover {
	background-color: var(--clr-dark-secondary);
	border-color: var(--clr-dark-secondary);
	color: var(--clr-white);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(13, 13, 26, 0.25);
}

.btn-outline {
	background-color: var(--clr-white);
	color: var(--clr-dark);
	border: 1.5px solid var(--clr-border);
}

.btn-outline:hover {
	border-color: var(--clr-primary);
	color: var(--clr-primary);
	transform: translateY(-1px);
}

.btn-ghost {
	background-color: transparent;
	color: var(--clr-dark);
	border: 1.5px solid var(--clr-border);
}

.btn-ghost:hover {
	background-color: var(--clr-bg-light);
}

.btn-sm {
	padding: 9px 18px;
	font-size: 0.875rem;
}

.btn-lg {
	padding: 16px 32px;
	font-size: 1rem;
}

.btn-full {
	width: 100%;
}

.btn-white {
	background-color: var(--clr-white);
	color: var(--clr-dark);
	border: 2px solid var(--clr-white);
}

.btn-white:hover {
	background-color: rgba(255,255,255,0.9);
	color: var(--clr-dark);
	transform: translateY(-1px);
}

.btn-outline-white {
	background-color: transparent;
	color: var(--clr-white);
	border: 2px solid rgba(255,255,255,0.5);
}

.btn-outline-white:hover {
	background-color: rgba(255,255,255,0.1);
	border-color: var(--clr-white);
	color: var(--clr-white);
}

/* Connect button (with platform icons) */
.btn-connect {
	background-color: var(--clr-white);
	color: var(--clr-dark);
	border: 1.5px solid var(--clr-border);
	gap: 10px;
}

.btn-connect:hover {
	border-color: var(--clr-primary);
	box-shadow: var(--shadow-sm);
}

.connect-icons {
	display: flex;
	align-items: center;
	gap: -4px;
}

.connect-icons img {
	width: 20px;
	height: 20px;
	border-radius: var(--radius-full);
	border: 2px solid var(--clr-white);
	margin-left: -4px;
}

.connect-icons img:first-child {
	margin-left: 0;
}


/* ================================================================
   6. SITE HEADER & NAVIGATION
================================================================ */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: var(--header-h);
	background-color: var(--clr-white);
	border-bottom: 1px solid var(--clr-border-light);
	transition: box-shadow 0.3s ease, background 0.3s ease;
}

.site-header.scrolled {
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--container-pad);
	height: 100%;
	gap: 32px;
}

/* Logo */
.header-logo {
	flex-shrink: 0;
}

.logo-link {
	display: inline-flex;
	align-items: center;
}

.logo-text {
	font-size: 1.375rem;
	font-weight: var(--fw-black);
	color: var(--clr-dark);
	letter-spacing: -0.03em;
}

.logo-link img {
	height: 36px;
	width: auto;
}

/* Primary Navigation */
.header-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
}

.nav-item {
	position: relative;
}

.nav-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 14px;
	font-size: 0.9375rem;
	font-weight: var(--fw-medium);
	color: var(--clr-text-muted);
	border-radius: var(--radius-sm);
	transition: var(--t-fast);
}

.nav-link:hover,
.nav-link:focus-visible {
	color: var(--clr-dark);
	background-color: var(--clr-bg-light);
}

.nav-dropdown-trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 14px;
	font-size: 0.9375rem;
	font-weight: var(--fw-medium);
	color: var(--clr-text-muted);
	border-radius: var(--radius-sm);
	transition: var(--t-fast);
	border: none;
	background: none;
	cursor: pointer;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger[aria-expanded="true"] {
	color: var(--clr-dark);
	background-color: var(--clr-bg-light);
}

.dropdown-caret {
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.nav-dropdown-trigger[aria-expanded="true"] .dropdown-caret {
	transform: rotate(180deg);
}

/* Mega Dropdown */
.mega-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: 500px;
	background: var(--clr-white);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	transform: translateX(-50%) translateY(-8px);
}

.mega-dropdown.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.mega-dropdown-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.mega-col-title {
	display: block;
	font-size: 0.6875rem;
	font-weight: var(--fw-semi);
	color: var(--clr-text-light);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
}

.mega-links {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mega-link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px;
	border-radius: var(--radius-md);
	transition: var(--t-fast);
}

.mega-link:hover {
	background-color: var(--clr-bg-light);
}

.mega-link-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.mega-link-icon img,
.mega-link-icon svg {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.mega-link-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mega-link-body strong {
	display: block;
	font-size: 0.875rem;
	font-weight: var(--fw-semi);
	color: var(--clr-dark);
}

.mega-link-body small {
	font-size: 0.8125rem;
	color: var(--clr-text-muted);
}

/* Header Actions (right side) */
.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.header-signin {
	padding: 8px 14px;
	font-size: 0.9375rem;
	font-weight: var(--fw-medium);
	color: var(--clr-text-muted);
	border-radius: var(--radius-sm);
}

.header-signin:hover {
	color: var(--clr-dark);
	background-color: var(--clr-bg-light);
}

/* Mobile Hamburger */
.nav-hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
	border-radius: var(--radius-sm);
	transition: var(--t-fast);
	flex-shrink: 0;
}

.nav-hamburger:hover {
	background-color: var(--clr-bg-light);
}

.hamburger-line {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--clr-dark);
	border-radius: 2px;
	transition: var(--t-base);
	transform-origin: center;
}

.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Navigation Overlay */
.mobile-nav {
	display: none;
	position: fixed;
	top: var(--header-h);
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--clr-white);
	z-index: 999;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.mobile-nav.is-open {
	transform: translateX(0);
}

.mobile-nav-inner {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 100%;
}

.mobile-nav-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mobile-nav-item {
	border-bottom: 1px solid var(--clr-border-light);
}

.mobile-nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 4px;
	font-size: 1rem;
	font-weight: var(--fw-medium);
	color: var(--clr-dark);
}

.mobile-has-sub {
	background: none;
	border: none;
	text-align: left;
}

.mobile-sub-list {
	padding: 0 0 16px 16px;
	display: none;
	flex-direction: column;
	gap: 12px;
}

.mobile-sub-list.is-open {
	display: flex;
}

.mobile-sub-list a {
	font-size: 0.9375rem;
	color: var(--clr-text-muted);
}

.mobile-sub-list a:hover {
	color: var(--clr-primary);
}

.mobile-nav-actions {
	margin-top: auto;
	padding-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}


/* ================================================================
   7. HERO SECTION
================================================================ */
.hero-section {
	padding: 80px 0px;
	background: radial-gradient(ellipse 80% 60% at 80% 40%, rgba(67, 85, 246, 0.05) 0%, transparent 60%),
	            radial-gradient(ellipse 40% 40% at 20% 70%, rgba(67, 85, 246, 0.03) 0%, transparent 50%),
	            var(--clr-white);
	overflow: hidden;
	position: relative;
}

.hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 55%;
	height: 100%;
	background-image:
		radial-gradient(circle, rgba(67, 85, 246, 0.04) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
	z-index: 0;
}

.hero-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	position: relative;
	z-index: 1;
}

/* Left column */
.hero-content {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	background-color: var(--clr-primary-light);
	border-radius: var(--radius-full);
	font-size: 0.8125rem;
	font-weight: var(--fw-medium);
	color: var(--clr-primary);
	width: fit-content;
}

.badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--clr-primary);
	animation: badgePulse 2s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes badgePulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.6; transform: scale(0.85); }
}

.hero-title {
	font-size: clamp(2.625rem, 5.5vw, 4rem);
	font-weight: var(--fw-black);
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--clr-dark);
	margin: 0;
}

.hero-title-highlight {
	color: var(--clr-primary);
	position: relative;
	display: inline;
}


.hero-desc {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--clr-text-muted);
	max-width: 460px;
	margin: 0;
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.hero-trust {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: -4px;
}

.trust-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	color: var(--clr-text-muted);
	font-weight: var(--fw-medium);
}

.trust-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--clr-green-light);
	color: var(--clr-green);
	font-size: 10px;
	font-weight: var(--fw-bold);
	flex-shrink: 0;
}

/* Right column — Rate Comparison Card */
.hero-visual {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.hero-visual::before {
	content: '';
	position: absolute;
	inset: -40px;
	background: radial-gradient(ellipse at center, rgba(67, 85, 246, 0.06) 0%, transparent 70%);
	pointer-events: none;
	border-radius: 50%;
}

/* Rate Comparison Card */
.rate-card {
	background: var(--clr-white);
	border-radius: var(--radius-xl);
	box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 20px 60px rgba(0,0,0,0.12);
	border: 1px solid var(--clr-border-light);
	padding: 20px;
	width: 100%;
	max-width: 470px;
	position: relative;
}

.rate-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.rate-card-title {
	font-size: 0.9375rem;
	font-weight: var(--fw-semi);
	color: var(--clr-dark);
	letter-spacing: -0.01em;
}

.rate-card-expand {
	width: 28px;
	height: 28px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--clr-text-light);
	font-size: 1rem;
	transition: var(--t-fast);
	flex-shrink: 0;
}

.rate-card-expand:hover {
	background-color: var(--clr-bg-light);
	color: var(--clr-dark);
}

.shipment-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 12px;
	background-color: var(--clr-bg-light);
	border-radius: var(--radius-md);
	margin-bottom: 16px;
	font-size: 0.8125rem;
	color: var(--clr-text-muted);
}

.shipment-sep {
	color: var(--clr-border);
}

/* Courier List */
.courier-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

.courier-item {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--radius-md);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: var(--t-base);
}

.courier-item:hover {
	border-color: var(--clr-border);
	background-color: var(--clr-bg-light);
}

.courier-item.is-selected {
	border-color: var(--clr-primary);
	background-color: var(--clr-primary-light);
}

.courier-logo {
	width: 96px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.courier-logo img,
.courier-logo svg {
	width: 96px;
	height: 36px;
	display: block;
	object-fit: contain;
	object-position: left center;
}

.courier-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.courier-name {
	font-size: 0.875rem;
	font-weight: var(--fw-semi);
	color: var(--clr-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.courier-delivery {
	font-size: 0.75rem;
	color: var(--clr-text-muted);
}

.courier-price-col {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
}

.courier-price {
	font-size: 1rem;
	font-weight: var(--fw-bold);
	color: var(--clr-dark);
	letter-spacing: -0.02em;
	transition: var(--t-base);
}

.courier-savings {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: var(--radius-full);
	font-size: 0.6875rem;
	font-weight: var(--fw-semi);
	background-color: var(--clr-green-light);
	color: var(--clr-green-text);
}



.rate-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	border-top: 1px solid var(--clr-border-light);
}

.delivery-eta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	color: var(--clr-text-muted);
	font-weight: var(--fw-medium);
}

.delivery-link {
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	background-color: var(--clr-bg-light);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	color: var(--clr-primary);
	transition: var(--t-fast);
}

.delivery-link:hover {
	background-color: var(--clr-primary);
	color: var(--clr-white);
}

/* Incoming order — shipment summary (stacked rows) */
.order-summary {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	background-color: var(--clr-bg-light);
	border-radius: var(--radius-md);
	margin-bottom: 14px;
}

.order-summary-row {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--clr-text-muted);
}

/* Best rate highlight box */
.best-rate-box {
	border: 1.5px solid var(--clr-primary);
	background-color: var(--clr-primary-light);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	margin-bottom: 14px;
}

.best-rate-badges {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.best-rate-brand,
.best-rate-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: var(--radius-full);
	font-size: 0.75rem;
	font-weight: var(--fw-semi);
}

.best-rate-brand {
	background-color: var(--clr-white);
	color: var(--clr-primary);
}

.best-rate-tag {
	background-color: var(--clr-green-light);
	color: var(--clr-green-text);
}

.best-rate-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.best-rate-amount {
	font-size: 1.75rem;
	font-weight: var(--fw-bold);
	color: var(--clr-dark);
	letter-spacing: -0.02em;
}

.best-rate-unit {
	font-size: 0.8125rem;
	color: var(--clr-text-muted);
}

.best-rate-note {
	margin-top: 4px;
	font-size: 0.75rem;
	color: var(--clr-text-light);
}

/* Rate detail rows: tracking / savings */
.rate-detail-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
}

.rate-detail-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8125rem;
}

.rate-detail-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--clr-text-muted);
	font-weight: var(--fw-medium);
}

.rate-detail-value {
	font-weight: var(--fw-semi);
	color: var(--clr-dark);
}

.rate-card-subfoot {
	margin-top: 12px;
	text-align: center;
	font-size: 0.75rem;
	color: var(--clr-text-light);
}


/* ================================================================
   8. CLIENTS / LOGO MARQUEE SECTION
================================================================ */
.clients-section {
	padding: 48px 0;
	border-top: 1px solid var(--clr-border-light);
	border-bottom: 1px solid var(--clr-border-light);
	overflow: hidden;
}

.clients-intro {
	text-align: center;
	margin-bottom: 32px;
}

.clients-intro-inner {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.clients-intro-pill {
	width: 20px;
	height: 20px;
	border-radius: var(--radius-full);
	overflow: hidden;
	flex-shrink: 0;
}

.clients-heading {
	font-size: 0.875rem;
	font-weight: var(--fw-medium);
	color: var(--clr-text-muted);
}

.clients-heading-arrow {
	color: var(--clr-primary);
	font-weight: var(--fw-semi);
}

/* Marquee Track */
.marquee-wrapper {
	overflow: hidden;
	position: relative;
	margin-bottom: 20px;
}

.marquee-wrapper::before,
.marquee-wrapper::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	z-index: 2;
	pointer-events: none;
}

.marquee-wrapper::before {
	left: 0;
	background: linear-gradient(to right, var(--clr-white) 0%, transparent 100%);
}

.marquee-wrapper::after {
	right: 0;
	background: linear-gradient(to left, var(--clr-white) 0%, transparent 100%);
}

.marquee-track {
	display: flex;
	align-items: center;
	gap: 48px;
	width: max-content;
	animation: marqueeScroll 30s linear infinite;
}

.marquee-track--reverse {
	animation: marqueeScrollReverse 35s linear infinite;
}

@keyframes marqueeScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes marqueeScrollReverse {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

.marquee-wrapper:hover .marquee-track {
	animation-play-state: paused;
}

.marquee-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	padding: 10px 20px;
}

.marquee-item img {
	    height: 120px;
    width: auto;
    border-radius: 20px;
    max-width: 200px;
    object-fit: contain;
    opacity: 0.5;
    transition: var(--t-base);
    padding: 15px;
}

.marquee-item img:hover {
	opacity: 1;
}

/* Marquee Dots */
.marquee-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 24px;
}

.marquee-dot {
	width: 6px;
	height: 6px;
	border-radius: var(--radius-full);
	background-color: var(--clr-border);
	transition: var(--t-fast);
}

.marquee-dot.active {
	width: 20px;
	background-color: var(--clr-primary);
}


/* ================================================================
   9. FEATURE ILLUSTRATION SECTION
================================================================ */
.illustration-section {
	padding: 80px 0;
	background-color: var(--clr-bg-light);
}

.illustration-header {
	text-align: center;
	margin-bottom: 56px;
}

.illustration-header h2 {
	margin-bottom: 14px;
}

.illustration-diagram {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 32px;
	align-items: center;
}

/* Left side — store integrations */
.illustration-left,
.illustration-right {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.illustration-left {
	align-items: flex-end;
}

.illustration-right {
	align-items: flex-start;
}

.illus-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--clr-white);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	max-width: 200px;
	width: 100%;
	transition: var(--t-base);
}

.illus-card:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--clr-primary);
	transform: translateY(-2px);
}

.illus-card-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	flex-shrink: 0;
}

.illus-card-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.illus-card-text {
	font-size: 0.875rem;
	font-weight: var(--fw-semi);
	color: var(--clr-dark);
}

/* Connection lines */
.illus-connections-left,
.illus-connections-right {
	position: relative;
	width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.illus-line {
	position: absolute;
	height: 1px;
	width: 100%;
	background: linear-gradient(to right, var(--clr-border), var(--clr-primary));
	opacity: 0.4;
}

/* Center — Evermile hub */
.illustration-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.illus-hub {
	width: 100px;
	height: 100px;
	border-radius: var(--radius-2xl);
	background: var(--clr-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 32px rgba(67, 85, 246, 0.35);
	position: relative;
}

.illus-hub::before {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: var(--radius-2xl);
	border: 1px solid rgba(67, 85, 246, 0.2);
	animation: hubPulse 3s ease-in-out infinite;
}

@keyframes hubPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(1.05); }
}

.illus-hub img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.illus-hub-label {
	font-size: 0.875rem;
	font-weight: var(--fw-semi);
	color: var(--clr-dark);
}

/* Connection arrows between panels */
.illus-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--clr-primary);
	font-size: 1.5rem;
	opacity: 0.4;
}

.illustration-diagram-wrapper {
	display: grid;
	grid-template-columns: 1fr 160px auto 160px 1fr;
	align-items: center;
	gap: 0;
}


/* ================================================================
   10. SCALE ORDERS SECTION
================================================================ */
.scale-section {
	padding: 40px 0;
	background-color: var(--clr-bg-light);
}

.scale-header {
	text-align: center;
	margin: 0 auto 60px;
}

.scale-title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: 16px;
}

.scale-title-not {
	color: var(--clr-primary);
	font-style: italic;
}

.scale-desc {
	font-size: 1.0625rem;
	line-height: 1.75;
}

.scale-visual {
	display: grid;
	grid-template-columns: 160px 1fr 160px;
	align-items: center;
	gap: 32px;
}

/* Stat boxes */
.scale-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: center;
}

.stat-label {
	font-size: 0.875rem;
	font-weight: var(--fw-medium);
	color: var(--clr-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.75rem;
}

.stat-value {
	font-size: 2rem;
	font-weight: var(--fw-black);
	color: var(--clr-dark);
	letter-spacing: -0.04em;
	line-height: 1;
}

.stat-value.is-positive {
	color: var(--clr-green);
}

.stat-period {
	font-size: 0.75rem;
	color: var(--clr-text-light);
}

.stat-underline {
	display: block;
	margin-top: 8px;
	height: 2px;
	border-radius: 2px;
}

.stat-underline--green {
	background-color: var(--clr-green);
}

.stat-underline--gray {
	background-color: var(--clr-border);
}

/* Chart Visual */
.scale-chart {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.chart-container {
	width: 100%;
	max-width: 400px;
	height: 180px;
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 6px;
}

.chart-bar {
	width: 28px;
	border-radius: 4px 4px 0 0;
	background: rgba(67, 85, 246, 0.15);
	transition: var(--t-slow);
}

.chart-bar.bar-h1 { height: 25%; }
.chart-bar.bar-h2 { height: 38%; }
.chart-bar.bar-h3 { height: 50%; }
.chart-bar.bar-h4 { height: 65%; }
.chart-bar.bar-h5 { height: 80%; }
.chart-bar.bar-h6 { height: 100%; background: var(--clr-primary); }

/* Dashed trend connector */
.chart-trend {
	position: absolute;
	right: 0;
	top: 50%;
	width: 60px;
	height: 1px;
	border-top: 2px dashed var(--clr-primary);
	opacity: 0.4;
}

/* Center rocket / sparkle icon */
.chart-center-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	background: var(--clr-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(67, 85, 246, 0.3);
	margin: 0 auto;
}

.chart-center-icon img {
	width: 24px;
	height: 24px;
}

/* Dashed line from chart to right stat */
.scale-dashed-line {
	height: 1px;
	border-top: 2px dashed rgba(67, 85, 246, 0.3);
	flex: 1;
	margin: 0 16px;
}


/* ================================================================
   11. PROCESS STEPS SECTION
================================================================ */
.process-section {
	padding: 0px 0px 60px;
	background-color: var(--clr-bg-light);
}

.process-steps {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	align-items: start;
	gap: 0;
	max-width: 900px;
	margin: 0 auto;
}

.process-step {
	text-align: center;
	padding: 24px 20px;
}

.step-number-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	background-color: var(--clr-primary);
	color: var(--clr-white);
	font-size: 0.875rem;
	font-weight: var(--fw-bold);
	margin-bottom: 16px;
}

.step-title {
	font-size: 1.125rem;
	font-weight: var(--fw-bold);
	color: var(--clr-dark);
	margin-bottom: 10px;
}

.step-desc {
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--clr-text-muted);
}

.step-connector {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 48px;
	color: var(--clr-text-light);
}

.step-connector svg {
	opacity: 0.5;
}


/* ================================================================
   12. SAVINGS CALCULATOR SECTION
================================================================ */
.calculator-section {
	padding: 40px 0px;
	background-color: var(--clr-white);
}

.calculator-layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 60px;
	align-items: start;
}

.calculator-intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.calculator-intro h2 {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	line-height: 1.15;
}

.calculator-intro p {
	font-size: 0.9375rem;
	line-height: 1.7;
}

.calc-refresh-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: var(--fw-semi);
	color: var(--clr-primary);
	padding: 0;
	transition: var(--t-fast);
}

.calc-refresh-link:hover {
	opacity: 0.75;
}

/* Calculator widget */
.calculator-widget {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	background: var(--clr-white);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-xl);
	padding: 36px;
	box-shadow: var(--shadow-md);
}

/* Sliders */
.calc-sliders {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.slider-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.slider-label {
	font-size: 0.875rem;
	font-weight: var(--fw-semi);
	color: var(--clr-dark);
}

.slider-input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 5px;
	border-radius: var(--radius-full);
	background: var(--clr-border);
	outline: none;
	cursor: pointer;
}

.slider-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--clr-primary);
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(67, 85, 246, 0.4);
	border: 2px solid var(--clr-white);
	transition: transform 0.15s ease;
}

.slider-input::-webkit-slider-thumb:hover {
	transform: scale(1.15);
}

.slider-input::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--clr-primary);
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(67, 85, 246, 0.4);
	border: 2px solid var(--clr-white);
}

.slider-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.slider-min,
.slider-max {
	font-size: 0.75rem;
	color: var(--clr-text-light);
}

.slider-current-val {
	font-size: 0.875rem;
	font-weight: var(--fw-bold);
	color: var(--clr-primary);
}

/* Results */
.calc-results {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: stretch;
}

.calc-results-left {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.result-card {
	padding: 18px 20px;
	border-radius: var(--radius-md);
	border: 1px solid var(--clr-border-light);
	background: var(--clr-bg-light);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.result-card--smart {
	background: var(--clr-white);
	border-color: var(--clr-border);
}

.result-card--savings {
	background: linear-gradient(135deg, #0D0D1A 0%, #1E1A3D 100%);
	border-color: transparent;
	justify-content: center;
}

.result-label {
	font-size: 0.8125rem;
	font-weight: var(--fw-medium);
	color: var(--clr-text-muted);
}

.result-card--savings .result-label {
	color: rgba(255,255,255,0.65);
}

.result-value {
	font-size: 1.625rem;
	font-weight: var(--fw-black);
	color: var(--clr-dark);
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.result-card--savings .result-value {
	color: var(--clr-white);
}

.result-period {
	font-size: 0.8125rem;
	color: var(--clr-text-muted);
}

.result-card--savings .result-period {
	color: rgba(255,255,255,0.5);
}

.result-pct-badge {
	gap: 4px;
	padding: 3px 10px;
	border-radius: var(--radius-full);
	background: rgba(255,255,255,0.15);
	font-size: 0.8125rem;
	font-weight: var(--fw-semi);
	color: var(--clr-white);
	width: fit-content;
	margin-top: 4px;
}


/* ================================================================
   13. FEATURES GRID SECTION
================================================================ */
.features-section {
	padding: var(--section-pad) 0;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.feature-card {
	padding: 28px 24px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--clr-border);
	background: var(--clr-white);
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: var(--t-base);
}

.feature-card:hover {
	border-color: var(--clr-primary);
	box-shadow: var(--shadow-card);
	transform: translateY(-3px);
}

.feature-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--clr-bg-light);
	display: flex;
	align-items: center;
	justify-content: center;
}

.feature-icon img,
.feature-icon svg {
	width: 48px;
	height: 48px;
	display: block;
}

.feature-title {
	font-size: 1rem;
	font-weight: var(--fw-semi);
	color: var(--clr-dark);
	line-height: 1.3;
}

.feature-desc {
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--clr-text-muted);
}

.feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.feature-list li {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--clr-text-muted);
	padding-left: 18px;
	position: relative;
}

.feature-list li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: var(--clr-primary);
	font-size: 0.75rem;
	line-height: 1.5;
}

.feature-learn-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: var(--fw-semi);
	color: var(--clr-primary);
	transition: var(--t-fast);
}

.feature-learn-more:hover {
	gap: 8px;
}


/* ================================================================
   14. PARTNER NETWORK + INTEGRATIONS
================================================================ */

/* Partner Network */
.partner-section {
	padding: 60px 0;
}

.partner-heading {
	text-align: center;
	margin-bottom: 56px;
}

.partner-heading h2 {
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.2;
}

.partner-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.partner-map-wrap {
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--clr-bg-light);
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.partner-map-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.partner-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.partner-content h3 {
	font-size: 38px;
	color: var(--clr-dark);
	line-height: 1.3;
}

.partner-content > p {
	font-size: 1.2rem;
	color: var(--clr-text-muted);
	line-height: 1.7;
}

.partner-logos {
	margin-top: 8px;
}

.partner-logo {
	max-width: 100%;
	height: auto;
	display: block;
}

.partner-logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	border-radius: var(--radius-md);
	border: 1px solid var(--clr-border-light);
	background: var(--clr-white);
	min-height: 56px;
	transition: var(--t-fast);
}

.partner-logo-item:hover {
	border-color: var(--clr-border);
	box-shadow: var(--shadow-sm);
}

.partner-logo-item img {
	height: 28px;
	width: auto;
	max-width: 80px;
	object-fit: contain;
}

.partner-logo-more {
	font-size: 0.875rem;
	font-weight: var(--fw-semi);
	color: var(--clr-primary);
	border-style: dashed !important;
}


/* Bento Feature Grid (e.g. Order Management "Automate and control your orders") */
.features-bento-section {
	padding: 60px 0;
}

.bento-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.bento-card {
	background-color: #f1f2fb;
	border-radius: var(--radius-xl);
	padding: 24px;
}

.bento-card h3 {
	font-size: 2rem;
	font-weight: 600;
	color: var(--clr-dark);
	line-height: 1.3;
	margin-bottom: 6px;
}

.bento-card p {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--clr-text-muted);
	margin: 0;
}

.bento-card--large {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Bento card that is purely an image, no copy (stretches to match the stack beside it) */
.bento-card--image-only {
	padding: 0;
	overflow: hidden;
	min-height: 320px;
}

.bento-card--image-only img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bento-card-image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--clr-white);
	min-height: 220px;
}

.bento-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bento-stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bento-card--text {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bento-card--photo {
	margin-top: 60px;
	grid-column: 1 / -1;
	position: relative;
	overflow: hidden;
	min-height: 400px;
	display: flex;
	align-items: flex-end;
	padding: 0;
}

.bento-photo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.bento-card--photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
	z-index: 1;
}

.bento-photo-overlay {
	position: relative;
	z-index: 2;
	padding: 28px 32px;
}

.bento-photo-overlay h3 {
	color: var(--clr-white);
}

.bento-photo-overlay p {
	color: rgba(255, 255, 255, 0.85);
	max-width: 520px;
}

/* Bento "tracking" card variant — solid colour panel + inline image (not full-bleed photo) */
.bento-card--tracking {
	grid-column: 1 / -1;
	background: linear-gradient(135deg, #5C2A3A, #3F1C28);
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: center;
	gap: 24px;
	padding: 32px;
	min-height: 200px;
}

.bento-card--tracking h3,
.bento-card--tracking p {
	color: var(--clr-white);
}

.bento-card--tracking p {
	color: rgba(255, 255, 255, 0.75);
}

.bento-tracking-image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	height: 100%;
	min-height: 160px;
}

.bento-tracking-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Courier pill grid (inside a bento card) */
.courier-pill-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 18px;
}

.courier-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background-color: var(--clr-white);
	border: 1px solid var(--clr-border-light);
	border-radius: var(--radius-full);
	padding: 8px 10px;
	font-size: 0.75rem;
	font-weight: var(--fw-medium);
	color: var(--clr-text);
	box-shadow: var(--shadow-xs);
}

.courier-pill img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	flex-shrink: 0;
}

/* Support chat mock (inside a bento card) */
.support-chat-mock {
	margin-top: 16px;
	background-color: var(--clr-bg-light);
	border-radius: var(--radius-lg);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.chat-bubble-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.chat-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background-color: var(--clr-primary-light);
}

.chat-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.chat-bubble {
	background-color: var(--clr-white);
	border-radius: var(--radius-md);
	padding: 8px 12px;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--clr-text);
	box-shadow: var(--shadow-xs);
	max-width: 220px;
}

.chat-bubble--indent {
	margin-left: 34px;
}

/* Centered hero variant + single hero image */
.hero-centered {
	text-align: center;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	position: relative;
	z-index: 1;
}

.hero-centered .hero-desc {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.hero-single-image {
	margin: 56px auto 0;
	border-radius: var(--radius-xl);
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.hero-single-image img {
	width: 100%;
	height: auto;
	display: block;
}


/* Integrations */
.integrations-section {
	padding: var(--section-pad) 0;
}

.integrations-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

/* Orbit */
.orbit-wrap {
	position: relative;
	width: 360px;
	height: 360px;
	margin: 0 auto;
	flex-shrink: 0;
}

.orbit-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	border: 1px dashed rgba(67, 85, 246, 0.25);
}

.orbit-ring--1 {
	width: 200px;
	height: 200px;
	margin-left: -100px;
	margin-top: -100px;
	animation: ring-spin 12s linear infinite;
}

.orbit-ring--2 {
	width: 340px;
	height: 340px;
	margin-left: -170px;
	margin-top: -170px;
	animation: ring-spin 20s linear infinite reverse;
}

.orbit-dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	margin-top: -20px;
}

.orbit-ring--1 .orbit-dot {
	transform: rotate(var(--a)) translateX(100px);
}

.orbit-ring--2 .orbit-dot {
	transform: rotate(var(--a)) translateX(170px);
}

.orbit-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	background: var(--clr-white);
	box-shadow: var(--shadow-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.orbit-ring--1 .orbit-icon {
	animation: ring-spin 12s linear infinite reverse;
}

.orbit-ring--2 .orbit-icon {
	animation: ring-spin 20s linear infinite;
}

.orbit-icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.orbit-center {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	margin-left: -32px;
	margin-top: -32px;
	background: var(--clr-primary);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	box-shadow: 0 4px 24px rgba(67, 85, 246, 0.35);
}

.orbit-center img {
	height: 16px;
	width: auto;
	filter: brightness(0) invert(1);
}

@keyframes ring-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Integrations content */
.integrations-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.integrations-content h2 {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	color: var(--clr-dark);
	line-height: 1.2;
}

.integrations-content p {
	font-size: 0.9375rem;
	color: var(--clr-text-muted);
	line-height: 1.7;
	margin: 0;
}


/* ================================================================
   15. TESTIMONIALS SECTION
================================================================ */
.testimonials-section {
	background-color: var(--clr-bg-light);
	padding:0px 0px 50px 0px;
}

.testimonials-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 60px;
	align-items: start;
}

.testimonials-meta {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: calc(var(--header-h) + 24px);
}

.testimonials-label {
	font-size: 38px;
	font-weight: var(--fw-bold);
	color: var(--clr-dark);
	line-height: 1.25;
}

.rating-display {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rating-score {
	font-size: 2.5rem;
	font-weight: var(--fw-black);
	color: var(--clr-dark);
	letter-spacing: -0.04em;
	line-height: 1;
}

.rating-stars {
	display: flex;
	gap: 3px;
}

.star-icon {
	color: #F59E0B;
	font-size: 1rem;
}

.rating-count {
	font-size: 0.8125rem;
	color: var(--clr-text-muted);
}

/* Testimonial Cards */
.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* Full-width feature testimonial (e.g. Marketing page) */
.testimonial-feature-card {
	position: relative;
	background-color: var(--clr-bg-light);
	border-radius: var(--radius-xl);
	padding: 56px;
	overflow: hidden;
}

.testimonial-feature-quote-icon {
	position: absolute;
	top: 32px;
	right: 40px;
	font-size: 5rem;
	line-height: 1;
	font-family: Georgia, serif;
	color: var(--clr-primary);
	opacity: 0.2;
}

.testimonial-feature-text {
	max-width: 760px;
	font-size: 1.25rem;
	font-weight: var(--fw-medium);
	line-height: 1.6;
	margin-bottom: 28px;
	background: linear-gradient(90deg, #4355F6, #0EA5E9 55%, #14B8A6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.testimonial-feature-author {
	display: flex;
	flex-direction: column;
}

.testimonial-feature-name {
	font-weight: var(--fw-bold);
	color: var(--clr-dark);
	font-size: 1rem;
}

.testimonial-feature-role {
	color: var(--clr-primary);
	font-size: 0.875rem;
	margin-top: 2px;
}

.testimonial-feature-brand {
	margin-top: 14px;
	font-size: 0.8125rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #E08A93;
}

.testimonial-card {
	background: var(--clr-white);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: var(--t-base);
}

.testimonial-card:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--clr-border);
	transform: translateY(-2px);
}

.testimonial-quote-icon {
	color: var(--clr-primary);
	opacity: 0.3;
	font-size: 2rem;
	line-height: 1;
}

.testimonial-text {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--clr-text);
	flex: 1;
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--clr-border-light);
}

.author-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.author-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.author-name {
	font-size: 0.875rem;
	font-weight: var(--fw-semi);
	color: var(--clr-dark);
}

.author-role {
	font-size: 0.75rem;
	color: var(--clr-text-muted);
}


/* ================================================================
   16. BLOG / INSIGHTS SECTION
================================================================ */
.blog-section {
	padding: var(--section-pad) 0;
}

.blog-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 48px;
}

.blog-header-left h2 {
	margin-bottom: 8px;
}

.blog-view-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9375rem;
	font-weight: var(--fw-semi);
	color: var(--clr-primary);
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	transition: var(--t-fast);
	white-space: nowrap;
}

.blog-view-all:hover {
	border-bottom-color: var(--clr-primary);
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.blog-card {
	border-radius: var(--radius-lg);
	border: 1px solid var(--clr-border);
	overflow: hidden;
	background: var(--clr-white);
	transition: var(--t-base);
	display: flex;
	flex-direction: column;
}

.blog-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.blog-card-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.blog-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-image img {
	transform: scale(1.04);
}

.blog-card-category {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: var(--radius-full);
	font-size: 0.6875rem;
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background-color: var(--clr-orange);
	color: var(--clr-white);
}

.blog-card-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.blog-card-title {
	font-size: 1rem;
	font-weight: var(--fw-semi);
	color: var(--clr-dark);
	line-height: 1.45;
	transition: color 0.2s;
}

.blog-card:hover .blog-card-title {
	color: var(--clr-primary);
}

.blog-card-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.8125rem;
	color: var(--clr-text-light);
	margin-top: auto;
}

.blog-meta-sep {
	color: var(--clr-border);
}


/* ================================================================
   17. CTA BANNER SECTION
================================================================ */
.cta-banner-section {
	padding: 60 0 var(--section-pad);
}

.cta-banner-inner {
	background: linear-gradient(135deg, #0D0D1A 0%, #1E1A3D 60%, #2D1A4A 100%);
	border-radius: var(--radius-2xl);
	padding: 72px 60px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 40px;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.cta-banner-inner::before {
	content: '';
	position: absolute;
	top: -40%;
	right: 10%;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(67,85,246,0.2) 0%, transparent 70%);
	pointer-events: none;
}

.cta-banner-icon {
	width: 72px;
	height: 72px;
	border-radius: var(--radius-xl);
	background: rgba(255,255,255,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 1px solid rgba(255,255,255,0.1);
}

.cta-banner-icon img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.cta-banner-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cta-banner-text h2 {
	font-size: clamp(1.75rem, 3vw, 2.375rem);
	color: var(--clr-white);
	letter-spacing: -0.03em;
}

.cta-banner-text p {
	font-size: 1rem;
	color: rgba(255,255,255,0.6);
}

.cta-banner-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-shrink: 0;
}
.footer-address p, .footer-address a {
	color: rgba(218, 199, 199, 0.5);

}

/* ================================================================
   18. SITE FOOTER
================================================================ */
.site-footer {
	background-color: var(--clr-dark);
	color: var(--clr-white);
}

.footer-main {
	padding: 72px 0 48px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 48px;
}

/* Brand column */
.footer-col--brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.footer-logo {
	display: inline-flex;
	align-items: center;
}

.footer-logo-text {
	font-size: 1.25rem;
	font-weight: var(--fw-black);
	color: var(--clr-white);
	letter-spacing: -0.03em;
}

.footer-logo img {
	height: 32px;
	width: auto;
	filter: brightness(0) invert(1);
}

.footer-tagline {
	font-size: 0.875rem;
	line-height: 1.65;
	color: rgba(255,255,255,0.5);
}

/* Footer address block */
.footer-address {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-address p {
	font-size: 0.875rem;
	line-height: 1.65;
	color: rgba(255,255,255,0.5);
	margin: 0;
}

.footer-address a {
	color: rgba(255,255,255,0.5);
	transition: color 0.2s ease;
}

.footer-address a:hover {
	color: var(--clr-white);
}

/* Footer columns */
.footer-col-title {
	font-size: 0.9375rem;
	font-weight: var(--fw-semi);
	color: var(--clr-primary);
	margin-bottom: 20px;
}

.footer-links {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer-links a {
	font-size: 0.9375rem;
	color: rgba(255,255,255,0.55);
	transition: color 0.2s ease;
}

.footer-links a:hover {
	color: var(--clr-white);
}

/* Newsletter */
.footer-col--newsletter {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer-newsletter-desc {
	font-size: 0.875rem;
	color: rgba(255,255,255,0.5);
	line-height: 1.6;
}

.newsletter-input-group {
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--radius-full);
	padding: 4px 4px 4px 16px;
	transition: border-color 0.2s ease;
}

.newsletter-input-group:focus-within {
	border-color: var(--clr-primary);
}

.newsletter-input {
	flex: 1;
	background: transparent;
	border: none;
	color: var(--clr-white);
	font-size: 0.875rem;
	outline: none;
	min-width: 0;
}

.newsletter-input::placeholder {
	color: rgba(255,255,255,0.35);
}

.newsletter-submit {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: var(--clr-primary);
	color: var(--clr-white);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: var(--t-fast);
}

.newsletter-submit:hover {
	background: var(--clr-primary-hover);
}

.newsletter-success {
	font-size: 0.8125rem;
	color: var(--clr-green);
	margin-top: 4px;
}

/* Footer Bottom */
.footer-bottom {
	padding: 24px 0;
}

.footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.footer-bottom-left {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.footer-copyright {
	font-size: 0.875rem;
	color: rgba(255,255,255,0.4);
}

.footer-powered {
	font-size: 0.875rem;
	color: rgba(255,255,255,0.4);
}

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

.social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.6);
	transition: var(--t-fast);
}

.social-icon:hover {
	background: var(--clr-primary);
	color: var(--clr-white);
}


/* ================================================================
   19. PAGE & BLOG TEMPLATES
================================================================ */
.page-content-wrap {
	padding-top: calc(var(--header-h) + 60px);
	padding-bottom: var(--section-pad);
}

.page-hero {
	background-color: var(--clr-bg-light);
	padding: 80px 0;
	margin-bottom: 60px;
}

.page-hero h1 {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: 16px;
}

.entry-content {
	max-width: 760px;
	margin: 0 auto;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 40px;
	margin-bottom: 16px;
}

.entry-content p {
	margin-bottom: 20px;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--clr-text);
}

.entry-content ul,
.entry-content ol {
	list-style: revert;
	padding-left: 24px;
	margin-bottom: 20px;
}

.entry-content ul li,
.entry-content ol li {
	margin-bottom: 8px;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--clr-text);
}

.entry-content img {
	border-radius: var(--radius-md);
	margin: 32px 0;
}

.entry-content blockquote {
	border-left: 4px solid var(--clr-primary);
	padding: 16px 24px;
	margin: 32px 0;
	background: var(--clr-primary-light);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.entry-content blockquote p {
	font-size: 1.125rem;
	font-style: italic;
	color: var(--clr-dark);
	margin-bottom: 0;
}

/* Blog Layout */
.blog-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 60px;
	align-items: start;
}

.blog-post-list {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.blog-post-item {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 32px;
	align-items: start;
	padding-bottom: 48px;
	border-bottom: 1px solid var(--clr-border-light);
}

.blog-post-item:last-child {
	border-bottom: none;
}

.post-thumbnail {
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 16/10;
}

.post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-category {
	display: inline-flex;
	padding: 4px 10px;
	border-radius: var(--radius-full);
	font-size: 0.6875rem;
	font-weight: var(--fw-semi);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background-color: var(--clr-orange-light);
	color: var(--clr-orange);
	margin-bottom: 12px;
}

.post-title {
	font-size: 1.375rem;
	font-weight: var(--fw-bold);
	color: var(--clr-dark);
	line-height: 1.35;
	margin-bottom: 12px;
}

.post-title a {
	transition: color 0.2s;
}

.post-title a:hover {
	color: var(--clr-primary);
}

.post-excerpt {
	font-size: 0.9375rem;
	line-height: 1.7;
	margin-bottom: 16px;
}

.post-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.8125rem;
	color: var(--clr-text-light);
}

/* Pagination */
.pagination-wrap {
	display: flex;
	justify-content: center;
	margin-top: 60px;
}

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

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	font-weight: var(--fw-medium);
	border: 1.5px solid var(--clr-border);
	color: var(--clr-text-muted);
	transition: var(--t-fast);
}

.nav-links .page-numbers:hover,
.nav-links .page-numbers.current {
	background-color: var(--clr-primary);
	border-color: var(--clr-primary);
	color: var(--clr-white);
}

/* Single Post */
.single-post-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 60px;
}

.single-post-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	font-size: 0.875rem;
	color: var(--clr-text-light);
	margin-top: 20px;
}

.single-post-meta .post-category {
	margin-bottom: 0;
}


/* ================================================================
   19B. PRICING PAGE
================================================================ */

.pricing-hero-section {
	padding: var(--section-pad) 0 80px;
	background-color: var(--clr-bg-light);
}

.pricing-hero-intro {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
}

.pricing-hero-intro h1 {
	margin-bottom: 16px;
}

.pricing-hero-intro p {
	font-size: 1.0625rem;
	color: var(--clr-text-muted);
	line-height: 1.7;
}

/* Billing toggle */
.billing-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: fit-content;
	margin: 0 auto 48px;
	padding: 4px;
	background-color: var(--clr-white);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-xs);
}

.billing-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	font-family: var(--font);
	font-size: 0.875rem;
	font-weight: var(--fw-semi);
	color: var(--clr-text-muted);
	background: transparent;
	border: none;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: var(--t-fast);
}

.billing-toggle-btn.is-active {
	background-color: var(--clr-dark);
	color: var(--clr-white);
}

.billing-toggle-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background-color: var(--clr-green-light);
	color: var(--clr-green-text);
	border-radius: var(--radius-full);
	font-size: 0.6875rem;
	font-weight: var(--fw-bold);
}

/* Pricing cards */
.pricing-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: stretch;
}

.pricing-card {
	display: flex;
	flex-direction: column;
	background-color: var(--clr-white);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-xl);
	padding: 28px;
}

.pricing-card--featured {
	border: 2px solid var(--clr-primary);
	box-shadow: var(--shadow-card);
	position: relative;
}

.pricing-card-label {
	font-size: 0.875rem;
	font-weight: var(--fw-semi);
	color: var(--clr-text-muted);
	margin-bottom: 12px;
}

.pricing-card-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.pricing-card-amount {
	font-size: 2.25rem;
	font-weight: var(--fw-black);
	color: var(--clr-dark);
	letter-spacing: -0.02em;
}

.pricing-card-amount--text {
	font-size: 1.5rem;
}

.pricing-card-period {
	font-size: 0.9375rem;
	color: var(--clr-text-muted);
	font-weight: var(--fw-medium);
}

.pricing-card-billed {
	font-size: 0.8125rem;
	color: var(--clr-text-light);
	margin-top: 4px;
}

.pricing-card-desc {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--clr-text-muted);
	margin-top: 16px;
	min-height: 84px;
}

.pricing-card-includes {
	display: block;
	font-size: 0.8125rem;
	font-weight: var(--fw-semi);
	color: var(--clr-dark);
	margin-top: 20px;
	margin-bottom: 4px;
}

.pricing-check-list {
	list-style: none;
	padding: 0;
	margin: 16px 0 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.pricing-check-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.875rem;
	color: var(--clr-text);
	line-height: 1.4;
}

/* Monthly/yearly billing toggle — JS flips the [hidden] attribute */
.billing-only[hidden] {
	display: none !important;
}

.pricing-card-btn {
	width: 100%;
	margin-top: auto;
}

.pricing-cards-footnote {
	text-align: center;
	font-size: 0.75rem;
	color: var(--clr-text-light);
	margin-top: 24px;
}

/* Compare packages table */
.pricing-compare-section {
	padding: var(--section-pad) 0;
	background-color: var(--clr-bg-light);
}

.pricing-compare-scroll {
	overflow-x: auto;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	background-color: var(--clr-white);
}

.pricing-compare-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 760px;
	font-size: 0.875rem;
}

.pricing-compare-table th,
.pricing-compare-table td {
	padding: 14px 20px;
	text-align: center;
	border-bottom: 1px solid var(--clr-border-light);
	color: var(--clr-text);
}

.pricing-compare-table thead th {
	font-size: 0.8125rem;
	font-weight: var(--fw-semi);
	color: var(--clr-text-muted);
	background-color: var(--clr-bg-light);
	position: sticky;
	top: 0;
}

.pricing-compare-table .compare-row-label {
	text-align: left;
	font-weight: var(--fw-medium);
	color: var(--clr-dark);
	white-space: normal;
}

.compare-category-row td {
	text-align: left;
	background-color: var(--clr-bg-light);
	color: var(--clr-primary);
	font-weight: var(--fw-semi);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.compare-subnote {
	display: block;
	font-size: 0.6875rem;
	font-weight: var(--fw-regular);
	color: var(--clr-text-light);
	margin-top: 2px;
}

.pricing-compare-table .is-check {
	color: var(--clr-green);
	font-weight: var(--fw-bold);
}

.pricing-compare-table .is-dash {
	color: var(--clr-border);
}

.pricing-table-footnotes {
	margin-top: 20px;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--clr-text-light);
}

/* CTA panel */
.pricing-cta-section {
	padding: var(--section-pad-sm) 0;
}

.pricing-cta-panel {
	text-align: center;
	margin: 0 auto;
	padding: 48px;
	background-color: var(--clr-bg-light);
	border-radius: var(--radius-xl);
}

.pricing-cta-panel h2 {
	margin-bottom: 12px;
}

.pricing-cta-panel p {
	color: var(--clr-text-muted);
	margin-bottom: 24px;
}


/* ================================================================
   19C. OUR STORY PAGE
================================================================ */

.story-hero-section {
	padding: var(--section-pad) 0 40px;
	text-align: center;
}

.story-hero-heading {
	margin: 0 auto 56px;
}

.story-hero-heading h1 {
	line-height: 1.25;
}

/* Photo collage */
.story-collage {
	position: relative;
	max-width: 620px;
	height: 380px;
	margin: 0 auto;
}

.story-collage-photo {
	position: absolute;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	background-color: var(--clr-white);
}

.story-collage-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.story-collage-photo--1 {
	top: 0;
	left: 10px;
	width: 170px;
	height: 120px;
	transform: rotate(-4deg);
}

.story-collage-photo--2 {
	top: 20px;
	right: 20px;
	width: 150px;
	height: 110px;
	transform: rotate(3deg);
}

.story-collage-photo--3 {
	top: 160px;
	left: 50px;
	width: 180px;
	height: 130px;
	transform: rotate(-2deg);
}

.story-collage-photo--4 {
	top: 140px;
	right: 0;
	width: 140px;
	height: 170px;
	transform: rotate(4deg);
}

.story-collage-photo--5 {
	bottom: 0;
	right: 70px;
	width: 180px;
	height: 100px;
	transform: rotate(-3deg);
}

.story-collage-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background-color: var(--clr-white);
	box-shadow: var(--shadow-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.story-collage-badge img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	display: block;
}

/* Content blocks */
.story-content {
	max-width: 740px;
	margin: 0 auto;
	padding: 40px 0 var(--section-pad);
}

.story-block {
	margin-bottom: 48px;
}

.story-block:last-child {
	margin-bottom: 0;
}

.story-block h2 {
	margin-bottom: 20px;
}

.story-block p {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--clr-text-muted);
	margin-bottom: 16px;
}

.story-block p:last-child {
	margin-bottom: 0;
}


/* ================================================================
   20. 404 PAGE
================================================================ */
.error-404 {
	padding-top: calc(var(--header-h) + 80px);
	padding-bottom: var(--section-pad);
	text-align: center;
	min-height: 70vh;
	display: flex;
	align-items: center;
}

.error-404-inner {
	max-width: 560px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.error-code {
	font-size: 7rem;
	font-weight: var(--fw-black);
	color: var(--clr-primary);
	letter-spacing: -0.06em;
	line-height: 1;
	opacity: 0.15;
}

.error-404-inner h1 {
	font-size: 2rem;
	margin-top: -40px;
}

.error-404-inner p {
	font-size: 1.0625rem;
}

.error-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}


/* ================================================================
   21. RESPONSIVE — TABLET (max 1024px)
================================================================ */
@media (max-width: 1024px) {

	:root {
		--section-pad: 80px;
	}

	/* Pricing */
	.pricing-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Header */
	.header-nav {
		display: none;
	}

	.header-actions {
		display: none;
	}

	.nav-hamburger {
		display: flex;
	}

	.mobile-nav {
		display: block;
	}

	/* Hero */
	.hero-inner {
		grid-template-columns: 1fr;
		gap: 48px;
		text-align: center;
	}

	.hero-content {
		align-items: center;
	}

	.hero-desc {
		max-width: 100%;
	}

	.hero-visual {
		justify-content: center;
	}

	/* Footer — 3-col layout stays as-is at tablet */
	.footer-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}

	/* Partner section */
	.partner-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.partner-map-wrap {
		min-height: 280px;
	}

	/* Integrations section */
	.integrations-layout {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	/* Calculator results */
	.calc-results {
		grid-template-columns: 1fr;
	}

	/* Scale section */
	.scale-visual {
		grid-template-columns: 120px 1fr 120px;
		gap: 16px;
	}

	/* Features grid */
	.features-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Testimonials */
	.testimonials-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.testimonials-meta {
		position: static;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: 24px;
	}

	.testimonials-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Blog */
	.blog-layout {
		grid-template-columns: 1fr;
	}

	/* CTA Banner */
	.cta-banner-inner {
		grid-template-columns: auto 1fr;
		padding: 48px 40px;
	}

	.cta-banner-actions {
		grid-column: span 2;
	}

	/* Blog post layout */
	.blog-post-item {
		grid-template-columns: 1fr;
	}

	/* Calculator */
	.calculator-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.calculator-widget {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* Illustration diagram */
	.illustration-diagram-wrapper {
		grid-template-columns: 1fr 30px auto 30px 1fr;
	}
}


/* ================================================================
   22. RESPONSIVE — MOBILE (max 768px)
================================================================ */
@media (max-width: 768px) {

	:root {
		--section-pad:    60px;
		--container-pad:  20px;
	}

	/* Pricing */
	.pricing-cards {
		grid-template-columns: 1fr;
	}

	.billing-toggle {
		flex-wrap: wrap;
	}

	.pricing-cta-panel {
		padding: 32px 24px;
	}

	/* Our Story collage */
	.story-collage {
		max-width: 340px;
		height: 320px;
	}

	.story-collage-photo {
		width: 110px !important;
		height: 90px !important;
	}

	.story-collage-photo--5 {
		display: none;
	}

	.scale-stats-list{
		display: flex;
    flex-direction: column;
    gap: 32px;
	text-align:center;
    margin: auto;
	}
	.reveal.is-revealed{
		justify-content: center;
    	text-align: center;
	}
	.result-pct-badge{
		margin:auto !important;
	}
	.feature-icon, .feature-learn-more, .partner-logos, .partner-content{
		margin:auto !important;
	}
	.partner-content, .integrations-layout {
		text-align: center;
	}
	.reveal.is-revealed{
		display:block;
	}
	.cta-banner-actions{
		margin-top:20px 0px;
	}
	.testimonials-meta{
		flex-direction: column;
	}
	.partner-content h3 {
		font-size: 24px;
	}

	.bento-grid {
		grid-template-columns: 1fr;
	}

	.bento-card--photo {
		grid-column: 1;
		min-height: 240px;
	}

	.bento-card--tracking {
		grid-template-columns: 1fr;
	}

	.hero-single-image {
		margin-top: 32px;
	}

	/* Partner section */
	.partner-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.partner-heading h2 {
		font-size: 1.75rem;
	}

	.partner-map-wrap {
		min-height: 240px;
	}

	/* Integrations section */
	.integrations-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* Orbit — scale down proportionally for mobile */
	.orbit-wrap {
		width: 260px;
		height: 260px;
	}

	.orbit-ring--1 {
		width: 150px;
		height: 150px;
		margin-left: -75px;
		margin-top: -75px;
	}

	.orbit-ring--1 .orbit-dot {
		transform: rotate(var(--a)) translateX(75px);
	}

	.orbit-ring--2 {
		width: 250px;
		height: 250px;
		margin-left: -125px;
		margin-top: -125px;
	}

	.orbit-ring--2 .orbit-dot {
		transform: rotate(var(--a)) translateX(125px);
	}

	/* Calculator results — stack on mobile */
	.calc-results {
		grid-template-columns: 1fr;
	}

	/* Hero */
	.hero-section {
		padding-top: 40px;
		padding-bottom: 48px;
	}

	.hero-title {
		font-size: 2.25rem;
	}

	.hero-actions {
		flex-direction: column;
		width: 100%;
	}

	.hero-actions .btn {
		width: 100%;
		justify-content: center;
	}

	.hero-trust {
		flex-direction: column;
		gap: 10px;
		align-items: center;
	}

	/* Rate card */
	.rate-card {
		max-width: 100%;
	}

	/* Clients */
	.clients-intro-inner {
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Scale section */
	.scale-visual {
		grid-template-columns: 1fr;
		gap: 32px;
		text-align: center;
	}

	.scale-stat {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 12px;
	}

	/* Process steps */
	.process-steps {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.step-connector {
		display: none;
	}

	/* Features grid */
	.features-grid {
		grid-template-columns: 1fr;
	}

	/* Testimonials */
	.testimonials-grid {
		grid-template-columns: 1fr;
	}

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

	.testimonial-feature-text {
		font-size: 1.0625rem;
	}

	.testimonial-feature-quote-icon {
		font-size: 3.5rem;
		top: 16px;
		right: 20px;
	}

	/* Blog grid */
	.blog-grid {
		grid-template-columns: 1fr;
	}

	.blog-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	/* CTA banner */
	.cta-banner-inner {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 48px 24px;
	}

	.cta-banner-icon {
		margin: 0 auto;
	}

	.cta-banner-actions {
		grid-column: 1;
		flex-direction: column;
		width: 100%;
		margin:20px 0px;
	}
	.testimonial-author{
		justify-content: center;
	}
	.cta-banner-actions .btn {
		width: 100%;
		justify-content: center;
	}
	.testimonials-label{
		text-align: center;
	}
	/* Footer grid — 2 cols on mobile: address full-width, then company + resources */
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

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

	/* Footer bottom */
	.footer-bottom-inner {
		flex-direction: column;
		text-align: center;
		gap: 16px;
	}

	/* Illustration */
	.illustration-diagram {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.illustration-left,
	.illustration-right {
		align-items: center;
	}

	.illus-arrow {
		display: none;
	}

	.illustration-diagram-wrapper {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	/* Calculator */
	.calculator-widget {
		padding: 24px 20px;
	}
}


/* ================================================================
   23. RESPONSIVE — SMALL MOBILE (max 480px)
================================================================ */
@media (max-width: 480px) {

	:root {
		--header-h: 64px;
	}

	.hero-title {
		font-size: 2rem;
	}

	.rate-card {
		padding: 16px;
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}

	.footer-col--brand {
		grid-column: 1;
	}

	/* Orbit — smallest screens */
	.orbit-wrap {
		width: 220px;
		height: 220px;
	}

	.orbit-ring--1 {
		width: 120px;
		height: 120px;
		margin-left: -60px;
		margin-top: -60px;
	}

	.orbit-ring--1 .orbit-dot {
		transform: rotate(var(--a)) translateX(60px);
	}

	.orbit-ring--2 {
		width: 210px;
		height: 210px;
		margin-left: -105px;
		margin-top: -105px;
	}

	.orbit-ring--2 .orbit-dot {
		transform: rotate(var(--a)) translateX(105px);
	}

	/* Partner logos */
	.partner-logos {
		overflow-x: auto;
	}

	.cta-banner-inner {
		border-radius: var(--radius-xl);
		padding: 40px 20px;
	}

	.error-code {
		font-size: 5rem;
	}
}


/* ================================================================
   24. SCROLL REVEAL ANIMATIONS
================================================================ */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
	margin:28px 0px;
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Number counter animation */
.count-up {
	display: inline-block;
}

/* Smooth slider fill track */
.slider-fill-track {
	position: relative;
}

/* Platform tab content transitions */
.platform-content-panel {
	display: none;
}

.platform-content-panel.is-active {
	display: block;
	animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   SVG ILLUSTRATION STYLES
================================================================ */

/* ── Hero: decorative SVG sits absolutely behind the rate card ── */
.hero-visual {
	position: relative;
}

.hero-visual-svg {
	position: absolute;
	inset: -70px -50px;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
}

.hero-visual-svg svg {
	width: 100%;
	height: 100%;
}

.rate-card {
	position: relative;
	z-index: 1;
}

/* ── Illustration Section: SVG hub-and-spoke replaces 5-col grid ── */
.illustration-diagram-wrapper {
	display: block;
}

.illustration-hub-svg-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 8px 0 24px;
}

.illustration-hub-svg {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 880px;
	height: auto;
	min-width: 340px;
}

/* ── Scale Section: two-column stats + chart layout ── */
.scale-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	margin-top: 56px;
}

.scale-stats-list {
	display: flex;
	flex-direction: row;
	gap: 32px;
}

.scale-stat-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.scale-stat-num {
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	font-weight: var(--fw-black);
	color: var(--clr-primary);
	line-height: 1;
	letter-spacing: -0.02em;
}

.scale-stat-label {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--clr-text-muted);
	max-width: 26ch;
}

.scale-chart-svg-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}

.scale-chart-svg {
	width: 100%;
	max-width: 400px;
	height: auto;
	display: block;
}

/* ── Calculator: savings SVG beside intro text ── */
.calc-svg-wrap {
	margin-top: 24px;
}

.calc-illustration-svg {
	width: 170px;
	height: auto;
}

/* ── Responsive adjustments ── */
@media (max-width: 1024px) {
	.scale-body {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.scale-chart-svg-wrap {
		order: -1;
	}
}

@media (max-width: 768px) {
	.hero-visual-svg {
		inset: -20px -20px;
	}

	.illustration-hub-svg {
		min-width: 320px;
	}

	.scale-stat-num {
		font-size: 2rem;
		margin: 20px 0px 0px;
	}
	.scale-chart-svg{
		margin:auto;
	}
	.calc-illustration-svg {
		width: 120px;
	}
}