/* ============================================================
   Lenuity UK — new funnel sections (gap · proven model · levers)
   Styled with the live site's own tokens (Manrope, cream/copper).
   Layered after style.css.
   ============================================================ */

.lx{padding:95px 6% 80px;position:relative;overflow:hidden}
.lx-eyebrow{font-size:12px;letter-spacing:.21em;line-height:1.7;margin:0 0 22px;font-weight:400}
.lx h2{font-size:clamp(35px,4.2vw,62px);font-weight:400;line-height:1.13;letter-spacing:-.055em;margin:0 0 20px}
.lx h2 span{color:#ad4d28}

/* ---------- Section 1: The affordability gap (cream) ---------- */
.lx-gap{background:#f5f2eb}
.lx-gap .lx-eyebrow{color:#a74720}
.lx-gap-head{max-width:760px}
.lx-gap-intro{font-size:19px;line-height:1.7;color:#55584f;max-width:620px;margin:0 0 50px}

.lx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ded6c5;border:1px solid #ded6c5;margin:0 0 46px}
.lx-stat{background:#fbf9f4;padding:34px 30px}
.lx-stat .big{font-size:clamp(40px,5vw,58px);font-weight:400;letter-spacing:-.04em;line-height:1;color:#232522}
.lx-stat .big .u{color:#a74720}
.lx-stat .lab{font-size:15.5px;line-height:1.5;color:#55584f;margin:16px 0 0}
.lx-stat .src{font-size:12px;color:#8c8a7f;margin:10px 0 0}

.lx-gappanel{background:#232522;color:#f7f3e9;padding:40px 42px 44px}
.lx-gappanel h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.03em;line-height:1.2;margin:0 0 8px;color:#fff}
.lx-gappanel .psub{margin:0 0 30px;color:#c1c5ba;font-size:16px;line-height:1.6;max-width:640px}
.lx-bars{display:flex;flex-direction:column;gap:18px}
.lx-bar{display:grid;grid-template-columns:230px 1fr;align-items:center;gap:20px}
.lx-bar .name{font-size:14.5px;color:#c1c5ba}
.lx-bar .name b{color:#fff;font-weight:700}
.lx-bar .track{height:32px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.lx-bar .fill{height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:13px;
  font-weight:700;font-size:14px;color:#232522;white-space:nowrap;font-variant-numeric:tabular-nums}
.lx-bar .fill.reach{background:#c7b48f}
.lx-bar .fill.price{background:#e0a96b}
.lx-bar .fill.london{background:#d88e66}
.lx-gappanel .pnote{margin:24px 0 0;font-size:12.5px;color:#8f9488;line-height:1.6}

.lx-bridge{margin:44px 0 0;max-width:760px;font-size:clamp(18px,2.1vw,23px);line-height:1.45;color:#232522}
.lx-bridge b{color:#232522;font-weight:700}
.lx-bridge .accent{color:#a74720;font-weight:700}
.lx-cta{display:inline-flex;align-items:center;gap:30px;background:#a74720;color:#fff;padding:18px 25px;font-size:16px;margin:30px 0 0;transition:background .25s,transform .25s}
.lx-cta:hover{background:#813516;transform:translateY(-3px)}
.lx-sources{margin:34px 0 0;max-width:800px;font-size:12px;color:#8c8a7f;line-height:1.6;border-top:1px solid #ded6c5;padding-top:16px}

/* ---------- Section 2: A proven model (dark) ---------- */
.lx-proven{background:#232522;color:#f7f3e9}
.lx-proven .lx-eyebrow{color:#d88e66}
.lx-proven h2{color:#fff;max-width:17ch}
.lx-proven .lede{font-size:19px;line-height:1.7;color:#c1c5ba;max-width:620px;margin:0}
.lx-proven .lede strong{color:#fff;font-weight:700}
.lx-proven-head{display:grid;grid-template-columns:1.1fr 1fr;gap:0 9%}
.lx-proven-head .lx-eyebrow{grid-column:1/-1}
@media(max-width:860px){.lx-proven-head{display:block}.lx-proven .lede{margin-top:18px}}

.lx-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8f9488;margin:58px 0 20px}
.lx-builders{display:grid;grid-template-columns:repeat(5,1fr);gap:0 40px}
@media(max-width:860px){.lx-builders{grid-template-columns:repeat(2,1fr);gap:28px 40px}}
.lx-builders div{border-top:1px solid #65675b;padding-top:18px}
.lx-builders em{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#777c71;font-style:normal;margin-bottom:5px}
.lx-builders b{display:block;font-weight:700;font-size:17px;color:#fff;letter-spacing:-.01em}
.lx-builders span{display:block;font-size:14px;color:#d28a64;margin-top:6px}
.lx-cars{font-size:14px;color:#9aa093;margin:32px 0 0;max-width:640px}
.lx-cars b{color:#b8beb1;font-weight:500}
.lx-turn{font-size:clamp(20px,2.3vw,30px);font-weight:400;line-height:1.35;letter-spacing:-.03em;max-width:900px;margin:50px 0 0;color:#fff}
.lx-turn b{color:#d88e66;font-weight:500}
.lx-note{margin:30px 0 0;max-width:800px;font-size:12px;color:#777c71;line-height:1.6;border-top:1px solid #3a3b36;padding-top:16px}

/* ---------- Section 3: What your own finance arm does for you (cream) ---------- */
.lx-levers{background:#f5f2eb}
.lx-levers .lx-eyebrow{color:#a74720}
.lx-levers-top{display:grid;grid-template-columns:1.3fr 1fr;gap:0 10%}
.lx-levers-top .lx-eyebrow{grid-column:1/-1}
.lx-levers-top>p:last-child{font-size:19px;line-height:1.7;max-width:420px;align-self:center;color:#55584f;margin:0}
@media(max-width:860px){.lx-levers-top{display:block}.lx-levers-top>p:last-child{margin-top:16px}}
.lx-lever-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:55px 60px;margin-top:58px}
@media(max-width:860px){.lx-lever-grid{grid-template-columns:1fr;gap:34px}}
.lx-lever-grid article{border-top:1px solid #b4ad9e;padding-top:24px}
.lx-lever-grid .num{font-size:12px;letter-spacing:.1em;color:#98502e}
.lx-lever-grid h3{margin:16px 0 12px;font-size:27px;letter-spacing:-.03em;line-height:1.2;font-weight:400}
.lx-lever-grid p{font-size:16px;line-height:1.7;color:#606355;max-width:330px;margin:0}

/* Offer plot tool: plots are now toggle buttons (free multi-select) */
.plots .plot{appearance:none;-webkit-appearance:none;font:inherit;color:inherit;padding:0;width:100%}
.plan-caption .selectall{appearance:none;background:none;border:0;color:#943e1e;border-bottom:1px solid #b67e60;padding:0 0 4px;font-size:13px;cursor:pointer;line-height:1.3}
.plan-caption .selectall:hover{color:#a74720}

@media(max-width:700px){
  .lx{padding:60px 6%}
  .lx-stats{grid-template-columns:1fr}
  .lx-gappanel{padding:28px 24px}
  .lx-bar{grid-template-columns:1fr;gap:6px}
  .lx h2{font-size:clamp(32px,8vw,44px)}
}