/* ============================================
   PROBLEM SECTION — DATA VIZ
   ============================================ */

.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
}
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }

.stat-card__chart { margin: var(--sp-md) 0; }

/* Circular progress ring */
.ring-chart {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--sp-sm);
}
.ring-chart svg { transform: rotate(-90deg); }
.ring-chart circle { fill: none; stroke-width: 9; }
.ring-chart .bg { stroke: var(--border-soft); }
.ring-chart .fg {
  stroke-linecap: round;
  stroke-dasharray: 251.2;
  stroke-dashoffset: 251.2;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
.ring-chart .ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--navy);
}

/* Horizontal bar chart */
.bar-chart { display: flex; flex-direction: column; gap: var(--sp-sm); margin: var(--sp-md) 0; }
.bar-chart__row { display: grid; grid-template-columns: 90px 1fr 46px; align-items: center; gap: var(--sp-sm); }
.bar-chart__label { font-size: var(--fs-small); color: var(--ink-soft); }
.bar-chart__track { height: 10px; background: var(--border-soft); border-radius: var(--radius-pill); overflow: hidden; }
.bar-chart__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  width: 0%;
  transition: width 1.2s var(--ease-out);
}
.bar-chart__value { font-family: var(--font-data); font-weight: 700; font-size: 0.9rem; text-align: right; color: var(--navy); }

.problem-card-text { font-size: 0.92rem; margin-top: var(--sp-sm); }

/* ============================================
   COMPARISON: OLD VS NEW
   ============================================ */

.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
}
@media (min-width: 800px) {
  .compare { grid-template-columns: 1fr 1fr; gap: 0; }
}

.compare__col {
  padding: var(--sp-xl) var(--sp-lg);
  border-radius: var(--radius-lg);
}

@media (min-width: 800px) {
  .compare__col:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
  .compare__col:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
}

.compare__col--old {
  background: #F1EDE7;
  border: 1px solid var(--border-soft);
}
.compare__col--new {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-lg);
  position: relative;
}
@media (min-width: 800px) {
  .compare__col--new { transform: scale(1.02); z-index: 1; }
}

.compare__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-lg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
}
.compare__col--old .compare__head { color: var(--ink-faint); }
.compare__col--new .compare__head { color: var(--white); }

.compare__list { display: flex; flex-direction: column; gap: var(--sp-md); }
.compare__item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; }
.compare__item .ic { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; }

.compare__col--old .compare__item { color: #6B6258; }
.compare__col--old .ic { color: var(--ink-faint); }
.compare__col--new .compare__item { color: rgba(255,255,255,0.92); }
.compare__col--new .ic { color: var(--yellow); }

.compare__vs { display: none; }
@media (min-width: 800px) {
  .compare__vs {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 0;
  }
  .compare__vs span {
    position: absolute;
    width: 48px; height: 48px;
    background: var(--coral);
    color: var(--white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: var(--shadow-coral);
    z-index: 2;
  }
}

/* ============================================
   CLARITY FRAMEWORK — SIGNATURE INTERACTIVE
   ============================================ */

.framework { position: relative; }

.framework__scroller {
  display: flex;
  gap: var(--sp-lg);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: var(--sp-md) var(--sp-lg) var(--sp-xl);
  margin: 0 calc(var(--sp-lg) * -1);
  scrollbar-width: thin;
  scrollbar-color: var(--lavender-deep) transparent;
}
.framework__scroller::-webkit-scrollbar { height: 6px; }
.framework__scroller::-webkit-scrollbar-thumb { background: var(--lavender-deep); border-radius: var(--radius-pill); }

@media (min-width: 768px) {
  .framework__scroller { margin: 0; padding: var(--sp-md) 0 var(--sp-xl); }
}

.framework__track {
  position: relative;
  display: flex;
  gap: var(--sp-lg);
  min-width: max-content;
}

.framework__line {
  position: absolute;
  top: 36px;
  left: 36px;
  right: 36px;
  height: 3px;
  background: var(--border-soft);
  z-index: 0;
  border-radius: 2px;
}
.framework__line-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--coral), var(--teal));
  border-radius: 2px;
  transition: width 1.6s var(--ease-out);
}

.framework__node {
  position: relative;
  z-index: 1;
  width: 200px;
  flex-shrink: 0;
  scroll-snap-align: start;
  cursor: pointer;
}

.framework__node-circle {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-md);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base);
  position: relative;
}
.framework__node-circle svg { width: 30px; height: 30px; color: var(--navy-soft); transition: color var(--dur-base); }
.framework__node-circle .step-num {
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--navy);
  font-family: var(--font-data);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.framework__node:hover .framework__node-circle,
.framework__node.active .framework__node-circle {
  border-color: var(--coral);
  transform: scale(1.08);
  box-shadow: var(--shadow-coral);
}
.framework__node.active .framework__node-circle svg,
.framework__node:hover .framework__node-circle svg { color: var(--coral-deep); }
.framework__node.active .framework__node-circle .step-num,
.framework__node:hover .framework__node-circle .step-num { background: var(--coral); color: var(--white); }

.framework__node-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--navy);
  margin-bottom: 6px;
}
.framework__node-desc {
  font-size: 0.85rem;
  color: var(--ink-faint);
  line-height: 1.5;
}

.framework__detail {
  margin-top: var(--sp-xl);
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-soft);
  display: none;
}
.framework__detail.visible {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
  animation: fadeUp 0.4s var(--ease-out) both;
}
@media (min-width: 768px) {
  .framework__detail.visible { grid-template-columns: auto 1fr; align-items: center; }
}

.framework__detail-icon {
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  background: var(--coral-tint);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.framework__detail-icon svg { width: 32px; height: 32px; color: var(--coral-deep); }

.framework__detail h4 { margin-bottom: 6px; }
.framework__detail p { font-size: 0.95rem; }

.framework__hint {
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--ink-faint);
  margin-top: var(--sp-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
@media (min-width: 768px) { .framework__hint { display: none; } }