Salvation page: redesigned notification email, visitor confirmation email, clear on-screen confirmation and email notice, phone fixes; v2.39.1

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

public/salvation/index.html

@@ -590,6 +590,24 @@
   .callout-skip { color: var(--parchment-dark); font-size: 1rem; font-style: italic; text-decoration: underline; opacity: 0.85; }
   .callout-skip:hover { opacity: 1; }
   @media (max-width: 600px) { .record-callout { padding: 1.5rem 1.1rem; } .record-callout p { font-size: 1.1rem; } }
+
+  .phase-label { white-space: nowrap; }
+  .filter-bar { scrollbar-width: none; }
+  .filter-bar::-webkit-scrollbar { display: none; }
+  @media (max-width: 720px) {
+    .hero-actions { flex-direction: column; align-items: stretch; max-width: 18rem; margin-left: auto; margin-right: auto; }
+    .hero-btn { text-align: center; }
+    .phase-header { flex-wrap: wrap; row-gap: 0.4rem; }
+    .phase-title { flex-basis: 100%; }
+  }
+
+  .sent-badge { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; color: #fff; background: linear-gradient(135deg, #2e7d52, #1e6040); margin-bottom: 0.8rem; box-shadow: 0 2px 10px rgba(30,96,64,0.4); }
+  .sent-reach { font-size: 1.2rem !important; }
+  .sent-welcome { margin-top: 1.4rem; padding: 1.1rem 1.3rem; border-left: 4px solid var(--gold); background: rgba(184,134,11,0.1); }
+  .sent-welcome-head { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.05em; color: var(--ink); }
+  .sent-welcome .note { margin-top: 0.6rem; }
+  .sent-welcome a { color: var(--crimson); font-weight: 600; }
+  .field-hint { margin-top: 0.4rem; font-size: 0.98rem; line-height: 1.55; color: var(--ink-light); font-style: italic; }
 </style>
 </head>
 <body>
@@ -744,8 +762,9 @@
         <input class="hp" type="text" name="_honey" tabindex="-1" autocomplete="off" aria-hidden="true">
         <label for="r-name">First name</label>
         <input type="text" id="r-name" name="name" maxlength="100" autocomplete="given-name">
-        <label for="r-email">Email (if you would like someone to reply)</label>
-        <input type="email" id="r-email" name="email" maxlength="200" autocomplete="email">
+        <label for="r-email">Email (optional)</label>
+        <input type="email" id="r-email" name="email" maxlength="200" autocomplete="email" aria-describedby="r-email-hint">
+        <p class="field-hint" id="r-email-hint">If you add your email, we will send you a short confirmation message right away, and someone from the team will reach out to you personally. It is a one-time email, and we will not add you to any mailing list. If you leave it blank, we will still receive your message, but we will not be able to reply.</p>
         <label for="r-msg">Anything you would like to share</label>
         <textarea id="r-msg" name="message" rows="4" maxlength="2000"></textarea>
         <p class="form-error" id="r-error" role="alert"></p>
@@ -756,8 +775,14 @@
       </form>
     </div>
     <div class="respond-done" id="respond-done" role="status" tabindex="-1">
-      <h3 class="plea-title">Pardoned. Welcome to the family of God.</h3>
-      <p class="note">“Therefore, there is now no condemnation for those who are in Christ Jesus.” (Romans 8:1) You are no longer a defendant. You are a child of the Judge. Thank you for letting us know. We will be glad to hear from you again, and <a href="/start-here">Start Here</a> is a good path through the podcast and studies, or you can <a href="/contact?source=salvation">ask a question</a>.</p>
+      <div class="sent-badge" aria-hidden="true">✓</div>
+      <h3 class="plea-title">Your message has been sent.</h3>
+      <p class="note sent-reach" id="sent-reach"></p>
+      <div class="sent-welcome">
+        <p class="sent-welcome-head">Pardoned. Welcome to the family of God.</p>
+        <p class="note">“Therefore, there is now no condemnation for those who are in Christ Jesus.” (Romans 8:1) You are no longer a defendant. You are a child of the Judge.</p>
+        <p class="note">While you wait, begin with the Gospel of John, talk to God every day, and look for a Bible-teaching church. <a href="/start-here">Start Here</a> is a good path through the podcast and studies, and you can <a href="/contact?source=salvation">ask a question</a> any time.</p>
+      </div>
     </div>
   </div>
 
@@ -1621,8 +1646,23 @@ buildTimeline();
       });
       const data = await res.json().catch(function () { return {}; });
       if (!res.ok) throw new Error(data.message || 'We could not send this right now.');
+      const reach = document.getElementById('sent-reach');
+      const given = (form.email.value || '').trim();
+      if (given) {
+        reach.textContent = '';
+        reach.appendChild(document.createTextNode(data.confirmationSent ? 'We just sent a confirmation email to ' : 'Someone from the team will reach out to you soon at '));
+        const strong = document.createElement('strong');
+        strong.textContent = given;
+        reach.appendChild(strong);
+        reach.appendChild(document.createTextNode(data.confirmationSent
+          ? ', and someone from the team will reach out to you personally soon. If you do not see our emails, please check your spam folder.'
+          : '. If you do not see a reply in a few days, please check your spam folder.'));
+      } else {
+        reach.textContent = 'We are rejoicing with you. Because you did not leave an email address, we are not able to reach out to you, but you are always welcome to write to us.';
+      }
       intro.style.display = 'none';
       done.classList.add('open');
+      done.scrollIntoView({ block: 'center' });
       done.focus();
     } catch (ex) {
       err.textContent = (ex && ex.message ? ex.message : 'We could not send this right now.') + ' Your decision is between you and God either way, and you are welcome to write to us from the contact page.';