/* Blog 2.0 — an editorial reading system, intentionally separate from the product-card language. */
.blog-index { min-height:80vh; padding:8rem 0 6rem; background:#070a11; }
.blog-index-container { max-width:1180px; }
.blog-index-back { color:#7d8aa3; text-decoration:none; font-size:.82rem; display:inline-flex; gap:.45rem; align-items:center; margin-bottom:2.75rem; }
.blog-masthead { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:clamp(2rem,7vw,6rem); align-items:end; padding-bottom:3.25rem; border-bottom:1px solid #253044; }
.blog-masthead-label,.blog-section-label { color:#5eead4; text-transform:uppercase; letter-spacing:.16em; font-size:.68rem; font-weight:800; }
.blog-masthead h1 { color:#f7f9fc; font:800 clamp(2.8rem,7vw,6.3rem)/.9 'Space Grotesk','Inter',sans-serif; letter-spacing:-.065em; max-width:880px; margin:.8rem 0 0; }
.blog-masthead-copy { color:#9aa8bd; font-size:1rem; line-height:1.75; border-left:3px solid #0f766e; padding-left:1.25rem; margin:0; }
.blog-featured { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); margin:3rem 0 4.5rem; border:1px solid #283449; background:#0c111c; }
.blog-featured-copy { padding:clamp(2rem,5vw,4rem); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.blog-featured-copy h2 { color:white; font:800 clamp(2rem,4vw,3.8rem)/1 'Space Grotesk','Inter',sans-serif; letter-spacing:-.045em; margin:.85rem 0 1rem; }
.blog-featured-copy p { color:#9aa8bd; line-height:1.75; max-width:690px; }
.blog-featured-copy > a { color:white; text-decoration:none; font-weight:800; border-bottom:2px solid #5eead4; padding-bottom:.25rem; margin-top:.8rem; }
.blog-featured-aside { background:linear-gradient(155deg,#14233a,#111329 55%,#0d3532); padding:2.25rem; display:flex; flex-direction:column; justify-content:space-between; min-height:330px; }
.blog-featured-aside i { color:#5eead4; font-size:2rem; }
.blog-featured-aside small { color:#8ea0b9; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.blog-featured-aside strong { color:white; display:block; font-size:1.25rem; line-height:1.35; margin:.55rem 0; }
.blog-featured-aside a { color:#b6f7ed; text-decoration:none; font-weight:750; }
.blog-start { margin-bottom:4.5rem; }
.blog-start-head { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:1.4rem; }
.blog-start-head h2,.blog-library-head h2 { color:white; font:800 clamp(1.8rem,3vw,2.7rem)/1.1 'Space Grotesk','Inter',sans-serif; letter-spacing:-.035em; margin:.45rem 0 0; }
.blog-start-head p { color:#8190a7; max-width:440px; margin:0; }
.blog-start-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #29364a; border-bottom:1px solid #29364a; }
.blog-start-card { text-decoration:none; padding:1.65rem; border-right:1px solid #29364a; min-height:230px; display:flex; flex-direction:column; }
.blog-start-card:last-child { border-right:0; }
.blog-start-card > span { color:#5eead4; font:700 .7rem/1 'Fira Code',monospace; }
.blog-start-card h3 { color:#edf2fa; font-size:1.18rem; line-height:1.35; margin:2.2rem 0 .65rem; }
.blog-start-card p { color:#8290a5; font-size:.85rem; line-height:1.65; margin:0; }
.blog-start-card small { margin-top:auto; padding-top:1rem; color:#66758d; }
.blog-library-head { display:flex; justify-content:space-between; gap:2rem; align-items:end; margin-bottom:1.4rem; }
.blog-search { width:min(360px,100%); background:#090e17; border:1px solid #2a374c; color:white; padding:.8rem 1rem; }
.blog-search:focus { outline:2px solid #2dd4bf; outline-offset:2px; }
.blog-filters { display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.5rem; }
.blog-filter { border:1px solid #2a374c; background:transparent; color:#91a0b5; padding:.55rem .85rem; font-size:.75rem; font-weight:750; cursor:pointer; }
.blog-filter.active,.blog-filter:hover { color:white; background:#0f766e; border-color:#14b8a6; }
.blog-list { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#263247; border:1px solid #263247; }
.blog-list-card { background:#090e17; color:inherit; text-decoration:none; padding:1.6rem; min-height:245px; display:flex; flex-direction:column; position:relative; }
.blog-list-card:hover { background:#0d1421; }
.blog-list-card-meta { display:flex; justify-content:space-between; gap:1rem; color:#6f7f97; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
.blog-list-card h3 { color:#edf2f8; font-size:1.25rem; line-height:1.35; margin:1.7rem 0 .6rem; max-width:520px; }
.blog-list-card p { color:#8796ac; font-size:.87rem; line-height:1.65; margin:0; }
.blog-list-card-foot { display:flex; align-items:center; gap:.7rem; margin-top:auto; padding-top:1rem; color:#5eead4; font-size:.72rem; font-weight:750; }
.blog-empty { background:#090e17; border:1px solid #263247; padding:2rem; color:#94a3b8; }

.blog-article { background:#070a11 !important; padding:8rem 0 6rem !important; }
.blog-article-container { max-width:780px !important; }
.blog-article-header { padding-bottom:2.5rem; border-bottom:1px solid #253044; margin-bottom:2.5rem; }
.blog-article-back { color:#78869d; text-decoration:none; font-size:.78rem; display:inline-flex; gap:.45rem; align-items:center; margin-bottom:2.5rem; }
.blog-article-labels { display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; margin-bottom:1.1rem; }
.blog-article-labels span { border:1px solid #2c394e; color:#91a0b5; padding:.3rem .65rem; font-size:.62rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.blog-article-labels .type-tutorial { color:#a5b4fc; border-color:#42478a; }
.blog-article-labels .type-guide { color:#6ee7b7; border-color:#246451; }
.blog-article-labels .type-deepdive { color:#c4b5fd; border-color:#59458a; }
.blog-article-labels .type-comparison { color:#fde68a; border-color:#725b1f; }
.blog-article-labels .type-announcement { color:#7dd3fc; border-color:#285d77; }
.blog-article-labels .blog-article-video-label { color:#fda4af; border-color:#7c2d3d; }
.blog-article-header h1 { color:#f7f9fc; font:800 clamp(2.25rem,6vw,4.5rem)/.98 'Space Grotesk','Inter',sans-serif; letter-spacing:-.05em; margin:0; }
.blog-article-deck { color:#a8b4c6; font-size:1.08rem; line-height:1.75; max-width:720px; margin:1.25rem 0 1.6rem; }
.blog-byline { display:flex; align-items:center; gap:.85rem; }
.blog-byline-mark { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:white; font-size:.76rem; font-weight:850; background:linear-gradient(135deg,#6366f1,#0f766e); }
.blog-byline strong,.blog-byline span { display:block; }
.blog-byline strong { color:#e4e9f1; font-size:.8rem; }
.blog-byline span { color:#718096; font-size:.72rem; margin-top:.18rem; }
.blog-body { color:#a5b0c1 !important; font-size:1rem !important; line-height:1.88 !important; }
.blog-body p { margin-bottom:1.4rem; }
.blog-body > p:first-of-type { color:#d3dbe7; font-size:1.12rem; line-height:1.8; }
.blog-body h2 { color:#f2f5fa !important; font-size:1.55rem !important; margin:3.25rem 0 1rem !important; scroll-margin-top:6rem; }
.blog-body h3 { color:#dce4ef; margin-top:2rem; }
.blog-body strong { color:#e7ebf2; font-weight:650; }
.blog-body code { background:rgba(109,92,232,.12); color:#c4b5fd; padding:.1em .45em; border-radius:4px; font-family:'Fira Code',monospace; font-size:.85em; }
.blog-body a { color:#a5b4fc; }
.blog-body img { max-width:100%; height:auto; }
.blog-mobile-preview { width:min(100%,390px); margin:2rem auto 1.5rem; padding:.55rem; border:1px solid #27334a; border-radius:30px; background:#070b14; box-shadow:0 24px 70px rgba(0,0,0,.38); }
.blog-mobile-preview img { display:block; width:100%; height:auto; margin:0; border:0; border-radius:22px; box-shadow:none; object-fit:contain; }
.blog-body pre { margin:0 !important; border-radius:0 !important; padding-top:2.8rem !important; }
.blog-code-wrap { position:relative; margin:1.65rem 0; }
.blog-copy-code { position:absolute; z-index:2; right:.65rem; top:.65rem; border:1px solid #344158; background:#151d2a; color:#cbd5e1; font-size:.7rem; font-weight:750; padding:.35rem .62rem; cursor:pointer; }
.blog-toc { border-left:3px solid #0f766e; margin:1.75rem 0 2.5rem; padding:1rem 1.25rem; background:#0b111c; }
.blog-toc[hidden] { display:none; }
.blog-toc > span { color:#5eead4; font-size:.68rem; text-transform:uppercase; letter-spacing:.13em; font-weight:800; }
.blog-toc ol { columns:2; gap:2rem; margin:.8rem 0 0; padding-left:1.2rem; }
.blog-toc li { color:#5c6b81; break-inside:avoid; padding:.18rem 0; }
.blog-toc a { color:#aab5c6; text-decoration:none; font-size:.8rem; }
.blog-toc a:hover { color:#5eead4; }
.blog-video { margin:1rem 0 2.75rem; padding:1.5rem; background:linear-gradient(145deg,#111828,#0d2426); border:1px solid #294149; }
.blog-video-kicker { color:#fb7185; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.11em; }
.blog-video h2 { color:white !important; font-size:1.3rem !important; margin:.65rem 0 !important; }
.blog-video > p { color:#9aa8bd; font-size:.86rem; }
.blog-video-facade { width:100%; min-height:220px; border:1px solid #33445b; background:radial-gradient(circle at 28% 40%,rgba(45,212,191,.18),transparent 32%),#080d16; color:white; display:flex; align-items:center; justify-content:center; gap:1rem; cursor:pointer; }
.blog-video-facade:hover { border-color:#5eead4; }
.blog-video-play { width:54px; height:54px; display:grid; place-items:center; background:#dc2626; border-radius:50%; }
.blog-video-facade strong,.blog-video-facade small { display:block; text-align:left; }
.blog-video-facade small { color:#8594aa; margin-top:.35rem; }
.blog-video-frame { position:relative; aspect-ratio:16/9; background:#000; }
.blog-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.blog-video-youtube-link { color:#b7f7ed !important; display:inline-flex; gap:.4rem; align-items:center; margin-top:.9rem; font-size:.78rem; }
.blog-video-related { display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; border:1px solid #2b384d; background:#0a101a; padding:1rem; margin:1rem 0 2rem; }
.blog-video-related-icon { color:#f87171; font-size:1.4rem; }
.blog-video-related small,.blog-video-related strong { display:block; }
.blog-video-related small { color:#718198; font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; }
.blog-video-related strong { color:#dfe6ef; font-size:.85rem; margin-top:.2rem; }
.blog-video-related a { color:#5eead4; text-decoration:none; font-weight:800; font-size:.78rem; display:flex; gap:.45rem; align-items:center; }
.blog-article-cta { margin:4rem 0 3rem; padding:2rem; background:#0f4f4a; color:white; }
.blog-article-cta > span,.blog-related-heading > span { font-size:.65rem; text-transform:uppercase; letter-spacing:.14em; font-weight:850; color:#99f6e4; }
.blog-article-cta h2 { font-size:1.65rem; line-height:1.2; margin:.65rem 0; color:white; }
.blog-article-cta p { color:#c5eee9; line-height:1.65; }
.blog-article-cta div { display:flex; gap:.75rem; flex-wrap:wrap; }
.blog-article-cta a { padding:.7rem .9rem; color:#073b37; background:#fff; text-decoration:none; font-weight:800; font-size:.8rem; }
.blog-article-cta a + a { color:white; background:transparent; border:1px solid rgba(255,255,255,.45); }
.blog-related { margin:3rem 0; }
.blog-related-heading { margin-bottom:1rem; }
.blog-related-heading h2 { color:white; font-size:1.55rem; margin:.35rem 0; }
.blog-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#2a3548; border:1px solid #2a3548; }
.blog-related-grid a { background:#0a101a; text-decoration:none; padding:1.1rem; display:flex; flex-direction:column; min-height:190px; }
.blog-related-grid small { color:#5eead4; font-size:.65rem; }
.blog-related-grid strong { color:#eef2f7; font-size:.9rem; line-height:1.4; margin:.75rem 0 .5rem; }
.blog-related-grid span { color:#7f8da2; font-size:.75rem; line-height:1.55; }
.blog-article-navigation { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#2a3548; border:1px solid #2a3548; margin-top:2.5rem; }
.blog-article-navigation a { background:#090e17; padding:1rem 1.1rem; text-decoration:none; min-height:105px; display:flex; flex-direction:column; justify-content:center; }
.blog-article-navigation small { color:#5eead4; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }
.blog-article-navigation strong { color:#dce4ef; font-size:.82rem; line-height:1.4; margin-top:.45rem; }
.blog-article-navigation .blog-nav-next { text-align:right; }

@media (max-width:850px) {
  .blog-masthead,.blog-featured { grid-template-columns:1fr; }
  .blog-start-grid { grid-template-columns:1fr; }
  .blog-start-card { border-right:0; border-bottom:1px solid #29364a; min-height:190px; }
  .blog-start-card:last-child { border-bottom:0; }
  .blog-list { grid-template-columns:1fr; }
  .blog-library-head,.blog-start-head { align-items:flex-start; flex-direction:column; }
  .blog-search { width:100%; }
  .blog-related-grid { grid-template-columns:1fr; }
  .blog-article-navigation { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .blog-index,.blog-article { padding-top:6rem !important; }
  .blog-index-container,.blog-article-container { padding-inline:1.2rem; }
  .blog-masthead h1 { font-size:2.9rem; }
  .blog-toc ol { columns:1; }
  .blog-video-related { grid-template-columns:auto 1fr; }
  .blog-video-related a { grid-column:2; }
}