/* ===================================================================
   Uptinergy Inc. — Results page stylesheet
   Loads after style.css and style-home.css (tokens + shared parts).
   =================================================================== */

/* ---------------------------------------------------------------
   Hero performance card — vertical column chart, compact
   --------------------------------------------------------------- */
#perfcard{max-width:420px;justify-self:end;padding:24px 26px;width:100%}
#perfcard .vis-head{margin-bottom:18px}

.pc-chart{display:flex;align-items:stretch;gap:20px}
.pc-group{flex:1}
.pc-vdiv{width:1px;background:var(--line)}
.pc-cols{
  display:flex;
  align-items:flex-end;
  justify-content:space-around;
  gap:14px;
  height:170px;
  border-bottom:2px solid var(--line);
}
.pc-group{flex:1}
.pc-gcap{
  margin:34px 0 0;
  text-align:center;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:#8a6d2f;
}
.pc-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  height:100%;
  flex:1;
  min-width:0;
  position:relative;
}
.pc-val{font-size:.92rem;font-weight:700;color:var(--navy);margin-bottom:6px;white-space:nowrap}
.pc-val.pc-amber{color:var(--amber)}
.pc-colbar{
  width:40px;
  max-width:80%;
  height:0;
  border-radius:6px 6px 0 0;
  transition:height 1.2s cubic-bezier(.16,1,.3,1) .35s;
}
.pc-navy{background:var(--navy)}
.pc-gold{background:linear-gradient(180deg,rgba(244,163,0,.95) 0%,rgba(244,163,0,.6) 100%)}
.hero-card.bars-active .pc-colbar{height:var(--h)}
@media (prefers-reduced-motion: reduce){
  .pc-colbar{height:var(--h);transition:none}
}
.pc-cap{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  font-size:.72rem;
  color:var(--slate);
  margin:0;
  text-align:center;
  line-height:1.3;
  white-space:nowrap;
}
.pc-foot{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.78rem;color:var(--slate)}
@media(max-width:920px){
  #perfcard{justify-self:center}
}
@media(max-width:560px){
  .pc-chart{gap:14px}
  .pc-cols{gap:8px}
  .pc-colbar{width:32px}
  .pc-cap{
    white-space:normal;
    width:72px;
    font-size:.64rem;
  }
  .pc-group{padding-bottom:10px}
  .pc-gcap{margin-top:44px;font-size:.62rem}
}

/* Disclosure line under the stat band */
.res-disclosure{
  text-align:center;
  font-size:.88rem;
  color:var(--slate);
  max-width:64ch;
  margin:22px auto 0;
  padding:0 var(--pad);
}

/* Results grid */
.res-section{padding:84px 0}
.res-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.res-card{
  background:linear-gradient(135deg,#FFF9EE 0%,#FFF3DC 100%);
  border:1px solid rgba(244,163,0,.35);
  border-top:3px solid var(--amber);
  border-radius:12px;
  padding:28px 30px;
  display:flex;
  flex-direction:column;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s,border-color .5s;
}
.res-card.pop,
.res-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 24px 48px -24px rgba(244,163,0,.6);
  border-color:var(--amber);
}
@media (prefers-reduced-motion: reduce){
  .res-card{transition:none}
  .res-card.pop,.res-card:hover{transform:none;box-shadow:none}
}
.res-tag{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:#8a6d2f;
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.res-badge{
  flex:0 0 auto;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:1px;
  color:var(--navy);
  background:var(--amber);
  border-radius:20px;
  padding:4px 11px;
  white-space:nowrap;
}
.res-card h3{
  color:var(--navy);
  font-size:1.25rem;
  margin:0 0 14px;
}
.res-figures{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.res-pct{
  font-size:2.4rem;
  font-weight:700;
  color:var(--amber);
  line-height:1;
  letter-spacing:-1px;
}
.res-save{
  font-size:1rem;
  font-weight:700;
  color:var(--navy);
}
.res-base{
  font-size:.86rem;
  color:#8a6d2f;
  margin:0 0 14px;
}
.res-how{
  margin:0;
  color:var(--ink);
  font-size:.95rem;
  line-height:1.6;
  border-top:1px solid rgba(244,163,0,.3);
  padding-top:14px;
  margin-top:auto;
}

/* ---------------------------------------------------------------
   Savings rate chart
   --------------------------------------------------------------- */
.rchart-section{padding:84px 0 10px}
.rchart-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:34px 38px;
  box-shadow:0 26px 60px -40px rgba(11,37,69,.4);
}
.rc-row{
  display:grid;
  grid-template-columns:190px 1fr 70px;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
.rc-lbl{font-size:.92rem;font-weight:600;color:var(--navy)}
.rc-track{
  height:16px;
  background:var(--bg-soft);
  border-radius:8px;
  overflow:hidden;
}
.rc-track i{
  display:block;
  height:100%;
  width:0;
  border-radius:8px;
  background:linear-gradient(90deg,rgba(244,163,0,.95) 0%,rgba(244,163,0,.55) 100%);
  transition:width 1.2s cubic-bezier(.16,1,.3,1);
}
.rchart-card.bar-active .rc-track i{width:var(--w)}
@media (prefers-reduced-motion: reduce){
  .rc-track i{width:var(--w);transition:none}
}
.rc-val{
  font-size:.98rem;
  font-weight:700;
  color:var(--navy);
  text-align:right;
  white-space:nowrap;
  transform-origin:right center;
}
.rc-val.val-pop{animation:rcValPop .65s cubic-bezier(.22,.61,.36,1)}
@keyframes rcValPop{
  0%{transform:scale(.5);opacity:0}
  60%{transform:scale(1.25)}
  100%{transform:scale(1);opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .rc-val.val-pop{animation:none}
}
.rc-foot{
  margin:20px 0 0;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:.82rem;
  color:var(--slate);
}
@media(max-width:640px){
  .rchart-card{padding:24px 20px}
  .rc-row{grid-template-columns:1fr 64px;gap:10px}
  .rc-lbl{grid-column:1 / -1;margin-bottom:-6px}
}

/* Method strip */
.res-method{
  background:var(--navy);
  border-radius:14px;
  padding:36px 40px;
  margin-top:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}
.res-method p{
  margin:0;
  color:var(--slate-light);
  font-size:1.05rem;
  max-width:58ch;
}
.res-method p b{color:#fff}
.res-method .btn{flex:0 0 auto}

@media(max-width:860px){
  .res-grid{grid-template-columns:1fr}
  .res-section{padding:60px 0}
  .res-method{padding:28px 26px}
}