/* ==========================================================================
   LankaPropertyWeb · Home Loan Comparison
   Layered on top of Bootstrap 5. All rules scoped under #lpw-loan.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Noto+Sans+Sinhala:wght@400;600;700&family=Noto+Sans+Tamil:wght@400;600;700&display=swap');

#lpw-loan {
  scroll-behavior: smooth;
  /* ----- tokens ----- */
  --ink:        #14241d;
  --ink-soft:   #4c5f56;
  --paper:      #f7f8fa;   /* neutral light grey */
  --card:       #ffffff;
  --mint:       #e4f6ec;   /* light brand-green tint (accent surfaces) */
  --line:       #e3e6ea;
  --green:      #00a155;   /* LPW vivid brand green */
  --green-dark: #007a3f;
  --green-ink:  #045d31;   /* dark green (active chips/tabs) */
  --orange:     #f26522;   /* LPW brand CTA orange */
  --orange-dk:  #d9530f;
  --amber:      #e8a020;   /* rate accents */
  --wa:         #1fa855;

  /* One place to match the parent site's typeface exactly if it changes */
  --ff-brand:   'Poppins', 'Noto Sans Sinhala', 'Noto Sans Tamil', 'Open Sans', system-ui, sans-serif;
  --ff-display: var(--ff-brand);
  --ff-body:    var(--ff-brand);

  --radius: 14px;
  --shadow: 0 1px 2px rgba(20,36,29,.05), 0 8px 24px -12px rgba(20,36,29,.14);

  font-family: var(--ff-body);
  font-size: 0.9rem;            /* ≈14.4px — matches lpw.lk body scale */
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  display: block;
}
#lpw-loan *, #lpw-loan *::before, #lpw-loan *::after { box-sizing: border-box; }

/* Sinhala & Tamil scripts need extra line height */
#lpw-loan.lang-si, #lpw-loan.lang-ta { line-height: 1.75; }
#lpw-loan.lang-si .ll-display, #lpw-loan.lang-ta .ll-display { line-height: 1.35; }

/* ----- type ----- */
#lpw-loan .ll-hero .ll-display { color: #fff; }
#lpw-loan .ll-display {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: .5rem 0 .75rem;
}
/* headings sit on the same centre line as their icon */
#lpw-loan .ll-h2, #lpw-loan .ll-h3, #lpw-loan .ll-h4 {
  font-family: var(--ff-display); font-weight: 600;
  display: flex; align-items: center; gap: 0;
}
#lpw-loan .ll-h2 { font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem); }
#lpw-loan .ll-h3 { font-size: 1.1rem; }
#lpw-loan .ll-h4 { font-size: .95rem; }
#lpw-loan .ll-hero .ll-eyebrow {
  background: rgba(255,255,255,.12); color: #eafff3; border-color: rgba(255,255,255,.18);
}
#lpw-loan .ll-hero .ll-eyebrow .bi { color: #7be0a8; }
#lpw-loan .ll-eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: var(--green); background: var(--mint); border: 1px solid var(--line);
  padding: .3rem .7rem; border-radius: 999px; margin: 0;
}
#lpw-loan .ll-lede { font-size: .98rem; color: rgba(255,255,255,.82); max-width: 34rem; }
#lpw-loan .ll-sub  { color: var(--ink-soft); font-size: .95rem; }
#lpw-loan .ll-hint { color: var(--ink-soft); font-size: .8rem; }
#lpw-loan .ll-on-dark { color: var(--ink); }
#lpw-loan .ll-on-dark.ll-sub { color: var(--ink-soft); }
#lpw-loan .ll-textlink { color: var(--green); font-weight: 600; text-decoration: none; }
#lpw-loan .ll-textlink:hover { color: var(--green-dark); text-decoration: underline; }

/* placeholders read as hints, not as entered values */
#lpw-loan input::placeholder, #lpw-loan textarea::placeholder { color: #a7b4ad; opacity: 1; }
#lpw-loan input::-webkit-input-placeholder, #lpw-loan textarea::-webkit-input-placeholder { color: #a7b4ad; }

/* ----- icons ----- */
#lpw-loan .ll-ico {
  display: inline-grid; place-items: center; vertical-align: middle;
  flex: 0 0 auto;
  width: 2em; height: 2em; margin-inline-end: .5em; border-radius: 10px;
  background: var(--mint); color: var(--green); font-size: .85em;
}
#lpw-loan .ll-ico-dark { background: var(--mint); color: var(--green); }
#lpw-loan .ll-label-ico { color: var(--green); margin-inline-end: .4em; }
#lpw-loan .ll-eyebrow .bi { color: var(--green); }
#lpw-loan .ll-dt .bi { color: var(--green); opacity: .8; }
#lpw-loan .ll-features li .bi { color: var(--green-dark); }
#lpw-loan .ll-summary-ico { color: var(--green); margin-inline-end: .45em; }
#lpw-loan .btn .bi { font-size: .95em; }

/* ----- cards, inputs, buttons ----- */
#lpw-loan .card-soft { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }
#lpw-loan .ll-hero .ll-search {
  background: #ffffff; border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.2);
  border-radius: 18px;
}
#lpw-loan .ll-label { font-size: .8rem; font-weight: 600; color: var(--ink); margin-bottom: .3rem; display: block; }
#lpw-loan .ll-input { border: 1.5px solid var(--line); border-radius: 10px; padding: .6rem .8rem; font-weight: 600; color: var(--ink); background: #fff; }
#lpw-loan .ll-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,161,85,.18); }

#lpw-loan .btn { border-radius: 10px; font-weight: 600; }
#lpw-loan .ll-btn-primary { background: var(--orange); border: 1px solid var(--orange); color: #fff; padding: .65rem 1.3rem; }
#lpw-loan .ll-btn-primary:hover, #lpw-loan .ll-btn-primary:focus { background: var(--orange-dk); border-color: var(--orange-dk); color: #fff; }
#lpw-loan .ll-btn-apply { background: var(--green); border: 1px solid var(--green); color: #fff; }
#lpw-loan .ll-btn-apply:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
#lpw-loan .ll-btn-ghost { background: transparent; border: 1.5px solid var(--line); color: var(--ink); }
#lpw-loan .ll-btn-ghost:hover { border-color: var(--green); color: var(--green); }
#lpw-loan .ll-btn-wa { background: var(--wa); border: 1px solid var(--wa); color: #fff; }
#lpw-loan .ll-btn-wa:hover { filter: brightness(.93); color: #fff; }
#lpw-loan :is(a,button,input,select,summary):focus-visible { outline: 3px solid rgba(0,161,85,.5); outline-offset: 2px; }

/* ══════════ HERO ══════════ */
#lpw-loan .ll-hero {
  position: relative; isolation: isolate;
  padding: 3rem 0 2.75rem;
  background: linear-gradient(150deg, #062a1c 0%, #0a3f28 55%, #073520 100%);
  border-bottom: 1px solid #0a3f28;
  overflow: hidden;
  --ll-hero-image: url('../img/home_loan_hero.webp');
}
/* cover image layer — family/house photo on the right, overlay keeps type readable */
#lpw-loan .ll-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    var(--ll-hero-image, linear-gradient(120deg, #d7efe0 0%, #eef6f0 45%, #fdece2 100%))
    right center / cover no-repeat;
}
/* Dark overlay: heaviest on the left where the heading and search card sit,
   easing off to the right so the photo still reads. */
#lpw-loan .ll-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(4,30,20,.94) 0%,
      rgba(5,36,24,.88) 34%,
      rgba(6,42,28,.72) 62%,
      rgba(6,42,28,.55) 100%),
    linear-gradient(180deg, rgba(6,42,28,.30) 0%, rgba(4,26,17,.60) 100%);
}
@media (max-width: 991.98px) {
  /* on narrow screens the whole hero sits over the photo, so lift the overlay */
  #lpw-loan .ll-hero::before { background-position: 72% center; }
  #lpw-loan .ll-hero::after {
    background: linear-gradient(180deg, rgba(4,30,20,.90) 0%, rgba(5,36,24,.86) 45%, rgba(4,26,17,.92) 100%);
  }
}
#lpw-loan .ll-hero > .container { position: relative; z-index: 1; }
/* language selector — corner on desktop, top strip on mobile */
/* language toggle — segmented control, one tap per language */
/* Language toggle — recessed track with a raised white pill that slides
   between the options (the pattern used by in-car mode selectors). */
#lpw-loan .ll-langtoggle {
  position: absolute; top: 1rem; inset-inline-end: 1rem; z-index: 5;
  /* the thumb is absolute inside here — never let this go `static` */
  isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0;
  padding: .25rem; border-radius: 999px;
  background: rgba(232,238,234,.94); border: 1px solid rgba(20,36,29,.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 2px 4px rgba(20,36,29,.14),
    inset 0 -1px 0 rgba(255,255,255,.7),
    0 6px 16px -8px rgba(6,42,28,.5);
}
/* the moving pill */
#lpw-loan .ll-langtoggle-thumb {
  position: absolute; top: .25rem; bottom: .25rem; left: 0; width: 0;
  border-radius: 999px; z-index: 1; opacity: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9f7 100%);
  box-shadow:
    0 1px 1px rgba(20,36,29,.10),
    0 3px 8px -2px rgba(20,36,29,.28),
    inset 0 1px 0 #fff;
  transform: translateX(var(--ll-thumb-x, 0));
  transition: transform .34s cubic-bezier(.32,1.28,.52,1), width .34s cubic-bezier(.32,1.28,.52,1), opacity .2s;
}
#lpw-loan .ll-langtoggle.is-ready .ll-langtoggle-thumb { opacity: 1; }
#lpw-loan .ll-langtoggle-opt {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6rem; padding: .32rem .7rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; line-height: 1.2; letter-spacing: .04em;
  color: rgba(45,62,54,.55); text-decoration: none; white-space: nowrap;
  transition: color .25s ease, transform .12s ease;
}
#lpw-loan .ll-langtoggle-opt:hover { color: rgba(45,62,54,.85); }
#lpw-loan .ll-langtoggle-opt:active { transform: scale(.96); }
#lpw-loan .ll-langtoggle-opt.is-active,
#lpw-loan .ll-langtoggle.is-hovering .ll-langtoggle-opt.is-hovered {
  color: var(--green-dark);
}
#lpw-loan .ll-langtoggle.is-hovering .ll-langtoggle-opt.is-active:not(.is-hovered) {
  color: rgba(45,62,54,.55);
}
/* no JS → the active option still reads as selected */
#lpw-loan .ll-langtoggle:not(.is-ready) .ll-langtoggle-opt.is-active {
  background: #fff; color: var(--green-dark); box-shadow: 0 2px 6px -2px rgba(20,36,29,.3);
}
@media (max-width: 991.98px) {
  /* stays on the right; `relative`, not `static`: the sliding thumb is
     absolutely positioned and would otherwise size itself against the hero */
  #lpw-loan .ll-langtoggle {
    position: relative; top: auto; inset-inline-end: auto;
    display: inline-flex; margin: 0 0 1rem auto;
    background: #e8ecea; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  #lpw-loan .ll-hero .ll-langtoggle-wrap { display: flex; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  #lpw-loan .ll-langtoggle-thumb { transition: opacity .2s; }
}
#lpw-loan .ll-search { position: relative; }
@keyframes llFormFlash { 0% { box-shadow: 0 0 0 0 rgba(0,161,85,.45); } 100% { box-shadow: 0 0 0 6px rgba(0,161,85,0); } }
#lpw-loan .ll-flash-form { animation: llFormFlash 1.2s ease-out; border-radius: var(--radius); }
/* Fields top-align so the two half-width fields line up even when one of them
   carries a hint underneath. Labels ellipsize rather than wrap, so the boxes
   always sit at the same height.
   (:not(.collapse/.collapsing) — must not override Bootstrap's collapse display toggling) */
#lpw-loan .ll-search-row > [class*="col-"]:not(.collapse):not(.collapsing) { display: flex; flex-direction: column; justify-content: flex-start; }
#lpw-loan .ll-search .ll-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lpw-loan .ll-group .ll-addon {
  background: var(--mint); border: 1.5px solid var(--line); border-inline-end: 0;
  color: var(--green-dark); font-weight: 600; font-size: .85rem; border-radius: 10px 0 0 10px;
}
#lpw-loan .ll-group .ll-input { border-radius: 0 10px 10px 0; }
#lpw-loan .ll-group:focus-within .ll-addon { border-color: var(--green); }
#lpw-loan .ll-search .ll-input, #lpw-loan .ll-search .form-select { height: 46px; }
#lpw-loan .ll-search .ll-addon { height: 46px; display: flex; align-items: center; }
#lpw-loan .ll-search::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--line);
}

/* loan amount: the update button sits inside the field */
#lpw-loan .ll-amount-field {
  display: flex; align-items: center; gap: .5rem;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: .3rem .35rem .3rem .85rem; min-height: 52px;
  transition: border-color .15s, box-shadow .15s;
}
#lpw-loan .ll-amount-field:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,161,85,.15); }
/* the wrapper draws the focus ring, so the input must not draw a second one */
#lpw-loan .ll-amount-field .ll-amount-input:focus-visible,
#lpw-loan .ll-chat-form .ll-chat-input:focus-visible { outline: none; }
#lpw-loan .ll-amount-cur { color: var(--ink-soft); font-weight: 600; font-size: .9rem; flex: 0 0 auto; }
#lpw-loan .ll-amount-input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--ff-display); font-weight: 700; font-size: 1.15rem; color: var(--ink);
  font-variant-numeric: tabular-nums; padding: 0;
}
#lpw-loan .ll-amount-go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  border: 0; border-radius: 9px; background: var(--orange); color: #fff;
  font-weight: 600; font-size: .85rem; padding: .55rem .9rem; white-space: nowrap;
  transition: background .15s;
}
#lpw-loan .ll-amount-go:hover { background: var(--orange-dk); }
/* grey until the amount is edited, orange once there is something to apply */
#lpw-loan .ll-amount-go.is-idle {
  background: #dfe5e1; color: var(--ink-soft); box-shadow: none; cursor: default;
}
#lpw-loan .ll-amount-go.is-idle:hover { background: #dfe5e1; }
#lpw-loan .ll-amount-go:not(.is-idle) { animation: llGoPulse 1.6s ease-out 2; }
@keyframes llGoPulse {
  0% { box-shadow: 0 0 0 0 rgba(233,90,29,.5); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(233,90,29,0); }
}
/* the label is short enough to stay visible at every width */

/* fixed fields with pencil-to-edit */
#lpw-loan .ll-fixed-view {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 46px; background: #fff; border: 1.5px dashed var(--line);
  border-radius: 10px; padding: .45rem .5rem .45rem .8rem;
}
#lpw-loan .ll-fixed-val { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lpw-loan .ll-fixed-field.is-editing .ll-fixed-view { display: none; }
#lpw-loan .ll-fixed-field:not(.is-editing) .ll-fixed-edit { display: none; }

/* pencil edit button (floating summary bar + fixed fields) */
#lpw-loan .ll-edit-btn {
  flex: 0 0 auto; width: 2rem; height: 2rem; border: 0; border-radius: 8px;
  background: var(--mint); color: var(--green); display: grid; place-items: center;
  transition: background .15s ease;
}
#lpw-loan .ll-edit-btn:hover { background: #e2e6ea; }

/* floating loan summary bar */
#lpw-loan .ll-floatbar {
  position: fixed; inset-inline: 0; top: var(--ll-float-offset, 0px); z-index: 1041;
  background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(20,36,29,.10);
  transform: translateY(-110%); transition: transform .25s ease;
}
#lpw-loan .ll-floatbar.is-visible { transform: translateY(0); }
#lpw-loan .ll-floatbar-inner {
  display: flex; align-items: center; gap: .6rem 1.1rem; flex-wrap: wrap;
  padding: .55rem .75rem; font-size: .85rem;
}
#lpw-loan .ll-float-item { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
#lpw-loan .ll-float-item .bi { color: var(--green); }
#lpw-loan .ll-floatbar .ll-edit-btn { margin-inline-start: auto; }

/* hero benefits — compact single-line pills, not dense cards */
/* four key points, two per row */
#lpw-loan .ll-benefits {
  list-style: none; padding: 0; margin: 1.4rem 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem;
}
#lpw-loan .ll-benefit {
  display: flex; align-items: center; gap: .6rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: .8rem .9rem;
  transition: background .15s, border-color .15s, transform .15s;
}
#lpw-loan .ll-benefit:hover {
  background: rgba(255,255,255,.12); border-color: rgba(123,224,168,.5); transform: translateY(-1px);
}
#lpw-loan .ll-benefit-ico {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 10px;
  background: rgba(123,224,168,.18); color: #7be0a8; display: grid; place-items: center; font-size: 1rem;
}
#lpw-loan .ll-benefit-text {
  color: #fff; font-size: .82rem; font-weight: 600; line-height: 1.4; white-space: normal;
}
@media (max-width: 400px) {
  #lpw-loan .ll-benefits { gap: .5rem; }
  #lpw-loan .ll-benefit { padding: .65rem .7rem; gap: .5rem; }
  #lpw-loan .ll-benefit-text { font-size: .76rem; }
}
/* small print under a field (down payment) */
#lpw-loan .ll-field-hint {
  margin: .3rem 0 0; font-size: .72rem; line-height: 1.35; color: var(--ink-soft);
}
/* down payment below the 30% floor */
#lpw-loan .ll-min-err {
  display: flex; align-items: flex-start; gap: .3rem;
  margin: .35rem 0 0; font-size: .78rem; font-weight: 600; color: #c0392b;
}
#lpw-loan .ll-min-err[hidden] { display: none; }
#lpw-loan .ll-min-err::before { content: "\26A0"; line-height: 1.3; }
#lpw-loan .ll-fixed-field.is-below-min .ll-input,
#lpw-loan .ll-fixed-field.is-below-min .ll-addon {
  border-color: #e5533d;
}
#lpw-loan .ll-fixed-field.is-below-min .ll-input:focus {
  box-shadow: 0 0 0 3px rgba(229,83,61,.25);
}
#lpw-loan .ll-fixed-field.is-below-min .ll-fixed-val { color: #c0392b; }

/* hero: compact sliders for period and contribution (easier than typing on a phone) */
#lpw-loan .ll-slide-field { display: flex; flex-direction: column; }
#lpw-loan .ll-slide-val {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  font-weight: 800; font-size: 1rem; color: var(--ink);
  font-variant-numeric: tabular-nums; min-height: 1.6rem;
}
#lpw-loan .ll-slide-pct {
  font-size: .72rem; font-weight: 700; color: var(--green-dark);
  background: var(--mint); border-radius: 999px; padding: .1rem .4rem;
}
#lpw-loan .ll-range-sm { height: 1.35rem; margin-top: .3rem; }

/* the contribution label is long — let it wrap instead of being clipped,
   and keep the figure and its % badge on one readable line */
#lpw-loan .ll-slide-field .ll-label {
  white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25;
}
@media (max-width: 575.98px) {
  #lpw-loan .ll-slide-field .ll-label { font-size: .78rem; min-height: 2.5em; align-items: flex-start; }
  #lpw-loan .ll-slide-val { font-size: .92rem; gap: .3rem; }
  #lpw-loan .ll-slide-pct { font-size: .68rem; padding: .08rem .35rem; }
}

/* a chip that flashes under the slider when the contribution auto-adjusts */
#lpw-loan .ll-updated-chip {
  align-self: flex-start; margin-top: .35rem;
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .5rem; border-radius: 999px;
  background: var(--mint); color: var(--green-dark);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  animation: llChipIn .25s ease-out;
}
#lpw-loan .ll-updated-chip[hidden] { display: none; }
#lpw-loan .ll-updated-chip::before { content: "\2713"; font-size: .7rem; }
@keyframes llChipIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════ RATE BOARD ══════════ */
#lpw-loan .ll-board { padding: 2.5rem 0 3rem; background: #eef0f3; border-block: 1px solid var(--line); }
#lpw-loan .ll-board-head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: end; margin-bottom: 1.25rem; }
#lpw-loan .ll-sort-group { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
#lpw-loan .ll-chip { border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-soft); font-size: .82rem; padding: .4rem .9rem; }
#lpw-loan .ll-chip.active { background: var(--green-ink); border-color: var(--green-ink); color: #fff; }

/* shared 5-column grid for legend + rows (desktop).
   Fixed actions track (not auto) so legend and every row share the same
   column edges — otherwise Monthly instalment drifts by viewport / Apply button. */
#lpw-loan {
  --ll-board-cols: minmax(160px, 1.35fr) minmax(90px, .65fr) minmax(150px, 1fr) minmax(130px, 1.1fr) 300px;
}
#lpw-loan .ll-board-legend,
#lpw-loan .ll-row {
  display: grid;
  grid-template-columns: var(--ll-board-cols);
  column-gap: 1rem; row-gap: .75rem; align-items: center;
}
/* visual column order: Bank · Rate · Price · Offers · Actions
   (DOM has offers before emi; order swaps keep columns aligned with legend) */
#lpw-loan .ll-cell-bank   { order: 1; }
#lpw-loan .ll-cell-rate   { order: 2; }
#lpw-loan .ll-cell-emi    { order: 3; }
#lpw-loan .ll-cell-offers { order: 4; }
#lpw-loan .ll-cell-actions { order: 5; }
#lpw-loan .ll-board-legend {
  padding: .4rem 1.25rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
#lpw-loan .ll-board-legend > span { min-width: 0; text-align: start; }
@media (min-width: 992px) and (max-width: 1199.98px) {
  #lpw-loan {
    --ll-board-cols: minmax(140px, 1.2fr) minmax(80px, .55fr) minmax(130px, .95fr) minmax(110px, 1fr) 260px;
  }
}
#lpw-loan .ll-rows { display: flex; flex-direction: column; gap: .6rem; }
#lpw-loan .ll-row {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#lpw-loan .ll-row:hover { border-color: var(--green); box-shadow: 0 2px 4px rgba(20,36,29,.06), 0 12px 28px -12px rgba(20,36,29,.20); }
#lpw-loan .ll-row.is-best { border: 1.5px solid var(--green); background: #fff; }
#lpw-loan .ll-best-tag {
  position: absolute; top: .6rem; inset-inline-start: .8rem;
  background: var(--green); color: #fff; font-size: .66rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: .22rem .65rem; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .3rem; line-height: 1;
}
#lpw-loan .ll-row.is-best { padding-top: 2.4rem; }
#lpw-loan .ll-sponsored-tag {
  position: absolute; top: .6rem; inset-inline-end: .8rem;
  background: #f7e6ba; color: #6d4a03;
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .22rem .65rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .3rem;
  line-height: 1;
}
#lpw-loan .ll-row.is-sponsored {
  padding-top: 2.4rem;                                   /* room for the in-card tag */
  background: linear-gradient(180deg, #fffaf0 0%, #fff 60%);
  border: 1.5px solid #eccb72;
}
#lpw-loan .ll-row.is-sponsored:hover { border-color: var(--green); }
#lpw-loan .ll-row.is-sponsored .ll-best-tag { inset-inline-start: 1rem; } /* coexists cleanly if ever both */

#lpw-loan .ll-cell-bank { display: flex; align-items: center; gap: .8rem; min-width: 0; }
#lpw-loan .ll-logo { width: 100px; height: 100px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line); padding: 4px; flex: 0 0 auto; }
#lpw-loan .ll-logo-fb {
  width: 100px; height: 100px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 8px; background: var(--mint); color: var(--green); font-weight: 700; font-family: var(--ff-display);
}
#lpw-loan .ll-bank-name { display: block; font-weight: 700; line-height: 1.25; }
#lpw-loan .ll-product { display: block; font-size: .8rem; color: var(--ink-soft); }

#lpw-loan .ll-rate { font-family: var(--ff-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
#lpw-loan .ll-upwards { display: block; font-size: .7rem; color: var(--ink-soft); }

/* special-offer pills */
#lpw-loan .ll-cell-offers { display: flex; flex-wrap: wrap; gap: .35rem; align-content: center; min-width: 0; }
#lpw-loan .ll-offer {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .74rem; font-weight: 600; color: var(--green-dark);
  background: var(--mint); border: 0; border-radius: 999px;
  padding: .22rem .65rem; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
#lpw-loan .ll-offer .bi { font-size: .8em; color: var(--green); flex: 0 0 auto; }
#lpw-loan .ll-offer-more {
  background: #fff; border: 1px dashed var(--green); color: var(--green);
  cursor: pointer; transition: background .15s ease; flex: 0 0 auto;
}
#lpw-loan .ll-offer-more:hover { background: var(--mint); }

#lpw-loan .ll-cell-emi { text-align: start; min-width: 0; }
#lpw-loan .ll-cell-emi .ll-emi-row { max-width: 100%; }
#lpw-loan .ll-emi { font-family: var(--ff-display); font-weight: 700; font-size: 1.3rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
#lpw-loan .ll-row.is-best .ll-emi { color: var(--green); }
@keyframes llFlash { 0% { background: #fdf3d8; } 100% { background: transparent; } }
#lpw-loan .ll-emi.is-flash { animation: llFlash 1s ease-out; border-radius: 6px; }
#lpw-loan .ll-emi-row { display: inline-flex; align-items: center; gap: .4rem; }
#lpw-loan .ll-emi-edit {
  flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border: 0; border-radius: 7px;
  background: var(--mint); color: var(--green); display: grid; place-items: center; font-size: .8rem;
  transition: background .15s;
}
#lpw-loan .ll-emi-edit:hover { background: #d3ecdd; }
#lpw-loan .ll-emi-unit { font-size: .72rem; color: var(--ink-soft); display: block; }

/* Apply · Details · Compare in one line (reordered) */
#lpw-loan .ll-cell-actions {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-end;
  gap: .5rem; flex-wrap: nowrap; min-width: 0;
}
#lpw-loan .ll-cell-actions .js-apply     { order: 3; }
#lpw-loan .ll-cell-actions .js-details   { order: 2; }
#lpw-loan .ll-cell-actions .ll-compare-check { order: 1; }
/* nothing shrinks, so the buttons can never overlap */
#lpw-loan .ll-cell-actions > * { flex: 0 0 auto; }
#lpw-loan .ll-cell-actions .btn { white-space: nowrap; width: auto; }
#lpw-loan .ll-compare-check { white-space: nowrap; }
@media (max-width: 991.98px) {
  #lpw-loan .ll-cell-actions { flex-wrap: wrap; justify-content: space-between; }
}
#lpw-loan .ll-compare-check { display: inline-flex; gap: .35rem; align-items: center; font-size: .8rem; color: var(--ink-soft); cursor: pointer; margin: 0; user-select: none; }
#lpw-loan .ll-compare-check input { accent-color: var(--green); width: 1rem; height: 1rem; cursor: pointer; }

/* Details button: chevron points down when collapsed, up when expanded */
#lpw-loan .ll-details-caret { margin-inline-start: .35rem; font-size: .8em; transition: transform .2s ease; display: inline-block; }
#lpw-loan .js-details:not(.collapsed) .ll-details-caret { transform: rotate(180deg); }

#lpw-loan .ll-details { grid-column: 1 / -1; order: 6; }
#lpw-loan .ll-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; padding-top: 1rem; margin-top: .75rem; border-top: 1px dashed var(--line); }
#lpw-loan .ll-dt { display: block; font-size: .72rem; color: var(--ink-soft); }
#lpw-loan .ll-dd { font-weight: 700; }
#lpw-loan .ll-features { margin: .75rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
#lpw-loan .ll-features li { background: var(--mint); color: var(--green-dark); font-size: .76rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; }
#lpw-loan .ll-details-offers li { white-space: normal; border-radius: 10px; max-width: 100%; }
#lpw-loan .ll-bank-desc {
  margin: .75rem 0 0; padding: .75rem 1rem; background: var(--mint); border-radius: 10px;
  display: flex; gap: .5rem; align-items: flex-start; color: var(--green-dark); font-size: .85rem; line-height: 1.45;
}
#lpw-loan .ll-bank-desc .bi { flex: 0 0 auto; margin-top: .15rem; color: var(--green); }
#lpw-loan .ll-bank-desc p { margin: 0; }

#lpw-loan .ll-fineprint { font-size: .78rem; color: var(--ink-soft); margin: 1.25rem 0 0; max-width: 60rem; }

/* mid-list promo banners */
#lpw-loan .ll-promo {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none;
  line-height: 0; transition: box-shadow .15s ease, transform .15s ease;
}
#lpw-loan .ll-promo:hover { box-shadow: 0 2px 4px rgba(20,36,29,.06), 0 12px 28px -12px rgba(20,36,29,.22); transform: translateY(-1px); }
#lpw-loan .ll-promo-img { display: block; width: 100%; height: auto; object-fit: cover; }
#lpw-loan .ll-promo-label {
  position: absolute; top: .5rem; inset-inline-start: .5rem; z-index: 2;
  background: rgba(20,36,29,.55); color: #fff; font-size: .6rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 4px; line-height: 1.4;
}
/* graceful placeholder if the ad image is missing */
#lpw-loan .ll-promo-fallback { display: none; }
#lpw-loan .ll-promo--placeholder {
  background: linear-gradient(120deg, var(--mint), #eef6f0);
}
#lpw-loan .ll-promo--placeholder .ll-promo-fallback {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 96px; padding: 1rem 1.25rem; line-height: 1.4;
  color: var(--green-dark); font-weight: 600; font-size: .9rem; text-align: center;
}
#lpw-loan .ll-promo--placeholder .ll-promo-fallback .bi { font-size: 1.3rem; }

/* compare tray */
#lpw-loan .ll-tray { position: sticky; bottom: 0; z-index: 1030; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(20,36,29,.12); }
#lpw-loan .ll-tray-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .75rem; flex-wrap: wrap; }
#lpw-loan .ll-tray-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
#lpw-loan .ll-tray-chips span { background: var(--mint); color: var(--ink); font-size: .8rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; }
#lpw-loan .ll-tray .ll-btn-ghost { border-color: var(--line); color: var(--ink); }

/* compare modal */
#lpw-loan .ll-modal, .ll-modal { border-radius: var(--radius, 14px); }
.ll-cmp-table { width: 100%; border-collapse: collapse; }
.ll-cmp-table th, .ll-cmp-table td { padding: .7rem .9rem; border-bottom: 1px solid #dbe4dc; text-align: start; vertical-align: top; }
.ll-cmp-table thead th { font-family: 'Poppins', 'Noto Sans Sinhala', 'Noto Sans Tamil', sans-serif; font-size: 1rem; }
.ll-cmp-bank { display: flex; align-items: center; gap: .6rem; }
.ll-cmp-logo {
  width: 42px; height: 42px; flex: 0 0 auto; object-fit: contain;
  background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 4px;
}
.ll-cmp-logo-fb {
  width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 8px; background: #e4f6ec; color: #00a155; font-weight: 700;
}
.ll-cmp-bankname { line-height: 1.3; }
.ll-cmp-bankname small { color: #4c5f56; font-weight: 500; }
.ll-cmp-table td.is-win { color: #0d7a4d; font-weight: 700; }
.ll-cmp-rowlabel { font-size: .78rem; color: #4c5f56; white-space: nowrap; }

/* ══════════ CALCULATOR ══════════ */
#lpw-loan .ll-calc { padding: 3rem 0; background: #fff; border-block: 1px solid var(--line); }
#lpw-loan .ll-section-head { margin-bottom: 1.5rem; }
#lpw-loan .ll-slider-group { padding: .9rem 0; border-bottom: 1px dashed var(--line); }
#lpw-loan .ll-slider-group:last-child { border-bottom: 0; padding-bottom: 0; }
#lpw-loan .ll-slider-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
/* live "% of property value" badge on the down payment slider */
#lpw-loan .ll-slider-pct {
  display: inline-block; margin-inline-start: .4rem; padding: .1rem .4rem;
  border-radius: 999px; background: var(--mint); color: var(--green-dark);
  font-size: .72rem; font-weight: 700; vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
#lpw-loan .ll-slider-pct.is-min { background: #fdecea; color: #c0392b; }
#lpw-loan .ll-slider-num { width: 10rem; max-width: 45%; text-align: end; border: 1.5px solid var(--line); border-radius: 8px; padding: .35rem .6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
#lpw-loan .ll-slider-num:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(0,161,85,.18); }
#lpw-loan .ll-range {
  width: 100%; margin-top: .7rem; height: 1.6rem; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: transparent;
}
/* track */
#lpw-loan .ll-range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--green) var(--ll-fill, 0%), #d9e0dc var(--ll-fill, 0%));
}
#lpw-loan .ll-range::-moz-range-track {
  height: 8px; border-radius: 999px; background: #d9e0dc;
}
#lpw-loan .ll-range::-moz-range-progress {
  height: 8px; border-radius: 999px; background: var(--green);
}
/* thumb */
#lpw-loan .ll-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -9px; border-radius: 50%;
  background: var(--green); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(20,36,29,.28); cursor: grab;
  transition: transform .1s ease;
}
#lpw-loan .ll-range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--green); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(20,36,29,.28); cursor: grab;
}
#lpw-loan .ll-range:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; }
#lpw-loan .ll-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(0,161,85,.3); }
#lpw-loan .ll-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(0,161,85,.3); }

#lpw-loan .ll-result { position: sticky; top: 1rem; }
/* mobile: payment card on top, breakdown behind a "See details" toggle */
#lpw-loan .ll-seedetails {
  width: 100%; display: none; align-items: center; justify-content: center; gap: .4rem;
  margin-top: .5rem; padding: .7rem 1rem; border: 1.5px solid var(--green); border-radius: 12px;
  background: #fff; color: var(--green-dark); font-weight: 700; font-size: .95rem;
}
#lpw-loan .ll-seedetails .bi { transition: transform .2s ease; }
#lpw-loan .ll-seedetails:not(.collapsed) .bi { transform: rotate(180deg); }
@media (max-width: 991.98px) {
  #lpw-loan .ll-seedetails { display: flex; }               /* show the toggle */
}
@media (min-width: 992px) {
  /* desktop: CTA row sits below, aligned under the result (right) column */
  #lpw-loan .ll-calc-cta-col { order: 4; }
  #lpw-loan .ll-calc-cta-col .ll-result-ctas,
  #lpw-loan .ll-calc-cta-col .ll-help-line { margin-inline-start: auto; width: calc(50% - .75rem); }
  /* breakdown always visible regardless of Bootstrap collapse state */
  #lpw-loan .ll-breakdown.collapse:not(.show) { display: block !important; }
  #lpw-loan .ll-breakdown.collapsing { height: auto !important; }
}
#lpw-loan .ll-result-label { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
#lpw-loan .ll-result-big { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); color: var(--green); margin: 0; font-variant-numeric: tabular-nums; }
#lpw-loan .ll-result-split { display: flex; gap: 1.5rem; align-items: center; margin: 1.25rem 0; flex-wrap: wrap; }
#lpw-loan .ll-donut { --p: 60; width: 130px; height: 130px; border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--p) * 1%), #f2b13c 0); display: grid; place-items: center; flex: 0 0 auto; }
#lpw-loan .ll-donut::before { content: ""; position: absolute; width: 92px; height: 92px; border-radius: 50%; background: var(--card); }
#lpw-loan .ll-donut { position: relative; }
#lpw-loan .ll-donut-center { position: relative; font-weight: 700; font-family: var(--ff-display); font-size: 1.05rem; text-align: center; line-height: 1.15; }
#lpw-loan .ll-donut-key { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--ink-soft); margin-top: .6rem; }
#lpw-loan .ll-donut-key .k { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-inline-end: .4rem; }
#lpw-loan .k-principal { background: var(--green); } #lpw-loan .k-interest { background: #f2b13c; }
#lpw-loan .ll-donut-wrap { display: flex; flex-direction: column; align-items: center; }
#lpw-loan .ll-stats { flex: 1; min-width: 200px; margin: 0; }
#lpw-loan .ll-stats > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
#lpw-loan .ll-stats dt { font-weight: 500; color: var(--ink-soft); font-size: .88rem; }
#lpw-loan .ll-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
#lpw-loan .ll-result-ctas { display: flex; gap: .6rem; flex-wrap: wrap; }

#lpw-loan .ll-schedule { margin-top: 2rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; }
#lpw-loan .ll-schedule summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; }
#lpw-loan .ll-schedule summary::before { content: "▸"; color: var(--green); transition: transform .15s; }
#lpw-loan .ll-schedule[open] summary::before { transform: rotate(90deg); }
#lpw-loan .ll-table { font-variant-numeric: tabular-nums; margin-top: 1rem; }
#lpw-loan .ll-table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); border-bottom-color: var(--line); }
#lpw-loan .ll-table td { border-bottom-color: var(--line); }

/* ══════════ AFFORDABILITY ══════════ */
#lpw-loan .ll-afford { padding: 3rem 0; background: #f1f3f6; border-block: 1px solid var(--line); }
#lpw-loan .ll-afford-result { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dashed var(--line); }
#lpw-loan .ll-afford-combined {
  display: flex; flex-direction: column; gap: .1rem; width: 100%;
  background: var(--mint); border: 1px solid #cdebd8; border-radius: 10px; padding: .5rem .8rem;
}
#lpw-loan .ll-afford-combined-label { font-size: .72rem; font-weight: 600; color: var(--green-dark); }
#lpw-loan .ll-afford-combined-val { font-family: var(--ff-display); font-weight: 700; font-size: 1.1rem; color: var(--green-dark); }
#lpw-loan .ll-afford-big { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); color: var(--green); margin: 0 0 .25rem; }

/* ══════════ ALERT + ADVICE ══════════ */
#lpw-loan .ll-duo { padding: 3rem 0; }
#lpw-loan .ll-panel { border-radius: var(--radius); padding: 1.75rem; height: 100%; }
#lpw-loan .ll-panel-alert { background: #f4f6f8; border: 1px solid var(--line); }
#lpw-loan .ll-panel-advice { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
/* buttons center their icon + label as a unit (fixes left-drift on full-width buttons) */
#lpw-loan .btn { display: inline-flex; align-items: center; justify-content: center; gap: .15rem; }
#lpw-loan .ll-alert-form { display: flex; gap: .6rem; flex-wrap: wrap; }
#lpw-loan .ll-alert-form .ll-input { flex: 1 1 220px; }
#lpw-loan .ll-hr { border-color: var(--line); opacity: 1; margin: 1.25rem 0 1rem; }

/* ══════════ PROPERTIES ══════════ */
#lpw-loan .ll-props { padding: 3rem 0; background: #fff; border-block: 1px solid var(--line); }
#lpw-loan .ll-props-tabs {
  display: flex; gap: .5rem; margin: 1rem 0 1.25rem; padding: 0 0 .25rem;
  list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
#lpw-loan .ll-props-tabs::-webkit-scrollbar { display: none; }
#lpw-loan .ll-props-tabs li { flex: 0 0 auto; scroll-snap-align: start; }
#lpw-loan .ll-props-tabs a { display: inline-flex; align-items: center; white-space: nowrap; padding: .4rem 1rem; border-radius: 999px; border: 1.5px solid var(--line); color: var(--ink-soft); font-size: .85rem; font-weight: 600; text-decoration: none; }
#lpw-loan .ll-props-tabs a.active, #lpw-loan .ll-props-tabs a:hover { background: var(--green-ink); border-color: var(--green-ink); color: #fff; }
#lpw-loan .ll-carousel { position: relative; }
#lpw-loan .ll-props-scroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: 1rem;
  overflow-x: auto; padding-bottom: .75rem; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: thin;
}
#lpw-loan .ll-props-scroll:focus-visible { outline: 3px solid rgba(0,161,85,.4); outline-offset: 4px; border-radius: 8px; }
/* nav arrows (hidden on touch / when not needed) */
#lpw-loan .ll-carousel-nav {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 3;
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 1.15rem;
  box-shadow: 0 4px 14px rgba(20,36,29,.14); transition: opacity .2s, background .15s;
}
#lpw-loan .ll-carousel-nav:hover { background: var(--mint); color: var(--green); }
#lpw-loan .ll-carousel-prev { inset-inline-start: -1.1rem; }
#lpw-loan .ll-carousel-next { inset-inline-end: -1.1rem; }
#lpw-loan .ll-carousel-nav[hidden] { display: none; }
#lpw-loan .ll-carousel-nav:disabled { opacity: .35; pointer-events: none; }

/* view-more end card */
#lpw-loan .ll-prop-more { display: grid; place-items: center; background: var(--mint); border: 1.5px dashed var(--green); min-height: 100%; }
#lpw-loan .ll-prop-more:hover { background: #d9f0e2; }
#lpw-loan .ll-prop-more-inner { display: flex; flex-direction: column; align-items: center; gap: .6rem; color: var(--green-dark); font-weight: 700; text-align: center; padding: 1rem; }
#lpw-loan .ll-prop-more-ico { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 1.3rem; }
#lpw-loan .ll-prop-card { scroll-snap-align: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); transition: box-shadow .15s ease, transform .15s ease; }
#lpw-loan .ll-prop-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
#lpw-loan .ll-prop-img { display: block; height: 150px; background: var(--mint) center/cover no-repeat; }
#lpw-loan .ll-prop-body { display: block; padding: .9rem 1rem 1.1rem; }
#lpw-loan .ll-prop-price { display: block; font-family: var(--ff-display); font-weight: 700; color: var(--green); font-size: 1.1rem; }
#lpw-loan .ll-prop-price-type { font-family: inherit; font-weight: 500; font-size: .78rem; color: var(--ink-soft); }
#lpw-loan .ll-prop-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: .9rem; margin: .2rem 0; }
#lpw-loan .ll-prop-meta { display: block; font-size: .78rem; color: var(--ink-soft); }

/* figures called out inside a sentence */
#lpw-loan .ll-amt { font-weight: 800; color: var(--ink); white-space: nowrap; }
#lpw-loan .ll-props .ll-amt { color: var(--green-dark); }

/* ══════════ FAQ ══════════ */
#lpw-loan .ll-faq { padding: 3rem 0 4rem; }
#lpw-loan .ll-accordion .accordion-item { border: 1px solid var(--line); border-radius: 12px !important; margin-bottom: .6rem; overflow: hidden; background: var(--card); }
#lpw-loan .ll-accordion .accordion-button { font-weight: 600; color: var(--ink); background: var(--card); box-shadow: none; padding: 1rem 1.25rem; }
#lpw-loan .ll-accordion .accordion-button:not(.collapsed) { background: var(--mint); color: var(--green-dark); }
#lpw-loan .ll-accordion .accordion-button:focus { box-shadow: 0 0 0 3px rgba(0,161,85,.22); }
#lpw-loan .ll-accordion .accordion-body { color: var(--ink-soft); }

/* ══════════ FOOTER ARTICLE (SEO) ══════════ */
#lpw-loan .ll-article { padding: 0 0 4rem; }
#lpw-loan .ll-article-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem 1.75rem 1.5rem;
}
#lpw-loan .ll-article-card .ll-h2 { margin: 0 0 1rem; }
#lpw-loan .ll-article-card p {
  color: var(--ink-soft);
  font-size: .9rem;
  margin: 0 0 1rem;
}
#lpw-loan .ll-article-card p:last-child { margin-bottom: 0; }
#lpw-loan .ll-article-card a { color: var(--green); font-weight: 600; text-decoration: none; }
#lpw-loan .ll-article-card a:hover { color: var(--green-dark); text-decoration: underline; }

/* ══════════ FLOATING SECTION MENU (underline tabs) ══════════ */
#lpw-loan .ll-secnav {
  position: sticky; top: var(--ll-float-offset, 0px); z-index: 1042;
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
#lpw-loan .ll-secnav.is-stuck { box-shadow: 0 6px 18px -8px rgba(20,36,29,.22); }
#lpw-loan .ll-secnav-inner { padding: 0 .75rem; position: relative; }
/* hint that the tab strip scrolls: fade + chevron on the overflowing side */
#lpw-loan .ll-secnav-more {
  position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 2;
  width: 2.6rem; border: 0; padding: 0 0 0 .9rem;
  display: none; align-items: center; justify-content: flex-end;
  color: var(--green-dark); font-size: .95rem;
  background: linear-gradient(to left, rgba(255,255,255,.98) 55%, rgba(255,255,255,0));
  animation: llNudgeX 1.6s ease-in-out 3;
}
#lpw-loan .ll-secnav.has-more .ll-secnav-more { display: flex; }
@keyframes llNudgeX {
  0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  #lpw-loan .ll-secnav-more { animation: none; }
}
#lpw-loan .ll-secnav-list {
  list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#lpw-loan .ll-secnav-list::-webkit-scrollbar { display: none; }
#lpw-loan .ll-secnav-list li { flex: 0 0 auto; }
#lpw-loan .ll-secnav-link {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .85rem .95rem; border: 0; background: none;
  color: var(--ink-soft); font-size: .88rem; font-weight: 600; text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
#lpw-loan .ll-secnav-link .bi { color: currentColor; font-size: 1rem; opacity: .8; }
#lpw-loan .ll-secnav-link:hover { color: var(--green-dark); }
#lpw-loan .ll-secnav-link.is-active {
  color: var(--green-dark); border-bottom-color: var(--green);
}
#lpw-loan .ll-secnav-link.is-active .bi { opacity: 1; color: var(--green); }
@media (max-width: 767.98px) {
  #lpw-loan .ll-secnav-inner { padding: 0 .4rem; }
  #lpw-loan .ll-secnav-link { font-size: .82rem; padding: .75rem .7rem; }
}

/* apply form: the submit sticks to the bottom of the sheet on mobile */
#lpw-loan .ll-apply-foot { position: relative; }
#lpw-loan .ll-apply-fill {
  margin: .5rem 0 0; font-size: .78rem; color: var(--ink-soft); text-align: center;
}
#lpw-loan .ll-apply-foot:has(.ll-apply-submit:enabled) .ll-apply-fill { visibility: hidden; }
#lpw-loan .ll-apply-submit:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 991.98px) {
  #lpw-loan .ll-apply-foot {
    position: sticky; bottom: 0; z-index: 4;
    margin: 1rem -1rem 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 28%);
  }
  #lpw-loan .ll-apply-fill { margin-top: .35rem; }
}

/* ══════════ STICKY MOBILE CTA ══════════ */
#lpw-loan .ll-sticky {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 1040;
  display: flex; align-items: center; gap: .6rem;
  background: #fff; border-top: 1px solid var(--line);
  padding: .45rem .75rem calc(.45rem + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(20,36,29,.12);
  transform: translateY(110%); transition: transform .25s ease;
}
#lpw-loan .ll-sticky.is-visible { transform: translateY(0); }
#lpw-loan .ll-sticky-label { display: block; font-size: .64rem; color: var(--ink-soft); line-height: 1.2; }
#lpw-loan .ll-sticky-emi { font-family: var(--ff-display); font-weight: 700; font-size: 1rem; color: var(--green); }
#lpw-loan .ll-sticky-unit { font-size: .68rem; color: var(--ink-soft); }
#lpw-loan .ll-sticky .ll-btn-primary { padding: .5rem .9rem; white-space: nowrap; }
#lpw-loan .ll-sticky .ll-btn-calc { width: 2.5rem; height: 2.5rem; }
/* two controls left in the bar — let them share the row evenly */
#lpw-loan .ll-sticky > * { flex: 1 1 0; min-width: 0; }
#lpw-loan .ll-sticky .ll-calcmenu-btn, #lpw-loan .ll-sticky .js-apply { width: 100%; justify-content: center; }

/* calculator bottom sheet */
/* Calculators ghost menu in the sticky bar */
#lpw-loan .ll-calcmenu { position: relative; flex: 0 0 auto; }
#lpw-loan .ll-calcmenu-btn { padding: .5rem .75rem; font-size: .85rem; white-space: nowrap; }
#lpw-loan .ll-calcmenu-caret { transition: transform .2s ease; font-size: .8em; }
#lpw-loan .ll-calcmenu.is-open .ll-calcmenu-caret { transform: rotate(180deg); }
/* the options live in a bottom sheet (#calcPicker) — sizing is set below,
   after .ll-sheet, so the full-height sheet rules don't override it */
.ll-calcpick-grid { display: grid; gap: .6rem; }
.ll-calcpick-item {
  display: flex; align-items: center; gap: .85rem; width: 100%; text-align: start;
  padding: .9rem 1rem; border: 1.5px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--ink); box-shadow: var(--shadow);
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.ll-calcpick-item:hover { border-color: var(--green); background: var(--mint); }
.ll-calcpick-item:active { transform: scale(.99); }
.ll-calcpick-ico {
  flex: 0 0 auto; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 12px; background: var(--mint); color: var(--green-dark); font-size: 1.15rem;
}
.ll-calcpick-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.ll-calcpick-title { font-weight: 700; font-size: .95rem; line-height: 1.3; }
.ll-calcpick-sub { font-size: .78rem; font-weight: 500; color: var(--ink-soft); line-height: 1.35; }
.ll-calcpick-caret { flex: 0 0 auto; color: var(--ink-soft); font-size: .85rem; }
.offcanvas.ll-sheet, .ll-sheet {
  --bs-offcanvas-height: 92vh;
  height: 92vh; max-height: 92vh;
  border-radius: 18px 18px 0 0; border: 0;
}
/* dvh accounts for mobile browser chrome (address bar) */
@supports (height: 1dvh) {
  .offcanvas.ll-sheet, .ll-sheet { --bs-offcanvas-height: 94dvh; height: 94dvh; max-height: 94dvh; }
}
.ll-sheet .offcanvas-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ll-sheet .offcanvas-header {
  position: relative; border-bottom: 1px solid #e3e6ea; padding: 1.15rem 1.25rem .9rem;
}
.ll-sheet-handle {
  position: absolute; top: .45rem; left: 50%; transform: translateX(-50%);
  width: 44px; height: 4px; border-radius: 999px; background: #d5dade;
}
.ll-sheet .offcanvas-body { background: #f7f8fa; padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); }
.ll-sheet .ll-result { position: static; }
/* calculator picker: hugs its two buttons instead of filling the screen */
.offcanvas.ll-sheet.ll-calcpick, .ll-sheet.ll-calcpick {
  --bs-offcanvas-height: auto; height: auto; min-height: 0; max-height: 85vh;
}
@supports (height: 1dvh) {
  .offcanvas.ll-sheet.ll-calcpick, .ll-sheet.ll-calcpick {
    --bs-offcanvas-height: auto; height: auto; max-height: 85dvh;
  }
}
.ll-sheet.ll-calcpick .offcanvas-body {
  flex: 0 0 auto; padding: .75rem 1rem calc(1rem + env(safe-area-inset-bottom));
}

/* ══════════ LEAD-CAPTURE FORM ══════════ */
.offcanvas.ll-apply, .ll-apply {
  --bs-offcanvas-width: 30rem;
  border: 0; box-shadow: -8px 0 40px rgba(20,36,29,.16);
}
.ll-apply-head { align-items: flex-start; border-bottom: 1px solid #e3e6ea; padding: 1.25rem 1.4rem; position: relative; }
.ll-apply-for { font-size: .82rem; color: #4c5f56; }
.ll-apply-for strong { color: #00a155; }
.ll-apply-body { padding: 1.25rem 1.4rem calc(1.5rem + env(safe-area-inset-bottom)); background: #f7f8fa; }
.ll-apply-sub {
  display: flex; gap: .5rem; align-items: flex-start;
  background: #e4f6ec; color: #007a3f; border-radius: 12px; padding: .7rem .9rem;
  font-size: .85rem; font-weight: 500; margin-bottom: 1.2rem;
}
.ll-apply-sub .bi { font-size: 1.05rem; flex: 0 0 auto; }
.ll-apply .ll-field { margin-bottom: 1rem; }
.ll-apply .ll-field .row & { margin-bottom: 0; }

/* purpose picker as friendly cards */
.ll-purpose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.ll-purpose { margin: 0; cursor: pointer; }
.ll-purpose input { position: absolute; opacity: 0; pointer-events: none; }
.ll-purpose span {
  display: flex; align-items: center; gap: .5rem; height: 100%;
  border: 1.5px solid #e3e6ea; border-radius: 12px; padding: .7rem .8rem;
  font-size: .85rem; font-weight: 600; color: #14241d; background: #fff;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ll-purpose span .bi { color: #00a155; font-size: 1.05rem; }
.ll-purpose input:checked + span { border-color: #00a155; background: #e4f6ec; box-shadow: 0 0 0 3px rgba(0,161,85,.15); }
.ll-purpose input:focus-visible + span { outline: 2px solid rgba(0,161,85,.5); outline-offset: 2px; }

.ll-apply .ll-error { display: none; color: #c0392b; font-size: .78rem; margin-top: .3rem; }
.ll-apply .ll-error.show { display: block; }
.ll-apply .is-invalid { border-color: #c0392b !important; }
.ll-apply-submit { margin-top: 1.3rem; padding-block: .8rem; font-size: 1.02rem; }
.ll-apply-trust { display: flex; gap: .4rem; align-items: center; justify-content: center; color: #6b7a72; font-size: .75rem; margin: .7rem 0 0; }

/* success state */
.ll-apply-success { text-align: center; padding: 2.5rem 1rem; }
.ll-success-ico {
  width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
  background: #00a155; color: #fff; display: grid; place-items: center; font-size: 2rem;
  animation: llPop .35s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes llPop { from { transform: scale(0); } to { transform: scale(1); } }

/* mobile: slide up from the bottom as a sheet */
@media (max-width: 575.98px) {
  .offcanvas.ll-apply, .ll-apply {
    inset-inline: 0; top: auto; bottom: 0; width: auto !important;
    height: 92vh; border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  @supports (height: 1dvh) { .offcanvas.ll-apply, .ll-apply { height: 94dvh; } }
  .offcanvas.ll-apply.showing, .offcanvas.ll-apply.show { transform: none; }
  .ll-apply .ll-purpose-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 991.98px) {
  #lpw-loan .ll-result { text-align: center; }
  /* when breakdown is open, the payment sticks to the top as a floating header */
  #lpw-loan .ll-result { position: sticky; top: var(--ll-float-offset, 0px); z-index: 20; }
  #lpw-loan .ll-calc-cta-col .ll-result-ctas { justify-content: center; }
  #lpw-loan .ll-calc-cta-col .btn { flex: 1 1 auto; }
  #lpw-loan .ll-help-line { text-align: center; }
  #lpw-loan .ll-result-label { font-size: .9rem; }
  #lpw-loan .ll-result-big { font-size: clamp(2.2rem, 1.5rem + 6vw, 3rem); }
  #lpw-loan .ll-result-ctas { justify-content: center; }
  #lpw-loan .ll-result-ctas .btn { flex: 1 1 auto; }
}
@media (max-width: 991.98px) {
  #lpw-loan .ll-hero { padding: 2rem 0 1.75rem; }
  #lpw-loan .card-soft { padding: 1.1rem; }

  /* rate board rows become cards */
  #lpw-loan .ll-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "bank bank"
      "rate emi"
      "bar  bar"
      "act  act"
      "det  det";
    gap: .6rem .8rem; padding: 1rem;
  }
  /* grid-areas drive order on mobile; clear the desktop order swaps */
  #lpw-loan .ll-cell-bank, #lpw-loan .ll-cell-rate, #lpw-loan .ll-cell-emi,
  #lpw-loan .ll-cell-offers, #lpw-loan .ll-cell-actions, #lpw-loan .ll-details,
  #lpw-loan .ll-board-legend > * { order: 0; }
  #lpw-loan .ll-cell-bank    { grid-area: bank; }
  #lpw-loan .ll-cell-rate    { grid-area: rate; text-align: start; align-self: start; display: flex; flex-wrap: wrap; align-items: baseline; }
  #lpw-loan .ll-cell-offers  { grid-area: bar; }
  #lpw-loan .ll-cell-emi     { grid-area: emi; text-align: end; align-self: start; justify-content: flex-end; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .4rem; }
  /* rate and price share the same row — match their number size + top alignment */
  #lpw-loan .ll-cell-rate .ll-upwards,
  #lpw-loan .ll-cell-emi .ll-emi-unit { display: block; width: 100%; font-size: .72rem; margin: 0; }
  #lpw-loan .ll-cell-rate .ll-upwards { text-align: start; }   /* "Upwards" sits below the rate */
  #lpw-loan .ll-cell-emi .ll-emi-unit { order: 2; text-align: end; }
  #lpw-loan .ll-cell-rate .ll-rate,
  #lpw-loan .ll-cell-emi .ll-emi { font-size: 1.4rem; line-height: 1.2; }
  #lpw-loan .ll-cell-emi .ll-emi-row { order: 1; }
  #lpw-loan .ll-cell-actions { grid-area: act; justify-content: space-between; }
  #lpw-loan .ll-details      { grid-area: det; }
  #lpw-loan .ll-emi { font-size: 1.3rem; }
  #lpw-loan .ll-board-tools .ll-sort-group { width: 100%; }
  #lpw-loan .ll-board-tools .ll-chip { flex: 1; }
  #lpw-loan .ll-carousel-nav { display: none; }
  #lpw-loan .ll-props-scroll { grid-auto-columns: 82%; gap: .8rem; }
  /* compare tray floats directly above the sticky Apply bar (never behind it) */
  #lpw-loan .ll-tray {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 1035;
    border-top: 1px solid var(--line); border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 24px rgba(20,36,29,.16);
  }
  /* when the sticky Apply bar is showing, lift the tray to sit above it */
  #lpw-loan.sticky-shown .ll-tray { bottom: var(--ll-sticky-h, 4rem); border-radius: 14px 14px 0 0; }
  #lpw-loan.sticky-shown.tray-open body,
  #lpw-loan body { padding-bottom: 4.5rem; }
  #lpw-loan.sticky-shown .ll-tray:not([hidden]) { padding-bottom: .7rem; }
  #lpw-loan .ll-faq { padding-bottom: 3rem; }
  #lpw-loan .ll-article { padding-bottom: 6rem; } /* clear the sticky bar */
}

/* ══════════ HOUSING LOAN GUIDE ══════════ */
/* Its own section: illustration on one side, the pitch on the other. */
#lpw-loan .ll-guide { padding: 3rem 0; background: var(--paper); border-block: 1px solid var(--line); }
#lpw-loan .ll-guide-feature {
  display: grid; grid-template-columns: minmax(0, 300px) 1fr; align-items: stretch;
  gap: 0; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#lpw-loan .ll-guide-feature:hover {
  transform: translateY(-2px); border-color: rgba(233,90,29,.5);
  box-shadow: 0 18px 34px -20px rgba(20,36,29,.55);
}
#lpw-loan .ll-guide-thumb {
  display: grid; place-items: center; overflow: hidden;
  background: #0a3f28; min-height: 190px;
}
#lpw-loan .ll-guide-art { width: min(78%, 220px); height: auto; }
#lpw-loan .ll-guide-text {
  display: flex; flex-direction: column; gap: .35rem; padding: 1.4rem 1.6rem;
  justify-content: center;
}
#lpw-loan .ll-guide-kicker {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange);
}
#lpw-loan .ll-guide-time {
  color: var(--ink-soft); font-weight: 600; letter-spacing: 0; text-transform: none;
}
#lpw-loan .ll-guide-time::before { content: "·"; margin-inline-end: .4rem; }
#lpw-loan .ll-guide-h {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.3; color: var(--ink);
}
#lpw-loan .ll-guide-sub { font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }
#lpw-loan .ll-guide-cta {
  margin-top: .5rem; font-size: .9rem; font-weight: 700; color: #b8460f;
  display: inline-flex; align-items: center; gap: .35rem;
}
#lpw-loan .ll-guide-cta .bi { transition: transform .15s ease; }
#lpw-loan .ll-guide-feature:hover .ll-guide-cta .bi { transform: translateX(3px); }
@media (max-width: 767.98px) {
  #lpw-loan .ll-guide { padding: 2rem 0; }
  #lpw-loan .ll-guide-feature { grid-template-columns: 1fr; }
  #lpw-loan .ll-guide-thumb { min-height: 0; aspect-ratio: 16 / 9; }
  #lpw-loan .ll-guide-text { padding: 1.1rem 1.1rem 1.3rem; }
}

/* ══════════ HOME LOAN VIDEOS ══════════ */
#lpw-loan .ll-videos { padding: 3rem 0; background: var(--paper); border-block: 1px solid var(--line); }
#lpw-loan .ll-video-scroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 210px); gap: .85rem;
  overflow-x: auto; padding-bottom: .75rem; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: thin;
}
#lpw-loan .ll-video-scroll:focus-visible { outline: 3px solid rgba(0,161,85,.4); outline-offset: 4px; border-radius: 8px; }
#lpw-loan .ll-video-card {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: .6rem;
  padding: 0; border: 0; background: none; text-align: start; cursor: pointer;
}
#lpw-loan .ll-video-thumb {
  position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 14px;
  min-height: 240px; background: #111; box-shadow: var(--shadow); overflow: hidden;
}
/* Fallback for older mobile browsers that don't honor aspect-ratio reliably.
   The pseudo-element reserves portrait space so the card doesn't collapse. */
#lpw-loan .ll-video-thumb::before {
  content: "";
  display: block;
  padding-top: 177.7778%;
}
#lpw-loan .ll-video-preview {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0; pointer-events: none;
}
#lpw-loan .ll-video-preview-fallback {
  display: grid; place-items: center;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.35)),
    linear-gradient(135deg, #18b96a 0%, #0a3f28 100%);
}
#lpw-loan .ll-video-preview-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4.5rem; padding: .35rem .7rem; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--green-dark);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
}
#lpw-loan .ll-video-thumb-cover {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.18) 100%);
}
#lpw-loan .ll-video-play,
#lpw-loan .ll-video-len {
  position: absolute;
}
#lpw-loan .ll-video-card:hover .ll-video-thumb { box-shadow: 0 14px 30px -14px rgba(20,36,29,.55); }
#lpw-loan .ll-video-play {
  position: absolute; inset: 0; margin: auto; width: 2.9rem; height: 2.9rem; z-index: 2;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--green-dark); font-size: 1.5rem;
  transition: transform .15s ease, background .15s ease;
}
#lpw-loan .ll-video-card:hover .ll-video-play { transform: scale(1.08); background: #fff; }
#lpw-loan .ll-video-len {
  position: absolute; inset-block-end: .5rem; inset-inline-end: .5rem;
  background: rgba(0,0,0,.72); color: #fff; font-size: .72rem; font-weight: 600;
  padding: .12rem .4rem; border-radius: 5px;
}
#lpw-loan .ll-video-title {
  font-size: .82rem; font-weight: 700; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ll-video-lightbox {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  background: rgba(8, 18, 14, .82);
  backdrop-filter: blur(10px);
}
.ll-video-lightbox[hidden] { display: none !important; }
.ll-video-lightbox-stage {
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
  max-height: 92vh;
}
.ll-video-lightbox-player {
  width: min(300px, 78vw);
  height: min(68vh, 520px);
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 28px 70px rgba(0,0,0,.5);
}
.ll-video-lightbox.is-landscape .ll-video-lightbox-player {
  width: min(720px, 90vw);
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 68vh;
}
.ll-video-lightbox-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.ll-video-lightbox-title {
  margin: 0; max-width: min(320px, 90vw); color: #fff; text-align: center;
  font-weight: 600; font-size: .95rem; line-height: 1.35;
}
.ll-video-lightbox.is-landscape .ll-video-lightbox-title { max-width: min(720px, 90vw); }
.ll-video-lightbox-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%;
  background: #fff; color: #1a2e24; display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.25); cursor: pointer;
}
.ll-video-lightbox-close:hover { background: #e8f6ee; }
/* nothing to embed yet (demo build) */
#lpw-loan .ll-video-card.is-empty .ll-video-play { background: rgba(255,255,255,.6); }

/* ══════════ ALBOT AI CHAT ══════════ */
/* Deep-green gradient panel — picks up the hero's palette so the assistant
   reads as its own surface rather than another white card. */
#lpw-loan .ll-albot {
  position: relative; isolation: isolate;
  padding: 3rem 0; border-block: 1px solid var(--line);
  background: linear-gradient(180deg, #eef5f1 0%, #e2eee8 100%);
}
#lpw-loan .ll-albot::before {   /* soft brand wash behind the panel */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 70% at 82% 0%, rgba(0,161,85,.14), transparent 70%);
}
#lpw-loan .ll-albot-avatar {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #7ee2ac; font-size: .95rem;
  border: 1px solid rgba(255,255,255,.16);
}

/* mobile launcher — same gradient so the sheet feels like an extension of it */
#lpw-loan .ll-albot-launch {
  display: flex; align-items: center; gap: .75rem; width: 100%; text-align: start;
  padding: .9rem 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius);
  background: linear-gradient(150deg, #0b3a26 0%, #10553a 55%, #08301f 100%);
  color: #fff; box-shadow: 0 14px 30px -16px rgba(6,42,28,.85);
}
#lpw-loan .ll-albot-launch > .bi { color: rgba(255,255,255,.7); }
#lpw-loan .ll-albot-launch-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
#lpw-loan .ll-albot-launch-title { font-weight: 700; font-size: .92rem; color: #fff; }
#lpw-loan .ll-albot-launch-sub {
  font-size: .78rem; color: rgba(255,255,255,.68);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* panel */
#lpw-loan .ll-chat {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius);
  background: linear-gradient(155deg, #0b3a26 0%, #10553a 48%, #072b1c 100%);
  box-shadow: 0 24px 50px -24px rgba(6,42,28,.75), 0 2px 6px rgba(20,36,29,.18);
  color: #eaf3ee;
}
#lpw-loan .ll-chat::before {    /* subtle light bloom in the top corner */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(80% 55% at 12% 0%, rgba(126,226,172,.16), transparent 60%);
}
#lpw-loan .ll-chat-log {
  display: flex; flex-direction: column; gap: .75rem;
  height: clamp(18rem, 42vh, 26rem); overflow-y: auto; padding-inline-end: .3rem;
  scroll-behavior: smooth;   /* no overscroll containment: it traps the page scroll */
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
}
#lpw-loan .ll-chat-log::-webkit-scrollbar { width: 6px; }
#lpw-loan .ll-chat-log::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.22); border-radius: 999px;
}
#lpw-loan .ll-msg { display: flex; gap: .55rem; align-items: flex-start; max-width: 100%; }
#lpw-loan .ll-msg-user { flex-direction: row-reverse; }
#lpw-loan .ll-bubble {
  max-width: min(44rem, 82%); padding: .6rem .85rem; border-radius: 14px;
  font-size: .88rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
#lpw-loan .ll-msg-bot .ll-bubble {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-start-start-radius: 4px; color: #eaf3ee;
  backdrop-filter: blur(2px);
}
#lpw-loan .ll-msg-user .ll-bubble {
  background: linear-gradient(135deg, #00c06a 0%, #00a155 100%);
  color: #fff; border-start-end-radius: 4px;
  box-shadow: 0 6px 16px -8px rgba(0,161,85,.9);
}
#lpw-loan .ll-msg-error .ll-bubble {
  background: rgba(255,106,86,.14); border: 1px solid rgba(255,140,120,.42); color: #ffd7cf;
}
#lpw-loan .ll-msg-retry {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .4rem;
  border: 0; background: none; padding: 0; font-size: .8rem; font-weight: 700;
  color: #7ee2ac; text-decoration: underline; cursor: pointer;
}
/* typing dots */
#lpw-loan .ll-typing { display: inline-flex; gap: .25rem; align-items: center; padding: .2rem 0; }
#lpw-loan .ll-typing i {
  width: .4rem; height: .4rem; border-radius: 50%; background: #b6ecce; opacity: .5;
  animation: llBlink 1.2s infinite ease-in-out;
}
#lpw-loan .ll-typing i:nth-child(2) { animation-delay: .18s; }
#lpw-loan .ll-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes llBlink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* suggestion chips */
#lpw-loan .ll-chat-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
#lpw-loan .ll-chat-chip {
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07);
  color: #dcece4; border-radius: 999px; padding: .35rem .75rem;
  font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#lpw-loan .ll-chat-chip:hover {
  background: rgba(126,226,172,.18); border-color: rgba(126,226,172,.55); color: #fff;
}
#lpw-loan .ll-chat-chips[hidden] { display: none; }

/* composer */
#lpw-loan .ll-chat-form {
  display: flex; align-items: flex-end; gap: .5rem;
  border: 1px solid rgba(255,255,255,.18); border-radius: 14px;
  padding: .4rem .4rem .4rem .75rem;
  background: rgba(255,255,255,.09);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#lpw-loan .ll-chat-form:focus-within {
  border-color: rgba(126,226,172,.7); box-shadow: 0 0 0 3px rgba(0,161,85,.22);
}
#lpw-loan .ll-chat-input {
  flex: 1 1 auto; border: 0; outline: 0; resize: none; background: none;
  font: inherit; font-size: .88rem; color: #fff;
  max-height: 7rem; padding: .35rem 0; line-height: 1.5;
}
#lpw-loan .ll-chat-input::placeholder { color: rgba(255,255,255,.55); }
#lpw-loan .ll-chat-send {
  flex: 0 0 auto; display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border: 0; border-radius: 12px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #00c06a 0%, #00a155 100%);
  box-shadow: 0 6px 16px -8px rgba(0,192,106,.9);
}
#lpw-loan .ll-chat-send:hover { filter: brightness(1.08); }
#lpw-loan .ll-chat-send:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
#lpw-loan .ll-chat-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
}
#lpw-loan .ll-chat-foot .ll-hint { color: rgba(255,255,255,.6); }
#lpw-loan .ll-chat-clear {
  border: 0; background: none; padding: 0; font-size: .78rem; font-weight: 600;
  color: rgba(255,255,255,.7); cursor: pointer; white-space: nowrap;
}
#lpw-loan .ll-chat-clear:hover { color: #7ee2ac; }

/* in the mobile sheet the panel fills the height and only the log scrolls */
.ll-albot-sheet { background: #072b1c; color: #eaf3ee; }
.ll-albot-sheet .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.12); }
.ll-albot-sheet .ll-h3 { color: #fff; }
.ll-albot-sheet .ll-ico { background: rgba(255,255,255,.12); color: #7ee2ac; border-color: rgba(255,255,255,.16); }
.ll-albot-sheet .ll-sheet-handle { background: rgba(255,255,255,.3); }
.ll-albot-sheet .btn-close { filter: invert(1) grayscale(1) brightness(2.2); opacity: .8; }
#lpw-loan .ll-albot-sheet .offcanvas-body,
.ll-albot-sheet .offcanvas-body { display: flex; padding: 0; background: transparent; }
.ll-albot-sheet .ll-chat {
  flex: 1 1 auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
}
.ll-albot-sheet .ll-chat-log {
  flex: 1 1 auto; height: auto; min-height: 0;
  overscroll-behavior: contain;   /* inside the sheet, containment is what we want */
}
@media (max-width: 991.98px) {
  /* on mobile the panel only exists inside the sheet */
  #lpw-loan > .ll-albot #albotPanel { display: none; }
  #lpw-loan .ll-albot { padding: 2rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  #lpw-loan .ll-chat-log { scroll-behavior: auto; }
}

/* ══════════ FLOATING PROPERTIES NUDGE ══════════ */
/* Desktop: card pinned bottom-end. Mobile: sheet that slides up from the bottom.
   Sits under the sticky Apply bar (1040) so it can never cover the CTA. */
#lpw-loan .ll-nudge {
  position: fixed; z-index: 1038;
  inset-inline-end: 1.25rem; bottom: 1.25rem;
  width: min(23rem, calc(100vw - 2.5rem));
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .9rem 2.1rem .9rem 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 20px 44px -20px rgba(20,36,29,.5), 0 2px 6px rgba(20,36,29,.08);
  opacity: 0; transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease;
}
#lpw-loan .ll-nudge[hidden] { display: none; }
#lpw-loan .ll-nudge.is-in { opacity: 1; transform: translateY(0); }
/* comparing banks takes priority — the tray owns the bottom of the screen */
#lpw-loan.tray-open .ll-nudge { display: none; }
#lpw-loan .ll-nudge-ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--mint); color: var(--green-dark); font-size: 1.15rem;
}
#lpw-loan .ll-nudge-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
#lpw-loan .ll-nudge-title { font-weight: 700; font-size: .95rem; color: var(--ink); }
#lpw-loan .ll-nudge-sub { font-size: .8rem; color: var(--ink-soft); }
#lpw-loan .ll-nudge-cta { align-self: flex-start; margin-top: .55rem; }
#lpw-loan .ll-nudge-close {
  position: absolute; top: .4rem; inset-inline-end: .4rem;
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  border: 0; background: none; border-radius: 50%;
  color: var(--ink-soft); font-size: .8rem; cursor: pointer; line-height: 1;
}
#lpw-loan .ll-nudge-close:hover { background: var(--mint); color: var(--green-dark); }
@media (max-width: 767.98px) {
  #lpw-loan .ll-nudge {
    inset-inline: 0; bottom: 0; width: auto;
    border-radius: 16px 16px 0 0; border-inline: 0; border-bottom: 0;
    padding: .9rem 2.1rem calc(.9rem + env(safe-area-inset-bottom)) 1rem;
    box-shadow: 0 -10px 28px rgba(20,36,29,.18);
    opacity: 1; transform: translateY(105%);
  }
  #lpw-loan .ll-nudge.is-in { transform: translateY(0); }
  /* lift clear of the sticky Apply bar when it is showing */
  #lpw-loan.sticky-shown .ll-nudge { bottom: var(--ll-sticky-h, 4rem); }
  #lpw-loan .ll-nudge-cta { align-self: stretch; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  #lpw-loan .ll-nudge { transform: none; }
}

/* ══════════ INTEREST PROMPT MODAL ══════════ */
#lpw-loan .ll-interest-modal .modal-content {
  border: 0; border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 48px -12px rgba(20, 36, 29, .35);
}
#lpw-loan .ll-interest-modal .modal-header {
  background: var(--green); color: #fff;
  border: 0; padding: 1.1rem 1.25rem;
  align-items: flex-start; gap: .75rem;
}
#lpw-loan .ll-interest-modal .modal-title {
  font-family: var(--ff-display); font-weight: 700; font-size: 1.15rem;
  line-height: 1.35; margin: 0; color: #fff;
}
#lpw-loan .ll-interest-modal .modal-body {
  background: var(--card); padding: 1.5rem 1.25rem 1.6rem;
}
#lpw-loan .ll-interest-actions {
  display: flex; justify-content: center; gap: .85rem; flex-wrap: wrap;
}
#lpw-loan .ll-interest-btn {
  min-width: 6.5rem; padding: .7rem 1.6rem;
  border-radius: 12px; font-weight: 700;
  border: 1.5px solid var(--green); color: var(--green); background: #fff;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#lpw-loan .ll-interest-btn:hover,
#lpw-loan .ll-interest-btn:focus-visible {
  background: var(--mint); color: var(--green-dark); border-color: var(--green-dark);
}
#lpw-loan .ll-interest-btn#interestYes:hover {
  background: var(--green); color: #fff; border-color: var(--green);
}

/* motion & print */
@media (prefers-reduced-motion: reduce) {
  #lpw-loan * { transition: none !important; animation: none !important; }
}
@media print {
  #lpw-loan .ll-hero, #lpw-loan .ll-afford, #lpw-loan .ll-duo, #lpw-loan .ll-props,
  #lpw-loan .ll-faq, #lpw-loan .ll-sticky, #lpw-loan .ll-tray,
  #lpw-loan .ll-result-ctas, #lpw-loan .ll-board { display: none !important; }
  #lpw-loan .ll-schedule { border: none; }
  #lpw-loan .ll-schedule summary::before { content: ""; }
}