/* Round 3 enhancements for commercial.html. Loaded after the existing styles. */

/* ---------- Item 2: color rhythm (section surfaces only) ----------
   hero (paper) > transaction guide (tint, it is a tool) > lender fit (navy)
   > asset classes (white) > calculator (tint, it is a tool) > four ratios (navy)
   > closing CTA (tint) > footer (navy) */
.cx .sec#deal{background:var(--tint);border-block:0}
.cx .sec#what{background:#fff;border-block:1px solid var(--rule)}
.cx .sec#calculator{background:var(--tint);border-block:0}
.cx .sec#calculator .calc-head-note{background:transparent}

/* ---------- Item 4: verdict + sticky chapter bar ---------- */
.cx .cx-verdict{margin-top:18px;max-width:600px;padding-left:14px;border-left:3px solid var(--gold);font-size:16px;line-height:1.5;color:var(--navy)}
.cx .cx-verdict b{font-weight:700}

html:has(body.cx){scroll-padding-top:84px}
.cx .cx-chap{position:sticky;top:var(--cx-top,0px);z-index:30;transition:box-shadow .2s}
.cx .cx-chap.stuck{box-shadow:0 6px 16px rgba(13,27,42,.10)}
.cx .cx-chap a{color:var(--slate);border-bottom-color:var(--rule);transition:color .2s,border-color .2s}
.cx .cx-chap a:hover{color:var(--navy);border-bottom-color:var(--gold)}
.cx .cx-chap a.on{color:var(--navy);border-bottom:3px solid var(--gold);padding-bottom:2px}
.cx .cx-chap a[aria-current]{color:var(--navy)}

/* ---------- Item 3: pinned results summary (phones only) ---------- */
.cx .cx-pin{display:none}
@media (max-width:900px){
  html:has(body.cx){scroll-padding-top:70px}
  .cx .cx-chap .w{padding-block:12px;gap:18px;scrollbar-width:none}
  .cx .cx-chap .w::-webkit-scrollbar{display:none}
  .cx .cx-chap a{white-space:nowrap;font-size:14.5px;flex:none}
  .cx .cre .calc-input{position:relative}
  .cx .cx-pin{display:flex;align-items:center;gap:10px;position:sticky;top:calc(var(--cx-top,0px) + var(--cx-chap,0px));z-index:12;margin:-22px -18px 18px;padding:10px 14px 10px 18px;background:var(--navy);color:#fff;border-bottom:2px solid var(--gold);box-shadow:0 8px 18px rgba(13,27,42,.18)}
  .cx .cx-pin-g{flex:1;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
  .cx .cx-pin-g>div{min-width:0;display:flex;flex-direction:column;line-height:1.2}
  .cx .cx-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}
  .cx .cx-pin-g b{font:600 16px/1.25 Archivo,sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
  .cx .cx-pin-g b.hi{color:var(--gold)}
  .cx .cx-pin-g b.bump{animation:cxBump .5s ease-out}
  .cx .cx-pin-go{flex:none;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}
}
@keyframes cxBump{0%{color:var(--gold)}100%{}}

/* ---------- Item 6: ratio meters in the financial summary ---------- */
.cx .cx-m{padding:2px 0 4px}
.cx .cx-track{position:relative;height:8px;background:rgba(255,255,255,.14);border-radius:4px;margin-top:4px}
.cx .cx-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.38);border-radius:4px 0 0 4px;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.cx .cx-dot{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--navy);transition:left .35s cubic-bezier(.2,.7,.2,1)}
.cx .cx-m.none .cx-dot,.cx .cx-m.none .cx-fill{opacity:0}
.cx .cx-m.over .cx-dot{border-radius:3px}
.cx .cx-band{position:absolute;top:-4px;bottom:-4px;min-width:2px;border-left:2px solid #fff;border-right:2px solid #fff;background:rgba(255,255,255,.22)}
.cx .cx-scale{display:flex;justify-content:space-between;margin-top:5px;font-size:11px;color:var(--mist);font-variant-numeric:tabular-nums}
.cx .cx-ref{margin:0;padding:0 0 8px;font-size:12px;line-height:1.4;color:var(--mist);display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.12)}
.cx .cx-ref.cx-ph{color:#fff}
.cx .cx-key{flex:none;width:10px;height:10px;border-left:2px solid #fff;border-right:2px solid #fff;background:rgba(255,255,255,.22)}
/* the row above a meter keeps its value; drop the double rule */
.cx .cre .orow:has(+ .cx-m){border-bottom:0;padding-bottom:4px}

/* ---------- Four ratios: static illustrations ---------- */
.cx .cx-ill{margin:4px 0 14px;max-width:340px}
.cx .cx-ill .cx-dot{transition:none}
.cx .cx-ill figcaption{margin-top:4px;font-size:12px;color:var(--mist)}
.cx .cx-term .cx-track{background:rgba(255,255,255,.14)}
.cx .cx-paid{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.38);border-radius:4px 0 0 4px}
.cx .cx-cut{position:absolute;top:-5px;bottom:-5px;width:3px;margin-left:-1px;background:var(--gold)}
.cx .cx-term .cx-scale{position:relative}
.cx .cx-term .cx-scale span:nth-child(2){position:absolute;left:28%;transform:translateX(-50%);white-space:nowrap;color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  .cx .cx-fill,.cx .cx-dot,.cx .cx-chap,.cx .cx-chap a{transition:none}
  .cx .cx-pin-g b.bump{animation:none}
}