/* ════════════════════════════════════════════════════════════
   ASSET FINANCE flagship · capital stack · underwriting packet ·
   cash-curve comparison
   Rides site.css + cpq.css + loop-visuals.css.
   ════════════════════════════════════════════════════════════ */

.cq[data-loop="finance"] { --lp: #5C6B2A; }

/* ── capital stack ── */
.fn-stack { display: grid; gap: 11px; }
.fn-row { display: grid; grid-template-columns: 118px 1fr 74px; gap: 14px; align-items: center; }
.fn-row .k { font: 500 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.fn-tr { height: 30px; border-radius: var(--r-1); background: var(--bg-2); overflow: hidden; }
.fn-tr i { display: block; height: 100%; border-radius: var(--r-1); width: 0; display: flex; align-items: center; padding: 0 11px; font: 500 10px/1 var(--font-mono); letter-spacing: .05em; white-space: nowrap; color: #FAFAF7; animation: cqGrow 8s var(--ease) infinite; }
.fn-row:nth-child(1) i { background: var(--ink); --w: 20%; animation-delay: .1s; }
.fn-row:nth-child(2) i { background: var(--lp); --w: 45%; animation-delay: .35s; }
.fn-row:nth-child(3) i { background: color-mix(in srgb, var(--lp) 62%, transparent); --w: 25%; animation-delay: .6s; color: var(--ink); }
.fn-row:nth-child(4) i { background: var(--accent); --w: 10%; animation-delay: .85s; }
.fn-row .v { font: 500 12px/1 var(--font-mono); color: var(--ink); text-align: right; }
.fn-total { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule-strong); display: flex; justify-content: space-between; align-items: baseline; }
.fn-total .k { font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.fn-total .v { font-size: 22px; font-weight: 500; letter-spacing: -.03em; color: var(--lp); }

/* ── underwriting packet ── */
.fn-packet { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; }
.fn-pk { display: grid; }
.fn-pk-row { display: grid; grid-template-columns: 82px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--rule); font-size: 13px; animation: cqRowIn 9s var(--ease) infinite; }
.fn-pk-row:first-child { border-top: none; }
.fn-pk-row:nth-child(1) { animation-delay: .1s; } .fn-pk-row:nth-child(2) { animation-delay: .4s; }
.fn-pk-row:nth-child(3) { animation-delay: .7s; } .fn-pk-row:nth-child(4) { animation-delay: 1s; }
.fn-pk-row:nth-child(5) { animation-delay: 1.3s; }
.fn-pk-row .src { font: 500 9px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.fn-pk-row .lb { color: var(--ink-2); }
.fn-pk-row .vl { font: 500 12px/1 var(--font-mono); color: var(--ink); }
.fn-pk-row .vl.good { color: var(--lp); }
.fn-grade { text-align: center; flex-shrink: 0; }
.fn-grade .ring { position: relative; width: 108px; height: 108px; margin: 0 auto; }
.fn-grade .ring svg { transform: rotate(-90deg); }
.fn-grade .ring .t { stroke: var(--rule-strong); }
.fn-grade .ring .v { stroke: var(--lp); stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; animation: cqRing 8s var(--ease) infinite; }
.fn-grade .ring b { position: absolute; inset: 0; display: grid; place-content: center; font-size: 26px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
.fn-grade .cap { font: 500 9px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 12px; }
@media (max-width: 700px) { .fn-packet { grid-template-columns: 1fr; } }

/* ── cash curve comparison ── */
.fn-curve { position: relative; }
.fn-curve svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
.fn-curve .gl { stroke: var(--rule); stroke-width: 1; }
.fn-curve .zero { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 4; }
.fn-curve .delta { fill: color-mix(in srgb, var(--lp) 14%, transparent); }
.fn-curve .cash { fill: none; stroke: var(--alert, #B33B1F); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: cqDraw 9s var(--ease) infinite; }
.fn-curve .fin { fill: none; stroke: var(--lp); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: cqDraw 9s var(--ease) infinite; animation-delay: .5s; }
.fn-curve .lb { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .06em; }
.fn-curve .lb.c { fill: var(--alert, #B33B1F); }
.fn-curve .lb.f { fill: var(--lp); }
.fn-curve .lb.z { fill: var(--ink-3); }
.fn-curve .ax { font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; fill: var(--ink-3); }
.fn-curve .dl { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .1em; fill: var(--lp); opacity: 0; animation: cqFade 9s var(--ease) infinite; animation-delay: 1.4s; }
.fn-unlock { margin-top: 16px; display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--lp) 10%, transparent); border: 1px solid var(--lp); border-radius: var(--r-1); padding: 12px 14px; font: 500 10px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lp); opacity: 0; animation: cqFade 9s var(--ease) infinite; animation-delay: 1.8s; }

/* ── instrument cards ── */
.fn-inst { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 34px; }
.fn-inst > div { background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--c, var(--lp)); border-radius: var(--r-3); padding: 24px; }
.fn-inst .n { font: 500 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c, var(--lp)); }
.fn-inst h4 { font-size: 17px; font-weight: 500; letter-spacing: -.02em; margin: 11px 0 0; color: var(--ink); }
.fn-inst p { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: 9px 0 0; }
.fn-inst .use { font: 500 9px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 13px; display: block; padding-top: 11px; border-top: 1px solid var(--rule); }

@media (prefers-reduced-motion: reduce) {
  .fn-tr i, .fn-pk-row, .fn-grade .ring .v, .fn-curve .cash, .fn-curve .fin,
  .fn-curve .dl, .fn-unlock { animation: none !important; }
  .fn-tr i { width: var(--w); }
  .fn-pk-row, .fn-curve .dl, .fn-unlock { opacity: 1; transform: none; }
  .fn-grade .ring .v { stroke-dashoffset: 52; }
  .fn-curve .cash, .fn-curve .fin { stroke-dashoffset: 0; }
}
@media (max-width: 1000px) { .fn-inst { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .fn-inst { grid-template-columns: 1fr; } }