/* ================================================================
   PayStubCheck — blog.css
   Blog index and article styles
   ================================================================ */

/* ── BLOG HERO ─────────────────────────────────────────────────── */
.blog-hero {
  background: var(--text);
  padding: 120px 5% 72px;
  text-align: center;
}
.blog-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}
.blog-hero-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}
.blog-hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.58);
  line-height: 1.72;
}

/* ── BLOG INDEX ─────────────────────────────────────────────────── */
.blog-index-outer {
  padding: 72px 5%;
  max-width: 900px;
  margin: 0 auto;
}
.blog-index-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── BLOG CARD ──────────────────────────────────────────────────── */
.blog-card {
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
}
.blog-card:first-child { padding-top: 0; }
.blog-card:last-child { border-bottom: none; }

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.blog-card-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--green-dark);
  background: var(--green-light);
  padding: 3px 10px;
  border-radius: 100px;
}
.blog-card-date {
  font-size: 12px;
  color: var(--text-3);
}
.blog-card-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}
.blog-card-title a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}
.blog-card-title a:hover { color: var(--green-dark); }
.blog-card-excerpt {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.68;
  margin-bottom: 14px;
  max-width: 680px;
}
.blog-card-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green-dark);
  text-decoration: none;
  transition: color 0.2s;
}
.blog-card-link:hover { color: var(--text); }

/* ── BLOG ARTICLE ───────────────────────────────────────────────── */
.article-outer {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 5% 96px;
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  text-decoration: none;
  margin-bottom: 40px;
  transition: color 0.2s;
}
.article-back:hover { color: var(--text); }

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.article-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--green-dark);
  background: var(--green-light);
  padding: 3px 10px;
  border-radius: 100px;
}
.article-date { font-size: 12px; color: var(--text-3); }

.article-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(30px, 4.5vw, 46px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 20px;
}
.article-intro {
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.72;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

/* Article body typography */
.article-body h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  margin: 44px 0 16px;
  line-height: 1.2;
}
.article-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 28px 0 12px;
}
.article-body p {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.78;
  margin-bottom: 20px;
}
.article-body ul, .article-body ol {
  margin: 0 0 20px 20px;
}
.article-body li {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.72;
  margin-bottom: 8px;
}
.article-body strong { color: var(--text); font-weight: 700; }
.article-body a { color: var(--green-dark); text-decoration: underline; }
.article-body a:hover { color: var(--text); }
.article-cta-box .btn-primary {
  color: #fff !important;
}

/* Callout box */
.article-callout {
  background: var(--green-light);
  border-left: 3px solid var(--green-dark);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  margin: 28px 0;
}
.article-callout p {
  margin-bottom: 0;
  font-size: 15px;
  color: var(--text);
}
.article-callout strong { color: var(--green-xdark); }

/* CTA box inline */
.article-cta-box {
  background: var(--text);
  border-radius: 16px;
  padding: 28px 32px;
  margin: 40px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.article-cta-box-text { color: #fff; font-size: 16px; font-weight: 600; line-height: 1.5; }
.article-cta-box-sub { color: rgba(255,255,255,0.55); font-size: 13px; margin-top: 4px; font-weight: 400; }

/* Article footer */
.article-footer {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.article-footer-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-3);
  margin-bottom: 16px;
}
.article-related {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.article-related a {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.article-related a:hover { color: var(--green-dark); }

/* ── BLOG CTA STRIP ─────────────────────────────────────────────── */
.blog-cta-strip {
  background: var(--green-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 40px 5%;
}
.blog-cta-strip-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.blog-cta-strip-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.blog-cta-strip-sub {
  font-size: 14px;
  color: var(--text-3);
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .blog-hero { padding: 100px 5% 52px; }
  .article-outer { padding: 60px 5% 72px; }
  .article-cta-box { flex-direction: column; text-align: center; }
  .article-cta-box .btn-primary { width: 100%; justify-content: center; }
  .blog-cta-strip-inner { flex-direction: column; }
  .blog-cta-strip-inner .btn-primary { width: 100%; justify-content: center; }
}

/* ================================================================
   Quick Answer box — sits directly under article intro.
   Answers the title question immediately (SEO featured-snippet bait
   + better UX for scanners). Added in the comprehensive build.
   ================================================================ */
.article-quickanswer {
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green-pale) 100%);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  padding: 24px 28px;
  margin: 0 0 44px;
  position: relative;
}
.article-quickanswer-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--green-xdark);
  margin-bottom: 10px;
}
.article-quickanswer-label svg { width: 14px; height: 14px; }
.article-quickanswer p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
  font-weight: 500;
}
.article-quickanswer strong { color: var(--green-xdark); font-weight: 700; }

/* Second / mid-article CTA uses the existing .article-cta-box styling.
   Key-takeaways list at article end. */
.article-takeaways {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 30px;
  margin: 44px 0 8px;
}
.article-takeaways-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-takeaways ul { margin: 0; padding-left: 4px; list-style: none; }
.article-takeaways li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}
.article-takeaways li:last-child { margin-bottom: 0; }
.article-takeaways li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 15px; height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a9004' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

@media (max-width: 767px) {
  .article-quickanswer { padding: 20px 22px; }
  .article-quickanswer p { font-size: 15.5px; }
  .article-takeaways { padding: 22px 24px; }
}

/* ================================================================
   STAGE 4 — Magazine blog system (index + post). Desktop + mobile.
   ================================================================ */
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}

/* reading progress bar */
.reading-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--green),var(--orange));transition:width .1s linear}

/* ---------- POST: hero band ---------- */
.post-hero{background:linear-gradient(150deg,var(--green-light),var(--bg) 72%);border-bottom:1px solid var(--border)}
.post-hero-inner{max-width:1180px;margin:0 auto;padding:92px 5% 38px}
.post-crumb{font-size:13px;color:var(--text-3);font-weight:500}
.post-crumb a{color:var(--text-3);text-decoration:none}
.post-crumb a:hover{color:var(--green-xdark)}
.post-tag{display:inline-block;margin-top:18px;background:var(--green-light);color:var(--green-xdark);
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 13px;border-radius:100px;border:1px solid var(--border-2)}
.post-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(30px,4.6vw,50px);
  letter-spacing:-.03em;line-height:1.06;margin-top:16px;max-width:20ch;color:var(--text)}
.post-byline{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:13.5px;color:var(--text-3);font-weight:500}
.post-byline .post-av{width:32px;height:32px;border-radius:50%;background:var(--green-xdark);display:grid;place-items:center;
  color:var(--green-light);font-family:'Bricolage Grotesque';font-weight:700;font-size:13px}
.post-byline .mono{color:var(--text-2)}

/* ---------- POST: layout (reading column + sticky rail) ---------- */
.post-layout{max-width:1180px;margin:0 auto;padding:40px 5% 0;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:54px;align-items:start}
.post-main{max-width:680px;min-width:0}
.post-rail{position:sticky;top:24px}
@media (max-width:980px){.post-layout{grid-template-columns:1fr;gap:0}.post-rail{display:none}}

/* reading column typography */
.post-main .article-intro{font-size:19px;line-height:1.7;color:var(--text);margin:0 0 26px;font-weight:400}
.post-main .article-body{font-size:17.5px;line-height:1.78;color:var(--text)}
.post-main .article-body h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:25px;letter-spacing:-.02em;color:var(--text);margin:36px 0 14px}
.post-main .article-body h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--text);margin:26px 0 10px}
.post-main .article-body p{margin-bottom:20px}
.post-main .article-body ul{margin:0 0 22px;padding-left:4px;list-style:none}
.post-main .article-body li{position:relative;padding-left:26px;margin-bottom:11px;line-height:1.6}
.post-main .article-body li::before{content:"";position:absolute;left:0;top:7px;width:15px;height:15px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a9004' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}

/* closing CTA band */
.blog-cta-band{margin:40px 0 0;background:linear-gradient(135deg,var(--green-xdark),#1B3554);border-radius:24px;padding:38px 34px;text-align:center;position:relative;overflow:hidden}
.blog-cta-band::before{content:"";position:absolute;top:-80px;right:-50px;width:280px;height:280px;background:radial-gradient(circle,rgba(200, 165, 104, .34),transparent 65%)}
.blog-cta-band h3{position:relative;color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1.1}
.blog-cta-band p{position:relative;color:#F1E8D8;font-size:14.5px;margin-top:8px}
.blog-cta-band a{position:relative;display:inline-block;margin-top:22px;background:var(--green);color:#fff;font-weight:700;font-size:15px;padding:15px 28px;border-radius:14px;box-shadow:0 8px 22px rgba(27, 53, 84, .42);text-decoration:none;transition:transform .2s}
.blog-cta-band a:hover{transform:translateY(-2px)}

/* ---------- POST: sticky rail card ---------- */
.post-rail-card{background:var(--card);border:1px solid var(--border-2);border-radius:22px;padding:22px;box-shadow:var(--shadow-md,0 16px 40px rgba(14, 30, 51, .10))}
.post-rail-mini{background:linear-gradient(150deg,var(--green-pale,#F6F1E9),var(--card));border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:16px}
.post-rail-mini-h{background:var(--green-xdark);height:22px;border-radius:14px 14px 6px 6px;margin:-14px -14px 12px}
.post-rail-bar{height:6px;border-radius:4px;background:var(--green-light);margin-bottom:7px}
.post-rail-bar.w80{width:80%}.post-rail-bar.w55{width:55%}
.post-rail-net{margin-top:9px;background:var(--green-light);border-radius:8px;padding:8px 10px;display:flex;justify-content:space-between;align-items:center}
.post-rail-net .l{font-size:8.5px;font-weight:700;color:var(--green-xdark);letter-spacing:.05em}
.post-rail-net .v{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:var(--green-xdark)}
.post-rail-t{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;color:var(--text);letter-spacing:-.015em}
.post-rail-p{font-size:13.5px;color:var(--text-2);margin-top:7px;line-height:1.5}
.post-rail-price{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:15px;color:var(--text);margin-top:14px}
.post-rail-price small{font-family:'DM Sans';font-weight:400;font-size:12px;color:var(--text-3)}
.post-rail-go{display:block;text-align:center;margin-top:14px;background:var(--green);color:#fff;font-weight:700;font-size:14.5px;padding:13px;border-radius:13px;box-shadow:0 6px 16px rgba(27, 53, 84, .32);text-decoration:none;transition:transform .2s}
.post-rail-go:hover{transform:translateY(-2px)}
.post-rail-trust{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.post-rail-trust span{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3);font-weight:500}
.post-rail-trust svg{width:13px;height:13px;color:var(--green)}

/* ---------- VIDEO FACADE ---------- */
.yt{margin:30px 0;border-radius:18px;overflow:hidden;box-shadow:0 16px 40px rgba(14, 30, 51, .10);border:1px solid var(--border-2)}
.yt[hidden]{display:none}
.yt-frame{position:relative;aspect-ratio:16/9;background:linear-gradient(150deg,#0E1E33,#1B3554);cursor:pointer;display:grid;place-items:center;overflow:hidden;background-size:cover;background-position:center}
.yt-frame::after{content:"";position:absolute;inset:0;background:rgba(14, 30, 51, .30)}
.yt-play{position:relative;z-index:1;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 8px 30px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.32,.72,0,1)}
.yt-frame:hover .yt-play{transform:scale(1.08)}
.yt-play svg{width:29px;height:29px;color:#0E1E33;margin-left:4px}
.yt-label{position:absolute;z-index:1;bottom:15px;left:18px;color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.yt-dot{width:18px;height:18px;border-radius:5px;background:#ff0000;display:grid;place-items:center}
.yt-dot svg{width:11px;height:11px;color:#fff}
.yt-badge{position:absolute;z-index:1;top:14px;right:16px;background:rgba(255,255,255,.16);color:#F1E8D8;font-size:10.5px;font-weight:700;letter-spacing:.05em;padding:5px 10px;border-radius:7px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.yt-caption{padding:11px 16px;font-size:12.5px;color:var(--text-3);background:var(--card);text-align:center}
.yt iframe{display:block;width:100%;aspect-ratio:16/9;border:0}

/* ---------- POST: related cards ---------- */
.post-related-sec{max-width:1180px;margin:60px auto 64px;padding:0 5%}
.post-related-h{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;color:var(--text);letter-spacing:-.02em;margin-bottom:20px}
.post-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post-rel-card{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm,0 2px 8px rgba(14, 30, 51, .05));transition:transform .3s cubic-bezier(.32,.72,0,1),box-shadow .3s;text-decoration:none;display:block}
.post-rel-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md,0 16px 40px rgba(14, 30, 51, .12))}
.post-rel-top{display:block;height:7px;background:linear-gradient(90deg,var(--green),var(--orange))}
.post-rel-b{display:block;padding:20px 22px 22px}
.post-rel-tag{display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green-xdark)}
.post-rel-title{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:16.5px;line-height:1.22;letter-spacing:-.015em;color:var(--text);margin-top:9px}
.post-rel-read{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;color:var(--green-xdark)}
@media (max-width:840px){.post-related-grid{grid-template-columns:1fr}}

@media (max-width:767px){
  .post-main .article-intro{font-size:17.5px}
  .post-main .article-body{font-size:16.5px}
  .blog-cta-band{border-radius:18px;padding:30px 24px}
  .yt{border-radius:14px}
}
@media (prefers-reduced-motion:reduce){.reading-progress{transition:none}}

/* ================================================================
   Magazine INDEX (featured lead + filters + grid)
   ================================================================ */
.blog-mag{max-width:1180px;margin:0 auto;padding:0 5% 60px}
.blog-mag-head{padding:96px 0 6px}
.blog-mag-head .kick{font-size:12px;font-weight:700;color:var(--green-xdark);letter-spacing:.1em;text-transform:uppercase}
.blog-mag-head h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(34px,5vw,52px);letter-spacing:-.025em;margin-top:10px;color:var(--text)}
.blog-mag-head p{font-size:17px;color:var(--text-2);margin-top:10px;max-width:60ch}

.blog-lead{margin-top:28px;display:grid;grid-template-columns:1.15fr .85fr;background:var(--card);border:1px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-md,0 16px 40px rgba(14, 30, 51, .10));transition:transform .3s cubic-bezier(.32,.72,0,1),box-shadow .3s;text-decoration:none}
.blog-lead:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(14, 30, 51, .16)}
.blog-lead-body{padding:38px 40px;display:flex;flex-direction:column;justify-content:center}
.blog-lead-tag{align-self:flex-start;background:var(--green-light);color:var(--green-xdark);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:100px;border:1px solid var(--border-2)}
.blog-lead h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(26px,3.2vw,38px);letter-spacing:-.025em;line-height:1.05;margin-top:16px;color:var(--text)}
.blog-lead p{font-size:15.5px;color:var(--text-2);margin-top:14px;line-height:1.6}
.blog-lead-more{margin-top:22px;display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--green-xdark);font-size:15px}
.blog-lead-art{position:relative;background:linear-gradient(150deg,var(--green-xdark),#1B3554);display:grid;place-items:center;padding:30px;overflow:hidden}
.blog-lead-art::before{content:"";position:absolute;top:-60px;right:-60px;width:260px;height:260px;background:radial-gradient(circle,rgba(200, 165, 104, .4),transparent 65%)}
.blog-lead-doc{position:relative;width:200px;background:var(--card);border-radius:14px;box-shadow:0 24px 50px rgba(0,0,0,.3);padding:16px;transform:rotate(-4deg)}
.blog-lead-doc .h{background:var(--green-xdark);height:24px;border-radius:14px 14px 6px 6px;margin:-16px -16px 12px}
.blog-lead-bar{height:7px;border-radius:4px;background:var(--green-light);margin-bottom:8px}
.blog-lead-bar.w80{width:80%}.blog-lead-bar.w60{width:60%}.blog-lead-bar.w40{width:40%}
.blog-lead-net{margin-top:10px;background:var(--green-light);border-radius:8px;padding:8px 10px;display:flex;justify-content:space-between;align-items:center}
.blog-lead-net .l{font-size:8px;font-weight:700;color:var(--green-xdark);letter-spacing:.05em}
.blog-lead-net .v{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:var(--green-xdark)}
@media (max-width:760px){.blog-lead{grid-template-columns:1fr}.blog-lead-art{order:-1;min-height:190px}.blog-lead-body{padding:28px}}

.blog-filters{display:flex;gap:10px;margin:34px 0 0;flex-wrap:wrap;position:sticky;top:0;background:var(--bg);padding:14px 0;z-index:20}
.blog-chip{background:var(--card);border:1.5px solid var(--border-2);color:var(--text-2);font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:100px;cursor:pointer;transition:all .2s cubic-bezier(.32,.72,0,1);font-family:inherit}
.blog-chip:hover{border-color:var(--green)}
.blog-chip.on{background:var(--green-xdark);border-color:var(--green-xdark);color:#fff}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px;padding-bottom:10px}
.blog-card2{background:var(--card);border:1px solid var(--border);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm,0 2px 8px rgba(14, 30, 51, .05));transition:transform .3s cubic-bezier(.32,.72,0,1),box-shadow .3s,border-color .25s;text-decoration:none}
.blog-card2:hover{transform:translateY(-5px);box-shadow:var(--shadow-md,0 16px 40px rgba(14, 30, 51, .12));border-color:var(--border-2)}
.blog-card2-top{height:8px;background:linear-gradient(90deg,var(--green),var(--orange))}
.blog-card2-b{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.blog-card2-tag{align-self:flex-start;background:var(--green-pale,#F6F1E9);color:var(--green-xdark);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:7px;border:1px solid var(--border)}
.blog-card2 h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:18.5px;letter-spacing:-.015em;line-height:1.2;margin-top:14px;color:var(--text)}
.blog-card2 p{font-size:13.5px;color:var(--text-2);margin-top:9px;line-height:1.55;flex:1}
.blog-card2-meta{display:flex;align-items:center;justify-content:space-between;margin-top:18px;font-size:12px;color:var(--text-3)}
.blog-card2-read{color:var(--green-xdark);font-weight:700}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.blog-grid{grid-template-columns:1fr}}

/* video slot — empty/placeholder state (no video ID yet) */
.yt-empty .yt-frame{cursor:default}
.yt-empty .yt-play{opacity:.9}
.yt-empty .yt-badge{background:rgba(255,255,255,.14)}


/* Contextual research cross-links */
.psc-related-guides{margin:34px 0;padding:24px;border:1px solid var(--border,#F4EFE7);border-radius:18px;background:#F6F1E9}.psc-related-guides h2{margin:0 0 8px;font-family:'Bricolage Grotesque',sans-serif;font-size:24px;color:var(--text,#0E1E33)}.psc-related-guides p{margin:0 0 16px}.psc-related-guide-links{display:flex;flex-wrap:wrap;gap:9px}.psc-related-guide-links a{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border:1px solid var(--border-2,#F1E8D8);border-radius:10px;background:#fff;color:var(--green-dark,#1B3554);font-size:13px;font-weight:700;text-decoration:none}.psc-related-guide-links a:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(14, 30, 51, .08)}