:root{
  --blog-bg:#f7f9fc;
  --blog-card:#ffffff;
  --blog-text:#0f172a;
  --blog-muted:#475569;
  --blog-line:rgba(15,23,42,.1);
  --blog-primary:#4f46e5;
  --blog-primary-soft:#eef2ff;
  --blog-radius:1rem;
  --blog-shadow:0 16px 40px rgba(15,23,42,.08);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--blog-text);
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 45%);
}

a{
  color:inherit;
}

.blog-shell{
  width:min(1140px,92%);
  margin:0 auto;
}

.blog-topbar{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.82);
  border-bottom:1px solid var(--blog-line);
}

.blog-topbar-inner{
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.blog-logo{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.1rem;
  font-weight:700;
  text-decoration:none;
}

.blog-logo-dot{
  width:10px;
  height:10px;
  border-radius:3px;
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
}

.blog-nav{
  display:flex;
  align-items:center;
  gap:1.15rem;
  flex-wrap:wrap;
}

.blog-nav a{
  text-decoration:none;
  color:#334155;
  font-size:.9rem;
  font-weight:500;
}

.blog-nav a:hover{
  color:#0f172a;
}

.blog-nav .blog-nav-cta{
  color:#fff;
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  padding:.5rem .95rem;
  border-radius:999px;
}

.blog-section{
  padding:4.25rem 0;
}

.blog-hero{
  padding-top:3.5rem;
}

.blog-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:#4338ca;
  margin-bottom:1rem;
}

.blog-eyebrow-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#4f46e5;
}

.blog-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);
  gap:1.5rem;
}

.blog-hero h1{
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(2rem,4vw,3.1rem);
  line-height:1.05;
  letter-spacing:-.03em;
}

.blog-hero p{
  margin:1rem 0 0;
  color:var(--blog-muted);
  line-height:1.7;
  font-size:1rem;
}

.blog-hero-panel{
  background:var(--blog-card);
  border:1px solid var(--blog-line);
  border-radius:1.15rem;
  padding:1.15rem;
  box-shadow:var(--blog-shadow);
}

.blog-hero-panel h2{
  margin:0 0 .65rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.06rem;
}

.blog-hero-panel ul{
  margin:0;
  padding-left:1.1rem;
  color:var(--blog-muted);
  line-height:1.65;
  font-size:.92rem;
}

.blog-social-links{
  margin-top:1rem;
  display:grid;
  gap:.5rem;
}

.blog-social-links a{
  text-decoration:none;
  font-size:.84rem;
  color:#3730a3;
  font-weight:600;
}

.blog-social-links a:hover{
  color:#312e81;
}

.blog-hero-cta{
  margin-top:1.35rem;
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  text-decoration:none;
  font-weight:600;
  border-radius:999px;
  padding:.64rem 1rem;
  font-size:.9rem;
}

.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
}

.btn-ghost{
  color:#1e293b;
  background:#eef2ff;
}

.blog-section-head{
  margin-bottom:1.15rem;
}

.blog-section-head h2{
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.5rem,3vw,2.15rem);
}

.blog-section-head p{
  margin:.7rem 0 0;
  color:var(--blog-muted);
  max-width:760px;
  line-height:1.7;
}

.blog-categories{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

.blog-chip{
  border:1px solid rgba(79,70,229,.18);
  background:var(--blog-primary-soft);
  color:#3730a3;
  border-radius:999px;
  padding:.45rem .75rem;
  font-size:.78rem;
  font-weight:600;
}

.blog-featured-card{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:1.2rem;
  padding:1.35rem;
  border-radius:1.2rem;
  background:var(--blog-card);
  border:1px solid var(--blog-line);
  box-shadow:var(--blog-shadow);
}

.blog-featured-main h3{
  margin:.65rem 0 .55rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.52rem;
  line-height:1.15;
}

.blog-featured-main p{
  margin:0;
  color:var(--blog-muted);
  line-height:1.68;
}

.blog-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:.65rem;
}

.blog-meta span{
  background:#f1f5f9;
  border:1px solid rgba(148,163,184,.25);
  color:#334155;
  border-radius:999px;
  padding:.35rem .64rem;
  font-size:.75rem;
  font-weight:600;
}

.blog-featured-side{
  border-left:1px solid var(--blog-line);
  padding-left:1rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.8rem;
}

.blog-featured-side p{
  margin:0;
  color:var(--blog-muted);
  line-height:1.66;
  font-size:.92rem;
}

.blog-total{
  color:var(--blog-muted);
  font-size:.9rem;
  margin-bottom:.9rem;
}

.blog-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-bottom:1rem;
}

.blog-search-wrap{
  border:1px solid var(--blog-line);
  background:#fff;
  border-radius:1rem;
  padding:1rem;
  margin-bottom:1rem;
}

.blog-search-wrap label{
  display:block;
  font-size:.82rem;
  font-weight:700;
  color:#334155;
  margin-bottom:.5rem;
}

.blog-search-controls{
  display:flex;
  gap:.6rem;
}

.blog-search-controls input{
  width:100%;
  border:1px solid rgba(15,23,42,.16);
  border-radius:.7rem;
  padding:.65rem .8rem;
  font-size:.9rem;
  outline:none;
}

.blog-search-controls input:focus{
  border-color:#4f46e5;
  box-shadow:0 0 0 3px rgba(79,70,229,.12);
}

.blog-search-controls button{
  border:1px solid rgba(79,70,229,.25);
  background:#eef2ff;
  color:#3730a3;
  border-radius:.7rem;
  padding:0 .85rem;
  font-size:.82rem;
  font-weight:700;
  cursor:pointer;
}

.blog-search-help{
  margin:.55rem 0 0;
  font-size:.78rem;
  color:#64748b;
}

.blog-filter-btn{
  border:1px solid var(--blog-line);
  background:#fff;
  color:#334155;
  padding:.42rem .7rem;
  border-radius:999px;
  font-size:.79rem;
  font-weight:600;
  cursor:pointer;
}

.blog-filter-btn.is-active{
  border-color:rgba(79,70,229,.3);
  background:#eef2ff;
  color:#3730a3;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}

.blog-grid-compact .blog-card{
  min-height:220px;
}

.blog-card{
  background:var(--blog-card);
  border:1px solid var(--blog-line);
  border-radius:1rem;
  padding:1.05rem;
  display:flex;
  flex-direction:column;
  min-height:250px;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.blog-card:hover{
  transform:translateY(-3px);
  border-color:rgba(79,70,229,.25);
  box-shadow:0 16px 34px rgba(15,23,42,.08);
}

.blog-card h3{
  margin:.55rem 0 .45rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.12rem;
  line-height:1.25;
}

.blog-card p{
  margin:0 0 .9rem;
  color:var(--blog-muted);
  line-height:1.67;
  font-size:.9rem;
  flex:1;
}

.blog-card-bars{
  margin-bottom:.8rem;
  border-top:1px solid rgba(148,163,184,.24);
  padding-top:.65rem;
  display:grid;
  gap:.35rem;
}

.blog-score-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.76rem;
  color:#475569;
}

.blog-score-row strong{
  color:#0f172a;
  font-size:.78rem;
}

.blog-card-link{
  font-size:.84rem;
  font-weight:700;
  text-decoration:none;
  color:#3730a3;
}

.blog-topics{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.85rem;
}

.blog-topic-card{
  border:1px solid var(--blog-line);
  border-radius:1rem;
  background:#fff;
  padding:.95rem;
}

.blog-topic-card h3{
  margin:0 0 .35rem;
  font-size:.9rem;
  font-family:'Space Grotesk',sans-serif;
}

.blog-topic-card p{
  margin:0 0 .55rem;
  font-size:.8rem;
  color:var(--blog-muted);
  line-height:1.55;
}

.blog-topic-card span{
  font-size:.72rem;
  color:#334155;
  font-weight:600;
}

.blog-final-cta{
  margin-top:2.2rem;
  background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
  color:#fff;
  border-radius:1.2rem;
  padding:1.45rem;
  border:1px solid rgba(148,163,184,.25);
}

.blog-final-cta h2{
  margin:0 0 .55rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.35rem;
}

.blog-final-cta p{
  margin:0;
  color:rgba(255,255,255,.82);
  line-height:1.68;
}

.blog-final-cta .blog-hero-cta{
  margin-top:1rem;
}

.blog-footer{
  padding:1.55rem 0 2rem;
  color:#475569;
  border-top:1px solid var(--blog-line);
}

.blog-footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.75rem;
  font-size:.85rem;
}

.blog-footer-links{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
}

/* Post */
.blog-post-wrap{
  padding:2.5rem 0 4rem;
}

.blog-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  font-size:.82rem;
  color:#64748b;
  margin-bottom:1rem;
}

.blog-breadcrumb a{
  text-decoration:none;
  color:#334155;
}

.blog-post-header{
  max-width:900px;
}

.blog-post-header h1{
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(2rem,4vw,2.9rem);
  line-height:1.08;
  letter-spacing:-.03em;
}

.blog-post-header p{
  margin:1rem 0 0;
  color:var(--blog-muted);
  line-height:1.72;
  font-size:1.03rem;
}

.blog-post-layout{
  margin-top:1.3rem;
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:1.2rem;
  align-items:start;
}

.blog-post-content{
  background:#fff;
  border:1px solid var(--blog-line);
  border-radius:1.1rem;
  padding:1.5rem;
  box-shadow:0 14px 34px rgba(15,23,42,.06);
}

.blog-post-content h2{
  margin:1.8rem 0 .6rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.38rem;
  line-height:1.2;
}

.blog-post-content h3{
  margin:1.2rem 0 .5rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.07rem;
}

.blog-post-content p{
  margin:.75rem 0;
  line-height:1.78;
  color:#1e293b;
}

.blog-post-content ul{
  margin:.6rem 0 .9rem 1.15rem;
  color:#1e293b;
  line-height:1.7;
}

.blog-post-content li{
  margin:.35rem 0;
}

.blog-post-content strong{
  color:#0f172a;
}

.blog-callout{
  margin:1.2rem 0;
  border:1px solid rgba(79,70,229,.24);
  background:#eef2ff;
  border-radius:.95rem;
  padding:1rem;
}

.editorial-key,
.editorial-warning,
.editorial-tip,
.editorial-summary{
  margin:1.2rem 0;
  border-radius:.95rem;
  padding:.9rem 1rem;
  border:1px solid;
}

.editorial-key{
  border-color:rgba(79,70,229,.28);
  background:#eef2ff;
}

.editorial-warning{
  border-color:rgba(234,88,12,.32);
  background:#fff7ed;
}

.editorial-tip{
  border-color:rgba(22,163,74,.32);
  background:#f0fdf4;
}

.editorial-summary{
  border-color:rgba(14,116,144,.3);
  background:#ecfeff;
}

.editorial-key h3,
.editorial-warning h3,
.editorial-tip h3,
.editorial-summary h3{
  margin:0 0 .4rem;
  font-size:.96rem;
}

.editorial-key p,
.editorial-warning p,
.editorial-tip p,
.editorial-summary p{
  margin:0;
  font-size:.92rem;
  line-height:1.62;
}

.editorial-quote{
  margin:1.2rem 0;
  padding:.95rem 1rem;
  border-left:4px solid #4f46e5;
  background:#f8fafc;
  color:#1e293b;
  border-radius:.3rem .9rem .9rem .3rem;
  font-size:.95rem;
  line-height:1.66;
}

.editorial-divider{
  margin:1.4rem 0;
  border:0;
  border-top:1px dashed rgba(100,116,139,.45);
}

.editorial-table-wrap{
  margin:1rem 0 1.2rem;
  overflow-x:auto;
}

.editorial-table{
  width:100%;
  border-collapse:collapse;
  min-width:540px;
  border:1px solid rgba(148,163,184,.32);
  border-radius:.7rem;
  overflow:hidden;
}

.editorial-table th{
  background:#eef2ff;
  color:#1e293b;
  text-align:left;
  font-size:.82rem;
  padding:.62rem;
}

.editorial-table td{
  border-top:1px solid rgba(148,163,184,.22);
  font-size:.84rem;
  padding:.62rem;
  color:#334155;
  vertical-align:top;
}

.social-pack{
  margin-top:1.35rem;
  border:1px solid rgba(99,102,241,.28);
  background:linear-gradient(135deg,#f8faff,#eef2ff);
  border-radius:1rem;
  padding:1rem;
}

.social-pack h2{
  margin:0 0 .5rem;
  font-size:1rem;
}

.social-pack p{
  margin:.45rem 0;
  font-size:.88rem;
}

.social-pack ul{
  margin:.55rem 0 .2rem 1rem;
}

.social-pack-links{
  margin-top:.7rem;
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

.social-pack-links a{
  text-decoration:none;
  font-size:.8rem;
  font-weight:700;
  color:#3730a3;
}

.blog-rating{
  margin-top:1.3rem;
  border:1px solid rgba(79,70,229,.2);
  border-radius:1rem;
  background:#f8faff;
  padding:1rem;
}

.blog-rating h2{
  margin:0 0 .45rem;
  font-size:1rem;
}

.blog-rating p{
  margin:.35rem 0 .7rem;
  font-size:.88rem;
}

.blog-rating-stars{
  display:flex;
  gap:.35rem;
  margin-bottom:.45rem;
}

.blog-star{
  border:0;
  background:transparent;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  color:#cbd5e1;
  padding:.05rem;
  transition:transform .15s ease,color .15s ease;
}

.blog-star:hover{
  transform:translateY(-1px);
  color:#f59e0b;
}

.blog-star.is-active{
  color:#f59e0b;
}

.blog-rating-note{
  margin:0;
  font-size:.8rem;
  color:#475569;
}

.blog-toc{
  position:sticky;
  top:86px;
  background:#fff;
  border:1px solid var(--blog-line);
  border-radius:1rem;
  padding:1rem;
}

.blog-toc h2{
  margin:0 0 .65rem;
  font-size:.92rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#334155;
}

.blog-toc ol{
  margin:0;
  padding-left:1rem;
  display:grid;
  gap:.46rem;
}

.blog-toc a{
  color:#1e293b;
  text-decoration:none;
  font-size:.84rem;
  line-height:1.45;
}

.blog-toc a:hover{
  color:#3730a3;
}

.blog-related{
  margin-top:1.8rem;
  border-top:1px solid var(--blog-line);
  padding-top:1.1rem;
}

.blog-related h2{
  margin:0 0 .7rem;
  font-size:1.03rem;
}

.blog-related-list{
  margin:0;
  padding-left:1rem;
  display:grid;
  gap:.42rem;
}

.blog-related-list a{
  color:#3730a3;
  text-decoration:none;
}

.blog-post-cta{
  margin-top:1.3rem;
  border:1px solid var(--blog-line);
  background:#f8fafc;
  border-radius:1rem;
  padding:1rem;
}

.blog-empty-state{
  border:1px dashed rgba(79,70,229,.45);
  background:#f8faff;
  border-radius:1rem;
  padding:1rem;
  color:#334155;
}

@media (max-width:1040px){
  .blog-hero-grid,
  .blog-featured-card{
    grid-template-columns:1fr;
  }

  .blog-featured-side{
    border-left:0;
    border-top:1px solid var(--blog-line);
    padding:1rem 0 0;
  }

  .blog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .blog-topics{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .blog-post-layout{
    grid-template-columns:1fr;
  }

  .blog-toc{
    position:relative;
    top:auto;
  }
}

@media (max-width:760px){
  .blog-section{
    padding:3.4rem 0;
  }

  .blog-grid{
    grid-template-columns:1fr;
  }

  .blog-search-controls{
    flex-direction:column;
  }

  .blog-search-controls button{
    width:100%;
    padding:.65rem .8rem;
  }

  .blog-topics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .blog-post-content{
    padding:1.1rem;
  }

  .blog-post-header h1{
    font-size:1.9rem;
  }
}

@media (max-width:520px){
  .blog-topics{
    grid-template-columns:1fr;
  }
}