/* Franklin Direct — HELOC refinance
   The CLTV stack is the signature element: one bar showing where every dollar
   of the home's value sits, with the 90% ceiling drawn across it. The original
   used a pine-and-amber palette; everything here is brand.css tokens instead. */

/* ---------- the stack ---------- */
.cltv { position: relative; z-index: 1; margin: 4px 0 22px; }
.cltv-bar {
  position: relative; display: flex; height: 46px; border-radius: var(--r); overflow: hidden;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
}
.cltv-seg {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-family: var(--sans); font-weight: 700; font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap;
  overflow: hidden; transition: width .42s cubic-bezier(.22,.68,.36,1), background .2s;
}
.seg-first  { background: #0C4778; }
.seg-second { background: #2F8AD4; }
.seg-cash   { background: #7FC4F0; color: #08283F; }
.seg-room   { background: transparent; }
/* Past 90% the borrowed portion turns warm — the same signal the waterfall
   uses on the move-up page, so the colour means the same thing sitewide. */
.cltv-seg.over.seg-second { background: #A2604E; }
.cltv-seg.over.seg-cash   { background: #C4826E; color: #fff; }

/* The 90% ceiling, drawn over the top of the bar. */
.cltv-mark {
  position: absolute; top: -7px; bottom: -7px; left: 90%;
  border-left: 2px dashed rgba(255,255,255,.75); pointer-events: none;
}
.cltv-mark span {
  position: absolute; top: -19px; left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-weight: 700; font-size: .63rem;
  letter-spacing: .09em; text-transform: uppercase; color: #B9D2E8; white-space: nowrap;
}
.cltv-legend {
  display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 14px;
  font-size: .76rem; color: #9FC0DC;
}
.cltv-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cltv-legend i { width: 11px; height: 11px; border-radius: var(--r); flex: none; }

/* ---------- payment, before and after ---------- */
.hr-pay {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 0 4px; border-top: 1px solid rgba(255,255,255,.14);
}
.hr-pay-block { flex: 1 1 130px; min-width: 0; }
.hr-pay-block .lab {
  font-size: .74rem; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 600; color: #7FA3C4; margin-bottom: 5px;
}
.hr-pay-block .amt {
  font-family: var(--sans); font-weight: 700; font-size: 1.62rem;
  letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums;
}
.hr-pay-block .amt small { font-size: .82rem; font-weight: 600; color: #8FB6D6; margin-left: 2px; }
.hr-pay-block.was .amt { color: #9FC0DC; }
.hr-arrow { flex: none; color: #63B0EC; font-size: 1.3rem; line-height: 1; }

.hr-delta {
  display: inline-block; margin-top: 12px; padding: 8px 14px; border-radius: var(--r);
  font-family: var(--sans); font-weight: 700; font-size: .84rem;
}
.hr-delta.save { background: rgba(99,176,236,.17); color: #A9D6F5; }
.hr-delta.more { background: rgba(196,130,110,.2); color: #E7BCAC; }

/* ---------- before/after inside a breakdown row ---------- */
.breakdown .was {
  color: #7FA3C4; text-decoration: line-through;
  text-decoration-color: rgba(180,113,95,.85); margin-right: 9px; font-weight: 500;
}

/* ---------- plain-language read ---------- */
.hr-callout {
  position: relative; z-index: 1; margin: 22px 0 0; padding: 16px 18px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  border-left: 3px solid var(--sky-2); border-radius: var(--r);
  font-size: .9rem; line-height: 1.62; color: #D6E7F6;
}
.hr-callout b { color: #fff; font-weight: 700; }

/* A field that no longer drives anything, because the answer is derived. */
.field.dimmed { opacity: .45; }
.field.dimmed input { pointer-events: none; }

@media (max-width: 560px) {
  .cltv-bar { height: 40px; }
  .hr-pay { gap: 10px; }
  .hr-pay-block .amt { font-size: 1.36rem; }
  .hr-arrow { display: none; }
}