feat(savings): match Claude Design — projection chart, target-icon modal, grouped funding accounts

Brings the savings goals UI closer to the Claude Design reference shared
by the user. Changes:

- Sidebar nav label: "Savings goals" → "Savings".
- Status pill copy: "Behind" → "Behind pace" (matches Pill component
  from GoalsCommon.jsx).
- Empty state rewritten with a large target icon, "No goals yet"
  heading, and the descriptive body copy from the design.

Goal detail page (matches GoalDetail.jsx):
- New "← All goals" back link above the header.
- 2-column hero: ring card on the left (320px column), Projection card
  on the right.
- Projection card uses a new D3 Stimulus controller
  (`savings-goal-projection-chart`) that draws:
    · saved area + line from goal creation → today (solid, primary)
    · dashed projection segment from today → target date (yellow when
      behind, green when on track)
    · horizontal dashed target line with label
    · today marker (vertical dashed line + dot)
  Data shape comes from `SavingsGoal#projection_payload`.
- Card subtitle generates a contextual sentence ("At $X/mo you'll fall
  short. Bump to $Y/mo to hit it on time." / "At your current pace
  you'll reach this goal around Month YYYY." / "Goal reached. Nice
  work.") with a strong tag highlighting the actionable figure.
- Stat row now shows Linked balance (sum across linked accounts) +
  "N accounts" sub-caption instead of duplicate "Target date" stat.

New goal modal (matches the design images 2 + 3):
- DS::Dialog custom header: DS::FilledIcon target glyph + title + step
  subtitle ("Step 1 of 2 · Goal details" / "Step 2 of 2 · Review &
  start") that updates as the user advances.
- Connected stepper at top of body: numbered circles connected by a
  bar, step-1 circle flips to ✓ when complete.
- Step 1 heading "What are you saving for?" + supporting copy.
- Name field paired with a target glyph affordance on its left.
- Target amount + Target date in a 2-col grid.
- Funding accounts list now grouped by account subtype with uppercase
  section headers (CHECKING / SAVINGS / HSA / CD / MONEY MARKET /
  OTHER), each row showing avatar + name + subtype + balance.
- Step 2 heading "Looks good?" + Review card (goal target + funding
  accounts summary + suggested monthly = target/months_remaining), and
  a disclosure for the optional initial contribution.
- Footer: "Cancel" left text-button (closes modal) / "Back" left text
  when on step 2; "Continue →" or "Create goal →" right arrow button.

Demo generator: Depository accounts now set `subtype` ("checking" /
"savings") on the accountable so they group correctly in the modal.

Tests: all green, 35 runs in the savings suite, 92 assertions.

app/controllers/savings_goals_controller.rb

@@ -185,15 +185,45 @@ class SavingsGoalsController < ApplicationController
       end
       months_since_start = ((Date.current.year - goal.created_at.year) * 12 + (Date.current.month - goal.created_at.month)).clamp(0, 1200)
       sub_started = t("savings_goals.show.stats.months_ago", count: months_since_start)
+      linked_balance = goal.linked_accounts.sum { |a| a.balance.to_d }
+      sub_linked = t("savings_goals.show.stats.n_accounts", count: goal.linked_accounts.size)
+
+      summary = projection_summary(goal, avg)
+
       {
         avg_monthly: avg,
         avg_monthly_sub: sub_avg,
         contributions_count: goal.savings_contributions.count,
         monthly_target_sub: sub_target,
-        started_sub: sub_started
+        started_sub: sub_started,
+        linked_balance: linked_balance,
+        linked_balance_sub: sub_linked,
+        projection_summary: summary
       }
     end
 
+    def projection_summary(goal, avg_monthly)
+      currency = goal.currency
+      money = ->(amount) { Money.new(amount, currency).format }
+
+      if goal.completed? || goal.progress_percent >= 100
+        t("savings_goals.show.projection.reached")
+      elsif goal.target_date.nil?
+        t("savings_goals.show.projection.no_target_date")
+      elsif goal.monthly_target_amount && avg_monthly < goal.monthly_target_amount
+        t("savings_goals.show.projection.behind",
+          current: money.call(avg_monthly),
+          required: money.call(goal.monthly_target_amount))
+      elsif avg_monthly.positive?
+        months_to_target = (goal.remaining_amount.to_d / avg_monthly).ceil
+        projected_date = Date.current >> months_to_target.to_i
+        t("savings_goals.show.projection.on_track",
+          date: projected_date.strftime("%b %Y"))
+      else
+        t("savings_goals.show.projection.no_pace")
+      end
+    end
+
     def perform_transition!(event)
       if @savings_goal.aasm.may_fire_event?(event)
         @savings_goal.public_send("#{event}!")

app/javascript/controllers/savings_goal_projection_chart_controller.js

@@ -0,0 +1,200 @@
+import { Controller } from "@hotwired/stimulus";
+import * as d3 from "d3";
+
+// Projection chart for a savings goal. Renders:
+//   - Saved area + line from goal creation → today (solid)
+//   - Dashed projection line from today → target date (yellow if behind,
+//     green if on track)
+//   - Horizontal dashed target line with label
+//   - Today marker (vertical line + dot)
+//
+// Data shape passed via `data-savings-goal-projection-chart-data-value`
+// matches SavingsGoal#projection_payload.
+export default class extends Controller {
+  static values = { data: Object };
+
+  connect() {
+    this._draw();
+    this._resize = this._draw.bind(this);
+    window.addEventListener("resize", this._resize);
+  }
+
+  disconnect() {
+    window.removeEventListener("resize", this._resize);
+  }
+
+  _draw() {
+    const root = this.element;
+    root.innerHTML = "";
+
+    const data = this.dataValue || {};
+    const width = root.clientWidth || 720;
+    const height = root.clientHeight || 240;
+    if (width <= 0 || height <= 0) return;
+
+    const margin = { top: 28, right: 24, bottom: 28, left: 16 };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    const start = new Date(data.start_date);
+    const today = new Date(data.today);
+    const target = data.target_date ? new Date(data.target_date) : null;
+    const targetAmount = data.target_amount || 0;
+    const currentAmount = data.current_amount || 0;
+    const avgMonthly = data.avg_monthly || 0;
+
+    const endDate = target || new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
+
+    const savedSeries = [{ date: start, value: 0 }].concat(
+      (data.saved_series || []).map((p) => ({ date: new Date(p.date), value: p.value })),
+    );
+    if (savedSeries[savedSeries.length - 1].date < today) {
+      savedSeries.push({ date: today, value: currentAmount });
+    }
+
+    const projectionEnd = target
+      ? Math.max(currentAmount, currentAmount + avgMonthly * Math.max(0, this._monthsBetween(today, target)))
+      : currentAmount;
+    const projectionSeries = target
+      ? [
+          { date: today, value: currentAmount },
+          { date: target, value: projectionEnd },
+        ]
+      : [];
+
+    const yMax = Math.max(targetAmount * 1.05, projectionEnd, currentAmount, 1);
+
+    const x = d3.scaleTime().domain([start, endDate]).range([margin.left, margin.left + innerWidth]);
+    const y = d3.scaleLinear().domain([0, yMax]).range([margin.top + innerHeight, margin.top]);
+
+    const svg = d3
+      .select(root)
+      .append("svg")
+      .attr("width", width)
+      .attr("height", height)
+      .attr("viewBox", `0 0 ${width} ${height}`)
+      .attr("preserveAspectRatio", "none");
+
+    const defs = svg.append("defs");
+    const gradient = defs
+      .append("linearGradient")
+      .attr("id", `saved-fill-${this._id()}`)
+      .attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 1);
+    gradient.append("stop").attr("offset", "0%").attr("stop-color", "var(--text-primary)").attr("stop-opacity", 0.10);
+    gradient.append("stop").attr("offset", "100%").attr("stop-color", "var(--text-primary)").attr("stop-opacity", 0);
+
+    if (targetAmount > 0) {
+      svg
+        .append("line")
+        .attr("x1", margin.left)
+        .attr("x2", margin.left + innerWidth)
+        .attr("y1", y(targetAmount))
+        .attr("y2", y(targetAmount))
+        .attr("stroke", "var(--border-strong)")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "3 3");
+
+      svg
+        .append("text")
+        .attr("x", margin.left + innerWidth - 4)
+        .attr("y", y(targetAmount) - 6)
+        .attr("text-anchor", "end")
+        .attr("font-size", 10)
+        .attr("fill", "var(--text-secondary)")
+        .text(`Target · ${this._fmtMoney(targetAmount, data.currency)}`);
+    }
+
+    const area = d3
+      .area()
+      .x((d) => x(d.date))
+      .y0(margin.top + innerHeight)
+      .y1((d) => y(d.value))
+      .curve(d3.curveMonotoneX);
+
+    const line = d3
+      .line()
+      .x((d) => x(d.date))
+      .y((d) => y(d.value))
+      .curve(d3.curveMonotoneX);
+
+    svg
+      .append("path")
+      .datum(savedSeries)
+      .attr("fill", `url(#saved-fill-${this._id()})`)
+      .attr("d", area);
+
+    svg
+      .append("path")
+      .datum(savedSeries)
+      .attr("fill", "none")
+      .attr("stroke", "var(--text-primary)")
+      .attr("stroke-width", 2)
+      .attr("stroke-linejoin", "round")
+      .attr("stroke-linecap", "round")
+      .attr("d", line);
+
+    if (projectionSeries.length) {
+      const willHit = projectionEnd >= targetAmount;
+      svg
+        .append("path")
+        .datum(projectionSeries)
+        .attr("fill", "none")
+        .attr("stroke", willHit ? "var(--color-green-600)" : "var(--color-yellow-600)")
+        .attr("stroke-width", 2)
+        .attr("stroke-linecap", "round")
+        .attr("stroke-dasharray", "4 4")
+        .attr("d", line);
+    }
+
+    svg
+      .append("line")
+      .attr("x1", x(today))
+      .attr("x2", x(today))
+      .attr("y1", margin.top)
+      .attr("y2", margin.top + innerHeight)
+      .attr("stroke", "var(--border-subdued)")
+      .attr("stroke-width", 1)
+      .attr("stroke-dasharray", "2 4");
+
+    svg
+      .append("circle")
+      .attr("cx", x(today))
+      .attr("cy", y(currentAmount))
+      .attr("r", 4)
+      .attr("fill", "var(--text-primary)")
+      .attr("stroke", "var(--bg-container)")
+      .attr("stroke-width", 2);
+
+    const tickFmt = d3.timeFormat("%b %y");
+    const tickCount = Math.min(5, Math.max(2, Math.round(innerWidth / 110)));
+    const ticks = x.ticks(tickCount);
+    svg
+      .append("g")
+      .selectAll("text")
+      .data(ticks)
+      .enter()
+      .append("text")
+      .attr("x", (d) => x(d))
+      .attr("y", height - 8)
+      .attr("text-anchor", "middle")
+      .attr("font-size", 10)
+      .attr("fill", "var(--text-subdued)")
+      .text((d) => tickFmt(d));
+  }
+
+  _monthsBetween(a, b) {
+    return (b - a) / (1000 * 60 * 60 * 24 * 30.44);
+  }
+
+  _fmtMoney(amount, currency) {
+    const symbol = currency === "EUR" ? "€" : currency === "GBP" ? "£" : "$";
+    return `${symbol}${Math.round(amount).toLocaleString()}`;
+  }
+
+  _id() {
+    if (!this._cachedId) {
+      this._cachedId = Math.random().toString(36).slice(2, 8);
+    }
+    return this._cachedId;
+  }
+}

app/javascript/controllers/savings_goal_stepper_controller.js

@@ -3,46 +3,86 @@ import { Controller } from "@hotwired/stimulus";
 // 2-step modal stepper for creating a savings goal.
 //
 // Single <form> with two panels. Step 1 collects identity (name, amount,
-// date, color, notes). Step 2 collects ≥1 linked depository accounts and
-// optionally an initial contribution. Submit button stays disabled until at
-// least one linked account is selected. Step state lives entirely in the
-// DOM — no half-records.
+// date, color, notes, linked accounts). Step 2 reviews + optional initial
+// contribution. All state lives in the DOM — no half-records, single POST.
 export default class extends Controller {
   static targets = [
     "step1Panel",
     "step2Panel",
     "step1Indicator",
     "step2Indicator",
-    "step1Field",
-    "nameField",
-    "targetAmountField",
+    "step1Circle",
+    "step2Circle",
+    "stepperLine",
+    "modalSubtitle",
     "linkedAccountCheckbox",
     "initialContributionAmount",
     "initialContributionAccountSelect",
-    "reviewPanel",
     "reviewName",
-    "reviewAmount",
-    "reviewDate",
+    "reviewSummary",
     "reviewAccounts",
+    "reviewSuggested",
+    "footerLeftButton",
+    "footerLeftLabel",
+    "footerRightButton",
     "submitButton",
   ];
 
-  next(event) {
-    event?.preventDefault?.();
-    if (!this.validateStep1()) return;
+  static values = {
+    step1Subtitle: { type: String, default: "Step 1 of 2 · Goal details" },
+    step2Subtitle: { type: String, default: "Step 2 of 2 · Review & start" },
+    cancelLabel: { type: String, default: "Cancel" },
+    backLabel: { type: String, default: "Back" },
+    continueLabel: { type: String, default: "Continue" },
+    submitLabel: { type: String, default: "Create goal" },
+  };
 
-    this.step1PanelTarget.classList.add("hidden");
-    this.step2PanelTarget.classList.remove("hidden");
-    this.markStepActive(2);
-    this.updateReview();
+  connect() {
+    this.currentStep = 1;
     this.refreshSubmitState();
   }
 
-  back(event) {
-    event?.preventDefault?.();
+  footerLeft(event) {
+    event.preventDefault();
+    if (this.currentStep === 1) {
+      const dialog = this.element.closest("dialog");
+      if (dialog) dialog.close();
+    } else {
+      this.back();
+    }
+  }
+
+  footerRight(event) {
+    event.preventDefault();
+    if (this.currentStep === 1) {
+      this.next();
+    } else {
+      this.submitButtonTarget.click();
+    }
+  }
+
+  next() {
+    if (!this.validateStep1()) return;
+    if (!this.linkedAccountCheckboxTargets.some((cb) => cb.checked)) {
+      this.flashLinkedAccountsRequired();
+      return;
+    }
+
+    this.currentStep = 2;
+    this.step1PanelTarget.classList.add("hidden");
+    this.step2PanelTarget.classList.remove("hidden");
+    this.updateStepperState();
+    this.refreshAccountSelect();
+    this.updateReview();
+    this.updateFooter();
+  }
+
+  back() {
+    this.currentStep = 1;
     this.step2PanelTarget.classList.add("hidden");
     this.step1PanelTarget.classList.remove("hidden");
-    this.markStepActive(1);
+    this.updateStepperState();
+    this.updateFooter();
   }
 
   linkedAccountChanged() {
@@ -66,20 +106,17 @@ export default class extends Controller {
   }
 
   refreshSubmitState() {
+    if (!this.hasFooterRightButtonTarget) return;
     const anyChecked = this.linkedAccountCheckboxTargets.some((cb) => cb.checked);
-    this.submitButtonTarget.disabled = !anyChecked;
+    this.footerRightButtonTarget.disabled = false;
+    this.footerRightButtonTarget.classList.toggle("opacity-50", !anyChecked && this.currentStep === 1);
   }
 
   refreshAccountSelect() {
     if (!this.hasInitialContributionAccountSelectTarget) return;
-
     const select = this.initialContributionAccountSelectTarget;
     const previous = select.value;
-    select.innerHTML = "";
-    const blank = document.createElement("option");
-    blank.value = "";
-    blank.textContent = select.dataset.blankLabel || "—";
-    select.appendChild(blank);
+    while (select.options.length > 1) select.remove(1);
 
     this.linkedAccountCheckboxTargets
       .filter((cb) => cb.checked)
@@ -95,35 +132,113 @@ export default class extends Controller {
     }
   }
 
-  updateReview() {
-    if (!this.hasReviewPanelTarget) return;
-
-    if (this.hasReviewNameTarget) {
-      const nameInput = this.element.querySelector('input[name="savings_goal[name]"]');
-      this.reviewNameTarget.textContent = nameInput?.value || "—";
+  updateStepperState() {
+    if (this.hasStep1CircleTarget) {
+      this.step1CircleTarget.classList.toggle("bg-inverse", this.currentStep === 1);
+      this.step1CircleTarget.classList.toggle("text-inverse", this.currentStep === 1);
+      this.step1CircleTarget.classList.toggle("bg-success", this.currentStep > 1);
+      this.step1CircleTarget.classList.toggle("text-inverse", this.currentStep === 1);
+      if (this.currentStep > 1) {
+        this.step1CircleTarget.textContent = "✓";
+      } else {
+        this.step1CircleTarget.textContent = "1";
+      }
     }
-    if (this.hasReviewAmountTarget) {
-      const amountInput = this.element.querySelector('input[name="savings_goal[target_amount]"]');
-      this.reviewAmountTarget.textContent = amountInput?.value || "—";
+    if (this.hasStep2CircleTarget) {
+      this.step2CircleTarget.classList.toggle("bg-inverse", this.currentStep === 2);
+      this.step2CircleTarget.classList.toggle("text-inverse", this.currentStep === 2);
+      this.step2CircleTarget.classList.toggle("bg-container-inset", this.currentStep < 2);
+      this.step2CircleTarget.classList.toggle("text-secondary", this.currentStep < 2);
     }
-    if (this.hasReviewDateTarget) {
-      const dateInput = this.element.querySelector('input[type="date"][name="savings_goal[target_date]"]');
-      this.reviewDateTarget.textContent = dateInput?.value || "—";
+    if (this.hasStepperLineTarget) {
+      this.stepperLineTarget.classList.toggle("bg-inverse", this.currentStep > 1);
     }
-    if (this.hasReviewAccountsTarget) {
-      const names = this.linkedAccountCheckboxTargets
-        .filter((cb) => cb.checked)
-        .map((cb) => cb.dataset.accountName || cb.value);
-      this.reviewAccountsTarget.textContent = names.length ? names.join(", ") : "—";
+    // Modal subtitle lives in the dialog header, outside this controller's
+    // DOM scope. Locate it by attribute and update directly.
+    const subtitle = document.querySelector('[data-savings-goal-stepper-modal-subtitle]');
+    if (subtitle) {
+      subtitle.textContent =
+        this.currentStep === 1 ? this.step1SubtitleValue : this.step2SubtitleValue;
     }
   }
 
-  markStepActive(stepNumber) {
-    if (this.hasStep1IndicatorTarget) {
-      this.step1IndicatorTarget.classList.toggle("text-primary", stepNumber === 1);
+  updateFooter() {
+    if (this.hasFooterLeftLabelTarget) {
+      this.footerLeftLabelTarget.textContent =
+        this.currentStep === 1 ? this.cancelLabelValue : this.backLabelValue;
     }
-    if (this.hasStep2IndicatorTarget) {
-      this.step2IndicatorTarget.classList.toggle("text-primary", stepNumber === 2);
+    if (this.hasFooterRightButtonTarget) {
+      const labelSpan = this.footerRightButtonTarget.querySelector("span");
+      if (labelSpan) {
+        labelSpan.textContent =
+          this.currentStep === 1 ? this.continueLabelValue : this.submitLabelValue;
+      }
+    }
+    this.refreshSubmitState();
+  }
+
+  updateReview() {
+    if (!this.hasReviewNameTarget) return;
+
+    const name = this.element.querySelector('input[name="savings_goal[name]"]')?.value || "—";
+    const amountInput = this.element.querySelector('input[name="savings_goal[target_amount]"]');
+    const amount = amountInput?.value ? parseFloat(amountInput.value) : 0;
+    const dateInput = this.element.querySelector('input[type="date"][name="savings_goal[target_date]"]');
+    const dateValue = dateInput?.value;
+
+    this.reviewNameTarget.textContent = name;
+
+    if (this.hasReviewSummaryTarget) {
+      const currency = amountInput?.dataset?.currency || "$";
+      const formattedAmount = amountInput?.value ? `${currency}${amount.toLocaleString()}` : "—";
+      this.reviewSummaryTarget.textContent = dateValue
+        ? `${formattedAmount} by ${this.#formatDate(dateValue)}`
+        : formattedAmount;
+    }
+
+    if (this.hasReviewAccountsTarget) {
+      const checked = this.linkedAccountCheckboxTargets.filter((cb) => cb.checked);
+      const total = checked.reduce(
+        (sum, cb) => sum + parseFloat(cb.dataset.accountBalance || 0),
+        0,
+      );
+      this.reviewAccountsTarget.textContent = checked.length
+        ? `${checked.length} ${checked.length === 1 ? "account" : "accounts"} · $${total.toLocaleString()} balance`
+        : "—";
+    }
+
+    if (this.hasReviewSuggestedTarget) {
+      const months = dateValue ? this.#monthsBetween(new Date(), new Date(dateValue)) : 0;
+      if (amount > 0 && months > 0) {
+        const perMonth = Math.ceil(amount / months);
+        this.reviewSuggestedTarget.textContent = `$${perMonth.toLocaleString()}/mo over ${Math.max(1, Math.round(months))} months`;
+      } else if (amount > 0) {
+        this.reviewSuggestedTarget.textContent = `$${amount.toLocaleString()} (no target date)`;
+      } else {
+        this.reviewSuggestedTarget.textContent = "—";
+      }
+    }
+  }
+
+  flashLinkedAccountsRequired() {
+    const first = this.linkedAccountCheckboxTargets[0];
+    if (first) {
+      first.focus();
+      first.classList.add("ring-2", "ring-destructive");
+      setTimeout(() => first.classList.remove("ring-2", "ring-destructive"), 1200);
+    }
+  }
+
+  #monthsBetween(from, to) {
+    return (to - from) / (1000 * 60 * 60 * 24 * 30.44);
+  }
+
+  #formatDate(iso) {
+    try {
+      const d = new Date(iso);
+      return d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
+    } catch (e) {
+      return iso;
     }
   }
 }

app/models/demo/generator.rb

@@ -250,14 +250,14 @@ class Demo::Generator
 
     def create_realistic_accounts!(family)
       # Checking accounts (USD)
-      @chase_checking = family.accounts.create!(accountable: Depository.new, name: "Chase Premier Checking", balance: 0, currency: "USD")
-      @ally_checking = family.accounts.create!(accountable: Depository.new, name: "Ally Online Checking", balance: 0, currency: "USD")
+      @chase_checking = family.accounts.create!(accountable: Depository.new(subtype: "checking"), name: "Chase Premier Checking", balance: 0, currency: "USD")
+      @ally_checking = family.accounts.create!(accountable: Depository.new(subtype: "checking"), name: "Ally Online Checking", balance: 0, currency: "USD")
 
       # Savings account (USD)
-      @marcus_savings = family.accounts.create!(accountable: Depository.new, name: "Marcus High-Yield Savings", balance: 0, currency: "USD")
+      @marcus_savings = family.accounts.create!(accountable: Depository.new(subtype: "savings"), name: "Marcus High-Yield Savings", balance: 0, currency: "USD")
 
       # EUR checking (EUR)
-      @eu_checking = family.accounts.create!(accountable: Depository.new, name: "Deutsche Bank EUR Account", balance: 0, currency: "EUR")
+      @eu_checking = family.accounts.create!(accountable: Depository.new(subtype: "checking"), name: "Deutsche Bank EUR Account", balance: 0, currency: "EUR")
 
       # Credit cards (USD)
       @amex_gold = family.accounts.create!(accountable: CreditCard.new, name: "Amex Gold Card", balance: 0, currency: "USD")

app/models/savings_goal.rb

@@ -131,6 +131,31 @@ class SavingsGoal < ApplicationRecord
     segments
   end
 
+  # Cumulative contributions series for the projection chart, sorted by
+  # date ascending. Consumed by the
+  # `savings-goal-projection-chart` Stimulus controller.
+  def projection_payload
+    sorted = savings_contributions.order(contributed_at: :asc).to_a
+    running = 0
+    saved_series = sorted.map do |c|
+      running += c.amount.to_d
+      { date: c.contributed_at.to_s, value: running.to_f }
+    end
+
+    {
+      saved_series: saved_series,
+      start_date: created_at.to_date.to_s,
+      today: Date.current.to_s,
+      target_date: target_date&.to_s,
+      target_amount: target_amount.to_f,
+      current_amount: current_balance.to_f,
+      avg_monthly: average_monthly_contribution.to_f,
+      required_monthly: monthly_target_amount.to_f,
+      currency: currency,
+      status: status.to_s
+    }
+  end
+
   # :reached → progress_percent >= 100
   # :on_track → has target_date and current pace >= required monthly pace
   # :behind → has target_date and current pace < required monthly pace

app/views/savings_goals/_empty_state.html.erb

@@ -1,12 +1,12 @@
 <%# locals: (linkable_account_count:) %>
 
-<div class="bg-container rounded-xl shadow-border-xs py-16">
-  <div class="flex flex-col items-center text-center max-w-md mx-auto">
-    <div class="w-12 h-12 rounded-full bg-container-inset flex items-center justify-center mb-3">
-      <%= icon("piggy-bank", size: "lg") %>
+<div class="bg-container rounded-xl shadow-border-xs py-20">
+  <div class="flex flex-col items-center text-center max-w-md mx-auto px-6">
+    <div class="w-24 h-24 rounded-full bg-surface-inset flex items-center justify-center mb-5 text-secondary">
+      <%= icon("target", size: "2xl") %>
     </div>
-    <h2 class="text-base font-medium text-primary mb-1"><%= t("savings_goals.empty_state.heading") %></h2>
-    <p class="text-sm text-secondary mb-4"><%= t("savings_goals.empty_state.subtitle") %></p>
+    <h2 class="text-lg font-medium text-primary mb-2"><%= t("savings_goals.empty_state.heading") %></h2>
+    <p class="text-sm text-secondary leading-relaxed mb-5"><%= t("savings_goals.empty_state.body") %></p>
 
     <% if linkable_account_count > 0 %>
       <%= render DS::Link.new(

app/views/savings_goals/_form_stepper.html.erb

@@ -5,45 +5,78 @@
     <%= render "shared/form_errors", model: savings_goal %>
   <% end %>
 
-  <ol class="flex items-center gap-2 mb-4 text-xs font-medium text-secondary">
-    <li class="inline-flex items-center gap-1.5"
-        data-savings-goal-stepper-target="step1Indicator">
-      <span class="w-5 h-5 rounded-full inline-flex items-center justify-center bg-inverse text-primary">1</span>
-      <span class="text-primary"><%= t("savings_goals.form_stepper.step1.heading") %></span>
-    </li>
-    <span class="text-subdued">→</span>
-    <li class="inline-flex items-center gap-1.5"
-        data-savings-goal-stepper-target="step2Indicator">
-      <span class="w-5 h-5 rounded-full inline-flex items-center justify-center bg-container-inset">2</span>
-      <span><%= t("savings_goals.form_stepper.step2.heading") %></span>
-    </li>
-  </ol>
+  <%# Connected stepper %>
+  <div class="flex items-center gap-3 mb-6">
+    <div class="flex items-center gap-2" data-savings-goal-stepper-target="step1Indicator">
+      <span data-savings-goal-stepper-target="step1Circle" class="w-7 h-7 rounded-full inline-flex items-center justify-center bg-inverse text-inverse text-xs font-medium">1</span>
+      <span class="text-sm font-medium text-primary"><%= t("savings_goals.form_stepper.step1.label") %></span>
+    </div>
+    <div class="flex-1 h-px bg-subdued" data-savings-goal-stepper-target="stepperLine"></div>
+    <div class="flex items-center gap-2" data-savings-goal-stepper-target="step2Indicator">
+      <span data-savings-goal-stepper-target="step2Circle" class="w-7 h-7 rounded-full inline-flex items-center justify-center bg-container-inset text-secondary text-xs font-medium">2</span>
+      <span class="text-sm font-medium text-secondary"><%= t("savings_goals.form_stepper.step2.label") %></span>
+    </div>
+  </div>
 
   <%= styled_form_with model: savings_goal, url: savings_goals_path, class: "space-y-4" do |f| %>
-    <section data-savings-goal-stepper-target="step1Panel" class="space-y-3">
-      <%= f.text_field :name,
-                       label: t("savings_goals.form_stepper.step1.fields.name"),
-                       required: true,
-                       autofocus: true,
-                       data: { savings_goal_stepper_target: "step1Field nameField" } %>
-
-      <%= f.money_field :target_amount,
-                        label: t("savings_goals.form_stepper.step1.fields.target_amount"),
-                        required: true,
-                        data: { savings_goal_stepper_target: "step1Field targetAmountField" } %>
-
-      <%= f.date_field :target_date,
-                       label: t("savings_goals.form_stepper.step1.fields.target_date") %>
+    <section data-savings-goal-stepper-target="step1Panel" class="space-y-5">
+      <div>
+        <h3 class="text-lg font-semibold text-primary mb-1"><%= t("savings_goals.form_stepper.step1.heading") %></h3>
+        <p class="text-sm text-secondary"><%= t("savings_goals.form_stepper.step1.subheading") %></p>
+      </div>
 
       <div>
-        <span class="block text-sm text-secondary mb-2"><%= t("savings_goals.form_stepper.step1.fields.color") %></span>
-        <div class="flex flex-wrap gap-2">
-          <% SavingsGoal::COLORS.each do |c| %>
-            <label class="relative">
-              <%= f.radio_button :color, c, class: "sr-only peer" %>
-              <div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-gray-500"
-                   style="background-color: <%= c %>"></div>
-            </label>
+        <label class="block text-sm font-medium text-primary mb-2"><%= t("savings_goals.form_stepper.step1.fields.name") %></label>
+        <div class="flex items-stretch gap-2">
+          <span class="shrink-0">
+            <%= render DS::FilledIcon.new(variant: :container, icon: "target", size: "lg", rounded: false) %>
+          </span>
+          <%= f.text_field :name,
+                           placeholder: t("savings_goals.form_stepper.step1.fields.name_placeholder"),
+                           required: true,
+                           autofocus: true,
+                           label: "",
+                           class: "flex-1" %>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-3">
+        <%= f.money_field :target_amount,
+                          label: t("savings_goals.form_stepper.step1.fields.target_amount"),
+                          required: true %>
+        <%= f.date_field :target_date,
+                         label: t("savings_goals.form_stepper.step1.fields.target_date") %>
+      </div>
+
+      <div>
+        <span class="block text-sm font-medium text-primary mb-2"><%= t("savings_goals.form_stepper.step1.fields.funding_accounts") %></span>
+        <div class="bg-container-inset rounded-lg p-1">
+          <% grouped = linkable_accounts.group_by { |a| a.subtype.to_s.presence || "other" } %>
+          <% grouped.each_with_index do |(subtype, accts), group_idx| %>
+            <div class="px-3 py-2 text-[11px] font-medium uppercase tracking-wide text-secondary"><%= t("savings_goals.form_stepper.step1.subtypes.#{subtype}", default: subtype.titleize) %></div>
+            <div class="bg-container rounded-md <%= "mb-1" if group_idx < grouped.size - 1 %>">
+              <% accts.each_with_index do |account, idx| %>
+                <label class="flex items-center gap-3 px-3 py-2.5 cursor-pointer hover:bg-surface-hover <%= "border-t border-subdued" if idx > 0 %>">
+                  <%= check_box_tag "savings_goal[account_ids][]",
+                                    account.id,
+                                    false,
+                                    class: "shrink-0",
+                                    data: {
+                                      savings_goal_stepper_target: "linkedAccountCheckbox",
+                                      action: "change->savings-goal-stepper#linkedAccountChanged",
+                                      account_name: account.name,
+                                      account_subtype: account.subtype || subtype,
+                                      account_balance: account.balance
+                                    } %>
+                  <%= render Savings::GoalAvatarComponent.new(name: account.name, color: "var(--color-blue-500)", size: "md") %>
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-primary truncate"><%= account.name %></p>
+                    <p class="text-xs text-secondary"><%= (account.subtype || subtype).titleize %></p>
+                  </div>
+                  <span class="text-sm text-primary tabular-nums"><%= Money.new(account.balance, account.currency).format %></span>
+                </label>
+              <% end %>
+            </div>
           <% end %>
         </div>
       </div>
@@ -52,83 +85,94 @@
                       label: t("savings_goals.form_stepper.step1.fields.notes"),
                       rows: 2 %>
 
-      <div class="flex justify-end pt-2">
-        <%= render DS::Button.new(
-          text: t("savings_goals.form_stepper.continue"),
-          variant: "primary",
-          data: { action: "click->savings-goal-stepper#next" }
-        ) %>
-      </div>
+      <%# Hidden color (random) %>
+      <%= f.hidden_field :color, value: savings_goal.color || SavingsGoal::COLORS.sample %>
     </section>
 
-    <section data-savings-goal-stepper-target="step2Panel" class="space-y-4 hidden">
+    <section data-savings-goal-stepper-target="step2Panel" class="space-y-5 hidden">
       <div>
-        <span class="block text-sm font-medium text-primary"><%= t("savings_goals.form_stepper.step2.linked_accounts_heading") %></span>
-        <p class="text-xs text-secondary mb-2"><%= t("savings_goals.form_stepper.step2.linked_accounts_hint") %></p>
+        <h3 class="text-lg font-semibold text-primary mb-1"><%= t("savings_goals.form_stepper.step2.heading") %></h3>
+        <p class="text-sm text-secondary"><%= t("savings_goals.form_stepper.step2.subheading") %></p>
+      </div>
 
-        <div class="space-y-2 max-h-56 overflow-y-auto pr-1">
-          <% linkable_accounts.each do |account| %>
-            <label class="flex items-center gap-3 px-3 py-2 rounded-md bg-container-inset hover:bg-container-inset-hover cursor-pointer">
-              <%= check_box_tag "savings_goal[account_ids][]",
-                                account.id,
-                                false,
-                                data: {
-                                  savings_goal_stepper_target: "linkedAccountCheckbox",
-                                  action: "change->savings-goal-stepper#linkedAccountChanged",
-                                  account_currency: account.currency,
-                                  account_name: account.name
-                                } %>
-              <div class="flex-1 min-w-0">
-                <p class="text-sm text-primary truncate"><%= account.name %></p>
-                <p class="text-xs text-secondary"><%= account.subtype&.titleize %> · <%= Money.new(account.balance, account.currency).format %></p>
-              </div>
-            </label>
-          <% end %>
+      <div class="border border-subdued rounded-lg p-5 space-y-4">
+        <div class="flex items-center gap-3">
+          <%= render DS::FilledIcon.new(variant: :container, icon: "target", size: "lg", rounded: false) %>
+          <div class="min-w-0 flex-1">
+            <p class="text-base font-medium text-primary truncate" data-savings-goal-stepper-target="reviewName">—</p>
+            <p class="text-sm text-secondary tabular-nums" data-savings-goal-stepper-target="reviewSummary">—</p>
+          </div>
+        </div>
+
+        <div class="border-t border-subdued pt-3 flex items-center justify-between text-sm">
+          <span class="text-secondary"><%= t("savings_goals.form_stepper.step2.funding_accounts") %></span>
+          <span class="text-primary tabular-nums" data-savings-goal-stepper-target="reviewAccounts">—</span>
+        </div>
+
+        <div class="border-t border-subdued pt-3 flex items-center justify-between text-sm">
+          <span class="text-secondary"><%= t("savings_goals.form_stepper.step2.suggested_monthly") %></span>
+          <span class="text-primary tabular-nums" data-savings-goal-stepper-target="reviewSuggested">—</span>
         </div>
       </div>
 
-      <details data-savings-goal-stepper-target="initialContributionToggle">
-        <summary class="cursor-pointer text-sm text-primary"><%= t("savings_goals.form_stepper.step2.add_initial_contribution") %></summary>
-        <div class="mt-3 space-y-2">
-          <%= label_tag "savings_goal[initial_contribution_amount]",
-                       t("savings_goals.form_stepper.step2.initial_amount"),
-                       class: "block text-sm text-secondary" %>
-          <%= number_field_tag "savings_goal[initial_contribution_amount]",
-                               nil,
-                               step: "0.01", min: "0",
-                               autocomplete: "off",
-                               class: "w-full",
-                               data: { savings_goal_stepper_target: "initialContributionAmount" } %>
-
-          <%= label_tag "savings_goal[initial_contribution_account_id]",
-                       t("savings_goals.form_stepper.step2.initial_account"),
-                       class: "block text-sm text-secondary" %>
-          <%= select_tag "savings_goal[initial_contribution_account_id]",
-                         options_for_select([]),
-                         include_blank: t("savings_goals.form_stepper.step2.select_account"),
-                         data: { savings_goal_stepper_target: "initialContributionAccountSelect" },
-                         class: "w-full" %>
+      <details class="border border-subdued rounded-lg group" data-savings-goal-stepper-target="initialContributionToggle">
+        <summary class="flex items-center gap-3 p-4 cursor-pointer list-none">
+          <%= render DS::FilledIcon.new(variant: :container, icon: "zap", size: "md", rounded: false) %>
+          <div class="flex-1">
+            <p class="text-sm font-medium text-primary"><%= t("savings_goals.form_stepper.step2.add_initial_contribution") %></p>
+            <p class="text-xs text-secondary"><%= t("savings_goals.form_stepper.step2.add_initial_contribution_sub") %></p>
+          </div>
+          <%= icon("chevron-down", size: "sm") %>
+        </summary>
+        <div class="px-4 pb-4 space-y-3">
+          <div>
+            <%= label_tag "savings_goal[initial_contribution_amount]",
+                         t("savings_goals.form_stepper.step2.initial_amount"),
+                         class: "block text-sm text-secondary mb-1" %>
+            <%= number_field_tag "savings_goal[initial_contribution_amount]",
+                                 nil,
+                                 step: "0.01", min: "0",
+                                 autocomplete: "off",
+                                 class: "w-full",
+                                 data: { savings_goal_stepper_target: "initialContributionAmount" } %>
+          </div>
+          <div>
+            <%= label_tag "savings_goal[initial_contribution_account_id]",
+                         t("savings_goals.form_stepper.step2.initial_account"),
+                         class: "block text-sm text-secondary mb-1" %>
+            <%= select_tag "savings_goal[initial_contribution_account_id]",
+                           options_for_select([]),
+                           include_blank: t("savings_goals.form_stepper.step2.select_account"),
+                           data: { savings_goal_stepper_target: "initialContributionAccountSelect" },
+                           class: "w-full" %>
+          </div>
         </div>
       </details>
-
-      <div class="bg-container-inset rounded-md p-3 text-sm space-y-1" data-savings-goal-stepper-target="reviewPanel">
-        <p class="text-secondary"><%= t("savings_goals.form_stepper.step2.review_heading") %></p>
-        <p><strong data-savings-goal-stepper-target="reviewName">—</strong></p>
-        <p><span class="text-secondary"><%= t("savings_goals.form_stepper.step2.review_target") %>:</span> <span data-savings-goal-stepper-target="reviewAmount">—</span></p>
-        <p><span class="text-secondary"><%= t("savings_goals.form_stepper.step2.review_date") %>:</span> <span data-savings-goal-stepper-target="reviewDate">—</span></p>
-        <p><span class="text-secondary"><%= t("savings_goals.form_stepper.step2.review_accounts") %>:</span> <span data-savings-goal-stepper-target="reviewAccounts">—</span></p>
-      </div>
-
-      <div class="flex items-center justify-between pt-2">
-        <%= render DS::Button.new(
-          text: t("savings_goals.form_stepper.back"),
-          variant: "secondary",
-          data: { action: "click->savings-goal-stepper#back" }
-        ) %>
-        <%= f.submit t("savings_goals.form_stepper.submit"),
-                    data: { savings_goal_stepper_target: "submitButton" },
-                    disabled: true %>
-      </div>
     </section>
+
+    <div class="flex items-center justify-between pt-2 border-t border-subdued -mx-1 px-1">
+      <button type="button"
+              class="text-sm font-medium text-secondary hover:text-primary px-2 py-2"
+              data-savings-goal-stepper-target="footerLeftButton"
+              data-action="click->savings-goal-stepper#footerLeft"
+              data-cancel-action="DS--dialog#close">
+        <span data-savings-goal-stepper-target="footerLeftLabel"><%= t("savings_goals.form_stepper.cancel") %></span>
+      </button>
+      <%= render DS::Button.new(
+        text: t("savings_goals.form_stepper.continue"),
+        variant: "primary",
+        icon: "arrow-right",
+        icon_position: :right,
+        data: {
+          savings_goal_stepper_target: "footerRightButton",
+          action: "click->savings-goal-stepper#footerRight"
+        }
+      ) %>
+      <button type="submit"
+              class="sr-only"
+              tabindex="-1"
+              aria-hidden="true"
+              data-savings-goal-stepper-target="submitButton"><%= t("savings_goals.form_stepper.submit") %></button>
+    </div>
   <% end %>
 </div>

app/views/savings_goals/new.html.erb

@@ -1,5 +1,18 @@
-<%= render DS::Dialog.new do |dialog| %>
-  <% dialog.with_header(title: t(".heading")) %>
+<%= render DS::Dialog.new(width: "lg") do |dialog| %>
+  <% dialog.with_header(custom_header: true) do %>
+    <div class="flex items-start justify-between gap-3">
+      <div class="flex items-start gap-3">
+        <%= render DS::FilledIcon.new(variant: :container, icon: "target", size: "lg", rounded: false) %>
+        <div>
+          <h2 class="text-base font-medium text-primary"><%= t(".heading") %></h2>
+          <p class="text-sm text-secondary mt-0.5" data-savings-goal-stepper-modal-subtitle>
+            <%= t(".step1_subtitle") %>
+          </p>
+        </div>
+      </div>
+      <%= render DS::Button.new(variant: "icon", icon: "x", title: t("common.close"), aria_label: t("common.close"), data: { action: "DS--dialog#close" }) %>
+    </div>
+  <% end %>
   <% dialog.with_body do %>
     <%= render "form_stepper", savings_goal: @savings_goal, linkable_accounts: @linkable_accounts %>
   <% end %>

app/views/savings_goals/show.html.erb

@@ -1,4 +1,11 @@
 <div class="space-y-4">
+  <div class="text-xs">
+    <%= link_to savings_goals_path, class: "inline-flex items-center gap-1 text-secondary hover:text-primary" do %>
+      <%= icon("arrow-left", size: "sm") %>
+      <%= t(".back_to_all") %>
+    <% end %>
+  </div>
+
   <header class="flex items-start gap-4">
     <%= render Savings::GoalAvatarComponent.new(goal: @savings_goal, size: "xl") %>
     <div class="min-w-0 flex-1">
@@ -64,21 +71,43 @@
     </div>
   </header>
 
-  <section class="bg-container rounded-xl shadow-border-xs p-6">
-    <div class="flex flex-col items-center text-center">
-      <%= render Savings::ProgressRingComponent.new(goal: @savings_goal, size: 200) %>
-      <div class="mt-4 text-center">
-        <p class="text-xl font-medium text-primary tabular-nums privacy-sensitive"><%= @savings_goal.current_balance_money.format %></p>
-        <p class="text-xs text-subdued tabular-nums mt-0.5">
-          <%= t(".ring.of", target: @savings_goal.target_amount_money.format) %>
-          <% unless @savings_goal.completed? %>
-            · <%= t(".ring.to_go", amount: @savings_goal.remaining_amount_money.format) %>
-          <% end %>
-        </p>
+  <%# Top row: ring card + projection chart card %>
+  <section class="grid grid-cols-1 lg:grid-cols-[320px_minmax(0,1fr)] gap-3">
+    <div class="bg-container rounded-xl shadow-border-xs p-5 flex flex-col items-center justify-center text-center">
+      <%= render Savings::ProgressRingComponent.new(goal: @savings_goal, size: 180) %>
+      <p class="text-xl font-medium text-primary tabular-nums privacy-sensitive mt-4"><%= @savings_goal.current_balance_money.format %></p>
+      <p class="text-xs text-subdued tabular-nums mt-0.5">
+        <%= t(".ring.of", target: @savings_goal.target_amount_money.format) %>
+        <% unless @savings_goal.completed? %>
+          · <%= t(".ring.to_go", amount: @savings_goal.remaining_amount_money.format) %>
+        <% end %>
+      </p>
+    </div>
+
+    <div class="bg-container rounded-xl shadow-border-xs p-5 flex flex-col">
+      <div class="flex items-start justify-between mb-2 gap-3">
+        <div class="min-w-0">
+          <h3 class="text-sm font-medium text-primary"><%= t(".projection.heading") %></h3>
+          <p class="text-xs text-secondary mt-0.5"><%= @stats[:projection_summary].html_safe %></p>
+        </div>
+        <div class="flex items-center gap-3 text-[11px] text-secondary shrink-0">
+          <span class="inline-flex items-center gap-1.5">
+            <svg width="18" height="6"><line x1="0" y1="3" x2="18" y2="3" stroke="var(--text-primary)" stroke-width="2" /></svg>
+            <%= t(".projection.legend_saved") %>
+          </span>
+          <span class="inline-flex items-center gap-1.5">
+            <svg width="18" height="6"><line x1="0" y1="3" x2="18" y2="3" stroke="var(--color-yellow-600)" stroke-width="2" stroke-dasharray="3 3" /></svg>
+            <%= t(".projection.legend_projection") %>
+          </span>
+        </div>
       </div>
+      <div class="flex-1 min-h-[200px]"
+           data-controller="savings-goal-projection-chart"
+           data-savings-goal-projection-chart-data-value="<%= @savings_goal.projection_payload.to_json %>"></div>
     </div>
   </section>
 
+  <%# Stat row %>
   <section class="grid grid-cols-2 md:grid-cols-4 gap-3">
     <div class="bg-container rounded-xl shadow-border-xs px-5 py-4">
       <p class="text-[11px] text-secondary mb-1"><%= t(".stats.avg_monthly") %></p>
@@ -91,9 +120,9 @@
       <p class="text-[11px] text-subdued mt-1"><%= t(".stats.across_all_accounts") %></p>
     </div>
     <div class="bg-container rounded-xl shadow-border-xs px-5 py-4">
-      <p class="text-[11px] text-secondary mb-1"><%= t(".stats.target_date") %></p>
-      <p class="text-lg font-medium text-primary"><%= @savings_goal.target_date ? I18n.l(@savings_goal.target_date, format: :long) : t(".stats.no_target_date") %></p>
-      <p class="text-[11px] text-subdued mt-1"><%= @stats[:monthly_target_sub] %></p>
+      <p class="text-[11px] text-secondary mb-1"><%= t(".stats.linked_balance") %></p>
+      <p class="text-lg font-medium text-primary tabular-nums"><%= Money.new(@stats[:linked_balance], @savings_goal.currency).format %></p>
+      <p class="text-[11px] text-subdued mt-1"><%= @stats[:linked_balance_sub] %></p>
     </div>
     <div class="bg-container rounded-xl shadow-border-xs px-5 py-4">
       <p class="text-[11px] text-secondary mb-1"><%= t(".stats.started") %></p>
@@ -102,8 +131,9 @@
     </div>
   </section>
 
-  <section class="grid grid-cols-1 lg:grid-cols-5 gap-3">
-    <div class="bg-container rounded-xl shadow-border-xs overflow-hidden lg:col-span-3">
+  <%# Bottom row: contributions + funding accounts %>
+  <section class="grid grid-cols-1 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)] gap-3">
+    <div class="bg-container rounded-xl shadow-border-xs overflow-hidden">
       <div class="flex items-center px-5 py-3.5 border-b border-subdued">
         <h3 class="text-sm font-medium text-primary"><%= t(".contributions_heading") %></h3>
         <span class="ml-2 text-xs text-subdued tabular-nums"><%= @contributions.size %></span>
@@ -111,7 +141,7 @@
       <%= render "contributions_list", contributions: @contributions %>
     </div>
 
-    <div class="bg-container rounded-xl shadow-border-xs p-5 lg:col-span-2">
+    <div class="bg-container rounded-xl shadow-border-xs p-5">
       <h3 class="text-sm font-medium text-primary mb-3"><%= t(".funding_accounts_heading") %></h3>
       <%= render Savings::FundingAccountsBreakdownComponent.new(goal: @savings_goal, rows: @funding_breakdown) %>
     </div>

config/locales/views/layout/en.yml

@@ -8,7 +8,7 @@ en:
         budgets: Budgets
         home: Home
         reports: Reports
-        savings_goals: Savings goals
+        savings_goals: Savings
         transactions: Transactions
     auth:
       existing_account: Already have an account?

config/locales/views/savings_goals/en.yml

@@ -19,6 +19,8 @@ en:
         behind: Behind
     new:
       heading: New savings goal
+      step1_subtitle: Step 1 of 2 · Goal details
+      step2_subtitle: Step 2 of 2 · Review & start
     edit:
       heading: Edit savings goal
       save: Save changes
@@ -67,12 +69,24 @@ en:
         saved: Saved
         of: "of %{target}"
         to_go: "%{amount} to go"
+        of_target: of target
+      projection:
+        heading: Projection
+        legend_saved: Saved
+        legend_projection: Projection
+        reached: Goal reached. Nice work.
+        no_target_date: No target date set. Set one to project a finish line.
+        no_pace: No contributions yet. Add some to start a projection.
+        behind: At %{current}/mo you'll fall short. Bump to <strong class="text-primary">%{required}/mo</strong> to hit it on time.
+        on_track: At your current pace, you'll reach this goal around <strong class="text-primary">%{date}</strong>.
+      back_to_all: All goals
       source:
         initial: Initial
         manual: Manual
       stats:
         avg_monthly: Avg monthly
         total_contributions: Total contributions
+        linked_balance: Linked balance
         across_all_accounts: Across all accounts
         target_date: Target date
         no_target_date: No target date
@@ -80,6 +94,9 @@ en:
         started: Started
         needs_per_month: "Needs %{amount}/mo"
         above_target_pace: Above target pace
+        n_accounts:
+          one: 1 account
+          other: "%{count} accounts"
         months_ago:
           one: 1 month ago
           other: "%{count} months ago"
@@ -90,11 +107,12 @@ en:
       archived: Archived
     status:
       on_track: On track
-      behind: Behind
+      behind: Behind pace
       reached: Reached
       no_target_date: No date
     empty_state:
-      heading: No savings goals yet
+      heading: No goals yet
+      body: Set a target, link the accounts you save into, and watch your progress add up. Goals can pull from multiple accounts.
       subtitle: Set a target and start saving toward it.
       new_goal: Create your first goal
       no_depository_accounts: You need at least one Depository account (checking, savings, HSA, CD, money-market) before creating a goal.
@@ -112,26 +130,37 @@ en:
         one: 1 day left · by %{date}
         other: "%{count} days left · by %{date}"
     form_stepper:
+      cancel: Cancel
       continue: Continue
       back: Back
       submit: Create goal
       step1:
-        heading: Identity
+        label: Goal details
+        heading: What are you saving for?
+        subheading: Give your goal a name and a target. You can change these later.
         fields:
           name: Name
+          name_placeholder: Emergency fund, House down payment…
           target_amount: Target amount
-          target_date: Target date (optional)
+          target_date: Target date
           color: Color
           notes: Notes (optional)
+          funding_accounts: Funding accounts
+        subtypes:
+          checking: Checking
+          savings: Savings
+          hsa: HSA
+          cd: CD
+          money_market: Money market
+          other: Other
       step2:
-        heading: Review
-        linked_accounts_heading: Linked accounts
-        linked_accounts_hint: Pick at least one Depository account that funds this goal.
-        add_initial_contribution: Add an initial contribution (optional)
+        label: Review & start
+        heading: Looks good?
+        subheading: Review your goal and add an optional starting contribution.
+        funding_accounts: Funding accounts
+        suggested_monthly: Suggested monthly
+        add_initial_contribution: Add an initial contribution
+        add_initial_contribution_sub: Optional · jumpstart this goal with funds you've already set aside.
         initial_amount: Amount
         initial_account: From account
         select_account: Select an account
-        review_heading: Review
-        review_target: Target
-        review_date: Date
-        review_accounts: Accounts