/* ============================================================
   AI Catalog Score — shared design tokens
   Linked from blog HTML files + leaderboard worker output so the
   editorial surface matches the main landing's design language.
   Source of truth: index.html (root). Keep in sync when tokens
   change there.
   ============================================================ */

/* ============ DESIGN TOKENS ============ */
:root{
  --bg: #F2EEE5;
  --bg-raised: #F8F5ED;
  --bg-sunk: #EBE7DC;
  --bg-dark: #0A0A09;
  --bg-dark-raised: #121210;
  --border: #DDD8CB;
  --border-strong: #C8C3B4;
  --border-dark: #222220;

  --ink-0: #0B0B0A;
  --ink-1: #1A1916;
  --ink-2: #3A3833;
  --ink-3: #6B6860;
  --ink-4: #9A9689;
  --ink-5: #C5C1B2;
  --ink-dark-0: #F6F5EE;
  --ink-dark-1: #E8E6DC;
  --ink-dark-2: #BDBAAD;
  --ink-dark-3: #807E72;
  --ink-dark-4: #5A584F;

  --brand: #00D084;
  --brand-light: #4DE6AB;
  --brand-deep: #00A76A;
  --brand-ink: #003D26;
  --brand-wash: #E6F9F1;

  --warn: #F59E0B;
  --warn-wash: #FEF3E2;
  --crit: #E5484D;
  --crit-wash: #FCECED;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;

  --shadow-sm: 0 1px 2px rgba(20,18,10,.06);
  --shadow-md: 0 2px 4px rgba(20,18,10,.04), 0 8px 24px rgba(20,18,10,.06);
  --shadow-lg: 0 10px 30px rgba(20,18,10,.08), 0 30px 80px rgba(20,18,10,.10);

  --font-display: 'General Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --transition: 240ms var(--ease-out);
}

/* ============ BASE ============ */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin: 0; padding: 0; }
html{ scroll-behavior: smooth; scroll-padding-top: 96px; }

body{
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============ TYPOGRAPHY ============ */
h1, h2, h3, h4{
  font-family: var(--font-display);
  color: var(--ink-0);
  letter-spacing: -.022em;
  line-height: 1.18;
  font-weight: 600;
}
h1{ font-size: clamp(32px, 4vw, 44px); margin: 0 0 20px; }
h2{ font-size: clamp(24px, 2.6vw, 30px); margin: 48px 0 16px; font-weight: 600; }
h3{ font-size: 19px; margin: 32px 0 10px; font-weight: 600; }

p{ margin: 0 0 16px; font-size: 16px; color: var(--ink-1); }
.lede{ font-size: 19px; color: var(--ink-2); margin-bottom: 32px; line-height: 1.55; }

a{ color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition); }
a:hover{ color: var(--brand); }

code{
  background: var(--bg-sunk);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  font-size: 0.92em;
  font-family: var(--font-mono);
  color: var(--ink-1);
}
pre{
  background: var(--bg-dark);
  color: #9be8d6;
  padding: 18px 22px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-family: var(--font-mono);
  overflow-x: auto;
  margin: 16px 0 24px;
  line-height: 1.55;
}
pre code{ background: transparent; padding: 0; color: inherit; }

article ul, article ol{ margin: 0 0 16px 22px; }
article li{ margin-bottom: 6px; }
article em{ font-style: italic; color: var(--ink-1); }
article strong{ color: var(--ink-0); font-weight: 600; }

/* ============ CONTAINER ============ */
.container{ max-width: 1480px; margin: 0 auto; padding: 0 48px; position: relative; }
@media (max-width: 1200px){ .container{ padding: 0 32px; } }
@media (max-width: 720px){ .container{ padding: 0 20px; } }

.container-narrow{ max-width: 760px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 720px){ .container-narrow{ padding: 0 16px; } }

.container-medium{ max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px){ .container-medium{ padding: 0 16px; } }

/* ============ ARTICLE SHELL ============
   Wide top-of-page container for the hero band and the stat grid.
   Lives ABOVE .article-layout so hero + stats use the full page
   width (the user explicitly didn't want the hero trapped in the
   narrow middle column of the editorial grid). */
.article-shell{
  max-width: 1480px;
  margin: 0 auto;
  padding: 40px 48px 0;
}
@media (max-width: 1500px){ .article-shell{ padding: 40px 32px 0; } }
@media (max-width: 880px){ .article-shell{ padding: 24px 20px 0; } }

.article-shell .article-hero{
  margin: 0;
  padding: 72px 64px 64px;
  border-radius: var(--r-2xl);
}
.article-shell .article-hero h1{
  font-size: clamp(38px, 5.2vw, 64px);
  max-width: 920px;
}
.article-shell .article-hero .lede{
  font-size: 20px;
  max-width: 860px;
}
@media (max-width: 880px){
  .article-shell .article-hero{ padding: 40px 24px 36px; }
  .article-shell .article-hero h1{ font-size: 30px; }
  .article-shell .article-hero .lede{ font-size: 17px; }
}

.article-shell .stat-grid{
  margin: 28px 0 0;
}

/* ============ ARTICLE LAYOUT ============
   Below the hero shell: three-column grid for TOC + body + rail.
   The body content (.article-layout main) caps prose at ~860px for
   readability even when the column is wider, with tables / cards /
   figures allowed to break wider via .breakout. */
.article-layout{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  gap: 64px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 56px 48px 72px;
  position: relative;
}
@media (max-width: 1500px){
  .article-layout{ padding: 48px 32px 72px; gap: 48px; }
}

.article-layout main{
  min-width: 0;
}
.article-layout main > p,
.article-layout main > ul,
.article-layout main > ol,
.article-layout main > .callout,
.article-layout main section > p,
.article-layout main section > ul,
.article-layout main section > ol,
.article-layout main section > .callout{
  max-width: 860px;
}

/* Optional breakout class: lets tables / signal-cards / illustrations
   extend wider than the prose column, up to the full main column width. */
.breakout{ max-width: none !important; margin-left: 0; margin-right: 0; }
.article-toc{
  position: sticky; top: 110px;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.article-toc .toc-title{
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
  color: var(--ink-4);
  margin-bottom: 12px;
  font-weight: 600;
}
.article-toc ol{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.article-toc a{
  color: var(--ink-2);
  text-decoration: none;
  display: block;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.article-toc a:hover{ color: var(--ink-0); background: var(--bg-sunk); }
.article-toc a.is-active{
  color: var(--brand-deep);
  border-left-color: var(--brand);
  background: var(--brand-wash);
  font-weight: 600;
}
.article-rail{
  position: sticky; top: 110px;
  align-self: start;
  display: flex; flex-direction: column; gap: 18px;
}
.rail-card{
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}
.rail-card .rail-title{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 600;
}
.rail-card .rail-stat{
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-deep);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.rail-card .rail-stat-sub{
  font-size: 12px;
  color: var(--ink-3);
}
.rail-card a{
  color: var(--brand-deep);
  font-weight: 500;
  text-decoration: none;
  display: block;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  transition: color var(--transition);
}
.rail-card a:last-child{ border-bottom: 0; }
.rail-card a:hover{ color: var(--ink-0); }

/* Full-bleed breakout inside article-layout */
.fullwidth{
  grid-column: 1 / -1;
  margin: 32px -32px;
}
@media (max-width: 720px){ .fullwidth{ margin: 24px -16px; } }

@media (max-width: 1180px){
  .article-layout{
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 40px;
  }
  .article-rail{ display: none; }
}
@media (max-width: 880px){
  .article-layout{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 20px 56px;
  }
  .article-toc{ position: static; max-height: none; }
  .article-toc ol{ flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
  .article-toc a{ padding: 2px 8px; border-left: 0; }
  .article-toc a.is-active{ background: var(--brand-wash); border-radius: var(--r-sm); }
}

/* ============ BUTTONS ============ */
.btn{
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  padding: 12px 20px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
  white-space: nowrap; text-decoration: none;
}
.btn:active{ transform: translateY(1px) scale(.98); }
.btn-primary{
  background: var(--brand); color: var(--brand-ink);
  border-color: var(--brand-deep);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.4), 0 4px 16px rgba(0,208,132,.25);
  font-weight: 600;
}
.btn-primary:hover{
  background: var(--brand-deep); color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.2), 0 10px 32px rgba(0,208,132,.45);
  transform: translateY(-2px);
}
.btn-ghost{ background: var(--bg-raised); color: var(--ink-1); border-color: var(--border-strong); }
.btn-ghost:hover{ background: var(--bg-sunk); border-color: var(--ink-3); transform: translateY(-1px); }
.btn-sm{ padding: 8px 14px; font-size: 13px; border-radius: var(--r-sm); }
.btn-dark-outline{ background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.btn-dark-outline:hover{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.btn-arrow{ transition: transform var(--transition); display: inline-block; }
.btn:hover .btn-arrow{ transform: translateX(4px); }

/* ============ WORDMARK ============ */
.wordmark{ display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.wordmark .mark{
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--ink-0), var(--ink-1));
  color: var(--brand); border-radius: 9px;
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  box-shadow:
    0 2px 4px rgba(0,0,0,.08),
    0 8px 16px -4px rgba(0,208,132,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.wordmark .mark::after{
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 25% 25%, rgba(0,208,132,.22), transparent 65%);
  pointer-events: none;
}
.wordmark .mark > img{
  width: 100%; height: 100%; display: block; position: relative; z-index: 1;
  object-fit: cover; border-radius: inherit;
  filter: drop-shadow(0 0 4px rgba(0,208,132,.25));
}
.wordmark .name{
  font-family: var(--font-display); font-weight: 600; color: var(--ink-0);
  font-size: 19px; letter-spacing: -.018em;
}

/* ============ NAV (DARK sticky) ============ */
.nav{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(1.5) blur(18px);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  background: color-mix(in oklab, var(--bg-dark) 92%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.04);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.nav .container{ display: flex; align-items: center; height: 80px; gap: 36px; }
.nav .wordmark .name{ color: var(--ink-dark-0); }
.nav .wordmark .mark{
  box-shadow: 0 0 0 1px rgba(0,208,132,.25), 0 0 24px rgba(0,208,132,.18);
}
.nav nav{
  display: flex; gap: 6px;
  font-size: 15.5px; font-weight: 500;
  color: var(--ink-dark-2);
  margin-left: auto;
}
.nav nav a{
  position: relative;
  padding: 10px 16px;
  border-radius: 10px;
  color: var(--ink-dark-2);
  text-decoration: none;
  transition: color .3s, background .3s, transform .25s;
}
.nav nav a::before{
  content:''; position: absolute; inset: 0;
  background: rgba(0,208,132,.12);
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s;
  z-index: -1;
}
.nav nav a:hover{ color: #fff; transform: translateY(-1px); }
.nav nav a:hover::before{ opacity: 1; }
.nav nav a.is-active{ color: #fff; font-weight: 600; }
.nav nav a.is-active::before{ opacity: 1; background: rgba(0,208,132,.18); }
.nav .btn-primary{ margin-left: 12px; }

@media (max-width: 900px){
  .nav nav{ display: none; }
}

/* ============ CALLOUTS ============ */
.callout{
  margin: 24px 0;
  padding: 18px 22px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  font-size: 15px;
  color: var(--ink-1);
}
.callout strong{ color: var(--ink-0); }
.callout.warn{ background: var(--warn-wash); border-left-color: var(--warn); }
.callout.data{ background: var(--brand-wash); border-left-color: var(--brand); }

/* ============ TABLES ============ */
table{
  width: 100%; border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 14px;
  background: var(--bg-raised);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
table th, table td{
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table th{
  background: var(--bg-sunk);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-0);
  font-family: var(--font-body);
}
table tr:last-child td{ border-bottom: 0; }
table td.num, table td.pts, table td.pct{
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table td.pts{ font-weight: 700; color: var(--brand-deep); }

/* ============ STAT GRID ============ */
.stat-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 32px 0;
}
@media (max-width: 640px){ .stat-grid{ grid-template-columns: repeat(2, 1fr); } }

.stat{
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 18px;
  border-radius: var(--r-md);
  text-align: center;
}
.stat b{
  display: block;
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--brand-deep);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat span{
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============ ARTICLE META + STACK ============ */
.meta{
  color: var(--ink-3);
  font-size: 12px;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.stack-12 > * + *{ margin-top: 12px; }
.stack-16 > * + *{ margin-top: 16px; }

/* ============ CTA SECTION ============ */
.cta-section{
  margin: 56px 0 24px;
  padding: 36px;
  background: linear-gradient(135deg, var(--bg-dark), var(--bg-dark-raised));
  color: #fff;
  border-radius: var(--r-xl);
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-section::before{
  content:''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,208,132,.18), transparent 60%);
  pointer-events: none;
}
.cta-section h2{
  color: #fff; font-size: 26px; margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 600;
  position: relative;
}
.cta-section p{
  opacity: .85; margin-bottom: 20px; color: var(--ink-dark-1);
  position: relative;
}
.cta-section .btn{ position: relative; margin: 6px; }
.cta-section .small{
  margin-top: 12px; font-size: 13px;
  color: var(--ink-dark-3);
  font-family: var(--font-mono);
  position: relative;
}

/* ============ FOOTER ============ */
.footer{
  border-top: 1px solid var(--border);
  padding: 56px 0 32px;
  background: var(--bg);
  margin-top: 64px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
}
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 600px){ .footer-grid{ grid-template-columns: 1fr; gap: 32px; } }

.footer .blurb{
  font-size: 13.5px;
  color: var(--ink-3);
  margin-top: 18px;
  max-width: 280px;
  line-height: 1.6;
}
.footer-col-title{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 600;
}
.footer-col a{
  font-size: 14px;
  color: var(--ink-2);
  display: block;
  text-decoration: none;
  transition: color var(--transition);
}
.footer-col a:hover{ color: var(--ink-0); }
.footer-bottom{
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom span{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
}

/* ============ ARTICLE HERO (illustrated band above the lede) ============ */
.article-hero{
  position: relative;
  margin: 0 0 40px;
  padding: 64px 40px 56px;
  background: linear-gradient(135deg, var(--bg-raised) 0%, var(--brand-wash) 100%);
  border-radius: var(--r-2xl);
  border: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}
.article-hero::before{
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(0,167,106,.08) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 0%, transparent 80%);
  opacity: .55;
  pointer-events: none;
  z-index: -1;
}
.article-hero::after{
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(0,208,132,.18), transparent 70%);
  filter: blur(48px);
  pointer-events: none;
  z-index: -1;
}
.article-hero .meta{ margin-bottom: 18px; color: var(--ink-3); }
.article-hero h1{
  font-size: clamp(34px, 4.4vw, 52px);
  margin: 0 0 18px;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--ink-0);
  max-width: 820px;
}
.article-hero .lede{
  font-size: 18px;
  color: var(--ink-1);
  margin: 0;
  max-width: 780px;
}
@media (max-width: 720px){
  .article-hero{ padding: 40px 24px 36px; border-radius: var(--r-lg); }
  .article-hero h1{ font-size: 28px; }
  .article-hero .lede{ font-size: 16px; }
}

/* ============ ICON CHIP (inline illustration markers) ============ */
.icon-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--brand-wash);
  color: var(--brand-deep);
  border: 1px solid color-mix(in oklab, var(--brand) 28%, transparent);
  flex-shrink: 0;
}
.icon-chip svg{ width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* List with icon chips on the left of each item */
.icon-list{
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: flex; flex-direction: column; gap: 14px;
}
.icon-list li{
  display: flex; gap: 16px;
  align-items: flex-start;
  padding: 14px 18px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.icon-list li:hover{
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.icon-list li .body{ flex: 1; }
.icon-list li .body strong{ display: block; color: var(--ink-0); margin-bottom: 2px; font-weight: 600; }
.icon-list li .body span{ font-size: 14px; color: var(--ink-2); }

/* ============ ILLUSTRATION FIGURE ============ */
.figure{
  margin: 32px 0;
  padding: 24px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
}
.figure img{
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  margin: 0 auto;
  box-shadow: var(--shadow-md);
}
.figure figcaption{
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-3);
  font-family: var(--font-mono);
}

/* Side-by-side illustration grid for "before / after" demonstrations */
.figure-pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0;
}
@media (max-width: 680px){ .figure-pair{ grid-template-columns: 1fr; } }
.figure-pair .figure{ margin: 0; padding: 16px; }
.figure-pair .figure img{ aspect-ratio: 4/3; object-fit: cover; }

/* ============ ANIMATED HOVER for post cards / signal cards ============ */
.lift-hover{ transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.lift-hover:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

/* ============ SCROLL REVEAL ============
   The IntersectionObserver script in each page adds .is-visible when a
   .reveal element scrolls into view. Pure CSS fallback keeps content
   visible if JS is off (no FOUC of hidden content). */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
    will-change: opacity, transform;
  }
  .reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-stagger > *{
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  }
  .reveal-stagger.is-visible > *{ opacity: 1; transform: translateY(0); }
  .reveal-stagger.is-visible > *:nth-child(2){ transition-delay: .08s; }
  .reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .16s; }
  .reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .24s; }
  .reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .32s; }
  .reveal-stagger.is-visible > *:nth-child(6){ transition-delay: .40s; }
}

/* ============ ANIMATED COUNTERS (used on stat grids) ============ */
.stat b.count-up{
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ============ DECORATIVE BACKDROP (page-level) ============
   Subtle dot grid + soft brand glow behind the article for visual depth
   without competing with the editorial. */
.editorial-backdrop{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: radial-gradient(rgba(0,167,106,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000 0%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000 0%, transparent 90%);
}