/* Article-only compact previews. Reparented expanded demos use shared styles. */
.blog-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px}
.blog-hero-copy{min-width:0}
.blog-hero-copy h1{font-size:36px;line-height:1.25}
.blog-hero-copy .blog-lead{font-size:18px;line-height:1.8}
.blog-hero-copy .blog-meta{font-size:13px;gap:8px 16px}
.blog-hero-grid .blog-demo-band{min-width:0;padding:0;background:#fff}
.blog-hero-grid .blog-demo-heading{margin-bottom:10px}
.blog-hero-grid .blog-demo-heading h2{display:none}
.blog-hero-grid .blog-demo-heading>span{font-size:11px}
.blog-hero-grid .bm{--bm-font:12px;max-width:none}
.blog-hero-grid .bm-device{height:430px;display:flex;flex-direction:column;box-shadow:none}
.blog-hero-grid .bm-top{padding:10px 12px;gap:8px;flex-shrink:0}
.blog-hero-grid .bm-brand{font-size:14px}.blog-hero-grid .bm-brand b{width:26px;height:27px;font-size:11px}
.blog-hero-grid .bm-demo-label{display:none}
.blog-hero-grid .bm-expand{padding:6px 8px;min-height:38px}
.blog-hero-grid .bm-layout{display:flex;flex-direction:column;flex:1;min-height:0}
.blog-hero-grid .bm-nav{padding:6px;flex-shrink:0}
.blog-hero-grid .bm-nav [role=tablist]{flex-direction:row;gap:4px}
.blog-hero-grid .bm-nav button{flex:1;min-width:0;min-height:38px;padding:8px 4px;text-align:center;font-size:12px}
.blog-hero-grid .bm-content{padding:16px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:auto}
.blog-hero-grid .bm h3{font-size:18px;margin-bottom:16px}
.blog-hero-grid .bm th,.blog-hero-grid .bm td{padding:8px 5px}
.blog-hero-grid .bm-sets summary{padding:10px 4px;gap:8px;flex-wrap:wrap}
.blog-hero-grid .bm-sets summary strong{margin-left:auto}
.blog-hero-grid .bm-footer{padding:9px 12px;font-size:11px;flex-shrink:0}
@media(min-width:1921px){.blog-hero-grid{gap:56px}.blog-hero-copy h1{font-size:40px}.blog-hero-grid .bm-device{height:450px}}
@media(max-width:1000px){.blog-hero-grid{grid-template-columns:minmax(0,1fr);gap:30px}.blog-hero-grid .blog-demo-band{width:100%;max-width:650px;justify-self:center}.blog-hero-copy h1{font-size:36px}}
@media(max-width:767px){.blog-hero-grid{gap:28px}.blog-hero-copy h1{font-size:30px}.blog-hero-copy .blog-lead{font-size:17px}.blog-hero-grid .bm-device{height:440px}.blog-hero-grid .bm-content{padding:14px 10px}.blog-hero-grid .bm-top{padding:10px}.blog-hero-grid .bm-expand,.blog-hero-grid .bm-nav button{min-height:44px}.blog-hero-grid .bm-footer>span:first-child{display:none}}