.money-stories{background:var(--refresh-bg);color:var(--refresh-ink);}.story-intro{padding-block:64px 35px!important;}.story-intro h2{font:750 clamp(36px,5vw,64px)/1.08 var(--font-sans),sans-serif;letter-spacing:-2px;margin:0 0 20px;}.story-intro>p{color:var(--refresh-muted);font-size:15px;}.story-intro nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px;}.story-intro nav a{border:1px solid var(--refresh-line);border-radius:30px;padding:11px 16px;font-size:12px;color:var(--refresh-ink);}.money-story{position:relative;border-top:1px solid var(--refresh-line);scroll-margin-top:15px;}.story-stage{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;padding-block:55px!important;}.story-copy h3{font:750 clamp(35px,4.3vw,58px)/1.08 var(--font-sans),sans-serif;letter-spacing:-2px;margin:0 0 24px;}.story-copy h3 em{font-style:normal;color:var(--refresh-green);}.story-one-line{font-size:17px;line-height:1.6;color:var(--refresh-muted);max-width:380px;}.story-links{display:flex;flex-direction:column;align-items:flex-start;gap:15px;margin-top:32px;}.story-links a{font-size:13px;color:var(--refresh-green);text-decoration:underline;text-underline-offset:5px;min-height:28px;}.story-next{display:inline-block;margin-top:40px;color:var(--refresh-muted);font-size:11px;line-height:1.6;}.story-visual{background:var(--refresh-surface);border:1px solid var(--refresh-line);border-radius:22px;padding:28px;box-shadow:0 24px 65px #082c2410;min-width:0;}.story-visual-top{display:flex;justify-content:space-between;gap:10px;font-size:9px;font-weight:700;letter-spacing:1px;color:var(--refresh-muted);}.story-visual-top>span:last-child{font-weight:400;letter-spacing:0;}.story-assumption{font-size:12px;color:var(--refresh-muted);margin:18px 0 24px;}.story-loan-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0;}.story-loan-row span,.story-label{font-size:10px;letter-spacing:1px;color:var(--refresh-muted);}.story-loan-row strong{display:block;font-size:29px;letter-spacing:-1px;margin-top:10px;}.story-loan-row small{display:block;font-size:11px;letter-spacing:0;font-weight:400;margin-top:4px;}.story-bar-row{display:grid;grid-template-columns:48px 1fr 76px;align-items:center;gap:10px;font-size:10px;margin:16px 0;}.story-bar-row>div{background:#1fa46318;height:16px;border-radius:5px;overflow:hidden;}.story-bar-row i{display:block;height:100%;width:var(--bar);background:#1fa463;transform-origin:left;border-radius:5px;}.story-bar-row:nth-of-type(2) i{background:#087443;}.story-conclusion{padding:18px;border:1px solid #1fa46355;border-radius:12px;margin-top:24px;background:#1fa4630c;}.story-conclusion>span{display:block;font-size:9px;letter-spacing:1.2px;color:var(--refresh-muted);margin-bottom:8px;}.story-conclusion strong{font-size:22px;line-height:1.3;}.story-conclusion p{font-size:12px;color:var(--refresh-muted);line-height:1.6;margin:8px 0 0;}.story-footnote{font-size:10px;line-height:1.6;color:var(--refresh-muted);margin:18px 0;}.story-progress{height:3px;background:var(--refresh-line);border-radius:3px;overflow:hidden;}.story-progress i{display:block;width:100%;height:100%;background:#1fa463;transform:scaleX(var(--story-p,1));transform-origin:left;}.story-scroll-cue{font-size:10px;color:var(--refresh-muted);margin:10px 0 0;}
.story-score{position:relative;width:230px;max-width:100%;height:135px;margin:20px auto;}.story-score svg{width:100%;height:100%;}.story-score>div{position:absolute;inset:47px 0 0;display:flex;flex-direction:column;align-items:center;}.story-score strong{font-size:36px;}.story-score span{font-size:10px;color:var(--refresh-muted);}.story-score-arc{stroke-dasharray:78 100;}.story-report{display:grid;gap:0;}.story-report>div{display:grid;grid-template-columns:24px 1fr;gap:3px 9px;padding:13px 0;border-bottom:1px solid var(--refresh-line);}.story-report>div>span{grid-row:span 2;font-size:10px;color:var(--refresh-green);}.story-report strong{font-size:13px;}.story-report small{font-size:11px;color:var(--refresh-muted);}.story-bill{background:#082c24;color:#fff;border-radius:15px;padding:25px;position:relative;margin:24px 0;}.story-bill>span{font-size:9px;letter-spacing:1.5px;color:#9ee6bf;}.story-bill strong{display:block;font-size:39px;margin-top:18px;}.story-card-chip{position:absolute;right:25px;bottom:25px;color:#9ee6bf;font-size:30px;}.story-payment{display:flex;justify-content:space-between;gap:12px;font-size:12px;line-height:1.5;}.story-payment>span{color:var(--refresh-muted);}.story-balance-bar{display:flex;height:26px;border-radius:6px;overflow:hidden;margin:16px 0;}.story-balance-bar i{width:5%;background:#9ee6bf;}.story-balance-bar b{width:95%;background:#1fa463;transform-origin:right;}
@media(min-width:900px) and (min-height:650px){.stories-enhanced .money-story{min-height:200vh;}.stories-enhanced .story-stage{position:sticky;top:0;min-height:95vh;box-sizing:border-box;}.stories-enhanced .story-reveal{opacity:calc(.28 + var(--story-reveal,0) * .72);transform:translateY(calc((1 - var(--story-reveal,0)) * 18px));}.stories-enhanced .story-conclusion{opacity:calc(.22 + var(--story-end,0) * .78);transform:translateY(calc((1 - var(--story-end,0)) * 16px));}.stories-enhanced .story-bar-row i{transform:scaleX(calc(.1 + var(--story-reveal,0) * .9));}.stories-enhanced .story-score-arc{stroke-dashoffset:calc((1 - var(--story-reveal,0)) * 78);}.stories-enhanced .story-balance-bar b{transform:scaleX(calc(.1 + var(--story-reveal,0) * .9));}}
@media(max-width:899px){.story-stage{grid-template-columns:1fr;gap:28px;padding-block:35px!important;}.story-copy h3{font-size:39px;letter-spacing:-1.5px;}.story-one-line{font-size:14px;}.story-links{margin-top:20px;gap:8px;}.story-next{margin-top:18px;}.story-visual{padding:20px;}.story-loan-row strong{font-size:25px;}.story-intro{padding-block:40px 25px!important;}.story-intro h2{font-size:40px;}.story-bar-row{grid-template-columns:43px 1fr 72px;gap:7px;}.story-conclusion strong{font-size:20px;}.story-seen .story-bar-row i{animation:story-grow .8s ease-out both;}.story-seen .story-score-arc{animation:story-arc .9s ease-out both;}.story-seen .story-balance-bar b{animation:story-grow .9s ease-out both;}}
@keyframes story-grow{from{transform:scaleX(.1)}to{transform:scaleX(1)}}@keyframes story-arc{from{stroke-dashoffset:78}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.stories-enhanced .money-story{min-height:0;}.stories-enhanced .story-stage{position:static;min-height:0;}.money-stories *{animation:none!important;transition:none!important;}.stories-enhanced .story-reveal,.stories-enhanced .story-conclusion{opacity:1;transform:none;}.stories-enhanced .story-bar-row i,.stories-enhanced .story-balance-bar b{transform:none;}.stories-enhanced .story-score-arc{stroke-dashoffset:0;}}
/* Scrub visuals on smaller screens too, rather than playing before the card arrives. */
@media(max-width:899px),(max-height:649px){.stories-enhanced .story-bar-row i,.stories-enhanced .story-balance-bar b{animation:none;transform:scaleX(calc(.1 + var(--story-reveal,1)*.9));}.stories-enhanced .story-score-arc{animation:none;stroke-dashoffset:calc((1 - var(--story-reveal,1))*78);}.stories-enhanced .story-conclusion{opacity:calc(.4 + var(--story-end,1)*.6);}}
@media(prefers-reduced-motion:reduce){.stories-enhanced .story-bar-row i,.stories-enhanced .story-balance-bar b{transform:none;}.stories-enhanced .story-score-arc{stroke-dashoffset:0;}.stories-enhanced .story-conclusion{opacity:1;}}
@media(max-width:899px){.story-scroll-cue,.story-progress{display:none;}}

/* ── The score climbs, and changes colour as it climbs ─────────────────────
   A static "750" says nothing. Scrolling the number from 612 to 786 while
   the arc runs red -> amber -> light green -> deep green shows what a score
   IS: a position on a scale with consequences, not a label. The hue is
   driven by the same --story-reveal the rest of the story uses, so the
   colour and the number can never disagree. */
.stories-enhanced .story-score-arc{
  stroke:hsl(
    calc(2deg + var(--story-reveal,0) * 143deg)
    calc(62% + var(--story-reveal,0) * 12%)
    calc(48% - var(--story-reveal,0) * 7%)
  );
  transition:stroke .5s linear;
}
.stories-enhanced #story-score-num{
  color:hsl(
    calc(2deg + var(--story-reveal,0) * 143deg)
    calc(62% + var(--story-reveal,0) * 12%)
    calc(42% - var(--story-reveal,0) * 6%)
  );
  font-variant-numeric:tabular-nums;
  transition:color .5s linear;
}
@media(prefers-reduced-motion:reduce){
  .stories-enhanced .story-score-arc,.stories-enhanced #story-score-num{transition:none}
}

/* ── Motion graphics: make the evidence arrive ────────────────────────────
   The bars moved 0.1 → 1.0 in lockstep and the numbers never moved at all,
   so three rows animated as one block and nothing drew the eye. Now each
   row is staggered off the same --story-reveal, the interest portion grows
   SECOND so you watch the red eat into the bar rather than finding it
   already there, and the figures count up beside them. */
.stories-enhanced .story-cost-bar{
  width:calc(var(--w) * var(--ease, 0));
  transition:none;                      /* scroll drives it, not a timer */
}
.stories-enhanced .story-cost-row:nth-child(2){--ease:clamp(0, calc((var(--story-reveal,0) - 0.00) / 0.55), 1)}
.stories-enhanced .story-cost-row:nth-child(3){--ease:clamp(0, calc((var(--story-reveal,0) - 0.12) / 0.55), 1)}
.stories-enhanced .story-cost-row:nth-child(4){--ease:clamp(0, calc((var(--story-reveal,0) - 0.24) / 0.55), 1)}
/* The red arrives after its own bar has drawn — the point is the interest
   appearing inside money you thought was yours. */
.stories-enhanced .story-cost-bar b{
  width:calc(var(--int) * clamp(0, calc((var(--story-reveal,0) - 0.45) / 0.45), 1));
  transition:none;
}
.stories-enhanced .story-cost-row{
  opacity:calc(0.35 + var(--ease,0) * 0.65);
  transform:translateX(calc((1 - var(--ease,0)) * -10px));
}

/* The three-vs-five EMI pair lifts in as the comparison is made. */
.stories-enhanced .story-loan-row>div{
  opacity:calc(0.3 + var(--story-reveal,0) * 0.7);
  transform:translateY(calc((1 - var(--story-reveal,0)) * 12px));
}
.stories-enhanced .story-loan-row>div:last-child{
  opacity:calc(0.3 + clamp(0, calc((var(--story-reveal,0) - 0.15) / 0.85), 1) * 0.7);
}

/* The conclusion is the payoff, so it arrives last and with weight. */
.stories-enhanced .story-conclusion{
  transform:translateY(calc((1 - var(--story-end,0)) * 14px)) scale(calc(0.985 + var(--story-end,0) * 0.015));
}

/* Card story: the payment bar and the remaining balance. */
.stories-enhanced .story-balance-bar i{
  transform:scaleX(clamp(0, calc(var(--story-reveal,0) / 0.6), 1));
  transform-origin:left;
}

@media(prefers-reduced-motion:reduce){
  .stories-enhanced .story-cost-bar,.stories-enhanced .story-cost-bar b{width:var(--w,100%)}
  .stories-enhanced .story-cost-bar b{width:var(--int)}
  .stories-enhanced .story-cost-row,.stories-enhanced .story-loan-row>div,
  .stories-enhanced .story-conclusion{opacity:1;transform:none}
}