/* =============================================================
   Zoomi · blog.css — page-specific
   Drives two surfaces:
     1. Blog INDEX (/blog) — hero, featured card, responsive grid.
     2. Blog ARTICLE (/blog/<slug>) — readable 720-max prose
        column, breadcrumb, hero image, body typography, related
        strip.
   Sits on top of design-tokens.css + components.css. Strictly
   token-driven — no hex literals, no raw rgb values.
   ============================================================= */

/* =============================================================
   1. BLOG INDEX
   ============================================================= */

.blog-hero {
  padding: var(--s-3xl) var(--page-gutter) var(--s-2xl);
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.blog-hero__eyebrow { margin-bottom: var(--s-md); }
.blog-hero__h1 {
  font-family: var(--font-heading);
  font-size: var(--t-display-sm);
  font-weight: 500;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-tight);
  margin: 0 auto var(--s-md);
  color: var(--zoomi-ink);
  max-width: 20ch;
}
.blog-hero__sub {
  font-size: var(--t-body-lg);
  color: var(--zoomi-body);
  margin: 0 auto;
  max-width: 60ch;
  line-height: var(--lh-body);
}

/* ---- Featured card ---- */
.blog-feature {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter) var(--s-3xl);
}
.blog-feature__card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-2xl);
  align-items: center;
  background: var(--accent-peach-soft);
  border-radius: var(--r-card);
  padding: var(--s-2xl);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-med) var(--ease-out);
}
.blog-feature__card:hover { transform: translateY(-2px); }
.blog-feature__media {
  border-radius: var(--r-bento);
  overflow: hidden;
  background: var(--zoomi-bg);
  aspect-ratio: 16 / 10;
}
.blog-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}
.blog-feature__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--s-sm);
  background: var(--zoomi-card);
  color: var(--zoomi-ink);
  border-radius: var(--r-pill);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  align-self: flex-start;
}
.blog-feature__title {
  font-family: var(--font-heading);
  font-size: var(--t-headline-lg);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-snug);
  color: var(--zoomi-ink);
  margin: 0;
}
.blog-feature__lede {
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
  margin: 0;
}
.blog-feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  align-items: center;
}
.blog-feature__meta .dot {
  width: 3px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--zoomi-chev);
}
.blog-feature__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: var(--t-body-md);
  font-weight: 600;
  color: var(--zoomi-ink);
  margin-top: var(--s-xs);
}

/* ---- Grid section ---- */
.blog-grid-section {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--s-xl) var(--page-gutter) var(--s-4xl);
}
.blog-grid-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-xl);
}
.blog-grid-header h2 {
  font-family: var(--font-heading);
  font-size: var(--t-headline-md);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  margin: 0;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-xl);
}

/* ---- Article card (shared: used on index AND article related strip) ---- */
.blog-card,
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--zoomi-card);
  border: 1px solid var(--zoomi-hair);
  border-radius: var(--r-bento);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.blog-card:hover,
.article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -16px color-mix(in srgb, var(--zoomi-ink) 18%, transparent);
  border-color: var(--zoomi-ink);
}
.blog-card__media,
.article-card-img {
  background: var(--accent-buttercup-soft);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.blog-card__media img,
.article-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-card__body,
.article-card-body {
  padding: var(--s-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  flex: 1;
}
.blog-card__eyebrow,
.article-card-category {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--zoomi-body);
}
.blog-card__title,
.article-card-title {
  font-family: var(--font-heading);
  font-size: var(--t-headline-sm);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-snug);
  color: var(--zoomi-ink);
  margin: 0;
}
.blog-card__lede,
.article-card-excerpt {
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
  margin: 0;
}
.blog-card__meta,
.article-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  align-items: center;
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  margin-top: auto;
  padding-top: var(--s-xs);
}
.blog-card__meta .dot,
.article-card-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--zoomi-chev);
  display: inline-block;
}
.blog-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-body-md);
  color: var(--zoomi-ink);
  margin-top: var(--s-xs);
}

/* Placeholder media (for cards with no cover image) — tints by accent */
.blog-card__placeholder { background: var(--accent-peach-soft); }
.blog-card__placeholder--mint { background: var(--accent-mint-soft); }
.blog-card__placeholder--sky { background: var(--accent-sky-soft); }
.blog-card__placeholder--blossom { background: var(--accent-blossom-soft); }
.blog-card__placeholder--amber { background: var(--accent-buttercup-soft); }

/* =============================================================
   2. BLOG ARTICLE
   ============================================================= */

.blog-article {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--s-4xl) + 32px) var(--page-gutter) var(--s-4xl);
  color: var(--zoomi-ink);
}

.blog-article__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  margin-bottom: var(--s-lg);
}
.blog-article__breadcrumb a {
  color: var(--zoomi-body);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.blog-article__breadcrumb a:hover { color: var(--zoomi-ink); }
.blog-article__breadcrumb svg { color: var(--zoomi-chev); }

.blog-article__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--s-sm);
  background: var(--accent-peach-soft);
  color: var(--zoomi-ink);
  border-radius: var(--r-pill);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--s-md);
}
/* Per-category accent tints (preserve any existing cat-* hooks) */
.blog-article__eyebrow--health,
.cat-health { background: var(--accent-mint-soft); }
.blog-article__eyebrow--safety,
.cat-safety { background: var(--accent-sky-soft); }
.blog-article__eyebrow--tech,
.cat-tech { background: var(--accent-blossom-soft); }
.blog-article__eyebrow--lost,
.cat-lost,
.cat-recovery { background: var(--accent-buttercup-soft); }
.blog-article__eyebrow--guide,
.cat-guide { background: var(--accent-peach-soft); }

.blog-article__title {
  font-family: var(--font-heading);
  font-size: var(--t-display-sm);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-tight);
  color: var(--zoomi-ink);
  margin: 0 0 var(--s-md);
}
.blog-article__lede,
.blog-article__subtitle {
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  color: var(--zoomi-body);
  margin: 0 0 var(--s-lg);
}

.blog-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  padding-bottom: var(--s-xl);
  border-bottom: 1px solid var(--zoomi-hair);
  margin-bottom: var(--s-2xl);
}
.blog-article__meta .dot {
  width: 3px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--zoomi-chev);
  display: inline-block;
}

.blog-article__hero {
  margin: 0 0 var(--s-2xl);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--zoomi-bg);
}
.blog-article__hero img,
.blog-article__hero figure {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

/* ---- Body prose typography ----
   Descendant selectors so existing article markup styles cleanly. */
.blog-article__body {
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  color: var(--zoomi-ink);
}
.blog-article__body > p,
.blog-article > p {
  margin: 0 0 var(--s-md);
  color: var(--zoomi-ink);
}
.blog-article__body h2,
.blog-article > h2 {
  font-family: var(--font-heading);
  font-size: var(--t-headline-md);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-snug);
  color: var(--zoomi-ink);
  margin: var(--s-2xl) 0 var(--s-md);
}
.blog-article__body h3,
.blog-article > h3 {
  font-family: var(--font-heading);
  font-size: var(--t-headline-sm);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-snug);
  color: var(--zoomi-ink);
  margin: var(--s-xl) 0 var(--s-sm);
}
.blog-article__body h4,
.blog-article > h4 {
  font-family: var(--font-heading);
  font-size: var(--t-title-lg);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  margin: var(--s-lg) 0 var(--s-sm);
}
.blog-article__body a,
.blog-article > p a,
.blog-article > ul a,
.blog-article > ol a {
  color: var(--zoomi-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.blog-article__body strong,
.blog-article > p strong { color: var(--zoomi-ink); font-weight: 600; }

.blog-article__body ul,
.blog-article__body ol,
.blog-article > ul,
.blog-article > ol {
  margin: 0 0 var(--s-md);
  padding-left: var(--s-lg);
  color: var(--zoomi-ink);
}
.blog-article__body li,
.blog-article > ul li,
.blog-article > ol li {
  margin-bottom: var(--s-sm);
  line-height: var(--lh-body);
}

.blog-article__body blockquote,
.blog-article > blockquote {
  margin: var(--s-xl) 0;
  padding: var(--s-lg) var(--s-xl);
  background: var(--accent-buttercup-soft);
  border-radius: var(--r-bento);
  font-size: var(--t-headline-sm);
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--zoomi-ink);
  border-left: 4px solid var(--accent-buttercup);
}

.blog-article__body img,
.blog-article > img,
.blog-article > figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-bento);
  margin: var(--s-lg) 0;
}
.blog-article__body figure,
.blog-article > figure {
  margin: var(--s-lg) 0;
}
.blog-article__body figcaption,
.blog-article > figure figcaption {
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  text-align: center;
  margin-top: var(--s-xs);
}

.blog-article__body hr,
.blog-article > hr {
  border: 0;
  height: 1px;
  background: var(--zoomi-hair);
  margin: var(--s-2xl) 0;
}

/* ---- Embedded callouts that already exist in markup ----
   Restyle the legacy classes used inside article bodies. */
.blog-article .stat-highlight {
  display: flex;
  gap: var(--s-lg);
  padding: var(--s-xl);
  background: var(--accent-mint-soft);
  border-radius: var(--r-card);
  margin: var(--s-xl) 0;
  align-items: flex-start;
}
.blog-article .stat-highlight .stat-number {
  font-family: var(--font-heading);
  font-size: var(--t-headline-lg);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  flex-shrink: 0;
  min-width: 120px;
  line-height: var(--lh-tight);
}
.blog-article .stat-highlight .stat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
}
.blog-article .stat-highlight .stat-body strong {
  font-size: var(--t-body-lg);
  color: var(--zoomi-ink);
  font-weight: 600;
}
.blog-article .stat-highlight .stat-body p {
  margin: 0;
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
}

.blog-article .article-cta-box {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  padding: var(--s-xl);
  background: var(--accent-peach-soft);
  border-radius: var(--r-card);
  margin: var(--s-xl) 0;
}
.blog-article .article-cta-box-text { display: contents; }
.blog-article .article-cta-box h3,
.blog-article .article-cta-box h4 {
  font-family: var(--font-heading);
  font-size: var(--t-headline-sm);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  margin: 0;
}
.blog-article .article-cta-box p {
  font-size: var(--t-body-md);
  color: var(--zoomi-ink);
  margin: 0;
  line-height: var(--lh-body);
}
.blog-article .article-cta-box .btn,
.blog-article .article-cta-box a.btn-primary,
.blog-article .article-cta-box a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--s-sm) var(--s-lg);
  background: var(--zoomi-ink);
  color: var(--zoomi-cta-text);
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-body-md);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.blog-article .article-cta-box .btn:hover { transform: translateY(-1px); }

/* ---- FAQ accordion (preserved structure) ---- */
.blog-article .article-faq {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  margin: var(--s-xl) 0;
}
.blog-article .article-faq-item {
  border: 1px solid var(--zoomi-hair);
  border-radius: var(--r-bento);
  background: var(--zoomi-card);
  overflow: hidden;
}
.blog-article .article-faq-q {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: var(--s-md) var(--s-lg);
  font-family: var(--font-family);
  font-size: var(--t-body-lg);
  font-weight: 600;
  color: var(--zoomi-ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-md);
}
.blog-article .article-faq-q::after {
  content: "+";
  font-size: var(--t-headline-sm);
  color: var(--zoomi-body);
  transition: transform var(--dur-fast) var(--ease-out);
  font-weight: 400;
}
.blog-article .article-faq-item.open .article-faq-q::after {
  transform: rotate(45deg);
}
.blog-article .article-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-out);
  padding: 0 var(--s-lg);
}
.blog-article .article-faq-item.open .article-faq-a {
  max-height: 1200px;
  padding: 0 var(--s-lg) var(--s-md);
}
.blog-article .article-faq-a p {
  margin: 0;
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
}

/* ---- Related strip (used by both index reuse and post pages) ---- */
.blog-article__related,
.related-section {
  background: var(--zoomi-bg);
  padding: var(--s-3xl) var(--page-gutter);
  margin: var(--s-3xl) 0 0;
}
.blog-article__related-inner,
.related-section .container {
  max-width: var(--container-max);
  margin: 0 auto;
}
.blog-article__related h2,
.related-section h2 {
  font-family: var(--font-heading);
  font-size: var(--t-headline-md);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  margin: 0 0 var(--s-xl);
}
.blog-article__related-grid,
.related-section .blog-article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-xl);
}

/* ---- Final CTA dark band (preserved markup) ---- */
.blog-article ~ .section,
.related-section ~ .section,
.blog-grid-section ~ .section {
  padding: var(--s-3xl) var(--page-gutter);
}
.blog-article ~ .section .container,
.related-section ~ .section .container,
.blog-grid-section ~ .section .container {
  max-width: var(--container-max);
  margin: 0 auto;
}
.blog-article ~ .section .dark-block,
.related-section ~ .section .dark-block,
.blog-grid-section ~ .section .dark-block {
  background: var(--zoomi-ink);
  color: var(--zoomi-card);
  border-radius: var(--r-card);
  padding: var(--s-3xl) var(--s-xl);
  text-align: center;
}
.blog-article ~ .section .dark-block h2,
.related-section ~ .section .dark-block h2,
.blog-grid-section ~ .section .dark-block h2 {
  font-family: var(--font-heading);
  font-size: var(--t-headline-lg);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-card);
  margin: 0 0 var(--s-md);
}
.blog-article ~ .section .dark-block p,
.related-section ~ .section .dark-block p,
.blog-grid-section ~ .section .dark-block p {
  font-size: var(--t-body-lg);
  color: var(--zoomi-card);
  opacity: 0.85;
  max-width: 60ch;
  margin: 0 auto var(--s-xl);
  line-height: var(--lh-body);
}
.blog-article ~ .section .final-cta-actions,
.related-section ~ .section .final-cta-actions,
.blog-grid-section ~ .section .final-cta-actions {
  display: inline-flex;
  gap: var(--s-md);
  flex-wrap: wrap;
  justify-content: center;
}
.blog-article ~ .section .btn,
.related-section ~ .section .btn,
.blog-grid-section ~ .section .btn {
  display: inline-flex;
  align-items: center;
  padding: var(--s-sm) var(--s-lg);
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-body-md);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.blog-article ~ .section .btn:hover,
.related-section ~ .section .btn:hover,
.blog-grid-section ~ .section .btn:hover { transform: translateY(-1px); }
.blog-article ~ .section .btn-primary,
.related-section ~ .section .btn-primary,
.blog-grid-section ~ .section .btn-primary {
  background: var(--zoomi-card);
  color: var(--zoomi-ink);
}
.blog-article ~ .section .btn-ghost,
.related-section ~ .section .btn-ghost,
.blog-grid-section ~ .section .btn-ghost {
  background: transparent;
  color: var(--zoomi-card);
  box-shadow: inset 0 0 0 1px var(--zoomi-hair);
}

/* ---- Sidebar TOC (preserve existing on-page nav where present) ---- */
.blog-article__layout-wrap,
.article-layout-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
}
.blog-article__layout,
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) 280px;
  gap: var(--s-2xl);
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  align-items: start;
}
.blog-article__layout .blog-article,
.article-layout .article-content {
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}
.article-sidebar { position: sticky; top: var(--s-2xl); }
.article-toc {
  background: var(--zoomi-card);
  border: 1px solid var(--zoomi-hair);
  border-radius: var(--r-bento);
  padding: var(--s-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}
.article-toc-heading {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--zoomi-body);
  margin: 0;
}
.article-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: toc;
}
.article-toc ol li { counter-increment: toc; }
.article-toc ol li a {
  display: block;
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  text-decoration: none;
  padding: 4px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.article-toc ol li a:hover,
.article-toc ol li a.toc-active {
  color: var(--zoomi-ink);
}
.article-toc-cta {
  padding: var(--s-md);
  background: var(--accent-mint-soft);
  border-radius: var(--r-inner);
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
}
.article-toc-cta p {
  margin: 0;
  font-size: var(--t-body-sm);
  color: var(--zoomi-ink);
  line-height: var(--lh-body);
}
.article-toc-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-xs) var(--s-md);
  background: var(--zoomi-ink);
  color: var(--zoomi-cta-text);
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-body-sm);
  text-decoration: none;
}

/* ---- Reading progress bar ---- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--accent-peach);
  z-index: 100;
  transition: width var(--dur-fast) linear;
}

/* ---- Visually-hidden helper preserved ---- */
.blog-article .visually-hidden,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Legacy hero markup (article-hero) — restyle to v2 ----
   Used by article pages that retain the legacy hero structure. */
.article-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--s-4xl) + 32px) var(--page-gutter) var(--s-lg);
}
.article-hero-content { display: flex; flex-direction: column; gap: var(--s-md); }
.article-breadcrumb-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  margin-bottom: var(--s-sm);
}
.article-breadcrumb-nav a {
  color: var(--zoomi-body);
  text-decoration: none;
}
.article-breadcrumb-nav a:hover { color: var(--zoomi-ink); }
.article-breadcrumb-nav svg { color: var(--zoomi-chev); }

.blog-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--s-sm);
  background: var(--accent-peach-soft);
  color: var(--zoomi-ink);
  border-radius: var(--r-pill);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  align-self: flex-start;
}

.article-hero-title {
  font-family: var(--font-heading);
  font-size: var(--t-display-sm);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-tight);
  color: var(--zoomi-ink);
  margin: 0;
}
.article-hero-subtitle {
  font-size: var(--t-body-lg);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
  margin: 0;
}
.article-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-sm);
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  padding: var(--s-md) 0 var(--s-lg);
  border-bottom: 1px solid var(--zoomi-hair);
}
.article-hero-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--zoomi-chev);
  display: inline-block;
}
.article-hero-img-wrap {
  max-width: 880px;
  margin: var(--s-lg) auto 0;
  border-radius: var(--r-card);
  overflow: hidden;
  padding: 0 var(--page-gutter);
}
.article-hero-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-card);
}

/* Article-content body — reuse blog-article body rules */
.article-content {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-xl) var(--page-gutter) var(--s-3xl);
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  color: var(--zoomi-ink);
}
.article-content > p {
  margin: 0 0 var(--s-md);
  color: var(--zoomi-ink);
}
.article-content h2 {
  font-family: var(--font-heading);
  font-size: var(--t-headline-md);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-snug);
  color: var(--zoomi-ink);
  margin: var(--s-2xl) 0 var(--s-md);
}
.article-content h3 {
  font-family: var(--font-heading);
  font-size: var(--t-headline-sm);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-snug);
  color: var(--zoomi-ink);
  margin: var(--s-xl) 0 var(--s-sm);
}
.article-content h4 {
  font-family: var(--font-heading);
  font-size: var(--t-title-lg);
  font-weight: 600;
  color: var(--zoomi-ink);
  margin: var(--s-lg) 0 var(--s-sm);
}
.article-content a {
  color: var(--zoomi-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-content ul,
.article-content ol {
  margin: 0 0 var(--s-md);
  padding-left: var(--s-lg);
}
.article-content li {
  margin-bottom: var(--s-sm);
  line-height: var(--lh-body);
}
.article-content blockquote {
  margin: var(--s-xl) 0;
  padding: var(--s-lg) var(--s-xl);
  background: var(--accent-buttercup-soft);
  border-left: 4px solid var(--accent-buttercup);
  border-radius: var(--r-bento);
  font-size: var(--t-headline-sm);
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--zoomi-ink);
}
.article-content img,
.article-content figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-bento);
  margin: var(--s-lg) 0;
}
.article-content hr {
  border: 0;
  height: 1px;
  background: var(--zoomi-hair);
  margin: var(--s-2xl) 0;
}

/* Article-content shared callouts */
.article-content .stat-highlight {
  display: flex;
  gap: var(--s-lg);
  padding: var(--s-xl);
  background: var(--accent-mint-soft);
  border-radius: var(--r-card);
  margin: var(--s-xl) 0;
  align-items: flex-start;
}
.article-content .stat-highlight .stat-number {
  font-family: var(--font-heading);
  font-size: var(--t-headline-lg);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  flex-shrink: 0;
  min-width: 120px;
  line-height: var(--lh-tight);
}
.article-content .stat-highlight .stat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
}
.article-content .stat-highlight .stat-body strong {
  font-size: var(--t-body-lg);
  color: var(--zoomi-ink);
  font-weight: 600;
}
.article-content .stat-highlight .stat-body p {
  margin: 0;
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
}
.article-content .article-cta-box {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  padding: var(--s-xl);
  background: var(--accent-peach-soft);
  border-radius: var(--r-card);
  margin: var(--s-xl) 0;
}
.article-content .article-cta-box h3,
.article-content .article-cta-box h4 {
  font-family: var(--font-heading);
  font-size: var(--t-headline-sm);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  margin: 0;
}
.article-content .article-cta-box p {
  font-size: var(--t-body-md);
  color: var(--zoomi-ink);
  margin: 0;
}
.article-content .article-cta-box .btn,
.article-content .article-cta-box a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--s-sm) var(--s-lg);
  background: var(--zoomi-ink);
  color: var(--zoomi-cta-text);
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-body-md);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.article-content .article-cta-box .btn:hover { transform: translateY(-1px); }
.article-content .article-cta-box-text { display: contents; }

/* FAQ inside article-content (legacy) */
.article-content .article-faq {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  margin: var(--s-xl) 0;
}
.article-content .article-faq-item {
  border: 1px solid var(--zoomi-hair);
  border-radius: var(--r-bento);
  background: var(--zoomi-card);
  overflow: hidden;
}
.article-content .article-faq-q {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: var(--s-md) var(--s-lg);
  font-family: var(--font-family);
  font-size: var(--t-body-lg);
  font-weight: 600;
  color: var(--zoomi-ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-md);
}
.article-content .article-faq-q::after {
  content: "+";
  font-size: var(--t-headline-sm);
  color: var(--zoomi-body);
  transition: transform var(--dur-fast) var(--ease-out);
}
.article-content .article-faq-item.open .article-faq-q::after {
  transform: rotate(45deg);
}
.article-content .article-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-out);
  padding: 0 var(--s-lg);
}
.article-content .article-faq-item.open .article-faq-a {
  max-height: 1200px;
  padding: 0 var(--s-lg) var(--s-md);
}
.article-content .article-faq-a p {
  margin: 0;
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
}

/* =============================================================
   3. MOBILE
   ============================================================= */

@media (max-width: 1080px) {
  .blog-feature__card { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-article__related-grid,
  .related-section .blog-article-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-article__layout,
  .article-layout { grid-template-columns: 1fr; gap: var(--s-xl); }
  .article-sidebar { position: static; }
  .article-toc { display: none; }
}

@media (max-width: 720px) {
  .blog-hero {
    padding-top: calc(var(--s-3xl) + 48px);
  }
  .blog-hero__h1 { font-size: var(--t-headline-lg); }
  .blog-feature { padding-bottom: var(--s-2xl); }
  .blog-feature__card { padding: var(--s-lg); gap: var(--s-lg); }
  .blog-feature__title { font-size: var(--t-headline-md); }
  .blog-grid-section { padding-bottom: var(--s-3xl); }
  .blog-grid { grid-template-columns: 1fr; gap: var(--s-lg); }
  .blog-article__related-grid,
  .related-section .blog-article-grid { grid-template-columns: 1fr; }
  .blog-article {
    padding-top: calc(var(--s-3xl) + 32px);
  }
  .blog-article__title,
  .article-hero-title { font-size: var(--t-headline-lg); }
  .blog-article__body h2,
  .article-content h2 { font-size: var(--t-headline-sm); }
  .blog-article__body h3,
  .article-content h3 { font-size: var(--t-title-lg); }
  .blog-article .stat-highlight,
  .article-content .stat-highlight {
    flex-direction: column;
    gap: var(--s-sm);
    padding: var(--s-lg);
  }
  .blog-article .stat-highlight .stat-number,
  .article-content .stat-highlight .stat-number {
    min-width: 0;
    font-size: var(--t-headline-md);
  }
  .article-hero { padding-top: calc(var(--s-3xl) + 32px); }
}