/* Lightweight, illustrative product storytelling; static charts are the default. */
.data-chart { margin: 0; min-width: 0; scroll-margin-block: 110px; }
.chart-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; text-align: left; }
.chart-topline h3, .chart-topline h4 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.chart-topline h4 > span { color: var(--text-secondary); font-weight: 400; }
.chart-topline p, .chart-footnote { margin: 7px 0 0; color: var(--text-secondary); font-size: 10px; line-height: 1.6; }
.chart-metric { display: block; color: var(--green); font-size: clamp(27px, 6vw, 42px); font-weight: 650; letter-spacing: -1px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.chart-metric small { margin-left: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--text-secondary); }
.metric-period { display: block; margin-top: 8px; font-size: 10px; font-weight: 400; letter-spacing: .3px; color: var(--text-secondary); }
.trend-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-gridlines { stroke: var(--border); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; }
.chart-dot { fill: var(--green); }
.chart-marker { fill: var(--green); stroke: var(--background); stroke-width: 2; }
.chart-final-halo { fill: #a0e22014; stroke: #a0e22055; stroke-width: 1; }
.chart-axis { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 10px; padding-inline: 3.33%; gap: 2px; }
.strength-chart { padding-top: 22px; margin-top: 24px; border-top: 1px solid var(--border); max-width: 440px; margin-inline: auto; }
.strength-chart .chart-metric { font-size: 27px; }
.strength-chart .trend-svg { margin-top: 12px; }
.strength-chart .chart-footnote { text-align: left; }
.habit-visualizations { max-width: 1040px; padding-top: 52px; }
.analytics-heading { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.analytics-heading .eyebrow { justify-content: center; }
.analytics-heading h3 { font-size: clamp(30px, 7.8vw, 51px); letter-spacing: -1.4px; line-height: 1.15; margin: 0; }
.analytics-heading h3 em { font-style: normal; color: var(--green); }
.analytics-heading > p:last-child { margin: 18px auto 0; color: var(--text-secondary); font-size: 14px; line-height: 1.75; max-width: 510px; }
.weight-chart { padding: 24px 0 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: radial-gradient(ellipse at 60% 40%, #a0e22006, transparent 70%); }
.weight-plot { position: relative; padding-left: 34px; margin-top: 24px; }
.chart-y-axis { position: absolute; left: 0; top: 8.33%; bottom: 8.33%; display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: var(--text-secondary); }
.weight-axis { margin-left: 34px; font-size: 10px; }
.weight-endpoints { display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: 10px; color: var(--text-secondary); }
.weight-endpoints strong { display: block; color: var(--text); font-size: 17px; font-weight: 500; margin-top: 5px; }
.weight-endpoints > span:last-child { text-align: right; }
.weight-explorer:not([hidden]) { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 12px; margin-top: 24px; font-size: 11px; color: var(--text-secondary); }
.weight-explorer input { width: 100%; min-width: 0; height: 44px; accent-color: var(--green); grid-column: 1/-1; grid-row: 2; margin: 0; touch-action: pan-y; }
.weight-explorer output { color: var(--text); font-variant-numeric: tabular-nums; }
.chart-data { margin-top: 10px; color: var(--text-secondary); font-size: 11px; }
.chart-data summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.chart-data summary::before { content: '+'; color: var(--green); }
.chart-data[open] summary::before { content: '−'; }
.chart-data ol { columns: 2; padding-left: 20px; line-height: 1.9; }
.steps-story { padding-top: 48px; }
.steps-chart { padding: 20px 0 0; }
.steps-plot { --step-height: clamp(165px, 25vw, 250px); position: relative; margin-top: 34px; }
.step-columns { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: clamp(8px, 2vw, 24px); }
.step-column { min-width: 0; text-align: center; }
.step-track { height: var(--step-height); position: relative; display: flex; align-items: flex-end; justify-content: center; }
.step-bar { height: var(--bar-height); width: 64%; max-width: 64px; background: #46523d; border-radius: 6px 6px 0 0; transform-origin: center bottom; }
.step-bar.goal-met { background: var(--green); }
.step-value { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--bar-height) + 8px); color: #c3ccc0; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; z-index: 1; }
.step-day { display: block; margin-top: 12px; font-size: 10px; color: var(--text-secondary); }
.steps-goal { position: absolute; z-index: 0; left: 0; right: 0; top: calc(var(--step-height) / 6); border-top: 1px dashed #a0e22055; pointer-events: none; }
.steps-goal span { position: absolute; left: 0; top: -16px; font-size: 9px; color: var(--text-secondary); background: var(--background); padding-left: 5px; }
.steps-chart .chart-footnote { margin-top: 18px; }
.habit-micros { display: grid; gap: 24px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); scroll-margin-block: 110px; }
.habit-micro > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.habit-micro h4 { margin: 0; font-size: 13px; font-weight: 500; }
.habit-micro strong { font-size: 16px; font-weight: 500; color: var(--green); font-variant-numeric: tabular-nums; }
.habit-micro small { font-size: 10px; color: var(--text-secondary); font-weight: 400; }
.micro-track { height: 5px; margin-top: 14px; background: var(--border); border-radius: 3px; overflow: hidden; }
.micro-track > span { display: block; width: var(--fill); height: 100%; background: var(--green); transform-origin: left; }
.habit-micros > .chart-footnote { grid-column: 1/-1; margin: -8px 0 0; }
@media(min-width:768px) {
  .habit-visualizations { padding-top: 80px; }
  .analytics-heading > p:last-child { font-size: 16px; }
  .weight-chart { padding: 32px 30px 16px; }
  .chart-topline h4 { font-size: 18px; }
  .chart-topline p, .chart-footnote, .chart-axis, .chart-y-axis { font-size: 12px; }
  .weight-explorer { max-width: 440px; margin-inline: auto; }
  .weight-endpoints { font-size: 12px; }
  .step-value, .step-day { font-size: 12px; }
  .steps-story { padding-top: 64px; }
  .habit-micros { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media(min-width:1000px) { .strength-chart { margin-left: 0; } }
@media(max-width:767px) { .habit-visualizations { padding-bottom: 80px; } }
@media(prefers-reduced-motion:no-preference) {
  .data-chart.chart-entered { animation: feature-rise .65s cubic-bezier(.16,1,.3,1) both; }
  .analytics-heading.is-revealed > * { animation: feature-rise .8s cubic-bezier(.16,1,.3,1) both; }
  .analytics-heading.is-revealed > p:last-child { animation-delay: .12s; }
  .calendar-spotlight.is-revealed .completion-tick { animation: indicator-enter .5s var(--tick-delay) cubic-bezier(.16,1,.3,1) both, completion-flash .9s calc(var(--tick-delay) + .2s) ease-out both; }
}
@keyframes completion-flash { 0%,100% { box-shadow: 0 0 0 0 #a0e22000; } 35% { box-shadow: 0 0 0 5px #a0e22025; } }