/* VidSnag blog — article + hub styles. Reuses the design tokens from styles.css. */
.blog-wrap{max-width:760px;margin:0 auto;padding:40px clamp(18px,5vw,40px) 20px}
.crumbs{font-size:13px;font-weight:700;color:var(--faint);margin-bottom:18px}
.crumbs a{color:var(--accent)}
.crumbs span{margin:0 6px;color:#C9C1D8}

.post h1{font-family:"Baloo 2";font-weight:800;font-size:clamp(28px,5vw,42px);line-height:1.12;
  color:var(--ink);letter-spacing:-.5px;margin:6px 0 10px}
.post .meta{font-size:14px;font-weight:700;color:var(--faint);margin-bottom:26px}
.post .lede{font-size:clamp(16px,2.2vw,19px);font-weight:600;color:var(--muted);line-height:1.6;margin:0 0 26px}
.post h2{font-family:"Baloo 2";font-weight:800;font-size:clamp(21px,3.2vw,28px);color:var(--ink);
  margin:38px 0 12px;letter-spacing:-.3px}
.post h3{font-family:"Baloo 2";font-weight:700;font-size:18px;color:var(--ink);margin:26px 0 8px}
.post p{font-size:16.5px;line-height:1.72;color:var(--ink);margin:0 0 16px;font-weight:500}
.post a{color:var(--accent-press);box-shadow:inset 0 -1.5px 0 #CDBBF6;font-weight:700}
.post a:hover{box-shadow:inset 0 -1.5px 0 var(--accent)}
.post ul,.post ol{margin:0 0 18px;padding-left:22px}
.post li{font-size:16.5px;line-height:1.7;color:var(--ink);margin:0 0 8px;font-weight:500}
.post b,.post strong{color:var(--ink);font-weight:800}
.post figure{margin:24px 0}
.post img{width:100%;height:auto;border-radius:16px;border:1px solid #F0E9DD;box-shadow:var(--shadow-soft)}
.post figcaption{font-size:13px;color:var(--faint);font-weight:600;text-align:center;margin-top:8px}

/* answer box — the featured-snippet hook */
.answer{background:#fff;border:1px solid #ECE3F5;border-left:4px solid var(--accent);
  border-radius:14px;padding:16px 18px;margin:0 0 24px;box-shadow:var(--shadow-soft)}
.answer p{margin:0;font-size:16.5px}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:15px}
.cmp th,.cmp td{padding:11px 13px;text-align:left;border-bottom:1px solid #F0E9DD}
.cmp th{font-family:"Baloo 2";font-weight:700;color:var(--ink);background:#FAF6EF}
.cmp td{color:var(--ink);font-weight:500}
.cmp .yes{color:#1FA971;font-weight:800}
.cmp .no{color:#E0567F;font-weight:800}

/* inline CTA card */
.post-cta{background:linear-gradient(135deg,#2C2540,#3A2F5C);border-radius:20px;
  padding:26px 24px;margin:30px 0;text-align:center;color:#fff}
.post-cta h3{font-family:"Baloo 2";font-weight:800;font-size:22px;color:#fff;margin:0 0 6px}
.post-cta p{color:#CDC6E0;font-weight:600;margin:0 0 16px;font-size:15px}
.post-cta .btn-cta{display:inline-flex}

/* steps */
.bsteps{list-style:none;padding:0;margin:18px 0 24px;counter-reset:bs}
.bsteps li{counter-increment:bs;position:relative;padding:0 0 14px 44px;font-weight:600}
.bsteps li::before{content:counter(bs);position:absolute;left:0;top:-2px;width:30px;height:30px;
  display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;font-family:"Baloo 2";font-weight:800;font-size:15px}

.faq-q{margin:0 0 10px;border:1px solid #F0E9DD;border-radius:12px;background:#fff;padding:14px 16px}
.faq-q summary{font-family:"Baloo 2";font-weight:700;color:var(--ink);cursor:pointer;font-size:16px}
.faq-q p{margin:10px 0 0;font-size:15.5px;color:var(--muted);font-weight:500}

/* blog hub cards */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:24px}
.hub-card{display:block;background:var(--card);border:1px solid #F0E9DD;border-radius:18px;padding:20px;
  box-shadow:var(--shadow-soft);transition:transform .16s,box-shadow .16s}
.hub-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px -16px rgba(124,92,252,.45)}
.hub-card h2{font-family:"Baloo 2";font-weight:800;font-size:19px;color:var(--ink);margin:0 0 6px;letter-spacing:0}
.hub-card p{font-size:14.5px;color:var(--muted);font-weight:600;margin:0}
.hub-card .tag{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.post-foot{margin:34px 0 0;padding-top:22px;border-top:1px solid #F0E9DD}
.post-foot h3{font-family:"Baloo 2";font-weight:800;font-size:17px;color:var(--ink);margin:0 0 10px}
.post-foot a{display:block;color:var(--accent-press);font-weight:700;margin:0 0 7px;box-shadow:none}