/* A small forecast continues the observed trend into the next month. */
.use-forecast { flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 8px 0 16px; gap: 5px; }
.use-forecast > span { font-size: 12px; color: var(--muted); }
.use-forecast > b { font-size: clamp(24px, 3vw, 40px); font-weight: 500; line-height: 1.2; letter-spacing: -.045em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.use-forecast > b small { font-size: .65em; }
.use-forecast > small { font-size: 11px; color: var(--muted); }
.forecast-chart { display: block; width: 100%; height: 44px; overflow: visible; color: var(--blue); }
.forecast-chart path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.forecast-chart .forecast-future { stroke-dasharray: 5 5; }
.forecast-chart circle { fill: var(--lime); stroke: currentColor; stroke-width: 2; }
.use-forecast > i { font-size: 10px; line-height: 1.3; font-style: normal; padding: 5px 8px; border-radius: 8px; color: var(--accent-ink); background: var(--ice); transform: rotate(-3deg); }
.use-bars i { transform-origin: center bottom; }
/* One short response per hover; heights and forecast values stay unchanged. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .use-case:hover .use-bars i { animation: clarity-bar-wave 650ms cubic-bezier(.22,1,.36,1) both; }
  .use-case:hover .use-bars i:nth-child(2) { animation-delay: 45ms; }
  .use-case:hover .use-bars i:nth-child(3) { animation-delay: 90ms; }
  .use-case:hover .use-bars i:nth-child(4) { animation-delay: 135ms; }
  .use-case:hover .use-bars i:nth-child(5) { animation-delay: 180ms; }
  .use-case:hover .use-bars i:nth-child(6) { animation-delay: 225ms; }
  .use-case:hover .use-bars i:nth-child(7) { animation-delay: 270ms; }
  .use-case:hover .forecast-future { animation: clarity-forecast-flow 850ms ease-out; }
  .use-case:hover .forecast-chart circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: clarity-forecast-point 650ms ease-in-out 180ms;
  }
}
@keyframes clarity-bar-wave {
  0%, 100% { transform: scaleY(1); }
  35% { transform: scaleY(.78); }
  70% { transform: scaleY(1.06); }
}
@keyframes clarity-forecast-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -20; }
}
@keyframes clarity-forecast-point {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.6); }
}
@media (max-width: 600px) {
  .use-forecast { padding: 0; gap: 4px; height: 150px; }
  .use-forecast > b { font-size: clamp(20px, 5vw, 28px); }
  .use-forecast > span, .use-forecast > small { font-size: 10px; }
  .use-forecast > i { font-size: 9px; padding: 4px 6px; }
  .forecast-chart { height: 36px; }
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .use-case:hover .use-coffee { transform: rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .use-coffee { transition: none; }
}