/* ─────────────────────────────────────────────────────────────
   Nova AI Ops — Blog theme
   Shared stylesheet for every /blog/* article page.
   ───────────────────────────────────────────────────────────── */

/* Dark canvas */
body.blog-dark{background:#04080c !important;color:#e6edf5;}

/* ─── Ambient: fixed grid + two drifting green orbs ─── */
body.blog-dark::before{
  content:"";position:fixed;inset:-2px 0 0 0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(88,217,0,0.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(88,217,0,0.07) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 55% at 50% 12%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 12%,#000 30%,transparent 80%);
  animation:cin-grid-pan 30s linear infinite;
}
@keyframes cin-grid-pan{to{background-position:64px 64px,64px 64px;}}

body.blog-dark::after{
  content:"";position:fixed;top:-120px;left:-80px;width:520px;height:520px;
  border-radius:50%;filter:blur(80px);opacity:0.55;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(88,217,0,0.6),transparent 70%);
  pointer-events:none;z-index:0;animation:cin-orb-a 16s ease-in-out infinite;
}
.blog-article::after,.blog-listing::after{
  content:"";position:fixed;bottom:-100px;right:-80px;width:560px;height:560px;
  border-radius:50%;filter:blur(80px);opacity:0.5;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(34,197,94,0.45),transparent 70%);
  pointer-events:none;z-index:0;animation:cin-orb-b 20s ease-in-out infinite;
}
@keyframes cin-orb-a{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(60px,40px) scale(1.1);}}
@keyframes cin-orb-b{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-60px,-40px) scale(1.08);}}

/* ─── Article — centered column ─── */
.blog-article{
  position:relative;z-index:1;
  max-width:860px;
  margin:0 auto;
  padding:96px 32px 100px;
  background:transparent !important;
  isolation:isolate;
  counter-reset: blog-section;
}
.blog-article > *{position:relative;z-index:2;}

/* ─── Hero: meta + h1 + subtitle — left-aligned editorial ─── */
.blog-meta{
  display:flex;align-items:center;justify-content:flex-start;
  gap:12px;margin-bottom:20px;flex-wrap:wrap;
}
.blog-meta span{font-size:13px;color:rgba(226,232,240,0.55) !important;}
.blog-meta .tag{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(88,217,0,0.14) !important;color:#9fe870 !important;
  border:1px solid rgba(88,217,0,0.45);
  padding:5px 14px;border-radius:999px;font-weight:700;font-size:11px;
  letter-spacing:0.06em;text-transform:uppercase;backdrop-filter:blur(10px);
}
.blog-meta .tag::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#58d900;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(88,217,0,0.7);animation:cin-dot-pulse 1.6s ease-out infinite;
}
@keyframes cin-dot-pulse{
  0%{box-shadow:0 0 0 0 rgba(88,217,0,0.7);}
  70%{box-shadow:0 0 0 10px rgba(88,217,0,0);}
  100%{box-shadow:0 0 0 0 rgba(88,217,0,0);}
}

.blog-article h1{
  font-size:clamp(36px,5.2vw,64px) !important;font-weight:900 !important;
  color:#f1f5f9 !important;line-height:1.04 !important;letter-spacing:-0.04em !important;
  margin-bottom:20px !important;text-align:left;
  text-shadow:0 4px 60px rgba(0,0,0,0.4);
}
.blog-article h1 em{
  font-style:normal;display:inline-block;position:relative;
  background:linear-gradient(135deg,#9fe870 0%,#58d900 45%,#3ba800 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.blog-article h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:5px;border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(88,217,0,0.85),transparent);
  box-shadow:0 0 24px rgba(88,217,0,0.7);
  transform:scaleX(0);transform-origin:left;
  animation:cin-underline 1.4s cubic-bezier(.2,.7,.2,1) 0.6s forwards;
}
@keyframes cin-underline{to{transform:scaleX(1);}}

.blog-article .subtitle{
  color:rgba(226,232,240,0.78) !important;font-size:19px !important;
  line-height:1.55;margin-bottom:40px;
  text-align:left;max-width:720px;margin-left:0;margin-right:0;
  font-weight:400;letter-spacing:-0.005em;
}

/* ─── Hero art banner (matches blog-index thumbnails) ─── */
.blog-hero-art{
  position:relative;width:100%;aspect-ratio:16/6.5;
  margin:0 0 36px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(88,217,0,0.28);border-radius:20px;
  background:linear-gradient(135deg,#04140a 0%,#0a2615 50%,#113a1f 100%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.8),0 0 50px -24px rgba(88,217,0,0.35),0 0 0 1px rgba(255,255,255,0.03) inset;
}
.blog-hero-art::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(159,232,112,0.12) 1px,transparent 1px);
  background-size:18px 18px;opacity:0.55;
}
.blog-hero-art::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(88,217,0,0.7),transparent);
}
.blog-hero-art svg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;}
.blog-hero-art[data-cat="agentic"]{background:linear-gradient(135deg,#041610 0%,#082a1a 55%,#0f4126 100%);}
.blog-hero-art[data-cat="buyer"]{background:linear-gradient(135deg,#04140a 0%,#0c2a16 55%,#10391c 100%);}
.blog-hero-art[data-cat="compare"]{background:linear-gradient(135deg,#051612 0%,#0a2d20 55%,#0e3a28 100%);}
.blog-hero-art[data-cat="tools"]{background:linear-gradient(135deg,#04120a 0%,#082610 55%,#0e3419 100%);}
.blog-hero-art[data-cat="practices"]{background:linear-gradient(135deg,#041811 0%,#0a2d1d 55%,#123f26 100%);}
.blog-hero-art[data-cat="mttr"]{background:linear-gradient(135deg,#06130e 0%,#0a2a1a 55%,#123a23 100%);}
.blog-hero-art[data-cat="alerts"]{background:linear-gradient(135deg,#07110a 0%,#0a2814 55%,#10381c 100%);}
.blog-hero-art[data-cat="k8s"]{background:linear-gradient(135deg,#051610 0%,#0a2c1e 55%,#0f3d2a 100%);}
.blog-hero-art[data-cat="observability"]{background:linear-gradient(135deg,#04140a 0%,#082815 55%,#0e3a22 100%);}
.blog-hero-art[data-cat="cloud"]{background:linear-gradient(135deg,#051512 0%,#0a2820 55%,#0e3a2c 100%);}
@media(max-width:700px){.blog-hero-art{aspect-ratio:16/9;border-radius:14px;margin-bottom:28px;}}

/* Thin rule separating hero from body */
.blog-article .toc,.blog-article .stat-highlight{margin-top:0;}

/* ─── TOC glass card ─── */
.blog-article .toc{
  background:linear-gradient(180deg,rgba(15,23,42,0.7),rgba(10,15,25,0.88)) !important;
  border:1px solid rgba(88,217,0,0.3) !important;border-radius:16px !important;
  padding:22px 28px !important;margin-bottom:52px !important;
  position:relative;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.8),0 0 40px -22px rgba(88,217,0,0.3);
  backdrop-filter:blur(10px);
}
.blog-article .toc::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(88,217,0,0.7),transparent);
}
.blog-article .toc h4{
  color:#fff !important;font-size:10px !important;font-weight:800;
  letter-spacing:0.16em;text-transform:uppercase;margin-bottom:12px;
  color:rgba(159,232,112,0.8) !important;
}
.blog-article .toc ol,.blog-article .toc ul{
  margin:0;padding-left:18px;
}
.blog-article .toc li{margin-bottom:6px;}
.blog-article .toc a{color:#9fe870 !important;font-weight:500;font-size:14px;transition:color 0.2s;}
.blog-article .toc a:hover{color:#c8ff88 !important;text-decoration:underline;}

/* ─── Section headings with left accent ─── */
.blog-article h2{
  color:#fff !important;font-weight:900 !important;
  font-size:clamp(22px,2.4vw,30px) !important;
  letter-spacing:-0.025em;line-height:1.2;
  margin:52px 0 14px;
  padding-left:16px;
  border-left:3px solid rgba(88,217,0,0.75);
}
.blog-article h3{
  color:#e2e8f0 !important;font-weight:800 !important;
  font-size:clamp(17px,1.8vw,20px) !important;
  margin:30px 0 10px;letter-spacing:-0.01em;
}

/* ─── Body copy ─── */
.blog-article p,.blog-article li{
  color:rgba(226,232,240,0.78) !important;line-height:1.8;font-size:16.5px;
}
.blog-article p{margin-bottom:16px;}
.blog-article ul,.blog-article ol{padding-left:24px;margin-bottom:20px;}
.blog-article ul:not(.toc ol):not(.toc ul) li,.blog-article ol:not(.toc ol) li{margin-bottom:8px;}
.blog-article strong{color:#9fe870 !important;}
.blog-article a:not(.btn-primary){
  color:#9fe870;text-decoration:none;
  border-bottom:1px solid rgba(88,217,0,0.35);
  transition:color 0.2s,border-color 0.2s;
}
.blog-article a:not(.btn-primary):hover{color:#c8ff88;border-bottom-color:rgba(88,217,0,0.8);}

/* ─── Blockquote ─── */
.blog-article blockquote{
  border-left:3px solid #58d900 !important;
  background:rgba(88,217,0,0.06) !important;
  padding:20px 28px;margin:32px 0;border-radius:0 12px 12px 0;
}
.blog-article blockquote p{
  color:rgba(226,232,240,0.9) !important;font-style:italic;
  margin:0;font-size:17px;line-height:1.7;
}

/* Closing pullquote — a slightly more prominent variant */
.blog-article blockquote.blog-closing-quote{
  border-left-width:4px !important;
  background:linear-gradient(180deg,rgba(88,217,0,0.09),rgba(88,217,0,0.04)) !important;
  padding:24px 32px;
  box-shadow:0 0 40px -20px rgba(88,217,0,0.4),inset 0 1px 0 rgba(255,255,255,0.03);
}
.blog-article blockquote.blog-closing-quote p{
  font-style:normal !important;font-weight:600 !important;
  font-size:19px !important;line-height:1.5 !important;
  color:#f5f9ef !important;letter-spacing:-0.012em;
}

/* Stat number + label */
.blog-article .stat-card .stat-number{
  display:block;font-size:34px;font-weight:900;
  background:linear-gradient(135deg,#c6f58e,#9fe870,#58d900);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-0.02em;line-height:1.1;
}
.blog-article .stat-card .stat-label{
  display:block;margin-top:6px;font-size:12.5px;font-weight:700;
  color:rgba(226,232,240,0.7);letter-spacing:0.02em;line-height:1.4;
}

/* ─── Stat cards ─── */
.blog-article .stat-highlight{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:40px 0;}
.blog-article .stat-card{
  position:relative;text-align:center;padding:28px 24px;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(15,23,42,0.72),rgba(10,15,25,0.88)) !important;
  border:1px solid rgba(88,217,0,0.3) !important;
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.8),0 0 50px -24px rgba(88,217,0,0.32);
  backdrop-filter:blur(10px);
}
.blog-article .stat-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(88,217,0,0.7),transparent);
}
.blog-article .stat-card .num{
  font-size:44px;font-weight:900;color:#9fe870 !important;
  letter-spacing:-0.025em;text-shadow:0 0 24px rgba(88,217,0,0.45);
  font-variant-numeric:tabular-nums;
}
.blog-article .stat-card .label{
  color:rgba(226,232,240,0.55) !important;font-weight:800;font-size:11px;
  text-transform:uppercase;letter-spacing:0.1em;margin-top:8px;
}

/* ─── Blog CTA card ─── */
.blog-article .blog-cta{
  position:relative;overflow:hidden;border-radius:18px !important;
  background:linear-gradient(180deg,rgba(15,23,42,0.78),rgba(10,15,25,0.92)) !important;
  border:1px solid rgba(88,217,0,0.4) !important;
  padding:48px 40px;text-align:center;margin:64px 0 40px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,0.9),0 0 80px -20px rgba(88,217,0,0.45);
  backdrop-filter:blur(12px);
}
.blog-article .blog-cta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(88,217,0,0.85),transparent);
}
.blog-article .blog-cta h3{color:#fff !important;font-size:24px;font-weight:900;margin-bottom:12px;}
.blog-article .blog-cta p{color:rgba(226,232,240,0.72) !important;margin-bottom:24px;}
.blog-article .blog-cta .btn-primary{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#9fe870 0%,#58d900 50%,#3ba800 100%) !important;
  color:#04140a !important;padding:14px 32px !important;border-radius:999px !important;
  font-weight:800 !important;font-size:15px;border:none !important;text-decoration:none;
  border-bottom:none !important;
  box-shadow:0 18px 40px -16px rgba(88,217,0,0.75),0 0 0 1px rgba(255,255,255,0.15) inset,0 0 28px -8px rgba(88,217,0,0.6);
  transition:transform 0.35s cubic-bezier(.2,.7,.2,1),box-shadow 0.35s ease;
}
.blog-article .blog-cta .btn-primary::after{
  content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.55) 50%,transparent 70%);
  transform:skewX(-18deg);pointer-events:none;
  animation:cin-cta-shine 4.5s ease-in-out 1.2s infinite;
}
@keyframes cin-cta-shine{0%{left:-60%;}40%{left:140%;}100%{left:140%;}}
.blog-article .blog-cta .btn-primary:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 26px 56px -16px rgba(88,217,0,0.9),0 0 0 1px rgba(255,255,255,0.2) inset,0 0 40px -4px rgba(88,217,0,0.75);
}

/* ─── Subscribe box ─── */
.blog-article .subscribe-box{
  position:relative;overflow:hidden;border-radius:16px !important;
  background:linear-gradient(180deg,rgba(15,23,42,0.72),rgba(10,15,25,0.88)) !important;
  border:1px solid rgba(88,217,0,0.3) !important;
  padding:32px;text-align:center;margin:48px 0;
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.8);backdrop-filter:blur(10px);
}
.blog-article .subscribe-box::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(88,217,0,0.6),transparent);
}
.blog-article .subscribe-box h4{color:#fff !important;font-size:18px;font-weight:800;margin-bottom:8px;}
.blog-article .subscribe-box p{color:rgba(226,232,240,0.7) !important;font-size:14px;margin-bottom:18px;}
.blog-article .subscribe-box .email-row{display:flex;gap:8px;max-width:420px;margin:0 auto;}
.blog-article .subscribe-box input{
  flex:1;padding:11px 16px;border-radius:10px;font-size:14px;
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(88,217,0,0.3) !important;color:#fff !important;
  font-family:'Inter',sans-serif;outline:none;transition:border-color 0.2s;
}
.blog-article .subscribe-box input::placeholder{color:rgba(226,232,240,0.45);}
.blog-article .subscribe-box input:focus{border-color:#58d900 !important;box-shadow:0 0 0 3px rgba(88,217,0,0.2);}
.blog-article .subscribe-box button{
  padding:11px 22px;border:none;border-radius:10px;font-weight:800;font-size:14px;cursor:pointer;
  background:linear-gradient(135deg,#9fe870,#58d900) !important;color:#04140a !important;
  font-family:'Inter',sans-serif;transition:transform 0.2s,box-shadow 0.2s;
}
.blog-article .subscribe-box button:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(88,217,0,0.6);}

/* ─── Related posts ─── */
.blog-article .related-posts{margin:56px 0 32px;}
.blog-article .related-posts h4{
  color:#fff !important;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:0.14em;margin-bottom:14px;
  color:rgba(159,232,112,0.8) !important;
}
.blog-article .related-posts a{
  display:block;position:relative;padding:14px 18px;margin-bottom:10px;
  color:#9fe870 !important;font-weight:600;font-size:15px;
  background:linear-gradient(180deg,rgba(15,23,42,0.6),rgba(10,15,25,0.8));
  border:1px solid rgba(88,217,0,0.22);border-radius:10px;
  text-decoration:none;border-bottom:none !important;
  transition:border-color 0.25s,transform 0.25s,box-shadow 0.25s;
}
.blog-article .related-posts a::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(88,217,0,0.55),transparent);
}
.blog-article .related-posts a:hover{
  transform:translateX(4px);border-color:rgba(88,217,0,0.55);
  box-shadow:0 12px 28px -16px rgba(88,217,0,0.5);color:#c8ff88 !important;
}

/* ─── Scroll-triggered reveal (blog-reveal.js) ─── */
.blog-article h2,.blog-article h3,
.blog-article blockquote,.blog-article .stat-highlight,.blog-article .blog-cta,
.blog-article .subscribe-box,.blog-article .related-posts,.blog-article .toc{
  opacity:0;transform:translateY(12px);transition:opacity 0.55s ease,transform 0.55s ease;
}
.blog-article h2.is-revealed,.blog-article h3.is-revealed,
.blog-article blockquote.is-revealed,
.blog-article .stat-highlight.is-revealed,.blog-article .blog-cta.is-revealed,
.blog-article .subscribe-box.is-revealed,.blog-article .related-posts.is-revealed,
.blog-article .toc.is-revealed{opacity:1;transform:none;}

.blog-article h1,.blog-article .subtitle,.blog-article .blog-meta,
.blog-article p,.blog-article ul,.blog-article ol{opacity:1;transform:none;}

/* ─── Responsive ─── */
@media (max-width:800px){
  .blog-article{padding:110px 20px 70px;}
  .blog-article h1{font-size:clamp(28px,8vw,42px) !important;}
  .blog-article .subtitle{font-size:16px !important;max-width:100%;}
  .blog-article .stat-highlight{grid-template-columns:1fr;}
  .blog-article .blog-cta{padding:36px 24px;}
  .blog-article h2{font-size:clamp(20px,5vw,26px) !important;}
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion:reduce){
  body.blog-dark::before,body.blog-dark::after,
  .blog-article::after,.blog-listing::after,
  .blog-article h1 em::after,.blog-meta .tag::before,
  .blog-article .blog-cta .btn-primary::after{animation:none !important;}
  .blog-article h2,.blog-article h3,
  .blog-article blockquote,.blog-article .stat-highlight,.blog-article .blog-cta,
  .blog-article .subscribe-box,.blog-article .related-posts,.blog-article .toc{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Editorial layout pass — wider column, left-aligned hero, numbered
   sections, dropcap, off-center pullquotes, richer reveals
   ═══════════════════════════════════════════════════════════════════ */

/* Full-bleed hero art: breaks out of the 860px column to ~1080px */
@media (min-width: 1120px) {
  .blog-article .blog-hero-art {
    width: calc(100% + 200px);
    margin-left: -100px;
    margin-right: -100px;
    aspect-ratio: 16/5.5;
  }
}

/* Numbered section chips via CSS counter */
.blog-article h2 {
  counter-increment: blog-section;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-left: 0 !important;
}
.blog-article h2::before {
  content: counter(blog-section, decimal-leading-zero);
  flex-shrink: 0;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.55em;
  font-weight: 700;
  color: #9fe870;
  letter-spacing: 0.12em;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(88,217,0,0.12);
  border: 1px solid rgba(88,217,0,0.35);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.6s cubic-bezier(.2,.7,.2,1) 0.15s,
              transform 0.6s cubic-bezier(.2,.7,.2,1) 0.15s;
  align-self: center;
  white-space: nowrap;
}
.blog-article h2.is-revealed::before {
  opacity: 1;
  transform: translateX(0);
}
.blog-article h2 > span,
.blog-article h2 > a {
  flex: 1;
  min-width: 0;
}

/* Dropcap on the first paragraph after the TOC (or sim), applied to the
   post intro. Only at desktop widths so it never squeezes small screens. */
@media (min-width: 760px) {
  .blog-article .toc + p:first-letter,
  .blog-article .blog-sim + p:first-letter,
  .blog-article .blog-sim + h2 + p:first-letter {
    float: left;
    font-size: 4.4em;
    line-height: 0.88;
    font-weight: 900;
    padding: 6px 12px 0 0;
    margin: 4px 4px 0 0;
    background: linear-gradient(135deg, #c6f58e 0%, #58d900 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
  }
}

/* Link underline slide */
.blog-article p a:not(.btn-primary),
.blog-article li a:not(.btn-primary) {
  position: relative;
  background-image: linear-gradient(90deg, #9fe870, #9fe870);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 0.4s cubic-bezier(.2,.7,.2,1), color 0.3s ease;
}
.blog-article p a:not(.btn-primary):hover,
.blog-article li a:not(.btn-primary):hover {
  background-size: 100% 1px;
}

/* Alternating pullquote variants for visual rhythm */
.blog-article blockquote:not(.blog-closing-quote) {
  position: relative;
}
@media (min-width: 1120px) {
  /* Mid-article blockquotes push right and slightly overflow the column */
  .blog-article p + blockquote:not(.blog-closing-quote) {
    float: right;
    width: 340px;
    margin: 12px -100px 24px 28px !important;
    shape-outside: margin-box;
  }
  .blog-article p + blockquote:not(.blog-closing-quote) p {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }
}

/* Richer h2 reveal — subtle slide-in from left */
.blog-article h2 {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.75s cubic-bezier(.2,.7,.2,1),
              transform 0.75s cubic-bezier(.2,.7,.2,1);
}
.blog-article h2.is-revealed {
  opacity: 1;
  transform: none;
}

/* Add a tiny accent rule to the left of revealed section body (p after h2) */
.blog-article h2 + p::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, #9fe870, transparent);
  margin-bottom: 14px;
  opacity: 0;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: opacity 0.6s ease 0.3s, transform 0.7s cubic-bezier(.2,.7,.2,1) 0.3s;
}
.blog-article h2.is-revealed + p::before {
  opacity: 1;
  transform: none;
}

/* Ensure blog-sim reveals like the rest */
.blog-article .blog-sim {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1),
              transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.blog-article .blog-sim.is-revealed {
  opacity: 1;
  transform: none;
}

/* Pretty paragraph body — slightly bigger + tighter measure */
.blog-article p {
  max-width: 76ch;
}

/* Respect reduced-motion for new additions too */
@media (prefers-reduced-motion: reduce) {
  .blog-article h2,
  .blog-article h2::before,
  .blog-article h2 + p::before,
  .blog-article .blog-sim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .blog-article p a:not(.btn-primary) {
    transition: none !important;
  }
}

/* Mobile: drop the dropcap float, reset hero-art bleed, disable float-quote */
@media (max-width: 760px) {
  .blog-article .toc + p:first-letter,
  .blog-article .blog-sim + p:first-letter,
  .blog-article .blog-sim + h2 + p:first-letter {
    float: none !important;
    font-size: inherit !important;
    color: inherit !important;
    background: none !important;
    -webkit-text-fill-color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .blog-article h2 {
    gap: 12px;
  }
  .blog-article h2::before {
    font-size: 0.6em;
  }
}