/* Elementor adapter — Home (page 21461). See elementor-adapter.css. */

/* Grid classes now on containers. */
.e-con.vel-why-grid,
.e-con.vel-stats-grid { display: grid; }

/* Row-flex classes now on containers (wrap handles narrow widths; the
   originals never flip direction in media queries). */
.e-con.vel-hero-actions,
.e-con.vel-cta-actions { flex-direction: row; }

/* Stat cells and the why-visual html widget are grid items via their
   widget wrappers; keep the inner blocks natural. */
.elementor-widget .vel-stat { display: block; }

/* ==========================================================================
   Industries-served marquee — Figma feedback B1. Replaces the client-logo
   strip under the hero, so it reuses .vel-logo-strip for the white band,
   padding and full-bleed and only adds the scroll.
   ========================================================================== */

.vel-logo-strip--marquee {
	justify-content: flex-start;
	flex-wrap: nowrap;
	overflow: hidden;
	padding-left: 0;
	padding-right: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.vel-industry-track {
	display: flex;
	width: max-content;
	animation: vel-industry-scroll 46s linear infinite;
}

.vel-logo-strip--marquee:hover .vel-industry-track { animation-play-state: paused; }

.vel-industry-row {
	display: flex;
	align-items: center;
	gap: clamp(24px, 5vw, 56px);
	margin: 0;
	/* Half the gap each side, so the seam between the two rows spaces evenly. */
	padding: 0 clamp(12px, 2.5vw, 28px);
	list-style: none;
}

.vel-industry-row li {
	flex: 0 0 auto;
	list-style: none;
	white-space: nowrap;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #b8bbfc;
}

/* The track holds the row twice, so -50% lands on the seam. */
@keyframes vel-industry-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.vel-logo-strip--marquee {
		justify-content: center;
		flex-wrap: wrap;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.vel-industry-track { animation: none; width: auto; }
	.vel-industry-row { flex-wrap: wrap; justify-content: center; row-gap: 14px; }
	.vel-industry-row[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   Client design review 2026-08-07 (items H2, H4, H6, H7, H8, H13).
   Homepage-only; the announce bar and the shared component styles keep their
   site-wide behaviour on inner pages.
   ========================================================================== */

/* H13 — the announce bar used to be hidden here with
   `body.home .vel-announce{display:none}`. Superseded 2026-08-25 by the
   per-page "Hide the announcement bar" checkbox, which stops it rendering
   instead of hiding it after paint. Tick that box on the Home page (ID 21461)
   to restore the H13 behaviour. */

/* H7 — integration tiles carry the real brand marks (cropped from the Figma
   @3x frame). The image ships the tile fill, so the tile must use the same
   flat colour and must not recolour on hover. */
.vel-integration-grid--logos span {
	background: #f3f7fc;
	padding: 0;
	border-radius: 14px;
	overflow: hidden;
	display: block;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.vel-integration-grid--logos span:hover {
	background: #f3f7fc;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(18, 32, 53, 0.08);
}

.vel-integration-grid--logos img { display: block; width: 100%; height: auto; }

/* H8 — the dots used to be decorative: velocity.js called scrollIntoView on a
   CSS grid that never scrolled. The track is now a real scroll-snap slider
   paged by its own dots (built by the page's own script, so velocity.js's
   #vel-quote-track branch stays inert). */
.vel-quote-slider { position: relative; }

.e-con .vel-quote-track--slide,
.vel-quote-track--slide {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* overflow-x clips the card shadow, so the track carries padding equal to the
	   shadow's reach and pulls it back with a matching negative margin. The card
	   shadow is 0 18px 40px, i.e. ~40px sideways and ~58px below, none above —
	   6px all round (the old value) sheared it flat on every edge. */
	padding: 24px 40px 58px;
	margin: -24px -40px -58px;
	/* Cancel the new left padding for snapping, so 'start' still lands the card
	   flush with the container edge rather than 40px inside it. */
	scroll-padding-left: 40px;
}

.vel-quote-track--slide::-webkit-scrollbar { display: none; }

.vel-quote-track--slide > .vel-quote-card {
	flex: 0 0 calc(50% - 12px);
	scroll-snap-align: start;
}

.vel-quote-dots--slide button { cursor: pointer; }

@media (max-width: 900px) {
	.vel-quote-track--slide > .vel-quote-card { flex-basis: 100%; }
}

/* H2 — Commerce slide visual: New Order phone + Order Synced card, per Figma. */
.vel-family-visual--commerce {
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
	align-items: center;
	gap: 18px;
	background: none;
	padding: 0;
}

.vel-appshot {
	position: relative;
	width: 100%;
	max-width: 200px;
	margin: 0 auto;
	background: #fff;
	border: 6px solid #1d2a3d;
	border-radius: 30px;
	box-shadow: 0 18px 40px rgba(18, 32, 53, 0.16);
	overflow: hidden;
	text-align: left;
}

.vel-appshot-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #1d2a3d;
	padding: 22px 12px 8px;
}

.vel-appshot-logo { width: 62px; height: auto; display: block; }
.vel-appshot-icons { display: flex; gap: 5px; }

.vel-appshot-icons i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.28);
}

.vel-appshot-body { padding: 10px 10px 0; }

.vel-appshot-head {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 9px;
}

.vel-appshot-head strong {
	flex: 1;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--vel-navy);
	letter-spacing: -0.3px;
}

.vel-appshot-btn {
	font-size: 7px;
	font-weight: 700;
	color: var(--vel-slate);
	background: #f1f4f8;
	border-radius: 4px;
	padding: 4px 6px;
}

.vel-appshot-btn--blue { background: #2f5fd8; color: #fff; }

.vel-appshot-sec {
	border: 1px solid #e9edf3;
	border-radius: 6px;
	margin-bottom: 7px;
	overflow: hidden;
}

.vel-appshot-lbl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f7f9fc;
	border-bottom: 1px solid #e9edf3;
	padding: 5px 7px;
	font-size: 7.5px;
	font-weight: 700;
	color: var(--vel-slate);
}

.vel-appshot-lbl em {
	font-style: normal;
	font-size: 6px;
	background: #fff;
	border: 1px solid #e3e8ef;
	border-radius: 3px;
	padding: 2px 4px;
}

.vel-appshot-pick {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 7px;
	font-size: 7.5px;
	color: var(--vel-navy);
}

.vel-appshot-pick i { font-style: normal; color: #b3bcc9; }

.vel-appshot-item {
	display: grid;
	grid-template-columns: 16px 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 6px;
	align-items: center;
	padding: 6px 7px;
	border-bottom: 1px solid #f1f4f8;
}

.vel-appshot-item u {
	grid-row: 1 / 3;
	width: 16px;
	height: 22px;
	border-radius: 3px;
	background: #eef2f7;
	text-decoration: none;
}

.vel-appshot-item b { font-size: 7.5px; font-weight: 700; color: var(--vel-navy); }
.vel-appshot-item i { font-style: normal; font-size: 6.5px; color: #9aa5b4; }

.vel-appshot-item s {
	grid-row: 1 / 3;
	text-decoration: none;
	font-size: 7.5px;
	font-weight: 700;
	color: var(--vel-navy);
}

.vel-appshot-tot {
	display: grid;
	grid-template-columns: 1fr auto auto;
	column-gap: 8px;
	padding: 4px 7px;
	font-size: 7px;
	color: var(--vel-slate);
}

.vel-appshot-tot i { font-style: normal; }
.vel-appshot-tot b { font-weight: 700; color: var(--vel-navy); }
.vel-appshot-tot--sum { font-weight: 700; color: var(--vel-navy); padding-bottom: 7px; }

.vel-appshot-cta {
	display: block;
	background: #2f5fd8;
	color: #fff;
	text-align: center;
	font-size: 8px;
	font-weight: 700;
	border-radius: 5px;
	padding: 7px;
	margin: 0 0 10px;
}

.vel-synced {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 18px 44px rgba(18, 32, 53, 0.1);
	padding: 24px 20px;
	text-align: center;
}

.vel-synced-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #e8f3e2;
	color: #5aa832;
	margin-bottom: 14px;
}

.vel-synced-check svg { width: 30px; height: 30px; }

.vel-synced-title {
	display: block;
	font-size: clamp(20px, 2.1vw, 27px);
	font-weight: 800;
	color: var(--vel-navy);
	letter-spacing: -0.6px;
	white-space: nowrap;
	line-height: 1.1;
}

.vel-synced-sub {
	display: block;
	font-size: 12px;
	color: var(--vel-slate);
	margin: 6px 0 4px;
}

.vel-synced-list { list-style: none; margin: 0; padding: 0; }

.vel-synced-list li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid #eef2f7;
	text-align: left;
	font-size: 14px;
	font-weight: 700;
	color: var(--vel-navy);
}

.vel-synced-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.vel-synced-ok { display: inline-flex; color: #5aa832; }
.vel-synced-ok svg { width: 17px; height: 17px; }

.vel-synced-list em {
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	color: #5aa832;
	background: #eaf5e3;
	border-radius: 999px;
	padding: 5px 12px;
}

@media (max-width: 900px) {
	.vel-family-visual--commerce { grid-template-columns: 1fr; justify-items: center; }
	.vel-synced { order: -1; width: 100%; }
}

/* H4 — Why Commerce visual: white panel with the Orders app screen and the two
   estimate cards, per Figma (was two navy tiles). */
.e-con .vel-roi-panel,
.vel-roi-panel {
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 24px 60px rgba(18, 32, 53, 0.1);
	padding: 30px 0 0 22px;
	overflow: hidden;
}

.vel-roi-cards {
	position: relative;
	z-index: 2;
	flex: 1 1 56%;
	margin-right: -18%;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vel-roi-phone {
	flex: 0 0 44%;
	display: block;
	width: 44%;
	max-width: 240px;
	height: auto;
	margin: 0 0 -30px 0;
}

.vel-roi-card2 {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(18, 32, 53, 0.14);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	text-align: left;
}

.vel-roi-card2--sm { width: 82%; }

.vel-roi-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--vel-orange, #f8a581);
	border: 1px solid rgba(236, 169, 135, 0.7);
	border-radius: 999px;
	padding: 3px 9px;
	margin-bottom: 4px;
}

.vel-roi-pill i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vel-orange, #f8a581);
}

.vel-roi-lbl { font-size: 11.5px; font-weight: 600; color: var(--vel-slate); }

.vel-roi-big {
	font-size: clamp(34px, 4.6vw, 54px);
	font-weight: 800;
	color: var(--vel-navy);
	line-height: 1;
	letter-spacing: -2px;
}

.vel-roi-big em {
	font-style: normal;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
}

.vel-roi-unit2 { font-size: 13.5px; font-weight: 700; color: var(--vel-navy); }
.vel-roi-fine { font-size: 9px; color: var(--vel-slate-light, #8b98a8); margin-top: 2px; }

@media (max-width: 900px) {
	.vel-roi-panel { padding: 24px 0 0 16px; }
	.vel-roi-cards { flex-basis: 62%; margin-right: -14%; }
	.vel-roi-phone { flex-basis: 38%; width: 38%; }
	.vel-roi-card2--sm { width: 100%; }
}

@media (max-width: 560px) {
	.vel-roi-panel { padding: 20px; display: block; }
	.vel-roi-phone { display: none; }
	.vel-roi-cards { width: 100%; flex-basis: auto; margin-right: 0; }
	.vel-roi-card2, .vel-roi-card2--sm { width: 100%; }
}

/* H6 — the lending calculator phone showed grey placeholder bars; Figma shows a
   pricing table with a selected term option. */
.vel-phone--calc { padding: 40px 12px 12px; overflow: hidden; }

.vel-phone--calc .vel-phone-line--title {
	width: auto;
	height: auto;
	background: none;
	font-size: 10px;
	font-weight: 800;
	color: var(--vel-navy);
	margin-bottom: 8px;
}

.vel-calc-sec {
	display: block;
	font-size: 8px;
	font-weight: 800;
	color: var(--vel-navy);
	border-bottom: 1px solid #e9edf3;
	padding-bottom: 4px;
	margin: 8px 0 5px;
}

.vel-calc-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-size: 7px;
	color: var(--vel-slate);
	padding: 3px 0;
}

.vel-calc-row b { font-weight: 700; color: var(--vel-navy); }

.vel-calc-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 7px;
	font-weight: 700;
	color: var(--vel-navy);
	border: 1px solid #e9edf3;
	border-radius: 5px;
	padding: 5px 7px;
	margin-bottom: 4px;
}

.vel-calc-opt i { font-style: normal; font-weight: 600; color: #9aa5b4; }
.vel-calc-opt.is-active { border-color: #2f5fd8; background: #eef3fd; }
.vel-calc-opt.is-active i { color: #2f5fd8; }

/* ==========================================================================
   Figma design-match pass, 2026-08-10. Every number below was measured off
   figma-refs/Homepage.png (export scale 1.0: the 1300px frame carries a 90px
   transparent margin, so content runs 90..1210 and every section insets a
   further 40px — the real content column is 1040px, not the 1080px the site
   shipped). Values are page-scoped overrides; where a finding applies to
   every page it is also logged in GLOBAL-NOTES.md for the global pass.
   ========================================================================== */

/* ---- Feature cards: the export's card type is 14.5px/600 over 13px/1.54,
   not 16/14. Body copy lives in a text-editor, so the metrics have to be
   re-asserted on the wrapper (keydesign forces p to inherit). ---- */
.vel-card h3 { font-size: 14.5px; }
/* The export runs these cards 330px wide on a 25px gutter. Its 296px measure
   closes line 2 of the first card on "whether"; Chrome needs ~1px more advance
   for the same line, so the side padding gives it 15px instead of 16px
   (keydesign forces text-editor <p> to inherit its metrics, so the size and
   leading have to be set on the widget wrapper, not the paragraph). */
.vel-cards-3 { gap: 25px; }
.vel-card { padding: 16px 15px 18px; }
.vel-card p { font-size: 13px; line-height: 1.54; }
.vel-card .elementor-widget-text-editor:has(p) { font-size: 13px; line-height: 1.54; }

/* ---- Why sections ---- */
/* Export gap between an orange/green eyebrow and the left-aligned H2 is 10px
   wider than the centred sections' 14px. */
.vel-why .vel-eyebrow { margin-bottom: 27px; }
.vel-why .vel-h2--left { margin-bottom: 26px; }
/* Item headings sit between the generic :where(h1..h4) -0.01em (8px narrow at
   24px) and no tracking at all; -0.004em lands all three on the export. */
.vel-why-item h3 { letter-spacing: -0.004em; margin-bottom: 4px; }
.vel-why-item { margin-bottom: 26px; }
.vel-why-item p { line-height: 1.62; }
.vel-why-item .elementor-widget-text-editor:has(p) { line-height: 1.62; }
/* Last item's margin pushed the section 26px taller than the export. */
.vel-why-item:last-child { margin-bottom: 0; }
/* Both why visuals are one image whose white panel is inset in the PNG, so the
   scale is what sizes the panel: 1.25 ran it 6px wide and 12px past the export's
   492px column, and the PNG's off-centre panel needs the nudge to land flush.
   Left alone below 900px, where the column is the full container. */
@media (min-width: 901px) {
	.vel-why .scaled-img img { scale: 1.205; translate: -10px 30px; }
}

/* ---- Integrations: 192x83 (row 1) / 192x93 (row 2) tiles on a 20px gap,
   each with a 1px hairline, and the logo art at 87.5% of the tile. ---- */
/* The sub's own margin is zeroed by global.css p:last-child, so the 52px the
   export leaves above the tiles has to come off the widget wrapper (0-3-0, to
   beat elementor-adapter.css's 44px). */
.vel-integrations .elementor-widget.vel-section-sub { margin-bottom: 46px; }
.vel-integration-grid--logos { gap: 20px; }

.vel-integration-grid--logos span {
	border: 1px solid var(--vel-line);
	display: grid;
	place-items: center;
}

.vel-integration-grid--logos span:nth-child(-n + 5) { aspect-ratio: 192 / 83; }
.vel-integration-grid--logos span:nth-child(n + 6) { aspect-ratio: 192 / 93; }
.vel-integration-grid--logos img { width: 87.5%; }

/* ---- Stats band ---- */
.vel-stats { padding-top: 55px; }
.vel-stats .vel-eyebrow { margin-bottom: 48px; }
/* The column rules never drew: .vel-stat:first-child in velocity.css matches
   every stat, because each one is the only child of its own widget wrapper. */
.vel-stats-grid .vel-stat { border-left: 1px solid rgba(255, 255, 255, 0.2); }
.vel-stats-grid > .elementor-widget:first-child .vel-stat { border-left: 0; }
.vel-stat strong { letter-spacing: -0.02em; }
.vel-stat em { font-size: 13px; }

/* ---- Testimonials ---- */
.vel-testimonials { padding: 88px 0; }
/* line-height:0.5 parks the glyph high in its box; the export leaves 51px of
   card above the ink, so the margin moves the whole block down instead. */
.vel-quote-mark { font-size: 56px; margin-top: 19px; margin-bottom: 26px; }
/* Export leads the quote at 125%, not 155%. */
/* Chrome sets the quote 1.4% wider than the export, which cost a word off the
   end of two lines; -1% restores both the ink width and the export's breaks. */
.vel-quote-card blockquote { line-height: 1.23; margin-bottom: 16px; letter-spacing: -0.01em; }
.vel-quote-card figcaption strong { font-size: 16px; line-height: 1.05; }
.vel-quote-dots { margin-top: 40px; }
.vel-quote-dots button { width: 11px; height: 11px; }
.vel-quote-dots button.is-active { width: 30px; }

/* ---- FAQ ---- */
.vel-faq-item summary { font-size: 18.5px; padding: 20px 0; }
.vel-faq-item p { font-size: 16px; line-height: 1.625; margin: -2px 0 14px; }
.vel-faq-toggle { flex-basis: 14px; height: 14px; }
.vel-faq-toggle::before { top: 6px; }
.vel-faq-toggle::after { left: 6px; }

/* ---- Final CTA: the homepage card is a FLAT navy in the export (the Lending
   page's is the gradient), and it sits 80px lower under the FAQ. ---- */
.vel-cta { padding: 100px 0 85px; }
.vel-cta-card { background: var(--vel-navy); padding: clamp(40px, 4vw, 56px) 32px; }
.vel-cta-card h2 { margin-bottom: 22px; }
.vel-cta-card p,
.vel-cta-card .elementor-widget-text-editor p { line-height: 1.45; margin-bottom: 32px; }
.vel-cta-card .elementor-widget-text-editor:has(p) { line-height: 1.45; }

/* ---- Industries strip: the export sets these unspaced in ink-25 grey; the
   site had them tracked out 0.14em in a lavender (#b8bbfc). ---- */
.vel-industry-row { gap: clamp(24px, 4vw, 44px); }

.vel-industry-row li {
	color: #b8bfcd;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ---- Layout widths and desktop rhythm. Scoped above the 900px stacking
   breakpoints so the existing mobile rules keep winning. ---- */
@media (min-width: 901px) {

	/* The 1040px content column is now global (velocity.css .vel-container).
	   The animated hero is the approved deviation from the export, so it
	   keeps the pre-pass 1080px measure. */
	.vel-main > .e-con.vel-hero > .e-con.vel-container {
		max-width: 1128px;
		padding: 0 24px;
	}

	/* Homepage quote/FAQ measure: 760px of content in the export. */
	.vel-main > .e-con:not(.vel-hero) > .e-con.vel-container--narrow { max-width: 808px; }

	/* Export: two equal columns on a 56px gap (was 1.1fr/1fr on 80px). */
	.e-con.vel-why-grid { grid-template-columns: 1fr 1fr; gap: 56px; }

	/* Family panel: 40px padding, and 25px between the H2 and the toggle. */
	.vel-family { padding-top: 99px; }
	.vel-family-toggle { margin: 25px 0 40px; }
	.vel-family-card { padding: 40px; }
	.vel-family-copy h3 { font-weight: 600; letter-spacing: -0.01em; }
	.vel-family-copy p { margin-bottom: 14px; }

	/* Quote cards: 40px padding on a 26px gutter. */
	.vel-quote-card { padding: 40px; }
	.e-con .vel-quote-track--slide,
	.vel-quote-track--slide { gap: 26px; }
	.vel-quote-track--slide > .vel-quote-card { flex-basis: calc(50% - 13px); }
}

/* ==========================================================================
   Hero — animated board, in flow below the copy at every width.

   This block used to lift the board widget out of flow at >=1100px with
   position:absolute/inset:0 so it covered the whole hero, while the copy was
   squeezed into a narrow centred keep-out column and the board's own `split`
   layout parked the product cards and stat tiles in clusters against the left
   and right page edges. That splayed composition was dropped: the board now
   stays in normal flow under the trust line and centres itself at every
   width, and the `split` layout was removed from the widget script with it.

   Nothing width-specific is needed any more — the widget is a plain block, it
   centres via its own .vh-board translateX(-50%), and it scales to whatever
   width it is given. The hero is left to grow to fit its contents rather than
   reserving overlay height.
   ========================================================================== */

.vel-hero .elementor-element.vel-hero-board {
	/* The board's inner .vh-board is absolutely positioned against .vh-fit,
	   which the script sizes; the widget itself just needs full width to
	   centre within.

	   The widget must stay at Position: Default in Elementor (Advanced →
	   Layout). It was previously set to Absolute there, from when this was a
	   hero overlay: that emits `position:absolute; inset:0; z-index:1` into
	   Elementor's own per-element CSS, which is generated from the database
	   and loads after this file, so it cannot be undone from here without
	   !important. Symptom if it comes back — the board sits behind the hero
	   copy instead of below it, while its artwork measures as correctly
	   inside its own box. */
	width: 100%;
	max-width: none;
}

@media  (max-width: 992px) {
	.vel-cta { padding: 0 0 48px; }
}