.goal-top-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr); gap: var(--s-6); }
.goal-hero-content { display: flex; flex-direction: column; gap: var(--s-5); }
.goal-hero-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.goal-eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sub); font-weight: var(--fw-semibold); }
.goal-target { font-size: var(--fs-title-2); font-weight: var(--fw-semibold); letter-spacing: var(--track-title); }
.goal-earned-label { font-size: var(--fs-sub); color: var(--ink-2); margin-bottom: calc(-1 * var(--s-4)); }
.goal-progress { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-2); }
.goal-progress-labels { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; font-size: var(--fs-sub); }
.goal-progress-labels > span { color: var(--ink-2); }
.goal-hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.goal-hero-bottom > p { font-size: var(--fs-sub); max-width: 28em; color: var(--ink-2); }
.goal-hero-bottom > .btn { flex-shrink: 0; }
.goal-hero .money { overflow-wrap: anywhere; }
.goal-countdown-content { height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); justify-content: center; }
.goal-countdown > .card__body { height: 100%; }
.goal-countdown-icon { color: var(--accent-text); background: var(--accent-soft); width: var(--s-9); height: var(--s-9); border-radius: var(--r-pill); display: grid; place-items: center; }
.goal-countdown h3 { font-size: var(--fs-title-2); line-height: var(--lh-snug); letter-spacing: var(--track-title); }
.goal-section-label, .goal-muted { color: var(--ink-2); font-size: var(--fs-sub); }
.goal-chart-content { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-5); min-width: 0; }
.goal-chart-content > .segmented { align-self: flex-end; }
.goal-milestones { list-style: none; padding: 0; display: flex; flex-direction: column; }
.goal-milestone { position: relative; display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-4); }
.goal-milestone:not(:last-child)::after { content: ''; position: absolute; left: calc(var(--s-8) / 2); top: calc(50% + var(--s-5)); bottom: calc(-1 * var(--s-4)); width: 1px; background: var(--line-strong); }
.goal-milestone-icon { flex-shrink: 0; display: grid; place-items: center; width: var(--s-8); height: var(--s-8); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-sub); font-weight: var(--fw-semibold); }
.goal-milestone.is-reached .goal-milestone-icon { background: var(--pos-soft); color: var(--pos); }
.goal-milestone.is-next .goal-milestone-icon { background: var(--accent-soft); color: var(--accent-text); }
.goal-milestone-copy { flex: 1; display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.goal-milestone-copy strong { font-size: var(--fs-title-3); }
.goal-milestone-copy span { font-size: var(--fs-cap); color: var(--ink-2); }
@media (max-width: 850px) {
  .goal-top-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .goal-countdown-content { display: grid; grid-template-columns: var(--s-9) minmax(0, 1fr); gap: var(--s-3) var(--s-4); }
  .goal-countdown-icon { grid-row: span 2; }
  .goal-countdown-content > .goal-muted, .goal-countdown-content > .btn, .goal-countdown-content > .badge { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .goal-hero-bottom { align-items: stretch; flex-direction: column; }
  .goal-hero-heading { gap: var(--s-1); }
  .goal-target { font-size: var(--fs-title-3); }
}