/* ==========================================================================
   Velocity Lending (21466) — Elementor DOM adapter.
   Patches only where the Elementor container/widget DOM differs from the
   PHP markup lending.css expected. Loaded after lending.css.
   ========================================================================== */

/* Grid classes on containers: force display over the .e-con flex default. */
.e-con.velp-l-hero-grid,
.e-con.velp-l-split,
.e-con.velp-l-persona-grid,
.e-con.velp-l-steps,
.e-con.velp-l-cta-card { display: grid; }

/* The FAQ section carried an inline style="padding-bottom:60px" in the PHP
   template; velp-lx-faq is the hook class that reproduces it. */
.e-con.velp-lx-faq { padding-bottom: 60px; }

/* --------------------------------------------------------------------------
   keydesign-framework.css loads after the theme CSS and repaints text-editor
   widgets: wrapper gets color:var(--color-text) #757575 + line-height 1.75,
   and <p>/<a> inside are forced to inherit all font metrics. Restore the
   Velocity values at higher specificity (classed root <p>s also carry their
   class on the widget wrapper, so inheritable props flow from there).
   -------------------------------------------------------------------------- */

/* Body copy color back to Velocity slate, and line-height back to the
   browser default the original non-paragraph content inherited (keydesign
   paints 1.75 on the wrapper, inflating eyebrows/pills). Paragraph
   wrappers re-assert their own line-heights below at higher specificity. */
.vel-main .elementor-widget-text-editor { color: var(--vel-slate); line-height: normal; }

/* p.velp-l-hero-sub — line-height beaten on the wrapper, margin suppressed.
   Margin restores need 0-3-0: Elementor's frontend.min.css zeroes widget
   margins via `.e-con .elementor-widget.elementor-widget`. */
.vel-main .elementor-widget.velp-l-hero-sub { line-height: 1.5; margin-bottom: 24px; }

/* p.velp-l-trust-label — color + suppressed margin */
.vel-main .elementor-widget-text-editor.velp-l-trust-label {
	color: var(--vel-slate-light);
	line-height: 1.75; /* the sierra p default the original computed */
	margin-bottom: 24px;
}

/* p.vel-section-sub — line-height + margin (the shared adapter's 0-2-0
   margin rule loses to Elementor's 0-3-0 zero rule, so restore here);
   the split-copy variant tightens it to 26px like the original */
.vel-main .elementor-widget.vel-section-sub { line-height: 1.6; margin-bottom: 44px; }
/* In split-copy the p KEEPS its 26px margin (lending.css's 0-2-0 rule
   beats the p-margin suppressor) and it stays inside the wrapper box, so
   the wrapper itself must not add more. */
.vel-main .velp-l-split-copy .elementor-widget.vel-section-sub { margin-bottom: 0; }

/* Descendant-styled paragraphs (.section p { … }) — vel-card is covered by
   the shared adapter */
.velp-l-persona-body .elementor-widget-text-editor:has(p) { font-size: 16px; line-height: 1.6; }
.velp-l-step .elementor-widget-text-editor:has(p) { font-size: 16px; line-height: 1.6; }
.velp-l-cta-card .elementor-widget-text-editor:has(p) {
	font-size: 16px;
	line-height: 1.6;
	color: #c8d8ec;
}
.velp-l-cta-card .elementor-widget-text-editor p a { font-weight: 700; }

/* Sibling margin collapse is lost across widget boundaries: the FAQ list's
   34px margin-top no longer collapses with the h2's 14px margin-bottom.
   14 + 20 = the original 34. */
.e-con.velp-lx-faq .vel-faq-list { margin-top: 20px; }

/* ==========================================================================
   2026-08-07 — design-audit fixes (page data + structure).
   ========================================================================== */

/* Hero visual is now the real 3-phone app composition instead of the
   placeholder phone stack. */
.velp-l-phone-shot { min-height: 0; }
.velp-l-phone-shot img { display: block; width: 100%; max-width: 560px; height: auto; }

/* The calculator + Approved panel is one screenshot (cropped from the Banks &
   Brokers @3x export); the white card around it is the design's frame. */
.velp-l-visual-col .elementor-widget-image {
	background: #fff;
	border: 1px solid var(--vel-line);
	border-radius: 20px;
	padding: 20px;
	box-sizing: border-box;
}
.velp-l-visual-col .elementor-widget-image img { display: block; width: 450px; max-width: 100%; height: auto; }

/* Screenshots that carry their own scale: the app phone is 1:1 from the export,
   the funding-progress card bleeds past its grid column exactly as it does in
   the design. */
.velp-l-appshot img { width: 236px; max-width: 100%; }
.velp-l-dashshot img { width: 567px; max-width: 100%; }

/* "By the numbers": the audit called for more vertical padding, but the design
   band measures 288px tall with 67/73px padding and the live band already
   measured 290px with 75/73 — it matched. Left alone deliberately. */


/* Feature-card glyphs are drawn at 1.7 stroke on a 24 grid; keep them from
   inheriting the 1.6 the old paths used. */
.velp-l-features .vel-card-icon svg { width: 22px; height: 22px; }

/* Manufacturer wordmarks replace the uppercase text spans. */
.velp-l-logos--marks { align-items: center; }
.velp-l-logos--marks img { display: block; height: 36px; width: auto; }

@media (max-width: 560px) {
	.velp-l-logos--marks img { height: 28px; }
}

/* Persona cards carry the cropped export photography (image widgets). */
.velp-l-persona-photo { height: 197px; background: #eef1f6; overflow: hidden; }
.velp-l-persona-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Approval & Security: the visual column now also holds the compliance
   badges (design puts them under the phone, side by side). */
.e-con.velp-l-visual-col { display: block; }
.velp-l-visual-col .velp-l-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.velp-l-visual-col .velp-l-badge { align-items: flex-start; padding: 14px 16px; }
.velp-l-visual-col .velp-l-badge-icon { flex: 0 0 42px; height: 42px; border-radius: 10px; }
.velp-l-visual-col .velp-l-badge-icon svg { width: 17px; height: 17px; }
.velp-l-visual-col .velp-l-badge strong { font-size: 16px; }
.velp-l-visual-col .velp-l-badge span { font-size: 11.5px; line-height: 1.4; }

@media (max-width: 560px) {
	.velp-l-visual-col .velp-l-badges { grid-template-columns: 1fr; }
}

/* The export shows the App Store / Google Play mentions as plain body copy —
   the link stays clickable but carries no colour or weight of its own. */
.velp-l-step .vel-textlink { color: inherit; font-weight: inherit; text-decoration: none; }
.velp-l-step .vel-textlink:hover { text-decoration: underline; }