/* eTrade storefront CSS: Blog article cards (Home + Blog) */
.post{border-radius:14px;overflow:hidden;border:1px solid var(--bd);background:#fff;transition:box-shadow .4s,transform .4s;display:flex;flex-direction:column}
.post:hover{box-shadow:0 16px 40px rgba(20,20,40,.12);transform:translateY(-5px)}
.pv{height:170px;overflow:hidden;position:relative}
.pv>div{position:absolute;inset:0;display:grid;place-items:center;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.post:hover .pv>div{transform:scale(1.1)}
.pv svg{width:96px;height:96px}
.pv em{position:absolute;top:12px;left:12px;background:#fff;color:var(--purple);font:600 10px "DM Sans";font-style:normal;padding:3px 10px;border-radius:20px}
.pb{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.pb small{color:var(--muted);font-size:11px}
.pb h3{font-size:16px;line-height:1.35;margin:6px 0 8px}
.pb p{font-size:13px;color:var(--muted);flex:1}
.pb a{margin-top:14px;font-size:12px;font-weight:600;color:var(--blue);display:inline-flex;gap:6px}
.pb a span{transition:transform .3s}
.post:hover .pb a span{transform:translateX(5px)}
.nform{display:flex;background:#fff;border-radius:10px;padding:5px;box-shadow:0 14px 34px rgba(10,20,80,.3)}
.nform input{flex:1;min-width:0;border:0;padding:0 14px;font:inherit;font-size:14px;color:var(--dark);background:none;outline:0}
.nform button{position:relative;overflow:hidden;background:var(--dark);color:#fff;padding:12px 22px;border-radius:7px;font-weight:600;font-size:13px}
.nform button:hover{background:var(--pink)}
.nform button:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:rgba(255,255,255,.3);transform:skewX(-20deg);animation:shine 3.5s ease-in-out infinite}
@keyframes shine{60%,100%{left:130%}}
@media (max-width:480px){
.nform{flex-direction:column;gap:6px}
.nform input{padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){
.nform button:after{animation:none}
}
@media (max-width:480px){
.pb{padding:14px 16px 16px}
.pv{height:140px}
}
@media (max-width:340px){
.nform button{padding:12px 14px}
}
@media (hover:none){
.post:hover{transform:none}
}
.post .pb h3 a{margin:0;font-size:inherit;font-weight:inherit;color:var(--dark);display:inline}
.post .pb h3 a:hover{color:var(--blue)}
.fp-nav.pv{left:clamp(8px,1.6vw,22px)}
/* the promo section shares its class with the blog card body (.pb, which has side padding); only the horizontal padding is removed here,
   so the banners line up with the edges of the content area like every other section. The gap between the two banners is unchanged. */
section.pb{padding-left:0;padding-right:0}
.pb[hidden]{display:none}