/* ═══ Untapped Agents — Premium Editorial Experience ═══ */

/* ─── Reading Progress Bar ─── */
.rprog {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--cy);
  z-index: var(--z-reading-progress);
  transition: width 50ms linear;
}

/* ─── Article Hero ─── */
.ahero {
  position: relative;
  padding: 7.5rem 2rem 2.5rem;
  text-align: center;
  overflow: hidden;
  background: var(--bg0);
}

.ahero::before {
  display: none;
}

.ahero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--bdr);
  pointer-events: none;
}

.ahero .meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.cat-tag {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cy);
  background: var(--bg1);
  border: 1px solid var(--bdr);
  padding: 0.35rem 0.85rem;
  display: inline-block;
  border-radius: 980px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-tag:hover {
  border-color: var(--bdrh);
}

.meta-item {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.7rem;
  color: #6e6e73;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.meta-item::after {
  content: '';
  width: 4px;
  height: 4px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 50%;
}

.meta-item:last-child::after {
  display: none;
}

.meta-item span {
  color: #6e6e73;
}

.ahero h1 {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.65rem);
  color: #1d1d1f;
  line-height: 1.25;
  max-width: 720px;
  margin: 0 auto 0.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
  opacity: 0;
}

.ahero h1 em {
  font-style: italic;
  background: var(--cy);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ahero .subtitle {
  font-size: 1.02rem;
  color: #86868b;
  max-width: 540px;
  margin: 0 auto 1.25rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.01em;
  word-spacing: 0.04em;
  animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  opacity: 0;
  position: relative;
  padding-bottom: 1.75rem;
}

.ahero .subtitle::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: var(--bdrh);
}

/* ─── Article Breadcrumb ─── */
.article-breadcrumb {
  padding: 0.75rem 4rem 0.75rem 2rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky-crumbs);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.bc-back,
.bc-cat {
  color: #6e6e73;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.bc-back:hover,
.bc-cat:hover {
  color: #1d1d1f;
}

.bc-sep {
  color: #d5d5d7;
  font-size: 0.6rem;
}

.bc-cat {
  color: #6e6e73;
  font-weight: 500;
}

/* ─── Article Layout ─── */
.art-wrap {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px) 220px;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 6rem;
  position: relative;
  z-index: 1;
}

/* ─── TOC Sidebar ─── */
.toc {
  position: sticky;
  top: 5rem;
  align-self: start;
  padding-top: 1rem;
}

.toc-title {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6e6e73;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.toc a {
  display: flex;
  align-items: center;
  font-size: 0.78rem;
  color: #6e6e73;
  text-decoration: none;
  padding: 0.4rem 0 0.4rem 0.75rem;
  border-left: 2px solid transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1.45;
  position: relative;
  gap: 0.75rem;
}

.toc a::before {
  content: '';
  width: 6px;
  height: 6px;
  background: transparent;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toc a:hover {
  color: #1d1d1f;
  border-left-color: rgba(0, 0, 0, 0.12);
  padding-left: 1rem;
}

.toc a.active {
  color: #1d1d1f;
  border-left-color: #1d1d1f;
  font-weight: 500;
}

.toc a.active::before {
  background: #1d1d1f;
  opacity: 1;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

.toc::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 0;
  width: 2px;
  background: linear-gradient(180deg, #1d1d1f, transparent);
  transition: height 0.3s ease-out;
}

/* ─── Article Content ─── */
.art {
  min-width: 0;
}

.art .lead {
  font-size: 1.15rem;
  color: #6e6e73;
  font-weight: 300;
  line-height: 1.9;
  margin-bottom: 2rem;
  padding-top: 1.75rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  position: relative;
  padding-left: 3.5rem;
  letter-spacing: 0.015em;
  word-spacing: 0.06em;
}

.art .lead::first-letter {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 3.5rem;
  font-weight: 500;
  color: var(--cy);
  float: left;
  line-height: 2.5rem;
  padding-right: 0.75rem;
  margin-top: 0.25rem;
}

.art h2 {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 1.75rem;
  color: #1d1d1f;
  margin: 3rem 0 1.25rem;
  font-weight: 500;
  line-height: 1.35;
  padding-top: 1rem;
  padding-left: 1rem;
  position: relative;
}

.art h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.5em;
  background: var(--cy);
  border-radius: 2px;
}

.art h2:first-of-type {
  margin-top: 0;
}

.art h3 {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 1.1rem;
  color: #1d1d1f;
  margin: 2rem 0 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  padding-left: 0.75rem;
}

.art h3::before {
  content: '';
  position: absolute;
  left: -0.25rem;
  top: 0.5em;
  width: 4px;
  height: 4px;
  background: var(--cy);
  border-radius: 50%;
}

.art p {
  font-size: 1.02rem;
  color: #3d3d41;
  margin-bottom: 1.35rem;
  line-height: 1.85;
  letter-spacing: 0.012em;
  word-spacing: 0.05em;
}

.art p strong {
  color: #1d1d1f;
  font-weight: 600;
}

.art a {
  color: var(--cy);
  text-decoration: none;
  position: relative;
  opacity: 0.95;
  transition: opacity 0.2s;
}

.art a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--cy);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.art a:hover {
  opacity: 1;
}

.art a:hover::after {
  width: 100%;
}

/* ─── Pull Quote ─── */
.pq {
  margin: 2.5rem 0;
  padding: 2rem 2.5rem;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--bdr);
  background: var(--bg1);
  border-left: 3px solid var(--cy);
}

.pq::before {
  content: '"';
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 4rem;
  background: var(--cy);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.5;
  line-height: 1;
}

.pq p {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 1.2rem;
  font-style: italic;
  color: #1d1d1f;
  margin-bottom: 0.5rem;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

.pq cite {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.7rem;
  color: #6e6e73;
  font-style: normal;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

/* ─── Stat Callout ─── */
.stat-call {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-call::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--cy);
  animation: growBar 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.2s;
  opacity: 0;
}

.stat-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

@keyframes growBar {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: 100%;
    opacity: 1;
  }
}

.stat-call .num {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  background: var(--cy);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.stat-call .desc {
  font-size: 0.92rem;
  color: #6e6e73;
  line-height: 1.6;
}

.stat-call .desc strong {
  color: #1d1d1f;
}

.stat-call .src {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.6rem;
  color: #a1a1a6;
  display: block;
  margin-top: 0.25rem;
  letter-spacing: 0.03em;
}

/* ─── The Spectrum Visual ─── */
.spectrum {
  margin: 2.5rem 0;
  padding: 2rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  overflow: hidden;
  border-radius: 18px;
  position: relative;
}

.spectrum::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.3;
  border-radius: 12px;
}

.spectrum-title {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tmd);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.spectrum-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

.sp-item {
  padding: 1rem 0.75rem;
  text-align: center;
  position: relative;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 0;
}

.sp-item:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.8);
}

.sp-item::after {
  display: none;
}

.sp-item:last-child::after {
  display: none;
}

.sp-label {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #1d1d1f;
  margin-bottom: 0.35rem;
  display: block;
}

.sp-desc {
  font-size: 0.72rem;
  color: #6e6e73;
  line-height: 1.4;
}

.sp-1 {
  background: rgba(93, 93, 93, 0.12);
  border-bottom: 2px solid rgba(93, 93, 93, 0.3);
}

.sp-2 {
  background: var(--bld);
  border-bottom: 2px solid var(--bl);
}

.sp-3 {
  background: var(--prd);
  border-bottom: 2px solid var(--pr);
}

.sp-4 {
  background: var(--cyd);
  border-bottom: 2px solid var(--cy);
}

.sp-5 {
  background: var(--gnd);
  border-bottom: 2px solid var(--gn);
}

/* ─── Key Insight Box ─── */
.insight {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  padding-left: 3rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-left: 3px solid var(--cy);
  position: relative;
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

.insight::before {
  content: '💡';
  position: absolute;
  top: 1.5rem;
  left: 1rem;
  font-size: 1.25rem;
  filter: none;
  z-index: 2;
}

.insight .ititle {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tmd);
  margin-bottom: 0.75rem;
}

.insight p {
  font-size: 0.95rem;
  color: #1d1d1f;
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.insight p:last-child {
  margin-bottom: 0;
}

/* ─── Comparison Table ─── */
.ctable {
  margin: 2rem 0;
  overflow-x: auto;
}

.ctable table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.ctable th {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: none;
  background: #1d1d1f;
}

.ctable td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  color: #6e6e73;
  vertical-align: top;
}

.ctable tr:hover td {
  background: rgba(0, 0, 0, 0.02);
}

.ctable td:first-child {
  color: #1d1d1f;
  font-weight: 500;
}

/* ─── Numbered List ─── */
.nlist {
  margin: 1.5rem 0;
  counter-reset: nlist;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nlist-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.nlist-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
}

.nlist-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

.nlist-item .nnum {
  counter-increment: nlist;
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  color: #ffffff;
  border: none;
  background: var(--cy);
  border-radius: 50%;
  margin-top: 0.1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.nlist-item .nnum::before {
  content: counter(nlist, decimal-leading-zero);
}

.nlist-item .ncontent {
  flex: 1;
  min-width: 0;
}

.nlist-item h4 {
  font-size: 0.95rem;
  color: #1d1d1f;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.nlist-item p {
  font-size: 0.88rem;
  color: #6e6e73;
  margin: 0;
  line-height: 1.65;
}

/* ─── Article Bottom CTA ─── */
.art-cta {
  margin: 3rem 0;
  padding: 3rem;
  background: #1d1d1f;
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  color: #ffffff;
}

.art-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.1), transparent);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.art-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.3;
  border-radius: 18px;
  pointer-events: none;
}

.art-cta h3 {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  line-height: 1.3;
  background: linear-gradient(135deg, #ffffff, #e5e5e7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.75rem;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.art-cta p {
  color: #a1a1a6;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

.art-cta .btn {
  display: inline-block;
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--cy);
  color: #ffffff;
  padding: 0.75rem 2rem;
  border-radius: 980px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.art-cta .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease-in-out;
}

.art-cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.art-cta .btn:hover::before {
  left: 100%;
}

/* ─── Related Articles ─── */
.related {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem 6rem;
}

.related-title {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cy);
  margin-bottom: 2rem;
  text-align: center;
  position: relative;
  padding-bottom: 1rem;
}

.related-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cy), transparent);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.related-card {
  padding: 2rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.related-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.08);
}

.related-card:hover::before {
  transform: scaleX(1);
}

.related-card .rc-cat {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.rc-cy {
  color: var(--cy);
}

.rc-or {
  color: var(--or);
}

.rc-gn {
  color: var(--gn);
}

.rc-bl {
  color: var(--bl);
}

.rc-pk {
  color: var(--pk);
}

.related-card h4 {
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 1.15rem;
  color: #1d1d1f;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.35;
}

.related-card p {
  font-size: 0.82rem;
  color: #6e6e73;
  line-height: 1.55;
}

/* ─── Animations ─── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ─── Responsive Design ─── */
@media (max-width: 1024px) {
  .art-wrap {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
  }

  .toc {
    display: none;
  }

  .art-side {
    display: none;
  }
}

@media (max-width: 768px) {
  .ahero {
    padding: 5rem 1.5rem 3rem;
  }

  .ahero h1 {
    font-size: 1.75rem;
  }

  .ahero .subtitle {
    font-size: 1rem;
  }

  .art-wrap {
    padding: 0 1.5rem 4rem;
    gap: 1rem;
  }

  .art {
    max-width: 100%;
  }

  .art h2 {
    font-size: 1.4rem;
  }

  .art h3 {
    font-size: 1rem;
  }

  .stat-call {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .stat-call::before {
    display: none;
  }

  .spectrum-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .nlist-item {
    gap: 1rem;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .article-breadcrumb {
    font-size: 0.65rem;
    padding: 0.6rem 1.5rem;
  }

  .pq {
    padding: 1.5rem 1.5rem;
  }

  .pq::before {
    font-size: 3rem;
  }

  .art-cta {
    padding: 2rem 1.5rem;
  }

  .art-cta h3 {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .ahero {
    padding: 4rem 1rem 2rem;
  }

  .ahero h1 {
    font-size: 1.4rem;
  }

  .ahero .meta {
    gap: 0.75rem;
  }

  .cat-tag {
    font-size: 0.6rem;
    padding: 0.3rem 0.7rem;
  }

  .article-breadcrumb {
    font-size: 0.6rem;
    padding: 0.5rem 1rem;
  }

  .art-wrap {
    padding: 0 1rem 3rem;
  }

  .art p {
    font-size: 0.95rem;
  }

  .art h2 {
    font-size: 1.25rem;
    margin: 2rem 0 0.75rem;
  }

  .art h3 {
    font-size: 0.95rem;
  }

  .pq {
    padding: 1rem 1rem;
    margin: 1.5rem 0;
  }

  .nlist-item {
    padding: 1rem 1rem;
  }

  .nlist-item .nnum {
    width: 2rem;
    height: 2rem;
    font-size: 0.55rem;
  }

  .related-card {
    padding: 1.5rem;
  }

  .related-card h4 {
    font-size: 1rem;
  }

  .art-cta {
    padding: 1.5rem 1rem;
    margin: 2rem 0;
  }

  .art-cta .btn {
    padding: 0.6rem 1.5rem;
    font-size: 0.65rem;
  }
}


/* ═══════════════════════════════════════════════════════
   BLOG COMPONENT LIBRARY
   ═══════════════════════════════════════════════════════ */

/* ─── Pillar / Assessment Cards ─── */
.pillar {
  margin: 2rem 0;
  padding: 2rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  border-radius: 2px;
}
.p1::before { background: var(--cy); }
.p2::before { background: var(--or); }
.p3::before { background: var(--gn); }
.p4::before { background: var(--yl); }
.p5::before { background: var(--rd); }

.p-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.p-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cy);
  white-space: nowrap;
}
.p-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #1d1d1f;
}
.p-question {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--cy);
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--cyd);
  border-radius: 10px;
  line-height: 1.6;
}
.p-score {
  display: flex;
  gap: 0;
  margin-top: 1.25rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--bdr);
}
.p-sc {
  flex: 1;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  padding: 0.75rem 0.5rem;
  line-height: 1.4;
  color: #6e6e73;
  background: var(--bg0);
  border-right: 1px solid var(--bdr);
  transition: background 0.2s;
}
.p-sc:last-child { border-right: none; }
.p-sc:first-line { font-size: 1rem; font-weight: 700; color: #1d1d1f; }
.p-sc-1:hover { background: rgba(192, 56, 56, .06); }
.p-sc-2:hover { background: rgba(184, 96, 32, .06); }
.p-sc-3:hover { background: rgba(154, 122, 24, .06); }
.p-sc-4:hover { background: rgba(26, 138, 90, .06); }
.p-sc-5:hover { background: rgba(26, 138, 90, .1); }

/* ─── Cascade / Flow ─── */
.cascade {
  margin: 2rem 0;
  padding: 2rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 16px;
}
.cas-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  margin-bottom: 1.25rem;
}
.cas-step { display: flex; flex-direction: column; align-items: center; }
.cas-arrow {
  font-size: 1.1rem;
  color: var(--tm);
  opacity: 0.4;
  line-height: 1;
  padding: 0.25rem 0;
}
.cas-box {
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #3d3d41;
  border: 1px solid var(--bdr);
  background: var(--bg0);
}
.cas-1 { border-left: 3px solid var(--yl); }
.cas-2 { border-left: 3px solid var(--or); }
.cas-3 { border-left: 3px solid var(--rd); }
.cas-4 { border-left: 3px solid #7a1a1a; }

/* ─── Cost Stack ─── */
.cost-stack {
  margin: 2rem 0;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 16px;
  overflow: hidden;
}
.cs-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  padding: 1.25rem 1.5rem 1rem;
}
.cs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--bdr);
  gap: 1rem;
}
.cs-row:last-child {
  background: var(--bg0);
  border-top: 2px solid var(--bdrh);
}
.cs-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #3d3d41;
  line-height: 1.5;
  flex: 1;
}
.cs-val {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}
.cs-neg { color: var(--rd); }
.cs-total { color: #1d1d1f; font-size: 1.05rem; }
.cs-src {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  color: var(--tm);
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--bdr);
}

/* ─── Time Bar ─── */
.time-bar {
  margin: 2rem 0;
  padding: 2rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 16px;
}
.tb-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  margin-bottom: 1rem;
}
.tb-track {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  height: 2.5rem;
}
.tb-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}
.tb-s1 { background: var(--rd); flex: 60; }
.tb-s2 { background: var(--yl); flex: 26; }
.tb-s3 { background: var(--gn); flex: 14; }
.tb-legend { display: flex; flex-direction: column; gap: 0.5rem; }
.tb-leg {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #3d3d41;
  line-height: 1.5;
}
.tb-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 0.3rem;
}
.tb-dot-rd { background: var(--rd); }
.tb-dot-yl { background: var(--yl); }
.tb-dot-gn { background: var(--gn); }

/* ─── Timeline ─── */
.timeline {
  margin: 2rem 0;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 16px;
  overflow: hidden;
}
.tl-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  padding: 1.25rem 1.5rem 1rem;
}
.tl-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--bdr);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
}
.tl-time {
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
}
.tl-desc { color: #3d3d41; }
.tl-conv { font-weight: 700; font-size: 0.95rem; text-align: right; }
.tl-hot { color: var(--gn); }
.tl-warm { color: var(--yl); }
.tl-cool { color: var(--or); }
.tl-cold { color: var(--rd); }
.tl-dead { color: #7a1a1a; }

/* ─── Funnel ─── */
.funnel {
  margin: 2rem 0;
  padding: 2rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 16px;
}
.fn-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  margin-bottom: 1.25rem;
}
.fn-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.fn-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tm);
  width: 5rem;
  text-align: right;
  flex-shrink: 0;
}
.fn-bar-wrap { flex: 1; }
.fn-bar {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  line-height: 1.4;
}
.fn-b1 { background: var(--cy); width: 100%; }
.fn-b2 { background: rgba(158, 82, 97, .8); width: 80%; }
.fn-b3 { background: rgba(158, 82, 97, .6); width: 58%; }
.fn-b4 { background: rgba(158, 82, 97, .45); width: 38%; }
.fn-b5 { background: rgba(158, 82, 97, .3); color: #1d1d1f; width: 22%; }
.fn-lost {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--rd);
  width: 3rem;
  flex-shrink: 0;
}
.fn-src {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  color: var(--tm);
  margin-top: 1rem;
  line-height: 1.5;
}

/* ─── ROI Box ─── */
.roi-box {
  margin: 2rem 0;
  padding: 2rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 16px;
  text-align: center;
}
.roi-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm);
  margin-bottom: 0.5rem;
}
.roi-num {
  font-family: 'Inter', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--gn);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
.roi-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: #3d3d41;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}

/* ─── Iceberg ─── */
.iceberg {
  margin: 2rem 0;
  border: 1px solid var(--bdr);
  border-radius: 16px;
  overflow: hidden;
}
.ib-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  padding: 1.25rem 1.5rem 1rem;
  background: var(--bg1);
}
.ib-visible {
  padding: 1.25rem 1.5rem;
  background: var(--bg0);
}
.ib-hidden {
  padding: 1.25rem 1.5rem;
  background: var(--bg1);
}
.ib-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 0.5rem;
}
.ib-items {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #3d3d41;
  line-height: 1.7;
}
.ib-divider {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--tm);
  padding: 0.35rem;
  background: linear-gradient(90deg, var(--bdr), var(--bdrh), var(--bdr));
  border-top: 1px dashed var(--bdrh);
  border-bottom: 1px dashed var(--bdrh);
}

/* ─── Balance (VS comparison) ─── */
.balance {
  margin: 2rem 0;
  padding: 2rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 16px;
}
.bal-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  margin-bottom: 1.25rem;
  text-align: center;
}
.bal-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.bal-side {
  flex: 1;
  padding: 1.25rem;
  background: var(--bg0);
  border-radius: 12px;
  border: 1px solid var(--bdr);
  text-align: center;
}
.bal-left .bal-num { color: var(--rd); }
.bal-right .bal-num { color: var(--gn); }
.bal-num {
  font-family: 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
.bal-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #6e6e73;
  line-height: 1.5;
  margin-top: 0.35rem;
}
.bal-vs {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--tm);
  flex-shrink: 0;
}
.bal-net {
  text-align: center;
  padding: 1rem;
  background: var(--bg0);
  border-radius: 12px;
  border: 1px solid var(--bdr);
}
.bal-net .bal-num { color: var(--gn); font-size: 1.5rem; }
.bal-net .bal-label { font-size: 0.75rem; }

/* ─── Baseline (Before/After Table) ─── */
.baseline {
  margin: 2rem 0;
  border: 1px solid var(--bdr);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg1);
}
.bl-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  padding: 1.25rem 1.5rem 1rem;
}
.bl-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--bdr);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  align-items: center;
}
.bl-row.bl-head {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm);
  background: var(--bg1);
}
.bl-metric { color: #3d3d41; }
.bl-before { color: var(--rd); font-weight: 600; text-align: center; min-width: 5rem; }
.bl-after { color: var(--gn); font-weight: 600; text-align: center; min-width: 5rem; }
.bl-delta { color: var(--cy); font-weight: 700; text-align: center; min-width: 4rem; }

/* ─── BSD (BS Detector) ─── */
.bsd {
  margin: 2rem 0;
  padding: 2rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 16px;
}
.bsd-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  margin-bottom: 1.25rem;
}
.bsd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.bsd-cell {
  padding: 1rem 1.25rem;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #3d3d41;
  border: 1px solid var(--bdr);
}
.bsd-bad {
  background: var(--rdd);
  border-color: rgba(192, 56, 56, .12);
}
.bsd-good {
  background: var(--gnd);
  border-color: rgba(26, 138, 90, .12);
}

/* ─── Dashboard / Buckets ─── */
.dash {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 2rem 0;
}
.bucket {
  padding: 1.5rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.bucket::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
}
.bk1::before { background: var(--cy); }
.bk2::before { background: var(--gn); }
.bk3::before { background: var(--or); }
.bk4::before { background: var(--yl); }
.bk-icon { font-size: 1.25rem; margin-bottom: 0.5rem; }
.bk-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 0.75rem;
}
.bk-kpi {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #3d3d41;
  line-height: 1.7;
}
.bk-kpi em {
  font-style: normal;
  font-weight: 600;
  color: #1d1d1f;
}

/* ─── Threat Grid ─── */
.tgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 2rem 0;
}
.tcell {
  padding: 1.5rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 14px;
}
.tc-icon { font-size: 1.25rem; margin-bottom: 0.5rem; }
.tc-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 0.5rem;
}
.tc-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #3d3d41;
  line-height: 1.65;
  margin-bottom: 0.75rem;
}
.tc-stat {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cy);
  padding-top: 0.5rem;
  border-top: 1px solid var(--bdr);
  line-height: 1.4;
}

/* ─── Evolution Ladder ─── */
.evo {
  margin: 2rem 0;
  padding: 2rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 16px;
}
.evo-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  margin-bottom: 1.25rem;
}
.evo-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--bg0);
  border: 1px solid var(--bdr);
  border-radius: 12px;
  margin-bottom: 0.5rem;
  transition: border-color 0.2s;
}
.evo-step:hover { border-color: var(--bdrh); }
.evo-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  background: var(--cy);
  width: 2rem; height: 2rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ev-5 .evo-badge { background: var(--cy); }
.ev-4 .evo-badge { background: rgba(158, 82, 97, .75); }
.ev-3 .evo-badge { background: rgba(158, 82, 97, .55); }
.ev-2 .evo-badge { background: rgba(158, 82, 97, .35); }
.ev-1 .evo-badge { background: rgba(158, 82, 97, .2); color: #1d1d1f; }

.evo-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.evo-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1d1d1f;
}
.evo-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #3d3d41;
  line-height: 1.6;
}
.evo-ex {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: var(--tm);
  font-style: italic;
  line-height: 1.5;
}

/* ─── Gap (VS Comparison) ─── */
.gap {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  margin: 2rem 0;
}
.gap-col {
  flex: 1;
  padding: 1.5rem;
  border-radius: 14px;
  border: 1px solid var(--bdr);
}
.gap-col h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 1rem;
}
.gap-left {
  background: var(--gnd);
  border-color: rgba(26, 138, 90, .12);
}
.gap-right {
  background: var(--rdd);
  border-color: rgba(192, 56, 56, .12);
}
.gap-item {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #3d3d41;
  line-height: 1.5;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--bdr);
}
.gap-item:last-child { border-bottom: none; }
.gap-vs {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--tm);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ─── Human Grid ─── */
.human-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  margin: 2rem 0;
}
.hg-card {
  padding: 1.5rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  text-align: center;
}
.hg-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.hg-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 0.4rem;
}
.hg-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: #6e6e73;
  line-height: 1.55;
}

/* ─── Causes Grid ─── */
.causes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 2rem 0;
}
.cause-card {
  padding: 1.5rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.cause-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--cy);
}
.cc-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cy);
  margin-bottom: 0.35rem;
}
.cc-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 0.5rem;
}
.cc-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #3d3d41;
  line-height: 1.65;
  margin-bottom: 0.75rem;
}
.cc-cost {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rd);
  padding-top: 0.5rem;
  border-top: 1px solid var(--bdr);
}

/* ─── Tiers ─── */
.tiers {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tier {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--bdr);
  background: var(--bg1);
}
.tier-range {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  min-width: 4rem;
  text-align: center;
}
.tier-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1d1d1f;
  min-width: 5.5rem;
}
.tier-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #3d3d41;
  line-height: 1.55;
}
.t-r { border-left: 4px solid var(--rd); }
.t-r .tier-range { color: var(--rd); }
.t-y { border-left: 4px solid var(--yl); }
.t-y .tier-range { color: var(--yl); }
.t-t { border-left: 4px solid var(--or); }
.t-t .tier-range { color: var(--or); }
.t-g { border-left: 4px solid var(--gn); }
.t-g .tier-range { color: var(--gn); }

/* ─── Trends ─── */
.trends {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.trend {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 14px;
}
.t-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--cy);
  white-space: nowrap;
  padding-top: 0.15rem;
}
.t-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  margin-bottom: 0.15rem;
}
.t-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 0.35rem;
}
.t-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #3d3d41;
  line-height: 1.65;
}

/* ─── Checklist ─── */
.checklist {
  margin: 2rem 0;
  padding: 2rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 16px;
}
.cl-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  margin-bottom: 1.25rem;
}
.cl-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--bdr);
}
.cl-item:last-child { border-bottom: none; }
.cl-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--cy);
  background: var(--cyd);
  width: 1.75rem; height: 1.75rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cl-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #3d3d41;
  line-height: 1.65;
}

/* ─── Death Certificate ─── */
.death-cert {
  margin: 2rem 0;
  border: 1px solid var(--bdr);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg1);
}
.dc-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  padding: 1.25rem 1.5rem 1rem;
}
.dc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--bdr);
  gap: 1rem;
}
.dc-fact {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #3d3d41;
  line-height: 1.5;
  flex: 1;
}
.dc-stat {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--rd);
  white-space: nowrap;
}

/* ─── Scenario (Side-by-Side Comparison) ─── */
.scenario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 2rem 0;
}
.scenario-col {
  padding: 1.5rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 14px;
}
.scenario-col h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0.75rem 0 0.5rem;
}
.scenario-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cy);
  background: var(--cyd);
  padding: 0.3rem 0.75rem;
  border-radius: 980px;
  display: inline-block;
}
.step {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #3d3d41;
  line-height: 1.5;
  padding: 0.3rem 0;
  display: flex;
  gap: 0.5rem;
}
.sn {
  font-weight: 700;
  color: var(--cy);
  flex-shrink: 0;
}

/* ─── Compound (Bar Chart) ─── */
.compound {
  margin: 2rem 0;
  padding: 2rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 16px;
}
.cp-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  margin-bottom: 0.35rem;
}
.cp-note {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--tm);
  margin-bottom: 1.25rem;
}
.cp-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.cp-yr {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1d1d1f;
  width: 3.5rem;
  flex-shrink: 0;
}
.cp-bar-wrap { flex: 1; }
.cp-bar {
  height: 1.75rem;
  background: linear-gradient(90deg, var(--rd), rgba(192, 56, 56, .65));
  border-radius: 4px;
  transition: width 0.3s;
}
.cp-loss {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--rd);
  width: 5.5rem;
  text-align: right;
  flex-shrink: 0;
}

/* ─── Numbered List ─── */
.nlist { margin: 2rem 0; counter-reset: nlist-counter; }
.nlist-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--bdr);
}
.nlist-item:last-child { border-bottom: none; }
.nnum {
  counter-increment: nlist-counter;
  flex-shrink: 0;
  width: 2rem; height: 2rem;
  border-radius: 8px;
  background: var(--cyd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--cy);
}
.nnum::before { content: counter(nlist-counter); }
.ncontent { min-width: 0; }
.ncontent h4 {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 0.35rem;
}

/* ─── Ladder ─── */
.ladder {
  margin: 2rem 0;
  border: 1px solid var(--bdr);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg1);
}
.ld-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  padding: 1.25rem 1.5rem 1rem;
}
.ld-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--bdr);
  gap: 1rem;
}
.ld-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #3d3d41;
  line-height: 1.5;
  flex: 1;
}
.ld-val {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  white-space: nowrap;
}
.ld-hi { color: var(--gn); }
.ld-md { color: var(--yl); }
.ld-lo { color: var(--or); }

/* ─── Market ─── */
.mkt {
  margin: 2rem 0;
  padding: 2rem;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 16px;
}
.mk-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm);
  margin-bottom: 1.25rem;
}
.mk-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.mk-year {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1d1d1f;
  width: 3rem;
  flex-shrink: 0;
}
.mk-bar {
  flex: 1;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
}
.mkb1 { background: rgba(158, 82, 97, .35); color: #1d1d1f; }
.mkb2 { background: rgba(158, 82, 97, .55); }
.mkb3 { background: rgba(158, 82, 97, .75); }
.mkb4 { background: var(--cy); }
.mk-val {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: #1d1d1f;
  width: 3.5rem;
  text-align: right;
  flex-shrink: 0;
}
.mk-src {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  color: var(--tm);
  margin-top: 1rem;
  line-height: 1.5;
}

/* ─── Mobile Responsive — Blog Components ─── */
@media (max-width: 768px) {
  .bsd-grid,
  .dash,
  .tgrid,
  .scenario,
  .causes-grid { grid-template-columns: 1fr; }

  .human-grid { grid-template-columns: 1fr 1fr; }

  .gap { flex-direction: column; }
  .gap-vs { text-align: center; }

  .bal-row { flex-direction: column; }
  .bal-vs { text-align: center; }

  .bl-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .bl-row.bl-head { display: none; }
  .bl-before::before { content: 'Before: '; font-weight: 400; }
  .bl-after::before { content: 'After: '; font-weight: 400; }
  .bl-delta::before { content: 'Change: '; font-weight: 400; }
  .bl-before, .bl-after, .bl-delta { text-align: left; }

  .tl-row { grid-template-columns: auto 1fr auto; gap: 0.5rem; }

  .tier { flex-direction: column; gap: 0.35rem; }
}

@media (max-width: 480px) {
  .human-grid { grid-template-columns: 1fr; }
  .p-score { flex-wrap: wrap; }
  .p-sc { min-width: calc(33% - 1px); }
}