/* =========================================================================
   Recent Closings page — scoped styles.
   Tokens sampled from the brand (see design handoff). Everything is scoped
   under .rc-page so it never leaks into the shared header / nav / footer,
   which use the site's existing Bootstrap + Inter styling.
   ========================================================================= */

.rc-page {
  /* ---- brand blues ---- */
  --ql-sky:   #25ABF1;
  --ql-blue:  #1882E3;
  --ql-deep:  #0B5FB8;
  --ql-ink:   #0A2540;
  --ql-blue-50:  #EAF6FE;
  --ql-blue-700: #0B5FB8;
  --ql-gradient: linear-gradient(135deg, var(--ql-sky) 0%, var(--ql-blue) 60%, var(--ql-deep) 100%);

  /* ---- neutrals (cool, blue-shifted) ---- */
  --ql-white:  #FFFFFF;
  --ql-cloud:  #F7FAFC;
  --ql-mist:   #EEF3F8;
  --ql-line:   #DCE4ED;
  --ql-line-2: #C2CEDC;
  --ql-muted:  #6B7B8E;
  --ql-text:   #2A3B52;
  --ql-heading:#0A2540;

  /* green for amount pills + transaction bars — the site's label/success green */
  --ql-money:  #4EBF56;

  /* ---- foreground tokens ---- */
  --fg-1: var(--ql-heading);
  --fg-2: var(--ql-text);
  --fg-3: var(--ql-muted);

  /* ---- radius ---- */
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- shadows (navy-tinted, low spread) ---- */
  --shadow-sm: 0 2px 6px rgba(10, 37, 64, 0.06), 0 1px 2px rgba(10, 37, 64, 0.05);
  --shadow-md: 0 6px 18px rgba(10, 37, 64, 0.08), 0 2px 6px rgba(10, 37, 64, 0.05);
  --shadow-lg: 0 18px 40px rgba(10, 37, 64, 0.12), 0 4px 12px rgba(10, 37, 64, 0.06);
  --shadow-brand: 0 10px 24px rgba(24, 130, 227, 0.30);

  /* ---- type: match the site (Inter) ---- */
  --font-display: "Inter", "Helvetica", "Arial", sans-serif;
  --font-body:    "Inter", "Helvetica", "Arial", sans-serif;

  max-width: 1200px;
  margin: 0 auto;
  /* generous top padding so content clears the site's absolute nav bar + breathing room */
  padding: 154px 24px 0;
  background: #fff;
  font-family: var(--font-body);
  color: var(--fg-2);
  -webkit-font-smoothing: antialiased;
}

.rc-page *,
.rc-page *::before,
.rc-page *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- header */
/* Both tab headers share the same grid cell so the toggle never jumps. */
.rc-head { text-align: center; margin-bottom: 40px; display: grid; grid-template-columns: 1fr; }
.rc-head .lead { max-width: 1140px; margin-left: auto; margin-right: auto; }
.rc-head__inner { max-width: 720px; }
/* Both headers overlap in row 1; toggle is centered at row 2. */
.rc-head__closings, .rc-head__numbers { grid-row: 1; grid-column: 1; }
/* Override [hidden] so both stay in layout — the taller one sets the row height. */
.rc-head__closings[hidden], .rc-head__numbers[hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}
/* Both tabs now use the same badge, so no offset needed. */
.rc-head__numbers { padding-top: 0; }
/* Toggle is a grid item in rc-head — prevent it from stretching to column width. */
.rc-head .rc-toggle { grid-row: 2; grid-column: 1; justify-self: center; }

/* "lent on over" stat trio */
.rc-trio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5vw, 60px);
  flex-wrap: wrap;
  margin: 42px auto 2px;
}
.rc-trio__item { text-align: center; }
.rc-trio__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: #252525;
}
.rc-trio__lbl { font: 500 13.5px var(--font-body); color: var(--fg-3); margin-top: 9px; }
.rc-trio__div { width: 1px; height: 44px; background: var(--ql-line); }
.rc-eyebrow {
  font: 700 12px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ql-blue);
}
.rc-headline {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}
.rc-sub {
  margin: 16px auto 0;
  max-width: 620px;
  font: 500 19px/1.55 var(--font-body);
  color: var(--fg-2);
}

/* --------------------------------------------------------------- toggle */
.rc-toggle {
  margin-top: 48px;
  display: inline-flex;
  background: var(--ql-mist);
  border: 1px solid var(--ql-line);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
}
.rc-toggle__btn {
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font: 600 14.5px var(--font-display);
  white-space: nowrap;
  height: auto;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: var(--fg-3);
  box-shadow: none;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.rc-toggle__btn.is-active {
  background: #fff;
  color: var(--ql-blue-700);
  box-shadow: var(--shadow-sm);
}

/* ----------------------------------------------------------- card grid */
.rc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}
.rc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ql-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
}
.rc-card__photo {
  position: relative;
  height: 220px;
  flex: 0 0 220px;
  background: var(--ql-mist);
  overflow: hidden;
}
.rc-card__photo img,
.rc-card__photo picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;   /* bias slightly toward the top so building tops aren't cropped */
  display: block;
}
.rc-pill-amount {
  position: absolute;
  top: 14px;
  left: 14px;
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  font: 700 13px var(--font-display);
  letter-spacing: 0;
  background: var(--ql-ink);   /* navy ink — high contrast on any photo */
  color: #fff;
  box-shadow: 0 2px 8px rgba(10,37,64,.35);
  white-space: nowrap;
  z-index: 2;
}
.rc-card__body {
  position: relative;
  padding: 16px 16px 19px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.rc-loc {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  color: #252525;            /* match the site's heading color */
  line-height: 1.2;
  text-wrap: balance;
}
.rc-type {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 12.5px var(--font-body);
  letter-spacing: 0;
  color: var(--fg-3);        /* quiet gray; photo carries the color */
  margin-top: 1px;
}
.rc-card__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 6px;
  margin-top: 2px;
  font: 500 13px var(--font-body);
  color: var(--fg-3);
}
.rc-card__footer > span:not(.rc-fast) { white-space: nowrap; }
.rc-dot {
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--ql-line-2);
}
/* "fast close" highlight pill — absolutely placed in a corner of the white box,
   so it never changes the card's height */
.rc-fast {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFF1E0;
  color: #B45309;
  font: 700 11px var(--font-body);
  letter-spacing: .01em;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ---------------------------------------------------- transparency band */
.rc-mission {
  max-width: 720px;
  margin: 64px auto 0;
  text-align: center;
}
.rc-mission__eyebrow {
  font: 700 12px var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--main-color, #1e83ef);
}
.rc-mission__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.01em;
  color: #252525;
  margin: 10px 0 0;
}
.rc-mission__body {
  font: 500 16.5px/1.65 var(--font-body);
  color: var(--fg-2);
  margin: 14px auto 0;
}

/* -------------------------------------------------------------- Final CTA (full-width) */
.rc-final-cta {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 56px;
  background: linear-gradient(160deg, #1882E3 0%, #0B5FB8 100%);
  text-align: center;
  position: relative;
}
.rc-final-cta__wave-top { display: block; width: 100%; height: 60px; margin-bottom: -2px; background: #fff; }
.rc-final-cta__wave-bot { display: block; width: 100%; height: 60px; margin-top: -2px; background: #fff; }
.rc-final-cta__body { padding: 56px 32px 60px; }
.rc-final-cta__eyebrow { font: 600 12px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); margin: 0 0 16px; }
.rc-final-cta__h { font: 800 clamp(30px,4.5vw,58px)/1.05 var(--font-display); letter-spacing: -.03em; color: #fff; margin: 0 0 18px; }
.rc-final-cta__sub { font: 500 17px/1.6 var(--font-body); color: rgba(255,255,255,.8); margin: 0 0 36px; }
.rc-final-cta__btns { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.rc-final-cta__btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--radius-pill);
  padding: 16px 32px;
  font: 600 16px var(--font-display);
  text-decoration: none;
  transition: opacity .15s, transform .15s;
}
.rc-final-cta__btn:hover { opacity: .9; transform: translateY(-1px); text-decoration: none; }
.rc-final-cta__btn--primary { background: #fff; color: var(--ql-blue-700); }
.rc-final-cta__btn--primary:hover { color: var(--ql-blue-700); }
.rc-final-cta__btn--ghost { background: rgba(255,255,255,.15); color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.rc-final-cta__btn--ghost:hover { color: #fff; background: rgba(255,255,255,.25); }
@media (max-width: 560px) {
  .rc-final-cta__body { padding: 44px 20px 48px; }
  .rc-final-cta__btns { flex-direction: column; }
  .rc-final-cta__btn { width: 100%; max-width: 300px; justify-content: center; }
}

/* ---------------------------------------------------------------- stats */
.rc-stats { display: flex; flex-direction: column; gap: 22px; }
.rc-sstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.rc-stat {
  background: var(--ql-ink);
  border-radius: 16px;
  padding: 24px 26px;
  color: #fff;
}
.rc-stat__num { font: 600 30px var(--font-display); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.rc-stat__lbl { font: 500 13px var(--font-body); color: rgba(255,255,255,0.65); margin-top: 8px; }

.rc-s2col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.rc-panel {
  background: #fff;
  border: 1px solid var(--ql-line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.rc-panel__head { margin-bottom: 22px; }
.rc-panel__title { margin: 0; font: 600 19px var(--font-display); color: var(--fg-1); }
.rc-panel__sub { font: 500 13.5px var(--font-body); color: var(--fg-3); margin-top: 4px; }

.rc-bars { display: flex; flex-direction: column; gap: 16px; }
.rc-bar {
  display: grid;
  grid-template-columns: 172px 1fr 52px;
  align-items: center;
  gap: 16px;
}
.rc-bar__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 14.5px var(--font-body);
  color: var(--fg-1);
  min-width: 0;
}
.rc-bar__label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-bar__track { height: 12px; border-radius: var(--radius-pill); background: var(--ql-mist); overflow: hidden; }
.rc-bar__fill {
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--ql-gradient);
  transition: width 600ms cubic-bezier(.4,0,.2,1);
}
.rc-bar__fill--green { background: var(--ql-money); }
.rc-bar__fill--blue  { background: var(--ql-blue); }
.rc-bar__val { font: 600 15px var(--font-display); color: var(--fg-1); text-align: right; }
.rc-footnote { margin: 4px 0 0; font: 500 13px var(--font-body); color: var(--fg-3); }

/* ----------------------------------------------------------- responsive */
@media (max-width: 880px) {
  .rc-sstrip { grid-template-columns: 1fr 1fr; }
  .rc-s2col  { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rc-page { padding: 124px 16px 64px; }
  .rc-bar  { grid-template-columns: 120px 1fr 44px; gap: 10px; }
  .rc-trio__div { display: none; }
  .rc-trio { gap: 22px 36px; }
}

/* ============================ By the numbers (.bn) ============================ */
.bn-wrap { font-family: var(--font-body); }
.bn__head { text-align: center; }
.bn__eyebrow { font: 700 12px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--main-color, #1e83ef); }

/* ---- "Live data" status pill (By the numbers header) ---- */
.bn-live {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 3rem;
}
.bn-live__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--ql-blue-50);
  border: 1px solid #B5D4F4;
  color: var(--ql-blue-700);
  font: 700 12.5px var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bn-live__dot {
  position: relative;
  width: 9px;
  height: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bn-live__dot::before,
.bn-live__dot > i {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ql-blue);
}
.bn-live__dot::before {
  animation: bn-live-ring 1.6s ease-out infinite;
}
@keyframes bn-live-ring {
  0%   { transform: scale(.6); opacity: .7; }
  100% { transform: scale(2.8); opacity: 0; }
}
.bn-live__note {
  font: 400 13.5px var(--font-body);
  color: var(--ql-muted);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .bn-live__dot::before { animation: none; opacity: 0; }
}
.bn__h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,3.6vw,40px); letter-spacing: -.02em; color: #252525; margin: 12px 0 0; line-height: 1.1; }
.bn__lead { font: 500 16.5px/1.7 var(--font-body); color: var(--fg-2); max-width: 760px; margin: 16px auto 0; }

.bn__stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 13px; margin-top: 34px; }
.bn__stat { background: var(--ql-ink); border-radius: 13px; padding: 26px 18px 24px; color: #fff; }
.bn__stat-num { font: 800 24px var(--font-display); letter-spacing: -.02em; line-height: 1; }
.bn__stat-lbl { font: 500 12px var(--font-body); color: rgba(255,255,255,.66); margin-top: 6px; line-height: 1.35; }

.bn__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.bn__panel { background: #fff; border: 1px solid var(--ql-line); border-radius: 16px; padding: 24px 26px; box-shadow: var(--shadow-sm); }
.bn__phead { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.bn__ptitle { font: 800 18px var(--font-display); color: #252525; margin: 0; display: flex; align-items: center; }
.bn__psub { font: 500 13px var(--font-body); color: var(--fg-3); margin: 3px 0 16px; }
.bn__pval { text-align: right; white-space: nowrap; }
.bn__pval b { font: 800 26px var(--font-display); letter-spacing: -.02em; color: #0B5FB8; display: block; line-height: 1; }
.bn__pval span { font: 600 11px var(--font-body); color: var(--fg-3); }
.bn__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font: 600 13px var(--font-body); color: #3a4a5e; }
.bn__dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.bn__bars { display: flex; flex-direction: column; gap: 11px; }
.bn__bar { display: grid; grid-template-columns: 88px 1fr 26px; align-items: center; gap: 12px; font: 600 13px var(--font-body); color: #3a4a5e; }
.bn__track { height: 11px; border-radius: 999px; background: var(--ql-mist); overflow: hidden; }
.bn__fill { height: 100%; border-radius: 999px; }
.bn__stack { display: flex; height: 28px; border-radius: 8px; overflow: hidden; font: 700 11.5px var(--font-body); color: #fff; }
.bn__stack div { display: flex; align-items: center; justify-content: center; }

/* info tooltip */
.bn__info { position: relative; display: inline-flex; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ql-line-2); color: var(--fg-3); font: italic 700 10px serif; align-items: center; justify-content: center; cursor: help; margin-left: 9px; flex: 0 0 auto; }
.bn__info::after { content: attr(data-tip); position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%); width: 250px; background: #0A2540; color: #fff; font: 500 12.5px/1.55 var(--font-body); padding: 11px 13px; border-radius: 9px; opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 20; box-shadow: 0 10px 24px rgba(10,37,64,.28); text-align: left; font-style: normal; letter-spacing: 0; }
.bn__info::before { content: ''; position: absolute; bottom: 150%; left: 50%; transform: translate(-50%,90%); border: 6px solid transparent; border-top-color: #0A2540; opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 20; }
.bn__info:hover::after, .bn__info:hover::before { opacity: 1; visibility: visible; }

/* where-we-lend flag leaderboard */
.bn__lead-grid { column-count: 3; column-gap: 36px; margin-top: 2px; }
.bn__lrow { break-inside: avoid; display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--ql-line); }
.bn__rk { font: 700 12px var(--font-body); color: var(--ql-line-2); width: 16px; flex: 0 0 auto; text-align: right; }
.bn__flag { width: 26px; height: 20px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(10,37,64,.10); flex: 0 0 auto; }
.bn__lnm { font: 600 14px var(--font-body); color: #3a4a5e; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn__lct { font: 800 17px var(--font-display); color: #0B5FB8; flex: 0 0 auto; }

/* 100% loan purpose */
.bn__cash { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; background: #fff; border: 1px solid var(--ql-line); border-radius: 16px; padding: 28px 32px; margin-top: 22px; box-shadow: var(--shadow-sm); }
.bn__cash-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px,8vw,82px); line-height: .9; letter-spacing: -.03em; color: #1e83ef; }
.bn__cash-kicker { font: 700 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--main-color, #1e83ef); }
.bn__cash-title { font: 800 20px var(--font-display); color: #252525; margin: 6px 0 9px; display: flex; align-items: center; gap: 9px; }
.bn__cash-title::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #1e83ef; flex: 0 0 auto; }
.bn__cash-body { font: 500 15px/1.7 var(--font-body); color: var(--fg-2); }

/* decade band — dark strip */
.bn__decade { margin-top: 28px; background: #0A2540; border-radius: 18px; padding: 64px 44px 64px; text-align: center; }
.bn__decade-title-wrap { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 0 0 32px; }
.bn__decade-center { flex: 1 1 auto; min-width: 0; max-width: 560px; text-align: center; }
.bn__decade-h { font: 800 clamp(26px,3.2vw,42px)/1.1 var(--font-display); letter-spacing: -.025em; color: #fff; margin: 0; }
.bn__decade-desc { font: 500 15px/1.65 var(--font-body); color: rgba(255,255,255,.68); margin: 16px 0 0; }
.bn__laurel { color: #C9A84C; flex: 0 0 auto; opacity: 0.92; }
.bn__laurel svg { width: 86px; height: 161px; display: block; }
.bn__dstats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.12); border-radius: 10px; overflow: hidden; }
.bn__dstat { background: #0A2540; padding: 26px 16px; }
.bn__dnum { font: 800 clamp(22px,2.8vw,34px) var(--font-display); letter-spacing: -.02em; color: #fff; line-height: 1; }
.bn__dlbl { font: 500 12px var(--font-body); color: rgba(255,255,255,.58); margin-top: 8px; line-height: 1.4; }
.bn__decade-focus { font: 800 clamp(20px,2.3vw,30px)/1.2 var(--font-display); letter-spacing: -.02em; color: #fff; margin: 28px 0 0; }

/* ---- why this page exists (transparency / values) ---- */
.bn__why { margin-top: 28px; border-radius: 18px; padding: 50px 44px 38px; background: var(--ql-cloud); border: 1px solid var(--ql-line); text-align: center; }
.bn__why-eyebrow { font: 700 12px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ql-blue); margin-bottom: 12px; }
.bn__why-stmt-h { font: 800 clamp(22px,2.7vw,29px)/1.18 var(--font-display); letter-spacing: -.025em; color: var(--ql-heading); margin: 0 auto; max-width: 580px; }

.bn__why-cols { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; text-align: left; }
.bn__why-col { padding: 0 30px; }
.bn__why-col + .bn__why-col { border-left: 1px solid var(--ql-line); }
.bn__why-num { font: 800 30px/1 var(--font-display); color: var(--ql-blue); opacity: .9; letter-spacing: .01em; }
.bn__why-title { font: 700 16px var(--font-body); letter-spacing: -.01em; color: var(--ql-heading); margin-top: 13px; }
.bn__why-body { font: 400 14px/1.6 var(--font-body); color: var(--ql-muted); margin: 8px 0 0; }

.bn__why-foot { margin: 36px 0 0; padding-top: 38px; border-top: 1px solid var(--ql-line); font: 400 12px/1.5 var(--font-body); color: var(--ql-muted); white-space: nowrap; }

@media (max-width: 1040px) {
  .bn__why-foot { white-space: normal; }
}
@media (max-width: 720px) {
  .bn__why { padding: 36px 22px; }
  .bn__why-cols { grid-template-columns: 1fr; margin-top: 24px; }
  .bn__why-col { padding: 0 0 30px; }
  .bn__why-col + .bn__why-col { border-left: 0; border-top: 1px solid var(--ql-line); padding-top: 30px; }
  .bn__why-foot { margin-top: 30px; }
}

/* testimonials embed */
.bn__testimonials-wrap {
  margin-top: 56px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-top: 72px;
  padding-bottom: 80px;
  background: #FAFAFA;
  border-bottom: 1px solid #ebebeb;
}
.bn__foot { font: 500 13px var(--font-body); color: var(--fg-3); text-align: center; margin-top: 30px; }

/* break the CTA section out of the max-width container */
#get-in-touch-phone2 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 96px;
  position: relative;
}

/* state bar chart (Where we lend redesign) */
.bn__sbar { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--ql-line); }
.bn__sbar:last-child { border-bottom:none; }
.bn__srk  { font:700 11px var(--font-body); color:var(--fg-3); width:14px; text-align:right; flex:0 0 auto; }
.bn__snm  { font:500 13px var(--font-body); color:var(--fg-1); width:126px; flex:0 0 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bn__strack { flex:1; height:9px; background:var(--ql-mist); border-radius:999px; overflow:hidden; }
.bn__sfill  { height:100%; border-radius:999px; background:linear-gradient(to right,#6FBEF7,#0B5FB8); }
.bn__spct { font:700 12px var(--font-body); color:#0B5FB8; width:38px; text-align:right; flex:0 0 auto; }
.bn__sflag { display:inline-block; width:18px; height:13px; border-radius:2px; flex:0 0 auto; background:#DCE4ED center/cover no-repeat; }

/* cash-out mini (replaces donut in row 1 left) */
.bn__cash-mini { display:flex; align-items:center; gap:22px; margin-top:12px; }
.bn__cash-mini-num { font-family:var(--font-display); font-weight:800; font-size:clamp(52px,6vw,68px); line-height:.9; letter-spacing:-.03em; color:#1e83ef; flex:0 0 auto; }

/* bigger donut panel — legend stacks above the chart */
.bn__donut-top { display:flex; flex-direction:column; align-items:center; gap:14px; }
.bn__donut-top .bn__legend { grid-template-columns:1fr 1fr; width:100%; }

/* what we lend on — donut left, type list right */
.bn__panel--donut { display:flex; flex-direction:column; }
.bn__panel--donut .bn__donut-split { flex:1; }
.bn__donut-split { display:flex; align-items:center; gap:18px; margin-top:10px; }
.bn__tleg        { display:grid; grid-template-columns:1fr auto; gap:9px 14px; flex:1; align-content:center; }
.bn__tleg-row    { display:contents; }
.bn__tleg-row > span:first-child { display:flex; align-items:center; gap:6px; font:500 13px var(--font-body); color:var(--fg-1); }
.bn__tleg-icon { width:15px; height:15px; flex:0 0 auto; color:var(--fg-2); opacity:.7; }
.bn__tleg-pct    { font:700 13px var(--font-body); color:var(--ql-muted); text-align:right; align-self:center; }

/* loan purpose — fraction stat */
.bn__panel--lp    { display:flex; flex-direction:column; }
.bn__lp-frac      { display:flex; align-items:center; gap:22px; margin-top:14px; flex:1; }
.bn__lp-frac-num  {
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(44px,5.5vw,62px); line-height:.9;
  letter-spacing:-.04em; white-space:nowrap; flex:0 0 auto;
  background:linear-gradient(150deg,#25ABF1 0%,#1e83ef 50%,#0B5FB8 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; color:transparent;
}
.bn__lp-frac-title { font:700 16px/1.3 var(--font-body); color:var(--fg-1); margin-bottom:8px; }
.bn__lp-frac-body  { font:500 14px/1.7 var(--font-body); color:var(--fg-2); margin:0; }

/* donut hover tooltip */
.bn__donut-tip {
  position:fixed; pointer-events:none; z-index:200;
  background:#fff; border-radius:11px;
  box-shadow:0 8px 28px rgba(10,37,64,.13), 0 2px 8px rgba(10,37,64,.07);
  padding:10px 14px 10px 16px; border-left:4px solid #1e83ef;
  min-width:148px; opacity:0;
  transform:translateY(5px) scale(0.96);
  transition:opacity .14s ease, transform .14s ease;
}
.bn__donut-tip.is-visible { opacity:1; transform:translateY(0) scale(1); }
.bn__donut-tip__type { font:700 13px/1.3 var(--font-body); color:var(--ql-heading); }
.bn__donut-tip__sub  { font:500 12px/1.4 var(--font-body); color:var(--ql-muted); margin-top:3px; }

@media (max-width: 820px) { .bn__grid2 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .bn__lead-grid { column-count: 2; } }
@media (max-width: 680px) {
  .bn__decade { padding: 36px 24px 28px; }
  .bn__decade-title-wrap { gap: 16px; }
  .bn__laurel svg { width: 52px; height: 97px; }
  .bn__dstats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) { .bn__cash { grid-template-columns: 1fr; gap: 8px; text-align: center; } .bn__cash-title { justify-content: center; } }
@media (max-width: 420px) {
  .bn__decade { padding: 28px 16px 24px; }
  .bn__decade-title-wrap { gap: 10px; }
  .bn__laurel svg { width: 38px; height: 71px; }
}
@media (max-width: 480px) { .bn__lead-grid { column-count: 1; } }

/* =====================================================================
   MOBILE REFINEMENTS — desktop layout is intentionally untouched.
   Every rule below is inside a mobile media query.
   ===================================================================== */

/* Lead text: full sentence on desktop, tighter sentence on phones. */
.rc-lead--short { display: none; }

@media (max-width: 560px) {
  /* (1) & (4) Raise the whole page up under the shorter mobile nav. */
  .rc-page { padding-top: 92px; }
  .rc-head { margin-bottom: 26px; }

  /* (2) Show the short lead (no forced <br>) and hide the long one. */
  .rc-lead--full  { display: none; }
  .rc-lead--short { display: inline; }
  .rc-head .lead  { font-size: 15.5px; line-height: 1.5; max-width: 94%; }

  /* (3) Underline tabs on mobile — drop the grey pill for a clean tab bar with
         a blue indicator under the active tab. No dead space. (Mobile only.) */
  .rc-toggle { margin-top: 18px; background: none; border: none; border-radius: 0;
               border-bottom: 1.5px solid var(--ql-line); padding: 0; gap: 0; }
  .rc-toggle__btn { border-radius: 0; background: none; box-shadow: none;
                    padding: 11px 18px; font-size: 14px; }
  .rc-toggle__btn.is-active { color: var(--ql-blue); background: none;
                    box-shadow: inset 0 -2.5px 0 var(--ql-blue); }

  /* (4) Property-type donut: stack the chart over its legend so the legend
         no longer gets shoved to the right and stretch the page wide. */
  .bn__donut-split { flex-direction: column; align-items: stretch; gap: 14px; }
  .bn__donut-split svg { margin: 0 auto; }
  .bn__tleg { width: 100%; }
}

@media (max-width: 400px) {
  .rc-page { padding-top: 84px; }
}

/* (4) Decade band: float the gold laurels to the top corners so they frame
       just the heading, letting the description run full width below. */
@media (max-width: 680px) {
  .bn__decade-title-wrap { position: relative; gap: 0; }
  .bn__decade-center { max-width: 100%; }
  .bn__decade-h { padding: 0 58px; }
  .bn__decade-desc { padding: 0; }
  .bn__laurel { position: absolute; top: 0; }
  .bn__laurel--left  { left: 0; }
  .bn__laurel--right { right: 0; }
}
@media (max-width: 420px) {
  .bn__decade-h { padding: 0 46px; }
}