/* ==========================================================================
   blog.css — Pexafy blog index + article pages.
   Uses the global design tokens (--color-*, --sp-*, --radius-*) so dark/light
   theming comes for free. Scoped under .blog-index / .blog-article.
   ========================================================================== */

/* ── Scroll-reveal (shared) ───────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ========================================================================== *
   INDEX
   ========================================================================== */
.blog-index{padding-bottom:var(--sp-12)}

.blog-index__hero{
  padding:clamp(3rem,8vw,6rem) 0 clamp(2rem,4vw,3rem);
  text-align:center;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(139,92,246,.14), transparent 70%),
    radial-gradient(40% 90% at 80% 10%, rgba(6,182,212,.10), transparent 70%);
}
.blog-index__eyebrow{
  display:inline-block;margin-bottom:var(--sp-4);
  font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-primary);
  padding:.3rem .85rem;border-radius:999px;
  background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.22);
}
.blog-index__hero h1{
  font-size:clamp(2rem,5vw,3.25rem);line-height:1.1;max-width:16ch;margin:0 auto var(--sp-5);
}
.hero-word-accent{
  background:linear-gradient(120deg,#a78bfa,#22d3ee);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.blog-index__hero p{
  max-width:54ch;margin:0 auto;color:var(--color-text-muted);font-size:1.075rem;
}

/* Featured card */
.blog-feature{
  display:grid;grid-template-columns:1.1fr 1fr;gap:0;
  margin:clamp(2rem,5vw,3.5rem) 0;
  border:1px solid var(--color-border);border-radius:var(--radius-xl);
  overflow:hidden;background:var(--color-surface);text-decoration:none;color:inherit;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.blog-feature:hover{border-color:rgba(139,92,246,.5);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.blog-feature__media{position:relative;min-height:280px;background:var(--color-bg)}
.blog-feature__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-feature__body{padding:clamp(1.5rem,3vw,2.5rem);display:flex;flex-direction:column;gap:var(--sp-3);justify-content:center}
.blog-feature__badge{
  align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--color-accent);padding:.3rem .7rem;border-radius:999px;
  background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.25);
}
.blog-feature__body h2{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.2}
.blog-feature__body p{color:var(--color-text-muted);line-height:1.6}
.blog-feature__meta{font-size:.82rem;color:var(--color-text-muted)}
.blog-feature__cta{font-weight:600;color:var(--color-primary);margin-top:var(--sp-1)}

/* Grid of cards */
.blog-index__section-title{font-size:1.4rem;margin:var(--sp-8) 0 var(--sp-5)}
.blog-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--sp-6);
}
.blog-card{
  display:flex;flex-direction:column;border:1px solid var(--color-border);
  border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);
  text-decoration:none;color:inherit;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.blog-card:hover{border-color:rgba(139,92,246,.5);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.blog-card__img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--color-bg)}
.blog-card__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.blog-card__cat{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-primary)}
.blog-card__title{font-size:1.15rem;line-height:1.3}
.blog-card__excerpt{color:var(--color-text-muted);font-size:.92rem;line-height:1.55;flex:1}
.blog-card__meta{font-size:.78rem;color:var(--color-text-muted);margin-top:var(--sp-1)}

.blog-empty{text-align:center;color:var(--color-text-muted);padding:var(--sp-12) 0}

@media (max-width:760px){
  .blog-feature{grid-template-columns:1fr}
  .blog-feature__media{min-height:200px;position:relative}
  .blog-feature__media img{position:relative}
}

/* ========================================================================== *
   ARTICLE
   ========================================================================== */
.blog-article{padding-bottom:0}

/* Breadcrumb */
.blog-breadcrumb{padding:var(--sp-5) 0 0}
.blog-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.82rem;color:var(--color-text-muted)}
.blog-breadcrumb li:not(:last-child)::after{content:"/";margin-inline-start:.4rem;opacity:.5}
.blog-breadcrumb a{color:var(--color-text-muted);text-decoration:none}
.blog-breadcrumb a:hover{color:var(--color-primary)}
.blog-breadcrumb [aria-current]{color:var(--color-text)}

/* Header */
.blog-post__header{max-width:760px;margin-inline:auto;padding-top:var(--sp-6);text-align:center}
.blog-post__category{
  display:inline-block;margin-bottom:var(--sp-4);font-size:.75rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--color-primary);text-decoration:none;
  padding:.3rem .8rem;border-radius:999px;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.22);
}
.blog-post__title{font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.12;margin-bottom:var(--sp-4)}
.blog-post__dek{font-size:clamp(1.05rem,2.2vw,1.25rem);color:var(--color-text-muted);line-height:1.5;max-width:60ch;margin:0 auto var(--sp-6)}
.blog-post__meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.6rem;font-size:.88rem;color:var(--color-text-muted)}
.blog-post__author{display:inline-flex;align-items:center;gap:.55rem}
.blog-post__avatar,
.blog-author-box__avatar{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#8b5cf6,#06b6d4);color:#fff;font-weight:700;font-size:.9rem;flex-shrink:0;
}
.blog-post__avatar--photo,
.blog-author-box__avatar--photo{object-fit:cover;background:none}
.blog-post__author-name{display:block;font-weight:600;color:var(--color-text);line-height:1.2;text-align:start}
.blog-post__author-role{display:block;font-size:.74rem;line-height:1.2;text-align:start}
.blog-post__meta-sep{opacity:.5}

/* Social share bar */
.blog-share{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-top:var(--sp-5)}
.blog-share__label{font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);margin-inline-end:.2rem}
.blog-share__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--color-border);background:var(--color-surface);
  color:var(--color-text-muted);cursor:pointer;text-decoration:none;
  transition:color var(--transition),background var(--transition),border-color var(--transition),transform var(--transition);
}
.blog-share__btn:hover{transform:translateY(-2px);color:#fff;border-color:transparent}
.blog-share__btn--copy:hover,.blog-share__btn--more:hover{background:var(--color-primary)}
.blog-share__btn--x:hover{background:#000}
[data-theme="light"] .blog-share__btn--x:hover{background:#000}
.blog-share__btn--fb:hover{background:#1877f2}
.blog-share__btn--tg:hover{background:#229ed9}
.blog-share__btn--li:hover{background:#0a66c2}
.blog-share__btn--wa:hover{background:#25d366}
.blog-share__btn--mail:hover{background:var(--color-error)}
/* copy → check swap */
.blog-share__btn--copy .blog-share__i-check{display:none}
.blog-share__btn--copy.is-copied{background:var(--color-success);border-color:transparent;color:#fff}
.blog-share__btn--copy.is-copied .blog-share__i-link{display:none}
.blog-share__btn--copy.is-copied .blog-share__i-check{display:block}

/* Hero figure */
.blog-post__hero{max-width:960px;margin:clamp(1.5rem,4vw,2.5rem) auto 0}
.blog-post__hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-xl);background:var(--color-surface)}
.blog-post__hero figcaption{margin-top:var(--sp-2);font-size:.78rem;color:var(--color-text-muted);text-align:center}
.blog-post__hero figcaption a{color:var(--color-text-muted)}

/* Layout: TOC + prose */
.blog-post__layout{
  display:grid;grid-template-columns:240px minmax(0,720px);gap:clamp(2rem,5vw,4rem);
  justify-content:center;padding-top:clamp(2rem,5vw,3.5rem);
}
.blog-toc{position:sticky;top:84px;align-self:start;font-size:.88rem}
.blog-toc__title{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--sp-3)}
.blog-toc ol{list-style:none;display:flex;flex-direction:column;gap:.1rem;border-inline-start:1px solid var(--color-border)}
.blog-toc a{display:block;padding:.4rem .9rem;color:var(--color-text-muted);text-decoration:none;border-inline-start:2px solid transparent;margin-inline-start:-1px;line-height:1.3;transition:color var(--transition),border-color var(--transition)}
.blog-toc a:hover{color:var(--color-text)}
.blog-toc a.is-active{color:var(--color-primary);border-inline-start-color:var(--color-primary);font-weight:600}
/* Sticky-sidebar CTA — the primary conversion point of the page, so give it weight.
   The .blog-toc prefix is needed to beat `.blog-toc a{color:muted}` and keep text white,
   exactly like the /about primary button. */
.blog-toc .blog-toc__cta{
  margin-top:var(--sp-5);width:100%;gap:.45rem;
  color:#fff;
  justify-content:center;text-align:center;
  box-shadow:0 6px 18px rgba(124,58,237,.32);
  animation:blog-cta-pulse 2.6s ease-in-out infinite;
  transition:transform var(--transition),box-shadow var(--transition);
}
.blog-toc .blog-toc__cta:hover{
  color:#fff;transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(124,58,237,.45);animation:none;
}
.blog-toc__cta-arrow{display:inline-block;transition:transform var(--transition)}
.blog-toc .blog-toc__cta:hover .blog-toc__cta-arrow{transform:translateX(3px)}
@keyframes blog-cta-pulse{
  0%,100%{box-shadow:0 6px 18px rgba(124,58,237,.30)}
  50%{box-shadow:0 6px 26px rgba(124,58,237,.55)}
}
@media (prefers-reduced-motion:reduce){.blog-toc .blog-toc__cta{animation:none}}

@media (max-width:920px){
  .blog-post__layout{grid-template-columns:minmax(0,720px)}
  .blog-toc{display:none}
}

/* ── Prose typography ─────────────────────────────────────────────────── */
.blog-prose{font-size:1.075rem;line-height:1.75;color:var(--color-text)}
.blog-prose > h2{font-size:clamp(1.45rem,3vw,1.9rem);line-height:1.25;margin:2.4em 0 .7em;scroll-margin-top:84px}
.blog-prose > h2:first-child{margin-top:0}
.blog-prose h3{font-size:1.2rem;margin:1.8em 0 .6em}
.blog-prose p{margin:0 0 1.15em}
.blog-prose a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.blog-prose a:hover{color:var(--color-primary-hover)}
.blog-prose strong{color:var(--color-text);font-weight:700}
.blog-prose em{font-style:italic}
.blog-prose ul,.blog-prose ol{margin:0 0 1.3em;padding-inline-start:1.4em}
.blog-prose li{margin:0 0 .55em}
.blog-prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--color-surface-hover);padding:.12em .42em;border-radius:6px;border:1px solid var(--color-border);
}
.blog-lead{font-size:1.18rem;line-height:1.65;color:var(--color-text)}

/* Key takeaways box */
.blog-keytakeaways{
  margin:0 0 2em;padding:var(--sp-6) var(--sp-6) var(--sp-5);
  border:1px solid rgba(139,92,246,.25);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(139,92,246,.08),rgba(6,182,212,.04));
}
.blog-keytakeaways__label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--sp-3)}
.blog-keytakeaways ul{margin:0;padding-inline-start:1.2em}
.blog-keytakeaways li{margin-bottom:.5em}
.blog-keytakeaways li:last-child{margin-bottom:0}

/* Definition callout */
.blog-definition{
  padding:var(--sp-5);border-inline-start:3px solid var(--color-accent);border-radius:0 var(--radius-md) var(--radius-md) 0;
  background:var(--color-surface);font-size:1.02rem;
}

/* Blockquote */
.blog-quote{
  margin:1.6em 0;padding:var(--sp-5) var(--sp-6);font-size:1.3rem;line-height:1.45;font-weight:500;
  font-style:italic;color:var(--color-text);border-inline-start:4px solid var(--color-primary);
  background:var(--color-surface-hover);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
}

/* Demo grid (real search results) */
.blog-demo{margin:1.8em 0;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface)}
.blog-demo__bar{
  display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;
  border-bottom:1px solid var(--color-border);color:var(--color-text-muted);
  font-size:.9rem;background:var(--color-bg);
}
.blog-demo__bar span{color:var(--color-text);font-weight:500}
.blog-demo__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--color-border)}
.blog-demo__item{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--color-bg)}
.blog-demo__item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.blog-demo__item:hover img{transform:scale(1.05)}
.blog-demo__src{position:absolute;bottom:6px;left:6px;font-size:.66rem;font-weight:600;color:#fff;background:rgba(0,0,0,.6);padding:.15rem .45rem;border-radius:4px;backdrop-filter:blur(4px)}
.blog-demo__top{position:absolute;top:6px;left:6px;font-size:.62rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#fff;background:linear-gradient(120deg,#7c3aed,#06b6d4);padding:.18rem .5rem;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.blog-demo__grid--3{grid-template-columns:repeat(3,1fr)}
.blog-demo figcaption{padding:.8rem 1rem;font-size:.82rem;color:var(--color-text-muted);border-top:1px solid var(--color-border)}
.blog-demo figcaption a{color:var(--color-primary);font-weight:600}
@media (max-width:520px){.blog-demo__grid,.blog-demo__grid--3{grid-template-columns:repeat(2,1fr)}}

/* Multilingual side-by-side proof */
.blog-multilang{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin:1.6em 0}
.blog-multilang__col{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface)}
.blog-multilang__lang{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;margin:0;font-size:.9rem;font-weight:500;border-bottom:1px solid var(--color-border);background:var(--color-bg)}
.blog-multilang__flag{font-size:.66rem;font-weight:800;letter-spacing:.04em;color:#fff;background:var(--color-primary);padding:.15rem .45rem;border-radius:4px;flex-shrink:0}
.blog-multilang .blog-demo__grid{gap:2px;background:var(--color-border)}
.blog-multilang__note{padding:var(--sp-4) var(--sp-5);border-inline-start:3px solid var(--color-accent);background:var(--color-surface);border-radius:0 var(--radius-md) var(--radius-md) 0}
@media (max-width:680px){.blog-multilang{grid-template-columns:1fr}}

/* Comparison table sub-label */
.blog-table__sub{display:block;font-weight:400;text-transform:none;letter-spacing:0;font-size:.72rem;opacity:.7;margin-top:.15rem}

/* Comparison table */
.blog-table-wrap{overflow-x:auto;margin:1.6em 0;border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.blog-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:480px}
.blog-table th,.blog-table td{padding:.8rem 1rem;text-align:start;border-bottom:1px solid var(--color-border)}
.blog-table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);background:var(--color-bg)}
.blog-table thead th:last-child{color:var(--color-primary)}
.blog-table tbody td:first-child{font-weight:600;color:var(--color-text)}
.blog-table tbody td:last-child{color:var(--color-text)}
.blog-table tbody td:nth-child(2){color:var(--color-text-muted)}
.blog-table tr:last-child td{border-bottom:0}

/* Comparison table — 2/3-column variant, Pexafy = last column, highlighted */
.blog-table--compare{font-size:.92rem}
.blog-table--compare th,.blog-table--compare td{vertical-align:top;line-height:1.45}
.blog-table--compare tbody td:last-child{
  background:linear-gradient(180deg,rgba(139,92,246,.09),rgba(6,182,212,.05));
  font-weight:600;
}
.blog-table--compare thead th:last-child{background:rgba(139,92,246,.12)}

/* Comparison MATRIX — 6 columns. Fits the prose column on desktop (fixed layout,
   no min-width), scrolls on mobile with the criteria column pinned. Pexafy sits
   in column 2 so it is always on screen — the whole point of the page. */
.blog-table--matrix{table-layout:fixed;width:100%;min-width:0;font-size:.82rem}
.blog-table--matrix th,.blog-table--matrix td{
  vertical-align:top;line-height:1.4;padding:.6rem .55rem;overflow-wrap:anywhere;
}
.blog-table--matrix thead th{font-size:.72rem;padding-top:.7rem;padding-bottom:.7rem}
.blog-table--matrix th:first-child{width:21%}
.blog-table--matrix thead th:last-child{width:17.5%}
/* Criteria column: pinned while the table scrolls sideways */
.blog-table--matrix th[scope="row"],
.blog-table--matrix thead th:first-child{
  position:sticky;inset-inline-start:0;z-index:1;
  text-align:start;font-weight:600;color:var(--color-text);
  background:var(--color-surface);
  box-shadow:1px 0 0 var(--color-border);
}
.blog-table--matrix thead th:first-child{background:var(--color-bg)}
.blog-table--matrix th[scope="row"] .blog-table__sub{font-weight:400}
/* Pexafy column (last) — same treatment as any vendor's own comparison table:
   every competitor column is rendered identically, ours is simply highlighted. */
.blog-table--matrix tbody td{color:var(--color-text-muted)}
.blog-table--matrix tbody td:last-child{
  background:linear-gradient(180deg,rgba(139,92,246,.10),rgba(6,182,212,.05));
  font-weight:600;color:var(--color-text);
}
.blog-table--matrix thead th:last-child{background:rgba(139,92,246,.14);color:var(--color-primary)}
@media (max-width:780px){
  .blog-table--matrix{min-width:680px}
  .blog-table-hint{display:block}
}
.blog-table-hint{display:none;font-size:.78rem;color:var(--color-text-muted);margin:0 0 .5em}
.blog-table__note{font-size:.85rem;color:var(--color-text-muted);margin-top:-.8em}

/* Yes / no pills inside comparison cells */
.pill{
  display:inline-block;padding:.1rem .5rem;border-radius:999px;
  font-size:.76rem;font-weight:700;letter-spacing:.01em;white-space:nowrap;
}
.pill--yes{background:rgba(16,185,129,.15);color:var(--color-success,#10b981);border:1px solid rgba(16,185,129,.3)}
.pill--no{background:rgba(239,68,68,.13);color:var(--color-error,#ef4444);border:1px solid rgba(239,68,68,.28)}

/* Footnote markers & block */
.blog-fn{
  display:inline-block;min-width:1.05rem;height:1.05rem;line-height:1.05rem;text-align:center;
  margin-inline-start:.25rem;border-radius:50%;font-size:.62rem;font-weight:700;vertical-align:super;
  background:var(--color-surface-hover);color:var(--color-text-muted);border:1px solid var(--color-border);
}
.blog-footnotes{
  padding:var(--sp-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  background:var(--color-surface);font-size:.9rem;color:var(--color-text-muted);
}
.blog-footnotes p{margin:0 0 .9em}
.blog-footnotes p:last-child{margin-bottom:0}
.blog-footnotes__links{font-size:.85rem}

/* Code block */
.blog-code{margin:1.6em 0;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface)}
.blog-code__bar{
  padding:.7rem 1rem;border-bottom:1px solid var(--color-border);background:var(--color-bg);
  font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);
  display:flex;align-items:center;gap:.75rem;
}
/* Copy-to-clipboard button, injected by base_article.html (JS-only affordance:
   nothing is rendered server-side, so a no-JS reader loses nothing). */
.blog-code__copy{
  margin-inline-start:auto;flex-shrink:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.25rem .6rem;border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface);color:var(--color-text-muted);
  font:inherit;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
  transition:color var(--transition),border-color var(--transition),background var(--transition);
}
.blog-code__copy:hover{color:var(--color-primary);border-color:rgba(139,92,246,.5)}
.blog-code__copy.is-copied{color:var(--color-success,#10b981);border-color:rgba(16,185,129,.4)}
.blog-code pre{margin:0;padding:1rem;overflow-x:auto;direction:ltr;text-align:start}
.blog-code code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;line-height:1.6;
  background:none;border:0;padding:0;color:var(--color-text);white-space:pre;
}

/* Syntax tokens — hand-tagged in the article markup (no highlighter script, so
   nothing to load and nothing to fight with the CSP nonce). Dark is the default
   theme; [data-theme="light"] overrides, same convention as main.css. */
.tok-com{color:#7f8c9b;font-style:italic}
.tok-key,.tok-prop{color:#c4b5fd}
.tok-str{color:#86efac}
.tok-num{color:#fcd34d}
.tok-bool{color:#f9a8d4}
.tok-cmd{color:#67e8f9;font-weight:700}
.tok-flag{color:#93c5fd}
.tok-var{color:#fca5a5}
[data-theme="light"] .tok-com{color:#6b7280}
[data-theme="light"] .tok-key,[data-theme="light"] .tok-prop{color:#6d28d9}
[data-theme="light"] .tok-str{color:#15803d}
[data-theme="light"] .tok-num{color:#b45309}
[data-theme="light"] .tok-bool{color:#be185d}
[data-theme="light"] .tok-cmd{color:#0e7490}
[data-theme="light"] .tok-flag{color:#1d4ed8}
[data-theme="light"] .tok-var{color:#b91c1c}

/* Inline code in prose — a touch of accent so it reads as code, not as a link */
.blog-prose p > code,.blog-prose li > code,.blog-table code{color:#c4b5fd}
[data-theme="light"] .blog-prose p > code,
[data-theme="light"] .blog-prose li > code,
[data-theme="light"] .blog-table code{color:#6d28d9}

/* Product screenshot (same shell as .blog-demo, single image instead of a grid) */
.blog-shot{margin:1.8em 0;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface)}
.blog-shot img{display:block;width:100%;height:auto;background:var(--color-bg)}
.blog-shot figcaption{padding:.8rem 1rem;font-size:.82rem;color:var(--color-text-muted);border-top:1px solid var(--color-border)}
.blog-shot figcaption a{color:var(--color-primary);font-weight:600}

/* "Which one should you use" picks */
.blog-picks{list-style:none;padding-inline-start:0}
.blog-picks li{
  padding:var(--sp-4) var(--sp-5);margin-bottom:.6rem;border:1px solid var(--color-border);
  border-inline-start:3px solid var(--color-primary);border-radius:0 var(--radius-md) var(--radius-md) 0;
  background:var(--color-surface);line-height:1.6;
}

/* Tips ordered list */
.blog-tips{counter-reset:tip;list-style:none;padding-inline-start:0}
.blog-tips li{position:relative;padding-inline-start:2.6rem;margin-bottom:1em}
.blog-tips li::before{
  counter-increment:tip;content:counter(tip);
  position:absolute;left:0;top:0;width:1.85rem;height:1.85rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#06b6d4);
}

/* FAQ */
.blog-faq{margin:2.6em 0 0;padding-top:2em;border-top:1px solid var(--color-border)}
.blog-faq > h2{margin-bottom:1em}
.blog-faq__item{border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:.7rem;background:var(--color-surface);overflow:hidden}
.blog-faq__item summary{
  cursor:pointer;list-style:none;padding:1rem 1.2rem;font-weight:600;font-size:1.02rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.blog-faq__item summary::-webkit-details-marker{display:none}
.blog-faq__item summary::after{content:"+";font-size:1.3rem;font-weight:400;color:var(--color-text-muted);transition:transform var(--transition)}
.blog-faq__item[open] summary::after{transform:rotate(45deg)}
.blog-faq__answer{padding:0 1.2rem 1.1rem;color:var(--color-text-muted);line-height:1.7}
.blog-faq__answer a{color:var(--color-primary)}

/* Author box */
.blog-author-box{
  display:flex;gap:var(--sp-4);align-items:flex-start;margin:2.6em 0 0;padding:var(--sp-5);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);
}
.blog-author-box__avatar{width:48px;height:48px;font-size:1.2rem}
.blog-author-box__name{font-weight:700;margin-bottom:.2rem}
.blog-author-box__bio{font-size:.92rem;color:var(--color-text-muted);line-height:1.6;margin:0}
.blog-author-box__bio a{color:var(--color-primary);font-weight:600}

/* ── CTA band (shared index + article) ────────────────────────────────── */
.blog-cta{
  margin-top:clamp(3rem,7vw,5rem);padding:clamp(3rem,7vw,5rem) 0;text-align:center;
  background:
    radial-gradient(70% 130% at 50% 100%, rgba(139,92,246,.16), transparent 70%),
    var(--color-surface);
  border-top:1px solid var(--color-border);
}
.blog-cta h2{font-size:clamp(1.5rem,3.4vw,2.25rem);max-width:20ch;margin:0 auto var(--sp-4)}
.blog-cta p{color:var(--color-text-muted);max-width:52ch;margin:0 auto var(--sp-6);font-size:1.05rem}
.blog-cta__btns{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}
.btn-lg{padding:13px 28px;font-size:1rem}

/* ── Related ──────────────────────────────────────────────────────────── */
.blog-related{padding:clamp(2.5rem,5vw,4rem) 0}
.blog-related__title{font-size:1.5rem;margin-bottom:var(--sp-6);text-align:center}
.blog-related__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-6)}