enh: restructure guide section for improved user navigation and clarity, adding step-by-step instructions with enhanced styling

Author: noamjgal

css/styles.css

@@ -1598,4 +1598,76 @@ input:checked + .toggle-slider:hover {
 /* Specific styling for about button to take remaining space */
 .bottom-button.about-button {
     flex: 1;
+}
+
+/* Guide Steps Styling */
+.guide-section {
+    background: rgba(59, 130, 246, 0.05);
+    border: 1px solid rgba(59, 130, 246, 0.15);
+    border-radius: var(--radius-lg);
+    padding: var(--space-xl);
+    margin-bottom: var(--space-xl);
+}
+
+.guide-section h3 {
+    color: var(--accent-blue) !important;
+    margin-bottom: var(--space-xl);
+    font-size: 18px;
+    font-weight: 700;
+    text-align: center;
+}
+
+.guide-step {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-lg);
+    margin-bottom: var(--space-xl);
+    padding: var(--space-lg);
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: var(--radius-md);
+    border-left: 3px solid var(--accent-blue);
+    transition: all 0.2s ease;
+}
+
+.guide-step:hover {
+    background: rgba(255, 255, 255, 0.06);
+    transform: translateX(2px);
+}
+
+.guide-step:last-child {
+    margin-bottom: 0;
+}
+
+.step-number {
+    background: var(--accent-blue);
+    color: white;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 14px;
+    flex-shrink: 0;
+    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+}
+
+.step-content {
+    flex: 1;
+}
+
+.step-title {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--text-accent);
+    margin-bottom: var(--space-xs);
+    display: block;
+}
+
+.step-description {
+    font-size: 13px;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    margin: 0;
 } 

index.html

@@ -297,17 +297,48 @@ <h2>How to Use This Tool</h2>
                     <button class="modal-close" id="closeMethodsModal">&times;</button>
                 </div>
                 <div class="modal-body">
-                    <div class="about-section">
+                    <div class="about-section guide-section">
                         <h3>Getting Started</h3>
-                        <p><strong>1. Set Accessibility Distance:</strong> Use accessibility range buttons (100m-300m) to set how far residents can reasonably travel to reach a bomb shelter during an emergency.</p>
 
-                        <p><strong>2. View Current Coverage:</strong> See which areas are currently served by turning on the Accessibility Grid.</p>
+                        <div class="guide-step">
+                            <div class="step-number">1</div>
+                            <div class="step-content">
+                                <span class="step-title">Set Accessibility Distance</span>
+                                <p class="step-description">Use accessibility range buttons (100m-300m) to set how far residents can travel to reach a bomb shelter during an emergency.</p>
+                            </div>
+                        </div>
 
-                        <p><strong>3. Add New Shelters:</strong> Use slider to add strategically placed new shelters that maximize coverage for underserved areas.</p>
-
-                        <p><strong>4. Click Coverage:</strong> Click on the coverage window to see a dynamic narrative reviewing coverage for existing and added shelters. </p>
-
-                        <p><strong>5. Explore Data:</strong> Click "Data Layers" to show new information like community requests for shelters and change the display layers </p>
+                        <div class="guide-step">
+                            <div class="step-number">2</div>
+                            <div class="step-content">
+                                <span class="step-title">View Current Coverage</span>
+                                <p class="step-description">See current coverage by turning on Accessibility Grid.</p>
+                            </div>
+                        </div>
+                        
+                        <div class="guide-step">
+                            <div class="step-number">3</div>
+                            <div class="step-content">
+                                <span class="step-title">Add New Shelters</span>
+                                <p class="step-description">Use slider to add strategically placed new shelters.</p>
+                            </div>
+                        </div>
+                        
+                        <div class="guide-step">
+                            <div class="step-number">4</div>
+                            <div class="step-content">
+                                <span class="step-title">Click Coverage</span>
+                                <p class="step-description">Click on coverage window to review accessiblity statistics.</p>
+                            </div>
+                        </div>
+                        
+                        <div class="guide-step">
+                            <div class="step-number">5</div>
+                            <div class="step-content">
+                                <span class="step-title">Explore Data</span>
+                                <p class="step-description">Click "Data Layers" to show new information like community requests for shelters and change display layers.</p>
+                            </div>
+                        </div>
                     </div>
 
                     <div class="about-section">