Default ROI dashboard inputs to empty placeholders — no pre-filled values

index.html

@@ -1343,16 +1343,17 @@
         <div class="roi-inputs">
           <div class="roi-field">
             <label>Total Deposited (out-of-pocket)</label>
-            <input type="number" id="roiDeposits" value="450" step="10" min="0">
+            <input type="number" id="roiDeposits" placeholder="e.g. 450" step="10" min="0">
           </div>
           <div class="roi-field">
             <label>Total Earned All Time</label>
-            <input type="number" id="roiTotalEarned" value="371.33" step="0.01" min="0">
+            <input type="number" id="roiTotalEarned" placeholder="e.g. 371.33" step="0.01" min="0">
           </div>
           <div class="roi-field">
             <label>Campaign Phase</label>
             <select id="roiPhase">
-              <option value="l4l3" selected>L4 + L3 Hybrid</option>
+              <option value="" selected disabled>Select your phase...</option>
+              <option value="l4l3">L4 + L3 Hybrid</option>
               <option value="l5l3">L5 + L3 Hybrid</option>
               <option value="l6l3">L6 + L3 Hybrid</option>
               <option value="l7solo">L7 Solo</option>
@@ -1361,7 +1362,7 @@
           </div>
           <div class="roi-field">
             <label>Cycles Completed This Phase</label>
-            <input type="number" id="roiCyclesDone" value="0" step="1" min="0">
+            <input type="number" id="roiCyclesDone" placeholder="e.g. 2" step="1" min="0">
           </div>
         </div>
 
@@ -2112,6 +2113,21 @@ function updateROI() {
   const phase = document.getElementById('roiPhase').value;
   const cyclesDone = parseInt(document.getElementById('roiCyclesDone').value) || 0;
 
+  // If no inputs provided, show placeholder state
+  const hasInput = document.getElementById('roiDeposits').value.trim() !== '' || document.getElementById('roiTotalEarned').value.trim() !== '';
+
+  if (!hasInput) {
+    document.getElementById('roiStatROI').querySelector('.roi-stat-value').textContent = '—';
+    document.getElementById('roiStatRecouped').querySelector('.roi-stat-value').textContent = '—';
+    document.getElementById('roiStatRemaining').querySelector('.roi-stat-value').textContent = '—';
+    document.getElementById('roiBarROI').style.width = '0%';
+    document.getElementById('roiStatPhase').querySelector('.roi-stat-value').textContent = '—';
+    document.getElementById('roiBarPhase').style.width = '0%';
+    document.querySelectorAll('.roi-ladder-step').forEach(el => el.classList.remove('active', 'passed'));
+    document.getElementById('roiMilestones').innerHTML = '<div style="color:var(--text-muted);font-size:0.85rem;padding:10px 0;">Enter your numbers above to see your progress 🚀</div>';
+    return;
+  }
+
   // Phase data: [cycles_this_phase, cycles_needed_for_next, profit_per_cycle, next_phase_label]
   const PHASE_DATA = {
     l4l3: { cycles: 5, profitPer: 133.20, nextLabel: 'L5+L3', needsCapital: 660 },