Enhance customization options for tiffin delivery and update related styles

index.html

@@ -31,7 +31,7 @@
         <div class="hero-copy">
           <p class="eyebrow"><span class="pulse"></span> Food for the body in progress</p>
           <h1>Eat with<br /><em>intent.</em></h1>
-          <p class="hero-description">Goal-oriented meals, cooked fresh and delivered on your frequency. No noise. Just the right fuel for wherever you are going.</p>
+          <p class="hero-description">Goal-oriented meals, cooked fresh and timed for your office or college day. No noise. Just the right fuel for wherever you are going.</p>
           <a class="button button-primary" href="#menu">Find your fuel <span>↓</span></a>
         </div>
         <div class="hero-orbit" aria-hidden="true">
@@ -55,6 +55,22 @@
         <div class="marquee-track"><span>CALCULATED FLAVOR</span><b>✳</b><span>FRESH BY DESIGN</span><b>✳</b><span>YOUR GOAL. OUR CRAFT.</span><b>✳</b><span>CALCULATED FLAVOR</span><b>✳</b></div>
       </section>
 
+      <section class="schedule-callout" aria-labelledby="schedule-heading">
+        <div class="schedule-callout-copy">
+          <p class="eyebrow"><span class="pulse"></span> Built for the day ahead</p>
+          <h2 id="schedule-heading">Not home at<br /><em>lunchtime?</em></h2>
+          <p>Get your tiffin before you leave, pack it for the office or college, and eat fresh when your schedule says.</p>
+          <a class="text-link" href="pricing.html?mode=balanced">Set your arrival time <span>↗</span></a>
+        </div>
+        <div class="schedule-flow" aria-label="How scheduled delivery works">
+          <div class="schedule-step"><span>01</span><strong>Choose</strong><small>Your meal plan</small></div>
+          <span class="schedule-arrow">→</span>
+          <div class="schedule-step"><span>02</span><strong>Receive</strong><small>Before you head out</small></div>
+          <span class="schedule-arrow">→</span>
+          <div class="schedule-step"><span>03</span><strong>Pack & go</strong><small>Fresh food, your timing</small></div>
+        </div>
+      </section>
+
       <section class="menu-section" id="menu">
         <div class="section-intro">
           <p class="eyebrow">02 / Choose your direction</p>
@@ -87,18 +103,19 @@
 
       <section class="method-section" id="method">
         <div class="method-stamp">HOW IT<br />WORKS <span>↘</span></div>
-        <div class="method-copy"><p class="eyebrow">03 / The tiffin protocol</p><h2>Small box.<br /><em>Big energy.</em></h2><p>We turn nutrition science into food you look forward to. Tell us the goal, choose your rhythm, and we will handle the rest.</p><a class="text-link" href="#contact">See the protocol <span>↗</span></a></div>
-        <div class="steps"><div class="step"><span>01</span><h3>Choose your goal</h3><p>Tell us what you are building towards.</p></div><div class="step"><span>02</span><h3>Set your frequency</h3><p>Daily, weekly, or whenever you need a reset.</p></div><div class="step"><span>03</span><h3>We do the cooking</h3><p>Fresh food, delivered to your door.</p></div></div>
+        <div class="method-copy"><p class="eyebrow">03 / The tiffin protocol</p><h2>Your day.<br /><em>Your tiffin.</em></h2><p>Customize your meals and choose a delivery window that works around your lectures, classes, meetings, and commute. We cook fresh so your tiffin is ready when you are.</p><a class="text-link" href="pricing.html?mode=balanced">Customize your tiffin <span>↗</span></a></div>
+        <div class="steps"><div class="step"><span>01</span><h3>Choose your goal</h3><p>Pick the fuel that fits your body and routine.</p></div><div class="step"><span>02</span><h3>Set your timing</h3><p>Choose an office or college delivery window.</p></div><div class="step"><span>03</span><h3>Make it yours</h3><p>Share preferences and we will handle the cooking.</p></div></div>
       </section>
 
       <section class="contact-section" id="contact">
         <p class="eyebrow">04 / Ready when you are</p>
         <h2>Make your next<br /><em>meal count.</em></h2>
-        <a class="button button-light" href="mailto:hello@thetiffinfood.com">Start your order <span>↗</span></a>
+        <p class="contact-note">Fresh tiffins for busy desks, campuses, and everything in between.</p>
+        <a class="button button-light" href="pricing.html?mode=balanced">Build your tiffin <span>↗</span></a>
       </section>
     </main>
 
-    <footer><a class="brand" href="#"><span class="brand-mark"><i></i><i></i><i></i></span><span>THE TIFFIN<br /><b>FOOD</b></span></a><p>© 2024 The Tiffin Food / Made for your next.</p></footer>
+    <footer><a class="brand" href="#"><span class="brand-mark"><i></i><i></i><i></i></span><span>THE TIFFIN<br /><b>FOOD</b></span></a><p>© 2023 The Tiffin Food / Made for your next.</p></footer>
     <script src="script.js"></script>
   </body>
 </html>