/* ============================================================
   TrueMetriks - Blog (W-6)
   Serves: /blog (index), /blog/<slug>/ (post pages),
           /author/<slug>/ (author profile pages).
   All colors via tokens.css custom properties (badge colors are
   the documented exception below). Light + dark themes via the
   existing [data-theme="dark"] selectors when needed.
   ============================================================ */

/* ============================================================
   BLOG INDEX - hero + featured + grid
   ============================================================ */

.blog {
  width: 100%;
}

.blog__container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-5);
  padding-bottom: var(--space-9);
}
@media (min-width: 768px) {
  .blog__container { padding-inline: var(--space-6); }
}

.blog-hero {
  padding-top: var(--space-7);
  padding-bottom: var(--space-8);
  text-align: center;
}
@media (max-width: 768px) {
  .blog-hero { padding-top: 24px; padding-bottom: var(--space-5); }
}
.blog-hero__eyebrow {
  display: inline-block;
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: var(--space-3);
}
/* Amber accent on the blog hero eyebrow in dark mode only. Light mode
   keeps the brand-blue from the base rule. */
[data-theme="dark"] .blog-hero__eyebrow {
  color: var(--color-accent-amber);
}
.blog-hero h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extra);
  letter-spacing: -0.02em;
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .blog-hero h1 { font-size: var(--font-size-3xl); }
}
.blog-hero__lead {
  max-width: var(--container-narrow);
  margin: 0 auto;
  font-size: var(--font-size-blog-lead);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* Post grid: fixed 3 per row on desktop, 2 on tablet, 1 on mobile.
   Equal cards wrap to new rows of three. */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
/* Drop to 2 columns before the 3-up cards get too narrow for the one-line meta
   (longest badge + date + read time needs ~290px of card body), and to a single
   centered column before the 2-up cards do. */
@media (max-width: 1140px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .blog-grid {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
  }
}

.blog-card {
  background: var(--color-surface);
  /* No border: the 1px light line traced every card's image edges and read as
     a white edge on dark/colored thumbnails (Fahir, 2026-06-17). A soft shadow
     defines the card instead, so images run clean to the rounded edge. */
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 20px -8px rgba(37, 42, 82, 0.18);
  transition: transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(37, 42, 82, 0.26);
}
/* White card on the dark blog page: defined by depth/glow, no border line (the
   1px edge traced the image and read as a white line on dark thumbnails). */
[data-theme="dark"] .blog-card {
  background: #FFFFFF;
  box-shadow: 0 16px 44px -12px rgba(0, 0, 0, 0.72),
              0 0 26px rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .blog-card:hover {
  box-shadow: 0 22px 54px -12px rgba(0, 0, 0, 0.80),
              0 0 32px rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .blog-card__title,
[data-theme="dark"] .blog-card__title a { color: #0F0F0F; }
[data-theme="dark"] .blog-card__deck { color: #2E3340; }
[data-theme="dark"] .blog-card__meta { color: #4B5160; }

.blog-card > a { display: block; }
.blog-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* cover, NOT contain: contain pillarboxes (leaves blank card background on the
     left/right) whenever the image ratio is a hair off the box ratio, which read
     as a white edge on colored thumbnails. cover fills the whole box, no blank
     space, cropping only a couple of imperceptible pixels (Fahir, 2026-06-17). */
  object-fit: cover;
  display: block;
  /* Separator under the hero so white-background images (e.g. dashboard
     screenshots) do not blend into the white card body. Fixed light color so
     it stays identical in dark mode, where the card itself stays white. */
  border-bottom: 1px solid #D5DAEB;
}
.blog-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.blog-card__title a { color: inherit; }
.blog-card__deck {
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 var(--space-4);
}
/* Meta row stays on ONE line on every card: badge + date + read time, never
   wrapping. The badge is compacted so even the longest category (Server-Side
   Tracking) fits beside the date and read time; the grid breakpoints below keep
   the card wide enough that this single line never overflows. */
.blog-card__meta {
  margin-top: auto;
  font-size: 12px;
  color: var(--color-text-subtle);
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}
.blog-card__meta > * { flex: none; }
.blog-card__meta .post-category {
  font-size: 10px;
  letter-spacing: 0.02em;
  padding: 3px 7px;
}
.blog-card--hidden { display: none; }

/* ---- Pagination (client-side, below the grid) ---------------------------
   Numbered Prev/Next pager built by blog-search.js. Hidden when there is only
   one page. Mirrors the filter pills: keeps its LIGHT look in dark mode so the
   whole control set is identical in both themes (the active page stays the
   fixed brand blue, so it needs no dark override). */
.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-9);
}
.blog-pagination__btn {
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--surface-tint-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out),
              background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.blog-pagination__btn:hover:not(:disabled) { border-color: var(--color-border-strong); }
.blog-pagination__btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.blog-pagination__btn--active,
.blog-pagination__btn--active:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #FFFFFF;
  cursor: default;
}
/* Disabled Prev/Next (NOT opacity, which made it a barely-visible ghost).
   Light: a WHITE pill like the enabled buttons so it stays a visible pill on the
   pale-lavender page (a grayed fill blended into that background); only the muted
   text + default cursor signal disabled. Dark gets its own grayed fill below. */
.blog-pagination__btn:disabled {
  background: #FFFFFF;
  border-color: #D5DAEB;
  color: #9098AC;
  cursor: default;
}
.blog-pagination__ellipsis {
  min-width: 24px;
  text-align: center;
  color: var(--color-text-subtle);
  font-weight: 600;
}
/* :not(:disabled) so the disabled pill keeps its grayed style above (otherwise
   this equal-specificity rule, later in the file, would repaint it white). */
[data-theme="dark"] .blog-pagination__btn:not(:disabled) {
  background: #FFFFFF;
  border-color: #D5DAEB;
  color: #0F0F0F;
}
[data-theme="dark"] .blog-pagination__btn:hover:not(:disabled) { border-color: #B7BFE0; }
[data-theme="dark"] .blog-pagination__btn--active,
[data-theme="dark"] .blog-pagination__btn--active:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #FFFFFF;
}
/* Dark disabled: a grayed off-white fill that reads clearly against the dark
   page (the white enabled pills are crisp; this one is muted). */
[data-theme="dark"] .blog-pagination__btn:disabled {
  background: #E6E9F2;
  border-color: #D5DAEB;
  color: #6B7280;
}
[data-theme="dark"] .blog-pagination__ellipsis { color: #B7BFE0; }

/* Search bar above the grid */
.blog-search {
  max-width: 520px;
  margin: 0 auto var(--space-5);
}
/* Clickable category filter pills below the search. Filtering is client-side
   in blog-search.js (combines with the search query). */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto var(--space-7);
}
.blog-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--surface-tint-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out),
              background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.blog-filter:hover:not(.blog-filter--active) { border-color: var(--color-border-strong); }
.blog-filter:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
/* Dot is brand blue on every pill by default (per Fahir), turning white when
   the pill is active (below). Fixed hex so it is identical in both themes. */
.blog-filter__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-brand);
  flex: none;
}
/* Post-count chip. Fixed colors because the pill is white in both themes. */
.blog-filter__count {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--radius-full);
  background: #EDF0F7;
  color: #5B6172;
}
/* Active pill: always the brand-blue fill (the SAME on every category), white
   text, a white dot and a translucent-white count chip. Inactive pills keep
   their own category-colored dot; only the active one turns its dot white. */
.blog-filter--active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #FFFFFF;
}
/* White dot when active. Qualified with [data-category] so it ties the
   per-category dot-color rules on specificity and wins on source order;
   without this the dot keeps its category color (e.g. blue dot on the blue
   fill = invisible). */
.blog-filter--active[data-category] .blog-filter__dot { background: #FFFFFF; }
.blog-filter--active .blog-filter__count {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}
/* Keep the LIGHT look in dark mode for INACTIVE pills (white pill, dark text),
   matching the cards and search input. The :not(--active) scope is load-bearing:
   without it this rule (equal specificity, later in the file) would override the
   active pill's category-color fill and paint it white in dark mode. The active
   fill, dot and count are fixed hex, so they carry over to dark unchanged. */
[data-theme="dark"] .blog-filter:not(.blog-filter--active) {
  background: #FFFFFF;
  border-color: #D5DAEB;
  color: #0F0F0F;
}
[data-theme="dark"] .blog-filter:hover:not(.blog-filter--active) { border-color: #B7BFE0; }
[data-theme="dark"] .blog-filter--active { color: #FFFFFF; }
/* Search field: a magnifier icon sits inside the rounded input. */
.blog-search__field { position: relative; }
.blog-search__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-subtle);
  pointer-events: none;
}
[data-theme="dark"] .blog-search__icon { color: #6B7280; }
.blog-search__input {
  width: 100%;
  padding: 14px 18px 14px 48px;
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  transition: border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.blog-search__input::placeholder { color: var(--color-text-subtle); }
.blog-search__input:hover { border-color: var(--color-border-strong); }
/* Stay white on the dark page, matching the cards (dark text on white). */
[data-theme="dark"] .blog-search__input {
  background: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.30);
  color: #0F0F0F;
}
[data-theme="dark"] .blog-search__input::placeholder { color: #4B5160; }
.blog-search__input:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-color: var(--color-brand);
}
.blog-search__empty {
  text-align: center;
  color: var(--color-text-muted);
  margin: var(--space-7) 0;
}
/* Visually-hidden live region for screen-reader match counts. */
.blog-search__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   CATEGORY BADGES
   Saturated brand colors for visual differentiation. Documented
   exception to the no-hardcoded-hex rule (similar to chart hexes
   in home.css line 696). Same in both themes.
   ============================================================ */
.post-category {
  display: inline-block;
  align-self: flex-start; /* prevents stretching when parent is flex-column */
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  color: #FFFFFF;
}
.badge-attribution                              { background: #2233FF; }    /* brand-blue */
.badge-sst                                      { background: #5C82FF; }    /* brand-2 light blue */
.badge-privacy, .badge-privacy-compliance       { background: #047857; }    /* deeper green for white-text WCAG AA */
.badge-paid-media                               { background: #D97706; }    /* deeper amber for white-text contrast */
.badge-analytics                                { background: #8B5CF6; }    /* purple - distinct from brand */
.badge-industry                                 { background: #6B7280; }    /* neutral gray */

/* ============================================================
   POST PAGE
   Two-column layout: TOC sidebar (sticky) + main content.
   ============================================================ */

/* Narrow the article column on post pages, but NOT the sticky header bar
   (.site-nav__inner is also a .container). Without the :not(), this rule's
   higher specificity clamped the header to --container-wide and overrode the
   1500px in components.css, crowding the 7-item nav so "Chrome Extension"
   wrapped. Excluding the nav keeps the post header identical to every other
   page. */
.post-page .container:not(.site-nav__inner) {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.page-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-7);
  padding-block: var(--space-7);
}
/* min-width:0 lets the content column shrink below its min-content size, so a
   wide non-wrapping child (code block, long URL) scrolls inside itself instead
   of forcing the whole page wider than the viewport and clipping the post. */
.page-layout > * { min-width: 0; }
@media (max-width: 1024px) {
  .page-layout { grid-template-columns: minmax(0, 1fr); }
}

.page-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-5));
  align-self: start;
  font-size: var(--font-size-sm);
}
@media (max-width: 1024px) {
  .page-sidebar { display: none; }
}
.toc-title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.toc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.toc-list a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: var(--space-3);
  transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.toc-list a:hover {
  color: var(--color-text);
  border-left-color: var(--color-brand);
}

.breadcrumbs {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs .separator { color: var(--color-text-subtle); }
.breadcrumbs .current { color: var(--color-text); font-weight: var(--font-weight-semibold); }

.post-header {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
}
.post-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extra);
  letter-spacing: -0.02em;
  line-height: var(--line-height-tight);
  color: var(--color-text);
  /* Reduced top margin: the category badge moved out of the header into the
     meta row, so the title sits a little higher under the breadcrumbs. */
  margin: var(--space-2) 0 var(--space-4);
}
@media (max-width: 768px) {
  .post-title { font-size: var(--font-size-3xl); }
}
.post-deck {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
}
.post-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.post-meta-sep { opacity: 0.5; }
/* Category badge now lives in the meta row (after the read time); center it
   against the date/read-time text instead of top-aligning. */
.post-meta .post-category { align-self: center; }

.post-tldr {
  background: var(--color-surface-alt);
  border-left: 4px solid var(--color-brand);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}
.post-tldr strong {
  color: var(--color-brand);
  margin-right: var(--space-2);
}

/* Blog images align with the prose: they keep the container's side padding so
   there is a left/right gap matching the text instead of running edge to edge
   (Fahir, 2026-06-27). Zero horizontal margin = the image fills the content
   width, not the full viewport; the img scales in proportion (height auto), so
   there is no distortion. Rounded corners kept. */
.post-featured-image {
  margin: var(--space-6) 0;
}
.post-featured-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}
/* No border in light mode; whitish frame only in dark (Fahir). border-box
   keeps the 2px inside the 100% width - no overflow at 360px. */
[data-theme="dark"] .post-featured-image img {
  border: 2px solid rgba(255, 255, 255, 0.7);
}

/* In-body article images (figure inside .blog-content). Same treatment as the
   featured image: aligned to the prose (left/right gap, not edge to edge),
   rounded, no border in light, whitish 2px frame in dark. */
.post-body-image {
  margin: var(--space-6) 0;
}
.post-body-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
  cursor: zoom-in;
}
.post-body-image figcaption {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}
[data-theme="dark"] .post-body-image img {
  border: 2px solid rgba(255, 255, 255, 0.7);
}
/* In-body image: opt-in light-mode border (mirrors the featured --bordered
   modifier) for images whose background blends into the white page. Scoped
   per-post via the modifier so other posts are untouched. Dark mode already
   frames it via the rule above. */
.post-body-image--bordered img {
  border: 1px solid var(--color-border-strong);
}

/* Featured image: opt-in light-mode border for posts whose hero blends into the
   white page. Scoped per-post via the --bordered modifier so other posts are
   untouched. Dark mode already has its own whitish frame (higher specificity
   below wins), so this only shows in light mode. */
.post-featured-image--bordered img {
  border: 1px solid var(--color-border-strong);
}

/* Click-to-zoom lightbox for in-body article images (built by blog-lightbox.js) */
.tm-lightbox {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 10);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(8, 8, 30, 0.86);
  cursor: zoom-out;
}
.tm-lightbox.is-open {
  display: flex;
}
.tm-lightbox img {
  max-width: 95vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.tm-lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.tm-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.26);
}
@media (prefers-reduced-motion: no-preference) {
  .tm-lightbox img {
    animation: tm-lightbox-in 0.18s ease-out;
  }
  @keyframes tm-lightbox-in {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: none; }
  }
}

.blog-content {
  max-width: 720px;
  font-size: var(--font-size-blog-body);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  overflow-wrap: break-word;
}
.blog-content h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  line-height: var(--line-height-snug);
  color: var(--color-text);
  margin: var(--space-7) 0 var(--space-4);
}
.blog-content h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text);
  margin: var(--space-6) 0 var(--space-3);
}
.blog-content p {
  margin-bottom: var(--space-4);
}
.blog-content ul, .blog-content ol {
  margin: 0 0 var(--space-4) var(--space-5);
}
.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content li { margin-bottom: var(--space-2); }
.blog-content a { color: var(--color-brand); }
.blog-content a:hover { color: var(--color-brand-hover); }
.blog-content code {
  font-family: var(--font-family-mono);
  background: var(--color-surface-alt);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.92em;
}
/* Block code: padded box. Font is sized so a typical example fits the 720px
   desktop column WITHOUT a horizontal scrollbar; on narrow screens it drops
   smaller and scrolls inside the box (overflow-x) rather than widening the page. */
.blog-content pre {
  font-family: var(--font-family-mono);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  overflow-x: auto;
  font-size: 0.76em;
  line-height: var(--line-height-relaxed);
}
@media (max-width: 640px) {
  .blog-content pre { font-size: 0.7em; padding: var(--space-3); }
}
.blog-content pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  white-space: pre;
}
/* Code keeps its LIGHT look in dark mode too: fixed periwinkle box + dark
   text, identical to the light theme (same rule as the TL;DR / CTA widgets). */
[data-theme="dark"] .blog-content code {
  background: #E1E6FF;
  color: #0F0F0F;
}
[data-theme="dark"] .blog-content pre {
  background: #E1E6FF;
  border-color: #D5DAEB;
  color: #0F0F0F;
}
[data-theme="dark"] .blog-content pre code {
  background: none;
  color: #0F0F0F;
}
.blog-content blockquote {
  border-left: 3px solid var(--color-brand);
  padding-left: var(--space-4);
  margin: var(--space-5) 0;
  color: var(--color-text-muted);
  font-style: italic;
}

/* FAQ accordion (uses native <details>/<summary>) */
.faq-section {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq-section details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
}
.faq-section summary {
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  list-style: none;
  padding: var(--space-2) 0;
  position: relative;
  padding-right: var(--space-6);
}
.faq-section summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  transition: transform var(--motion-fast) var(--ease-out);
}
.faq-section details[open] summary::after {
  content: "-";
}
.faq-section details > p {
  padding-bottom: var(--space-3);
  color: var(--color-text-muted);
}

/* Author bio block (bottom of post) */
.author-bio {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-top: var(--space-7);
}
.author-avatar-img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.author-info h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.author-info p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}
.author-info a { color: var(--color-brand); }

/* ============================================================
   DARK-MODE BLOG POST OVERRIDES
   Light-mode brand-blue links/accents sit too close to the navy
   wash. Lift to the --color-link-bright token (periwinkle) for
   readability. Light mode untouched.
   ============================================================ */

/* Post body links */
[data-theme="dark"] .blog-content a {
  color: var(--color-link-bright);
}
[data-theme="dark"] .blog-content a:hover {
  color: var(--color-link-bright-hover);
}

/* TL;DR aside on tint-1 surface-alt: the "TL;DR:" label reads as plain
   white-bold (was periwinkle which blended with the surface). The inline
   link uses --color-link-on-surface (near-white) so it lifts off the
   purplish wash. Left-border accent keeps the periwinkle for visual
   continuity with body links. */
/* TL;DR locks to its LIGHT treatment in both themes (Fahir: "same color on
   both"). Light-blue panel, dark text, brand-blue accents - reads as a bright
   island on the dark page, same pattern as .blog-card / .author-bio. */
[data-theme="dark"] .post-tldr {
  background: #E1E6FF;
  border-left-color: var(--color-brand);
  color: #0F0F0F;
}
[data-theme="dark"] .post-tldr p { color: #0F0F0F; }
[data-theme="dark"] .post-tldr strong { color: var(--color-brand); }
[data-theme="dark"] .post-tldr a {
  color: var(--color-brand);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-theme="dark"] .post-tldr a:hover {
  color: var(--color-brand-hover);
}

/* Author bio locks to WHITE in both themes (Fahir). White card, dark text,
   brand-blue name + link - bright island on dark, same as .blog-card. */
[data-theme="dark"] .author-bio {
  background: #FFFFFF;
  border-color: #D5DAEB;
}
[data-theme="dark"] .author-bio .author-info h4 { color: #0F0F0F; }
[data-theme="dark"] .author-bio .author-info h4 a { color: var(--color-brand); }
[data-theme="dark"] .author-bio .author-info p { color: #2E3340; }
[data-theme="dark"] .author-bio .author-info p a {
  color: var(--color-brand);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-theme="dark"] .author-bio .author-info p a:hover {
  color: var(--color-brand-hover);
}

/* Related posts grid */
.related-posts {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.related-posts h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-5);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 768px) {
  .related-grid { grid-template-columns: 1fr; }
}

/* Share links row (icon-only buttons) */
.share-links {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  align-items: center;
}
.share-links__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  margin-right: var(--space-1);
}
.share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.share-link svg {
  width: 18px;
  height: 18px;
}
.share-link:hover {
  color: var(--color-brand);
  border-color: var(--color-brand);
  background: var(--color-surface-alt);
  transform: translateY(-1px);
}
.share-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
/* Share icons keep their LIGHT look in dark mode too (Fahir): dark glyph on a
   white circle with a light border, instead of flipping to white-on-navy. */
[data-theme="dark"] .share-link {
  color: #2E3340;
  background: #FFFFFF;
  border-color: #D5DAEB;
}
[data-theme="dark"] .share-link:hover {
  color: var(--color-brand);
  border-color: var(--color-brand);
  background: #E1E6FF;
}

/* ============================================================
   AUTHOR PROFILE PAGE
   ============================================================ */

.author-profile {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-9) var(--space-5);
}
.author-profile__header {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.author-profile__avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.author-profile__name {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extra);
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.author-profile__title {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}
.author-profile__bio {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-7);
}
.author-profile__bio p { margin-bottom: var(--space-4); }
.author-profile__posts {
  margin-top: var(--space-7);
}
.author-profile__posts h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.author-profile__posts ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.author-profile__posts li {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.author-profile__posts li a {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

/* ============================================================
   BLOG CTA WIDGETS - in-article trial/demo promo blocks
   Four reusable variants placed inside <article class="blog-content">.
   Self-contained: blog pages do NOT load marketing.css, so .btn-grad /
   .btn-light are unavailable here - the buttons below are defined locally.
   RULE (Fahir): every CTA variant must render IDENTICALLY in light and dark.
   Use fixed colors only - never a transparent fill or a theme-swapped border
   that lets the page background show through differently between themes (that
   is what made the inline nudge invisible on both backgrounds). The gradient
   variants (banner, closer) use the fixed brand-blue gradient; the card and
   inline variants use a fixed periwinkle fill (#DCE4FF) + #B7BFE0 border with
   forced-dark text, re-asserted under [data-theme="dark"] so they never sink
   into the navy wash. All button rules are scoped under .blog-cta so they win
   over the .blog-content a body-link color.
   Catalog + copy-paste snippets: plans_and_guides/blog/blog_cta_widgets.md
   ============================================================ */

.blog-cta {
  margin: var(--space-7) 0;
  border-radius: var(--radius-2xl);
}

.blog-cta__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  margin: 0;
}
.blog-cta__text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  margin: var(--space-2) 0 0;
}
.blog-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
/* Reassurance micro-line under the trial button (card/banner/closer). Per-variant
   color below; like every CTA part it must read identically in light + dark. */
.blog-cta__note {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin: var(--space-4) 0 0;
}

/* Self-contained pill buttons (scoped so they beat .blog-content a) */
.blog-cta .blog-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  line-height: 1.2;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}
.blog-cta .blog-cta__btn:hover { transform: translateY(-2px); }
.blog-cta .blog-cta__btn:active { transform: translateY(0); }

/* Gradient button - primary on LIGHT backgrounds (card, inline) */
.blog-cta .blog-cta__btn--grad {
  background: var(--gradient-brand);
  color: #FFFFFF;
  box-shadow: var(--shadow-brand);
}
.blog-cta .blog-cta__btn--grad:hover {
  color: #FFFFFF;
  box-shadow: 0 24px 60px -16px rgba(34, 51, 255, 0.6);
}

/* White button - primary on GRADIENT backgrounds (banner, closer).
   Solid vivid brand-blue text so it reads as a real CTA, not washed out. */
.blog-cta .blog-cta__btn--light {
  background: #FFFFFF;
  color: var(--color-brand);
}
.blog-cta .blog-cta__btn--light:hover { background: #FFFFFF; color: var(--color-brand-hover); }

/* Ghost (outlined) button - secondary on GRADIENT backgrounds. White border +
   solid white text, but a dark-navy translucent fill (not white) so it reads
   darker than the gradient instead of washing out (Fahir). */
.blog-cta .blog-cta__btn--ghost {
  background: rgba(11, 11, 71, 0.32);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.85);
}
.blog-cta .blog-cta__btn--ghost:hover {
  background: rgba(11, 11, 71, 0.48);
  color: #FFFFFF;
  border-color: #FFFFFF;
}

/* Dark mode: the post-body link override ([data-theme=dark] .blog-content a,
   periwinkle #93AFFF) out-specifies the button colors above and washed the
   button text out (Fahir: "transparent basically"). Re-assert solid button
   text in dark so the buttons read identically to light. */
[data-theme="dark"] .blog-cta .blog-cta__btn--light { color: var(--color-brand); }
[data-theme="dark"] .blog-cta .blog-cta__btn--light:hover { color: var(--color-brand-hover); }
[data-theme="dark"] .blog-cta .blog-cta__btn--grad { color: #FFFFFF; }
[data-theme="dark"] .blog-cta .blog-cta__btn--ghost { color: #FFFFFF; }

/* --- Variant 1 + 4: gradient banner / closer ---
   Blog-local gradient with a slightly darker right stop than the global
   --gradient-brand (#5C82FF was too light/washed against the page - Fahir).
   Identical in light + dark. */
.blog-cta--banner,
.blog-cta--closer {
  background: linear-gradient(135deg, #2233FF 0%, #3D5BFF 100%);
  color: #FFFFFF;
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-brand);
  text-align: center;
}
/* Title must be forced white: base.css `p { color: var(--color-text) }`
   otherwise made it BLACK in light mode (Fahir). */
.blog-cta--banner .blog-cta__title,
.blog-cta--closer .blog-cta__title { color: #FFFFFF; }
.blog-cta--banner .blog-cta__text,
.blog-cta--closer .blog-cta__text { color: rgba(255, 255, 255, 0.92); }
.blog-cta--banner .blog-cta__note,
.blog-cta--closer .blog-cta__note { color: rgba(255, 255, 255, 0.8); }

/* Closer = larger + centered, used once at the end of a post */
.blog-cta--closer {
  padding: var(--space-6) var(--space-7);
  text-align: center;
}
.blog-cta--closer .blog-cta__title { font-size: var(--font-size-2xl); }
.blog-cta--closer .blog-cta__text { max-width: 540px; margin-left: auto; margin-right: auto; }
.blog-cta--banner .blog-cta__actions,
.blog-cta--closer .blog-cta__actions { justify-content: center; }

/* --- Variant 2: soft card (single CTA, lighter touch) ---
   Brighter brand tint than before (#F0F3FF blended into the page - Fahir).
   Identical in light + dark: a bright periwinkle island on the dark page,
   same pattern as .blog-card. Title/text forced dark so base.css
   `p { color: var(--color-text) }` does not turn them white in dark. */
.blog-cta--card {
  background: #DCE4FF;
  border: 1px solid #B7BFE0;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  text-align: center;
}
.blog-cta--card .blog-cta__actions { justify-content: center; }
.blog-cta--card .blog-cta__title { color: #0F0F0F; }
.blog-cta--card .blog-cta__text { color: #2E3340; }
.blog-cta--card .blog-cta__note,
.blog-cta--inline .blog-cta__note { color: #555B6B; }
[data-theme="dark"] .blog-cta--card {
  background: #DCE4FF;
  border-color: #B7BFE0;
  border-left-color: var(--color-brand);
}
[data-theme="dark"] .blog-cta--card .blog-cta__title { color: #0F0F0F; }
[data-theme="dark"] .blog-cta--card .blog-cta__text { color: #2E3340; }
[data-theme="dark"] .blog-cta--card .blog-cta__note,
[data-theme="dark"] .blog-cta--inline .blog-cta__note { color: #555B6B; }

/* --- Variant 3: minimal inline nudge ---
   Self-contained filled widget (same fixed periwinkle island as the card) so
   it stays clearly visible and IDENTICAL in light + dark. Just more compact:
   one line of text with the button inline on the right. (Was transparent with
   only a left bar, which vanished into both backgrounds - Fahir.) */
.blog-cta--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  background: #DCE4FF;
  border: 1px solid #B7BFE0;
  border-left: 4px solid var(--color-brand);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin: var(--space-6) 0;
}
.blog-cta--inline .blog-cta__text { margin: 0; flex: 1 1 280px; color: #2E3340; }
/* Nudge the button + note group down so the button lines up with the centre of
   the two-line text instead of sitting at the top line (Fahir). */
.blog-cta--inline .blog-cta__actions {
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0;
  position: relative;
  top: var(--space-3);
}
.blog-cta--inline .blog-cta__note { margin-top: 0; }
.blog-cta--inline .blog-cta__btn { font-size: var(--font-size-sm); padding: var(--space-2) var(--space-5); }
[data-theme="dark"] .blog-cta--inline {
  background: #DCE4FF;
  border-color: #B7BFE0;
  border-left-color: var(--color-brand);
}
[data-theme="dark"] .blog-cta--inline .blog-cta__text { color: #2E3340; }

/* ============================================================
   v2 variants (5-8). Each has its OWN fixed colour PAIR (a soft gradient
   fill + a saturated accent), identical in light + dark (re-asserted under
   [data-theme="dark"]). Depth via soft shadows; structure via icon badges,
   a vs chip, pill list rows, and an avatar. Catalog snippets:
   plans_and_guides/blog/blog_cta_widgets.md
   ============================================================ */

/* --- Variant 5: stat-led (emerald) - eyebrow pill + gradient hero number --- */
.blog-cta--stat {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, #F4FCF8 0%, #E8F8EF 100%) padding-box,
    linear-gradient(135deg, #34D399 0%, #0E9F6E 100%) border-box;
  border: 2px solid transparent;
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-2xl);
  text-align: center;
  box-shadow: 0 22px 48px -26px rgba(16, 120, 70, 0.5);
}
.blog-cta--stat::after {  /* soft glow accent, decorative */
  content: "";
  position: absolute;
  top: -70px; right: -70px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(18, 161, 80, 0.18), transparent 70%);
  pointer-events: none;
}
.blog-cta--stat > * { position: relative; }
.blog-cta__eyebrow {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0F7A43;
  background: rgba(18, 161, 80, 0.12);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin: 0 0 var(--space-3);
}
.blog-cta--stat .blog-cta__stat {
  font-size: clamp(3rem, 9vw, 4.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  background: linear-gradient(135deg, #12A150 0%, #0B7A3B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0B7A3B;
}
.blog-cta--stat .blog-cta__title { color: #11241A; margin-top: var(--space-3); font-size: var(--font-size-lg); }
.blog-cta--stat .blog-cta__text { color: #33493D; max-width: 540px; margin: var(--space-2) auto 0; }
.blog-cta--stat .blog-cta__note { color: #4F6157; }
.blog-cta--stat .blog-cta__actions { justify-content: center; margin-top: var(--space-5); }
[data-theme="dark"] .blog-cta--stat { background: linear-gradient(160deg, #F4FCF8 0%, #E8F8EF 100%) padding-box, linear-gradient(135deg, #34D399 0%, #0E9F6E 100%) border-box; }
[data-theme="dark"] .blog-cta__eyebrow { color: #0F7A43; background: rgba(18, 161, 80, 0.12); }
[data-theme="dark"] .blog-cta--stat .blog-cta__stat { -webkit-text-fill-color: transparent; color: #0B7A3B; }
[data-theme="dark"] .blog-cta--stat .blog-cta__title { color: #11241A; }
[data-theme="dark"] .blog-cta--stat .blog-cta__text { color: #33493D; }
[data-theme="dark"] .blog-cta--stat .blog-cta__note { color: #4F6157; }

/* --- Variant 6: comparison (slate) - two elevated cards + brand vs chip --- */
.blog-cta--compare {
  background:
    linear-gradient(160deg, #F8FAFE 0%, #EDF1F9 100%) padding-box,
    linear-gradient(135deg, #A3B0D4 0%, #5E6E9E 100%) border-box;
  border: 2px solid transparent;
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  text-align: center;
  box-shadow: 0 22px 48px -28px rgba(30, 40, 80, 0.4);
}
.blog-cta--compare .blog-cta__title { color: #13182A; }
.blog-cta--compare .blog-cta__note { color: #555B6B; }
.blog-cta--compare .blog-cta__actions { justify-content: center; margin-top: var(--space-6); }
.blog-cta__compare {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  text-align: left;
}
.blog-cta__col {
  flex: 1 1 240px;
  background: #FFFFFF;
  border: 1px solid #E4E8F0;
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: 0 10px 24px -16px rgba(20, 30, 60, 0.35);
}
.blog-cta__col--bad { border-top: 3px solid #E0524A; }
.blog-cta__col--good { border-top: 3px solid #1FA85C; }
.blog-cta__col-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-full);
  font-size: 15px; font-weight: 700;
  margin-bottom: var(--space-3);
}
.blog-cta__col--bad .blog-cta__col-icon { background: #FBE3E2; color: #C0392B; }
.blog-cta__col--good .blog-cta__col-icon { background: #DEF3E6; color: #15803D; }
.blog-cta__col-label { display: block; font-weight: 700; font-size: var(--font-size-base); margin-bottom: var(--space-1); }
.blog-cta__col--bad .blog-cta__col-label { color: #C0392B; }
.blog-cta__col--good .blog-cta__col-label { color: #15803D; }
.blog-cta__col-note { display: block; font-size: var(--font-size-sm); color: #3A4150; line-height: var(--line-height-normal); }
.blog-cta__vs {
  align-self: center;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #2233FF 0%, #3D5BFF 100%);
  color: #FFFFFF;
  font-weight: 700; font-size: 12px;
  text-transform: uppercase;
  box-shadow: 0 8px 18px -8px rgba(34, 51, 255, 0.6);
}
[data-theme="dark"] .blog-cta--compare { background: linear-gradient(160deg, #F8FAFE 0%, #EDF1F9 100%) padding-box, linear-gradient(135deg, #A3B0D4 0%, #5E6E9E 100%) border-box; }
[data-theme="dark"] .blog-cta--compare .blog-cta__title { color: #13182A; }
[data-theme="dark"] .blog-cta--compare .blog-cta__note { color: #555B6B; }
[data-theme="dark"] .blog-cta__col { background: #FFFFFF; border-color: #E4E8F0; }
[data-theme="dark"] .blog-cta__col--bad .blog-cta__col-icon { background: #FBE3E2; color: #C0392B; }
[data-theme="dark"] .blog-cta__col--good .blog-cta__col-icon { background: #DEF3E6; color: #15803D; }
[data-theme="dark"] .blog-cta__col--bad .blog-cta__col-label { color: #C0392B; }
[data-theme="dark"] .blog-cta__col--good .blog-cta__col-label { color: #15803D; }
[data-theme="dark"] .blog-cta__col-note { color: #3A4150; }
[data-theme="dark"] .blog-cta__vs { color: #FFFFFF; }
/* Mobile: stack the two columns into one centred column instead of letting the
   first card and the vs chip share a row (which floats vs awkwardly to the side).
   The chip keeps its align-self:center, which now centres it horizontally between
   the two stacked cards. */
@media (max-width: 600px) {
  .blog-cta__compare { flex-direction: column; }
}

/* --- Variant 7: checklist (teal) - white pill rows + gradient check badges --- */
.blog-cta--checklist {
  background:
    linear-gradient(160deg, #F2FBFC 0%, #E2F5F8 100%) padding-box,
    linear-gradient(135deg, #22D3EE 0%, #0E7490 100%) border-box;
  border: 2px solid transparent;
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  text-align: center;
  box-shadow: 0 22px 48px -28px rgba(14, 116, 144, 0.45);
  max-width: 540px;
  margin-inline: auto;
}
.blog-cta--checklist .blog-cta__title { color: #0E2A2E; }
.blog-cta--checklist .blog-cta__note { color: #516A6E; }
.blog-cta--checklist .blog-cta__actions { justify-content: center; margin-top: var(--space-6); }
.blog-cta__list {
  list-style: none;
  margin: var(--space-5) auto 0;
  padding: 0;
  max-width: 430px;
  text-align: left;
  background: #FFFFFF;
  border: 1px solid #DDEFF2;
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 34px -20px rgba(14, 116, 144, 0.5);
  overflow: hidden;
}
.blog-cta__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  color: #14343A;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  border-top: 1px solid #ECF6F8;
}
.blog-cta__list li:first-child { border-top: none; }
/* Beat the prose `.blog-content ul` rule (margin-left: space-5), which is more
   specific than .blog-cta__list and was shoving the panel off-centre. */
.blog-cta--checklist .blog-cta__list { margin: var(--space-6) auto 0; }
.blog-cta--checklist .blog-cta__list li { margin: 0; }
.blog-cta__check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #22D3EE 0%, #0E7490 100%);
  color: #FFFFFF;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 6px 14px -7px rgba(14, 116, 144, 0.7);
}
[data-theme="dark"] .blog-cta--checklist { background: linear-gradient(160deg, #F2FBFC 0%, #E2F5F8 100%) padding-box, linear-gradient(135deg, #22D3EE 0%, #0E7490 100%) border-box; }
[data-theme="dark"] .blog-cta--checklist .blog-cta__title { color: #0E2A2E; }
[data-theme="dark"] .blog-cta--checklist .blog-cta__note { color: #516A6E; }
[data-theme="dark"] .blog-cta__list { background: #FFFFFF; border-color: #DDEFF2; }
[data-theme="dark"] .blog-cta__list li { color: #14343A; border-top-color: #ECF6F8; }
[data-theme="dark"] .blog-cta__list li:first-child { border-top: none; }
[data-theme="dark"] .blog-cta__check { color: #FFFFFF; }

/* --- Variant 8: spotlight (dark) - premium gradient panel + glow + badge --- */
.blog-cta--spotlight {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(124, 92, 255, 0.34), transparent 55%),
    linear-gradient(160deg, #171B40 0%, #0C0E2B 100%);
  border: 1px solid rgba(124, 140, 255, 0.28);
  border-radius: var(--radius-2xl);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  box-shadow: 0 28px 64px -26px rgba(10, 12, 40, 0.85);
}
.blog-cta--spotlight::after {  /* lower-right glow, decorative */
  content: "";
  position: absolute;
  bottom: -90px; right: -70px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 91, 255, 0.30), transparent 70%);
  pointer-events: none;
}
.blog-cta--spotlight > * { position: relative; }
.blog-cta__badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C9D2FF;
  background: rgba(124, 140, 255, 0.16);
  border: 1px solid rgba(124, 140, 255, 0.30);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin: 0 0 var(--space-3);
}
.blog-cta--spotlight .blog-cta__title { color: #FFFFFF; font-size: var(--font-size-2xl); }
.blog-cta--spotlight .blog-cta__text { color: rgba(226, 230, 255, 0.86); max-width: 560px; margin: var(--space-2) auto 0; }
.blog-cta--spotlight .blog-cta__note { color: rgba(201, 210, 255, 0.7); }
.blog-cta--spotlight .blog-cta__actions { justify-content: center; margin-top: var(--space-5); }
[data-theme="dark"] .blog-cta--spotlight {
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(124, 92, 255, 0.34), transparent 55%),
    linear-gradient(160deg, #171B40 0%, #0C0E2B 100%);
  border-color: rgba(124, 140, 255, 0.28);
}
[data-theme="dark"] .blog-cta__badge { color: #C9D2FF; background: rgba(124, 140, 255, 0.16); }
[data-theme="dark"] .blog-cta--spotlight .blog-cta__title { color: #FFFFFF; }
[data-theme="dark"] .blog-cta--spotlight .blog-cta__text { color: rgba(226, 230, 255, 0.86); }
[data-theme="dark"] .blog-cta--spotlight .blog-cta__note { color: rgba(201, 210, 255, 0.7); }

/* --- Responsive: stack buttons under ~480px --- */
@media (max-width: 480px) {
  .blog-cta--banner { padding: var(--space-5) var(--space-5); }
  .blog-cta--closer { padding: var(--space-6) var(--space-5); }
  .blog-cta--closer .blog-cta__title { font-size: var(--font-size-xl); }
  .blog-cta__actions { flex-direction: column; align-items: stretch; }
  .blog-cta .blog-cta__btn { width: 100%; }
  .blog-cta--inline { flex-direction: column; align-items: flex-start; }
  .blog-cta--inline .blog-cta__actions { width: 100%; top: 0; }
  .blog-cta__compare { flex-direction: column; align-items: stretch; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .blog-card {
    transition: border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
  }
  .blog-card:hover { transform: none; }
  .blog-cta .blog-cta__btn { transition: color var(--motion-fast), background-color var(--motion-fast); }
  .blog-cta .blog-cta__btn:hover { transform: none; }
}