/* ==========================================================================
   For Banks & Brokers (21516) — 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; }

/* Same collapse loss in the proof split: the sub-paragraph's 26px bottom
   margin used to collapse with the badges' 24px top margin (net 26); with
   the sub margin now contained in its widget, the badges must not add 24. */
.velp-l-split-copy .elementor-widget .velp-l-badges { margin-top: 0; }

/* ==========================================================================
   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; }

/* Calculator screenshot beside the Approved card (design: side by side with a
   gap, not the -46px overlap the placeholder phone needed). */
.velp-l-approved-visual { align-items: flex-start; gap: 24px; }
.velp-l-approved-visual .vel-approved-card { margin-left: 0; }
.velp-l-calc-shot { flex: 0 0 auto; display: block; }
.velp-l-calc-shot img { display: block; width: 176px; height: auto; }

/* "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. */

@media (max-width: 900px) {
	/* the screenshot + card no longer fit side by side; stack them cleanly
	   instead of letting the card wrap on top of the phone */
	.velp-l-approved-visual { display: flex; flex-direction: column; align-items: center; }
	.velp-l-calc-shot img { width: 190px; }
}

/* Persona cards now carry real photography (design export had @2x/@3x). */
.velp-l-persona-photo { height: 200px; background: #eef1f6; }
.velp-l-persona-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Feature-card glyphs are drawn at 1.7 stroke on a 24 grid. */
.velp-l-features .vel-card-icon svg { width: 22px; height: 22px; }

/* 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; }

/* Proof & Trust screenshot: cropped from this page's @3x export, drawn 1:1
   (450px) and free-standing, as the design has it. */
.velp-l-split-visual.elementor-widget-image img { width: 450px; max-width: 100%; }