diff --git a/frontend/src/components/PropertyDetail/PropertyDetail.tsx b/frontend/src/components/PropertyDetail/PropertyDetail.tsx
index 33369f4..d7a4b98 100644
--- a/frontend/src/components/PropertyDetail/PropertyDetail.tsx
+++ b/frontend/src/components/PropertyDetail/PropertyDetail.tsx
@@ -277,6 +277,7 @@ export function PropertyDetail({
             <div className="text-center py-12 text-ink-3">Loading assumptions…</div>
           ) : assumptions ? (
             <RevenueExpensesTab
+              propertyId={property.id}
               assumptions={assumptions}
               onUpdate={onUpdateAssumptions}
               ltrAssumptions={ltrAssumptions}
diff --git a/frontend/src/components/PropertyDetail/RevenueExpensesTab.tsx b/frontend/src/components/PropertyDetail/RevenueExpensesTab.tsx
index 1a913d1..a5a9fcd 100644
--- a/frontend/src/components/PropertyDetail/RevenueExpensesTab.tsx
+++ b/frontend/src/components/PropertyDetail/RevenueExpensesTab.tsx
@@ -1,143 +1,169 @@
-import { useState, useCallback, useEffect } from "react";
-import type { STRAssumptions, LTRAssumptions, MonthlyProfileEntry } from "../../types/index.ts";
+import { useCallback, useEffect, useState } from "react";
+import type {
+  STRAssumptions,
+  LTRAssumptions,
+  MonthlyProfileEntry,
+} from "../../types/index.ts";
+import {
+  getProfileTemplates,
+  getResults,
+  getLTRResults,
+} from "../../api/client.ts";
+import { FormSection } from "../shared/FormSection.tsx";
+import { Field } from "../shared/Field.tsx";
+import { SliderField } from "../shared/SliderField.tsx";
+import { Toggle } from "../shared/Toggle.tsx";
+import { Segmented } from "../shared/Segmented.tsx";
 import { CurrencyInput } from "../shared/CurrencyInput.tsx";
 import { PercentInput } from "../shared/PercentInput.tsx";
-import { TooltipIcon } from "../shared/TooltipIcon.tsx";
-import { getProfileTemplates } from "../../api/client.ts";
+import { SeasonalBars } from "../shared/SeasonalBars.tsx";
+
+function derivePeakMask(peakMonths: number): boolean[] {
+  const mask = Array<boolean>(12).fill(false);
+  if (peakMonths <= 0) return mask;
+  if (peakMonths >= 12) return mask.map(() => true);
+  const start = Math.max(0, Math.min(12 - peakMonths, 7 - Math.floor(peakMonths / 2)));
+  for (let i = start; i < start + peakMonths; i++) mask[i] = true;
+  return mask;
+}
 
 interface RevenueExpensesTabProps {
+  propertyId: string;
   assumptions: STRAssumptions;
   onUpdate: (updates: Partial<STRAssumptions>) => Promise<STRAssumptions>;
   ltrAssumptions: LTRAssumptions | null;
   onUpdateLTR: (updates: Partial<LTRAssumptions>) => Promise<LTRAssumptions>;
-  activeRentalType: 'str' | 'ltr';
-  onChangeRentalType: (type: 'str' | 'ltr') => void;
+  activeRentalType: "str" | "ltr";
+  onChangeRentalType: (type: "str" | "ltr") => void;
 }
 
-const TOOLTIPS = {
-  avg_nightly_rate:
-    "Your expected average nightly rate across all seasons. Research comparable STR listings in the area on Airbnb/VRBO. Look at similar bed count, amenities, and location.",
-  occupancy_pct:
-    "Percentage of nights booked per year. 65% is a solid benchmark for established STR markets. New listings typically start at 40-50% and ramp up over 6-12 months. Top performers hit 75-85%.",
-  cleaning_fee_per_stay:
-    "Fee charged to the guest per booking. US averages by bedroom count: 1BR ~$100, 2BR ~$155, 3BR ~$175, 4BR+ ~$200-$300+. Set competitively relative to your market.",
-  avg_stay_length_nights:
-    "Average number of nights per booking. Urban STRs average 2-3 nights. Vacation/resort areas: 4-7 nights. Longer stays = fewer turnovers = lower cleaning costs.",
-  platform_fee_pct:
-    "Airbnb's split-fee model charges hosts 3% per booking. VRBO charges 5-8%. If using Airbnb's host-only model (required if using channel managers), the fee is 14-15%.",
-  cleaning_cost_per_turn:
-    "What you pay your cleaner each turnover. Typical ranges: 1BR $50-$90, 2BR $70-$130, 3BR $100-$150, 4BR+ $150-$300. Rule of thumb: $50/bathroom + $35/bedroom.",
-  property_mgmt_pct:
-    "Fee paid to a property manager as a % of net revenue. 0% if self-managing. Full-service management typically charges 20-25%. Co-hosting or partial management: 10-15%.",
-  utilities_monthly:
-    "Total monthly utilities: electric, gas, water, sewer, internet, trash, streaming services. STRs run higher utility costs than typical homes. Budget $150-$250 for a 1-2BR, $250-$400 for a 3-4BR.",
-  insurance_annual:
-    "Total annual STR insurance policy cost. Standard homeowner's insurance does NOT cover STR use. You need a specialized STR policy. Typical range: $1,500-$3,000/yr.",
-  maintenance_reserve_pct:
-    "Percentage of gross revenue set aside for routine maintenance (plumbing, HVAC repairs, appliance fixes). Industry standard is 5%. Alternative: 1% of property value per year.",
-  capex_reserve_pct:
-    "Percentage of gross revenue reserved for major capital expenditures (roof, HVAC system, water heater, appliances). 5% is standard. Some investors use 10% total (combined maintenance + capex).",
-  supplies_monthly:
-    "Consumables replaced regularly: toiletries, paper products, coffee, cleaning supplies, light bulbs, batteries, small linens. Budget $50-$100 for a 1-2BR, $100-$200 for a 3-4BR.",
-  lawn_snow_monthly:
-    "Landscaping, mowing, leaf cleanup, snow removal. Highly seasonal in Vermont. Enter a monthly average across the year, e.g., $100-$150. Set to $0 for condos.",
-  other_monthly_expense:
-    "Catch-all for anything not covered above: pest control, pool/hot tub maintenance, security monitoring, etc.",
-  marketing_monthly:
-    "Photography, listing optimization, social media, direct booking website. Initial setup $200-$500, ongoing $50-$200/mo. Set to $0 if relying solely on platform traffic.",
-  software_monthly:
-    "PMS (Hospitable, Guesty), dynamic pricing (PriceLabs, Beyond), channel manager, smart lock software. Typical total: $30-$80/mo.",
-  accounting_annual:
-    "Tax preparation, bookkeeping, financial reporting. STR taxes are more complex than W-2. Typical range: $1,000-$3,000/yr for a CPA familiar with rental properties.",
-  legal_annual:
-    "Legal counsel, compliance reviews, lease/contract templates, permit applications. Typical: $500-$1,500/yr. Higher in heavily regulated markets.",
-  state_rooms_tax_pct:
-    "Vermont Meals & Rooms Tax applied to all STR bookings of < 30 nights. Collected from the guest. If you use Airbnb or VRBO, the platform collects and remits this for you automatically.",
-  str_surcharge_pct:
-    "Additional surcharge on STR rents enacted by Act 183 of 2024. Collected from the guest on top of the 9% rooms tax. Also remitted by major platforms.",
-  local_option_tax_pct:
-    "Additional municipal tax adopted by some Vermont towns. Currently 1% where adopted (Burlington, Stowe, Killington, and others). Set to 0% if your town hasn't adopted it.",
-  local_str_registration_fee:
-    "Annual municipal registration fee. Not all towns require it. Examples: Stowe $100/unit/yr, Dover $125/yr. Check your specific town's requirements.",
-  platform_remits_tax:
-    "If Yes (Airbnb, VRBO), the platform collects all VT rooms/meals taxes from guests and remits to the state on your behalf. These taxes are pass-through, not your expense.",
-  rental_delay_months:
-    "Months between property acquisition and first guest booking. Covers renovation, furnishing, permits, and listing setup. During this period you pay all carrying costs with zero revenue. Default: 1 month.",
-  local_gross_receipts_tax_pct:
-    "Burlington, VT levies a 9% gross receipts tax on STR revenue. Unlike rooms tax, this is an operator expense that directly reduces your cashflow. Set to 0% outside Burlington.",
-  damage_reserve_pct:
-    "Percentage of gross revenue set aside for guest damage repairs (broken furniture, stains, wall holes). 2% is typical. Airbnb's Host Guarantee covers some damage but not everything.",
-  land_value_pct:
-    "Percentage of the purchase price attributable to land (non-depreciable). Typical range: 15-30%. Check your county tax assessment for the land/building split. Used for depreciation calculations.",
-  property_appreciation_pct_annual:
-    "Expected annual property value appreciation. US historical average is ~3-4%. Conservative: 2%. Set to 0% to exclude appreciation from ROI calculations.",
-  use_seasonal_occupancy:
-    "Enable peak/off-peak occupancy modeling. When on, occupancy varies by season. A weighted effective occupancy is computed for all annual metrics.",
-  peak_months:
-    "Number of peak-season months per year. For Vermont: June-November (summer + foliage) = 6 months. Adjust based on your market's high season.",
-  peak_occupancy_pct:
-    "Expected occupancy during peak months. Top STR markets see 75-90% during peak season.",
-  off_peak_occupancy_pct:
-    "Expected occupancy during off-peak months. Winter/shoulder months in non-ski markets typically see 30-50%.",
-  marginal_tax_rate_pct:
-    "Your combined marginal income tax rate (federal + state). Used to estimate after-tax cashflow. Common ranges: 22-37% federal + 0-13% state. Set to 0 to hide tax analysis.",
-  revenue_growth_pct:
-    "Expected annual revenue growth rate for multi-year projections. Accounts for nightly rate increases, market growth, and improved occupancy over time. US STR average: 3-5%.",
-  expense_growth_pct:
-    "Expected annual expense growth rate for multi-year projections. Covers inflation on operating costs (cleaning, utilities, supplies, maintenance). General inflation: 2-4%.",
-  hold_period_years:
-    "Number of years you plan to hold the property before selling. Used for exit analysis and IRR with exit modeling. Typical hold periods: 5-10 years.",
-  selling_cost_pct:
-    "Total selling costs as a percentage of sale price. Includes broker commissions (5-6%), transfer taxes, and closing costs. Typical total: 7-10%.",
-  capital_gains_rate_pct:
-    "Combined federal and state capital gains tax rate on the profit from selling the property. Federal long-term rate: 15-20%. Add state tax if applicable.",
-  depreciation_recapture_rate_pct:
-    "Tax rate on accumulated depreciation when selling. Federal depreciation recapture is taxed at 25%. This applies to the total depreciation claimed during the hold period.",
-};
+interface PreviewValues {
+  revenue: number;
+  expenses: number;
+  cashflow: number;
+}
 
 const SHARED_KEYS = [
-  'insurance_annual', 'maintenance_reserve_pct', 'capex_reserve_pct',
-  'lawn_snow_monthly', 'other_monthly_expense', 'accounting_annual',
-  'legal_annual', 'land_value_pct', 'property_appreciation_pct_annual',
-  'revenue_growth_pct', 'expense_growth_pct', 'marginal_tax_rate_pct',
-  'hold_period_years', 'selling_cost_pct', 'capital_gains_rate_pct',
-  'depreciation_recapture_rate_pct',
+  "insurance_annual",
+  "maintenance_reserve_pct",
+  "capex_reserve_pct",
+  "lawn_snow_monthly",
+  "other_monthly_expense",
+  "accounting_annual",
+  "legal_annual",
+  "land_value_pct",
+  "property_appreciation_pct_annual",
+  "revenue_growth_pct",
+  "expense_growth_pct",
+  "marginal_tax_rate_pct",
+  "hold_period_years",
+  "selling_cost_pct",
+  "capital_gains_rate_pct",
+  "depreciation_recapture_rate_pct",
+] as const;
+
+const RENTAL_OPTIONS = [
+  { value: "str", label: "STR" },
+  { value: "ltr", label: "LTR" },
 ] as const;
 
-export function RevenueExpensesTab({ assumptions, onUpdate, ltrAssumptions, onUpdateLTR, activeRentalType, onChangeRentalType }: RevenueExpensesTabProps) {
+const MONTH_NAMES = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
+
+function formatCurrency(value: number): string {
+  const rounded = Math.round(value);
+  const abs = Math.abs(rounded);
+  return `${rounded < 0 ? "-" : ""}$${abs.toLocaleString("en-US")}`;
+}
+
+export function RevenueExpensesTab({
+  propertyId,
+  assumptions,
+  onUpdate,
+  ltrAssumptions,
+  onUpdateLTR,
+  activeRentalType,
+  onChangeRentalType,
+}: RevenueExpensesTabProps) {
   const [form, setForm] = useState<STRAssumptions>({ ...assumptions });
-  const [ltrForm, setLtrForm] = useState<LTRAssumptions | null>(ltrAssumptions ? { ...ltrAssumptions } : null);
+  const [ltrForm, setLtrForm] = useState<LTRAssumptions | null>(
+    ltrAssumptions ? { ...ltrAssumptions } : null
+  );
   const [saving, setSaving] = useState(false);
   const [saved, setSaved] = useState(false);
+  const [preview, setPreview] = useState<PreviewValues | null>(null);
 
-  const updateField = useCallback(<K extends keyof STRAssumptions>(key: K, value: STRAssumptions[K]) => {
-    setForm((prev) => ({ ...prev, [key]: value }));
-    setSaved(false);
-  }, []);
+  const updateField = useCallback(
+    <K extends keyof STRAssumptions>(key: K, value: STRAssumptions[K]) => {
+      setForm((prev) => ({ ...prev, [key]: value }));
+      setSaved(false);
+    },
+    []
+  );
 
-  const updateLTRField = useCallback(<K extends keyof LTRAssumptions>(key: K, value: LTRAssumptions[K]) => {
-    setLtrForm((prev) => prev ? ({ ...prev, [key]: value }) : prev);
-    setSaved(false);
-  }, []);
+  const updateLTRField = useCallback(
+    <K extends keyof LTRAssumptions>(key: K, value: LTRAssumptions[K]) => {
+      setLtrForm((prev) => (prev ? { ...prev, [key]: value } : prev));
+      setSaved(false);
+    },
+    []
+  );
 
-  // Update a shared field in both form states
-  const updateSharedField = useCallback(<K extends typeof SHARED_KEYS[number]>(key: K, value: number) => {
-    setForm((prev) => ({ ...prev, [key]: value }));
-    setLtrForm((prev) => prev ? ({ ...prev, [key]: value }) : prev);
-    setSaved(false);
-  }, []);
+  const updateSharedField = useCallback(
+    <K extends (typeof SHARED_KEYS)[number]>(key: K, value: number) => {
+      setForm((prev) => ({ ...prev, [key]: value }));
+      setLtrForm((prev) => (prev ? { ...prev, [key]: value } : prev));
+      setSaved(false);
+    },
+    []
+  );
+
+  const loadPreview = useCallback(async () => {
+    try {
+      if (activeRentalType === "ltr") {
+        const res = await getLTRResults(propertyId);
+        setPreview({
+          revenue: res.revenue.effective_annual / 12,
+          expenses: res.expenses.total_annual_operating / 12,
+          cashflow: res.metrics.monthly_cashflow,
+        });
+      } else {
+        const res = await getResults(propertyId);
+        setPreview({
+          revenue: res.revenue.net_annual / 12,
+          expenses: res.expenses.total_annual_operating / 12,
+          cashflow: res.metrics.monthly_cashflow,
+        });
+      }
+    } catch {
+      setPreview(null);
+    }
+  }, [propertyId, activeRentalType]);
+
+  useEffect(() => {
+    void loadPreview();
+  }, [loadPreview]);
 
   const handleSave = useCallback(async () => {
     try {
       setSaving(true);
-      // Build shared field values from the STR form (source of truth for shared fields)
       const sharedValues: Record<string, number> = {};
       for (const key of SHARED_KEYS) {
         sharedValues[key] = form[key] as number;
       }
-
-      // Save active type first (triggers cache recompute), then sync shared fields to the other
-      if (activeRentalType === 'ltr' && ltrForm) {
+      if (activeRentalType === "ltr" && ltrForm) {
         await onUpdateLTR({ ...ltrForm, ...sharedValues });
         await onUpdate(sharedValues as Partial<STRAssumptions>);
       } else {
@@ -148,417 +174,797 @@ export function RevenueExpensesTab({ assumptions, onUpdate, ltrAssumptions, onUp
       }
       setSaved(true);
       setTimeout(() => setSaved(false), 2000);
-    } catch {
-      // error handled by parent
+      void loadPreview();
     } finally {
       setSaving(false);
     }
-  }, [form, ltrForm, onUpdate, onUpdateLTR, activeRentalType]);
+  }, [form, ltrForm, onUpdate, onUpdateLTR, activeRentalType, loadPreview]);
 
   return (
-    <div className="space-y-8">
-      {/* Rental Type Toggle */}
-      <div className="flex items-center gap-2">
-        <span className="text-sm font-medium text-slate-700 dark:text-slate-300 mr-2">Rental Type:</span>
-        <button
-          onClick={() => onChangeRentalType('str')}
-          className={`px-4 py-1.5 text-sm font-medium rounded-lg transition-colors ${
-            activeRentalType === 'str'
-              ? 'bg-sky-100 text-sky-700 shadow-sm'
-              : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700'
-          }`}
-        >
-          STR
-        </button>
-        <button
-          onClick={() => onChangeRentalType('ltr')}
-          className={`px-4 py-1.5 text-sm font-medium rounded-lg transition-colors ${
-            activeRentalType === 'ltr'
-              ? 'bg-violet-100 text-violet-700 shadow-sm'
-              : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700'
-          }`}
-        >
-          LTR
-        </button>
-      </div>
+    <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_340px] gap-10">
+      {/* Main column */}
+      <div className="min-w-0 space-y-10">
+        <div className="flex items-center gap-3">
+          <span className="caps text-ink-3">Rental type</span>
+          <Segmented
+            options={[...RENTAL_OPTIONS]}
+            value={activeRentalType}
+            onChange={(v) => onChangeRentalType(v as "str" | "ltr")}
+          />
+        </div>
 
-      {activeRentalType === 'ltr' && ltrForm ? (
-        <LTRForm ltrForm={ltrForm} updateLTRField={updateLTRField} />
-      ) : (
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-        {/* Left column: Revenue */}
-        <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-sm dark:shadow-slate-900/20 p-6 space-y-6">
-          <h3 className="text-base font-semibold text-slate-900 dark:text-slate-100">Revenue</h3>
-          <CurrencyInput
-            label="Avg Nightly Rate"
-            value={form.avg_nightly_rate}
-            onChange={(v) => updateField("avg_nightly_rate", v)}
-            tooltip={TOOLTIPS.avg_nightly_rate}
+        {activeRentalType === "str" ? (
+          <STRSections
+            form={form}
+            updateField={updateField}
+            updateSharedField={updateSharedField}
           />
-          {/* Occupancy: flat or monthly profile */}
-          <div>
-            <div className="flex items-center mb-3">
-              <input
-                type="checkbox"
-                checked={form.monthly_revenue_profile !== null}
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    const defaultProfile: MonthlyProfileEntry[] = Array.from({ length: 12 }, (_, i) => ({
-                      month: i + 1,
-                      nightly_rate: form.avg_nightly_rate,
-                      occupancy_pct: form.occupancy_pct,
-                    }));
-                    updateField("monthly_revenue_profile", defaultProfile);
-                    updateField("profile_template_name", "Custom");
-                  } else {
-                    updateField("monthly_revenue_profile", null);
-                    updateField("profile_template_name", null);
-                  }
-                }}
-                className="h-4 w-4 text-indigo-600 rounded border-slate-300 dark:border-slate-600"
-              />
-              <span className="ml-2 text-sm font-medium text-slate-700 dark:text-slate-300">
-                Use Monthly Revenue Profile
-                <TooltipIcon text="Enable per-month rate and occupancy modeling. When on, each month has its own nightly rate and occupancy percentage for accurate seasonal revenue projections." />
-              </span>
-            </div>
-            {form.monthly_revenue_profile !== null ? (
-              <MonthlyProfileEditor
-                profile={form.monthly_revenue_profile}
-                templateName={form.profile_template_name}
-                onProfileChange={(profile) => updateField("monthly_revenue_profile", profile)}
-                onTemplateChange={(name) => updateField("profile_template_name", name)}
-              />
-            ) : (
-              <PercentInput
-                label="Occupancy %"
-                value={form.occupancy_pct}
-                onChange={(v) => updateField("occupancy_pct", v)}
-                tooltip={TOOLTIPS.occupancy_pct}
-              />
-            )}
-          </div>
-          <CurrencyInput
-            label="Cleaning Fee per Stay"
-            value={form.cleaning_fee_per_stay}
-            onChange={(v) => updateField("cleaning_fee_per_stay", v)}
-            tooltip={TOOLTIPS.cleaning_fee_per_stay}
+        ) : ltrForm ? (
+          <LTRSections
+            form={ltrForm}
+            updateLTRField={updateLTRField}
+            strForm={form}
+            updateSharedField={updateSharedField}
           />
-          <div>
-            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-              Avg Stay Length (nights)
-              <TooltipIcon text={TOOLTIPS.avg_stay_length_nights} />
-            </label>
-            <input
-              type="number"
-              step="0.5"
-              value={form.avg_stay_length_nights || ""}
-              onChange={(e) => updateField("avg_stay_length_nights", parseFloat(e.target.value) || 0)}
-              className="w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-700 dark:text-slate-100"
-            />
+        ) : (
+          <div className="text-[14px] text-ink-3 py-6">
+            LTR assumptions unavailable. Save STR assumptions first to
+            initialize.
           </div>
-          <div>
-            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-              Rental Delay (months)
-              <TooltipIcon text={TOOLTIPS.rental_delay_months} />
-            </label>
-            <input
-              type="number"
-              min="0"
-              max="12"
-              step="1"
-              value={form.rental_delay_months ?? 1}
-              onChange={(e) => updateField("rental_delay_months", parseInt(e.target.value) || 0)}
-              className="w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-700 dark:text-slate-100"
-            />
-          </div>
-        </div>
+        )}
 
-        {/* Right column: Expenses */}
-        <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-sm dark:shadow-slate-900/20 p-6 space-y-6">
-          <h3 className="text-base font-semibold text-slate-900 dark:text-slate-100">Expenses</h3>
+        {/* Save */}
+        <div className="flex items-center gap-4 pt-4 border-t border-rule">
+          <button
+            type="button"
+            onClick={() => void handleSave()}
+            disabled={saving}
+            className="caps px-5 py-2 bg-ink text-canvas rounded hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+          >
+            {saving ? "Saving…" : "Save changes"}
+          </button>
+          {saved && <span className="caps text-accent">Saved</span>}
+        </div>
+      </div>
 
-          {/* Platform & Management */}
-          <div>
-            <h4 className="text-xs uppercase tracking-wider text-slate-400 dark:text-slate-500 font-medium mb-3">Platform & Management</h4>
+      {/* Sticky preview aside */}
+      <aside className="lg:sticky lg:top-4 lg:self-start space-y-6">
+        <div className="border border-rule-strong rounded p-5">
+          <h4 className="caps mb-4">Live preview</h4>
+          {preview ? (
             <div className="space-y-4">
-              <PercentInput
-                label="Platform Fee %"
-                value={form.platform_fee_pct}
-                onChange={(v) => updateField("platform_fee_pct", v)}
-                tooltip={TOOLTIPS.platform_fee_pct}
-              />
-              <PercentInput
-                label="Property Mgmt %"
-                value={form.property_mgmt_pct}
-                onChange={(v) => updateField("property_mgmt_pct", v)}
-                tooltip={TOOLTIPS.property_mgmt_pct}
+              <PreviewRow label="Monthly revenue" value={preview.revenue} />
+              <PreviewRow
+                label="Monthly expenses"
+                value={-Math.abs(preview.expenses)}
               />
+              <div className="pt-3 border-t border-rule">
+                <PreviewRow
+                  label="Monthly cashflow"
+                  value={preview.cashflow}
+                  emphasis
+                  tone={
+                    preview.cashflow >= 0 ? "positive" : "negative"
+                  }
+                />
+              </div>
             </div>
-          </div>
+          ) : (
+            <p className="text-[13px] text-ink-3 leading-snug">
+              Preview unavailable. Make sure you have an active scenario and
+              saved assumptions.
+            </p>
+          )}
+          <p className="text-[11px] text-ink-3 mt-4 leading-snug">
+            Reflects the last saved assumptions for the active scenario.
+            Re-runs on save.
+          </p>
+        </div>
+      </aside>
+    </div>
+  );
+}
 
-          {/* Turnover Costs */}
-          <div>
-            <h4 className="text-xs uppercase tracking-wider text-slate-400 dark:text-slate-500 font-medium mb-3">Turnover Costs</h4>
-            <CurrencyInput
-              label="Cleaning Cost per Turnover"
-              value={form.cleaning_cost_per_turn}
-              onChange={(v) => updateField("cleaning_cost_per_turn", v)}
-              tooltip={TOOLTIPS.cleaning_cost_per_turn}
-            />
-          </div>
+function PreviewRow({
+  label,
+  value,
+  emphasis = false,
+  tone,
+}: {
+  label: string;
+  value: number;
+  emphasis?: boolean;
+  tone?: "positive" | "negative";
+}) {
+  const toneClass =
+    tone === "positive"
+      ? "text-accent"
+      : tone === "negative"
+      ? "text-negative"
+      : "text-ink";
+  return (
+    <div className="flex items-baseline justify-between gap-3">
+      <span className="caps text-ink-3">{label}</span>
+      <span
+        className={`font-mono tabular-nums ${
+          emphasis ? "text-[22px]" : "text-[16px]"
+        } ${toneClass}`}
+      >
+        {formatCurrency(value)}
+      </span>
+    </div>
+  );
+}
 
-          {/* Monthly Fixed */}
-          <div>
-            <h4 className="text-xs uppercase tracking-wider text-slate-400 dark:text-slate-500 font-medium mb-3">Monthly Fixed</h4>
-            <div className="space-y-4">
-              <CurrencyInput
-                label="Utilities (Monthly)"
-                value={form.utilities_monthly}
-                onChange={(v) => updateField("utilities_monthly", v)}
-                tooltip={TOOLTIPS.utilities_monthly}
-              />
-              <CurrencyInput
-                label="Supplies (Monthly)"
-                value={form.supplies_monthly}
-                onChange={(v) => updateField("supplies_monthly", v)}
-                tooltip={TOOLTIPS.supplies_monthly}
-              />
-              <CurrencyInput
-                label="Marketing (Monthly)"
-                value={form.marketing_monthly}
-                onChange={(v) => updateField("marketing_monthly", v)}
-                tooltip={TOOLTIPS.marketing_monthly}
-              />
-              <CurrencyInput
-                label="Software / PMS (Monthly)"
-                value={form.software_monthly}
-                onChange={(v) => updateField("software_monthly", v)}
-                tooltip={TOOLTIPS.software_monthly}
-              />
-            </div>
-          </div>
+// --- STR sections ---------------------------------------------------------
 
-          {/* Reserves (STR-specific) */}
-          <div>
-            <h4 className="text-xs uppercase tracking-wider text-slate-400 dark:text-slate-500 font-medium mb-3">Reserves</h4>
-            <div className="space-y-4">
-              <PercentInput
-                label="Damage Reserve %"
-                value={form.damage_reserve_pct}
-                onChange={(v) => updateField("damage_reserve_pct", v)}
-                tooltip={TOOLTIPS.damage_reserve_pct}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      )}
-
-      {/* Shared Assumptions (always visible) */}
-      <section className="bg-white dark:bg-slate-800 rounded-2xl shadow-sm dark:shadow-slate-900/20 p-6">
-        <h3 className="text-base font-semibold text-slate-900 dark:text-slate-100 mb-4">Shared Assumptions</h3>
-        <p className="text-xs text-slate-400 dark:text-slate-500 mb-4">These values apply to both STR and LTR calculations and are kept in sync.</p>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4">
-          {/* Reserves */}
-          <div className="space-y-4">
-            <h4 className="text-xs uppercase tracking-wider text-slate-400 dark:text-slate-500 font-medium">Reserves</h4>
-            <PercentInput
-              label="Maintenance Reserve %"
-              value={form.maintenance_reserve_pct}
-              onChange={(v) => updateSharedField("maintenance_reserve_pct", v)}
-              tooltip={TOOLTIPS.maintenance_reserve_pct}
-            />
-            <PercentInput
-              label="CapEx Reserve %"
-              value={form.capex_reserve_pct}
-              onChange={(v) => updateSharedField("capex_reserve_pct", v)}
-              tooltip={TOOLTIPS.capex_reserve_pct}
-            />
-          </div>
+function STRSections({
+  form,
+  updateField,
+  updateSharedField,
+}: {
+  form: STRAssumptions;
+  updateField: <K extends keyof STRAssumptions>(
+    key: K,
+    value: STRAssumptions[K]
+  ) => void;
+  updateSharedField: <K extends (typeof SHARED_KEYS)[number]>(
+    key: K,
+    value: number
+  ) => void;
+}) {
+  const peakMask = derivePeakMask(form.peak_months);
+  const occValues = Array.from({ length: 12 }, (_, i) =>
+    peakMask[i] ? form.peak_occupancy_pct : form.off_peak_occupancy_pct
+  );
+  const weightedOcc =
+    (form.peak_months * form.peak_occupancy_pct +
+      (12 - form.peak_months) * form.off_peak_occupancy_pct) /
+    12;
 
-          {/* Fixed Costs */}
-          <div className="space-y-4">
-            <h4 className="text-xs uppercase tracking-wider text-slate-400 dark:text-slate-500 font-medium">Fixed Costs</h4>
-            <CurrencyInput
-              label="Insurance (Annual)"
-              value={form.insurance_annual}
-              onChange={(v) => updateSharedField("insurance_annual", v)}
-              tooltip={TOOLTIPS.insurance_annual}
-            />
-            <CurrencyInput
-              label="Lawn & Snow (Monthly)"
-              value={form.lawn_snow_monthly}
-              onChange={(v) => updateSharedField("lawn_snow_monthly", v)}
-              tooltip={TOOLTIPS.lawn_snow_monthly}
-            />
-            <CurrencyInput
-              label="Other Monthly Expense"
-              value={form.other_monthly_expense}
-              onChange={(v) => updateSharedField("other_monthly_expense", v)}
-              tooltip={TOOLTIPS.other_monthly_expense}
-            />
-            <CurrencyInput
-              label="Accounting (Annual)"
-              value={form.accounting_annual}
-              onChange={(v) => updateSharedField("accounting_annual", v)}
-              tooltip={TOOLTIPS.accounting_annual}
-            />
-            <CurrencyInput
-              label="Legal (Annual)"
-              value={form.legal_annual}
-              onChange={(v) => updateSharedField("legal_annual", v)}
-              tooltip={TOOLTIPS.legal_annual}
-            />
-          </div>
+  const useSeasonal = form.use_seasonal_occupancy;
+  const useMonthlyProfile = form.monthly_revenue_profile !== null;
 
-          {/* Growth & Tax */}
-          <div className="space-y-4">
-            <h4 className="text-xs uppercase tracking-wider text-slate-400 dark:text-slate-500 font-medium">Growth & Tax</h4>
-            <PercentInput
-              label="Annual Appreciation %"
-              value={form.property_appreciation_pct_annual}
-              onChange={(v) => updateSharedField("property_appreciation_pct_annual", v)}
-              tooltip={TOOLTIPS.property_appreciation_pct_annual}
-            />
-            <PercentInput
-              label="Revenue Growth % / yr"
-              value={form.revenue_growth_pct}
-              onChange={(v) => updateSharedField("revenue_growth_pct", v)}
-              tooltip={TOOLTIPS.revenue_growth_pct}
-            />
-            <PercentInput
-              label="Expense Growth % / yr"
-              value={form.expense_growth_pct}
-              onChange={(v) => updateSharedField("expense_growth_pct", v)}
-              tooltip={TOOLTIPS.expense_growth_pct}
-            />
-            <PercentInput
-              label="Land Value %"
-              value={form.land_value_pct}
-              onChange={(v) => updateSharedField("land_value_pct", v)}
-              tooltip={TOOLTIPS.land_value_pct}
-            />
-            <PercentInput
-              label="Marginal Tax Rate %"
-              value={form.marginal_tax_rate_pct}
-              onChange={(v) => updateSharedField("marginal_tax_rate_pct", v)}
-              tooltip={TOOLTIPS.marginal_tax_rate_pct}
-            />
-          </div>
+  return (
+    <>
+      <FormSection
+        title="Revenue"
+        subtitle="Nightly pricing and guest-side fees."
+      >
+        <CurrencyInput
+          label="Avg Nightly Rate"
+          value={form.avg_nightly_rate}
+          onChange={(v) => updateField("avg_nightly_rate", v)}
+        />
+        <CurrencyInput
+          label="Cleaning Fee per Stay"
+          value={form.cleaning_fee_per_stay}
+          onChange={(v) => updateField("cleaning_fee_per_stay", v)}
+        />
+        <Field
+          label="Avg Stay Length (nights)"
+          type="number"
+          step="0.5"
+          value={form.avg_stay_length_nights || ""}
+          onChange={(e) =>
+            updateField(
+              "avg_stay_length_nights",
+              parseFloat(e.target.value) || 0
+            )
+          }
+        />
+        <Field
+          label="Rental Delay (months)"
+          type="number"
+          min={0}
+          max={12}
+          step={1}
+          value={form.rental_delay_months ?? 1}
+          onChange={(e) =>
+            updateField("rental_delay_months", parseInt(e.target.value) || 0)
+          }
+        />
+        <PercentInput
+          label="Platform Fee %"
+          value={form.platform_fee_pct}
+          onChange={(v) => updateField("platform_fee_pct", v)}
+        />
+        <PercentInput
+          label="Property Mgmt %"
+          value={form.property_mgmt_pct}
+          onChange={(v) => updateField("property_mgmt_pct", v)}
+        />
+      </FormSection>
 
-          {/* Exit & IRR */}
-          <div className="space-y-4">
-            <h4 className="text-xs uppercase tracking-wider text-slate-400 dark:text-slate-500 font-medium">Exit & IRR</h4>
+      {/* Occupancy panel */}
+      <section className="grid grid-cols-1 md:grid-cols-[200px_minmax(0,1fr)] gap-8">
+        <div>
+          <h3 className="font-serif text-[22px] leading-none mb-2">
+            Occupancy
+          </h3>
+          <p className="text-ink-3 text-[13px] leading-snug">
+            Pick a flat rate, a peak / off-peak split, or month-level
+            overrides.
+          </p>
+        </div>
+        <div className="space-y-6">
+          <div className="flex items-center justify-between gap-3">
             <div>
-              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-                Hold Period (years)
-                <TooltipIcon text={TOOLTIPS.hold_period_years} />
-              </label>
-              <input
-                type="number"
-                min={1}
-                max={30}
-                step={1}
-                value={form.hold_period_years || ""}
-                onChange={(e) => updateSharedField("hold_period_years", parseInt(e.target.value) || 5)}
-                className="w-full pl-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 dark:text-slate-100"
-              />
+              <label className="field-label">Use seasonal occupancy</label>
+              <p className="text-[12px] text-ink-3 mt-1 leading-snug">
+                Blend peak + off-peak occupancy through the year.
+              </p>
             </div>
-            <PercentInput
-              label="Selling Costs %"
-              value={form.selling_cost_pct}
-              onChange={(v) => updateSharedField("selling_cost_pct", v)}
-              tooltip={TOOLTIPS.selling_cost_pct}
-            />
-            <PercentInput
-              label="Capital Gains Rate %"
-              value={form.capital_gains_rate_pct}
-              onChange={(v) => updateSharedField("capital_gains_rate_pct", v)}
-              tooltip={TOOLTIPS.capital_gains_rate_pct}
-            />
-            <PercentInput
-              label="Depreciation Recapture Rate %"
-              value={form.depreciation_recapture_rate_pct}
-              onChange={(v) => updateSharedField("depreciation_recapture_rate_pct", v)}
-              tooltip={TOOLTIPS.depreciation_recapture_rate_pct}
+            <Toggle
+              value={useSeasonal}
+              onChange={(v) => updateField("use_seasonal_occupancy", v)}
+              label="Use seasonal occupancy"
             />
           </div>
+
+          {!useSeasonal ? (
+            <SliderField
+              label="Annual Occupancy"
+              value={form.occupancy_pct}
+              min={0}
+              max={100}
+              step={1}
+              suffix="%"
+              onChange={(v) => updateField("occupancy_pct", v)}
+            />
+          ) : (
+            <>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-5">
+                <SliderField
+                  label="Peak Months"
+                  value={form.peak_months}
+                  min={0}
+                  max={12}
+                  step={1}
+                  suffix=" mo"
+                  onChange={(v) => updateField("peak_months", v)}
+                />
+                <SliderField
+                  label="Weighted Effective"
+                  value={Math.round(weightedOcc * 10) / 10}
+                  min={0}
+                  max={100}
+                  step={0.1}
+                  suffix="%"
+                  disabled
+                  onChange={() => undefined}
+                />
+                <SliderField
+                  label="Peak Occupancy"
+                  value={form.peak_occupancy_pct}
+                  min={0}
+                  max={100}
+                  step={1}
+                  suffix="%"
+                  onChange={(v) => updateField("peak_occupancy_pct", v)}
+                />
+                <SliderField
+                  label="Off-Peak Occupancy"
+                  value={form.off_peak_occupancy_pct}
+                  min={0}
+                  max={100}
+                  step={1}
+                  suffix="%"
+                  onChange={(v) => updateField("off_peak_occupancy_pct", v)}
+                />
+              </div>
+              <SeasonalBars
+                values={occValues}
+                peak={peakMask}
+                valueSuffix="%"
+                ariaLabel="Occupancy by month"
+              />
+              <div className="flex gap-4 text-[11px] text-ink-3 mt-1">
+                <span className="inline-flex items-center gap-1">
+                  <span className="inline-block w-3 h-2 bg-accent rounded-sm" />
+                  Peak
+                </span>
+                <span className="inline-flex items-center gap-1">
+                  <span className="inline-block w-3 h-2 bg-ink-3 opacity-50 rounded-sm" />
+                  Off-peak
+                </span>
+              </div>
+            </>
+          )}
+
+          <details className="border-t border-rule pt-4">
+            <summary className="caps cursor-pointer text-ink-2 hover:text-ink select-none">
+              Advanced · monthly rate &amp; occupancy overrides
+            </summary>
+            <div className="mt-4">
+              <div className="flex items-center justify-between gap-3 mb-4">
+                <p className="text-[12px] text-ink-3 leading-snug">
+                  Overrides the flat or seasonal model with per-month
+                  values.
+                </p>
+                <Toggle
+                  value={useMonthlyProfile}
+                  onChange={(v) => {
+                    if (v) {
+                      const defaultProfile: MonthlyProfileEntry[] =
+                        Array.from({ length: 12 }, (_, i) => ({
+                          month: i + 1,
+                          nightly_rate: form.avg_nightly_rate,
+                          occupancy_pct: form.occupancy_pct,
+                        }));
+                      updateField("monthly_revenue_profile", defaultProfile);
+                      updateField("profile_template_name", "Custom");
+                    } else {
+                      updateField("monthly_revenue_profile", null);
+                      updateField("profile_template_name", null);
+                    }
+                  }}
+                  label="Use monthly overrides"
+                />
+              </div>
+              {useMonthlyProfile && form.monthly_revenue_profile && (
+                <MonthlyProfileEditor
+                  profile={form.monthly_revenue_profile}
+                  templateName={form.profile_template_name}
+                  onProfileChange={(p) =>
+                    updateField("monthly_revenue_profile", p)
+                  }
+                  onTemplateChange={(n) =>
+                    updateField("profile_template_name", n)
+                  }
+                />
+              )}
+            </div>
+          </details>
         </div>
       </section>
 
-      {/* Vermont / State Taxes (STR-only) */}
-      {activeRentalType === 'str' && (
-      <section className="bg-white dark:bg-slate-800 rounded-2xl shadow-sm dark:shadow-slate-900/20 p-6">
-        <h3 className="text-base font-semibold text-slate-900 dark:text-slate-100 mb-4">Vermont / State Taxes</h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <FormSection
+        title="Operating Expenses"
+        subtitle="Variable and monthly fixed costs."
+      >
+        <CurrencyInput
+          label="Cleaning Cost per Turn"
+          value={form.cleaning_cost_per_turn}
+          onChange={(v) => updateField("cleaning_cost_per_turn", v)}
+        />
+        <CurrencyInput
+          label="Utilities (Monthly)"
+          value={form.utilities_monthly}
+          onChange={(v) => updateField("utilities_monthly", v)}
+        />
+        <CurrencyInput
+          label="Supplies (Monthly)"
+          value={form.supplies_monthly}
+          onChange={(v) => updateField("supplies_monthly", v)}
+        />
+        <CurrencyInput
+          label="Marketing (Monthly)"
+          value={form.marketing_monthly}
+          onChange={(v) => updateField("marketing_monthly", v)}
+        />
+        <CurrencyInput
+          label="Software / PMS (Monthly)"
+          value={form.software_monthly}
+          onChange={(v) => updateField("software_monthly", v)}
+        />
+        <CurrencyInput
+          label="Lawn &amp; Snow (Monthly)"
+          value={form.lawn_snow_monthly}
+          onChange={(v) => updateSharedField("lawn_snow_monthly", v)}
+        />
+        <CurrencyInput
+          label="Other Monthly"
+          value={form.other_monthly_expense}
+          onChange={(v) => updateSharedField("other_monthly_expense", v)}
+        />
+        <CurrencyInput
+          label="Insurance (Annual)"
+          value={form.insurance_annual}
+          onChange={(v) => updateSharedField("insurance_annual", v)}
+        />
+      </FormSection>
+
+      <FormSection
+        title="Reserves"
+        subtitle="Percent of gross revenue set aside."
+        contentClassName="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-5"
+      >
+        <SliderField
+          label="Maintenance"
+          value={form.maintenance_reserve_pct}
+          min={0}
+          max={15}
+          step={0.5}
+          suffix="%"
+          onChange={(v) => updateSharedField("maintenance_reserve_pct", v)}
+        />
+        <SliderField
+          label="CapEx"
+          value={form.capex_reserve_pct}
+          min={0}
+          max={15}
+          step={0.5}
+          suffix="%"
+          onChange={(v) => updateSharedField("capex_reserve_pct", v)}
+        />
+        <SliderField
+          label="Damage"
+          value={form.damage_reserve_pct}
+          min={0}
+          max={10}
+          step={0.5}
+          suffix="%"
+          onChange={(v) => updateField("damage_reserve_pct", v)}
+        />
+      </FormSection>
+
+      <FormSection
+        title="Professional Fees"
+        subtitle="Accounting and legal costs."
+      >
+        <CurrencyInput
+          label="Accounting (Annual)"
+          value={form.accounting_annual}
+          onChange={(v) => updateSharedField("accounting_annual", v)}
+        />
+        <CurrencyInput
+          label="Legal (Annual)"
+          value={form.legal_annual}
+          onChange={(v) => updateSharedField("legal_annual", v)}
+        />
+      </FormSection>
+
+      {/* VT Tax collapsible (STR only) */}
+      <details className="border border-rule-strong rounded p-5 open:pb-6">
+        <summary className="caps cursor-pointer text-ink flex items-center justify-between select-none">
+          <span>Vermont tax configuration</span>
+          <span className="text-[11px] text-ink-3 font-normal normal-case tracking-normal">
+            Rooms tax, surcharge, local options
+          </span>
+        </summary>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-5 mt-5">
           <PercentInput
             label="VT Rooms Tax %"
             value={form.state_rooms_tax_pct}
             onChange={(v) => updateField("state_rooms_tax_pct", v)}
-            tooltip={TOOLTIPS.state_rooms_tax_pct}
           />
           <PercentInput
             label="STR Surcharge %"
             value={form.str_surcharge_pct}
             onChange={(v) => updateField("str_surcharge_pct", v)}
-            tooltip={TOOLTIPS.str_surcharge_pct}
           />
           <PercentInput
             label="Local Option Tax %"
             value={form.local_option_tax_pct}
             onChange={(v) => updateField("local_option_tax_pct", v)}
-            tooltip={TOOLTIPS.local_option_tax_pct}
           />
           <PercentInput
             label="Local Gross Receipts Tax %"
             value={form.local_gross_receipts_tax_pct}
             onChange={(v) => updateField("local_gross_receipts_tax_pct", v)}
-            tooltip={TOOLTIPS.local_gross_receipts_tax_pct}
           />
           <CurrencyInput
             label="STR Registration Fee"
             value={form.local_str_registration_fee}
             onChange={(v) => updateField("local_str_registration_fee", v)}
-            tooltip={TOOLTIPS.local_str_registration_fee}
           />
-          <div>
-            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-              Platform Remits Tax
-              <TooltipIcon text={TOOLTIPS.platform_remits_tax} />
-            </label>
-            <div className="flex items-center mt-2">
-              <input
-                type="checkbox"
-                checked={form.platform_remits_tax}
-                onChange={(e) => updateField("platform_remits_tax", e.target.checked)}
-                className="h-4 w-4 text-indigo-600 rounded border-slate-300 dark:border-slate-600"
-              />
-              <span className="ml-2 text-sm text-slate-600 dark:text-slate-400">
-                Platform collects and remits taxes
-              </span>
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <label className="field-label">Platform Remits Tax</label>
+              <p className="text-[12px] text-ink-3 mt-1 leading-snug">
+                Airbnb / VRBO collect &amp; remit on your behalf.
+              </p>
             </div>
+            <Toggle
+              value={form.platform_remits_tax}
+              onChange={(v) => updateField("platform_remits_tax", v)}
+              label="Platform remits tax"
+            />
           </div>
         </div>
-      </section>
-      )}
-
-      {/* Save */}
-      <div className="flex items-center gap-4 pt-4 border-t border-slate-100 dark:border-slate-700">
-        <button
-          onClick={() => void handleSave()}
-          disabled={saving}
-          className="px-6 py-2 bg-gradient-to-r from-indigo-600 to-indigo-500 shadow-md shadow-indigo-200 text-white rounded-lg hover:from-indigo-700 hover:to-indigo-600 disabled:opacity-50 transition-colors font-medium"
-        >
-          {saving ? "Saving..." : "Save Changes"}
-        </button>
-        {saved && <span className="text-emerald-600 text-sm font-medium">Saved successfully</span>}
-      </div>
-    </div>
+      </details>
+
+      {/* Growth & Exit collapsible (shared fields) */}
+      <details className="border border-rule-strong rounded p-5 open:pb-6">
+        <summary className="caps cursor-pointer text-ink flex items-center justify-between select-none">
+          <span>Growth &amp; exit assumptions</span>
+          <span className="text-[11px] text-ink-3 font-normal normal-case tracking-normal">
+            Shared across STR / LTR
+          </span>
+        </summary>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-5 mt-5">
+          <PercentInput
+            label="Annual Appreciation %"
+            value={form.property_appreciation_pct_annual}
+            onChange={(v) =>
+              updateSharedField("property_appreciation_pct_annual", v)
+            }
+          />
+          <PercentInput
+            label="Revenue Growth %"
+            value={form.revenue_growth_pct}
+            onChange={(v) => updateSharedField("revenue_growth_pct", v)}
+          />
+          <PercentInput
+            label="Expense Growth %"
+            value={form.expense_growth_pct}
+            onChange={(v) => updateSharedField("expense_growth_pct", v)}
+          />
+          <PercentInput
+            label="Land Value %"
+            value={form.land_value_pct}
+            onChange={(v) => updateSharedField("land_value_pct", v)}
+          />
+          <PercentInput
+            label="Marginal Tax Rate %"
+            value={form.marginal_tax_rate_pct}
+            onChange={(v) => updateSharedField("marginal_tax_rate_pct", v)}
+          />
+          <Field
+            label="Hold Period (years)"
+            type="number"
+            min={1}
+            max={30}
+            step={1}
+            value={form.hold_period_years || ""}
+            onChange={(e) =>
+              updateSharedField(
+                "hold_period_years",
+                parseInt(e.target.value) || 5
+              )
+            }
+          />
+          <PercentInput
+            label="Selling Costs %"
+            value={form.selling_cost_pct}
+            onChange={(v) => updateSharedField("selling_cost_pct", v)}
+          />
+          <PercentInput
+            label="Capital Gains Rate %"
+            value={form.capital_gains_rate_pct}
+            onChange={(v) => updateSharedField("capital_gains_rate_pct", v)}
+          />
+          <PercentInput
+            label="Depreciation Recapture %"
+            value={form.depreciation_recapture_rate_pct}
+            onChange={(v) =>
+              updateSharedField("depreciation_recapture_rate_pct", v)
+            }
+          />
+        </div>
+      </details>
+    </>
   );
 }
 
-const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+// --- LTR sections ---------------------------------------------------------
+
+function LTRSections({
+  form,
+  updateLTRField,
+  strForm,
+  updateSharedField,
+}: {
+  form: LTRAssumptions;
+  updateLTRField: <K extends keyof LTRAssumptions>(
+    key: K,
+    value: LTRAssumptions[K]
+  ) => void;
+  strForm: STRAssumptions;
+  updateSharedField: <K extends (typeof SHARED_KEYS)[number]>(
+    key: K,
+    value: number
+  ) => void;
+}) {
+  return (
+    <>
+      <FormSection
+        title="Revenue"
+        subtitle="Rent, duration, and pass-through fees."
+      >
+        <CurrencyInput
+          label="Monthly Rent"
+          value={form.monthly_rent}
+          onChange={(v) => updateLTRField("monthly_rent", v)}
+        />
+        <Field
+          label="Lease Duration (months)"
+          type="number"
+          min={1}
+          max={36}
+          step={1}
+          value={form.lease_duration_months}
+          onChange={(e) =>
+            updateLTRField(
+              "lease_duration_months",
+              parseInt(e.target.value) || 12
+            )
+          }
+        />
+        <CurrencyInput
+          label="Pet Rent (Monthly)"
+          value={form.pet_rent_monthly}
+          onChange={(v) => updateLTRField("pet_rent_monthly", v)}
+        />
+        <CurrencyInput
+          label="Late Fee Income (Monthly avg)"
+          value={form.late_fee_monthly}
+          onChange={(v) => updateLTRField("late_fee_monthly", v)}
+        />
+        <PercentInput
+          label="Vacancy Rate %"
+          value={form.vacancy_rate_pct}
+          onChange={(v) => updateLTRField("vacancy_rate_pct", v)}
+        />
+        <Field
+          label="Lease-Up Period (months)"
+          type="number"
+          min={0}
+          max={12}
+          step={1}
+          value={form.lease_up_period_months}
+          onChange={(e) =>
+            updateLTRField(
+              "lease_up_period_months",
+              parseInt(e.target.value) || 0
+            )
+          }
+        />
+      </FormSection>
+
+      <FormSection
+        title="Operating Expenses"
+        subtitle="Management and ongoing costs."
+      >
+        <PercentInput
+          label="Property Mgmt %"
+          value={form.property_mgmt_pct}
+          onChange={(v) => updateLTRField("property_mgmt_pct", v)}
+        />
+        <CurrencyInput
+          label="Tenant Turnover Cost"
+          value={form.tenant_turnover_cost}
+          onChange={(v) => updateLTRField("tenant_turnover_cost", v)}
+        />
+        <CurrencyInput
+          label="Utilities (Monthly)"
+          value={form.utilities_monthly}
+          onChange={(v) => updateLTRField("utilities_monthly", v)}
+        />
+        <CurrencyInput
+          label="Landlord Repairs (Annual)"
+          value={form.landlord_repairs_annual}
+          onChange={(v) => updateLTRField("landlord_repairs_annual", v)}
+        />
+        <CurrencyInput
+          label="Insurance (Annual)"
+          value={form.insurance_annual}
+          onChange={(v) => updateSharedField("insurance_annual", v)}
+        />
+        <CurrencyInput
+          label="Lawn &amp; Snow (Monthly)"
+          value={form.lawn_snow_monthly}
+          onChange={(v) => updateSharedField("lawn_snow_monthly", v)}
+        />
+        <CurrencyInput
+          label="Other Monthly"
+          value={form.other_monthly_expense}
+          onChange={(v) => updateSharedField("other_monthly_expense", v)}
+        />
+        <CurrencyInput
+          label="Accounting (Annual)"
+          value={form.accounting_annual}
+          onChange={(v) => updateSharedField("accounting_annual", v)}
+        />
+      </FormSection>
+
+      <FormSection
+        title="Reserves"
+        subtitle="Percent of gross revenue set aside."
+        contentClassName="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-5"
+      >
+        <SliderField
+          label="Maintenance"
+          value={form.maintenance_reserve_pct}
+          min={0}
+          max={15}
+          step={0.5}
+          suffix="%"
+          onChange={(v) => updateSharedField("maintenance_reserve_pct", v)}
+        />
+        <SliderField
+          label="CapEx"
+          value={form.capex_reserve_pct}
+          min={0}
+          max={15}
+          step={0.5}
+          suffix="%"
+          onChange={(v) => updateSharedField("capex_reserve_pct", v)}
+        />
+      </FormSection>
+
+      <FormSection title="Professional Fees" subtitle="Legal counsel.">
+        <CurrencyInput
+          label="Legal (Annual)"
+          value={form.legal_annual}
+          onChange={(v) => updateSharedField("legal_annual", v)}
+        />
+      </FormSection>
+
+      <details className="border border-rule-strong rounded p-5 open:pb-6">
+        <summary className="caps cursor-pointer text-ink flex items-center justify-between select-none">
+          <span>Growth &amp; exit assumptions</span>
+          <span className="text-[11px] text-ink-3 font-normal normal-case tracking-normal">
+            Shared across STR / LTR
+          </span>
+        </summary>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-5 mt-5">
+          <PercentInput
+            label="Annual Appreciation %"
+            value={form.property_appreciation_pct_annual}
+            onChange={(v) =>
+              updateSharedField("property_appreciation_pct_annual", v)
+            }
+          />
+          <PercentInput
+            label="Revenue Growth %"
+            value={form.revenue_growth_pct}
+            onChange={(v) => updateSharedField("revenue_growth_pct", v)}
+          />
+          <PercentInput
+            label="Expense Growth %"
+            value={form.expense_growth_pct}
+            onChange={(v) => updateSharedField("expense_growth_pct", v)}
+          />
+          <PercentInput
+            label="Land Value %"
+            value={form.land_value_pct}
+            onChange={(v) => updateSharedField("land_value_pct", v)}
+          />
+          <PercentInput
+            label="Marginal Tax Rate %"
+            value={form.marginal_tax_rate_pct}
+            onChange={(v) => updateSharedField("marginal_tax_rate_pct", v)}
+          />
+          <Field
+            label="Hold Period (years)"
+            type="number"
+            min={1}
+            max={30}
+            step={1}
+            value={strForm.hold_period_years || ""}
+            onChange={(e) =>
+              updateSharedField(
+                "hold_period_years",
+                parseInt(e.target.value) || 5
+              )
+            }
+          />
+          <PercentInput
+            label="Selling Costs %"
+            value={strForm.selling_cost_pct}
+            onChange={(v) => updateSharedField("selling_cost_pct", v)}
+          />
+          <PercentInput
+            label="Capital Gains Rate %"
+            value={strForm.capital_gains_rate_pct}
+            onChange={(v) => updateSharedField("capital_gains_rate_pct", v)}
+          />
+          <PercentInput
+            label="Depreciation Recapture %"
+            value={strForm.depreciation_recapture_rate_pct}
+            onChange={(v) =>
+              updateSharedField("depreciation_recapture_rate_pct", v)
+            }
+          />
+        </div>
+      </details>
+    </>
+  );
+}
+
+// --- Monthly Profile Editor (preserved) -----------------------------------
 
 function MonthlyProfileEditor({
   profile,
@@ -571,50 +977,57 @@ function MonthlyProfileEditor({
   onProfileChange: (profile: MonthlyProfileEntry[]) => void;
   onTemplateChange: (name: string | null) => void;
 }) {
-  const [templates, setTemplates] = useState<Record<string, MonthlyProfileEntry[] | null>>({});
+  const [templates, setTemplates] = useState<
+    Record<string, MonthlyProfileEntry[] | null>
+  >({});
 
   useEffect(() => {
-    getProfileTemplates().then(setTemplates).catch(() => {});
+    getProfileTemplates()
+      .then(setTemplates)
+      .catch(() => undefined);
   }, []);
 
   const handleTemplateSelect = (name: string) => {
     const tpl = templates[name];
-    if (tpl === null || tpl === undefined) {
-      // "flat" template — disable profile
-      return;
-    }
+    if (tpl === null || tpl === undefined) return;
     onProfileChange([...tpl]);
     onTemplateChange(name);
   };
 
-  const updateEntry = (month: number, field: "nightly_rate" | "occupancy_pct", value: number) => {
-    const updated = profile.map((e) => (e.month === month ? { ...e, [field]: value } : e));
+  const updateEntry = (
+    month: number,
+    field: "nightly_rate" | "occupancy_pct",
+    value: number
+  ) => {
+    const updated = profile.map((e) =>
+      e.month === month ? { ...e, [field]: value } : e
+    );
     onProfileChange(updated);
     onTemplateChange("Custom");
   };
 
-  // Mini bar chart
   const maxRate = Math.max(...profile.map((e) => e.nightly_rate), 1);
   const maxOcc = 100;
-  const chartH = 80;
-  const barW = 16;
+  const chartH = 72;
+  const barW = 10;
   const gap = 4;
   const totalW = 12 * (barW * 2 + gap) + 11 * gap + 24;
 
-  // Weighted occupancy
   const DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-  const totalOccupied = profile.reduce((sum, e) => sum + (e.occupancy_pct / 100) * DAYS[e.month - 1], 0);
+  const totalOccupied = profile.reduce(
+    (sum, e) => sum + (e.occupancy_pct / 100) * DAYS[e.month - 1],
+    0
+  );
   const effectiveOcc = (totalOccupied / 365) * 100;
 
   return (
-    <div className="space-y-3 pl-6 border-l-2 border-indigo-100 dark:border-indigo-900">
-      {/* Template selector */}
+    <div className="space-y-4 pl-5 border-l border-rule">
       <div className="flex items-center gap-3">
-        <label className="text-sm font-medium text-slate-700 dark:text-slate-300">Template:</label>
+        <label className="caps text-ink-3">Template</label>
         <select
           value={templateName || "Custom"}
           onChange={(e) => handleTemplateSelect(e.target.value)}
-          className="px-3 py-1.5 text-sm border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 dark:text-slate-100"
+          className="text-[13px] bg-transparent border-0 border-b border-rule-strong focus:border-accent outline-none text-ink py-0.5 cursor-pointer"
         >
           <option value="Custom">Custom</option>
           {Object.keys(templates)
@@ -627,52 +1040,90 @@ function MonthlyProfileEditor({
         </select>
       </div>
 
-      {/* Mini chart */}
       <div className="overflow-x-auto">
-        <svg width={totalW} height={chartH + 20} className="block">
+        <svg width={totalW} height={chartH + 18} className="block">
           {profile.map((e, i) => {
             const x = i * (barW * 2 + gap + gap) + 12;
             const rateH = (e.nightly_rate / maxRate) * chartH;
             const occH = (e.occupancy_pct / maxOcc) * chartH;
             return (
               <g key={e.month}>
-                <rect x={x} y={chartH - rateH} width={barW} height={rateH} rx={2} className="fill-indigo-400 dark:fill-indigo-500" />
-                <rect x={x + barW} y={chartH - occH} width={barW} height={occH} rx={2} className="fill-emerald-400 dark:fill-emerald-500" />
-                <text x={x + barW} y={chartH + 14} textAnchor="middle" className="fill-slate-400 dark:fill-slate-500 text-[9px]">
-                  {MONTH_NAMES[i]}
+                <rect
+                  x={x}
+                  y={chartH - rateH}
+                  width={barW}
+                  height={rateH}
+                  rx={2}
+                  fill="var(--accent)"
+                  opacity={0.85}
+                />
+                <rect
+                  x={x + barW}
+                  y={chartH - occH}
+                  width={barW}
+                  height={occH}
+                  rx={2}
+                  fill="var(--ink-2)"
+                  opacity={0.7}
+                />
+                <text
+                  x={x + barW}
+                  y={chartH + 12}
+                  textAnchor="middle"
+                  fill="var(--ink-3)"
+                  style={{ fontSize: 9, fontFamily: "var(--font-mono)" }}
+                >
+                  {MONTH_NAMES[i].slice(0, 1)}
                 </text>
               </g>
             );
           })}
         </svg>
-        <div className="flex gap-4 text-xs text-slate-500 dark:text-slate-400 mt-1">
-          <span className="flex items-center gap-1"><span className="w-3 h-2 bg-indigo-400 dark:bg-indigo-500 rounded-sm inline-block" /> Rate</span>
-          <span className="flex items-center gap-1"><span className="w-3 h-2 bg-emerald-400 dark:bg-emerald-500 rounded-sm inline-block" /> Occupancy</span>
+        <div className="flex gap-4 text-[11px] text-ink-3 mt-1">
+          <span className="inline-flex items-center gap-1">
+            <span className="inline-block w-3 h-2 bg-accent rounded-sm" />
+            Rate
+          </span>
+          <span className="inline-flex items-center gap-1">
+            <span className="inline-block w-3 h-2 bg-ink-2 opacity-70 rounded-sm" />
+            Occupancy
+          </span>
         </div>
       </div>
 
-      {/* Editable table */}
       <div className="overflow-x-auto">
-        <table className="w-full text-sm">
+        <table className="w-full text-[13px]">
           <thead>
-            <tr className="text-slate-500 dark:text-slate-400">
-              <th className="text-left py-1 pr-2 font-medium">Month</th>
-              <th className="text-right py-1 px-2 font-medium">Nightly Rate ($)</th>
-              <th className="text-right py-1 pl-2 font-medium">Occupancy (%)</th>
+            <tr className="text-ink-3">
+              <th className="text-left py-1 pr-2 font-medium caps">Month</th>
+              <th className="text-right py-1 px-2 font-medium caps">
+                Nightly ($)
+              </th>
+              <th className="text-right py-1 pl-2 font-medium caps">
+                Occupancy (%)
+              </th>
             </tr>
           </thead>
           <tbody>
             {profile.map((e) => (
-              <tr key={e.month} className="border-t border-slate-100 dark:border-slate-700">
-                <td className="py-1 pr-2 text-slate-700 dark:text-slate-300 font-medium">{MONTH_NAMES[e.month - 1]}</td>
+              <tr key={e.month} className="border-t border-rule">
+                <td className="py-1 pr-2 text-ink font-medium">
+                  {MONTH_NAMES[e.month - 1]}
+                </td>
                 <td className="py-1 px-2">
                   <input
                     type="number"
                     min="0"
                     step="5"
                     value={e.nightly_rate}
-                    onChange={(ev) => updateEntry(e.month, "nightly_rate", parseFloat(ev.target.value) || 0)}
-                    className="w-24 px-2 py-1 text-right border border-slate-200 dark:border-slate-600 rounded bg-white dark:bg-slate-700 dark:text-slate-100 text-sm"
+                    onChange={(ev) =>
+                      updateEntry(
+                        e.month,
+                        "nightly_rate",
+                        parseFloat(ev.target.value) || 0
+                      )
+                    }
+                    className="w-24 px-2 py-1 text-right border-b border-rule-strong focus:border-accent focus:outline-none bg-transparent font-mono tabular-nums"
                   />
                 </td>
                 <td className="py-1 pl-2">
@@ -682,8 +1133,14 @@ function MonthlyProfileEditor({
                     max="100"
                     step="1"
                     value={e.occupancy_pct}
-                    onChange={(ev) => updateEntry(e.month, "occupancy_pct", parseFloat(ev.target.value) || 0)}
-                    className="w-20 px-2 py-1 text-right border border-slate-200 dark:border-slate-600 rounded bg-white dark:bg-slate-700 dark:text-slate-100 text-sm"
+                    onChange={(ev) =>
+                      updateEntry(
+                        e.month,
+                        "occupancy_pct",
+                        parseFloat(ev.target.value) || 0
+                      )
+                    }
+                    className="w-20 px-2 py-1 text-right border-b border-rule-strong focus:border-accent focus:outline-none bg-transparent font-mono tabular-nums"
                   />
                 </td>
               </tr>
@@ -692,159 +1149,12 @@ function MonthlyProfileEditor({
         </table>
       </div>
 
-      <div className="text-sm text-slate-500 dark:text-slate-400">
-        Effective Occupancy: <span className="font-semibold text-slate-700 dark:text-slate-300">
+      <div className="text-[13px] text-ink-3">
+        Effective Occupancy:{" "}
+        <span className="font-mono tabular-nums text-ink">
           {effectiveOcc.toFixed(1)}%
         </span>
       </div>
     </div>
   );
 }
-
-const LTR_TOOLTIPS = {
-  monthly_rent: "Expected monthly rent for the property. Research comparable long-term rentals in the area on Zillow, Apartments.com, or local listings.",
-  lease_duration_months: "Length of the lease in months. Standard is 12 months. Shorter leases (6-9 months) may command higher rent but increase turnover costs.",
-  pet_rent_monthly: "Additional monthly pet rent. Typical range: $25-$50 per pet. Set to $0 if not accepting pets.",
-  late_fee_monthly: "Average monthly late fee income across all months. Most landlords charge $50-$100 per late payment; multiply by expected frequency.",
-  vacancy_rate_pct: "Ongoing vacancy rate as a percentage. Accounts for time between tenants after the initial lease-up. US average: 5-8%. Hot markets: 2-4%.",
-  lease_up_period_months: "Months to find the first tenant after purchase. Typically 1-2 months. Only affects Year 1 calculations.",
-  property_mgmt_pct: "Property management fee as % of collected rent. 0% if self-managing. Typical full-service: 8-12%.",
-  insurance_annual: "Annual landlord insurance premium. Typically $1,500-$3,000. May differ from STR insurance.",
-  maintenance_reserve_pct: "Percentage of gross revenue set aside for routine maintenance. Standard: 5%. Alternative: 1% of property value per year.",
-  capex_reserve_pct: "Percentage of gross revenue reserved for major capital expenditures (roof, HVAC, appliances). Standard: 5%.",
-  landlord_repairs_annual: "Annual budget for landlord-responsible repairs not covered by reserves. Includes plumbing, electrical, appliance repairs.",
-  tenant_turnover_cost: "Cost to prepare the unit between tenants: cleaning, painting, minor repairs, listing fees. Typical: $1,000-$3,000.",
-  utilities_monthly: "Monthly utilities paid by the landlord. Many LTR tenants pay their own utilities. Common landlord-paid: water, trash, common area electric.",
-  lawn_snow_monthly: "Monthly average for landscaping and snow removal. Set to $0 if tenant-responsible or for condos.",
-  other_monthly_expense: "Catch-all for expenses not covered above: pest control, common area maintenance, etc.",
-  accounting_annual: "Annual accounting and tax preparation costs. Typical: $500-$1,500.",
-  legal_annual: "Annual legal costs: lease preparation, eviction proceedings, compliance. Typical: $500-$1,500.",
-  land_value_pct: "Percentage of purchase price attributable to land (non-depreciable). Check county tax assessment. Typical: 15-30%.",
-  property_appreciation_pct_annual: "Expected annual property value appreciation. US historical average: 3-4%. Conservative: 2%.",
-  revenue_growth_pct: "Expected annual rent increase at lease renewal. US average: 3-5%. Tied to market conditions and lease terms.",
-  expense_growth_pct: "Expected annual expense growth rate. Covers inflation on operating costs. General inflation: 2-4%.",
-  marginal_tax_rate_pct: "Your combined marginal income tax rate (federal + state). Used to estimate after-tax cashflow. Set to 0 to hide tax analysis.",
-};
-
-function LTRForm({ ltrForm, updateLTRField }: {
-  ltrForm: LTRAssumptions;
-  updateLTRField: <K extends keyof LTRAssumptions>(key: K, value: LTRAssumptions[K]) => void;
-}) {
-  return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-      {/* Left column: Revenue */}
-      <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-sm dark:shadow-slate-900/20 p-6 space-y-6">
-        <h3 className="text-base font-semibold text-slate-900 dark:text-slate-100">LTR Revenue</h3>
-        <CurrencyInput
-          label="Monthly Rent"
-          value={ltrForm.monthly_rent}
-          onChange={(v) => updateLTRField("monthly_rent", v)}
-          tooltip={LTR_TOOLTIPS.monthly_rent}
-        />
-        <div>
-          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-            Lease Duration (months)
-            <TooltipIcon text={LTR_TOOLTIPS.lease_duration_months} />
-          </label>
-          <input
-            type="number"
-            min="1"
-            max="36"
-            step="1"
-            value={ltrForm.lease_duration_months}
-            onChange={(e) => updateLTRField("lease_duration_months", parseInt(e.target.value) || 12)}
-            className="w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-700 dark:text-slate-100"
-          />
-        </div>
-        <CurrencyInput
-          label="Pet Rent (Monthly)"
-          value={ltrForm.pet_rent_monthly}
-          onChange={(v) => updateLTRField("pet_rent_monthly", v)}
-          tooltip={LTR_TOOLTIPS.pet_rent_monthly}
-        />
-        <CurrencyInput
-          label="Late Fee Income (Monthly Avg)"
-          value={ltrForm.late_fee_monthly}
-          onChange={(v) => updateLTRField("late_fee_monthly", v)}
-          tooltip={LTR_TOOLTIPS.late_fee_monthly}
-        />
-        <PercentInput
-          label="Vacancy Rate %"
-          value={ltrForm.vacancy_rate_pct}
-          onChange={(v) => updateLTRField("vacancy_rate_pct", v)}
-          tooltip={LTR_TOOLTIPS.vacancy_rate_pct}
-        />
-        <div>
-          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-            Lease-Up Period (months)
-            <TooltipIcon text={LTR_TOOLTIPS.lease_up_period_months} />
-          </label>
-          <input
-            type="number"
-            min="0"
-            max="12"
-            step="1"
-            value={ltrForm.lease_up_period_months}
-            onChange={(e) => updateLTRField("lease_up_period_months", parseInt(e.target.value) || 0)}
-            className="w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-700 dark:text-slate-100"
-          />
-        </div>
-
-      </div>
-
-      {/* Right column: Expenses */}
-      <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-sm dark:shadow-slate-900/20 p-6 space-y-6">
-        <h3 className="text-base font-semibold text-slate-900 dark:text-slate-100">LTR Expenses</h3>
-
-        {/* Management */}
-        <div>
-          <h4 className="text-xs uppercase tracking-wider text-slate-400 dark:text-slate-500 font-medium mb-3">Management</h4>
-          <PercentInput
-            label="Property Mgmt %"
-            value={ltrForm.property_mgmt_pct}
-            onChange={(v) => updateLTRField("property_mgmt_pct", v)}
-            tooltip={LTR_TOOLTIPS.property_mgmt_pct}
-          />
-        </div>
-
-        {/* Turnover */}
-        <div>
-          <h4 className="text-xs uppercase tracking-wider text-slate-400 dark:text-slate-500 font-medium mb-3">Turnover</h4>
-          <CurrencyInput
-            label="Tenant Turnover Cost"
-            value={ltrForm.tenant_turnover_cost}
-            onChange={(v) => updateLTRField("tenant_turnover_cost", v)}
-            tooltip={LTR_TOOLTIPS.tenant_turnover_cost}
-          />
-        </div>
-
-        {/* Monthly Fixed */}
-        <div>
-          <h4 className="text-xs uppercase tracking-wider text-slate-400 dark:text-slate-500 font-medium mb-3">Monthly Fixed</h4>
-          <div className="space-y-4">
-            <CurrencyInput
-              label="Utilities (Monthly)"
-              value={ltrForm.utilities_monthly}
-              onChange={(v) => updateLTRField("utilities_monthly", v)}
-              tooltip={LTR_TOOLTIPS.utilities_monthly}
-            />
-          </div>
-        </div>
-
-        {/* Annual (LTR-specific) */}
-        <div>
-          <h4 className="text-xs uppercase tracking-wider text-slate-400 dark:text-slate-500 font-medium mb-3">Annual</h4>
-          <div className="space-y-4">
-            <CurrencyInput
-              label="Landlord Repairs (Annual)"
-              value={ltrForm.landlord_repairs_annual}
-              onChange={(v) => updateLTRField("landlord_repairs_annual", v)}
-              tooltip={LTR_TOOLTIPS.landlord_repairs_annual}
-            />
-          </div>
-        </div>
-
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/src/components/shared/SeasonalBars.tsx b/frontend/src/components/shared/SeasonalBars.tsx
new file mode 100644
index 0000000..15f6bf3
--- /dev/null
+++ b/frontend/src/components/shared/SeasonalBars.tsx
@@ -0,0 +1,74 @@
+interface SeasonalBarsProps {
+  values: number[];
+  peak?: boolean[];
+  height?: number;
+  className?: string;
+  ariaLabel?: string;
+  valueSuffix?: string;
+}
+
+const MONTH_LABELS = ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"];
+
+export function SeasonalBars({
+  values,
+  peak,
+  height = 96,
+  className = "",
+  ariaLabel = "Monthly values",
+  valueSuffix = "",
+}: SeasonalBarsProps) {
+  if (values.length !== 12) return null;
+
+  const max = Math.max(...values, 1);
+  const barW = 28;
+  const gap = 8;
+  const width = 12 * barW + 11 * gap;
+  const labelY = height - 2;
+  const chartH = height - 18;
+
+  return (
+    <div className={className}>
+      <svg
+        viewBox={`0 0 ${width} ${height}`}
+        className="w-full"
+        style={{ height }}
+        preserveAspectRatio="xMidYMax meet"
+        aria-label={ariaLabel}
+      >
+        {values.map((v, i) => {
+          const h = Math.max(1, (v / max) * chartH);
+          const x = i * (barW + gap);
+          const y = chartH - h;
+          const isPeak = peak?.[i] ?? false;
+          return (
+            <g key={i}>
+              <title>
+                {MONTH_LABELS[i]}: {v.toFixed(1)}
+                {valueSuffix}
+              </title>
+              <rect
+                x={x}
+                y={y}
+                width={barW}
+                height={h}
+                rx={2}
+                fill={isPeak ? "var(--accent)" : "var(--ink-3)"}
+                opacity={isPeak ? 1 : 0.5}
+              />
+              <text
+                x={x + barW / 2}
+                y={labelY}
+                textAnchor="middle"
+                fill="var(--ink-3)"
+                style={{ fontSize: 10, fontFamily: "var(--font-mono)" }}
+              >
+                {MONTH_LABELS[i]}
+              </text>
+            </g>
+          );
+        })}
+      </svg>
+    </div>
+  );
+}
+