/* ===========================================================================
   SIMPLE PROPERTY LOANS - LANDING PAGES (brokers + investors)
   /marketing-funnel-brokers and /marketing-funnel-investors share this file.

   Only the NEW sections live here: hero, comparison / reasons, the enquiry
   band, stat cards, case study cards and the closing band. Everything else on
   those pages is the site's own section, placed as a component instance
   (Home calculator, How It Works, reviews; Invest calculator, journey,
   reviews, FAQ), so a fix to any of them lands on both pages at once.

   Theme: .lp--broker (orange hero, orange headings) / .lp--investor (navy
   hero, navy headings), per the brand rule that invest pages read navy.

   Specificity: the site head forces font-weight 400 and some heading colours
   with !important at up to (4,1,2). Where a weight or heading colour matters
   here it carries the :not(#_a):not(#_b):not(#_c):not(#_d) suffix (four never-matching :not(#id) hooks) and
   !important. Every other rule is plain html body .lp-* so it outranks the
   site's generic element defaults without fighting them.
   =========================================================================== */

html body .lp {
  --lp-navy: #111437;
  --lp-orange: #E46021;
  --lp-orange-deep: #CF5218;
  --lp-tan: #FEF3EC;
  --lp-tan-deep: #FBE6D9;
  --lp-slate: #585A73;
  --lp-peach: #EE8C5C;
  --lp-ink-soft: rgba(17, 20, 55, .74);
  --lp-hair: rgba(17, 20, 55, .12);
  --lp-col: 1030px;
  --lp-gut: 20px;
  --lp-ease: cubic-bezier(.16, 1, .3, 1);
  --lp-h2: clamp(2.05rem, 1.5rem + 2.4vw, 3.25rem);
  position: relative;
  box-sizing: border-box;
  color: var(--lp-navy);
  background: var(--lp-tan);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
html body .lp *, html body .lp *::before, html body .lp *::after { box-sizing: border-box; }
/* Resets carry no weight of their own (:where), so every component rule below wins. */
html body .lp :where(p, h1, h2, h3, ul, ol, dl, dd, dt, figure) { margin: 0; padding: 0; }
html body .lp :where(ul, ol) { list-style: none; }
html body .lp :where(a) { text-decoration: none; }
html body .lp :where(img, video) { display: block; max-width: 100%; }

/* One column, aligned to the header's logo (205px in at 1440, 20px on phones). */
html body .lp-wrap { width: 100%; max-width: calc(var(--lp-col) + 2 * var(--lp-gut)); margin: 0 auto; padding: 0 var(--lp-gut); }
html body .lp-sec { padding: clamp(72px, 8vw, 116px) 0; }

/* ---- Type ---- */
html body .lp .lp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .95rem; line-height: 1.3; letter-spacing: 0; color: currentColor;
}
html body .lp .lp-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
html body .lp h2.lp-h2:not(#_a):not(#_b):not(#_c):not(#_d) {
  font-size: var(--lp-h2) !important; line-height: 1.1 !important; letter-spacing: -.015em !important;
  font-weight: 400 !important; color: var(--lp-head, var(--lp-navy)) !important; text-wrap: balance; max-width: 22ch;
}
html body .lp .lp-lede { font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height: 1.6; color: var(--lp-ink-soft); max-width: 60ch; margin-top: 18px; }
html body .lp--broker { --lp-head: var(--lp-orange); }
html body .lp--investor { --lp-head: var(--lp-navy); }

/* ---- Buttons: the site's slab (label + contrasting arrow block) ---- */
html body .lp .lp-btn {
  position: relative; display: inline-flex; align-items: stretch; overflow: hidden; isolation: isolate;
  min-height: 54px; border-radius: 6px; font-size: 1.05rem; line-height: 1.1;
  box-shadow: 0 1px 2px rgba(17, 20, 55, .12), 0 6px 18px rgba(17, 20, 55, .10);
  transition: transform .18s var(--lp-ease), box-shadow .25s ease;
}
html body .lp .lp-btn > span { display: inline-flex; align-items: center; }
html body .lp .lp-btn-label { padding: 0 26px; }
html body .lp .lp-btn-arrow { padding: 0 18px; }
html body .lp .lp-btn-arrow svg { width: 20px; height: 20px; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
html body .lp .lp-btn:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(17, 20, 55, .12), 0 14px 30px rgba(17, 20, 55, .18); }
html body .lp .lp-btn:hover .lp-btn-arrow svg { transform: translateX(4px); }
html body .lp .lp-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(17, 20, 55, .12); }
html body .lp .lp-btn:focus-visible { outline: 3px solid var(--lp-navy); outline-offset: 3px; }
html body .lp .lp-btn--orange { background: var(--lp-orange); color: var(--lp-navy); }
html body .lp .lp-btn--orange .lp-btn-arrow { background: var(--lp-navy); color: var(--lp-tan); }
html body .lp .lp-btn--navy { background: var(--lp-navy); color: var(--lp-tan); }
html body .lp .lp-btn--navy .lp-btn-arrow { background: var(--lp-orange); color: var(--lp-navy); }
/* v2: where the arrow block would match the field behind it (navy on the navy
   hero, orange on the orange hero), it turns tan so the button keeps its shape. */
html body .lp-hero--broker .lp-btn--navy .lp-btn-arrow,
html body .lp-hero--investor .lp-btn--orange .lp-btn-arrow { background: var(--lp-tan); color: var(--lp-navy); }
html body .lp .lp-btn--tan { background: var(--lp-tan); color: var(--lp-navy); }
html body .lp .lp-btn--tan .lp-btn-arrow { background: var(--lp-orange); color: var(--lp-navy); }
/* One restrained sheen on hover. */
html body .lp .lp-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-120%);
}
html body .lp .lp-btn:hover::after { animation: lp-sheen .9s var(--lp-ease); }
@keyframes lp-sheen { to { transform: translateX(120%); } }

html body .lp .lp-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 4px;
  font-size: 1.05rem; color: currentColor;
}
html body .lp .lp-link span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--lp-ease); padding-bottom: 2px; }
html body .lp .lp-link:hover span { background-size: 100% 1px; }
html body .lp .lp-link svg { width: 16px; height: 16px; transition: transform .3s var(--lp-ease); }
html body .lp .lp-link:hover svg { transform: translateX(4px); }
html body .lp .lp-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
html body .lp .lp-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

/* ===========================================================================
   1. HERO
   Copy sits on the header's column; the video bleeds toward the right edge.
   =========================================================================== */
html body .lp-hero {
  overflow: hidden;
  padding: clamp(48px, 6vw, 88px) 0 0;
  padding-left: max(var(--lp-gut), calc((100% - var(--lp-col)) / 2));
  padding-right: clamp(20px, 4.4vw, 64px);
}
html body .lp-hero--broker { background: var(--lp-orange); color: var(--lp-navy); }
html body .lp-hero--investor { background: var(--lp-navy); color: var(--lp-tan); }
html body .lp-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: clamp(40px, 4.5vw, 72px); align-items: center; }
html body .lp-hero-copy { max-width: 600px; }
html body .lp-hero h1.lp-hero-title:not(#_a):not(#_b):not(#_c):not(#_d) {
  margin-top: 18px; font-size: clamp(2.6rem, 1.55rem + 3vw, 4.25rem) !important; line-height: 1.02 !important;
  letter-spacing: -.02em !important; font-weight: 300 !important; text-wrap: balance;
  color: var(--lp-title) !important;
}
html body .lp-hero--broker { --lp-title: var(--lp-tan); }
html body .lp-hero--investor { --lp-title: var(--lp-tan); }
html body .lp-hero-title em { font-style: normal; color: var(--lp-title-em); }
html body .lp-hero--broker { --lp-title-em: var(--lp-navy); }
html body .lp-hero--investor { --lp-title-em: var(--lp-orange); }
html body .lp-hero .lp-hero-lede { margin-top: 22px; font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height: 1.6; max-width: 54ch; }
html body .lp-hero--broker .lp-hero-lede { color: var(--lp-navy); }
html body .lp-hero--investor .lp-hero-lede { color: rgba(254, 243, 236, .84); }

html body .lp-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin-top: 34px; }
html body .lp-stat { padding: 0 clamp(18px, 2.2vw, 30px); border-left: 1px solid var(--lp-rule); }
html body .lp-stat:first-child { padding-left: 0; border-left: 0; }
html body .lp-hero--broker { --lp-rule: rgba(17, 20, 55, .22); }
html body .lp-hero--investor { --lp-rule: rgba(254, 243, 236, .18); }
html body .lp-stat-val { display: block; font-size: clamp(2rem, 1.5rem + 1.4vw, 2.85rem); line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; }
html body .lp-hero--broker .lp-stat-val { color: var(--lp-tan); }
html body .lp-hero--investor .lp-stat-val { color: var(--lp-tan); }
html body .lp-stat-val small { font-size: .42em; letter-spacing: 0; margin-left: 4px; }
html body .lp-stat-val .lp-pre { font-size: .42em; letter-spacing: 0; margin-right: 6px; vertical-align: .15em; }
html body .lp-stat-lbl { display: block; margin-top: 8px; font-size: .95rem; line-height: 1.35; max-width: 16ch; }
html body .lp-hero--broker .lp-stat-lbl { color: var(--lp-navy); }
html body .lp-hero--investor .lp-stat-lbl { color: rgba(254, 243, 236, .78); }
html body .lp-hero .lp-ctas { margin-top: 36px; }
html body .lp-hero .lp-link { color: var(--lp-hero-link); }
html body .lp-hero--broker { --lp-hero-link: var(--lp-navy); }
html body .lp-hero--investor { --lp-hero-link: var(--lp-tan); }
html body .lp-hero--broker .lp-btn:focus-visible { outline-color: var(--lp-navy); }
html body .lp-hero--investor .lp-btn:focus-visible { outline-color: var(--lp-orange); }

/* Video: the Invest page's film, in a frame with an offset block behind it. */
html body .lp-hero-media { position: relative; }
html body .lp-frame { position: relative; z-index: 1; border-radius: 14px; overflow: hidden; background: #0b0d27; aspect-ratio: 16 / 9; box-shadow: 0 30px 60px -20px rgba(10, 12, 38, .45), 0 10px 24px rgba(10, 12, 38, .18); }
html body .lp-frame video { width: 100%; height: 100%; object-fit: cover; }
html body .lp-hero-media::before {
  content: ""; position: absolute; z-index: 0; inset: 22px -22px -22px 22px; border-radius: 16px;
  background: var(--lp-block);
}
html body .lp-hero--broker { --lp-block: var(--lp-navy); }
html body .lp-hero--investor { --lp-block: var(--lp-orange); }
html body .lp-hero-media figcaption { position: relative; z-index: 1; margin-top: 40px; font-size: .9rem; opacity: .8; }

/* Two faint rings behind the video, the same device as the Invest hero. */
html body .lp-rings { position: absolute; z-index: 0; right: -140px; top: -180px; width: 720px; height: 720px; pointer-events: none; }
html body .lp-rings::before, html body .lp-rings::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--lp-ring); }
html body .lp-rings::after { inset: 110px; border-style: dashed; animation: lp-spin 90s linear infinite; }
html body .lp-hero--broker { --lp-ring: rgba(254, 243, 236, .22); }
html body .lp-hero--investor { --lp-ring: rgba(254, 243, 236, .10); }
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* Trust strip: verified facts in place of partner logos. */
/* The hero's own left padding already puts it on the column. */
html body .lp-hero .lp-trust-wrap, html body .lp-hero .lp-hero-foot { max-width: var(--lp-col); margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
html body .lp-trust-wrap { position: relative; z-index: 1; margin-top: clamp(56px, 6vw, 84px); }
html body .lp-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--lp-rule); }
html body .lp-trust li { display: flex; align-items: center; gap: 12px; padding: 22px 18px 26px 0; font-size: .95rem; line-height: 1.35; }
html body .lp-trust li + li { padding-left: 18px; border-left: 1px solid var(--lp-rule); }
html body .lp-trust svg { flex: none; width: 22px; height: 22px; }
html body .lp-hero--broker .lp-trust svg { color: var(--lp-tan); }
html body .lp-hero--investor .lp-trust svg { color: var(--lp-orange); }
html body .lp-hero--investor .lp-trust li { color: rgba(254, 243, 236, .86); }
html body .lp-hero-foot { position: relative; z-index: 1; padding-bottom: 20px; font-size: .8rem; line-height: 1.5; color: rgba(254, 243, 236, .6); max-width: 70ch; }

/* Entrance: lines rise once on load (JS adds .lp-go; without JS nothing hides). */
html.lp-js body .lp-hero [data-lp-rise] { opacity: 0; transform: translateY(22px); }
html.lp-js body .lp-hero.lp-go [data-lp-rise] { opacity: 1; transform: none; transition: opacity .8s var(--lp-ease), transform .9s var(--lp-ease); transition-delay: calc(var(--i, 0) * 90ms); }
html.lp-js body .lp-hero .lp-hero-media { opacity: 0; transform: translateY(26px) scale(.97); }
html.lp-js body .lp-hero.lp-go .lp-hero-media { opacity: 1; transform: none; transition: opacity 1s var(--lp-ease) .25s, transform 1.1s var(--lp-ease) .25s; }

/* ===========================================================================
   2a. COMPARISON TABLE (brokers)
   =========================================================================== */
html body .lp-cmp-wrap { margin-top: clamp(40px, 4vw, 56px); }
html body .lp-cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 1rem; }
html body .lp-cmp th, html body .lp-cmp td { padding: 18px 14px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--lp-hair); font-weight: 400; }
html body .lp-cmp thead th { border-bottom: 1px solid var(--lp-hair); padding-top: 26px; padding-bottom: 22px; line-height: 1.2; font-size: 1.05rem; color: var(--lp-navy); }
html body .lp-cmp thead th small { display: block; font-size: .8rem; opacity: .7; margin-bottom: 2px; }
html body .lp-cmp th[scope="row"], html body .lp-cmp thead th:first-child { text-align: left; padding-left: 0; color: var(--lp-navy); }
html body .lp-cmp col.lp-cmp-feat { width: 40%; }
html body .lp-cmp td { color: var(--lp-ink-soft); }
/* The Simple column is a navy pillar. */
html body .lp-cmp .lp-cmp-us { position: relative; background: var(--lp-navy); color: var(--lp-tan); border-bottom-color: rgba(254, 243, 236, .12); }
html body .lp-cmp thead .lp-cmp-us { border-radius: 12px 12px 0 0; color: var(--lp-tan); font-size: 1.12rem; }
html body .lp-cmp tbody tr:last-child .lp-cmp-us { border-radius: 0 0 12px 12px; border-bottom: 0; }
html body .lp-cmp thead .lp-cmp-us::after { content: ""; position: absolute; left: 50%; top: 0; width: 44px; height: 3px; transform: translateX(-50%); background: var(--lp-orange); border-radius: 0 0 3px 3px; }
html body .lp-cmp .lp-ico { display: inline-block; width: 22px; height: 22px; vertical-align: middle; }
html body .lp-cmp .lp-ico--yes { color: var(--lp-navy); }
html body .lp-cmp .lp-cmp-us .lp-ico--yes { color: var(--lp-orange); }
html body .lp-cmp .lp-ico--no { color: rgba(17, 20, 55, .38); width: 18px; height: 18px; }
html body .lp-cmp .lp-vary { font-size: .88rem; color: rgba(17, 20, 55, .55); }
html body .lp-cmp .lp-cmp-fig { font-size: 1.05rem; white-space: nowrap; }
html body .lp-cmp .lp-cmp-us .lp-cmp-fig { font-size: 1.15rem; color: var(--lp-tan); }
html body .lp-cmp .lp-short { display: none; }
html body .lp-cmp-foot { margin-top: 36px; }
html body .lp-cmp tbody tr { transition: background-color .2s ease; }
html body .lp-cmp tbody tr:hover th, html body .lp-cmp tbody tr:hover td:not(.lp-cmp-us) { background: rgba(17, 20, 55, .025); }
/* Reveal: rows settle in turn, ticks draw, the pillar rises. */
html.lp-js body .lp-cmp[data-lp-reveal] tbody tr { opacity: 0; transform: translateY(10px); }
html.lp-js body .lp-cmp[data-lp-reveal].is-in tbody tr { opacity: 1; transform: none; transition: opacity .6s var(--lp-ease), transform .7s var(--lp-ease); transition-delay: calc(var(--r, 0) * 70ms + 120ms); }
html.lp-js body .lp-cmp[data-lp-reveal] .lp-ico--yes path { stroke-dasharray: 24; stroke-dashoffset: 24; }
html.lp-js body .lp-cmp[data-lp-reveal].is-in .lp-ico--yes path { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--lp-ease); transition-delay: calc(var(--r, 0) * 70ms + 380ms); }

/* ===========================================================================
   2b. REASONS (investors) - the Invest page's three reasons and icons
   =========================================================================== */
html body .lp-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: clamp(40px, 4vw, 56px); }
html body .lp-why-card { position: relative; padding: 30px 28px 32px; border-radius: 14px; background: rgba(255, 255, 255, .35); border: 1px solid var(--lp-hair); transition: transform .35s var(--lp-ease), box-shadow .35s ease, border-color .35s ease; }
html body .lp-why-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(17, 20, 55, .25); border-color: rgba(228, 96, 33, .45); }
html body .lp-why-ico { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; border: 1.5px solid var(--lp-orange); color: var(--lp-navy); background: rgba(228, 96, 33, .06); }
html body .lp-why-ico svg { width: 36px; height: 36px; }
html body .lp-why-ico .inv3x-accent { stroke: var(--lp-orange); }
html body .lp .lp-why-card h3:not(#_a):not(#_b):not(#_c):not(#_d) { margin-top: 26px; font-size: 1.5rem !important; line-height: 1.2 !important; color: var(--lp-navy) !important; font-weight: 400 !important; letter-spacing: -.01em !important; }
html body .lp-why-card p { margin-top: 10px; color: var(--lp-ink-soft); line-height: 1.6; }
html body .lp-why-card .inv3x-fig { color: var(--lp-orange); }
html body .lp-why-foot { margin-top: 40px; }
html.lp-js body .lp-why-card .lp-why-ico path { stroke-dasharray: 60; stroke-dashoffset: 60; }
html.lp-js body .lp-why-card.is-in .lp-why-ico path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--lp-ease) .25s; }

/* ===========================================================================
   3. ENQUIRY BAND - the form in the design, as one confident button
   =========================================================================== */
html body .lp-cta { overflow: hidden; padding: clamp(80px, 9vw, 128px) 0; }
html body .lp-cta--orange { background: var(--lp-orange); color: var(--lp-navy); }
html body .lp-cta--navy { background: var(--lp-navy); color: var(--lp-tan); }
html body .lp-cta-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
html body .lp-cta h2.lp-cta-title:not(#_a):not(#_b):not(#_c):not(#_d) {
  font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.6rem) !important; line-height: 1.02 !important; letter-spacing: -.02em !important;
  font-weight: 300 !important; color: var(--lp-tan) !important; max-width: 14ch; text-wrap: balance;
}
html body .lp-cta-sub { margin-top: 20px; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; max-width: 46ch; }
html body .lp-cta--orange .lp-cta-sub { color: var(--lp-navy); }
html body .lp-cta--navy .lp-cta-sub { color: rgba(254, 243, 236, .82); }
html body .lp-cta-action { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
html body .lp-cta-alt { font-size: 1rem; line-height: 1.5; }
html body .lp-cta-alt a { color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity .2s; }
html body .lp-cta-alt a:hover { opacity: .75; }

/* The big button. A slab like every other on the site, at double size, with a
   slow breathing halo, a magnetic pull toward the pointer and a sheen. */
html body .lp .lp-wow {
  position: relative; display: inline-flex; align-items: stretch; isolation: isolate;
  min-height: 84px; border-radius: 10px; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.1;
  transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .35s var(--lp-ease), box-shadow .3s ease;
  box-shadow: 0 2px 4px rgba(10, 12, 38, .16), 0 22px 44px -16px rgba(10, 12, 38, .5);
}
html body .lp .lp-wow > span { position: relative; z-index: 1; display: inline-flex; align-items: center; }
html body .lp .lp-wow-label { padding: 0 36px; border-radius: 10px 0 0 10px; }
html body .lp .lp-wow-arrow { padding: 0 28px; border-radius: 0 10px 10px 0; overflow: hidden; }
html body .lp .lp-wow-arrow svg { width: 28px; height: 28px; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
html body .lp .lp-wow:hover .lp-wow-arrow svg { transform: translateX(6px); }
html body .lp .lp-wow:active { transform: translate(var(--mx, 0px), calc(var(--my, 0px) + 2px)); }
html body .lp .lp-wow:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
html body .lp .lp-wow--navy .lp-wow-label { background: var(--lp-navy); color: var(--lp-tan); }
html body .lp .lp-wow--navy .lp-wow-arrow { background: var(--lp-tan); color: var(--lp-navy); }
html body .lp .lp-wow--orange .lp-wow-label { background: var(--lp-orange); color: var(--lp-navy); }
html body .lp .lp-wow--orange .lp-wow-arrow { background: var(--lp-tan); color: var(--lp-navy); }
html body .lp .lp-wow::before {
  content: ""; position: absolute; z-index: 0; inset: -10px; border-radius: 18px;
  border: 1.5px solid currentColor; opacity: 0; pointer-events: none;
  animation: lp-halo 3.2s var(--lp-ease) infinite;
}
html body .lp .lp-wow--navy::before { color: var(--lp-navy); }
html body .lp .lp-wow--orange::before { color: var(--lp-orange); }
@keyframes lp-halo { 0% { opacity: .55; transform: scale(.94); } 70%, 100% { opacity: 0; transform: scale(1.08); } }
html body .lp .lp-wow::after {
  content: ""; position: absolute; z-index: 2; inset: 0; border-radius: 10px; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .3) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%; background-position: 150% 0; animation: lp-wow-sheen 5s ease-in-out 1.5s infinite;
}
/* The sheen moves by background-position, so it never paints outside the button. */
@keyframes lp-wow-sheen { 0%, 70% { background-position: 150% 0; } 88%, 100% { background-position: -50% 0; } }

/* What happens next: three steps on a line that draws itself. */
html body .lp-next { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(48px, 5vw, 72px); padding-top: 34px; }
html body .lp-next::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--lp-next-line); transform-origin: 0 50%; }
html body .lp-cta--orange { --lp-next-line: rgba(17, 20, 55, .3); --lp-next-dot: var(--lp-navy); }
html body .lp-cta--navy { --lp-next-line: rgba(254, 243, 236, .22); --lp-next-dot: var(--lp-orange); }
html body .lp-next li { position: relative; font-size: 1rem; line-height: 1.45; padding-right: 12px; }
html body .lp-next li::before { content: ""; position: absolute; top: -39px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--lp-next-dot); box-shadow: 0 0 0 5px var(--lp-next-halo, transparent); }
html body .lp-cta--orange .lp-next li::before { --lp-next-halo: var(--lp-orange); }
html body .lp-cta--navy .lp-next li::before { --lp-next-halo: var(--lp-navy); }
html body .lp-next b { display: block; font-weight: 400; font-size: .85rem; opacity: .7; margin-bottom: 4px; }
html body .lp-cta--navy .lp-next li { color: rgba(254, 243, 236, .9); }
html.lp-js body .lp-next[data-lp-reveal]::before { transform: scaleX(0); }
html.lp-js body .lp-next[data-lp-reveal].is-in::before { transform: scaleX(1); transition: transform 1.3s var(--lp-ease); }
html.lp-js body .lp-next[data-lp-reveal] li { opacity: 0; transform: translateY(10px); }
html.lp-js body .lp-next[data-lp-reveal].is-in li { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s var(--lp-ease); transition-delay: calc(var(--i, 0) * 260ms + 250ms); }

html body .lp-cta .lp-rings { right: auto; left: -260px; top: auto; bottom: -420px; width: 760px; height: 760px; }
html body .lp-cta--orange { --lp-ring: rgba(254, 243, 236, .2); }
html body .lp-cta--navy { --lp-ring: rgba(254, 243, 236, .08); }

/* ===========================================================================
   4. STAT CARDS
   =========================================================================== */
html body .lp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 32px); }
html body .lp-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 340px;
  padding: 32px 32px 30px; border-radius: 14px; color: var(--lp-tan);
  transition: transform .4s var(--lp-ease), box-shadow .4s ease;
}
html body .lp-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -24px rgba(17, 20, 55, .45); }
html body .lp-card--slate { background: var(--lp-slate); }
html body .lp-card--orange { background: var(--lp-orange); color: var(--lp-navy); }
html body .lp-card--peach { background: var(--lp-peach); color: var(--lp-navy); }
html body .lp-card--navy { background: var(--lp-navy); }
html body .lp-card-k { font-size: 1.2rem; line-height: 1.3; max-width: 20ch; }
html body .lp-card-v { margin-top: auto; padding-top: 40px; font-size: clamp(3.4rem, 2.4rem + 3vw, 5.4rem); line-height: 1; letter-spacing: -.03em; text-align: right; white-space: nowrap; font-variant-numeric: proportional-nums; }
html body .lp-card-v small { font-size: .38em; letter-spacing: 0; margin-left: 6px; }
html body .lp-card-rule { display: block; height: 1px; margin-top: 22px; background: currentColor; opacity: .5; transform-origin: 100% 50%; }
html body .lp-card-d { margin-top: 16px; font-size: .95rem; line-height: 1.5; opacity: .9; }
html.lp-js body .lp-card[data-lp-reveal] .lp-card-rule { transform: scaleX(0); }
html.lp-js body .lp-card[data-lp-reveal].is-in .lp-card-rule { transform: scaleX(1); transition: transform 1.2s var(--lp-ease) .3s; }
html body .lp-cards-head { margin-bottom: clamp(36px, 4vw, 52px); }

/* ===========================================================================
   5. CASE STUDIES - one feature, three direct links, then the full page
   =========================================================================== */
html body .lp-cases-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
html body .lp-cases-head .lp-lede { max-width: 50ch; }
html body .lp-cases-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); margin-top: clamp(36px, 4vw, 52px); align-items: stretch; }
html body .lp-feature { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--lp-navy); color: var(--lp-tan); box-shadow: 0 24px 50px -28px rgba(17, 20, 55, .55); transition: transform .45s var(--lp-ease), box-shadow .45s ease; }
html body .lp-feature:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -28px rgba(17, 20, 55, .6); }
html body .lp-feature-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
html body .lp-feature-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--lp-ease); }
html body .lp-feature:hover .lp-feature-media img { transform: scale(1.07); }
html body .lp-feature-media::after { content: ""; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(to top, rgba(17, 20, 55, .75), transparent); }
html body .lp-chip { position: absolute; z-index: 1; left: 22px; bottom: 18px; padding: 6px 12px; border-radius: 99px; background: rgba(254, 243, 236, .92); color: var(--lp-navy); font-size: .82rem; line-height: 1.2; }
html body .lp-feature-body { display: flex; flex-direction: column; flex: 1; padding: 26px 30px 30px; }
html body .lp-feature-tags { font-size: .88rem; color: var(--lp-orange); }
html body .lp .lp-feature h3:not(#_a):not(#_b):not(#_c):not(#_d) { margin-top: 6px; font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem) !important; line-height: 1.15 !important; color: var(--lp-tan) !important; font-weight: 400 !important; letter-spacing: -.01em !important; }
html body .lp-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; padding: 18px 0; border-top: 1px solid rgba(254, 243, 236, .16); border-bottom: 1px solid rgba(254, 243, 236, .16); }
html body .lp-metric-v { display: block; font-size: 1.45rem; line-height: 1.15; }
html body .lp-metric-l { display: block; margin-top: 4px; font-size: .82rem; color: rgba(254, 243, 236, .7); }
html body .lp-quote { margin-top: 20px; padding-left: 16px; border-left: 2px solid var(--lp-orange); font-style: italic; font-size: 1.02rem; line-height: 1.55; color: rgba(254, 243, 236, .9); }
html body .lp-read { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; color: var(--lp-tan); font-size: 1rem; }
html body .lp-read span { border-bottom: 1px solid var(--lp-orange); padding-bottom: 2px; }
html body .lp-read svg { width: 16px; height: 16px; color: var(--lp-orange); transition: transform .3s var(--lp-ease); }
html body .lp-feature:hover .lp-read svg, html body .lp-mini:hover .lp-mini-go svg { transform: translateX(4px); }
html body .lp-feature:focus-visible, html body .lp-mini:focus-visible { outline: 3px solid var(--lp-orange); outline-offset: 3px; }

html body .lp-minis { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
html body .lp-mini {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: stretch; gap: 18px; height: 100%;
  padding: 12px 18px 12px 12px; border-radius: 14px; background: rgba(255, 255, 255, .42); border: 1px solid var(--lp-hair); color: var(--lp-navy);
  transition: transform .35s var(--lp-ease), box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
}
html body .lp-mini:hover { transform: translateX(4px); border-color: rgba(228, 96, 33, .5); background: rgba(255, 255, 255, .7); box-shadow: 0 16px 30px -20px rgba(17, 20, 55, .35); }
html body .lp-mini-img { position: relative; min-height: 104px; border-radius: 10px; overflow: hidden; background: var(--lp-tan-deep); }
html body .lp-mini-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--lp-ease); }
html body .lp-mini:hover .lp-mini-img img { transform: scale(1.08); }
html body .lp-mini-body { display: flex; flex-direction: column; justify-content: center; padding: 4px 30px 4px 0; }
html body .lp-mini-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
html body .lp-mini-name { font-size: 1.25rem; line-height: 1.2; }
html body .lp-mini-size { font-size: 1.2rem; line-height: 1.2; white-space: nowrap; color: var(--lp-orange); }
html body .lp-mini-tags { display: block; margin-top: 4px; font-size: .84rem; line-height: 1.4; color: var(--lp-ink-soft); }
html body .lp-mini-why { display: block; margin-top: 8px; font-size: .9rem; line-height: 1.45; color: var(--lp-navy); }
html body .lp-mini-go { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--lp-hair); color: var(--lp-orange); transition: background-color .3s, border-color .3s, color .3s; }
html body .lp-mini:hover .lp-mini-go { background: var(--lp-orange); border-color: var(--lp-orange); color: var(--lp-navy); }
html body .lp-mini-go svg { width: 14px; height: 14px; transition: transform .3s var(--lp-ease); }
html body .lp-cases-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-top: clamp(32px, 3.4vw, 44px); padding-top: 26px; border-top: 1px solid var(--lp-hair); }
html body .lp-note { font-size: .85rem; line-height: 1.5; color: rgba(17, 20, 55, .6); max-width: 60ch; }

/* ===========================================================================
   6. CLOSING BAND
   =========================================================================== */
html body .lp-close { overflow: hidden; padding: clamp(80px, 9vw, 120px) 0; }
html body .lp-close--navy { background: var(--lp-navy); color: var(--lp-tan); }
html body .lp-close--orange { background: var(--lp-orange); color: var(--lp-navy); }
html body .lp-close-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px 64px; align-items: end; }
html body .lp-close h2.lp-close-title:not(#_a):not(#_b):not(#_c):not(#_d) { font-size: clamp(2.3rem, 1.5rem + 2.8vw, 4rem) !important; line-height: 1.04 !important; letter-spacing: -.02em !important; font-weight: 300 !important; color: var(--lp-tan) !important; max-width: 15ch; text-wrap: balance; }
html body .lp-close-sub { margin-top: 18px; font-size: 1.12rem; line-height: 1.6; max-width: 48ch; }
html body .lp-close--navy .lp-close-sub { color: rgba(254, 243, 236, .8); }
html body .lp-close-sub a { color: inherit; border-bottom: 1px solid currentColor; white-space: nowrap; }
html body .lp-close-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
html body .lp-close .lp-rings { right: -200px; top: -300px; }
html body .lp-close--navy { --lp-ring: rgba(254, 243, 236, .08); }
html body .lp-close--orange { --lp-ring: rgba(254, 243, 236, .2); }
html body .lp-close--navy .lp-link { color: var(--lp-tan); }
html body .lp-close--orange .lp-link { color: var(--lp-navy); }

/* ---- Generic reveal ---- */
html.lp-js body .lp [data-lp-reveal="up"] { opacity: 0; transform: translateY(24px); }
html.lp-js body .lp [data-lp-reveal="up"].is-in { opacity: 1; transform: none; transition: opacity .8s var(--lp-ease), transform .9s var(--lp-ease); transition-delay: calc(var(--i, 0) * 110ms); }
html.lp-js body .lp .lp-card[data-lp-reveal], html.lp-js body .lp .lp-why-card[data-lp-reveal] { opacity: 0; transform: translateY(30px); }
html.lp-js body .lp .lp-card[data-lp-reveal].is-in, html.lp-js body .lp .lp-why-card[data-lp-reveal].is-in { opacity: 1; transform: none; transition: opacity .8s var(--lp-ease), transform .9s var(--lp-ease), box-shadow .4s ease; transition-delay: calc(var(--i, 0) * 120ms); }
html.lp-js body .lp .lp-card[data-lp-reveal].is-in:hover, html.lp-js body .lp .lp-why-card[data-lp-reveal].is-in:hover { transition-delay: 0s; }
html.lp-js body .lp .lp-card[data-lp-reveal].is-in:hover { transform: translateY(-6px); }
html.lp-js body .lp .lp-why-card[data-lp-reveal].is-in:hover { transform: translateY(-4px); }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1100px) {
  html body .lp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  html body .lp-hero-copy { max-width: 680px; }
  html body .lp-hero-media { max-width: 720px; margin-right: 22px; }
  html body .lp-hero { padding-right: max(var(--lp-gut), calc((100% - var(--lp-col)) / 2)); }
  html body .lp-cases-grid { grid-template-columns: minmax(0, 1fr); }
  html body .lp-minis { grid-template-rows: none; }
}
@media (max-width: 900px) {
  html body .lp-cta-grid, html body .lp-close-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  html body .lp-close-actions { align-items: flex-start; }
  html body .lp-cards { grid-template-columns: minmax(0, 1fr); }
  html body .lp-card { min-height: 0; }
  html body .lp-card-v { padding-top: 28px; }
  html body .lp-why-grid { grid-template-columns: minmax(0, 1fr); }
  html body .lp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .lp-trust li:nth-child(3) { padding-left: 0; border-left: 0; }
  html body .lp-trust li:nth-child(n+3) { border-top: 1px solid var(--lp-rule); }
}
@media (max-width: 640px) {
  html body .lp-hero { padding-top: 36px; }
  html body .lp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  html body .lp-stat { padding: 0 10px; }
  html body .lp-stat-val { font-size: clamp(1.55rem, 7.4vw, 2rem); }
  html body .lp-stat-lbl { font-size: .85rem; }
  html body .lp-hero .lp-ctas, html body .lp-cta-action, html body .lp-close-actions, html body .lp-cmp-foot .lp-ctas, html body .lp-why-foot .lp-ctas { align-items: stretch; flex-direction: column; width: 100%; }
  html body .lp .lp-btn { width: 100%; justify-content: space-between; }
  html body .lp .lp-link { justify-content: center; }
  html body .lp .lp-wow { width: 100%; min-height: 72px; justify-content: space-between; }
  html body .lp .lp-wow-label { flex: 1; padding: 0 24px; }
  html body .lp-hero-media { margin-right: 14px; }
  html body .lp-hero-media::before { inset: 14px -14px -14px 14px; }
  html body .lp-trust { grid-template-columns: minmax(0, 1fr); }
  html body .lp-trust li, html body .lp-trust li + li { padding: 16px 0; border-left: 0; }
  html body .lp-trust li + li { border-top: 1px solid var(--lp-rule); }
  html body .lp-next { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 30px; gap: 22px; }
  html body .lp-next::before { top: 6px; bottom: 6px; left: 5px; right: auto; width: 1px; height: auto; transform-origin: 50% 0; }
  html.lp-js body .lp-next[data-lp-reveal]::before { transform: scaleY(0); }
  html.lp-js body .lp-next[data-lp-reveal].is-in::before { transform: scaleY(1); }
  html body .lp-next li::before { top: 5px; left: -30px; }
  html body .lp-cmp th, html body .lp-cmp td { padding: 14px 4px; font-size: .9rem; }
  html body .lp-cmp thead th { font-size: .9rem; padding-top: 18px; padding-bottom: 16px; }
  html body .lp-cmp thead .lp-cmp-us { font-size: .95rem; }
  html body .lp-cmp col.lp-cmp-feat { width: 37%; }
  html body .lp-cmp .lp-long { display: none; }
  html body .lp-cmp .lp-short { display: inline; }
  html body .lp-cmp .lp-cmp-fig, html body .lp-cmp .lp-cmp-us .lp-cmp-fig { font-size: .9rem; white-space: normal; }
  html body .lp-cmp .lp-vary { font-size: .78rem; }
  html body .lp-cmp .lp-ico { width: 20px; height: 20px; }
  html body .lp-feature-body { padding: 22px 20px 24px; }
  html body .lp-metric-v { font-size: 1.2rem; }
  html body .lp-mini { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 10px 12px 10px 10px; }
  html body .lp-mini-img { min-height: 96px; }
  html body .lp-mini-why { display: none; }
  html body .lp-mini-name { font-size: 1.1rem; }
  html body .lp-mini-size { font-size: 1.05rem; }
  html body .lp-card { padding: 26px 24px 24px; }
  html body .lp-close-title br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html body .lp *, html body .lp *::before, html body .lp *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html body .lp .lp-wow { transform: none !important; }
}

/* ---- Investor page: the footer takes the Invest look and legal wording
   (it keys off .inv1, which this page carries as a hidden marker). ---- */
html body .lp-marker { display: none !important; }


/* ===========================================================================
   7. SMALL SHARED PIECES
   =========================================================================== */
html body .lp-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ===========================================================================
   8. FAQ on the landing pages
   Brokers carry the Invest FAQ's markup with the borrower questions (.lp-faq);
   investors carry the Invest FAQ component itself. Both are pulled onto the
   landing column (205px in at 1440) instead of the Invest page's wider one.
   =========================================================================== */
html body .lp-faq, body:has(.lp-marker) .splport-inv-faq { --container-max: 1070px; --gutter: 20px; }
html body .lp-faq { background: #FEF3EC; }
/* The chapter title: the Invest page's own heading rule, in the brokers' orange. */
html body .lp-faq h2.splport-inv-faq-ew:not(#_a):not(#_b):not(#_c):not(#_d) {
  display: block; margin: 0; max-width: 18ch; text-transform: none;
  font-size: var(--text-h2) !important; line-height: var(--leading-heading) !important;
  letter-spacing: var(--tracking-display) !important; font-weight: 400 !important; color: #E46021 !important;
}
html body .lp-faq .splport-inv-faq-ew::before { display: none; }
html body .lp-faq .splport-inv-faq-a ul { margin: .6rem 0 0; padding-left: 1.2em; list-style: disc; }
html body .lp-faq .splport-inv-faq-a li + li { margin-top: .35rem; }
html body .lp-faq .splport-inv-faq-a a { color: inherit; text-decoration: underline; text-decoration-color: #E46021; text-underline-offset: 3px; }


/* ===========================================================================
   11. v3 REFINEMENTS (2026-09-24, from Derick's review)
   =========================================================================== */
html body .lp { --lp-ink-soft: rgba(17, 20, 55, .8); }

/* ---- The film is just the film: no coloured block behind it. ---- */
html body .lp-hero-media::before { content: none; display: none; }
html body .lp-hero .lp-frame { box-shadow: 0 34px 70px -28px rgba(10, 12, 38, .6), 0 0 0 1px rgba(254, 243, 236, .16); }
@media (max-width: 1100px) { html body .lp-hero .lp-hero-media { margin-right: 0; } }

/* ---- Body text on orange is white. ---- */
html body .lp-hero--broker .lp-eyebrow,
html body .lp-hero--broker .lp-hero-lede,
html body .lp-hero--broker .lp-stat-lbl,
html body .lp-cta--orange .lp-cta-sub,
html body .lp-cta--orange .lp-cta-alt,
html body .lp-cta--orange .lp-next li,
html body .lp-close--orange .lp-close-sub,
html body .lp-close--orange .lp-link,
html body .lp-card--orange { color: #fff; }
html body .lp-hero--broker { --lp-rule: rgba(255, 255, 255, .32); }
html body .lp-cta--orange { --lp-next-line: rgba(255, 255, 255, .5); --lp-next-dot: #fff; }
html body .lp-cta--orange .lp-next b { opacity: .85; }
html body .lp-card--orange .lp-card-rule { opacity: .6; }

/* ---- "Why us?" is a real button: outlined, fills on hover, arrow drops. ---- */
html body .lp .lp-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px;
  padding: 0 22px 0 26px; border-radius: 6px; border: 1.5px solid var(--lp-ghost-bd); color: var(--lp-ghost);
  font-size: 1.05rem; line-height: 1; background: var(--lp-ghost-bg);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .18s var(--lp-ease), box-shadow .25s ease;
}
html body .lp .lp-ghost svg { width: 16px; height: 16px; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
html body .lp .lp-ghost:hover { background: var(--lp-ghost-hbg); color: var(--lp-ghost-hfg); border-color: var(--lp-ghost-hbg); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(10, 12, 38, .35); }
html body .lp .lp-ghost:hover svg { transform: translateY(3px); }
html body .lp .lp-ghost:active { transform: translateY(0); }
html body .lp .lp-ghost:focus-visible { outline: 3px solid var(--lp-ghost); outline-offset: 3px; }
html body .lp-hero--broker { --lp-ghost: #fff; --lp-ghost-bd: rgba(255, 255, 255, .85); --lp-ghost-bg: rgba(255, 255, 255, .08); --lp-ghost-hbg: #fff; --lp-ghost-hfg: var(--lp-orange-deep); }
html body .lp-hero--investor { --lp-ghost: var(--lp-tan); --lp-ghost-bd: rgba(254, 243, 236, .6); --lp-ghost-bg: rgba(254, 243, 236, .04); --lp-ghost-hbg: var(--lp-tan); --lp-ghost-hfg: var(--lp-navy); }

/* ---- Trust points: larger two-line cards with an icon badge. ---- */
html body .lp-hero { padding-bottom: clamp(44px, 5vw, 72px); }
html body .lp-hero .lp-trust-wrap { margin-top: clamp(48px, 5vw, 72px); }
html body .lp-hero .lp-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; border-top: 0; }
html body .lp-hero .lp-trust li, html body .lp-hero .lp-trust li + li {
  display: flex; align-items: center; gap: 14px; padding: 18px 18px; border: 1px solid var(--lp-trust-bd); border-radius: 14px;
  background: var(--lp-trust-bg); color: var(--lp-trust-fg); font-size: 1rem;
  transition: transform .35s var(--lp-ease), background-color .3s ease;
}
html body .lp-hero .lp-trust li:hover { transform: translateY(-3px); background: var(--lp-trust-hbg); }
html body .lp-hero .lp-trust-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--lp-trust-ico-bg); color: var(--lp-trust-ico); }
html body .lp-hero .lp-trust .lp-trust-ico svg { width: 22px; height: 22px; color: inherit; }
html body .lp-hero .lp-trust b { display: block; font-weight: 400; font-size: 1.32rem; line-height: 1.15; letter-spacing: -.01em; }
html body .lp-hero .lp-trust small { display: block; margin-top: 4px; font-size: .9rem; line-height: 1.35; opacity: .9; }
html body .lp-hero--broker { --lp-trust-bg: rgba(255, 255, 255, .12); --lp-trust-hbg: rgba(255, 255, 255, .18); --lp-trust-bd: rgba(255, 255, 255, .3); --lp-trust-fg: #fff; --lp-trust-ico-bg: #fff; --lp-trust-ico: var(--lp-orange-deep); }
html body .lp-hero--investor { --lp-trust-bg: rgba(254, 243, 236, .05); --lp-trust-hbg: rgba(254, 243, 236, .09); --lp-trust-bd: rgba(254, 243, 236, .14); --lp-trust-fg: var(--lp-tan); --lp-trust-ico-bg: var(--lp-orange); --lp-trust-ico: var(--lp-navy); }
html body .lp-hero .lp-hero-foot { margin-top: 22px; padding-bottom: 0; }
@media (max-width: 1100px) { html body .lp-hero .lp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  html body .lp-hero .lp-trust { gap: 10px; }
  html body .lp-hero .lp-trust li, html body .lp-hero .lp-trust li + li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  html body .lp-hero .lp-trust-ico { width: 38px; height: 38px; }
  html body .lp-hero .lp-trust .lp-trust-ico svg { width: 19px; height: 19px; }
  html body .lp-hero .lp-trust b { font-size: 1.15rem; }
  html body .lp-hero .lp-trust small { font-size: .82rem; }
  html body .lp .lp-ghost { width: 100%; }
}

/* ---- Comparison (brokers): a card, a raised navy pillar with white ticks,
   an icon per row, the design's illustration beside the heading. ---- */
html body .lp-cmp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; }
html body .lp-art { margin: 0; }
html body .lp-art img { display: block; width: 100%; height: auto; }
html body .lp-art--balance { width: clamp(220px, 24vw, 330px); margin-bottom: -14px; }
html body .lp-cmp-card {
  position: relative; margin-top: 52px; padding: 0 30px 6px; border-radius: 22px;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(17, 20, 55, .08);
  box-shadow: 0 40px 80px -50px rgba(17, 20, 55, .45), 0 2px 6px rgba(17, 20, 55, .04);
}
html body .lp-cmp-card .lp-cmp { font-size: 1.05rem; }
html body .lp-cmp col.lp-cmp-feat-col { width: 39%; }
html body .lp-cmp col.lp-cmp-us-col { width: 23%; }
html body .lp-cmp-card .lp-cmp th, html body .lp-cmp-card .lp-cmp td { padding: 17px 14px; border-bottom: 1px solid rgba(17, 20, 55, .08); }
html body .lp-cmp-card .lp-cmp thead th { padding-top: 30px; padding-bottom: 24px; font-size: 1.12rem; color: rgba(17, 20, 55, .85); border-bottom: 1px solid rgba(17, 20, 55, .14); }
html body .lp-cmp-card .lp-cmp thead th small { font-size: .82rem; opacity: .65; }
html body .lp-cmp-k { font-size: .95rem; opacity: .7; }
html body .lp-cmp-feat { display: flex; align-items: center; gap: 14px; font-size: 1.08rem; line-height: 1.3; color: var(--lp-navy); }
html body .lp-cmp-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(228, 96, 33, .1); color: var(--lp-orange-deep); transition: background-color .25s ease, color .25s ease, transform .35s var(--lp-ease); }
html body .lp-cmp-ico svg { width: 20px; height: 20px; }
/* The pillar: navy, white type, raised 18px above the card, a soft side shadow. */
html body .lp-cmp-card .lp-cmp .lp-cmp-us { background: var(--lp-navy); color: #fff; border-bottom-color: rgba(255, 255, 255, .1); box-shadow: 14px 0 26px -20px rgba(17, 20, 55, .6), -14px 0 26px -20px rgba(17, 20, 55, .6); }
html body .lp-cmp-card .lp-cmp thead .lp-cmp-us { position: relative; top: -18px; color: #fff; font-size: 1.2rem; line-height: 1.2; padding-top: 36px; border-radius: 16px 16px 0 0; border-bottom-color: rgba(255, 255, 255, .16); }
html body .lp-cmp-card .lp-cmp thead .lp-cmp-us::before { content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 18px; background: var(--lp-navy); }
html body .lp-cmp-card .lp-cmp thead .lp-cmp-us::after { top: 0; width: 56px; height: 4px; }
html body .lp-cmp-card .lp-cmp tbody tr:last-child .lp-cmp-us { border-radius: 0 0 16px 16px; }
html body .lp-cmp-card .lp-cmp tbody tr:last-child th, html body .lp-cmp-card .lp-cmp tbody tr:last-child td { border-bottom: 0; }
/* Marks */
html body .lp-yes { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(17, 20, 55, .08); color: var(--lp-navy); vertical-align: middle; }
html body .lp-yes svg { width: 18px; height: 18px; }
html body .lp-cmp .lp-cmp-us .lp-yes { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
html body .lp-no { display: inline-grid; place-items: center; width: 32px; height: 32px; color: rgba(17, 20, 55, .36); vertical-align: middle; }
html body .lp-no svg { width: 17px; height: 17px; }
html body .lp-cmp-card .lp-vary { display: inline-block; padding: 5px 11px; border-radius: 99px; background: rgba(17, 20, 55, .06); font-size: .85rem; line-height: 1.2; color: rgba(17, 20, 55, .62); }
html body .lp-cmp-card .lp-cmp .lp-cmp-fig { font-size: 1.05rem; color: rgba(17, 20, 55, .75); }
html body .lp-cmp-card .lp-cmp .lp-cmp-us .lp-cmp-fig { font-size: 1.28rem; color: #fff; }
/* Row hover */
html body .lp-cmp-card .lp-cmp tbody tr:hover th, html body .lp-cmp-card .lp-cmp tbody tr:hover td:not(.lp-cmp-us) { background: rgba(228, 96, 33, .05); }
html body .lp-cmp-card .lp-cmp tbody tr:hover .lp-cmp-us { background: #1c2052; }
html body .lp-cmp-card .lp-cmp tbody tr:hover .lp-cmp-ico { background: var(--lp-orange); color: #fff; transform: scale(1.06); }
html body .lp-cmp-foot { margin-top: 40px; }
/* Reveal: the new tick marks draw in */
html.lp-js body .lp-cmp[data-lp-reveal] .lp-yes path { stroke-dasharray: 18; stroke-dashoffset: 18; }
html.lp-js body .lp-cmp[data-lp-reveal].is-in .lp-yes path { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--lp-ease); transition-delay: calc(var(--r, 0) * 70ms + 380ms); }
@media (max-width: 900px) {
  html body .lp-cmp-head { grid-template-columns: minmax(0, 1fr); }
  html body .lp-art--balance { width: 220px; margin: 0; justify-self: end; }
}
@media (max-width: 640px) {
  html body .lp-cmp-card { margin-top: 40px; padding: 0 8px 4px; border-radius: 16px; }
  html body .lp-cmp-card .lp-cmp th, html body .lp-cmp-card .lp-cmp td { padding: 13px 4px; }
  html body .lp-cmp-card .lp-cmp thead th { font-size: .9rem; padding-top: 18px; padding-bottom: 14px; }
  html body .lp-cmp-card .lp-cmp thead .lp-cmp-us { top: -12px; padding-top: 22px; font-size: .95rem; }
  html body .lp-cmp-card .lp-cmp thead .lp-cmp-us::before { bottom: -12px; height: 12px; }
  html body .lp-cmp col.lp-cmp-feat-col { width: 36%; }
  html body .lp-cmp col.lp-cmp-us-col { width: 22%; }
  html body .lp-cmp-ico { display: none; }
  html body .lp-cmp-feat { font-size: .9rem; }
  html body .lp-yes { width: 28px; height: 28px; }
  html body .lp-yes svg { width: 16px; height: 16px; }
  html body .lp-cmp-card .lp-vary { padding: 4px 7px; font-size: .74rem; }
  html body .lp-cmp-card .lp-cmp .lp-cmp-fig, html body .lp-cmp-card .lp-cmp .lp-cmp-us .lp-cmp-fig { font-size: .88rem; }
  html body .lp-art--balance { width: 180px; }
}

/* ---- Enquiry bands: button under the copy, an illustration porthole with
   what-to-expect chips floating around it. ---- */
html body .lp-cta .lp-cta-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
html body .lp-cta-copy .lp-cta-action { margin-top: 36px; }
html body .lp-port-wrap { position: relative; justify-self: center; width: clamp(250px, 25vw, 340px); aspect-ratio: 1; margin: 0; }
html body .lp-port { position: absolute; inset: 0; display: grid; place-items: end center; overflow: hidden; border-radius: 50%; background: var(--lp-tan); box-shadow: 0 0 0 12px var(--lp-port-ring), 0 34px 70px -24px rgba(10, 12, 38, .55); }
html body .lp-port img { width: 72%; height: auto; margin-bottom: 7%; }
html body .lp-cta--orange { --lp-port-ring: rgba(255, 255, 255, .18); --lp-chip-bg: var(--lp-navy); --lp-chip-fg: #fff; --lp-chip-dot: var(--lp-orange); }
html body .lp-cta--navy { --lp-port-ring: rgba(254, 243, 236, .08); --lp-chip-bg: var(--lp-tan); --lp-chip-fg: var(--lp-navy); --lp-chip-dot: var(--lp-orange); }
html body .lp-chipf {
  position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 99px;
  background: var(--lp-chip-bg); color: var(--lp-chip-fg); font-size: .95rem; line-height: 1; white-space: nowrap;
  box-shadow: 0 16px 30px -14px rgba(10, 12, 38, .55); animation: lp-bob 5.5s ease-in-out infinite alternate;
}
html body .lp-chipf::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-chip-dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-chip-dot) 25%, transparent); }
html body .lp-chipf--1 { top: 9%; left: -22%; }
html body .lp-chipf--2 { top: 45%; right: -26%; animation-delay: -1.8s; }
html body .lp-chipf--3 { bottom: 7%; left: -12%; animation-delay: -3.4s; }
@keyframes lp-bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@media (max-width: 900px) {
  html body .lp-cta .lp-cta-grid { grid-template-columns: minmax(0, 1fr); }
  html body .lp-port-wrap { width: 240px; margin-top: 18px; }
}
@media (max-width: 640px) {
  html body .lp-port-wrap { width: 200px; }
  html body .lp-chipf { font-size: .8rem; padding: 9px 12px; gap: 7px; }
  html body .lp-chipf--1 { left: -30%; }
  html body .lp-chipf--2 { right: -34%; }
  html body .lp-chipf--3 { left: -22%; }
}

/* ---- Figures heading with an illustration beside it. ---- */
html body .lp-cards-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
html body .lp-art--bike { width: clamp(220px, 23vw, 320px); margin-bottom: -12px; }
html body .lp-art--frame { width: clamp(220px, 24vw, 330px); margin-bottom: -10px; }
html.lp-js body .lp [data-lp-reveal="ride"] { opacity: 0; transform: translateX(-60px); }
html.lp-js body .lp [data-lp-reveal="ride"].is-in { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.4s cubic-bezier(.22, 1, .36, 1); }
@media (max-width: 640px) { html body .lp-art--bike, html body .lp-art--frame { width: 200px; margin: 0 0 0 auto; } }

/* ---- Case studies: a deeper tan band and an Australia map with a pin per
   deal, linked both ways to its card. ---- */
html body .lp-sec--tint { background: #FBE7DA; }
html body .lp-sec--tint .lp-mini { background: rgba(255, 255, 255, .6); }
html body .lp-sec--tint .lp-mini:hover, html body .lp-mini.is-hot { background: #fff9f5; border-color: rgba(228, 96, 33, .55); transform: translateX(4px); box-shadow: 0 16px 30px -20px rgba(17, 20, 55, .35); }
html body .lp-mini.is-hot .lp-mini-go { background: var(--lp-orange); border-color: var(--lp-orange); color: var(--lp-navy); }
html body .lp-feature.is-hot { transform: translateY(-4px); box-shadow: 0 34px 60px -28px rgba(17, 20, 55, .6); }
html body .lp-cases-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px 56px; }
html body .lp-map { position: relative; width: clamp(280px, 30vw, 390px); margin: 0; }
html body .lp-map svg { display: block; width: 100%; height: auto; overflow: visible; }
html body .lp-map-land { fill: rgba(228, 96, 33, .13); stroke: rgba(228, 96, 33, .55); stroke-width: 1.2; stroke-linejoin: round; }
html body .lp-map-route { fill: none; stroke: var(--lp-navy); stroke-width: 1.6; stroke-dasharray: 3 6; stroke-linecap: round; opacity: .55; }
html body .lp-map-draw { fill: none; stroke: #fff; stroke-width: 8; stroke-dasharray: 1; stroke-dashoffset: 0; }
html.lp-js body .lp-map[data-lp-reveal] .lp-map-draw { stroke-dashoffset: 1; }
html.lp-js body .lp-map[data-lp-reveal].is-in .lp-map-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.45, 0, .2, 1) .3s; }
html body .lp-pin { cursor: default; }
html body .lp-pin-dot { fill: var(--lp-orange); stroke: #FBE7DA; stroke-width: 3; transform-box: fill-box; transform-origin: center; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), fill .25s ease; }
html body .lp-pin-pulse { fill: var(--lp-orange); transform-box: fill-box; transform-origin: center; animation: lp-pulse 2.6s ease-out infinite; animation-delay: calc(var(--p, 0) * .5s); }
@keyframes lp-pulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(3.4); opacity: 0; } }
html body .lp-pin text { font-size: 13px; fill: var(--lp-navy); paint-order: stroke; stroke: #FBE7DA; stroke-width: 5px; stroke-linejoin: round; transition: fill .25s ease; }
html body .lp-pin.is-hot .lp-pin-dot { transform: scale(1.5); fill: var(--lp-navy); }
html body .lp-pin.is-hot text { fill: var(--lp-orange-deep); }
html.lp-js body .lp-map[data-lp-reveal] .lp-pin { opacity: 0; }
html.lp-js body .lp-map[data-lp-reveal].is-in .lp-pin { opacity: 1; transition: opacity .5s ease; transition-delay: calc(var(--p, 0) * .45s + .35s); }
html body .lp-map-cap { margin-top: 12px; font-size: .88rem; line-height: 1.45; color: rgba(17, 20, 55, .7); text-align: center; }
html body .lp-map-cap b { display: block; font-weight: 400; font-size: 1.05rem; color: var(--lp-navy); }
@media (max-width: 900px) {
  html body .lp-cases-head { grid-template-columns: minmax(0, 1fr); }
  html body .lp-map { width: min(100%, 380px); justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  html body .lp-map-draw { stroke-dashoffset: 0 !important; }
  html body .lp-pin { opacity: 1 !important; }
}


/* ===========================================================================
   12. v4 (2026-09-24, Derick's second review + audit)
   =========================================================================== */

/* ---- One tan, everywhere. The case studies band is the page tan again, and
   cards are tan with a hairline and a soft shadow instead of a white wash. ---- */
html body .lp-sec--tint { background: var(--lp-tan); }
html body .lp-cmp-card { background: var(--lp-tan); border-color: rgba(17, 20, 55, .1); box-shadow: 0 30px 60px -40px rgba(17, 20, 55, .4), 0 1px 3px rgba(17, 20, 55, .05); }
html body .lp-why-card { background: var(--lp-tan); border-color: rgba(17, 20, 55, .1); box-shadow: 0 1px 3px rgba(17, 20, 55, .05); }
html body .lp-mini, html body .lp-sec--tint .lp-mini { background: var(--lp-tan); border-color: rgba(17, 20, 55, .1); box-shadow: 0 1px 3px rgba(17, 20, 55, .05); }
html body .lp-sec--tint .lp-mini:hover, html body .lp-mini.is-hot, html body .lp-mini:hover { background: var(--lp-tan); }
html body .lp-pin-dot { stroke: var(--lp-tan); }
html body .lp-pin text { stroke: var(--lp-tan); }

/* ---- Body text on navy is white too (it was a soft grey). ---- */
html body .lp-hero--investor .lp-hero-lede,
html body .lp-hero--investor .lp-stat-lbl,
html body .lp-cta--navy .lp-cta-sub,
html body .lp-cta--navy .lp-cta-alt,
html body .lp-cta--navy .lp-next li,
html body .lp-close--navy .lp-close-sub { color: #fff; }
html body .lp-hero--investor { --lp-trust-fg: #fff; }
html body .lp-hero--investor .lp-stat-val { color: #fff; }

/* ---- Larger buttons. ---- */
html body .lp .lp-btn { min-height: 62px; font-size: 1.15rem; border-radius: 7px; }
html body .lp .lp-btn-label { padding: 0 30px; }
html body .lp .lp-btn-arrow { padding: 0 21px; }
html body .lp .lp-btn-arrow svg { width: 22px; height: 22px; }
html body .lp .lp-wow { min-height: 88px; font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); }

/* ---- Spacing: roughly 150px between sections instead of 190px. ---- */
html body .lp-sec { padding: clamp(56px, 5.4vw, 78px) 0; }
html body .lp-cta { padding: clamp(64px, 6.4vw, 96px) 0; }
html body .lp-close { padding: clamp(60px, 5.8vw, 88px) 0; }
html body .lp-hero { padding-top: clamp(36px, 4.2vw, 64px); padding-bottom: clamp(40px, 4vw, 56px); }
html body .lp-hero .lp-trust-wrap { margin-top: clamp(40px, 4vw, 56px); }
html body .lp-cmp-card { margin-top: 44px; }
html body .lp-cmp-foot { margin-top: 32px; }
html body .lp-next { margin-top: clamp(40px, 4vw, 56px); }
html body .lp-cases-grid { margin-top: clamp(28px, 3vw, 40px); }
html body .lp-why-grid { margin-top: clamp(32px, 3.4vw, 44px); }
html body .lp-why-foot { margin-top: 32px; }
html body .lp-cards-head { margin-bottom: clamp(28px, 3vw, 40px); }
/* The site's own sections, on these two pages only, get the same rhythm. */
body:has(.lp-hero) .spl-section:not(#_a):not(#_b):not(#_c):not(#_d),
body:has(.lp-hero) .splport-hm-rv:not(#_a):not(#_b):not(#_c):not(#_d),
body:has(.lp-hero) .splport-inv-calc-sec:not(#_a):not(#_b):not(#_c):not(#_d),
body:has(.lp-hero) .splport-inv-jn:not(#_a):not(#_b):not(#_c):not(#_d),
body:has(.lp-hero) .splport-inv-faq-sec:not(#_a):not(#_b):not(#_c):not(#_d) {
  padding-top: clamp(56px, 5.4vw, 78px) !important; padding-bottom: clamp(56px, 5.4vw, 78px) !important;
}

/* ---- Heading hierarchy: page title largest, then the two bands, then every
   section heading at one size (52px at 1440, the site's section size). ---- */
html body .lp-hero h1.lp-hero-title:not(#_a):not(#_b):not(#_c):not(#_d) { font-size: clamp(2.8rem, 1.5rem + 3.6vw, 4.75rem) !important; line-height: 1.02 !important; }
html body .lp-cta h2.lp-cta-title:not(#_a):not(#_b):not(#_c):not(#_d) { font-size: clamp(2.4rem, 1.5rem + 2.6vw, 3.75rem) !important; max-width: 15ch; }
html body .lp-close h2.lp-close-title:not(#_a):not(#_b):not(#_c):not(#_d) { font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.5rem) !important; }
body:has(.lp-hero) #spl-calc h2.spl-h2:not(#_a):not(#_b):not(#_c):not(#_d),
body:has(.lp-hero) h2.spl-how-h1:not(#_a):not(#_b):not(#_c):not(#_d),
body:has(.lp-hero) h2.splport-hm-rv-heading:not(#_a):not(#_b):not(#_c):not(#_d) {
  font-size: clamp(2.05rem, 1.5rem + 2.4vw, 3.25rem) !important; line-height: 1.1 !important; letter-spacing: -.015em !important;
}
/* Investor page: its reviews heading reads navy, like every investor heading. */
html body:has(.lp-marker) h2.splport-hm-rv-heading:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) { color: #111437 !important; }

/* ---- Investor calculator: the money figures were 22-30px; bigger now
   (landing page only - the Invest page keeps its own sizes). ---- */
body:has(.lp-hero) .splport-inv-calc .splport-inv-calc-echo:not(#_a):not(#_b):not(#_c):not(#_d) { font-size: clamp(1.45rem, 1.15rem + .8vw, 1.85rem) !important; }
body:has(.lp-hero) .splport-inv-calc .splport-inv-calc-input:not(#_a):not(#_b):not(#_c):not(#_d) { font-size: clamp(1.4rem, 1.15rem + .6vw, 1.7rem) !important; }
body:has(.lp-hero) .splport-inv-calc .splport-inv-calc-qvalue:not(#_a):not(#_b):not(#_c):not(#_d) { font-size: clamp(1.6rem, 1.25rem + .9vw, 2.05rem) !important; }
body:has(.lp-hero) .splport-inv-calc .splport-inv-calc-rvalue:not(#_a):not(#_b):not(#_c):not(#_d) { font-size: clamp(2.3rem, 1.5rem + 2vw, 3.3rem) !important; }
body:has(.lp-hero) .splport-inv-calc .splport-inv-calc-rvalue-sm:not(#_a):not(#_b):not(#_c):not(#_d) { font-size: clamp(1.4rem, 1.1rem + .8vw, 1.75rem) !important; white-space: nowrap; }

/* ---- Figures rise in (replacing the count-up, which jittered). ---- */
html.lp-js body .lp-card[data-lp-reveal] .lp-card-v { opacity: 0; transform: translateY(26px); }
html.lp-js body .lp-card[data-lp-reveal].is-in .lp-card-v { opacity: 1; transform: none; transition: opacity .7s ease, transform 1s var(--lp-ease); transition-delay: calc(var(--i, 0) * 120ms + 250ms); }

/* ---- Map: all six stories, pins open their case, and a "many more" note. ---- */
html body .lp-pin-link { cursor: pointer; }
html body .lp-pin-link:focus-visible { outline: none; }
html body .lp-pin-link:focus-visible .lp-pin-dot { stroke: var(--lp-navy); stroke-width: 3; }
html body .lp-pin-link:hover .lp-pin-dot, html body .lp-pin-link:focus-visible .lp-pin-dot { transform: scale(1.5); fill: var(--lp-navy); }
html body .lp-pin-link:hover text { fill: var(--lp-orange-deep); }
html body .lp-map-more {
  position: absolute; left: 22%; top: 17%; z-index: 1;
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 99px;
  background: var(--lp-navy); color: var(--lp-tan); font-size: 1.035rem; line-height: 1; white-space: nowrap;
  box-shadow: 0 12px 26px -12px rgba(17, 20, 55, .55);
  animation: lp-bob 6s ease-in-out infinite alternate;
}
html body .lp-map-more::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-orange); box-shadow: 0 0 0 4px rgba(228, 96, 33, .3); }
html.lp-js body .lp-map[data-lp-reveal] .lp-map-more { opacity: 0; }
html.lp-js body .lp-map[data-lp-reveal].is-in .lp-map-more { opacity: 1; transition: opacity .6s ease 2.4s; }
@media (max-width: 640px) { html body .lp-map-more { font-size: .92rem; padding: 8px 14px; } }

/* ---- v5: on the navy case study card, the quote and the figure labels are
   white (they were a soft tan-grey). ---- */
html body .lp-feature .lp-quote { color: #fff; }
html body .lp-feature .lp-metric-l { color: #fff; opacity: .85; }

/* ===========================================================================
   v6: on phones and tablets the floating pills sat over the illustration's
   heads. They now sit in the empty space around the circle: one above, one on
   the lower right edge, one below.
   =========================================================================== */
@media (max-width: 900px) {
  html body .lp-port-wrap:not(#_a):not(#_b):not(#_c):not(#_d) { width: 230px; margin: 52px auto 44px; }
  html body .lp-chipf--1:not(#_a):not(#_b):not(#_c):not(#_d) { top: -17%; left: -18%; right: auto; bottom: auto; }
  html body .lp-chipf--2:not(#_a):not(#_b):not(#_c):not(#_d) { top: 68%; right: -24%; left: auto; bottom: auto; }
  html body .lp-chipf--3:not(#_a):not(#_b):not(#_c):not(#_d) { bottom: -16%; left: -8%; top: auto; right: auto; }
}
@media (max-width: 640px) {
  html body .lp-port-wrap:not(#_a):not(#_b):not(#_c):not(#_d) { width: 210px; }
  html body .lp-chipf--1:not(#_a):not(#_b):not(#_c):not(#_d) { left: -16%; }
  html body .lp-chipf--2:not(#_a):not(#_b):not(#_c):not(#_d) { right: -20%; }
  html body .lp-chipf--3:not(#_a):not(#_b):not(#_c):not(#_d) { left: -6%; }
}

/* ===========================================================================
   v7: ONE CONTENT EDGE. The page mixes its own sections with components from
   Home and Invest, and each brought its own container maths, so their left
   edges drifted apart (up to 26px at 1024px). Every section on these pages now
   shares one content box: 1030px wide, centred, with a side gutter of 4% of the
   screen (never under 20px). Only loaded on the landing pages, so Home and
   Invest keep their own layout.
   =========================================================================== */
html body .lp:not(#_a):not(#_b):not(#_c):not(#_d) { --lp-gut: max(20px, 4vw); }
html body .spl-section:not(#_a):not(#_b):not(#_c):not(#_d) { padding-left: 0 !important; padding-right: 0 !important; }
html body .spl-section-inner:not(#_a):not(#_b):not(#_c):not(#_d),
html body #spl-how .spl-section-inner:not(#_a):not(#_b):not(#_c):not(#_d),
html body .splport-hm-rv-container:not(#_a):not(#_b):not(#_c):not(#_d),
html body .splport-inv-calc-inner:not(#_a):not(#_b):not(#_c):not(#_d),
html body .splport-inv-jn-inner:not(#_a):not(#_b):not(#_c):not(#_d),
html body .splport-inv-faq-inn:not(#_a):not(#_b):not(#_c):not(#_d) {
  width: 100% !important; max-width: calc(1030px + 2 * max(20px, 4vw)) !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: max(20px, 4vw) !important; padding-right: max(20px, 4vw) !important; box-sizing: border-box !important;
}
/* v7: on desktop the floating pills sit clear of the people in the picture:
   two above the circle, one below it. The circle is nudged in from the right
   so the pills stay inside the page's content edge. (The hero video still runs
   past the right edge on purpose: pulling it in squeezed the hero text.) */
@media (min-width: 901px) {
  html body .lp-cta .lp-port-wrap:not(#_a):not(#_b):not(#_c):not(#_d) { justify-self: end; margin-right: calc(clamp(250px, 25vw, 340px) * .22); }
  html body .lp-chipf--1:not(#_a):not(#_b):not(#_c):not(#_d) { top: -6%; left: -24%; right: auto; bottom: auto; }
  html body .lp-chipf--2:not(#_a):not(#_b):not(#_c):not(#_d) { top: -4%; right: -22%; left: auto; bottom: auto; }
  html body .lp-chipf--3:not(#_a):not(#_b):not(#_c):not(#_d) { bottom: -7%; left: -8%; top: auto; right: auto; }
}

/* ===========================================================================
   9. INVEST FAQ STYLES (verbatim from the Invest FAQ embed), for the brokers' copy.
   On the investor page the component brings its own identical copy.
   =========================================================================== */

/* Invest FAQ - ported from the repository's shared FAQ grammar
   (src/components/invest/InvestFaq.module.css, itself mirroring BorrowFaq) plus
   AnimatedCampfire.module.css for the illustration.

   What the port fixes in the previous implementation:
     - rows were <div onclick>, so they had no keyboard access and no
       aria-expanded; they are now semantic <button>s inside headings
     - the reveal animated max-height 0 -> 1200px, which eases against a height
       the content never reaches (fast start, visible stall). The repo animates
       grid-template-rows 0fr -> 1fr, which resolves to the real content height
     - open and close ran at the same duration; the repo closes faster than it
       opens (200ms close / 260ms open)
     - collapsed answers stayed in the accessibility tree; they are now inert
     - no reduced-motion handling
   Added from the repo: the travelling orange rule, the plus-to-minus icon
   rotation cross-fade, the question nudge on hover/focus, and the settle on the
   revealed answer.

   All eight questions and answers are the existing Webflow copy, unchanged. */

.splport-inv-faq *{box-sizing:border-box;margin:0;padding:0;}
.splport-inv-faq{font-family:var(--font-sans);color:var(--color-navy);line-height:1.6;-webkit-font-smoothing:antialiased;width:100%;display:block;background:var(--color-paper);}
.splport-inv-faq-sec{padding:clamp(56px,7vw,96px) 0;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:none;}
.splport-inv-faq-inn{width:100%;box-sizing:border-box;max-width:var(--container-max);margin-inline:auto;padding-inline:max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));}

/* Section composition from the repo's .questions stage: intro + illustration on
   the left, the question list on the right. */
.splport-inv-faq-stage{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.splport-inv-faq-intro{position:sticky;top:96px;}
.splport-inv-faq-ew{font-size:.7rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--color-navy);display:flex;align-items:center;gap:.6rem;}
.splport-inv-faq-ew::before{content:"";display:block;width:20px;height:1px;background:var(--color-orange);}
.splport-inv-faq-cf{margin-top:1.75rem;max-width:300px;}

/* Rows */
.splport-inv-faq-list{list-style:none;display:flex;flex-direction:column;}
.splport-inv-faq-item{border-bottom:1px solid var(--color-paper-deep);}
.splport-inv-faq-item:first-child{border-top:1px solid var(--color-paper-deep);}
.splport-inv-faq-h{margin:0;font-family:var(--font-sans);font-weight:400;}
.splport-inv-faq-btn{position:relative;width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;padding:1.5rem 0;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;color:inherit;}
.splport-inv-faq-btn:focus-visible{outline:3px solid var(--color-orange);outline-offset:3px;}
.splport-inv-faq-q{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--color-ink);line-height:1.25;transition:transform 200ms cubic-bezier(.16,1,.3,1),color 200ms cubic-bezier(.4,0,.2,1);}
.splport-inv-faq-btn:hover .splport-inv-faq-q,.splport-inv-faq-btn:focus-visible .splport-inv-faq-q{transform:translateX(4px);color:var(--color-navy);}
.splport-inv-faq-item.is-open .splport-inv-faq-q{color:var(--color-orange);}
/* Travelling rule */
.splport-inv-faq-rule{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--color-orange);transform:scaleX(0);transform-origin:left center;transition:transform 200ms cubic-bezier(.16,1,.3,1);}
.splport-inv-faq-btn:hover .splport-inv-faq-rule,.splport-inv-faq-btn:focus-visible .splport-inv-faq-rule,.splport-inv-faq-item.is-open .splport-inv-faq-rule{transform:scaleX(1);}
/* Phosphor CaretDown (regular), rotated for the expanded state. */
.splport-inv-faq-ico{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1.5px solid var(--color-ink-muted);border-radius:50%;color:var(--color-ink-soft);flex:none;transition:border-color 200ms cubic-bezier(.4,0,.2,1),color 200ms cubic-bezier(.4,0,.2,1),transform 120ms cubic-bezier(.16,1,.3,1);}
.splport-inv-faq-btn:active .splport-inv-faq-ico{transform:scale(.9);}
.splport-inv-faq-item.is-open .splport-inv-faq-ico{border-color:var(--color-orange);color:var(--color-orange);}
.splport-inv-faq-caret{position:absolute;width:.95em;height:.95em;transform:rotate(0);transition:transform 200ms cubic-bezier(.16,1,.3,1);}
.splport-inv-faq-item.is-open .splport-inv-faq-caret{transform:rotate(180deg);transition-duration:260ms;}
/* Height reveal that resolves to real content height, close faster than open */
.splport-inv-faq-col{display:grid;grid-template-rows:0fr;transition:grid-template-rows 200ms cubic-bezier(.16,1,.3,1);}
.splport-inv-faq-item.is-open .splport-inv-faq-col{grid-template-rows:1fr;transition-duration:260ms;}
.splport-inv-faq-col-in{overflow:hidden;min-height:0;}
.splport-inv-faq-a{padding:0 0 2rem;color:var(--color-ink);font-size:1rem;line-height:1.7;max-width:66ch;}
.splport-inv-faq-a p+p{margin-top:.75rem;}
.splport-inv-faq-item.is-open .splport-inv-faq-a{animation:splport-inv-faq-settle 200ms cubic-bezier(.16,1,.3,1) 80ms both;}
@keyframes splport-inv-faq-settle{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.splport-inv-faq-foot{margin-top:1.75rem;}
.splport-inv-faq-link{font-size:.82rem;font-weight:600;color:var(--color-navy);text-decoration:none;border-bottom:2px solid var(--color-orange);padding-bottom:2px;transition:color .2s;}
.splport-inv-faq-link:hover{color:var(--color-orange);}
.splport-inv-faq-link:focus-visible{outline:3px solid var(--color-orange);outline-offset:3px;}

/* Campfire - AnimatedCampfire.module.css, invest variant. The same image is
   layered three times: base, a radial glow, and two clip-path isolated flame
   copies. The base image is always visible, so the illustration still reads if
   the observer never fires. */
.splport-inv-cf{position:relative;isolation:isolate;}
.splport-inv-cf-base,.splport-inv-cf-flame{display:block;width:100%;height:auto;}
.splport-inv-cf-glow,.splport-inv-cf-flame{position:absolute;inset:0;pointer-events:none;}
.splport-inv-cf-glow{z-index:1;opacity:0;transition:opacity 500ms cubic-bezier(.16,1,.3,1);background:radial-gradient(ellipse 18% 22% at 75% 66%,rgba(238,89,25,.32),transparent 76%);}
.splport-inv-cf-flame{z-index:2;opacity:0;object-fit:contain;}
.splport-inv-cf-outer{clip-path:polygon(64% 34%,88% 34%,88% 80%,63% 80%);transform-origin:75% 80%;}
.splport-inv-cf-inner{clip-path:polygon(69% 43%,84% 43%,85% 78%,67% 78%);transform-origin:75% 78%;}
@media(prefers-reduced-motion:no-preference){
  .splport-inv-cf[data-active] .splport-inv-cf-glow{opacity:1;animation:splport-inv-cf-glow 2.4s ease-in-out infinite;}
  .splport-inv-cf[data-active] .splport-inv-cf-outer{will-change:transform,opacity;animation:splport-inv-cf-outer 2.15s ease-in-out infinite;}
  .splport-inv-cf[data-active] .splport-inv-cf-inner{will-change:transform,opacity;animation:splport-inv-cf-inner 1.55s ease-in-out infinite alternate;}
}
@keyframes splport-inv-cf-outer{0%,100%{opacity:.6;transform:scaleY(.955) skewX(1.6deg);}34%{opacity:1;transform:scaleY(1.09) skewX(-2.2deg);}68%{opacity:.76;transform:scaleY(1.02) skewX(1.15deg);}}
@keyframes splport-inv-cf-inner{from{opacity:.52;transform:scaleY(.925) skewX(-2.4deg);}to{opacity:1;transform:scaleY(1.13) skewX(2.2deg);}}
@keyframes splport-inv-cf-glow{0%,100%{opacity:.48;transform:scale(.955);}48%{opacity:1;transform:scale(1.06);}}

@media(max-width:900px){
  .splport-inv-faq-stage{grid-template-columns:1fr;gap:2rem;}
  .splport-inv-faq-intro{position:static;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;}
  .splport-inv-faq-cf{margin-top:0;width:150px;flex:none;}
}
@media(max-width:560px){
  .splport-inv-faq-cf{width:112px;}
}
@media(prefers-reduced-motion:reduce){
  .splport-inv-faq-q,.splport-inv-faq-rule,.splport-inv-faq-ico,.splport-inv-faq-caret,.splport-inv-faq-col{transition:none!important;}
  .splport-inv-faq-btn:hover .splport-inv-faq-q,.splport-inv-faq-btn:focus-visible .splport-inv-faq-q{transform:none;}
  .splport-inv-faq-item.is-open .splport-inv-faq-a{animation:none;}
  .splport-inv-cf-glow,.splport-inv-cf-flame{display:none;}
}

/* 10. Invest design tokens + Simple palette, scoped to .lp-tok (brokers' FAQ). */
.lp-tok{
  --color-paper:#f7f4ef;
  --color-paper-warm:#fbf2e9;
  --color-paper-deep:#ebe4da;
  --color-white:#fffdfa;

  --color-navy:#142b4d;
  --color-navy-strong:#0e2038;
  --color-navy-hairline:#24354f;

  --color-orange:#e0561d;
  --color-orange-strong:#cf4d16;
  --color-orange-press:#b9440f;
  --color-orange-action:#bd430d;
  --color-orange-action-hover:#ad3908;
  --color-orange-action-press:#943006;

  --color-eucalyptus:#e2ebe0;
  --color-eucalyptus-deep:#d4dfd1;
  --color-eucalyptus-strong:#2f4a35;
  --color-eucalyptus-ink:#24422b;
  --color-on-eucalyptus-strong:#eef3ea;
  --color-orange-eucalyptus:#a5390a;

  --color-jadig-green:#245036;
  --color-jadig-green-deep:#1d4029;
  --color-on-jadig:#eef3ea;
  --color-on-jadig-muted:#c4d3c2;

  --color-ink:#16233a;
  --color-ink-soft:#3a4658;
  --color-ink-muted:#59657a;
  --color-on-navy:#f1e7d5;        /* warm-white on navy */
  --color-on-navy-muted:#b9c2d2;
  --color-on-orange:#fbf4ea;

  --color-focus-ring:#e0561d;

  /* Both bound to Reckless - see the header note. */
  --font-serif:"Reckless",Georgia,"Times New Roman",serif;
  --font-sans:"Reckless",Georgia,"Times New Roman",serif;

  --text-eyebrow:0.78rem;
  --text-meta:0.85rem;
  --text-body:1rem;
  --text-body-lg:1.125rem;
  --text-h4:clamp(1.15rem,1.05rem + 0.5vw,1.4rem);
  --text-h3:clamp(1.4rem,1.2rem + 1vw,1.9rem);
  --text-h2:clamp(2rem,1.5rem + 2.4vw,3.25rem);
  --text-display:clamp(2.6rem,1.6rem + 4.4vw,5.5rem);

  --leading-tight:1.04;
  --leading-heading:1.12;
  --leading-body:1.6;
  --tracking-eyebrow:0.16em;
  --tracking-display:-0.02em;
  --measure:65ch;

  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;
  --space-9:6rem;
  --space-10:8rem;

  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;

  --shadow-sm:0 1px 2px rgba(20,43,77,.08),0 2px 6px rgba(20,43,77,.06);
  --shadow-md:0 6px 18px rgba(20,43,77,.1),0 2px 6px rgba(20,43,77,.06);
  --shadow-lg:0 18px 46px rgba(20,43,77,.14);

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:360ms;
  --dur-entrance:620ms;
  --dur-reveal:560ms;

  /* --- Layout (tokens.css lines 125-132) --- */
  --container-max:1400px;
  --gutter:clamp(1.25rem,0.5rem + 3vw,4rem);
  --header-height:76px;
  --z-header:100;
  --z-menu:200;
  --z-skip:300;
  --z-modal:400;

  --route-string-color:var(--color-orange);
  --route-string-cross-color:var(--color-navy);
  --route-string-width:2px;
}
.lp-tok{
  --color-navy:#111437;
  --color-orange:#E46021;
  --color-paper:#FEF3EC;
  --color-paper-warm:#FEF3EC;
  --color-white:#FEF3EC;
  --color-eucalyptus:#FEF3EC;
  --color-paper-deep:rgba(17,20,55,.10);
  --color-eucalyptus-deep:rgba(17,20,55,.10);
  --color-navy-hairline:rgba(254,243,236,.16);
  --color-navy-strong:#0A0C26;
  --color-orange-strong:#CF5218;
  --color-orange-press:#B84711;
  --color-orange-action:#E46021;
  --color-orange-action-hover:#CF5218;
  --color-orange-action-press:#B84711;
  --color-orange-eucalyptus:#E46021;
  --color-focus-ring:#E46021;
  --color-ink:#111437;
  --color-ink-soft:rgba(17,20,55,.76);
  --color-ink-muted:rgba(17,20,55,.56);
  --color-on-navy:#FEF3EC;
  --color-on-navy-muted:rgba(254,243,236,.72);
  --color-on-orange:#111437;
  --color-eucalyptus-strong:#2f4a35;
  --color-eucalyptus-ink:#24422b;
  --color-on-eucalyptus-strong:#eef3ea;
  --color-jadig-green:#111437;
  --color-jadig-green-deep:#0A0C26;
  --color-on-jadig:#FEF3EC;
  --color-on-jadig-muted:rgba(254,243,236,.72);
  --route-string-color:#E46021;
  --route-string-cross-color:#111437;
}