Add Why Sign Up section to study landing page and auth hint to lesson sidebar

src/colossiansStudy.tsx

@@ -203,6 +203,37 @@ export function StudyLandingPage({ content }: Props) {
           </div>
         </section>
       )}
+
+      <section className="section-study-signup-why" aria-label="Why create a free account">
+        <div className="section-inner">
+          <div className="study-module-header">
+            <p>Free Student Account</p>
+            <h2>Why Sign Up?</h2>
+          </div>
+          <div className="study-signup-why-grid">
+            <article className="study-signup-why-card">
+              <p className="study-signup-why-icon" aria-hidden="true">📝</p>
+              <h3>Personal Notes on Every Lesson</h3>
+              <p>Write and save your own notes directly on each lesson — up to 500 notes across all study tracks.</p>
+            </article>
+            <article className="study-signup-why-card">
+              <p className="study-signup-why-icon" aria-hidden="true">📖</p>
+              <h3>Space to Go Deep</h3>
+              <p>Each note holds up to 12,000 characters — roughly 2,000 words — so you can write as much as you need.</p>
+            </article>
+            <article className="study-signup-why-card">
+              <p className="study-signup-why-icon" aria-hidden="true">🔒</p>
+              <h3>Private to You</h3>
+              <p>Your notes are tied to your account, not your device. Nobody else can read them — only you.</p>
+            </article>
+            <article className="study-signup-why-card">
+              <p className="study-signup-why-icon" aria-hidden="true">⚡</p>
+              <h3>Instant — No Email Required</h3>
+              <p>Just pick a username and password. Free forever. Stay signed in for 30 days automatically.</p>
+            </article>
+          </div>
+        </div>
+      </section>
     </main>
   )
 }
@@ -530,6 +561,7 @@ export function ColossiansStudySectionPage({ content }: Props) {
               {!auth.checked && <p className="study-detail-copy">Checking sign-in status...</p>}
               {auth.checked && !auth.authenticated && (
                 <div className="study-auth-box">
+                  <p className="study-auth-why">Create a free account to save notes for this lesson. No email needed — just a username and password.</p>
                   <label htmlFor="study-username">Username</label>
                   <input id="study-username" type="text" value={usernameInput} onChange={e => setUsernameInput(e.target.value)} placeholder="yourname" autoComplete="username" />
                   <label htmlFor="study-password">Password</label>