Default numPeople to 0, hide referral cards & columns until they set people in downline

index.html

@@ -1205,7 +1205,7 @@
     <div class="controls">
       <div class="control-group">
         <label>Number of people</label>
-        <input type="number" id="numPeople" value="1" min="1" max="100">
+        <input type="number" id="numPeople" value="0" min="0" max="100">
       </div>
       <div class="control-group">
         <label>Your referral commission</label>
@@ -1236,7 +1236,7 @@
       </div>
       <div class="checkbox-row">
         <div class="checkbox-group">
-          <input type="checkbox" id="showReferral" checked>
+          <input type="checkbox" id="showReferral">
           <label for="showReferral">Show referral earnings (my 10%)</label>
         </div>
         <div class="checkbox-group">
@@ -1295,8 +1295,8 @@
         <table><thead><tr>
           <th>Phase</th><th class="num">Cycles</th><th>Timeline</th>
           <th class="num">Their Payout/Cycle</th>
-          <th class="num referral-col">Your 10% Cut/Cycle</th>
+          <th class="num referral-col" id="headerYourCut">Your 10% Cut/Cycle</th>
-          <th class="num">Cumulative to You</th>
+          <th class="num" id="headerCumulative">Cumulative to You</th>
         </tr></thead><tbody id="overviewBody"></tbody></table>
       </div>
     </div>
@@ -1311,8 +1311,8 @@
         <table><thead><tr>
           <th>Month</th><th>Active Phase</th>
           <th class="num">Their Profit This Month</th>
-          <th class="num referral-col">Your 10% Commission/Month</th>
+          <th class="num referral-col" id="headerTimelineComm">Your 10% Commission/Month</th>
-          <th class="num">Your Cumulative</th>
+          <th class="num" id="headerTimelineCum">Your Cumulative</th>
         </tr></thead><tbody id="timelineBody"></tbody></table>
       </div>
     </div>
@@ -1628,7 +1628,7 @@ const SCENARIOS = buildSCENARIOS();
 let chart1 = null, chart2 = null, chart3 = null;
 
 function updateAll() {
-  const numPeople = parseInt(document.getElementById('numPeople').value) || 1;
+  const numPeople = parseInt(document.getElementById('numPeople').value) || 0;
   const commPct   = parseFloat(document.getElementById('commissionPct').value) || 10;
   const giftLevel = parseInt(document.getElementById('giftLevel').value);
   const selfLevel = parseInt(document.getElementById('selfFundLevel').value);
@@ -1694,24 +1694,35 @@ function updateAll() {
       <div class="label">Time to 3× L7</div>
       <div class="value orange" style="font-size:1.3rem">~${totalMonths} months</div>
     </div>
+${numPeople > 0 ? `
     <div class="summary-card">
       <div class="label">Year 1 Referral Earnings</div>
       <div class="value green">$${yr1Cum.toLocaleString()}</div>
       <div class="sub">${numPeople > 1 ? `$${yr1PerPerson.toLocaleString()} / person` : ''}</div>
-    </div>
+    </div>` : ''}
     <div class="summary-card">
       <div class="label">ROI on Gift</div>
       <div class="value green">${roiText}</div>
       <div class="sub">${roiSub || (giftCost > 0 ? '' : 'no gift cost')}</div>
     </div>
+${numPeople > 0 ? `
     <div class="summary-card">
       <div class="label">Monthly Passive (3× L7)</div>
       <div class="value green">$${monthlyPassive.toLocaleString()}</div>
       <div class="sub">${numPeople > 1 ? `$${Math.round(monthlyPassive / numPeople).toLocaleString()} / person` : 'per month'}</div>
-    </div>
+    </div>` : ''}
   `;
   document.getElementById('summaryCards').innerHTML = summaryHtml;
 
+  // Toggle referral columns when no people in downline
+  for (const id of ['headerYourCut','headerCumulative','headerTimelineComm','headerTimelineCum']) {
+    const el = document.getElementById(id);
+    if (el) el.style.display = numPeople > 0 ? '' : 'none';
+  }
+  for (const el of document.querySelectorAll('.referral-col')) {
+    el.style.display = numPeople > 0 ? '' : 'none';
+  }
+
   let cumRunning = 0;
   let roiHit = false;
   let rows = '';
@@ -1763,16 +1774,18 @@ function updateAll() {
     type: 'line',
     data: {
       labels: chartLabels,
-      datasets: [{
+      datasets: [
-        label: `${numPeople > 1 ? `Total (${numPeople} people)` : 'Your'} Cumulative Referral Earnings`,
+      ${numPeople > 0 ? `{
-        data: numPeople > 1 ? chartValues.map(v => v * numPeople) : chartValues,
+              label: `${numPeople > 1 ? `Total (${numPeople} people)` : 'Your'} Cumulative Referral Earnings`,
-        borderColor: '#6c5ce7',
+              data: numPeople > 1 ? chartValues.map(v => v * numPeople) : chartValues,
-        backgroundColor: 'rgba(108,92,231,0.1)',
+              borderColor: '#6c5ce7',
-        fill: true,
+              backgroundColor: 'rgba(108,92,231,0.1)',
-        tension: 0.3,
+              fill: true,
-        pointRadius: 3,
+              tension: 0.3,
-        pointHoverRadius: 5,
+              pointRadius: 3,
-      }]
+              pointHoverRadius: 5,
+            },` : ''}
+            {
     },
     options: {
       responsive: true,
@@ -2066,7 +2079,7 @@ function updateHeroSignupBtn() {
 
 // ─── Shareable Plan Generator ───────────────────────────────
 function generatePlan() {
-  const numPeople = parseInt(document.getElementById('numPeople').value) || 1;
+  const numPeople = parseInt(document.getElementById('numPeople').value) || 0;
   const giftLevel = parseInt(document.getElementById('giftLevel').value);
   const selfLevel = parseInt(document.getElementById('selfFundLevel').value);
   const refUser = getRefFromURL() || 'cryptoteambuild';