/* ==========================================================================
   Velocity by MedShift — design implementation (Figma: Velocity by Medshift)
   Palette: navy #122035 · orange #F8A581 · green #A7C877 · slate #5C6B80
   Type: Montserrat
   ========================================================================== */

:root {
	--vel-navy: #0E2037;
	--vel-navy-2: #16283f;
	--vel-navy-soft: #1d3252;
	--vel-navy-deep: #0e1b2e;
	--vel-slate: #41546b;
	--vel-slate-light: #74829A;
	--vel-orange: #f8a581;
	--vel-orange-deep: #e08758;
	--vel-green: #9ec96c;
	--vel-green-deep: #7fa84e;
	--vel-bg: #ffffff;
	--vel-bg-soft: #f5f7fa;
	--vel-line: #e6ebf1;
	--vel-menu-bg:#eaf3fb;
	--vel-radius: 16px;
	--vel-radius-btn: 10px;
	--vel-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--vel-shadow: 0 18px 50px -20px rgba(18, 32, 53, 0.25);
	--vel-shadow-soft: 0 10px 34px -18px rgba(18, 32, 53, 0.18);
	/* resting card elevation sampled from the Figma cards (~36px of falloff,
	   peak 6% over the section tint) */
	--vel-shadow-rest: 0 8px 24px -10px rgba(18, 32, 53, 0.14);
}

body {
	font-family: var(--vel-font);
	color: var(--vel-slate);
	background: var(--vel-bg);
	overflow-x: hidden;
}

.vel-main h1, .vel-main h2, .vel-main h3, .vel-main h4,
.vel-header, .vel-footer, .vel-modal {
	font-family: var(--vel-font);
}

.vel-container {
	max-width: 1128px;
	margin: 0 auto;
	padding: 0 24px;
}

.vel-container--narrow { max-width: 860px; }

.scaled-img img {
    scale: 1.25;
}

/* ---------- shared bits ---------- */

.vel-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--vel-slate-light);
	margin-bottom: 14px;
}

.vel-eyebrow--orange { color: var(--vel-orange); }
.vel-eyebrow--green { color: var(--vel-green-deep); }
.vel-eyebrow--light { color: rgba(255, 255, 255, 0.65); text-align: center; }

.vel-h2 {
	font-size: clamp(30px, 4vw, 40px);
	line-height: 1.15;
	font-weight: 700;
	color: var(--vel-navy);
	margin: 0 0 14px;
}

.vel-section-sub {
	font-size: 18px !important;
	line-height: 1.6;
	max-width: 640px;
	margin: 0 0 44px;
}

.vel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--vel-font);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	padding: 16px 24px;
	border-radius: var(--vel-radius-btn);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.vel-btn svg { width: 15px; height: 15px; }
.vel-btn:hover { transform: translateY(-1px); }

.vel-btn--navy { background: var(--vel-navy); color: #fff !important; }
.vel-btn--navy:hover { background: var(--vel-navy-2); color: #fff !important; }

.vel-btn--outline { background: #fff; color: var(--vel-navy) !important; border-color: #d4dbe4; }
.vel-btn--outline:hover { border-color: var(--vel-navy); }

.vel-btn--ghost { background: #fff; color: var(--vel-navy) !important; border-color: #e2e8f0; box-shadow: var(--vel-shadow-soft); }

.vel-btn--light { background: #fff; color: var(--vel-navy) !important; }
.vel-btn--ghost-light { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, 0.35); }
.vel-btn--ghost-light:hover { border-color: rgba(255, 255, 255, 0.7); }

.vel-btn--orange { background: var(--vel-orange); color: var(--vel-navy) !important; }
.vel-btn--orange:hover { background: #e59a72; }
.vel-btn--green { background: var(--vel-green); color: var(--vel-navy) !important; }
.vel-btn--green:hover { background: #9abd64; }

.vel-btn--sm { padding: 11px 18px; font-size: 13px; }

.vel-textlink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	font-weight: 700;
	color: var(--vel-navy) !important;
	text-decoration: none !important;
}

.vel-textlink svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.vel-textlink:hover svg { transform: translateX(3px); }

.vel-tag {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 5px 10px;
	border-radius: 999px;
}

.vel-tag--navy { background: var(--vel-navy); color: #fff; }
.vel-tag--green { background: #8fbc5c; color: #fff; }
.vel-tag--outline { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); padding: 6px 12px; font-size: 11px; }

/* ---------- wordmark ---------- */

.vel-wordmark {
	display: inline-flex;
	align-items: center;
	font-weight: 900;
	font-size: 21px;
	letter-spacing: 0.1em;
	color: var(--vel-navy);
	line-height: 1;
}

.vel-wordmark-e {
	display: inline-flex;
	flex-direction: column;
	gap: 2.5px;
	margin: 0 2px 0 1px;
}

.vel-wordmark-e i {
	display: block;
	width: 12px;
	height: 3px;
	background: currentColor;
	border-radius: 0.5px;
}

.vel-wordmark-e i:nth-child(2) { width: 10px; }

/* ==========================================================================
   Header
   ========================================================================== */

.vel-header { position: relative; z-index: 500; }

.vel-announce {
	background: var(--vel-navy-deep);
	color: #fff;
}

.vel-announce-inner {
	max-width: 1128px;
	margin: 0 auto;
	padding: 10px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	font-size: 13px;
}

.vel-announce-text { opacity: 0.9; font-weight: 500; }

.vel-announce-sep {
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, 0.25);
}

.vel-announce-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
}

.vel-announce-link svg { width: 12px; height: 12px; }

@media (max-width: 480px) {
	.vel-announce-inner { flex-wrap: wrap; row-gap: 2px; padding: 8px 16px; font-size: 12px; }
	.vel-announce-sep { display: none; }
}

.vel-nav-wrap {
	background: #fff;
	border-bottom: 1px solid var(--vel-line);
}

.vel-nav-wrap.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 600;
	box-shadow: 0 8px 30px -16px rgba(18, 32, 53, 0.25);
}

.vel-nav {
	max-width: 1128px;
	margin: 0 auto;
	padding: 0 12px;
	height: 72px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.vel-menu { display: flex; align-items: center; gap: 6px; }

.vel-menu-item { position: relative; }

.vel-menu-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: 0;
	font-family: var(--vel-font);
	/* 14px / 10px side padding rather than 14.5 / 12: Montserrat sets ~5% wider than
	   Mulish did and at the old metrics the four items filled their whole grid track,
	   leaving zero gap before the centred logo. */
	font-size: 14.5px;
	font-weight: 500;
	color: var(--vel-slate);
	padding: 10px 10px;
	cursor: pointer;
	transition: 0.3s;
}
/* No font-weight change on hover: 400 -> 500 makes the label physically wider,
   which shoves the rest of the nav right. The emphasis is done with stacked
   text-shadows instead (see below), which thicken the strokes without altering
   a single glyph advance. */
.vel-menu-link:hover{
	color: var(--vel-slate);
}
/* Top-level items that point at a real page are <a> rather than <button>
   (see site-header.php). Everything above already applies; these only undo
   what the parent theme's anchor styles would otherwise add. */
.vel-menu-link--page,
.vel-menu-link--page:hover,
.vel-menu-link--page:focus {
	text-decoration: none !important;
	color: var(--vel-slate);
}
/* Caret is a brand SVG pair (normal / active) swapped as a background image, so
   the two states can differ in more than color. Full opacity: the artwork
   carries its own weight, unlike the old currentColor chevron. */
.vel-caret {
	display: inline-block;
	width: 13px;
	height: 13px;
	flex: none;
	background: url('/wp-content/uploads/2026/08/normal-arrow.svg') no-repeat center / contain;
	transition: transform 0.18s ease;
}

/* Open: swap to the active artwork and flip it so it points up. */
.vel-menu-item.is-open .vel-caret,
.vel-mobile-group.is-open .vel-caret {
	background-image: url('/wp-content/uploads/2026/08/active-arrow.svg');
	transform: rotate(180deg);
}

/* Preload the active art so the first open doesn't flash an empty box. Painted
   on the caret itself at zero size, so it adds no box to the nav's flex row. */
.vel-caret::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	background: url('/wp-content/uploads/2026/08/active-arrow.svg') no-repeat;
}

/* Hover/open emphasis. Stacked sub-pixel text-shadows fake a heavier weight so the
   item does not change width and the nav never reflows on hover. */
.vel-menu-link:hover,
.vel-menu-link:focus-visible,
.vel-menu-item.is-open > .vel-menu-link {
	text-shadow: 0 0 0.45px currentColor, 0 0 0.45px currentColor, 0 0 0.45px currentColor;
}

/* (caret hover opacity dropped — the SVG pair carries its own states) */

.vel-logo { text-align: center; }
.vel-logo a { text-decoration: none !important; }

/* Brand logotype image. Dimensions are pinned so a theme-level `img{height:auto}`
   cannot resize it, and the source is 3x so it stays sharp on retina. */
.vel-logo-img {
	display: inline-block;
	vertical-align: middle;
	width: 140px;
	height: 27px;
}

.vel-nav-cta { text-align: right; }
.vel-nav-cta .vel-btn { padding: 13px 20px; }

/* dropdowns */

/* Always laid out as flex (display can't transition — toggling it is what made
   the menu snap open). Hidden state is opacity + a small lift instead, with
   visibility taking it out of the tab order and pointer-events letting hover
   through to the page behind. visibility is delayed on close so it stays
   visible for the duration of the fade, then flips instantly on open. */
.vel-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 300px;
	background: #fff;
	border: 1px solid var(--vel-line);
	border-radius: var(--vel-radius);
	box-shadow: var(--vel-shadow);
	padding: 22px;
	display: flex;
	gap: 26px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.vel-dropdown--wide { min-width: 620px; }

.vel-menu-item.is-open .vel-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.vel-dropdown-col { min-width: 260px; flex: 1; }

.vel-dropdown-heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--vel-slate-light);
	margin-bottom: 12px;
}

.vel-dropdown-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px;
	margin: 0 -10px;
	border-radius: 10px;
	text-decoration: none !important;
}

.vel-dropdown-item:hover { background: var(--vel-menu-bg); }

.vel-dd-icon {
	flex: 0 0 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--vel-menu-bg);
	border-radius: 9px;
	color: var(--vel-navy);
}

.vel-dd-icon svg { width: 17px; height: 17px; }

.vel-dd-text { display: flex; flex-direction: column; gap: 2px; }
.vel-dd-text strong { font-size: 15px; font-weight: 600; color: var(--vel-navy); }
.vel-dd-text em { font-style: normal; font-weight: 600; font-size: 12px; color: var(--vel-slate-light); line-height: 1.45; }

/* burger + mobile */

.vel-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }

.vel-burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--vel-navy);
	margin: 5px 0;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.vel-mobile-panel { display: none; }

@media (max-width: 1024px) {
	.vel-menu, .vel-nav-cta { display: none; }
	.vel-burger { display: block; justify-self: start; }
	.vel-nav { grid-template-columns: 48px 1fr 48px; height: 62px; }
	.vel-logo { grid-column: 2; }

	/* The drawer slides open by animating a 0fr -> 1fr grid row, which resolves
	   to the natural height of the content — no magic max-height to keep in sync
	   with the menu length, and no snap from a display toggle. The inner
	   wrapper owns the padding: padding on a collapsed row would still paint. */
	.vel-mobile-panel {
		display: grid;
		grid-template-rows: 0fr;
		background: #fff;
		transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1),
			opacity 0.32s ease, visibility 0s linear 0.32s;
		opacity: 0;
		visibility: hidden;
	}

	.vel-mobile-panel-inner {
		min-height: 0;
		overflow: hidden;
	}

	.vel-mobile-panel.is-open {
		grid-template-rows: 1fr;
		border-top: 1px solid var(--vel-line);
		opacity: 1;
		visibility: visible;
		transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1),
			opacity 0.22s ease, visibility 0s;
	}

	.vel-mobile-panel.is-open .vel-mobile-panel-inner {
		padding: 10px 24px 24px;
		max-height: calc(100vh - 110px);
		overflow: auto;
	}

	.vel-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.vel-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.vel-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

.vel-mobile-group { border-bottom: 1px solid var(--vel-line); }

.vel-mobile-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: none;
	border: 0;
	font-family: var(--vel-font);
	font-size: 15.5px;
	font-weight: 700;
	color: var(--vel-navy);
	padding: 15px 0;
	cursor: pointer;
}

/* Same 0fr -> 1fr slide as the drawer. The links live in .vel-mobile-sub-inner
   so the collapsing row can clip them; bottom padding moves to the open state
   so a closed group contributes no height. */
.vel-mobile-sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.vel-mobile-sub-inner {
	min-height: 0;
	overflow: hidden;
}

.vel-mobile-group.is-open .vel-mobile-sub { grid-template-rows: 1fr; }
.vel-mobile-group.is-open .vel-mobile-sub-inner { padding-bottom: 12px; }
/* caret open state (swap + flip) is handled with the desktop rule above */

/* Icons match the desktop dropdown rows (.vel-dd-icon). Flex rather than block
   so the tile and the label sit side by side; the label wraps against the tile
   instead of under it, which is why the tile is flex:0 0 and never shrinks. */
.vel-mobile-sub a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0 9px 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--vel-slate) !important;
	text-decoration: none !important;
}

.vel-mobile-sub a .vel-dd-icon {
	flex: 0 0 28px;
	height: 28px;
	border-radius: 8px;
}

/* The desktop rule sizes `svg`, but these icons are <img> — without an explicit
   size they paint at the SVG's intrinsic dimensions and blow out the tile. */
.vel-mobile-sub a .vel-dd-icon img {
	width: auto;
	height: 14px;
	max-width: 15px;
	object-fit: contain;
}

.vel-mobile-cta { width: 100%; margin-top: 18px; }

/* Header open/close animations resolve instantly for users who ask for less
   motion — the end states are unchanged, so everything still shows and hides. */
@media (prefers-reduced-motion: reduce) {
	.vel-dropdown,
	.vel-menu-item.is-open .vel-dropdown,
	.vel-mobile-panel,
	.vel-mobile-panel.is-open,
	.vel-mobile-sub {
		transition: none;
	}

	.vel-dropdown { transform: none; }
}

/* ==========================================================================
   Modal
   ========================================================================== */

.vel-modal { position: fixed; inset: 0; z-index: 900; display: none; padding-inline: 12px; }
.vel-modal.is-open { display: block; }

.vel-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(18, 32, 53, 0.55);
	backdrop-filter: blur(3px);
}

.vel-modal-card {
	position: relative;
	max-width: 660px;
	margin: 9vh auto 0;
	background: #fff;
	border-radius: 20px;
	padding: 40px 44px 44px;
	box-shadow: var(--vel-shadow);
}

.vel-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--vel-bg-soft);
	border: 0;
	border-radius: 50%;
	color: var(--vel-navy);
	cursor: pointer;
}

.vel-modal-close svg { width: 15px; height: 15px; }

.vel-modal-title { font-size: 24px; font-weight: 600; color: var(--vel-navy); margin: 0 0 8px; }
.vel-modal-sub { font-size: 18px; margin: 0 0 26px; }

.vel-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.vel-modal-product {
	border: 1px solid var(--vel-line);
	border-radius: var(--vel-radius);
	padding: 24px;
}

.vel-modal-product h3 { font-size: 24px; font-weight: 500; color: var(--vel-navy); margin: 0 0 8px; }
.vel-modal-product p { font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.vel-modal-product .vel-btn { padding: 12px 18px; font-size: 13.5px; }

@media (max-width: 640px) {
	.vel-modal-card { margin: 4vh 16px 0; padding: 30px 24px; }
	.vel-modal-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.vel-hero {
	background: linear-gradient(180deg, #fbfcfe 0%, #f7f9fc 100%);
	padding: 76px 0 0;
	text-align: center;
	overflow: hidden;
}

.vel-hero .vel-eyebrow { margin-bottom: 18px; }

.vel-hero-title {
	font-size: clamp(38px, 6vw, 64px);
	line-height: 1.08;
	font-weight: 800;
	color: var(--vel-navy);
	margin: 0 auto 22px;
	letter-spacing: -0.01em;
}

.vel-hero-sub {
	max-width: 560px;
	margin: 0 auto 26px;
	font-size: 17px;
	line-height: 1.65;
}

.vel-hero-pills { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }

.vel-pill {
	background: #eceff4;
	color: var(--vel-slate);
	font-size: 12px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 999px;
}

.vel-hero-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }

.vel-hero-trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--vel-slate);
	margin-bottom: 54px;
}

.vel-avatars { display: inline-flex; }

.vel-avatars i {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid #fff;
	margin-left: -8px;
	background: linear-gradient(135deg, #c3ceda, #8fa1b8);
}

.vel-avatars i:first-child { margin-left: 0; }
.vel-avatars i:nth-child(2) { background: linear-gradient(135deg, #d8c4b2, #b08e77); }
.vel-avatars i:nth-child(3) { background: linear-gradient(135deg, #c5d3b4, #93ad74); }
.vel-avatars i:nth-child(4) { background: linear-gradient(135deg, #b6c4d8, #7288a5); }

.vel-hero-visual { position: relative; max-width: 880px; margin: 0 auto; }

.vel-hero-dash {
	height: 420px;
	border-radius: 20px 20px 0 0;
	background: linear-gradient(135deg, #21395d 0%, #16283f 55%, #122035 100%);
	box-shadow: var(--vel-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
}

.vel-hero-bars { display: flex; align-items: flex-end; gap: 9px; }

.vel-hero-bars i {
	width: 13px;
	height: var(--h);
	background: rgba(255, 255, 255, 0.85);
	border-radius: 3px;
	animation: vel-grow 1s ease both;
}

@keyframes vel-grow { from { transform: scaleY(0.2); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

.vel-float {
	position: absolute;
	background: #fff;
	border-radius: 14px;
	box-shadow: var(--vel-shadow-soft);
	padding: 14px 18px;
	text-align: left;
}

.vel-float--orders { top: -26px; right: -34px; }
.vel-float--orders strong { display: block; font-size: 19px; font-weight: 800; color: var(--vel-green-deep); }
.vel-float--orders span { font-size: 11.5px; color: var(--vel-slate); }

.vel-float--comm { bottom: 42px; left: -46px; }
.vel-float-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--vel-navy); margin-bottom: 8px; }

.vel-mini-bars { display: inline-flex; align-items: flex-end; gap: 4px; }
.vel-mini-bars i { width: 6px; height: var(--h); background: #d7dfe9; border-radius: 2px; }
.vel-mini-bars i:nth-child(4), .vel-mini-bars i:nth-child(5) { background: #9db1c9; }

.vel-logo-strip {
	display: flex;
	justify-content: center;
	gap: clamp(24px, 5vw, 56px);
	flex-wrap: wrap;
	padding: 30px 24px 34px;
	background: #fff;
	margin: 0 calc(50% - 50vw);
}

.vel-logo-strip span {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #b9c2ce;
}

@media (max-width: 900px) {
	.vel-float--orders { right: 6px; }
	.vel-float--comm { left: 6px; }
	.velp-ca-cta-card { grid-template-columns: 1fr; text-align: center; }
	.velp-ca-cta-card p { margin: 0 auto; }
}

@media (max-width: 560px) {
	.vel-hero-title { font-size: 34px; }
	.vel-hero-title br { display: none; }
	.vel-hero { padding-top: 52px; }
	.vel-hero-dash { height: 300px; }
}

/* ==========================================================================
   Product family
   ========================================================================== */

.vel-family { background: var(--vel-bg-soft); padding: 84px 0 96px; text-align: center; }

.vel-family-toggle {
	display: inline-flex;
	gap: 8px;
	margin: 10px 0 40px;
}

.vel-toggle-pill {
	font-family: var(--vel-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--vel-navy);
	background: #fff;
	border: 1px solid var(--vel-line);
	border-radius: 999px;
	padding: 11px 26px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.vel-toggle-pill.is-active { background: var(--vel-navy); color: #fff; border-color: var(--vel-navy); }

.vel-family-card[hidden] { display: none; }

.vel-family-card {
	background: #fff;
	border-radius: 20px;
	box-shadow: var(--vel-shadow-soft);
	padding: clamp(28px, 4.5vw, 56px);
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	text-align: left;
}

.vel-family-copy .vel-eyebrow { margin-bottom: 10px; }

.vel-family-copy h3 {
	font-size: clamp(24px, 3vw, 28px);
	font-weight: 500;
	color: var(--vel-navy);
	margin: 0 0 12px;
}

.vel-family-copy p { font-size: 18px; line-height: 1.6; margin: 0 0 20px; }

.vel-family-visual {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	background: #f2f5f8;
	border-radius: var(--vel-radius);
	padding: 20px;
}

.vel-product-mini {
	position: relative;
	background: #fff;
	border-radius: var(--vel-radius);
	padding: 48px 20px 20px;
	box-shadow: var(--vel-shadow-soft);
	text-align: left;
}

.vel-product-mini .vel-tag { position: absolute; top: 14px; right: 14px; }

.vel-product-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	margin: 0 auto 16px;
}

.vel-product-mini--commerce .vel-product-icon { background: #eff2f6; color: var(--vel-navy); }
.vel-product-mini--lending .vel-product-icon { background: #eef5e2; color: var(--vel-green-deep); }

.vel-accent-orange { background: #fbeee4; color: var(--vel-orange-deep); }
.vel-accent-green { background: #eef5e2; color: var(--vel-green-deep); }

.vel-product-icon svg { width: 42px; height: 42px; }
.vel-card-icon svg { width: 24px; height: 24px; }

.vel-product-mini h4 {
	font-size: 16px;
	font-weight: 800;
	color: var(--vel-navy);
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #eef1f5;
}

.vel-product-mini ul { list-style: none; margin: 0 0 14px; padding: 0; }

.vel-product-mini li {
	position: relative;
	padding: 4px 0 4px 24px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--vel-slate);
}

.vel-product-mini li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: var(--vel-green);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E");
	background-position: center;
	background-size: 9px;
	background-repeat: no-repeat;
}

.vel-product-mini--commerce li::before { background-color: var(--vel-navy); }

.vel-stat-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--vel-line);
	border-radius: 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--vel-slate-light);
	padding: 8px 12px;
	white-space: nowrap;
}

.vel-stat-chip strong { color: var(--vel-navy); font-weight: 800; }

.vel-stat-icon { display: inline-flex; color: var(--vel-navy); }
.vel-stat-icon svg { width: 14px; height: 14px; }
.vel-product-mini--lending .vel-stat-icon { color: var(--vel-green-deep); }

/* lending panel visual */

.vel-family-visual--lending { grid-template-columns: auto auto; justify-content: center; align-items: center; }

.vel-phone {
	position: relative;
	width: 170px;
	height: 320px;
	background: #fff;
	border: 6px solid var(--vel-navy);
	border-radius: 28px;
	padding: 34px 14px 14px;
	box-shadow: var(--vel-shadow-soft);
}

.vel-phone-notch {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 54px;
	height: 9px;
	border-radius: 999px;
	background: var(--vel-navy);
}

.vel-phone-line {
	display: block;
	height: 9px;
	border-radius: 4px;
	background: #edf1f6;
	margin-bottom: 9px;
}

.vel-phone-line.short { width: 60%; }

.vel-phone-line--title {
	width: 55%;
	height: 11px;
	background: #d9e0e9;
	margin-bottom: 14px;
}

.vel-approved-card {
	background: #fff;
	border-radius: var(--vel-radius);
	box-shadow: var(--vel-shadow);
	padding: 24px;
	max-width: 240px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	text-align: left;
	margin-left: -34px;
}

.vel-approved-check { color: var(--vel-green-deep); }
.vel-approved-check svg { width: 26px; height: 26px; }
.vel-approved-title { font-size: 17px; font-weight: 800; color: var(--vel-navy); }
.vel-approved-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vel-slate-light); }
.vel-approved-amount { font-size: 30px; font-weight: 800; color: var(--vel-green-deep); }
.vel-approved-note { font-size: 11.5px; line-height: 1.5; color: var(--vel-slate); margin-bottom: 8px; }

@media (max-width: 900px) {
	.vel-family-card { grid-template-columns: 1fr; }
	.vel-family-visual { max-width: 460px; margin: 0 auto; }
	.vel-lend-visual { padding: 32px 24px 32px 150px; }
	.vel-lend-float { left: 12px; width: 190px; }
}

@media (max-width: 480px) {
	.vel-lend-visual { padding: 24px; }
	.vel-lend-float { position: static; width: auto; margin-top: 16px; filter: none; }
	.vel-lend-visual .vel-phone--lg { margin: 0 auto; }
}

@media (max-width: 560px) {
	.vel-family-visual { grid-template-columns: 1fr; }
	.vel-family-visual--lending { grid-template-columns: 1fr; justify-items: center; }
	.vel-approved-card { margin: -30px 0 0; }
}

/* ==========================================================================
   Feature cards
   ========================================================================== */

.vel-features { padding: 96px 0; text-align: center; }
.vel-features--soft { background: var(--vel-bg-soft); }
.vel-features .vel-section-sub { margin-left: auto; margin-right: auto; }

.vel-cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }

.vel-card {
	background: #fff;
	border: 1px solid var(--vel-line);
	border-radius: var(--vel-radius);
	padding: 28px;
	box-shadow: var(--vel-shadow-rest);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

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

.vel-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	margin-bottom: 18px;
}

.vel-card h3 { font-size: 14px; font-weight: 600; color: var(--vel-navy); margin: 0 0 10px; }
a.vel-card:hover h3{color:var(--vel-orange-deep);}
a.vel-card-green:hover h3{color:var(--vel-green-deep);}
.vel-card p { font-size: 13px; line-height: 1.62; margin: 0; }

@media (max-width: 900px) { .vel-cards-3 { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

/* ==========================================================================
   Why sections
   ========================================================================== */

.vel-why { padding: 96px 0; }

.vel-why-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}

.vel-h2--left { text-align: left; margin-bottom: 30px; }

.vel-why-item { margin-bottom: 24px; }
.vel-why-item h3 { font-size: 24px; font-weight: 600;  color: var(--vel-navy); margin: 0 0 7px; }
.vel-why-item p { font-size: 16px; line-height: 1.65; margin: 0; }

.vel-why-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }

.vel-roi-card {
	background: linear-gradient(160deg, var(--vel-navy-soft) 0%, var(--vel-navy) 90%);
	border-radius: var(--vel-radius);
	box-shadow: var(--vel-shadow);
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.vel-roi-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }
.vel-roi-number { font-size: 46px; font-weight: 800; color: #fff; line-height: 1; }
.vel-roi-unit { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.75); }

.vel-roi-note { grid-column: 1 / -1; font-size: 11.5px; color: var(--vel-slate-light); margin: 4px 0 0; }

.vel-why-visual--phone { display: flex; justify-content: center; }

.vel-lend-visual {
	position: relative;
	background: #fff;
	border-radius: 20px;
	box-shadow: var(--vel-shadow-soft);
	padding: 44px 44px 44px 220px;
}

.vel-phone--lg {
	width: 230px;
	height: 440px;
	border-radius: 34px;
	padding: 44px 18px 18px;
}

.vel-lend-float {
	position: absolute;
	top: 90px;
	left: 36px;
	width: 210px;
	filter: drop-shadow(0 14px 30px rgba(18, 32, 53, 0.16));
}

.vel-quote-box {
	background: #fff;
	border: 1px solid var(--vel-line);
	border-radius: 14px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 12px;
}

.vel-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	padding: 5px 10px;
	width: fit-content;
}

.vel-chip svg { width: 11px; height: 11px; }
.vel-chip--blue { background: #e7eef9; color: #3d6db5; }
.vel-chip--green { background: #eef5e2; color: var(--vel-green-deep); }
.vel-chip--wide { width: 100%; justify-content: center; padding: 8px 10px; }

.vel-quote-amount { font-size: 26px; font-weight: 800; color: var(--vel-navy); }
.vel-quote-amount em { font-style: normal; font-size: 13px; color: var(--vel-slate); font-weight: 600; }
.vel-quote-term { font-size: 12px; font-weight: 600; color: var(--vel-slate); }

.vel-avail-row {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--vel-line);
	border-radius: 12px;
	padding: 10px 12px;
	margin-bottom: 12px;
}

.vel-avail-icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #e7eef9;
	color: #3d6db5;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.vel-avail-text { display: flex; flex-direction: column; }
.vel-avail-text strong { font-size: 14.5px; font-weight: 800; color: var(--vel-navy); }
.vel-avail-text em { font-style: normal; font-size: 11px; color: var(--vel-slate); }

@media (max-width: 900px) {
	.vel-why-grid { grid-template-columns: 1fr; }
	.vel-why-visual { max-width: 460px; }
}

@media (max-width: 560px) { .vel-why-visual { grid-template-columns: 1fr; } }

/* ==========================================================================
   Integrations
   ========================================================================== */

.vel-integrations { padding: 96px 0; text-align: center; }
.vel-integrations .vel-section-sub { margin-left: auto; margin-right: auto; }

.vel-integration-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }

.vel-integration-grid span,
.velp-cb-int-logos span {
	background: var(--vel-bg-soft);
	border-radius: 12px;
	padding: 22px 10px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--vel-slate);
	transition: all 0.15s ease, color 0.15s ease;
}

.vel-integration-grid span:hover,
.velp-cb-int-logos span:hover { background: #ecf0f5; color: var(--vel-navy); transform:translateY(-2px); box-shadow:0 8px 20px rgba(18, 32, 53, 0.08);}

@media (max-width: 900px) { .vel-integration-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .vel-integration-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Stats band
   ========================================================================== */

.vel-stats { background: var(--vel-navy); padding: 72px 0; }

.vel-stats .vel-eyebrow { margin-bottom: 34px; }

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

.vel-stat { text-align: center; padding: 0 20px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.vel-stat:first-child { border-left: 0; }

.vel-stat strong { display: block; font-size: clamp(34px, 4.4vw, 54px); font-weight: 700; color: #fff; line-height: 1.05; margin-bottom: 8px; }
.vel-stat span { display: block; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.9); }
.vel-stat em { display: block; font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); margin-top: 3px; }

@media (max-width: 700px) {
	.vel-stats-grid { grid-template-columns: 1fr; gap: 34px; }
	.vel-stat { border-left: 0; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.vel-testimonials { background: var(--vel-bg-soft); padding: 96px 0; text-align: center; }

.vel-quote-track {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 44px;
	text-align: left;
}

.vel-quote-card {
	background: #fff;
	border-radius: var(--vel-radius);
	/* Figma drop shadow: X 0, Y 18, blur 40, spread 0, #0E2037 @ 10% */
	box-shadow: 0 18px 40px rgba(14, 32, 55, 0.1);
	padding: 34px 34px 30px;
	margin: 0;
}

.vel-quote-mark { font-size: 44px; font-weight: 800; line-height: 0.5; color: #e3e9f1; display: block; margin-bottom: 40px; }

.vel-quote-card blockquote {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	font-size: 21px;
	line-height: 1.55;
	font-weight: 700;
	color: var(--vel-navy);
	background: none;
}

.vel-quote-card figcaption strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--vel-navy); }
.vel-quote-card figcaption span { font-size: 12px; color: var(--vel-slate); font-weight: 500; }

.vel-quote-dots { display: flex; justify-content: center; gap: 7px; margin-top: 32px; }

.vel-quote-dots button {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	border: 0;
	padding: 0;
	background: #c7d0dc;
	cursor: pointer;
	transition: width 0.2s ease, background 0.2s ease;
}

.vel-quote-dots button.is-active { width: 22px; background: var(--vel-navy); }

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

/* ==========================================================================
   FAQ
   ========================================================================== */

.vel-faq { padding: 96px 0 80px; text-align: center; }

.vel-faq-list { text-align: left; margin-top: 34px; }

.vel-faq-item { border-bottom: 1px solid var(--vel-line); padding: 4px 0; }

.vel-faq-item summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	font-size: 18px;
	font-weight: 500;
	color: var(--vel-navy);
	cursor: pointer;
}

.vel-faq-item summary::-webkit-details-marker { display: none; }

.vel-faq-toggle { position: relative; flex: 0 0 16px; height: 16px; }

.vel-faq-toggle::before, .vel-faq-toggle::after {
	content: '';
	position: absolute;
	background: var(--vel-slate-light);
	border-radius: 1px;
}

.vel-faq-toggle::before { left: 0; right: 0; top: 7px; height: 2px; }
.vel-faq-toggle::after { top: 0; bottom: 0; left: 7px; width: 2px; transition: transform 0.18s ease; }

.vel-faq-item[open] .vel-faq-toggle::after { transform: scaleY(0); }

.vel-faq-item p { margin: -6px 0 20px; font-size: 14.5px; line-height: 1.65; max-width: 92%; }

/* Slide open/closed. <details> can't be transitioned natively — velocity.js wraps
   the answer in .vel-faq-answer and animates its height, holding [open] on for the
   duration of the close. The wrapper only clips while a slide is in flight so open
   items keep their natural height on resize. */
.vel-faq-answer { overflow: hidden; }
.vel-faq-item.is-sliding .vel-faq-answer { transition: height 0.28s ease; }

@media (prefers-reduced-motion: reduce) {
	.vel-faq-item.is-sliding .vel-faq-answer { transition: none; }
}

/* ==========================================================================
   CTA
   ========================================================================== */

.vel-cta { padding: 64px 0 110px; }

.vel-cta-card {
	position: relative;
	background: linear-gradient(150deg, var(--vel-navy-soft) 0%, var(--vel-navy) 70%);
	border-radius: 24px;
	box-shadow: var(--vel-shadow);
	padding: clamp(48px, 7vw, 76px) 32px;
	text-align: center;
	overflow: hidden;
}

.vel-cta-card h2 {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	color: #fff;
	margin: 0 0 14px;
}

.vel-cta-card p,
.vel-cta-card .elementor-widget-text-editor p {
	max-width: 520px;
	margin: 0 auto 28px;
	font-size: 18px;
	line-height: 1.6;
	color: #d7efff;
}

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

.vel-cta .vel-cta-actions .vel-btn--outline{
	background: transparent !important;
	color: #fff !important;
}
.vel-cta .vel-cta-actions .vel-btn--outline:hover{
	border: 1px solid #fff;
}


.velp-ca-cta-card {
	position: relative;
	background: linear-gradient(150deg, var(--vel-navy-soft) 0%, var(--vel-navy) 70%);
	border-radius: 24px;
	box-shadow: var(--vel-shadow);
	padding: clamp(40px, 6vw, 60px);
	display: grid;
	grid-template-columns: 1.3fr auto;
	gap: clamp(24px, 4vw, 44px);
	align-items: center;
	overflow: hidden;
}

.velp-ca-cta-card h2 { font-size: clamp(26px, 3.6vw, 24px) !important; font-weight: 600; color: #fff !important; margin: 0 0 12px !important; }
.velp-ca-cta-card p { max-width: 460px; margin: 0; font-size: 15px !important; line-height: 1.6; color: rgba(255, 255, 255, 0.72) !important; }
.velp-ca-cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.velp-ca-cta-actions .vel-btn { white-space: nowrap; }

/* the top CTA button is an outline button on navy in the design, not a white fill */
.velp-ca-cta-actions .vel-btn--light {
	background: transparent;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.55);
}

.velp-ca-cta-actions .vel-btn--light:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; }

/* Figma: four white bars at 12% opacity, pill-rounded, 11px wide on a 10px gap,
   sharing a baseline inside the card. The markup ships three <i> elements, so the
   fourth (tallest, clipped by the card edge) is the container's ::after. */
.vel-cta-deco {
	position: absolute;
	right: -2px;
	bottom: 40px;
	display: flex;
	align-items: flex-end;
	gap: 10px;
}

.vel-cta-deco i,
.vel-cta-deco::after {
	width: 11px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.12);
}

/* The fourth bar is a pseudo-element only where the markup ships three <i>. */
.vel-cta-deco:not(:has(i:nth-child(4)))::after { content: ''; height: 120px; }
.vel-cta-deco i:nth-child(1) { height: 50px; }
.vel-cta-deco i:nth-child(2) { height: 100px; }
.vel-cta-deco i:nth-child(3) { height: 80px; }
.vel-cta-deco i:nth-child(4) { height: 120px; }

@media (max-width: 900px) {
	.velp-ca-cta-card { grid-template-columns: 1fr; text-align: center; }
	.velp-ca-cta-actions { align-items: center; }
	.velp-ca-cta-card p { margin: 0 auto; }
}

@media (max-width: 560px) {
	.velp-ca-cta-actions .vel-btn { width: 100%; }
}


/* ==========================================================================
   Footer
   ========================================================================== */

/* Figma's footer field is a shade deeper than --vel-navy (#122035). */
.vel-footer { background: #0e2037; color: rgba(255, 255, 255, 0.78); }

.vel-footer-top {
	display: grid;
	grid-template-columns: 1.2fr 2fr;
	gap: clamp(32px, 6vw, 90px);
	padding: 64px 0 48px;
}

.vel-footer-logo { text-decoration: none !important; display: inline-block; margin-bottom: 16px; }
.vel-footer-logo .vel-wordmark { color: #fff; }

.vel-footer-brand p { font-size: 14px; line-height: 1.6; margin: 0 0 20px; color: rgba(255, 255, 255, 0.66); }

.vel-footer-form { display: flex; gap: 10px; max-width: 400px;}

.vel-footer-form input {
	flex: 1;
	min-width: 0;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--vel-radius-btn);
	color: #fff;
	font-family: var(--vel-font);
	font-size: 13.5px;
	/* sierra-global pins input[type=email] to height:var(--component-height,50px);
	   both footer controls are 36px in Figma, and the flex row stretches the
	   Subscribe button to whatever the input resolves to. */
	height: auto;
	line-height: 1.2;
	padding: 9px 14px;
}

.vel-footer-form input::placeholder { color: rgba(255, 255, 255, 0.45); }

/* sierra-global's [type=submit] sets min-height:var(--component-height) (50px),
   which a class selector cannot beat by specificity alone — reset it. */
.vel-footer-form .vel-btn {
	min-height: 0;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	background: #d7efff;
	color: #0e2037 !important;
}

.vel-footer-form-note { font-size: 13px; color: var(--vel-green); margin: 10px 0 0; }

/* The newsletter is a HubSpot embed, so none of the .vel-footer-form rules
   above reach it — it renders HubSpot's own .hs-form markup. */
.vel-footer .hs-form { max-width: 400px; }

.vel-footer .hs-form input[type="text"],
.vel-footer .hs-form input[type="email"] {
	width: 100%;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--vel-radius-btn);
	color: #fff;
	font-family: var(--vel-font);
	font-size: 13.5px;
	height: auto;
	line-height: 1.2;
	padding: 9px 14px;
}

.vel-footer .hs-form input::placeholder { color: rgba(255, 255, 255, 0.45); }

.vel-footer .hs-form .hs-form-field { margin-bottom: 10px; }
.vel-footer .hs-form .hs-form-field > label { display: none; }

/* Colour lives on the site-wide .hs-form input.hs-button rule below; only
   footer-specific sizing belongs here. */
.vel-footer .hs-form .hs-button,
.vel-footer .hs-form .hs-button.primary {
	border: none;
	border-radius: var(--vel-radius-btn);
	font-family: var(--vel-font);
	font-size: 13px;
	font-weight: 600;
	min-height: 0;
	padding: 10px 18px;
	cursor: pointer;
}

.vel-footer .hs-form .hs-error-msg,
.vel-footer .hs-form .hs-main-font-element { font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }


.vel-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.vel-footer-heading {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 16px;
}

.vel-footer-col a {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6) !important;
	text-decoration: none !important;
	padding: 5px 0;
}

.vel-footer-col a:hover { color: #fff !important; }

.vel-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 22px 0 26px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.5);
}

.vel-footer-legal { display: inline-flex; gap: 8px; align-items: center; }
.vel-footer-legal a { color: rgba(255, 255, 255, 0.65) !important; text-decoration: none !important; }
.vel-footer-legal a:hover { color: #fff !important; }

@media (max-width: 900px) {
	.vel-footer-top { grid-template-columns: 1fr; }
	.vel-footer-cols { grid-template-columns: repeat(2, 1fr); }
	.scaled-img img { scale: 1; }
	.vel-modal-title {font-size: 22px;}
	.vel-modal-sub {font-size: 16px;}
	.vel-modal-product h3 {font-size: 20px;}
	.vel-cta {padding: 0 0 48px;}
    .vel-why,.vel-features,.vel-faq{padding-block:48px;}
	.shopify-badge svg {max-width: 100% !important;}
}

/* ==========================================================================
   Theme resets — keep Sierra parent styles out of the Velocity shell
   ========================================================================== */

.vel-header + .site-content, .site-content { background: transparent; }

.vel-main { display: block; }

.vel-main :is(h1, h2, h3, h4) { letter-spacing: -0.01em; }

body.home .page-header, body.home .title-bar { display: none; }

/* interior page title bar */
.page-header.title-bar-text-center { background: var(--vel-bg-soft); padding: 48px 0 44px; }
.page-header .entry-title { font-family: var(--vel-font); font-weight: 800; color: var(--vel-navy); letter-spacing: -0.01em; }
.page-header .breadcrumbs, .page-header .breadcrumbs a { font-family: var(--vel-font); font-size: 13px; color: var(--vel-slate); }
.site-content .entry-content { font-family: var(--vel-font); }

/* FAQ answer bullet list (application-status answer) — matches .vel-faq-item p metrics */
.vel-faq-item ul { margin: -4px 0 20px; padding-left: 20px; font-size: 16px; line-height: 1.65; max-width: 92%; }
.vel-faq-item ul li { margin: 0 0 4px; }

/* Scroll-to-top (parent theme .back-to-top). Its .primary-color paints the
   arrow and the progress ring navy, so both vanish over the stats band, the CTA
   card and the footer — all dark grounds. Make it a solid light pill instead:
   opaque so it never picks up the section behind it, arrow and ring navy. */
.back-to-top.primary-color,
.back-to-top {
	background: #fff !important;
	color: var(--vel-navy) !important;
	border: 1px solid rgba(18, 32, 53, 0.12) !important;
	box-shadow: 0 6px 20px rgba(14, 27, 46, 0.22) !important;
	border-radius: 50% !important;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* Arrow glyph is an icon-font <span>; keep it on the same ink as the pill. */
.back-to-top .icon-arrow-up,
.back-to-top.primary-color .icon-arrow-up {
	color: var(--vel-navy) !important;
}

/* The <circle> is the scroll-progress ring — stroked, never filled. */
.back-to-top svg circle,
.back-to-top.primary-color svg circle {
	stroke: var(--vel-navy) !important;
	fill: none !important;
	opacity: 0.85;
}

/* Hover stays light — a navy fill would disappear into the footer and the
   stats band, which are navy themselves. Deepen the shadow for the lift
   instead, and keep the arrow/ring navy so contrast never depends on the
   section behind it. */
.back-to-top:hover {
	background: #fff !important;
	border-color: rgba(18, 32, 53, 0.22) !important;
	box-shadow: 0 10px 26px rgba(14, 27, 46, 0.32) !important;
	transform: translateY(-2px);
}

.back-to-top:hover .icon-arrow-up { color: var(--vel-navy) !important; }
.back-to-top:hover svg circle { stroke: var(--vel-navy) !important; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.back-to-top { transition: none; }
	.back-to-top:hover { transform: none; }
}

.back-to-top.scroll-position-style svg {
    top: -1px !important;
    left: -1px !important;
}

@media (max-width: 600px) {
	.velp-ca-hero-grid .order-animation-wrap {
		max-height: 400px !important;
		height: 400px !important;
	}
}

.hs-form-frame {
    max-width: 800px;
    margin: auto;
    background: #f3f7fc;
    border-radius: 24px;
    margin-block: 48px;
}

@media (max-width: 900px) {
	.hs-form-frame {
		margin-inline: 15px;
	}
}

/* hubspt newsletter styling */
#booking_form_div1 .wpbc_bfb_form {
    border: none;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.hs-form fieldset input{
		width:100% !important;
		margin-bottom: 12px !important;
		color: var(--vel-navy);
		font-weight: 500;
}
.hs-form input.hs-button.primary.large {
    background: #D7EFFF;
	color:var(--vel-navy) !important;
}
.hs-form input.hs-button.primary.large:hover{
	background: #ffffff;
	transform:translatey(-4px);
}
.hs-form ul.no-list.hs-error-msgs.inputs-list li {
    color: #ff0000bd;
}
.hs-form ul.no-list.hs-error-msgs.inputs-list {
    list-style: none;
    padding: 0;
}