/* ═════════════════════════════════════════════════════════════════
   PRODUCT — LENDING (shared)

   One stylesheet powers Lending product pages. Currently:
     - pages/page-business-lending.php  (Business / BL)

   Architecture mirrors product-cards.css:
     - Theme variants (.pl-theme-business / .pl-theme-consumer) scope
       --accent so swapping the wrapper modifier flips the page accent.
     - Class naming: every page-scoped hook uses the `.pl-*` prefix
       (pl = product-lending). Components reused from
       /assets/css/components/ keep their own selectors.

   Section inventory (in source order, see /template-parts/product-lending.php):
   - Hero overlay + proof strip   (.pl-hero)
   - Product band                 (component: head-band — shared)
   - Lending lifecycle            (component: agents-grid 4-up — shared)
   - Platform capabilities        (component: caps-grid — shared)
   - Lending agents               (component: agents-grid 2×2 — shared)
   - FAQ                          (component: faq — shared)
   - Final CTA accent band        (.pl-finalcta)
   ═════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   THEME VARIANTS — scope --accent tokens once at the page root.
   ───────────────────────────────────────────────────────────────── */
.product-lending.pl-theme-business {
	--accent:      var(--green);
	--accent-rgb:  11, 102, 35;
	--accent-tint: rgba(11, 102, 35, 0.16);
}
.product-lending.pl-theme-consumer {
	--accent:      var(--orange);
	--accent-rgb:  255, 79, 0;
	--accent-tint: rgba(255, 79, 0, 0.16);
}


/* ─────────────────────────────────────────────────────────────────
   HERO — accent-tinted wash over the bg video.
   The Figma applies `rgba(11,102,35,0.35)` mix-blend-screen on the
   business variant. We expose it via the theme accent so a future
   consumer-lending variant gets its own wash automatically.
   ───────────────────────────────────────────────────────────────── */
.pl-hero .pl-bg-overlay {
	position: absolute;
	inset: 0;
	mix-blend-mode: screen;
	pointer-events: none;
}

/* Consumer-lending hero italic tail "API-driven credit" pins to the
   right edge of the hero column (Figma). Business stays at default
   left per the shared rule in /assets/css/layout/hero.css. */
.product-lending.pl-theme-consumer .pl-hero .hero-headline .it-tail {
	text-align: right;
}

/* Right-aligned italic tail — Business Lending only.
   The shared rule in /assets/css/layout/hero.css leaves the tail at
   default left-align. This page opts in: the .it-tail "loan process"
   block (already display:block + nowrap from layout/hero.css) gets
   text-align: right so it pins to the right edge of the hero column
   while the roman .hl-line lines above stay flush left. Other product
   pages (BAO / CAO / BCP / CCP) are unaffected. */
.product-lending .pl-hero .hero-headline .it-tail {
	text-align: left;
}


/* Roman callout inside an italic tail — used by both section heads
   on this page:
     - .po-caps-head    "A lending model built [FOR] institutions like yours"
     - .po-agents-head  "How the agents work" / "[FOR] business lending"
   The .hl-roman span sits inside .it-tail so it wraps together with
   the italic copy as one unit (the italic always lands directly
   after "for", never on a separate line). It reverts the styling
   back to the .display baseline (sans 500, uppercase, ink,
   fs-display-xl, letter-spacing -.01em) so "for" reads identical
   to the .hl-line copy on the row above. */
.product-lending .po-caps-head .display .it-tail .hl-roman,
.product-lending .po-agents-head .display .it-tail .hl-roman {
	font-family: var(--f-sans);
	font-style: normal;
	font-weight: 500;
	font-size: var(--fs-display-xl);
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 0.94;
}
/* caps-head: switch to block layout so font-size > line-height creates
   the same tight overlap as the hero's stacked .hl-line blocks. */
.product-lending .po-caps-head .display .hl-line,
.product-lending .po-caps-head .display .it-tail { display: block; }
/* Business lending: it-tail sits inline inside hl-line so "for institutions like"
   and "yours" each occupy their own hl-line without an extra forced break. */
.product-lending.pl-theme-business .po-caps-head .display .hl-line .it-tail { display: inline; }


/* ─────────────────────────────────────────────────────────────────
   CUSTOM VERTICAL RHYTHM — lifecycle → capabilities
   The default `.section { padding: var(--section-y) 0 }` rhythm
   (clamp 48 → 100px each side, so ~96-200px between two adjacent
   sections) is too tight here — the Figma calls for an exact 265px
   gap between the lending lifecycle and the platform capabilities
   sections. Drop the lifecycle's bottom padding to zero so the gap
   is owned entirely by the next section's top padding (265px).
   ───────────────────────────────────────────────────────────────── */
.product-lending .pl-lifecycle               { padding-bottom: 0; }
.product-lending .pl-lifecycle + .po-caps    { padding-top: 120px; }


/* ─────────────────────────────────────────────────────────────────
   FINAL CTA — accent band variant (mirrors po-finalcta / pc-finalcta)
   ───────────────────────────────────────────────────────────────── */
.pl-finalcta {
	background: var(--accent);
}
.pl-finalcta h2 {
	display: flex;
	flex-direction: column;
	letter-spacing: -0.02em;
	line-height: 0.9;
}
.pl-finalcta h2 .hl-line { line-height: 0.9; }
.pl-finalcta h2 .it-tail { line-height: 0.9; }
.pl-finalcta p {
	font-size: var(--fs-body-sm);
	line-height: 1.54;
}
.pl-finalcta .btn-orange {
	background: var(--orange);
	color: var(--cream);
	border: 1px solid rgba(26, 26, 26, 0.15);
	border-radius: 12px;
	padding: 22px 32px;
	font-weight: 600;
}
.pl-finalcta .btn-orange:hover {
	box-shadow: 0 10px 30px rgba(255, 79, 0, .35);
	transform: translateY(-1px);
}

/* Consumer Lending inverts the colours — the band is orange (the
   consumer accent), so an orange button would disappear into it.
   Override the button to green here so it reads as the inverse of
   the band, matching the same green-on-orange pattern used by the
   Loquat IQ final CTA. */
.product-lending.pl-theme-consumer .pl-finalcta .btn-orange {
	background: var(--green);
}
.product-lending.pl-theme-consumer .pl-finalcta .btn-orange:hover {
	box-shadow: 0 10px 30px rgba(11, 102, 35, .35);
}