/* eTrade storefront CSS: Storefront blog page */
body.blog .hero{display:none}
#bgPost{display:none}
body.bgpost #bgPost{display:block}
body.bgpost #bgList{display:none}
#blogPage .chero{padding:32px 0 84px}
.bgfeat{display:grid;grid-template-columns:1.1fr 1fr;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--bd);box-shadow:0 12px 36px rgba(20,20,40,.08);margin-top:-56px;position:relative}
.bgfeat .fv{display:grid;place-items:center;min-height:360px;overflow:hidden}
.bgfeat .fv .bcimg,.bgcover .bcimg{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bgfeat .fv svg{width:48%;max-height:70%;filter:drop-shadow(0 20px 22px rgba(20,20,40,.22));transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.bgfeat:hover .fv svg{transform:scale(1.08) rotate(-3deg)}
.bgfeat .fb{padding:40px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0}
.bgfeat h2{font-size:clamp(22px,2vw + 12px,32px);line-height:1.2;margin:12px 0 10px;letter-spacing:-.01em}
.bgfeat p{color:var(--muted);margin-bottom:18px}
.bgtag{display:inline-block;background:#F1EBFC;color:var(--purple);font:600 11px "DM Sans";padding:4px 12px;border-radius:20px}
.bgm{display:flex;align-items:center;gap:8px 12px;font-size:12px;color:var(--muted);flex-wrap:wrap;margin-bottom:18px}
.bgav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 11px "DM Sans";flex:none}
.bgm b{color:var(--dark);font-weight:600}
.bgtool{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:44px}
.bgtool .tabs{flex-wrap:wrap;overflow:visible}
.bgs{display:flex;align-items:center;gap:10px;background:var(--grey);border-radius:10px;padding:0 14px;min-width:240px;max-width:100%}
.bgs svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;flex:none}
.bgs input{border:0;outline:0;background:none;font:inherit;font-size:13px;padding:11px 0;width:100%;min-width:0;color:var(--dark)}
.bgs:focus-within{box-shadow:0 0 0 3px rgba(47,111,237,.18)}
.bgg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.bgg>*{min-width:0}
.bgg .post.new{animation:pop .5s cubic-bezier(.2,.7,.2,1) both}
.post .bgm{margin:14px 0 0;font-size:11px}
.post .bgav{width:24px;height:24px;font-size:9px}
/* Blog page cards: every image is a uniform 4:2, flush with the card (edge to edge, no padding, border or gap), cropped with object-fit:cover so it is never stretched */
.bgg .post>.pv{aspect-ratio:4/2;height:auto!important;min-height:0;flex:0 0 auto;width:100%;margin:0;padding:0;border:0;overflow:hidden;position:relative}
.bgg .post>.pv>div{position:absolute!important;inset:0;width:100%;height:100%;margin:0;padding:0;border:0}
.bgg .post>.pv .bcimg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;display:block;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;filter:none;image-rendering:auto}
#bgEmpty{display:none;text-align:center;padding:44px 20px;margin-top:24px}
#bgEmpty p{color:var(--muted);margin-top:6px}
.bgnl{margin-top:70px}
.bgnl .nform{max-width:440px;margin:0 auto}
.bgnl #bgmsg{display:block;margin-top:10px;font-size:12px;color:#B9C0D4}
body.blog.bgpost #rprog{display:block}
@media (max-width:1024px){
.bgcover{min-height:300px}
}
@media (max-width:768px){
.bgfeat,.bgcover{margin-top:-48px}
.bgbody p{font-size:15px}
}
@media (max-width:600px){
.bgcover{min-height:240px}
.bgtake{padding:20px}
}
.bgfeat,.bgcover{margin-top:0}
@media (max-width:768px){
.bgfeat,.bgcover{margin-top:0}
}
#blogPage .chero{padding-top:40px;padding-bottom:96px;padding-left:24px;padding-right:24px}
@media (max-width:1024px){
#blogPage .chero{padding-left:20px;padding-right:20px}
}
@media (max-width:768px){
#blogPage .chero{padding-top:32px;padding-bottom:84px}
}
@media (max-width:480px){
#blogPage .chero{padding-left:16px;padding-right:16px}
}
/* ===== SINGLE ARTICLE REDESIGN =====
   Image: always 4:2, full width of the page container, no border / padding / shadow, cropped with object-fit:cover (never stretched).
   Text: a calm 720px reading column. Everything is scoped to body.bgpost so the blog list and home cards are untouched. */
body.bgpost #blogPage .chero{padding-top:44px;padding-bottom:104px;background:linear-gradient(180deg,#F4F7FE 0%,#FBF8FE 100%);max-width:none}
body.bgpost #bgCrumb{font-weight:500}
body.bgpost #bgH1{font-size:clamp(28px,4.2vw + 6px,52px)!important;line-height:1.12!important;letter-spacing:-.025em;max-width:860px!important;margin:18px auto 16px!important;text-wrap:balance}
body.bgpost #bgP{max-width:none}
body.bgpost #bgP .bgm{justify-content:center;margin:0;font-size:13px}
body.bgpost #bgP .bgav{width:32px;height:32px;font-size:11px}
.bga{display:block}
.bgcover{position:relative;display:block;width:100%;aspect-ratio:4/2;height:auto;min-height:0;margin:0;padding:0;border:0;outline:0;box-shadow:none;border-radius:0;overflow:hidden;display:grid;place-items:center}
.bgcover .bcimg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;display:block;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;filter:none}
.bgcover svg{width:32%;max-height:70%;filter:drop-shadow(0 20px 22px rgba(20,20,40,.22));animation:bob 6s ease-in-out infinite}
.bgbody{max-width:720px;margin:clamp(32px,5vw,56px) auto 0;min-width:0}
.bgbody p{font-size:17px;line-height:1.85;color:#374151;margin:0 0 22px;overflow-wrap:anywhere}
.bgbody p.bglead{font-size:clamp(18px,1vw + 15px,22px);line-height:1.6;font-weight:500;color:var(--dark);padding-left:18px;border-left:3px solid var(--blue);margin-bottom:28px}
.bgbody h3{font-size:20px;margin:28px 0 12px}
.bgtake{background:linear-gradient(135deg,#EAF0FE,#F1EBFC);border-radius:18px;padding:26px 30px;margin:34px 0}
.bgtake h3{margin:0 0 14px;font-size:17px}
.bgtake ul{list-style:none;display:grid;gap:12px;font-size:15px;font-weight:500;padding:0}
.bgtake li{display:flex;align-items:flex-start;gap:12px;line-height:1.5}
.bgtake li:before{content:"\2713";flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--blue);font-size:12px;margin:0}
.bgtags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.bgshare{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:18px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);margin-top:30px;font-size:13px;color:var(--muted)}
.bgshare span{margin-right:auto}
.bgshare .btn{background:var(--grey);box-shadow:none;font-size:12px;padding:9px 16px;border-radius:10px}
.bgshare .btn:hover{background:var(--blue);color:#fff}
.bgauth{display:flex;align-items:center;gap:14px;margin-top:26px;padding:18px 20px;background:var(--grey);border-radius:16px}
.bgauth .bgav{width:46px;height:46px;font-size:15px}
.bgauth small{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.bgauth b{font-size:15px}
.bgrel{margin-top:clamp(48px,7vw,80px)}
@media (max-width:1024px){
.bgg{grid-template-columns:1fr 1fr}
.bgfeat{grid-template-columns:1fr}
.bgfeat .fv{min-height:280px}
.bgfeat .fb{padding:32px}
}
@media (max-width:768px){
.bgtool{margin-top:32px}
.bgs{width:100%}
.bgnl{margin-top:56px}
.bgbody p{font-size:16px;line-height:1.8}
body.bgpost #blogPage .chero{padding-bottom:84px}
body.bgpost #bgP .bgm{font-size:12px;gap:6px 10px}
}
@media (max-width:600px){
.bgg{grid-template-columns:1fr}
.bgfeat .fb{padding:22px}
.bgfeat .fv{min-height:230px}
.bgcover svg{width:46%}
.bgbody p.bglead{padding-left:14px}
.bgtake{padding:20px;border-radius:14px;margin:26px 0}
.bgshare{flex-direction:column;align-items:stretch;text-align:center}
.bgshare span{margin:0}
.bgshare .btn{text-align:center;width:100%}
.bgauth{padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){
.bgcover svg{animation:none}
}