/* savings-cards.css : same look as before, now with the animation style of the demo page.
   Changes are marked /* ANIM */
:root{--ease:cubic-bezier(.22,1,.36,1)}

/* ---------- Compare toolbar (unchanged) ---------- */
.compare-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.compare-bar p{margin:0;font-size:1rem;font-weight:500}
.btn-compare{height:36px;padding:0 18px;border-radius:18px;border:1.5px solid #d90000;background:#fff;color:#d90000;font-size:.95rem;font-weight:700;letter-spacing:.3px}
.btn-compare:hover{background:#fdecec}
.btn-compare[aria-pressed="true"]{background:#d90000;color:#fff}

/* ANIM: entrance, cards slide up one after another */
@keyframes card-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.row.g-3>[class*="col-"]{animation:card-in .6s var(--ease) both;animation-delay:calc(var(--i,0)*90ms)}
.row.g-3>[class*="col-"]:nth-child(1){--i:0}.row.g-3>[class*="col-"]:nth-child(2){--i:1}
.row.g-3>[class*="col-"]:nth-child(3){--i:2}.row.g-3>[class*="col-"]:nth-child(4){--i:3}
.row.g-3>[class*="col-"]:nth-child(5){--i:4}.row.g-3>[class*="col-"]:nth-child(6){--i:5}
.row.g-3>[class*="col-"]:nth-child(7){--i:6}.row.g-3>[class*="col-"]:nth-child(8){--i:7}

/* ---------- Card ---------- */
.acct-card{
  position:relative;
  height:220px;
  overflow:hidden;display:flex;flex-direction:column;
  padding:12px 14px;background:#fff;border:0;border-top:4px solid #d90000;border-radius:8px;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  transition:transform .35s var(--ease),box-shadow .35s ease; /* ANIM */
}
.acct-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(208,2,27,.18)} /* ANIM */
.acct-main{display:flex;gap:12px;flex:1;min-height:0}

.acct-thumb{width:130px;height:125px;padding:0;overflow:hidden;border:1px solid #d3d6db;border-radius:8px;flex:none}
.acct-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s var(--ease)} /* ANIM */
.acct-card:hover .acct-thumb img{transform:scale(1.08)} /* ANIM */

.acct-title{font-size:22px;font-weight:600;line-height:1.1;margin:0 0 6px}
.acct-bullets{list-style:none;margin:0;padding:0}
.acct-bullets li{color:#444;font-size:15px;font-weight:400;line-height:1.2;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acct-bullets li::before{
  content:"\2713";color:#d90000;font-weight:700;margin-right:5px;
  display:inline-block;
  animation:tick-draw .5s ease both;animation-delay:calc(var(--i,0)*90ms + .45s); /* ANIM */
}
@keyframes tick-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} /* ANIM: tick is "drawn" left to right */

.show-more{padding:2px 0;border:0;background:none;color:#ff8800;font-weight:700;font-size:.9rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.acct-actions{display:flex;gap:8px;margin-top:8px}
.btn-apply,.btn-know{
  position:relative;isolation:isolate;overflow:hidden; /* ANIM */
  flex:1;height:32px;padding:0;border-radius:16px;font-size:.85rem;font-weight:700;letter-spacing:.4px;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  transition:color .3s ease,transform .15s ease,box-shadow .3s ease;
}
.btn-apply::before,.btn-know::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-101%);transition:transform .4s var(--ease)} /* ANIM: sweep */
.btn-apply:hover::before,.btn-know:hover::before{transform:none}
.btn-apply:active,.btn-know:active{transform:scale(.96)}
.btn-apply{background:#ff8800;border:1.5px solid #ff8800;color:#fff}
.btn-apply::before{background:#e67600}
.btn-apply:hover{color:#fff;box-shadow:0 6px 16px rgba(255,138,0,.4)}
.btn-know{background:#fff;border:1.5px solid #ff8800;color:#ff8800}
.btn-know::before{background:#ff8800}
.btn-know:hover{color:#fff}

/* ---------- Feature overlay: same as your original (covers the card, same size) ---------- */
.feature-panel{position:absolute;inset:0;display:flex;flex-direction:column;padding:10px 14px 12px;background:#fff;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.acct-card.is-open .feature-panel{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}
.feature-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.feature-head h3{margin:0;font-size:18px;font-weight:600;color:#d90000}
.feature-close{width:28px;height:28px;border:0;border-radius:50%;background:#f1f1f1;color:#333;font-size:1.1rem;line-height:1}
.feature-close:hover{background:#e2e2e2}
.feature-panel .acct-bullets{flex:1;min-height:0;overflow-y:auto;margin:0 0 8px;padding:0;list-style:none;scrollbar-width:thin}
.feature-panel .acct-bullets li{margin-bottom:6px}
.feature-panel .acct-bullets li::before{animation:none}

.show-more:focus-visible,.feature-close:focus-visible,.btn-apply:focus-visible,.btn-know:focus-visible{outline:2px solid #d90000;outline-offset:2px}
@media (max-width:400px){.acct-thumb{width:64px;height:64px}}
@media (hover:none){.acct-card:hover{transform:none;box-shadow:0 2px 10px rgba(0,0,0,.12)}.acct-card:hover .acct-thumb img{transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}}

/* =====================================================
   OPEN NOW animation: breathe + arrow nudge + shine
   Pauses on hover/focus, while the features overlay is open,
   and is switched off for "reduce motion".
   ===================================================== */
.btn-apply{
  flex:1.2;
  --d:calc(1.2s + var(--i,0)*300ms);        /* start after the cards land, staggered per card */
  --d2:calc(1.8s + var(--i,0)*300ms);
  /* shine = a white band painted as a background layer, so ::after stays free for the arrow */
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.65) 50%,transparent 60%) no-repeat 100% 0/250% 100%,#ff8800;
  animation:cta-breathe 2.6s ease-in-out var(--d) infinite,cta-shine 3.4s ease-in-out var(--d2) infinite;
}
@keyframes cta-breathe{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,136,0,0)}
  50%{transform:scale(1.045);box-shadow:0 6px 18px rgba(255,136,0,.45)}
}
@keyframes cta-shine{0%{background-position:100% 0}40%,100%{background-position:0% 0}}
.btn-apply::after{
  content:"";width:7px;height:7px;margin-left:9px;flex:none;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);
  animation:cta-nudge 1.3s ease-in-out var(--d) infinite;
}
@keyframes cta-nudge{0%,100%{translate:0 0}50%{translate:5px 0}}
.btn-apply:hover,.btn-apply:focus-visible,
.btn-apply:hover::after,.btn-apply:focus-visible::after{animation:none}
.acct-card.is-open .btn-apply,.acct-card.is-open .btn-apply::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.btn-apply,.btn-apply::after{animation:none!important}}

.page-content {
  padding-bottom: 30px;
}
.section-head {
  margin-bottom: 5px;
}
.dlab-post-meta {
  margin-bottom: 5px;
}