/* ==========================================================================
   Velocity by MedShift — Commerce family page styles (commerce-a)
   Scoped classes prefixed .velp-ca-  ·  reuses global .vel-* from velocity.css
   Orange-accent (Commerce) product pages.
   ========================================================================== */

/* ---------- shared utilities ---------- */

.velp-ca-soft { background: var(--vel-bg-soft); }

/* Commerce pills sit on a pale-blue chip (Figma), not the neutral grey default */
.velp-ca .vel-pill { background: #eaf3fb; }

/* Feature-card icon badges — Commerce uses navy icons on a pale-blue badge
   (per Figma + the design system's commerce icon treatment), not the orange accent.
   Feature cards take the deeper #D7EFFF tile; the 4-up link cards on the Commerce
   overview take the lighter #EAF3FB one. */
.velp-ca .vel-card-icon.vel-accent-orange {
	background: #d7efff;
	color: var(--vel-navy);
}

.velp-ca .velp-ca-linkcard .vel-card-icon.vel-accent-orange { background: #eaf3fb; }

.velp-ca-checklist {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.velp-ca-checklist li {
	position: relative;
	padding-left: 26px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.625;
	color: var(--vel-slate);
}

.velp-ca-checklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8a581' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.5 5.5L20 6'/%3E%3C/svg%3E");
	background-position: left center;
	background-size: 13px;
	background-repeat: no-repeat;
}

.velp-ca-morelink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--vel-orange) !important;
	text-decoration: none !important;
}

.velp-ca-morelink svg { width: 13px; height: 13px; transition: transform 0.15s ease; }
.velp-ca-morelink:hover svg { transform: translateX(3px); }

/* two-column split (copy + visual) */
.velp-ca-split {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(32px, 6vw, 76px);
	align-items: center;
}

.velp-ca-split .velp-ca-copy h2 { text-align: left; }
.velp-ca-copy p.velp-ca-lead { font-size: 18px; line-height: 1.5; margin: 0 0 4px; max-width: 470px; }

/* ==========================================================================
   Hero (product pages — left copy, right visual)
   ========================================================================== */

.velp-ca-hero {
	/* White in the design on every commerce-a page (Commerce Product, Order
	   Management, Sales Rep Portal frames) — the old tint only survived here
	   because Sales Rep Portal overrode it per-page. */
	background: #fff;
	padding: clamp(56px, 8vw, 96px) 0 clamp(56px, 7vw, 88px);
	overflow: hidden;
}

.velp-ca-hero-grid {
	display: grid;
	grid-template-columns: 1.02fr 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.velp-ca-hero-title {
	font-size: clamp(34px, 5.2vw, 54px);
	line-height: 1.02;
	/* The 508px hero column cannot hold the design's line breaks at the spec'd
	   64px, so let the browser even the lines out; greedy wrapping orphans a
	   word instead (verified 2026-08-07 with and without this line). */
	text-wrap: balance;
	font-weight: 700;
	color: var(--vel-navy);
	letter-spacing: -0.03em;
	margin: 12px 0 20px;
}

.velp-ca-hero-sub {
	font-size: 18px !important;
	line-height: 1.5;
	max-width: 520px;
	margin: 0 0 24px;
}

.velp-ca-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}

.velp-ca-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   Video card mock (navy gradient, VELOCITY badge, play triangle, caption)
   ========================================================================== */

.velp-ca-video {
	position: relative;
	border-radius: 18px;
	background: linear-gradient(180deg, #8fabca 0%, #cddeee 46%, #eff4fa 100%);
	box-shadow: var(--vel-shadow);
	min-height: 300px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.velp-ca-video-top {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: linear-gradient(90deg, #1b2836 0%, #3d5369 100%);
}

/* round player avatar — clipped white wordmark, matching the Figma embed chrome */
.velp-ca-video-avatar {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #0d1929;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
}

.velp-ca-video-avatar img { width: 100px; max-width: none; height: auto; margin-left: 6px; }

.velp-ca-video-title { font-size: 13px; font-weight: 600; color: #fff; }

.velp-ca-video-frame {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	align-items: center;
	padding: 16px;
}

/* inner stat panel (hero card) — the video's own title frame in the design */
.velp-ca-video-panel {
	background: #f7f8fb;
	border: 1px solid #4a7fc1;
	border-radius: 6px;
	padding: 18px 20px;
	width: 100%;
}

.velp-ca-video-stat { font-size: 36px; font-weight: 700; color: #2f6bb3; line-height: 1; }
.velp-ca-video-stat em { font-style: normal; font-size: 20px; }
.velp-ca-video-panel p { font-size: 15.5px; line-height: 1.45; color: var(--vel-navy); margin: 0; font-weight: 600; }
.velp-ca-video-panel p .velp-ca-video-stat { margin-right: 4px; vertical-align: -2px; }
.velp-ca-video-panel p em.velp-ca-video-lead { font-style: normal; color: #2f6bb3; font-weight: 700; }

/* photo-style card (dark still, centered play) */
.velp-ca-video--photo::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #3a4150 0%, #23272f 70%);
}

.velp-ca-video--photo .velp-ca-video-cap {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding: 0 20px 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.velp-ca-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	width: 46px;
	height: 32px;
	border-radius: 7px;
	background: #ff0000;
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45);
	transition: transform 0.15s ease;
}

.velp-ca-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.velp-ca-play svg { width: 16px; height: 16px; color: #fff; }

/* ==========================================================================
   Go deeper — 4 link cards
   ========================================================================== */

.velp-ca-cards-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	text-align: left;
	margin-top: 34px;
}

.velp-ca-linkcard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--vel-line);
	border-radius: 14px;
	padding: 26px 24px;
	box-shadow: var(--vel-shadow-soft);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.velp-ca-linkcard:hover { transform: translateY(-3px); box-shadow: var(--vel-shadow); }
.velp-ca-linkcard h3 { font-size: 14px; font-weight: 600; color: var(--vel-navy); margin: 0 0 8px; }
.velp-ca-linkcard p { font-size: 13px; line-height: 1.62; margin: 0 0 18px; flex: 1; }

/* the link cards take a 42px icon tile, not the 48px feature-card one */
.velp-ca-linkcard .vel-card-icon { width: 42px; height: 42px; border-radius: 11px; margin-bottom: 16px; }
.velp-ca-linkcard .vel-card-icon svg { width: 19px; height: 19px; }

/* ==========================================================================
   Built for Shopify band
   ========================================================================== */

.velp-ca-shopify {
	background: var(--vel-navy);
	border-radius: 18px;
	box-shadow: var(--vel-shadow);
	padding: clamp(28px, 4vw, 42px);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(24px, 4vw, 44px);
	align-items: center;
}

/* "Built for Shopify" badge — pale-blue chip with the gem mark, per Figma */
.velp-ca-shopify-badge {
	background: #e0f0ff;
	border: 1px solid #c3cdd9;
	border-radius: 12px;
	padding: 22px 30px;
	text-align: center;
	min-width: 168px;
}

.velp-ca-shopify-badge .velp-ca-shopify-mark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #0b1420;
}

.velp-ca-shopify-badge .velp-ca-shopify-mark svg { width: 26px; height: 26px; }

.velp-ca-shopify h3 { font-size: clamp(20px, 2.6vw, 24px); font-weight: 700; color: #fff; margin: 0 0 10px; }
.velp-ca-shopify p { font-size: 16px !important; line-height: 1.62; color: var(--vel-blue-light, #d7efff); margin: 0 0 8px; }
.velp-ca-shopify p.velp-ca-shopify-strong { color: var(--vel-blue-light, #d7efff); font-weight: 700; font-size: 16px !important; margin-bottom: 0; }

.shopify-badge .elementor-icon svg {
    max-height: 101px;
}

/* ==========================================================================
   Territory / US-map mock
   ========================================================================== */

.velp-ca-map {
	position: relative;
	background: #fff;
	border: 1px solid var(--vel-line);
	border-radius: 18px;
	box-shadow: var(--vel-shadow-soft);
	padding: 20px;
}

.velp-ca-map-canvas {
	position: relative;
	height: 218px;
	border-radius: 12px;
	background: linear-gradient(135deg, #eef2f7 0%, #dde5ef 100%);
	overflow: hidden;
}

.velp-ca-map-canvas > i {
	position: absolute;
	border-radius: 40% 55% 50% 45%;
	opacity: 0.85;
}

.velp-ca-map-canvas > i:nth-child(1) { left: 26%; top: 24%; width: 26%; height: 38%; background: rgba(217, 142, 99, 0.5); }
.velp-ca-map-canvas > i:nth-child(2) { left: 46%; top: 14%; width: 22%; height: 32%; background: rgba(127, 168, 78, 0.45); border-radius: 55% 45% 48% 52%; }
.velp-ca-map-canvas > i:nth-child(3) { left: 44%; top: 44%; width: 20%; height: 36%; background: rgba(61, 109, 181, 0.38); border-radius: 48% 52% 55% 45%; }
.velp-ca-map-canvas > i:nth-child(4) { left: 62%; top: 26%; width: 28%; height: 42%; background: rgba(18, 32, 53, 0.24); border-radius: 52% 48% 45% 55%; }

/* sales-hierarchy panel (left) + commission-tracking card (right) — the two
   overlays the Figma screenshot shows on top of the territory map */
.velp-ca-map-panel {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 3;
	width: 104px;
	background: #fff;
	border-radius: 8px;
	box-shadow: var(--vel-shadow-soft);
	padding: 8px 9px;
}

.velp-ca-map-panel b { display: block; font-size: 8px; font-weight: 700; color: var(--vel-navy); margin-bottom: 6px; }
.velp-ca-map-panel i { display: block; height: 4px; border-radius: 2px; background: #e6ebf1; margin-bottom: 5px; }
.velp-ca-map-panel i.velp-ca-map-ind { width: 68%; margin-left: 12px; background: #eef2f7; }

.velp-ca-map-card {
	position: absolute;
	right: 12px;
	bottom: 22px;
	z-index: 3;
	width: 152px;
	background: #fff;
	border-radius: 9px;
	box-shadow: var(--vel-shadow);
	padding: 9px 10px;
}

.velp-ca-map-card b { display: block; font-size: 8.5px; font-weight: 700; color: var(--vel-navy); margin-bottom: 6px; }
.velp-ca-map-card span { display: flex; align-items: center; gap: 5px; font-size: 8px; color: var(--vel-slate); margin-top: 5px; }
.velp-ca-map-card span::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #3d6db5; }
.velp-ca-map-card em { font-style: normal; margin-left: auto; font-weight: 700; color: var(--vel-navy); }

.velp-ca-map-chip {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	border-radius: 9px;
	box-shadow: var(--vel-shadow-soft);
	padding: 8px 11px;
	font-size: 11px;
	font-weight: 700;
	color: var(--vel-navy);
}

.velp-ca-map-chip span { width: 9px; height: 9px; border-radius: 50%; background: var(--vel-orange-deep); }

.velp-ca-map-tag {
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	color: var(--vel-navy);
	border-radius: 9px;
	box-shadow: var(--vel-shadow-soft);
	padding: 7px 11px;
	font-size: 10.5px;
	font-weight: 700;
}

.velp-ca-map-tag::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #3d6db5; }

.velp-ca-map-caption { font-size: 11.5px; font-weight: 700; color: var(--vel-navy); text-align: center; margin: 14px 0 0; }
.velp-ca-map-sub { font-size: 9.5px; color: var(--vel-slate-light, var(--vel-slate)); text-align: center; margin: 4px 0 2px; }

/* ==========================================================================
   Dashboard table mock (Sales Rep Portal hero)
   ========================================================================== */

.velp-ca-dash {
	background: #fff;
	border: 1px solid var(--vel-line);
	border-radius: 16px;
	box-shadow: var(--vel-shadow);
	overflow: hidden;
}

.velp-ca-dash-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 18px;
	border-bottom: 1px solid var(--vel-line);
}

.velp-ca-dash-bar strong { font-size: 15px; font-weight: 700; color: var(--vel-navy); }

.velp-ca-dash-badge {
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--vel-navy);
	border-radius: 999px;
	padding: 6px 13px;
}

.velp-ca-dash-row {
	display: grid;
	grid-template-columns: 1.5fr 0.8fr auto;
	gap: 12px;
	align-items: center;
	padding: 12px 18px;
	border-bottom: 1px solid #f0f3f7;
	font-size: 12.5px;
}

.velp-ca-dash-row:last-child { border-bottom: 0; }
.velp-ca-dash-row strong { font-weight: 700; color: var(--vel-navy); }
.velp-ca-dash-row span { color: var(--vel-slate); }

.velp-ca-pill {
	justify-self: end;
	font-size: 10.5px;
	font-weight: 700;
	border-radius: 999px;
	padding: 4px 10px;
	white-space: nowrap;
}

.velp-ca-pill--paid { background: #eef5e2; color: var(--vel-green-deep); }
.velp-ca-pill--pending { background: #fdf0e6; color: var(--vel-orange-deep); }
.velp-ca-pill--new { background: #e7eef9; color: #3d6db5; }

/* ==========================================================================
   Phone app mock (Rep Portal orders screen)
   ========================================================================== */

.velp-ca-phoneui { text-align: left; }

.velp-ca-phoneui-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #0f1c2c;
	border-radius: 6px;
	padding: 7px 8px;
	margin-bottom: 9px;
}

.velp-ca-phoneui-bar img { width: 46px; height: auto; }
.velp-ca-phoneui-bar s { margin-left: auto; display: inline-flex; gap: 4px; }
.velp-ca-phoneui-bar s::before,
.velp-ca-phoneui-bar s::after { content: ''; width: 8px; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); }

.velp-ca-phoneui-head { display: flex; align-items: center; margin-bottom: 8px; }
.velp-ca-phoneui-head b { font-size: 11px; font-weight: 700; color: var(--vel-navy); }
.velp-ca-phoneui-head span { margin-left: auto; font-size: 7.5px; font-weight: 700; color: #fff; background: #2f6bb3; border-radius: 4px; padding: 3px 6px; }

.velp-ca-phoneui-search { height: 13px; border-radius: 4px; background: #f1f4f8; border: 1px solid var(--vel-line); margin-bottom: 9px; }

.velp-ca-phoneui-seg { display: flex; gap: 2px; margin-bottom: 9px; }
.velp-ca-phoneui-seg i { height: 8px; border-radius: 2px; }
.velp-ca-phoneui-seg i:nth-child(1) { flex: 36; background: #2f6bb3; }
.velp-ca-phoneui-seg i:nth-child(2) { flex: 33; background: #e0894f; }
.velp-ca-phoneui-seg i:nth-child(3) { flex: 23; background: #7fa84e; }
.velp-ca-phoneui-seg i:nth-child(4) { flex: 8;  background: #b8c3d0; }

.velp-ca-phoneui-sum { border-bottom: 1px solid var(--vel-line); padding-bottom: 7px; margin-bottom: 8px; }
.velp-ca-phoneui-sum span { display: flex; align-items: center; gap: 5px; font-size: 8px; color: var(--vel-slate); margin-bottom: 4px; }
.velp-ca-phoneui-sum span::before { content: ''; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: #2f6bb3; }
.velp-ca-phoneui-sum span:nth-child(2)::before { background: #e0894f; }
.velp-ca-phoneui-sum span:nth-child(3)::before { background: #7fa84e; }
.velp-ca-phoneui-sum span em { font-style: normal; margin-left: auto; font-weight: 700; color: var(--vel-navy); }
.velp-ca-phoneui-sum span.velp-ca-phoneui-total { font-weight: 700; color: var(--vel-navy); }
.velp-ca-phoneui-sum span.velp-ca-phoneui-total::before { display: none; }

.velp-ca-phoneui-order { border-bottom: 1px solid #f0f3f7; padding-bottom: 7px; margin-bottom: 7px; }
.velp-ca-phoneui-order b { display: block; font-size: 8px; font-weight: 700; color: var(--vel-navy); }
.velp-ca-phoneui-order span { display: block; font-size: 7.5px; color: var(--vel-slate); }
.velp-ca-phoneui-order u { display: block; text-decoration: none; font-size: 8px; font-weight: 700; color: var(--vel-navy); }
.velp-ca-phoneui-order .velp-ca-phoneui-tags { display: flex; gap: 4px; margin-top: 4px; }
.velp-ca-phoneui-order .velp-ca-pill { justify-self: auto; font-size: 7px; padding: 2px 6px; }

/* ==========================================================================
   Order pipeline mock (Order Management hero)
   ========================================================================== */

.velp-ca-pipeline {
	background: #fff;
	border: 1px solid var(--vel-line);
	border-radius: 18px;
	box-shadow: var(--vel-shadow);
	padding: 24px 22px;
}

.velp-ca-pipeline-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--vel-navy);
	text-align: center;
	margin-bottom: 20px;
}

.velp-ca-pipeline-title span { color: var(--vel-navy); }

.velp-ca-pipeline-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.velp-ca-pipeline-sources { display: flex; flex-direction: column; gap: 10px; }

.velp-ca-node {
	display: flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid var(--vel-line);
	border-radius: 10px;
	padding: 9px 12px;
	box-shadow: 0 6px 16px -10px rgba(18, 32, 53, 0.3);
	font-size: 12px;
	font-weight: 700;
	color: var(--vel-navy);
	white-space: nowrap;
}

.velp-ca-node-icon {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: #e2effc;
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--vel-navy);
}

.velp-ca-node-icon svg { width: 14px; height: 14px; }

.velp-ca-arrow { flex: 0 0 auto; color: var(--vel-slate-light); display: inline-flex; }
.velp-ca-arrow svg { width: 18px; height: 18px; }

/* connector runs: the three sources merge into the hub, the hub feeds Delivered */
.velp-ca-merge { flex: 0 0 46px; display: inline-flex; }
.velp-ca-merge svg { width: 46px; height: 116px; }
.velp-ca-link { flex: 0 0 32px; display: inline-flex; }
.velp-ca-link svg { width: 32px; height: 12px; }

.velp-ca-hub {
	background: #fff;
	border: 1px solid #d7e5f6;
	color: var(--vel-navy);
	border-radius: 12px;
	padding: 16px 14px;
	text-align: center;
	min-width: 148px;
	box-shadow: 0 12px 30px -14px rgba(47, 107, 179, 0.45);
}

.velp-ca-hub-icon { display: inline-flex; margin-bottom: 8px; color: var(--vel-navy); }
.velp-ca-hub-icon svg { width: 22px; height: 22px; }
.velp-ca-hub strong { display: block; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.velp-ca-hub em { font-style: normal; display: block; font-size: 10px; color: var(--vel-slate); margin-top: 6px; }

.velp-ca-done {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	background: #fff;
	border: 1px solid var(--vel-line);
	border-radius: 12px;
	padding: 14px 14px;
	min-width: 92px;
	box-shadow: 0 6px 16px -10px rgba(18, 32, 53, 0.3);
	color: var(--vel-green-deep);
	font-size: 11.5px;
	font-weight: 700;
}

.velp-ca-done-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: #e9f4dd;
}

.velp-ca-done svg { width: 17px; height: 17px; }

/* ==========================================================================
   How Velocity works — numbered steps
   ========================================================================== */

.velp-ca-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 4vw, 44px);
	margin-top: 46px;
	text-align: center;
}

.velp-ca-step { position: relative; }

.velp-ca-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 22px;
	right: calc(-1 * clamp(12px, 2vw, 22px));
	width: 24px;
	height: 24px;
	background-image: url("/wp-content/uploads/2026/08/next-arrow.svg");
	background-repeat: no-repeat;
	background-position: center;
}

.velp-ca-step-num {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--vel-orange);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
}

.velp-ca-step h3 { font-size: 19px; font-weight: 600; letter-spacing: 0; color: var(--vel-navy); margin: 0 0 10px; }
.velp-ca-step p { font-size: 16px !important; line-height: 1.6; margin: 0 auto; max-width: 300px; }

/* ==========================================================================
   Single centered testimonial
   ========================================================================== */

.velp-ca-testimonial { padding: clamp(64px, 8vw, 96px) 0; text-align: center; }

.velp-ca-testimonial blockquote {
	max-width: 820px;
	margin: 0 auto;
	padding: 0;
	border: 0;
	background: none;
	font-size: clamp(20px, 2.6vw, 25px);
	line-height: 1.05;
	font-weight: 600;
	color: var(--vel-navy);
}

.velp-ca-testimonial figcaption { margin-top: 24px; }
.velp-ca-testimonial figcaption strong { display: block; font-size: 15px; font-weight: 700; color: var(--vel-navy); }
.velp-ca-testimonial figcaption span { font-size: 12px; color: var(--vel-slate); font-weight: 600; }

/* ==========================================================================
   CTA — two-button variant (Download for Shopify + Book a demo)
   ========================================================================== */

.velp-ca-cta-card {
	position: relative;
	background: linear-gradient(90deg, var(--vel-navy) 0%, #16365C 100%);
	border-radius: 20px;
	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: 24px !important; font-weight: 700; color: #fff; margin: 0 0 12px; }
.velp-ca-cta-card p { max-width: 560px; margin: 0; font-size: 16px !important; line-height: 1.62; color: var(--vel-blue-light, #d7efff); }
.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; }

/* Canonical CTA deco spec (same as .vel-cta-deco in velocity.css): four white
   bars at 12% alpha, pill-rounded, 11px wide on a 10px gap, shared baseline
   40px above the card edge, 4th bar clipped by the card's right rounding.
   Pages whose markup ships only three <i> get the 4th from ::after. */
.velp-ca-cta-deco { position: absolute; right: -2px; bottom: 40px; display: flex; align-items: flex-end; gap: 10px; z-index: 0; }
.velp-ca-cta-deco i,
.velp-ca-cta-deco::after { width: 11px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); }
.velp-ca-cta-deco:not(:has(i:nth-child(4)))::after { content: ''; height: 120px; }
.velp-ca-cta-deco i:nth-child(1) { height: 50px; }
.velp-ca-cta-deco i:nth-child(2) { height: 100px; }
.velp-ca-cta-deco i:nth-child(3) { height: 80px; }
.velp-ca-cta-deco i:nth-child(4) { height: 120px; }

/* FAQ list: the exports set the question at 600 and the answer on the 18px body
   scale minus one step (16px on a 26px line); velocity.css still carries the
   older 500 / 14.5px pair (flagged for the global pass). */
.velp-ca .vel-faq-item summary { font-weight: 600; }
.velp-ca .vel-faq-item p { font-size: 16px; line-height: 1.625; }

/* breathing room where the CTA follows the dark stats band (Order Management) */
.velp-ca .vel-stats + .vel-cta { padding-top: clamp(64px, 11vw, 150px); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.velp-ca-cards-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.velp-ca-hero-grid { grid-template-columns: 1fr; }
	.velp-ca-hero-visual { max-width: 520px; }
	.velp-ca-split { grid-template-columns: 1fr; }
	.velp-ca-split--visualfirst > :first-child { order: 2; }
	.velp-ca-split .velp-ca-visual { max-width: 520px; }
	.velp-ca-shopify { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.velp-ca-steps { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
	.velp-ca-step:not(:last-child)::after { display: none; }
	.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-cards-4 { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
	.velp-ca-pipeline-row { flex-direction: column; }
	.velp-ca-pipeline-row .velp-ca-arrow { transform: rotate(90deg); }
	.velp-ca-merge, .velp-ca-link { display: none; }
	.velp-ca-pipeline-row { gap: 10px; }
	.velp-ca-node { justify-content: center; }
	.velp-ca-cta-actions .vel-btn { width: 100%; }
	.velp-ca-map-panel { display: none; }
	.velp-ca-map-card { width: 140px; right: 10px; }
}