/*
 * Workzoom Blog Post — Editorial Design
 * Reference: Anthropic Glasswing, Linear Blog
 * Principle: less chrome, more content. Elevation through type and space, not decoration.
 */

article.wz-blog-post {
  --bp-accent: var(--accent, var(--brand-green-text));
  --bp-accent-rgb: var(--accent-rgb, 10, 122, 61);

  /* Editorial column widths — single source for every section */
  --bp-content-w: clamp(1040px, 80vw, 1520px);   /* body shell, hero, FAQ, related, author */
  --bp-wide-w: clamp(960px, 84vw, 1320px);   /* body content measure: centered, stretches to nearly fill the shell on wide screens */
  --bp-tight-w: clamp(760px, 58vw, 840px);   /* tighter measure for answer cards (TL;DR / answer-target) */
}

/* ── Reset ── */
article.wz-blog-post, article.wz-blog-post *, article.wz-blog-post *::before, article.wz-blog-post *::after { box-sizing: border-box; }
article.wz-blog-post { font-family: var(--font); color: var(--color-text-primary); line-height: 1.7; font-size: var(--text-sm); font-weight: 400; max-width: 100%; overflow-x: clip; -webkit-font-smoothing: antialiased; background: var(--white); }

/* ── Header ── */
.wz-blog-gradient-wash { background: var(--white); padding-bottom: var(--pad-inner-md); }
.wz-blog-header { max-width: var(--bp-content-w); margin: 0 auto; padding: calc(var(--nav-h) + 88px) clamp(24px, 4vw, 72px) 0; }

/* Eyebrow — canonical primitive per docs/design-philosophy.md §2:
   13px / +0.16em / uppercase / bold. Token-driven. */
.wz-blog-eyebrow { display: inline-block; font-size: var(--text-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: var(--pad-inner-sm); }

/* Title — editorial, large, lighter weight, tight leading */
article.wz-blog-post h1, .wz-blog-title { font-size: clamp(44px, 7vw, 80px); font-weight: 420; line-height: 1.02; letter-spacing: -0.035em; color: var(--color-text-primary); margin-bottom: var(--gap-mlg); text-wrap: balance; }

/* Subtitle — editorial pull-quote pattern (wz-ess-foot-statement) */
.wz-blog-subtitle { font-size: clamp(22px, 2.2vw, 32px); font-weight: 320; line-height: 1.25; letter-spacing: -0.018em; color: var(--color-text-secondary); margin-bottom: var(--gap-lg); max-width: 100%; }

/* Meta — two lines, no avatar, no pills */
.wz-blog-meta { display: flex; align-items: center; gap: var(--gap-sm); font-size: var(--text-eyebrow); color: var(--color-text-tertiary); font-weight: 500; line-height: 1.55; }
.wz-blog-meta-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-card); }
.wz-blog-meta-text { display: flex; flex-direction: column; gap: var(--gap-2xs); min-width: 0; }
.wz-blog-meta-by { color: var(--color-text-secondary); font-weight: 600; }
.wz-blog-meta-by-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--green-wash-30); transition: border-color var(--dur-fast) var(--ease-color), color var(--dur-fast) var(--ease-color); }
.wz-blog-meta-by-link:hover { color: var(--bp-accent); border-bottom-color: var(--bp-accent); }
.wz-blog-meta-role { color: var(--color-text-tertiary); font-weight: 500; }
.wz-blog-meta-date { color: var(--color-text-muted); font-weight: 500; font-size: var(--text-eyebrow); margin-top: var(--gap-2xs); }
.wz-blog-accent-line { display: none; }

/* ── Hero image — centered within narrow column ── */
.wz-blog-hero-image {
  max-width: var(--bp-content-w);
  margin: 0 auto 72px;
  padding: 0 clamp(24px, 4vw, 72px);
  overflow: hidden;
}

.wz-blog-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  object-fit: cover;
  aspect-ratio: 1200 / 630;
  margin: 0;
  border: none;
  box-shadow: var(--shadow-card);
}

/* ── Breadcrumbs — keep for SEO, hide visually ── */
.wz-blog-breadcrumbs { display: none; }

/* ── Layout — sticky 3-rail editorial grid ──
   Single column by default (mobile-first). Progressive enhancement:
   - ≥1101px : 2-col grid — sticky TOC rail (left) + content
   - ≥1280px : 3-col grid — TOC + content + sticky ad rail (right)
   - ≤1100px : single column; the mobile TOC + below-content ad take over
   The wz-icta conversion banner is rendered OUTSIDE this container so it can
   span the full viewport width (matches the full-width case-study CTA). */
.wz-blog-layout { display: block; max-width: var(--bp-content-w); margin: 0 auto; padding: 0 clamp(20px, 2.4vw, 40px) var(--gap-2xl); }
/* Flush-hero variant — posts that carry their TL;DR / answer-target INLINE skip
   the cream .wz-blog-gradient-wash band that normally separates hero from body.
   Without it the first paragraph butts straight against the hero. Restore the
   breathing room the band would have provided. */
.wz-blog-layout--flush-hero { padding-top: clamp(40px, 4.5vw, 72px); }
/* Reading measure: cap the body column at ~70 characters per line (was the
   wide --bp-wide-w ≈ 960–1320px / ~95–125 cpl, which fought readability and the
   Ramp/Linear tight-column look). Text + tables + stat/quote cards all sit in
   this tidy centred column; the hero/header keep their own wider --bp-content-w. */
.wz-blog-content { max-width: 720px; margin: 0 auto; min-width: 0; }

/* ── Desktop TOC — left rail, sticky ──
   Hidden by default; promoted to a sticky rail at ≥1101px (see media query).
   Anchor-fragment nav with an animated underline sweep + active-section
   highlight (JS adds .wz-toc-active via IntersectionObserver).
   2026-05-27 v3 ("both sticky but quieter"): card chrome dropped — the
   green-wash bg + border was competing for attention with the body column.
   Now a bare rail (no bg, no border) with just typography + a faint
   left rule. The accent moments are reserved for hover + active states. */
.wz-blog-toc {
  display: none;
  padding: 0 0 0 var(--gap-md);
  border-left: 1px solid var(--green-wash-15);
}
.wz-blog-toc-label {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--gap-sm);
}
/* 2026-05-27 v2: lifted from eyebrow-size flat list to text-sm with more
   breathing space + accent dot prefix. Was reading as "flat swill" — same
   muted gray across all items with no visual hierarchy or affordance. */
.wz-blog-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wz-blog-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 8px 8px 6px;
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-color),
              background var(--dur-fast) var(--ease-color);
}
.wz-blog-toc-list .wz-toc-text { text-wrap: balance; }
.wz-blog-toc-list a:hover {
  background: var(--green-wash-06);
}
.wz-blog-toc-list .wz-toc-num {
  display: inline-block;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--brand-green-text);
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease-color),
              color var(--dur-fast) var(--ease-color);
}
.wz-blog-toc-list a:hover .wz-toc-num,
.wz-blog-toc-list a.wz-toc-active .wz-toc-num { opacity: 1; }
/* Animated underline: a 1px gradient that sweeps from 0 → 100% width under
   the heading label on hover / active. Smooth and contained to the text. */
.wz-blog-toc-list .wz-toc-text {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  padding-bottom: 1px;
  transition: background-size var(--dur-default) var(--ease);
}
.wz-blog-toc-list a:hover { color: var(--color-text-primary); }
/* Number stays in the green family on hover — matches the resting + active
   states. Was --bp-accent, which resolves to the per-category accent (blue
   for some categories) and read as a mismatched second colour next to the
   green text. */
.wz-blog-toc-list a:hover .wz-toc-num { color: var(--brand-green-text); }
.wz-blog-toc-list a:hover .wz-toc-text { background-size: 100% 1px; }
.wz-blog-toc-list a.wz-toc-active {
  color: var(--brand-green-text);
  background: var(--green-wash-10);
}
.wz-blog-toc-list a.wz-toc-active .wz-toc-num { color: var(--brand-green-text); }
.wz-blog-toc-list a.wz-toc-active .wz-toc-text { background-size: 100% 1px; }

/* Collapsed-by-default items — kept in DOM (full TOC link graph stays
   visible to AEO crawlers / table-of-contents schema) but hidden visually
   until the user clicks the expand button. Removed via .wz-blog-toc-expanded
   on the parent <nav>. */
.wz-blog-toc--collapsible .wz-blog-toc-item--more { display: none; }
.wz-blog-toc--collapsible.wz-blog-toc-expanded .wz-blog-toc-item--more { display: block; }

/* Expand button — text-link style with chevron that flips on expand.
   2026-05-27 v4: dropped the dashed border (read as dots) for a clean
   text affordance with hover wash. */
.wz-blog-toc-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--gap-tween) 0 0;
  padding: 6px 8px 6px 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-green-text);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-color),
              opacity var(--dur-fast) var(--ease-color);
}
.wz-blog-toc-more:hover {
  color: var(--brand-green);
}
.wz-blog-toc-more svg {
  width: 12px;
  height: 12px;
  transition: transform var(--dur-default) var(--ease);
}
.wz-blog-toc-expanded .wz-blog-toc-more svg { transform: rotate(180deg); }

/* ── Right-rail walkthrough CTA ──
   Replaces the legacy ad placeholder (2026-05-27). Sticky on ≥1280px;
   hidden below that so the editorial column keeps a comfortable measure.
   No price line — that lives in the full-bleed wz-icta banner below.
   Navy card, green badge, green-deep button — matches the wz-icta voice
   miniaturised for the rail. */
/* 2026-05-27: was a navy gradient card. Flipped to light theme — it sits
   embedded in the editorial column (not full-bleed like the wz-icta
   below the post), so a dark island in a light sea read tonally off.
   Now in the same green-wash card family as wz-blog-tldr,
   wz-blog-key-takeaway, and the soft-green TOC. */
.wz-blog-rail-cta { display: none; }
/* 2026-05-27 v4: green chrome restored at a quieter scale than v2.
   Soft green-wash bg + border returns so the rail reads as a Workzoom
   moment (not bare text). Tighter padding than v2 (gap-md not gap-mlg)
   keeps it visually subordinate to the body column. */
.wz-blog-rail-cta-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: var(--gap-md);
  background: var(--green-wash-08);
  border: 1px solid var(--green-wash-15);
  border-radius: var(--r-md);
  color: var(--color-text-primary);
  box-shadow: none;
  isolation: isolate;
}
.wz-blog-rail-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 6px 12px;
  background: var(--green-wash-10);
  border: 1px solid var(--green-wash-28);
  border-radius: var(--r-lg);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-green-text);
}
.wz-blog-rail-cta-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-green);
  box-shadow: 0 0 0 4px var(--green-wash-16);
}
.wz-blog-rail-cta-title {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
  color: var(--color-text-primary);
}
.wz-blog-rail-cta-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
/* 2026-05-27 v4: green pill button restored at the quieter scale.
   Full-width within the (now narrower) card, brand-green fill, no heavy
   shadow. Reads as a clear conversion affordance again without going
   back to the puffy v2 sizing. */
.wz-blog-rail-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: var(--brand-green);
  color: var(--color-page);
  font-family: var(--font);
  font-size: 14px;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 0;
  border-radius: var(--r-md);
  box-shadow: 0 4px 10px var(--green-wash-18);
  transition: background var(--dur-fast) var(--ease-color),
              box-shadow var(--dur-default) var(--ease-color),
              transform var(--dur-fast) var(--ease);
  margin-top: var(--gap-2xs);
}
.wz-blog-rail-cta-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  /* Icon carries .wz-pill-icon (green by default); inside the solid-green
     button it must match the button's white label, not stay green-on-green. */
  color: inherit;
  transition: transform var(--dur-fast) var(--ease);
}
.wz-blog-rail-cta-btn:hover {
  background: var(--brand-green-hover);
  color: var(--color-page);
  text-decoration: none;
  box-shadow: 0 6px 16px var(--green-wash-28);
}
.wz-blog-rail-cta-btn:hover svg {
  transform: translate(2px, -2px);
}
.wz-blog-rail-cta-btn:focus-visible {
  outline: 2px solid var(--brand-green-light);
  outline-offset: 3px;
}
.wz-blog-rail-cta-trust {
  list-style: none;
  padding: var(--gap-tween) 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xs);
  border-top: 1px solid var(--green-wash-15);
}
.wz-blog-rail-cta-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--fw-medium, 500);
  color: var(--color-text-primary);
}
.wz-blog-rail-cta-trust svg {
  width: 14px;
  height: 14px;
  color: var(--brand-green);
  flex-shrink: 0;
}

/* ── Mobile TOC — keep but simplify ── */
.wz-blog-toc-mobile { display: none; max-width: var(--bp-content-w); margin: 0 auto 40px; padding: 0 clamp(24px, 4vw, 72px); }
.wz-blog-toc-mobile-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--gap-sm) 0; background: none; border: none; border-bottom: 1px solid var(--gray-2); font-family: var(--font); font-size: var(--text-eyebrow); font-weight: 600; color: var(--color-text-primary); cursor: pointer; }
.wz-blog-toc-mobile-toggle svg { width: 18px; height: 18px; transition: transform var(--dur-default) var(--ease); }
.wz-blog-toc-mobile-toggle.wz-toc-open svg { transform: rotate(180deg); }
.wz-blog-toc-mobile-list { list-style: none; padding: var(--gap-sm) 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height var(--dur-emphasis) var(--ease); }
.wz-blog-toc-mobile-list a { display: block; padding: var(--gap-xs) 0; font-size: var(--text-eyebrow); font-weight: 500; color: var(--color-text-tertiary); text-decoration: none; border-bottom: 1px solid var(--gray-1); }
.wz-blog-toc-mobile-list li:last-child a { border-bottom: none; }

/* ── Content typography — Mercury warm, sharpened 2026-05-27 ──
   Stronger heading presence + clearer hierarchy, selective italic accents,
   more confident strong/em, accent-marked lists, and a green highlight for
   <mark>. Switzer is a variable font so the in-between weights interpolate. */
article.wz-blog-post .wz-blog-content h2 {
  font-size: var(--text-h2-sm);
  font-weight: 520;
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--brand-green-deep);
  margin: var(--gap-2xl) 0 var(--gap-mlg);
  padding-top: var(--gap-xl);
  border-top: 1px solid var(--gray-2);
  scroll-margin-top: 100px;
  text-wrap: balance;
}
article.wz-blog-post .wz-blog-content h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
article.wz-blog-post .wz-blog-content h3 {
  font-size: var(--text-h3);
  font-weight: 560;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  margin: var(--gap-xl) 0 var(--gap-tween);
  text-wrap: balance;
}
/* Selective italic emphasis inside headings — green editorial accent.
   Authors invoke it with <em> in an H2/H3; upright headings are unaffected. */
article.wz-blog-post .wz-blog-content h2 em,
article.wz-blog-post .wz-blog-content h3 em {
  font-style: normal;
  font-weight: inherit;
  color: var(--accent-text);
}
/* Body paragraph: 18–20px reading type (2026-05-27 v5 — bumped top end
   from 19 → 20 per direct request). Margin-bottom raised to gap-lg
   (48px desktop / 32px mobile) so each paragraph gets a generous
   editorial break before the next. */
.wz-blog-content p { font-size: clamp(19px, 0.6vw + 12px, 21px); font-weight: 400; line-height: 1.78; color: var(--ink-body-editorial); margin: 0 0 var(--gap-lg); letter-spacing: -0.008em; text-wrap: pretty; }
/* "Introduction" now renders as a real <h2.wz-blog-intro-heading>, so it
   inherits the section-title rule (article.wz-blog-post .wz-blog-content h2)
   and the :first-of-type lead treatment — no separate eyebrow rule needed.
   The orphaned `.wz-blog-content > p:first-of-type,` selector that used to sit
   here (its eyebrow rule body was lost in an earlier edit) was accidentally
   merging into the .wz-abbr rule below and applying a dotted underline to the
   first paragraph; removed. */

/* ── Abbreviations (front-matter abbr: true) ──
   Inline first-use: dotted underline (the "this has a definition" affordance)
   + a small green superscript that jumps to the Definitions block at the tail.
   The <abbr title> carries the full expansion for hover + AEO/accessibility. */
.wz-blog-content abbr.wz-abbr {
  text-decoration: underline dotted var(--green-wash-35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: help;
  font-variant: none;
}
.wz-blog-content .wz-abbr-ref {
  text-decoration: none;
  color: var(--brand-green-text);
  margin-left: 1px;
}
.wz-blog-content .wz-abbr-ref sup {
  font-size: 0.62em;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
.wz-blog-content .wz-abbr-ref:hover sup { text-decoration: underline; }

/* Definitions footnote block — the "buried" glossary at the post tail. Each
   entry links out to its /glossary/{slug}/ page (the reference to learn more). */
.wz-blog-glossary {
  margin: var(--gap-xl) 0 0;
  padding: var(--gap-lg);
  background: var(--green-wash-06);
  border: 1px solid var(--green-wash-15);
  border-radius: var(--r-md);
}
.wz-blog-glossary .wz-editorial-eyebrow--bare { margin-bottom: var(--gap-md); }
.wz-blog-glossary-list { margin: 0; padding: 0; display: grid; gap: 0; }
.wz-blog-glossary-item { padding: var(--gap-sm) 0; border-top: 1px solid var(--green-wash-15); }
.wz-blog-glossary-item:first-child { border-top: 0; padding-top: 0; }
.wz-blog-glossary-term {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 4px;
}
.wz-blog-glossary-term abbr { text-decoration: none; }
.wz-blog-glossary-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--brand-green-text);
  background: var(--green-wash-12);
  border-radius: var(--r-sm);
}
.wz-blog-glossary-expansion { font-weight: var(--fw-regular); color: var(--color-text-secondary); }
.wz-blog-glossary-def { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-secondary); }
.wz-blog-glossary-link { white-space: nowrap; font-weight: var(--fw-medium); }
.wz-blog-lede { font-size: var(--text-md); line-height: 1.55; color: var(--color-text-primary); }
/* Cap the auto-generated fallback lede so the typographic cascade stays
   monotonic (subdeck 28 → lede 23 → body 18). Previously the lede
   inherited a 32px treatment that broke the descent — see
   _reports/blog-design-audit-2026-05-13.md finding #5. */
.wz-blog-content a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--green-wash-30); transition: text-decoration-color var(--dur-fast) var(--ease-color); }
.wz-blog-content a:hover { text-decoration-color: var(--accent-text); }
/* Strong — confident emphasis in primary ink. Em — italic with a lift in ink
   so emphasised phrases read against the secondary-tinted body. */
.wz-blog-content strong { font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.006em; }
.wz-blog-content em { font-style: normal; color: var(--color-text-primary); }
.wz-blog-content mark { background: var(--green-wash-15); color: var(--color-text-primary); padding: 0.04em 0.24em; border-radius: var(--r-sm); }
/* Lists — accent markers, roomier rhythm, balanced wrapping */
.wz-blog-content ul, .wz-blog-content ol { padding-left: var(--gap-md); margin: 0 0 var(--gap-lg); }
.wz-blog-content ul { list-style: none; }
.wz-blog-content li > ul, .wz-blog-content li > ol { margin: var(--gap-sm) 0 0; }
.wz-blog-content ul li { position: relative; padding-left: var(--gap-md); margin-bottom: var(--gap-sm); font-size: var(--text-sm); line-height: 1.75; color: var(--color-text-primary); text-wrap: pretty; }
.wz-blog-content ul li::before { content: ''; position: absolute; left: 0; top: 0.875em; width: 6px; height: 6px; background: var(--bp-accent); border-radius: 50%; transform: translateY(-50%); }
.wz-blog-content ol li { margin-bottom: var(--gap-sm); padding-left: var(--gap-2xs); font-size: var(--text-sm); line-height: 1.75; color: var(--color-text-primary); text-wrap: pretty; }
.wz-blog-content ol li::marker { color: var(--bp-accent); font-weight: 600; }
.wz-blog-content img { max-width: 100%; height: auto; border-radius: var(--r-md); margin-top: 40px; margin-bottom: 40px; }

/* ── Inline chart figures ── */
.wz-blog-chart {
  margin: var(--gap-lg) 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-card);
}
.wz-blog-chart img {
  width: 100%; height: auto;
  display: block;
  margin: 0; border-radius: 0;
  border: none; box-shadow: none;
}

/* ── Tables — clean contrast ── */
.wz-blog-table-wrap { overflow-x: auto; margin: var(--gap-mlg) 0; max-width: 100%; border-radius: var(--r-lg); border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-card); }
.wz-blog-content table { width: 100%; border-collapse: collapse; margin: var(--gap-mlg) 0; font-size: var(--text-xs); line-height: 1.6; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-card); }
.wz-blog-table-wrap table { margin: 0; border: none; border-radius: 0; box-shadow: none; }
.wz-blog-content thead tr { background: var(--color-text-primary); }
.wz-blog-content th { font-weight: 600; color: var(--color-page); text-align: left; padding: var(--gap-sm) var(--pad-inner-xs); border-bottom: none; font-size: var(--text-eyebrow); letter-spacing: 0.01em; }
.wz-blog-content td { padding: var(--gap-tween) var(--pad-inner-xs); color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; background: var(--color-surface-card); }
.wz-blog-content tbody tr:hover td { background: var(--white); }
.wz-blog-content td:first-child { font-weight: 500; color: var(--color-text-secondary); }

/* ── Blockquotes — editorial, not card-like ── */
/* Editorial pull-quote — larger, primary-colour, brand-green rail + a quiet
   oversized quote glyph. Distinct from the tinted stat-callout card so the two
   never read as the same component. */
.wz-blog-content blockquote, .wz-blog-blockquote {
  position: relative;
  margin: var(--gap-xl) 0;
  padding: var(--gap-xs) 0 var(--gap-xs) var(--gap-lg);
  border-left: 3px solid var(--brand-green);
  background: none; border-radius: 0;
}
.wz-blog-content blockquote::before, .wz-blog-blockquote::before {
  content: "\201C";
  position: absolute; top: -0.04em; left: calc(var(--gap-lg) - 4px);
  font-family: var(--font);
  font-size: 4.4em; line-height: 1;
  color: var(--green-wash-28); pointer-events: none; z-index: 0;
}
.wz-blog-content blockquote p, .wz-blog-blockquote p {
  position: relative; z-index: 1;
  font-size: var(--text-lg, 27px); font-style: normal; font-weight: 460;
  line-height: 1.42; letter-spacing: -0.02em;
  color: var(--color-text-primary); margin: 0 0 var(--gap-sm);
}
.wz-blog-content blockquote p:last-child, .wz-blog-blockquote p:last-child { margin: 0; }
.wz-blog-content blockquote cite, .wz-blog-blockquote cite {
  display: block; margin-top: var(--gap-sm); padding-top: var(--gap-tween);
  border-top: 1px solid var(--green-wash-28);
  font-size: var(--text-eyebrow); font-weight: 600; font-style: normal;
  letter-spacing: 0.01em; color: var(--brand-green-text);
}

/* Testimonial card with author photo — distinct from the default pull-quote,
   so other posts' blockquotes are untouched. */
.wz-blog-content .wz-blog-testimonial {
  margin: var(--gap-xl) 0;
  padding: var(--gap-lg);
  background: var(--green-wash-08);
  border: 1px solid var(--green-wash-15);
  border-radius: var(--r-lg);
}
.wz-blog-content .wz-blog-testimonial blockquote {
  margin: 0; padding: 0; border: 0; background: none;
}
.wz-blog-content .wz-blog-testimonial blockquote::before { content: none; }
.wz-blog-content .wz-blog-testimonial blockquote p {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 460;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.wz-blog-testimonial-author {
  display: flex; align-items: center; gap: var(--gap-sm);
  margin-top: var(--gap-md); padding-top: var(--gap-md);
  border-top: 1px solid var(--green-wash-15);
}
.wz-blog-testimonial-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.wz-blog-testimonial-meta { display: flex; flex-direction: column; line-height: 1.35; }
.wz-blog-testimonial-meta strong {
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text-primary);
}
.wz-blog-testimonial-meta > span {
  font-size: var(--text-eyebrow); color: var(--color-text-tertiary);
}

/* ── Stat callout — editorial magazine split ──
   Big number (column 1) divided from a stacked label + source (column 2).
   Layout contract: the markup is three children in source order —
   .wz-blog-stat-callout-number, -label, -source (source optional). The
   number explicitly spans both rows and the label/source are pinned to
   column 2 so the source can never reflow under the number. This replaces
   the old `auto 1fr` + `grid-row: 1 / -1` setup, where the implicit-row
   grid let the long source string land in column 1, inflate the number
   track, and crush the label into a sliver. Legacy `.wz-stat-number` /
   `.wz-stat-context` markup (4 older posts) is aliased onto the same rules.
   Uses --bp-accent so every category gets its own colour. */
/* 2026-05-27 v3: row-gap widened (was gap-xs / 8px → gap-tween / 16px
   on desktop) — the label sitting on row 1 align-end and the source on
   row 2 align-start were colliding visually. column-gap also bumped to
   give the giant number more breathing room from the label column. */
.wz-blog-stat-callout {
  margin: var(--gap-xl) 0;
  padding: clamp(32px, 3.5vw, 48px) clamp(28px, 3.5vw, 48px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(36px, 3.8vw, 56px);
  row-gap: var(--gap-tween);
  background: var(--green-wash-08);
  border: 1px solid var(--green-wash-15);
  border-left: 3px solid var(--brand-green);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  text-align: left;
}
.wz-blog-stat-callout-number,
.wz-blog-stat-callout .wz-stat-number {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: clamp(52px, 6vw, 84px);
  font-weight: 360;
  letter-spacing: -0.04em;
  color: var(--brand-green-text);
  line-height: 0.95;
  margin: 0;
  padding-right: clamp(24px, 2.5vw, 40px);
  border-right: 1px solid var(--green-wash-15);
  white-space: nowrap;
}
.wz-blog-stat-callout-label,
.wz-blog-stat-callout .wz-stat-context {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: var(--text-sm);
  font-weight: 440;
  color: var(--color-text-primary);
  line-height: 1.5;
  letter-spacing: -0.012em;
  margin: 0;
  max-width: 100%;
  text-wrap: pretty;
}
/* No source row: let the label own both rows so it stays vertically centred
   against the number instead of pinning to the top of the block. */
.wz-blog-stat-callout-label:last-child,
.wz-blog-stat-callout .wz-stat-context:last-child {
  grid-row: 1 / span 2;
  align-self: center;
}
.wz-blog-stat-callout-label::before,
.wz-blog-stat-callout .wz-stat-context::before {
  content: 'By the numbers';
  display: block;
  width: fit-content;
  font-weight: var(--fw-bold);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-green-text);
  background: var(--green-wash-10);
  border: 1px solid var(--green-wash-28);
  border-radius: var(--r-md);
  padding: 4px 10px;
  margin-bottom: var(--gap-tween);
}
/* Source row — hairline separator from the label above + more line-height
   so it doesn't sit visually glued to the label text. */
.wz-blog-stat-callout-source {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  padding-top: var(--gap-sm);
  border-top: 1px solid var(--green-wash-15);
  font-size: 12px;
  color: var(--color-text-tertiary);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
}
@media (max-width: 1024px) {
  .wz-blog-stat-callout { padding: clamp(28px, 3.5vw, 40px) clamp(24px, 3.5vw, 36px); column-gap: clamp(24px, 3vw, 36px); }
}
@media (max-width: 768px) {
  .wz-blog-stat-callout { margin: var(--section-tight-v) 0; }
}
@media (max-width: 640px) {
  /* Single column: reset the explicit row/column placement so the three
     children stack in source order (number → label → source). */
  .wz-blog-stat-callout { grid-template-columns: 1fr; row-gap: var(--gap-md); padding: 36px 28px 32px; text-align: center; }
  .wz-blog-stat-callout-number,
  .wz-blog-stat-callout .wz-stat-number,
  .wz-blog-stat-callout-label,
  .wz-blog-stat-callout-label:last-child,
  .wz-blog-stat-callout .wz-stat-context,
  .wz-blog-stat-callout .wz-stat-context:last-child,
  .wz-blog-stat-callout-source { grid-column: 1; grid-row: auto; align-self: auto; }
  .wz-blog-stat-callout-number,
  .wz-blog-stat-callout .wz-stat-number {
    padding-right: 0; padding-bottom: var(--gap-md);
    border-right: none; border-bottom: 1px solid var(--green-wash-22);
    text-align: center; justify-self: center;
  }
  .wz-blog-stat-callout-label::before,
  .wz-blog-stat-callout .wz-stat-context::before { text-align: center; }
}

/* Key takeaway — see the system-aligned definition further down (search
   "Key takeaway — promote left-rule"). Kept single-source to avoid drift. */

/* ── Article editorial blocks (2026-05-15, system-aligned) ──
   These blocks consume the GLOBAL `.wz-editorial-*` design language from
   components.css (the same one the homepage / suites / case studies use).
   No parallel "blog-only" surface treatment. Tier-2 typographic scale,
   homepage-grade rhythm, page surface (not cool-tint).
*/

/* TL;DR + answer-target shared shell — a tinted answer card.
   The AEO answer block must read as a discrete, citation-ready unit so AI
   extractors parse it and humans recognise a TL;DR. Cool-tint surface =
   the "answer/citation" semantic; per-category accent rail via --bp-accent.
   See _reports/blog-design-audit-2026-05-13.md fix #2. */
.wz-blog-tldr,
.wz-answer-target {
  max-width: var(--bp-tight-w);
  margin: var(--gap-xl) auto;
  padding: var(--gap-md) var(--gap-lg);
  background: var(--surface-tint-warm);
  border: 1px solid var(--surface-tint-warm-border);
  border-left: 3px solid var(--bp-accent);
  border-radius: var(--r-md);
  position: relative;
}

/* "At a glance" / TL;DR — green answer surface.
   The translucent green wash (--green-wash-* tokens are rgba(17,176,88,…))
   keeps the see-through tint of the original cool surface while shifting the
   whole card to brand green. Re-pointing the local --bp-accent + -rgb makes
   the eyebrow chip, hairline rules, and numbered markers inside the card pick
   up green too, so it reads as one cohesive unit. .wz-answer-target keeps the
   cool-tint citation surface above. */
.wz-blog-tldr {
  --bp-accent: var(--brand-green);
  --bp-accent-rgb: 17, 176, 88;
  background: var(--green-wash-08);
  border-color: var(--green-wash-15);
  border-left-color: var(--brand-green);
}

/* TL;DR-specific eyebrow chip — consumes the global .wz-editorial-eyebrow
   pattern but with category accent instead of green so it picks up the
   per-category color through --bp-accent. */
.wz-blog-tldr-eyebrow {
  background: var(--green-wash-08);
  border-color: var(--green-wash-32);
  color: var(--bp-accent);
  margin-bottom: var(--gap-md);
}
.wz-blog-tldr-eyebrow .wz-editorial-eyebrow-digit {
  color: var(--bp-accent);
}

/* In-body TL;DR label — the canonical pattern across the post library uses a
   plain `<div class="wz-blog-tldr-label">`. Promote it to the same accent-chip
   language as the front-matter `.wz-editorial-eyebrow` so every TL;DR reads
   consistently, with the per-category accent. */
.wz-blog-tldr-label {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bp-accent);
  background: var(--green-wash-08);
  border: 1px solid var(--green-wash-28);
  border-radius: var(--r-md);
  padding: var(--gap-2xs) var(--gap-sm);
  margin: 0 0 var(--gap-md);
}

/* Legacy hook — preserved for back-compat with old markup */
.wz-aeo-eyebrow {
  display: inline-flex; align-items: center; gap: var(--gap-xs);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bp-accent);
  margin: 0 0 var(--gap-md);
}

/* TL;DR list — homepage-grade typography, hairline rule between items.
   Reads like a Bloomberg key-takeaways block, not a bulleted list. */
.wz-blog-tldr-body { counter-reset: tldr; }
.wz-blog-tldr ol,
.wz-blog-tldr ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
/* TL;DR markers (2026-05-27): replaced the decimal-leading-zero counter
   with a small accent dot. The numeric counter created visual confusion
   on items whose text contained numbers (e.g. "Cable Bahamas (5 days
   to 1.5)") and read as a second numbering layer next to the article's
   own enumerated headings. The dot reads as "key point" without
   competing for attention. */
.wz-blog-tldr ol li,
.wz-blog-tldr ul li {
  position: relative;
  padding: 14px 0 14px 32px;
  border-top: 1px solid var(--green-wash-15);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--color-text-primary);
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
.wz-blog-tldr ol li:first-child,
.wz-blog-tldr ul li:first-child { border-top: 0; padding-top: var(--gap-2xs); }
/* Dot is centred on the FIRST LINE of text: top = top-padding + half a line.
   0.775em ≈ half of the 1.55 line-height, so the marker tracks the cap-height
   of line one at any font size (was a fixed top:24px magic number that drifted
   as the text scaled). translateY(-50%) re-centres the dot on that point. */
.wz-blog-tldr ol li::before,
.wz-blog-tldr ul li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: calc(14px + 0.775em);
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bp-accent);
}
.wz-blog-tldr ol li:first-child::before,
.wz-blog-tldr ul li:first-child::before { top: calc(var(--gap-2xs) + 0.775em); }

/* TL;DR string body (when not array) */
.wz-blog-tldr-body p {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--color-text-primary);
  margin: 0;
  font-weight: var(--fw-regular);
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

/* Answer-target / AEO standfirst — the article's answer to its own question,
   the citation surface for AI engines. Card chrome is the shared
   .wz-blog-tldr/.wz-answer-target shell above; this block owns only the
   standfirst typography. */
.wz-answer-target-inner { display: block; }
.wz-aeo-lede,
.wz-answer-target p {
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.022em;
  color: var(--color-text-primary);
  margin: 0;
  font-weight: var(--fw-light, 300);
  text-wrap: pretty;
}
/* Match the homepage's italic-emphasis pattern: italic + light + accent-serif.
   Use <em>...</em> in answerTarget.lede content to invoke. */
.wz-aeo-lede em,
.wz-answer-target p em {
  font-style: normal;
  font-weight: var(--fw-light);
  color: var(--accent-serif, var(--bp-accent));
}
.wz-aeo-keywords { display: none; } /* hidden density span — preserved */

/* Answer-target eyebrow — same pattern as TLDR but uses category-light tint */
.wz-answer-target-eyebrow {
  background: var(--green-wash-08);
  border-color: var(--green-wash-32);
  color: var(--bp-accent);
  margin-bottom: var(--gap-md);
}
.wz-answer-target-eyebrow .wz-editorial-eyebrow-digit {
  color: var(--bp-accent);
}

/* ── Entities list — small-caps editorial chips ──
   Reads as a legal index, not a tag cloud. Subtle category-accent border, no
   background fill, inline-flex row that wraps at narrow widths. */
.wz-blog-entities {
  max-width: var(--bp-content-w, 900px);
  margin: var(--gap-md) auto var(--gap-2xl);
  padding: 0 var(--pad-inner);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--gap-tween) var(--gap-md);
}
.wz-blog-entities-label {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.wz-blog-entities-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}
/* 2026-05-27 v3: green-wash pill family — brand-green-50 fill,
   brand-green-deep ink, matching the wz-eyebrow-pill design vocabulary.
   Two icons (building for companies, tag for concepts) provide a subtle
   visual distinction without the tone-based categorisation that read
   too "topic-like" in an earlier pass. */
.wz-blog-entities-item {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--gap-2xs) var(--gap-sm);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--brand-green-deep);
  background: var(--green-wash-08);
  border: 1px solid var(--green-wash-15);
  border-radius: var(--r-lg);
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-color),
              background var(--dur-fast) var(--ease-color),
              color var(--dur-fast) var(--ease-color),
              transform var(--dur-fast) var(--ease);
}
.wz-blog-entities-item:hover {
  border-color: var(--green-wash-55);
  background: var(--green-wash-14);
  color: var(--brand-green-deep);
  transform: translateY(-1px);
}
.wz-blog-entities-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--brand-green-text);
  opacity: 0.9;
}
.wz-blog-entities-item:hover .wz-blog-entities-icon {
  opacity: 1;
  color: var(--brand-green);
}

/* Items past the 8-pill cap render in the DOM (for AEO entity-density
   signal) but stay hidden visually. If a future review wants a
   "+N more" affordance, swap this to a JS-driven expand button. */
.wz-blog-entities-item--overflow { display: none; }

/* Mobile */
@media (max-width: 720px) {
  .wz-blog-tldr,
  .wz-answer-target { padding: var(--gap-md) var(--gap-md) var(--pad-inner-sm); margin: var(--gap-mlg) var(--pad-inner-sm); }
  .wz-blog-tldr ul li { padding-left: 30px; }
  .wz-answer-target p { font-size: 19px; }
  .wz-blog-entities { grid-template-columns: 1fr; gap: var(--gap-xs); padding: 0 var(--pad-inner-sm); }
}

/* ── Answer target (AEO) — legacy alias kept; styling collapsed into the block above. */
.wz-blog-answer-target { font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-primary); }

/* ── Inline CTA — hidden (editorial, trust the content) ── */
.wz-blog-cta-inline { display: none; }
article.wz-blog-post .wz-blog-content .wz-blog-cta-inline h3 { font-size: var(--text-base); font-weight: 500; color: var(--color-text-primary); margin: 0 0 var(--gap-xs); line-height: 1.3; }
.wz-blog-cta-inline p { font-size: var(--text-eyebrow); color: var(--color-text-secondary); margin: 0 0 var(--gap-md); line-height: 1.65; }
/* Button: only the direct child link (not inline links in h3/p) */
.wz-blog-cta-inline > a { display: inline-flex; align-items: center; gap: var(--gap-xs); padding: var(--gap-sm) var(--pad-inner-sm); background: var(--color-accent); color: var(--color-page); font-family: var(--font); font-size: var(--text-eyebrow); font-weight: 510; border-radius: var(--r-md); text-decoration: none; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-default) var(--ease-color); }
.wz-blog-cta-inline > a:hover { transform: translateY(-1px); box-shadow: 0 4px 16px var(--green-wash-25); color: var(--color-page); text-decoration: none; }
/* Inline links inside CTA headings/paragraphs stay normal */
.wz-blog-cta-inline h3 a, .wz-blog-cta-inline p a { display: inline; padding: 0; background: none; color: var(--brand-green-text); font-size: inherit; font-weight: inherit; border-radius: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wz-blog-cta-inline h3 a:hover, .wz-blog-cta-inline p a:hover { transform: none; box-shadow: none; color: var(--brand-green-text); text-decoration-color: var(--brand-green-text); }

/* ── Inline CTA banner (.wz-icta) — full-bleed ──
   Rendered OUTSIDE .wz-blog-layout (see blog-post.njk) as a direct child of
   article.wz-blog-post, so it inherits the native full-width navy banner from
   atoms.css (side-by-side card, --max-w inner). The old column-refit override
   that stacked it inside the 900px editorial column was removed 2026-05-27
   when the CTA was lifted out of the grid. No blog-scoped overrides needed. */

/* ── FAQ — homepage-grade accordion ── */
.wz-blog-faq { max-width: var(--bp-content-w); margin: var(--gap-2xl) auto var(--gap-2xl); padding: 0 clamp(24px, 4vw, 72px); }
article.wz-blog-post .wz-blog-faq-heading { font-size: clamp(32px, 3.5vw, 48px); font-weight: 480; letter-spacing: -0.025em; line-height: 1.15; color: var(--color-text-primary); margin-bottom: 36px; }
.wz-blog-faq-item { border-bottom: 1px solid var(--color-border); }
.wz-blog-faq-item:first-child { border-top: 1px solid var(--color-border); }
.wz-blog-faq-question { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--pad-inner-sm) 0; background: none; border: none; font-family: var(--font); font-size: clamp(19px, 1.55vw, 23px); font-weight: 500; letter-spacing: -0.012em; line-height: 1.4; color: var(--color-text-primary); text-align: left; cursor: pointer; transition: color var(--dur-fast) var(--ease-color); gap: var(--gap-mlg); outline: none; -webkit-tap-highlight-color: transparent; }
.wz-blog-faq-question:hover { color: var(--brand-green-text); }
.wz-blog-faq-question:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--r-sm); }
.wz-blog-faq-question-text { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; flex: 1; }
.wz-blog-faq-icon { width: 28px; height: 28px; min-width: 28px; display: flex; align-items: center; justify-content: center; transition: transform var(--dur-default) var(--ease); }
.wz-blog-faq-icon svg { width: 16px; height: 16px; color: var(--color-text-muted); transition: transform var(--dur-default) var(--ease), color var(--dur-fast) var(--ease-color); }
.wz-blog-faq-question:hover .wz-blog-faq-icon svg { color: var(--brand-green-text); }
.wz-blog-faq-item.wz-faq-open .wz-blog-faq-icon svg { transform: rotate(45deg); color: var(--brand-green-text); }
.wz-blog-faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--dur-default) var(--ease-entrance); }
.wz-blog-faq-answer-inner { padding: 0 0 var(--pad-inner-sm); font-size: var(--text-sm); font-weight: 400; line-height: 1.75; color: var(--color-text-secondary); }

/* ── End line — one quiet sentence with inline link ── */
.wz-blog-end-line { max-width: var(--bp-content-w); margin: var(--gap-2xl) auto 0; padding: 0 var(--pad-inner); font-size: var(--text-xs); line-height: 1.65; color: var(--color-text-secondary); }
.wz-blog-end-line a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--green-wash-35); transition: text-decoration-color var(--dur-fast) var(--ease-color); }
.wz-blog-end-line a:hover { text-decoration-color: var(--accent-text); }

/* ── Related reads — 2026-05-27 v2: card-grid replaces the bland flat list.
   Was a stack of 1px-bordered rows with small muted text reading as
   "all white"; now a 2-up card grid with category eyebrow chips, larger
   editorial titles, author meta, and hover lift. */
.wz-blog-related {
  max-width: var(--bp-content-w);
  margin: var(--gap-2xl) auto 0;
  padding: var(--gap-mlg) var(--pad-inner);
  background: var(--green-wash-08);
  border: 1px solid var(--green-wash-15);
  border-radius: var(--r-lg);
}
article.wz-blog-post .wz-blog-related-heading {
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--color-text-primary);
  margin: 0 0 var(--gap-mlg);
  padding-bottom: var(--gap-sm);
  border-bottom: 1px solid var(--green-wash-15);
}
.wz-blog-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}
@media (min-width: 720px) {
  .wz-blog-related-list { grid-template-columns: 1fr 1fr; }
}
.wz-blog-related-item {
  border-bottom: 0;
  background: var(--surface-card, var(--color-page));
  border: 1px solid var(--n100);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 1px 0 var(--navy-shadow),
              0 2px 6px var(--navy-shadow);
  transition: border-color var(--dur-fast) var(--ease-color),
              box-shadow var(--dur-default) var(--ease-color),
              transform var(--dur-fast) var(--ease);
}
.wz-blog-related-item:hover {
  border-color: var(--green-wash-32);
  box-shadow: 0 2px 0 var(--green-wash-06),
              0 10px 24px var(--green-wash-10);
  transform: translateY(-2px);
}
.wz-blog-related-link {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
}
.wz-blog-related-link:hover { opacity: 1; text-decoration: none; }
.wz-blog-related-thumb {
  aspect-ratio: 16/9;
  width: 100%;
  overflow: hidden;
  background: var(--gray-1);
}
.wz-blog-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wz-blog-related-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: var(--gap-md);
}
.wz-blog-related-cat {
  display: inline-flex;
  align-self: flex-start;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-green-text);
  background: var(--green-wash-10);
  border: 1px solid var(--green-wash-22);
  border-radius: var(--r-sm);
  padding: 3px 8px;
}
article.wz-blog-post .wz-blog-related-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
}
.wz-blog-related-author {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
  margin-top: 2px;
}
.wz-blog-related-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--gap-mlg);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--brand-green-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-color),
              transform var(--dur-fast) var(--ease);
}
.wz-blog-related-all::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease);
}
.wz-blog-related-all:hover { color: var(--brand-green); }
.wz-blog-related-all:hover::after { transform: translateX(3px); }

/* ── Author — inline, minimal ── */
.wz-blog-author { max-width: var(--bp-content-w); margin: var(--gap-xl) auto 0; padding: 0 var(--pad-inner) var(--section-tight-v); }
.wz-blog-author-card { display: flex; align-items: center; gap: var(--gap-tween); padding: var(--gap-md) 0 0; background: none; border: none; box-shadow: none; border-radius: 0; border-top: 1px solid var(--color-border); }
.wz-blog-author-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.wz-blog-author-info { flex: 1; }
.wz-blog-author-name { font-size: var(--text-eyebrow); font-weight: 600; color: var(--color-text-primary); margin-bottom: var(--gap-2xs); }
.wz-blog-author-role { font-size: var(--text-eyebrow); color: var(--color-text-tertiary); font-weight: 500; }
.wz-blog-author-bio { display: none; }
.wz-blog-author-links { display: flex; align-items: center; gap: var(--gap-sm); }
.wz-blog-author-link { font-size: var(--text-eyebrow); font-weight: 500; color: var(--color-text-tertiary); text-decoration: none; transition: color var(--dur-fast) var(--ease-color); }
.wz-blog-author-link:hover { color: var(--color-text-primary); }
.wz-blog-author-link-cta { background: none; color: var(--accent-text); padding: 0; border-radius: 0; }

/* ── Sidebar CTA — hidden (single column, no sidebar) ── */
.wz-blog-sidebar-cta { display: none; }

/* ── Chapter indicator ── */
.wz-blog-chapter-indicator { display: none; }

/* ── Progress bar ── */
/* 2026-05-27 v2: was at top: var(--nav-h) (3px strip below the nav) — got
   visually erased by the nav's bottom shadow + 0.97 backdrop. Moved INTO
   the nav at its bottom edge, height bumped to 4px, z-index lifted above
   the nav's open state (199) so the bar reads clearly on every state. */
.wz-blog-progress-bar { position: fixed; top: var(--nav-h); left: 0; height: 3px; width: 0%; background: var(--brand-green); z-index: 300; pointer-events: none; transition: width 0.15s linear; box-shadow: 0 1px 3px var(--green-wash-35); }

/* ── Code blocks ── */
.wz-blog-content pre { background: var(--n900); color: var(--color-page); padding: var(--gap-md) var(--pad-inner-sm); border-radius: var(--r-md); font-size: var(--text-eyebrow); line-height: 1.7; overflow-x: auto; margin: var(--gap-mlg) 0; max-width: 100%; }
.wz-blog-content code { font-size: 0.9em; background: var(--gray-1); padding: 2px 6px; border-radius: var(--r-sm); color: var(--color-text-primary); }
.wz-blog-content pre code { background: none; padding: 0; color: inherit; }

/* ── Horizontal rule ── */
.wz-blog-content hr { border: none; height: 1px; background: var(--gray-2); margin: var(--section-tight-v) 0; }

/* ── Footnotes — editorial, numbered ── */
.wz-blog-footnotes { margin: var(--section-tight-v) 0 0; padding: var(--gap-mlg) 0 0; border-top: 1px solid var(--color-border-subtle); }
.wz-blog-footnotes-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--pad-inner-xs); }
.wz-blog-footnotes ol { list-style: none; counter-reset: footnote; padding-left: 0; margin: 0; }
.wz-blog-footnotes li { counter-increment: footnote; position: relative; padding-left: calc(22px + var(--gap-sm)); margin-bottom: var(--gap-sm); font-size: var(--text-eyebrow); line-height: 1.7; color: var(--color-text-secondary); }
.wz-blog-footnotes li::before { content: counter(footnote); position: absolute; left: 0; top: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); background: var(--white); border-radius: var(--r-sm); border: 1px solid var(--color-border-subtle); }
.wz-blog-footnotes li a { color: var(--brand-green-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
/* Inline footnote ref — superscript number */
.wz-blog-content sup.fn-ref { font-size: 12px; font-weight: 600; line-height: 1; vertical-align: super; }
.wz-blog-content sup.fn-ref a { color: var(--brand-green-text); text-decoration: none; padding: 1px 4px; border-radius: var(--r-sm); background: var(--color-accent-dim); transition: background var(--dur-fast) var(--ease-color); }
.wz-blog-content sup.fn-ref a:hover { background: var(--color-accent-dim); opacity: 0.7; }

/* ── Disclaimer — comparison post legal notice ── */
.wz-blog-disclaimer { margin: var(--gap-mlg) 0; padding: var(--pad-inner-xs) var(--gap-md); background: var(--white); border-radius: var(--r-md); border: 1px solid var(--color-border-subtle); font-size: var(--text-eyebrow); line-height: 1.7; color: var(--color-text-tertiary); font-style: normal; }
.wz-blog-disclaimer strong { font-style: normal; font-weight: 600; color: var(--color-text-secondary); }

/* ── Updated badge in meta ── */
.wz-blog-meta-updated { color: var(--brand-green-text); font-weight: 600; }

/* ── Focus ── */
article.wz-blog-post :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }

/* ── Desktop sticky rails (progressive enhancement) ──
   ≥1101px : 2-col — sticky TOC rail (left) + content.
   ≥1280px : 3-col — + sticky ad rail (right).
   Both rails are sticky grid items; align-items:start keeps them at their
   natural height so they travel the full scroll of the (taller) content cell. */
@media (min-width: 1101px) {
  .wz-blog-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: clamp(56px, 5.5vw, 96px);
    align-items: start;
    max-width: clamp(1140px, 92vw, 1540px);
  }
  .wz-blog-content { max-width: 100%; margin: 0; }
  /* TOC re-stickied 2026-05-27 v3 (user chose "both sticky but quieter").
     The card chrome is dialled down below so it recedes into the rail
     instead of competing for attention with the body column. */
  .wz-blog-toc {
    display: block;
    position: sticky;
    top: calc(var(--nav-h) + var(--gap-md));
    align-self: start;
    max-height: calc(100vh - var(--nav-h) - var(--gap-lg));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (min-width: 1280px) {
  .wz-blog-layout {
    grid-template-columns: 240px minmax(0, 1fr) 300px;
    column-gap: clamp(72px, 5.5vw, 120px);
    max-width: clamp(1320px, 96vw, 1820px);
  }
  .wz-blog-rail-cta {
    display: block;
    position: sticky;
    top: calc(var(--nav-h) + var(--gap-md));
    align-self: start;
  }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .wz-blog-toc-mobile { display: block; }
}
@media (max-width: 1024px) {
  .wz-blog-header { padding: calc(var(--nav-h) + 64px) var(--pad-inner-sm) 0; }
  .wz-blog-hero-image { padding: 0 var(--pad-inner-sm); margin-bottom: var(--pad-inner-md); }
  .wz-blog-layout { padding: 0 var(--pad-inner-sm) var(--gap-xl); }
  .wz-blog-toc-mobile { padding: 0 var(--pad-inner-sm); }
  .wz-blog-faq { padding: 0 clamp(20px, 3vw, 48px); }
  .wz-blog-end-line { padding: 0 var(--pad-inner-sm); }
  .wz-blog-related { padding: 0 var(--pad-inner-sm); }
  .wz-blog-author { padding: 0 var(--pad-inner-sm) var(--pad-inner-md); }
}
@media (max-width: 768px) {
  .wz-blog-header { padding: calc(var(--nav-h) + 56px) var(--pad-inner-xs) 0; }
  .wz-blog-hero-image { padding: 0 var(--pad-inner-xs); margin-bottom: var(--gap-lg); }
  .wz-blog-layout { padding: 0 var(--pad-inner-xs) 72px; }
  .wz-blog-toc-mobile { padding: 0 var(--pad-inner-xs); }
  .wz-blog-faq { padding: 0 20px; }
  .wz-blog-end-line { padding: 0 var(--pad-inner-xs); }
  .wz-blog-related { padding: 0 var(--pad-inner-xs); }
  .wz-blog-author { padding: 0 var(--pad-inner-xs) var(--gap-lg); }
}
@media (max-width: 640px) {
  .wz-blog-hero-image { padding: 0 var(--pad-inner-xs); margin-bottom: var(--gap-lg); }
  .wz-blog-header { padding: calc(var(--nav-h) + 48px) 20px 0; }
  .wz-blog-layout { padding: 0 var(--pad-inner-xs) var(--section-tight-v); }
  .wz-blog-toc-mobile { padding: 0 var(--pad-inner-xs); }
  article.wz-blog-post h1, .wz-blog-title { font-size: clamp(32px, 9vw, 44px); line-height: 1.08; }
  .wz-blog-subtitle { font-size: clamp(19px, 4.5vw, 22px); }
  .wz-blog-end-line { padding: 0 var(--pad-inner-xs); margin-top: 72px; }
  .wz-blog-related { padding: 0 var(--pad-inner-xs); margin-top: var(--section-tight-v); }
  .wz-blog-related-link { grid-template-columns: 100px 1fr; gap: var(--gap-tween); }
  article.wz-blog-post .wz-blog-related-title { font-size: var(--text-xs); }
  .wz-blog-author { padding: 0 var(--pad-inner-xs) var(--gap-lg); }
  .wz-blog-faq { padding: 0 var(--pad-inner-xs); }
  .wz-blog-stat-callout { margin: var(--pad-inner-md) 0; }
  .wz-blog-key-takeaway { padding-left: var(--pad-inner-xs); }
}
@media (max-width: 480px) {
  .wz-blog-header { padding: calc(var(--nav-h) + 40px) 16px 0; }
  .wz-blog-layout { padding: 0 var(--gap-tween) var(--pad-inner-md); }
  .wz-blog-stat-callout-number,
  .wz-blog-stat-callout .wz-stat-number { font-size: clamp(44px, 12vw, 72px); }
}
@media (prefers-reduced-motion: reduce) { .wz-blog-progress-bar { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   MDX-style content components — added 2026-05-14
   ───────────────────────────────────────────────────────────────────
   Three drop-in HTML patterns the blog engine can emit inside the
   `content` field. Each is AEO-grade: AI engines extract them as
   discrete facts (callouts), citation-ready stats (with sources),
   and structured comparisons (tables). Tokens-only, no raw hex.
   ─────────────────────────────────────────────────────────────────── */

/* ── Callout: aside box with intent (info/warning/tip/success) ── */
.wz-blog-callout {
  display: flex;
  gap: var(--gap-tween);
  margin: var(--gap-mlg) 0;
  padding: var(--gap-mlg);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-text-tertiary);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.wz-blog-callout--info    { border-left-color: var(--accent-text); background: color-mix(in srgb, var(--accent-text) 4%, var(--color-surface-card)); }
.wz-blog-callout--warning { border-left-color: var(--navy-500); background: color-mix(in srgb, var(--navy-500) 5%, var(--color-surface-card)); }
.wz-blog-callout--tip     { border-left-color: var(--accent-text); background: color-mix(in srgb, var(--accent-text) 6%, var(--color-surface-card)); }
.wz-blog-callout--success { border-left-color: var(--accent-text); background: color-mix(in srgb, var(--accent-text) 5%, var(--color-surface-card)); }
.wz-blog-callout-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: 0;
  border-radius: 50%;
  background: currentColor;
  color: var(--color-surface-card);
}
.wz-blog-callout--info    .wz-blog-callout-icon { color: var(--accent-text); }
.wz-blog-callout--warning .wz-blog-callout-icon { color: var(--navy-500); }
.wz-blog-callout--tip     .wz-blog-callout-icon { color: var(--accent-text); }
.wz-blog-callout--success .wz-blog-callout-icon { color: var(--accent-text); }
.wz-blog-callout-body { flex: 1; }
.wz-blog-callout-body p:first-child { margin-top: 0; }
.wz-blog-callout-body p:last-child  { margin-bottom: 0; }
.wz-blog-callout-label {
  display: block;
  font-size: var(--text-eyebrow, 13px);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: var(--gap-2xs);
}

/* ── Stat: citation-ready inline stat with source ──
   Shares editorial-block DNA with .wz-blog-tldr (border-radius, padding rhythm,
   source-link treatment). Number gets confident scale; source link reads as a
   journal citation with arrow.
*/
.wz-blog-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--pad-inner-sm);
  row-gap: var(--gap-sm);
  margin: var(--gap-lg) 0;
  padding: var(--pad-inner-sm) var(--gap-mlg) var(--gap-md);
  /* White-to-mint wash + defined green edge so the stat clearly lifts off the
     white article body (resting surface is #fff post cream-ban) and reads as a
     brand-positive callout, tying to the accent rule bar below. */
  background: linear-gradient(165deg, var(--surface-card) 0%, var(--brand-green-50) 135%);
  border: 1px solid var(--green-wash-22);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.wz-blog-stat::before {
  content: '';
  position: absolute;
  left: 0; top: var(--gap-md); bottom: var(--gap-md);
  width: 3px;
  background: var(--brand-green);
  border-radius: var(--r-sm);
}
.wz-blog-stat-row {
  display: contents;
}
.wz-blog-stat-value {
  grid-row: 1;
  font-size: clamp(48px, 5.5vw, 72px);
  font-weight: var(--fw-medium);
  letter-spacing: -0.035em;
  color: var(--color-text-primary);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.wz-blog-stat-label {
  grid-row: 1;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  line-height: 1.45;
  letter-spacing: -0.01em;
  align-self: center;
  text-wrap: balance;
}
.wz-blog-stat-source {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: var(--gap-sm);
  border-top: 1px solid var(--green-wash-12);
  /* Sentence case, lighter weight: the all-caps treatment made a long
     attribution line shout and read oversized. Now it recedes as a citation. */
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-regular);
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-tertiary);
  font-style: normal;
  line-height: 1.5;
}
.wz-blog-stat-source a {
  display: inline-flex; align-items: center; gap: var(--gap-2xs);
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-color);
}
.wz-blog-stat-source a::after {
  content: '↗';
  font-size: 11px;
  opacity: 0.7;
  transition: transform var(--dur-fast) var(--ease);
}
.wz-blog-stat-source a:hover { border-bottom-color: var(--accent-text); }
.wz-blog-stat-source a:hover::after { transform: translate(2px, -2px); opacity: 1; }

/* Inline citation chip — for stats embedded in body prose.
   Usage in content: <strong>9.4 months</strong> <a class="wz-cite" href="/case-studies/">Workzoom 2024-2026</a>.
   Renders as a small pill-link that doesn't compete with body type. */
.wz-cite {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2xs);
  margin-left: var(--gap-2xs);
  padding: 1px 8px;
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--accent-text);
  background: var(--surface-tint-warm);
  border: 1px solid var(--surface-tint-warm-border);
  border-radius: var(--r-lg);
  text-decoration: none;
  vertical-align: middle;
  transition: background var(--dur-fast) var(--ease-color);
}
.wz-cite::after {
  content: '↗';
  font-size: 10px;
  opacity: 0.65;
}
.wz-cite:hover { background: var(--color-accent-dim, var(--surface-tint-warm)); }

/* Key takeaway (2026-05-27): promoted from a bare 2px left rule to a
   proper accent card — green-wash background, pill eyebrow, editorial
   body text. Pairs visually with the TL;DR card above and the TOC rail,
   so the green-accented surfaces read as one consistent answer-card
   family throughout the post. */
.wz-blog-key-takeaway {
  margin: var(--gap-xl) 0;
  padding: var(--gap-mlg) var(--gap-lg);
  background: var(--green-wash-08);
  border: 1px solid var(--green-wash-15);
  border-left: 3px solid var(--brand-green);
  border-radius: var(--r-md);
  box-shadow: none;
}
.wz-blog-key-takeaway-label {
  display: inline-flex; align-items: center; gap: var(--gap-xs);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-green-text);
  background: var(--green-wash-10);
  border: 1px solid var(--green-wash-28);
  border-radius: var(--r-md);
  padding: var(--gap-2xs) var(--gap-sm);
  margin: 0 0 var(--gap-md);
}
/* Posts emit an inline chevron SVG before the label text; constrain it to
   eyebrow scale so it reads as a mark, not an oversized graphic. Text-only
   labels (no SVG) simply render as the eyebrow with no leading mark. */
.wz-blog-key-takeaway-label svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: currentColor;
}
.wz-blog-key-takeaway p {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.65;
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}
.wz-blog-key-takeaway p + p { margin-top: var(--gap-sm); }

/* ── Trust box: category-aware credibility sign-off before the closing CTA.
   Subtle green wash (the calm non-white surface), not a card; reads as a quiet
   mark of credibility, not a callout. ── */
.wz-blog-trust-box {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  width: fit-content;
  max-width: 100%;
  margin: var(--gap-xl) auto;
  padding: var(--gap-md) var(--gap-lg);
  background: var(--green-wash-08);
  border: 1px solid var(--green-wash-15);
  border-radius: var(--r-md);
}
.wz-blog-trust-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--brand-green-text);
}
.wz-blog-trust-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
  letter-spacing: -0.005em;
}

/* ── Compare table: AEO-grade comparison structure ── */
.wz-blog-compare {
  /* Premium comparison panel: stays in the article column (no full-bleed
     breakout over the rail), hairline frame, soft shadow, a continuous
     highlighted Workzoom column, no heavy gridlines. */
  width: 100%;
  margin: var(--gap-lg) 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card);
}
.wz-blog-compare table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.wz-blog-compare-caption {
  padding: var(--gap-md) var(--gap-mlg) var(--gap-sm);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  text-align: left;
}
.wz-blog-compare thead th {
  text-align: left;
  padding: var(--gap-sm) var(--gap-mlg);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: bottom;
}
.wz-blog-compare thead th.is-us { color: var(--brand-green-text); }
/* Reset the generic blog-table dark header row (.wz-blog-content thead tr paints
   it --color-text-primary / near-black). This premium panel wants a light card
   header, not a black band — without this the grey labels render grey-on-black. */
.wz-blog-compare thead tr { background: transparent; }
.wz-blog-compare tbody td {
  padding: var(--gap-md) var(--gap-mlg);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  line-height: 1.55;
  vertical-align: top;
}
.wz-blog-compare tbody tr:last-child td { border-bottom: 0; }
.wz-blog-compare tbody td:first-child {
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
}
/* Continuous highlighted Workzoom column (header + body share one green panel). */
.wz-blog-compare .is-us {
  background: color-mix(in srgb, var(--brand-green) 6%, var(--color-surface-card));
}
.wz-blog-compare tbody td.is-us {
  color: var(--color-text-primary);
  font-weight: var(--fw-medium);
}
.wz-blog-compare-foot {
  padding: var(--gap-xs) var(--gap-mlg);
  background: var(--color-surface-inset);
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-tertiary);
  font-style: normal;
}

@media (max-width: 640px) {
  .wz-blog-callout    { padding: var(--gap-md); flex-direction: column; gap: var(--gap-sm); }
  .wz-blog-stat       { padding: var(--gap-md); }
  .wz-blog-stat-value { font-size: 40px; }
  .wz-blog-compare    { overflow-x: auto; }
  .wz-blog-compare table { min-width: 480px; }
}