/* ═══════════════════════════════════════════════════════════════════
   blog-static — Paver theme (dark SaaS system)
   Structure comes from platform/templates/blog-static/; this file
   themes it to Paver's landing-page tokens AND recreates the original
   Paver blog's card-grid layout language (uniform 3-col grid, inset
   thumbnails, category-colored pills, footer read-link) rather than
   the NPG reference's editorial-magazine layout — the two clients'
   designs diverge on purpose; only the shared HTML skeleton is common.

   The agent block catalog at the bottom (callout / comparison /
   checklist / disclaimer) is a hard contract with the blog agent's
   rewrite step — every client blog must style all of it.
   ═══════════════════════════════════════════════════════════════════ */

.lf-blog {
  /* ── theme tokens (lifted 1:1 from the site's own :root) ──────── */
  --blog-primary: #6366f1;        /* indigo brand */
  --blog-primary-light: #818cf8;  /* links, hover states */
  --blog-glow: rgba(99,102,241,0.15);
  --blog-ink: #0a0a0f;            /* page navy */
  --blog-ink-light: #111119;      /* footer band navy */
  --blog-card: #16161f;           /* card surface */
  --blog-card-hover: #1e1e2a;
  --blog-text: #f1f5f9;
  --blog-text-light: #94a3b8;
  --blog-muted: #64748b;
  --blog-border: rgba(255,255,255,0.08);
  --blog-border-light: rgba(255,255,255,0.12);
  --blog-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
  --blog-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --blog-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --blog-radius: 12px;
  --blog-radius-lg: 16px;
  --blog-transition: 0.22s ease;
  --blog-max-width: 1200px;
  --blog-prose-width: 760px;
  --blog-heading-transform: none;
  --blog-heading-weight: 700;
}

/* ── scaffolding ─────────────────────────────────────────────────── */
#lf-blog-main { font-family: var(--blog-font-body); color: var(--blog-text); line-height: 1.65; background: var(--blog-ink); }
#lf-blog-main *, #lf-blog-main *::before, #lf-blog-main *::after { box-sizing: border-box; }
#lf-blog-main a { text-decoration: none; color: inherit; }
#lf-blog-main ul { list-style: none; margin: 0; padding: 0; }
/* All four resets below are :where()-wrapped so they carry the specificity
   of a single class and never out-rank a real layout rule elsewhere in this
   file — an unwrapped ID selector here silently wins over any number of
   classes regardless of source order. This bit twice already: h1's
   margin:24px auto (hero centering) and .container's padding-top
   (article header) were both getting silently zeroed before this fix. */
.lf-blog :where(#lf-blog-main img) { max-width: 100%; height: auto; display: block; }
.lf-blog :where(#lf-blog-main h1, #lf-blog-main h2, #lf-blog-main h3, #lf-blog-main p) { margin: 0; }
.lf-blog :where(#lf-blog-main .container) { max-width: var(--blog-max-width); margin: 0 auto; padding: 0 24px; }

/* Paver-style pill tag above the H1. The template hardcodes {{SITE_NAME}}
   ("Paver") as this element's text — the original copy was "From the
   field". No token is available to override the text itself, so the
   real text node is collapsed (font-size:0) and the original copy is
   painted back in via ::after; ::before keeps the dot bullet, now with
   its own margin instead of flex gap so the invisible text node doesn't
   leave a stray double gap between them. */
.lf-blog .eyebrow {
  display: inline-flex; align-items: center;
  padding: 6px 16px; border-radius: 50px;
  border: 1px solid var(--blog-border-light);
  background: var(--blog-glow);
  font-size: 0;
  color: var(--blog-primary-light);
}
.lf-blog .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blog-primary-light); margin-right: 8px; flex-shrink: 0;
}
.lf-blog .eyebrow::after {
  content: 'From the field';
  font-size: 13px; font-weight: 500; letter-spacing: normal; text-transform: none;
}

/* category tag — real pill, color varies per category below */
.lf-blog .kicker {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 50px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--blog-glow); color: var(--blog-primary-light);
  border: 1px solid rgba(99,102,241,0.25);
}
.lf-blog .kicker.blue { background: rgba(34,211,238,0.1); color: #22d3ee; border-color: rgba(34,211,238,0.25); }

/* Paver's original per-category palette (TAG_COLORS) */
.lf-blog .card[data-cat="business"] .kicker,
.lf-blog .card[data-cat="contractor-software"] .kicker {
  background: rgba(34,211,238,0.1); color: #22d3ee; border-color: rgba(34,211,238,0.25);
}
.lf-blog .card[data-cat="industry"] .kicker,
.lf-blog .card[data-cat="job-tracking"] .kicker {
  background: rgba(52,211,153,0.1); color: #34d399; border-color: rgba(52,211,153,0.25);
}
.lf-blog .card[data-cat="proposals"] .kicker,
.lf-blog .card[data-cat="proposal-management"] .kicker,
.lf-blog .card[data-cat="digital-signatures"] .kicker {
  background: rgba(251,191,36,0.1); color: #fbbf24; border-color: rgba(251,191,36,0.25);
}
.lf-blog .card[data-cat="maintenance"] .kicker,
.lf-blog .card[data-cat="sealcoating"] .kicker,
.lf-blog .card[data-cat="line-striping"] .kicker {
  background: rgba(244,114,182,0.1); color: #f472b6; border-color: rgba(244,114,182,0.25);
}
.lf-blog .card[data-cat="concrete-estimating"] .kicker {
  background: rgba(168,139,250,0.12); color: #a78bfa; border-color: rgba(168,139,250,0.25);
}

.lf-blog .blog-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600;
  padding: 13px 28px; border-radius: 50px;
  background: var(--blog-gradient); color: #fff;
  transition: transform var(--blog-transition), box-shadow var(--blog-transition);
}
.lf-blog .blog-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(99,102,241,0.35); }

/* ── LISTING: hero masthead (centered, text-only — the original layout) ── */
.lf-blog .blog-hero {
  position: relative; color: var(--blog-text); overflow: hidden;
  background: var(--blog-ink);
  padding: 168px 24px 72px;
  text-align: center;
}
/* Dot grid lives on .bg itself (unblurred, crisp); the two glow layers
   are separate blurred pseudo-elements underneath it — matching the
   original's page-dot-overlay + hero-mesh-1 + hero-mesh-2 stack. Putting
   the dots in a blurred layer would smear them into nothing. */
.lf-blog .blog-hero .bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 24px 24px;
}
.lf-blog .blog-hero .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.lf-blog .blog-hero .bg::before {
  content: ''; position: absolute; inset: -5% -15% 20%;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(99,102,241,0.35), transparent 70%),
    radial-gradient(ellipse 500px 350px at 75% 60%, rgba(139,92,246,0.3), transparent 70%),
    radial-gradient(ellipse 400px 300px at 50% 80%, rgba(99,102,241,0.2), transparent 70%);
  filter: blur(70px);
  animation: lfBlogMesh1 18s ease-in-out infinite alternate;
}
.lf-blog .blog-hero .bg::after {
  content: ''; position: absolute; inset: 5% -10% 30%;
  background:
    radial-gradient(ellipse 550px 300px at 65% 25%, rgba(129,140,248,0.28), transparent 70%),
    radial-gradient(ellipse 450px 280px at 30% 70%, rgba(139,92,246,0.22), transparent 70%),
    radial-gradient(ellipse 350px 250px at 80% 50%, rgba(99,102,241,0.18), transparent 70%);
  filter: blur(80px);
  animation: lfBlogMesh2 24s ease-in-out infinite alternate;
}
@keyframes lfBlogMesh1 {
  0%   { transform: translateX(-8%) translateY(4%) rotate(-1.5deg); }
  33%  { transform: translateX(5%) translateY(-8%) rotate(1deg); }
  66%  { transform: translateX(-3%) translateY(6%) rotate(-0.5deg); }
  100% { transform: translateX(8%) translateY(-4%) rotate(1.5deg); }
}
@keyframes lfBlogMesh2 {
  0%   { transform: translateX(6%) translateY(-3%) rotate(1deg); }
  33%  { transform: translateX(-4%) translateY(7%) rotate(-1deg); }
  66%  { transform: translateX(3%) translateY(-5%) rotate(1.5deg); }
  100% { transform: translateX(-6%) translateY(4%) rotate(-0.5deg); }
}
.lf-blog .blog-hero .inner { position: relative; z-index: 1; }
/* Two-tone like the original's `Real talk for<br><span>paving pros</span>`:
   line 1 solid, line 2 gradient. No <br>/<span> available here (H1 is
   plain CMS text, escaped by the generator), so max-width forces the
   same two-line break and a hard-stop vertical gradient recolors only
   the bottom half — reads identically as long as both lines are the
   same height, which they are (fixed font-size/line-height, no wrap
   beyond 2 lines at this max-width).

   line-height needs real headroom: background-clip:text only paints
   inside the element's own box (2 × line-height here), and descenders
   on the last line can extend past a too-tight line box with no
   background left to clip against there — they render, just uncolored,
   which reads as the bottom of the text being cut off. 1.05 clipped
   the descenders on 'paving'/'pros'; 1.18 gives them room. */
.lf-blog .blog-hero h1 {
  font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(42px, 7vw, 80px); line-height: 1.18;
  margin: 24px auto; max-width: 13ch;
  background: linear-gradient(
    to bottom,
    var(--blog-text) 0%, var(--blog-text) 50%,
    #6366f1 50%, #8b5cf6 75%, #a78bfa 100%
  );
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lf-blog .blog-hero .sub {
  max-width: 560px; margin: 0 auto; color: var(--blog-text-light);
  font-size: 18px; line-height: 1.7;
}

/* featured post — full-width horizontal card, image left, sits normally
   below the hero copy (not docked/overlapping like the NPG reference) */
.lf-blog .feat-card {
  margin: 56px auto 0; max-width: var(--blog-max-width);
  display: flex; align-items: stretch; gap: 40px;
  background: var(--blog-card); color: var(--blog-text); text-align: left;
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius-lg);
  padding: 40px;
}
.lf-blog .feat-card .media {
  position: relative; width: 380px; min-height: 220px; flex-shrink: 0;
  border-radius: var(--blog-radius); overflow: hidden;
  background: var(--blog-card-hover); display: block;
}
.lf-blog .feat-card .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lf-blog .feat-card .media .kicker { position: absolute; top: 14px; left: 14px; z-index: 1; }
.lf-blog .feat-card .body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lf-blog .feat-card .meta { text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.lf-blog .feat-card h2 {
  font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(24px, 2.6vw, 28px); line-height: 1.3;
}
.lf-blog .feat-card h2 a { transition: color var(--blog-transition); }
.lf-blog .feat-card h2 a:hover { color: var(--blog-primary-light); }
.lf-blog .feat-card p { color: var(--blog-text-light); font-size: 15px; line-height: 1.7; margin: 16px 0 22px; max-width: 600px; flex: 1; }
.lf-blog .feat-card .read {
  display: inline-flex; align-items: center; gap: 6px;
  padding-top: 16px; border-top: 1px solid var(--blog-border);
  font-size: 13px; font-weight: 600; color: var(--blog-primary-light);
}
.lf-blog .feat-card .read::after { content: '→'; transition: transform var(--blog-transition); }
.lf-blog .feat-card .read:hover::after { transform: translateX(4px); }

/* ── LISTING: filter pills (new — the original had none; kept minimal
   so it doesn't read as new chrome, only shows with 2+ categories) ── */
.lf-blog .blog-filters { background: transparent; position: static; padding: 32px 0 0; }
.lf-blog .blog-filters .inner { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; overflow: visible; }
.lf-blog .filter {
  flex-shrink: 0; cursor: pointer;
  font-family: var(--blog-font-body); font-size: 13.5px; font-weight: 500;
  color: var(--blog-text-light);
  background: none; border: 1px solid transparent; border-radius: 50px;
  padding: 8px 18px;
  transition: var(--blog-transition);
}
.lf-blog .filter:hover { color: var(--blog-text); border-color: var(--blog-border-light); }
.lf-blog .filter.on { color: var(--blog-primary-light); background: var(--blog-glow); border-color: rgba(99,102,241,0.25); }

/* ── LISTING: card grid — uniform 3-up, inset thumbnail, footer read-link ── */
.lf-blog .blog-mag { padding: 56px 0 120px; background: var(--blog-ink); }
.lf-blog .cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; }
/* every card spans 4/12 regardless of the generator's size class — a
   uniform 3-column grid, matching the original (no varied tile sizes) */
.lf-blog .card, .lf-blog .card.lg, .lf-blog .card.md, .lf-blog .card.sm {
  grid-column: span 4;
}
.lf-blog .card {
  background: var(--blog-card); border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 0;
  transition: border-color var(--blog-transition), transform var(--blog-transition), box-shadow var(--blog-transition);
}
.lf-blog .card:hover { border-color: var(--blog-border-light); transform: translateY(-3px); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
/* thumbnail sits inset within the card's own padding (not edge-to-edge);
   the kicker pill is the media anchor's last child in markup — flex
   order flips it to render below the photo, above the title, matching
   the original's thumb → pill → title → excerpt → footer rhythm */
.lf-blog .card .media {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--blog-radius); background: var(--blog-card-hover);
}
.lf-blog .card .media img { width: 100%; object-fit: cover; aspect-ratio: 16/9; order: 1; transition: transform .5s ease; }
.lf-blog .card:hover .media img { transform: scale(1.04); }
.lf-blog .card .media .kicker { order: 2; position: static; align-self: flex-start; margin-top: 12px; }
.lf-blog .card .body { display: flex; flex-direction: column; flex: 1; padding: 0; margin-top: 16px; }
.lf-blog .card h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; font-size: 20px; }
.lf-blog .card h3 a { transition: color var(--blog-transition); }
.lf-blog .card h3 a:hover { color: var(--blog-primary-light); }
.lf-blog .card p { color: var(--blog-text-light); font-size: 14px; line-height: 1.7; margin-top: 8px; flex: 1; }
.lf-blog .card .meta {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--blog-border);
  display: flex; align-items: center; justify-content: space-between;
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.lf-blog .card .meta::after { content: 'Read →'; color: var(--blog-primary-light); font-weight: 600; font-size: 13px; }

.lf-blog .blog-empty { text-align: center; padding: 80px 0; color: var(--blog-text-light); font-size: 17px; }

/* ── ARTICLE: header — compact, no full-bleed photo band. The optional
   hero image renders as a contained rounded box (matching the original)
   instead of an edge-to-edge cover photo, so category-less/imageless
   posts (most posts) don't leave a huge empty dark band up top. The
   .bg element is first in markup (full-bleed in the shared template);
   column-reverse flips it visually below the title block, and :empty
   collapses it to nothing when there's no hero media at all. ────── */
.lf-blog .art-hero {
  position: relative; background: var(--blog-ink-light);
  display: flex; flex-direction: column-reverse;
}
/* Containment lives on the wrapper, not the img — an img's own max-width
   can get re-widened by the scaffolding's img reset in ways that are hard
   to out-rank; a constrained block-level wrapper with width:100% children
   is robust regardless. */
.lf-blog .art-hero .bg {
  position: static; max-width: var(--blog-prose-width); margin: 8px auto 0; padding: 0 24px;
}
.lf-blog .art-hero .bg:empty { display: none; }
.lf-blog .art-hero .bg img, .lf-blog .art-hero .bg video {
  display: block; width: 100%;
  aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--blog-radius-lg); border: 1px solid var(--blog-border);
}
.lf-blog .art-hero .inner {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--blog-prose-width); margin: 0 auto;
  padding: 140px 24px 32px;
}
.lf-blog .art-hero .crumbs { font-size: 13px; color: var(--blog-text-light); margin-bottom: 16px; }
.lf-blog .art-hero .crumbs a { transition: color var(--blog-transition); }
.lf-blog .art-hero .crumbs a:hover { color: var(--blog-text); }
.lf-blog .art-hero h1 {
  font-weight: 800; letter-spacing: -0.02em; color: var(--blog-text);
  font-size: clamp(28px, 5vw, 44px); line-height: 1.2;
  margin: 8px 0 0;
}
/* Article standfirst (the post excerpt under the H1). The article template
   emits this on every layout; without a rule it inherits no margin and the
   full container width, so it crowds the headline and runs to an unreadable
   measure. Capped near 46ch so it wraps well before the hero edge. */
.lf-blog .art-hero .standfirst {
  max-width: 46ch;
  margin-top: 30px;
  font-size: clamp(17px, 1.5vw, 19.5px);
  line-height: 1.6;
  color: rgba(255,255,255,.78);
}

.lf-blog .byline {
  display: flex; align-items: center; gap: 12px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--blog-border);
}
.lf-blog .byline .disc {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--blog-gradient); color: #fff;
  font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.lf-blog .byline .who { line-height: 1.35; }
.lf-blog .byline .who strong { display: block; font-size: 14px; font-weight: 600; }
.lf-blog .byline .who span { font-size: 12.5px; color: var(--blog-muted); }

/* ── ARTICLE: body ───────────────────────────────────────────────── */
.lf-blog .art-body-wrap { padding: 24px 0 72px; background: var(--blog-ink); }
.lf-blog .article-body {
  max-width: var(--blog-prose-width); margin: 0 auto;
  font-size: 17px; line-height: 1.8; color: var(--blog-text-light);
}
/* Agent output wraps runs of copy in <section>, so a direct-child rhythm
   (`> * + *`) only ever reaches the sections themselves and every paragraph
   inside one loses its spacing entirely. Match one level deeper too, and give
   consecutive sections a slightly larger gap so the structure still reads. */
.lf-blog .article-body > * + *,
.lf-blog .article-body > section > * + * { margin-top: 1.2em; }
.lf-blog .article-body > section + section { margin-top: 1.9em; }
.lf-blog .article-body > p:first-child,
.lf-blog .article-body > section:first-child > p:first-child { font-size: 19.5px; line-height: 1.75; color: #cbd5e1; }
.lf-blog .article-body h2 {
  font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3;
  color: var(--blog-text); margin-top: 2.2em;
}
.lf-blog .article-body h3 {
  font-size: 20px; font-weight: 600; margin-top: 1.8em; color: var(--blog-text);
}
/* The generic `> * + *` rhythm is too tight directly beneath a section
   heading; give the first element after one its own, larger top margin. */
.lf-blog .article-body h2 + * { margin-top: 1.5em; }
.lf-blog .article-body h3 + * { margin-top: 1.15em; }
.lf-blog .article-body a {
  color: var(--blog-primary-light); text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--blog-transition);
}
.lf-blog .article-body a:hover { color: var(--blog-text); }
.lf-blog .article-body strong { font-weight: 600; color: var(--blog-text); }
.lf-blog .article-body ul { padding-left: 0; }
.lf-blog .article-body ul > li { position: relative; padding-left: 24px; margin-top: .55em; }
.lf-blog .article-body ul > li::before {
  content: ''; position: absolute; left: 4px; top: .68em;
  width: 6px; height: 6px; background: var(--blog-primary-light); border-radius: 50%;
}
.lf-blog .article-body ol { list-style: none; counter-reset: lf-step; margin: 0; padding: 0; }
.lf-blog .article-body ol > li { counter-increment: lf-step; position: relative; padding-left: 40px; margin-top: .9em; }
.lf-blog .article-body ol > li::before {
  content: counter(lf-step);
  position: absolute; left: 0; top: .1em;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--blog-glow); border: 1px solid rgba(99,102,241,0.25);
  color: var(--blog-primary-light); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.lf-blog .article-body img { border-radius: var(--blog-radius-lg); border: 1px solid var(--blog-border); margin: 2em 0; }
.lf-blog .article-body blockquote {
  margin: 2em 0; padding: 18px 26px;
  background: var(--blog-card); border-left: 3px solid var(--blog-primary);
  border-radius: 0 var(--blog-radius) var(--blog-radius) 0;
  font-size: 16.5px; color: var(--blog-text-light);
}
.lf-blog .article-body blockquote p { margin: 0; }
.lf-blog .article-body code {
  font-size: .88em; font-family: 'Courier New', monospace;
  background: var(--blog-card); color: var(--blog-primary-light);
  border: 1px solid var(--blog-border); border-radius: 4px; padding: 2px 7px;
}
.lf-blog .article-body pre {
  background: var(--blog-card); border: 1px solid var(--blog-border);
  color: #dfe4ee; padding: 20px 24px;
  border-radius: var(--blog-radius); overflow-x: auto; font-size: 14px; line-height: 1.6;
}
.lf-blog .article-body pre code { background: none; border: 0; padding: 0; color: inherit; }
.lf-blog .article-body hr { border: none; border-top: 1px solid var(--blog-border); margin: 2.4em 0; }

/* ── AGENT BLOCK CATALOG — hard contract with the blog agent ─────── */
.lf-blog .article-body .callout {
  border-radius: var(--blog-radius); padding: 22px 26px; margin: 2em 0;
}
.lf-blog .article-body .callout::before {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px;
}
.lf-blog .article-body .callout > *:first-of-type { margin-top: 0; }

/* Key Takeaway — brand-filled */
.lf-blog .article-body .callout-takeaway { background: var(--blog-primary); color: rgba(255,255,255,0.92); }
.lf-blog .article-body .callout-takeaway::before { content: 'Key Takeaway'; color: #c7d2fe; }
.lf-blog .article-body .callout-takeaway p { color: rgba(255,255,255,0.92); }
.lf-blog .article-body .callout-takeaway strong { color: #fff; }
.lf-blog .article-body .callout-takeaway a { color: #fff; }

/* Warning — bordered alert, brand-light top bar */
.lf-blog .article-body .callout-warning {
  background: var(--blog-card);
  border: 1px solid var(--blog-primary-light);
  border-top: 4px solid var(--blog-primary-light);
  border-radius: 0 0 var(--blog-radius) var(--blog-radius);
}
.lf-blog .article-body .callout-warning::before { content: '\26A0  Important'; color: var(--blog-primary-light); }

/* Pro Tip — left rule */
.lf-blog .article-body .callout-tip {
  background: var(--blog-card);
  border-left: 4px solid var(--blog-primary-light);
  border-radius: 0 var(--blog-radius) var(--blog-radius) 0;
}
.lf-blog .article-body .callout-tip::before { content: 'Pro Tip'; color: var(--blog-primary-light); }
.lf-blog .article-body .callout-tip p { font-style: italic; }

/* Comparison — two-column */
.lf-blog .article-body .comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 2em 0; }
.lf-blog .article-body .comparison-col {
  background: var(--blog-card); border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius); padding: 22px 26px;
}
.lf-blog .article-body .comparison-col > *:first-child { margin-top: 0; }
.lf-blog .article-body .comparison-col h3,
.lf-blog .article-body .comparison-col h4 {
  font-size: 14px; font-weight: 700; color: var(--blog-text);
  text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 10px;
}
.lf-blog .article-body .comparison-col p,
.lf-blog .article-body .comparison-col li { font-size: 15px; line-height: 1.65; }

/* Checklist — check-prefixed rows */
.lf-blog .article-body ul.checklist { margin: 1.8em 0; }
.lf-blog .article-body ul.checklist > li {
  padding: 10px 0 10px 34px; margin-top: 0;
  border-bottom: 1px solid var(--blog-border);
}
.lf-blog .article-body ul.checklist > li:last-child { border-bottom: none; }
.lf-blog .article-body ul.checklist > li::before {
  content: '\2713'; width: 20px; height: 20px; border-radius: 4px;
  background: var(--blog-primary-light); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  left: 0; top: 12px;
}

/* Disclaimer — muted footer */
.lf-blog .article-body .disclaimer {
  margin: 2.6em 0 0; padding: 16px 20px;
  background: var(--blog-card);
  border-left: 3px solid var(--blog-border-light);
  border-radius: 0 8px 8px 0;
  font-size: 14px; line-height: 1.55; color: var(--blog-text-light); opacity: 0.75;
}
.lf-blog .article-body .disclaimer::before {
  display: block; content: 'Disclaimer';
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 6px;
}

/* ── ARTICLE: related ────────────────────────────────────────────── */
.lf-blog .art-related { padding: 64px 0 100px; background: var(--blog-ink-light); border-top: 1px solid var(--blog-border); }
.lf-blog .art-related .mag-head h2 { font-weight: 700; letter-spacing: -0.02em; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin-top: 10px; }
.lf-blog .art-related .cards .card { grid-column: span 4; }

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lf-blog .card, .lf-blog .card.lg, .lf-blog .card.md, .lf-blog .card.sm,
  .lf-blog .art-related .cards .card { grid-column: span 6; }
}
@media (max-width: 768px) {
  .lf-blog .feat-card { flex-direction: column; }
  .lf-blog .feat-card .media { width: 100%; min-height: 220px; }
  .lf-blog .card, .lf-blog .card.lg, .lf-blog .card.md, .lf-blog .card.sm,
  .lf-blog .art-related .cards .card { grid-column: span 12; }
  .lf-blog .blog-hero { padding-top: 128px; }
  .lf-blog .article-body .comparison { grid-template-columns: 1fr; }
  .lf-blog .art-hero .inner { padding: 110px 24px 32px; }
}