/* Residential Round 4 proposal. Loaded after the existing styles; adds only.
   Section surfaces, the payment comparison line, the pinned summary on phones,
   and the payment bar easing. The count-up is drawn by assets/v2/r4/motion-count.js. */

/* ---------- Item 1: color rhythm ----------
   hero (navy, unchanged) / chooser: white reading section, the chooser card on a tint band
   (same band as the VA finder) /
   payment builder: tint (it is a tool) / how I work: white / client quote: navy (the one
   big idea, in a client's words) / closing CTA: tint / footer: navy */
.s .sec#payment{background:var(--tint)}
.s .rx-band{position:relative;margin-top:44px;padding:36px 0 40px;background:var(--tint);box-shadow:0 0 0 100vmax var(--tint);clip-path:inset(0 -100vmax)}
.s .rx-band>.ch{margin-top:0}
.s .rx-band + .under{margin-top:28px}
.s .sec.rx-how{background:#fff;border-block:1px solid var(--rule)}

/* ---------- Item 3: comparison line under the monthly payment ---------- */
.s .pb-out .rx-cmp{margin-top:12px;max-width:520px;padding-left:12px;border-left:2px solid var(--gold);font-size:15.5px;line-height:1.45;color:#DEE0E4}
.s .pb-out .rx-cmp b{color:#fff;font-weight:600}
.s .pb-out .rx-cmp + .fine{margin-top:10px!important}

/* ---------- Item 5: payment bar segments ease to their new widths ---------- */
.s .pb[data-pay] .pb-bar span{transition:width .35s cubic-bezier(0,0,.2,1)}

/* ---------- Item 4: pinned results summary (phones only) ---------- */
.rx-pin{display:none}
@media (max-width:900px){
  .s .rx-band{margin-top:28px;padding:24px 0 26px}
  .s .rx-band + .under{margin-top:24px}
  html:has(.rx-pin){scroll-padding-top:70px}
  .s .pb[data-pay] .pb-in{position:relative}
  .s .rx-pin{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:8px;align-items:center;position:sticky;top:var(--rx-top,0px);z-index:12;margin:-24px -20px 0;padding:10px 14px 11px 18px;background:var(--navy);color:#fff;border-bottom:2px solid var(--gold);box-shadow:0 8px 18px rgba(13,27,42,.18)}
  .s .rx-pin-g{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
  .s .rx-pin-g>div{min-width:0;display:flex;flex-direction:column;line-height:1.2}
  .s .rx-pin-g span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .s .rx-pin-g b{font:600 16px/1.25 Archivo,sans-serif;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
  .s .rx-pin-g b.hi{color:var(--gold)}
  .s .rx-pin-go{grid-row:1 / span 2;grid-column:2;align-self:stretch;display:flex;align-items:center;padding-left:10px;border-left:1px solid rgba(255,255,255,.18);font-size:11.5px;font-weight:600;color:var(--gold);text-decoration:none;max-width:50px;line-height:1.2;text-align:center}
  .s .rx-pin-bar{grid-column:1;display:flex;height:5px;background:rgba(255,255,255,.08)}
  .s .rx-pin-bar i{display:block;height:100%;width:0;transition:width .35s cubic-bezier(0,0,.2,1)}
}

@media (prefers-reduced-motion:reduce){
  .s .pb[data-pay] .pb-bar span,.s .rx-pin-bar i{transition:none}
}