From 69caff52264419451617dc6a21e1d4d96213f22f Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 31 May 2026 10:49:14 +0530
Subject: [PATCH] fix(about): remove dark manifesto band, flow What We Believe
 on cream paper
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The dark #1f1b16 full-bleed section broke the continuous letter feel.
Replaced with a standard letter article on var(--paper):
- tia-subhead 'What we believe' (same as other subheadings)
- tia-pull.accent for the opening line
- Paragraphs in tia-col as usual
- Creed list (01-06) retains mono numbers in marigold + ink body text,
  hairline borders — now reads as part of the letter, not a separate block
Removed all .tia-mani* CSS rules and --mani-bg/fg tokens.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/(marketing)/about/page.tsx | 92 ++++++++++--------------------
 1 file changed, 31 insertions(+), 61 deletions(-)

diff --git a/src/app/(marketing)/about/page.tsx b/src/app/(marketing)/about/page.tsx
index c426dec..c5b7c3f 100644
--- a/src/app/(marketing)/about/page.tsx
+++ b/src/app/(marketing)/about/page.tsx
@@ -37,8 +37,6 @@ const CSS = `
   --rule-soft:  #e8ded0;
   --accent:     #c98a2b;
   --accent-2:   #b8503e;
-  --mani-bg:    #1f1b16;
-  --mani-fg:    #f3ead9;
   --fd: var(--font-fraunces, Georgia, serif);
   --fb: var(--font-newsreader, Georgia, serif);
   --fl: var(--font-jetbrains, ui-monospace, monospace);
@@ -190,33 +188,7 @@ const CSS = `
   font-family: var(--fh); font-size: 1.3em;
 }
 
-/* ── manifesto (dark section) ── */
-.tia-mani {
-  background: var(--mani-bg); color: var(--mani-fg);
-  position: relative; z-index: 2;
-  margin: clamp(56px,9vw,104px) 0 0;
-  padding: clamp(56px,9vw,104px) clamp(20px,5vw,56px);
-}
-.tia-mani-inner { max-width: 920px; margin: 0 auto; }
-.tia-mani .me {
-  font-family: var(--fl); font-size: 11px; letter-spacing: .24em;
-  text-transform: uppercase; color: rgba(201,138,43,.9);
-  display: block; margin: 0 0 28px;
-}
-.tia-mani .mi {
-  font-family: var(--fd); font-weight: var(--dw);
-  font-size: clamp(1.7rem,4vw,2.6rem); line-height: 1.18;
-  letter-spacing: var(--ds); margin: 0 0 .6em; font-style: italic;
-  color: var(--mani-fg); text-wrap: balance;
-}
-.tia-mani .mi em { color: rgba(201,138,43,.9); }
-.tia-mani .ms {
-  font-size: 1.15rem; color: rgba(243,234,217,.72);
-  max-width: 38rem; margin: 0 0 44px;
-}
-.tia-mani .ms strong { color: var(--mani-fg); font-weight: 600; }
-
-/* creed list */
+/* creed list — same cream paper as rest of letter */
 .tia-creed {
   list-style: none; max-width: var(--measure);
   margin: 1.7em auto; padding: 0;
@@ -233,12 +205,6 @@ const CSS = `
 .tia-creed .t {
   font-family: var(--fb); font-size: 1.12rem; line-height: 1.5; color: var(--ink);
 }
-.tia-mani .mf {
-  margin: 44px 0 0; font-size: 1.18rem;
-  color: rgba(243,234,217,.86); max-width: 40rem;
-}
-.tia-mani .mf strong { color: var(--mani-fg); font-weight: 600; }
-
 /* ── closing / signature ── */
 .tia-closing {
   max-width: var(--measure); margin: 2.6em auto 0; text-align: center;
@@ -499,38 +465,42 @@ export default function AboutPage() {
           </div>
         </article>
 
-        {/* ══ WHAT WE BELIEVE — dark manifesto section ════════════ */}
-        <section className="tia-mani" id="believe">
-          <div className="tia-mani-inner">
-            <span className="me tia-reveal">What we believe</span>
-            <p className="mi tia-reveal">
-              The first years of your child&apos;s life are not{" "}
-              <em>a metric to optimise</em>. They are irreplaceable.
-            </p>
-            <p className="ms tia-reveal">
+        {/* ══ WHAT WE BELIEVE — same cream paper, continuous letter ═ */}
+        <article className="tia-body" id="believe">
+          <h2 className="tia-subhead tia-reveal">What we believe</h2>
+
+          <p className="tia-pull accent tia-reveal">
+            The first years of your child&apos;s life are not a metric to optimise.
+            They are irreplaceable.
+          </p>
+
+          <div className="tia-col">
+            <p className="tia-reveal">
               No app can give you back a missed moment. No notification can replace being
               present when your baby discovers their hands, says a first word, or falls asleep
               on your shoulder.
             </p>
-            <p className="ms tia-reveal">
-              <strong>Your job is to be present. Ours is to make the rest a little easier.</strong>
-            </p>
-
-            <ul className="tia-creed tia-reveal">
-              {CREED.map((item, i) => (
-                <li key={i}>
-                  <span className="n">0{i + 1}</span>
-                  <span className="t">{item}</span>
-                </li>
-              ))}
-            </ul>
-
-            <p className="mf tia-reveal">
-              Every choice we make is guided by the same principle:{" "}
-              <strong>your family&apos;s story belongs to your family.</strong>
+            <p className="tia-strong tia-reveal">
+              Your job is to be present. Ours is to make the rest a little easier.
             </p>
           </div>
-        </section>
+
+          <ul className="tia-creed tia-reveal">
+            {CREED.map((item, i) => (
+              <li key={i}>
+                <span className="n">0{i + 1}</span>
+                <span className="t">{item}</span>
+              </li>
+            ))}
+          </ul>
+
+          <div className="tia-col">
+            <p className="tia-strong tia-reveal">
+              Every choice we make is guided by the same principle: your family&apos;s story
+              belongs to your family.
+            </p>
+          </div>
+        </article>
 
         {/* ══ TO THE PARENT + SIGNATURE ════════════════════════════ */}
         <article className="tia-body">