body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        #map, #ar-view {
            height: 400px;
            width: 100%;
            border-radius: 8px;
        }
        .insight-box {
            background: linear-gradient(to right, #e6f3fa, #d1e8f4);
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
         /* Specific style for Recommendation boxes */
         .recommendation-box {
             background: linear-gradient(to right, #d1f4e8, #b9edd6); /* Light green gradient */
             padding: 20px;
             border-radius: 8px;
             margin-bottom: 20px;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
         .recommendation-box h3 {
             font-size: 1.25rem; /* Larger title for recommendations */
             font-weight: bold;
             margin-bottom: 10px;
             color: #047857; /* Darker green */
         }
         .recommendation-box p {
             color: #14532d; /* Even darker green text */
             line-height: 1.6;
         }


        .animate-fade-in {
            animation: fadeIn 1s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* Combine modal styles */
        .tour-modal, .category-selection-modal, .start-live-modal, .live-simulation-modal, .update-profile-modal, .client-presentation-modal, .feature-details-modal  {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
         .tour-modal.hidden, .category-selection-modal.hidden, .start-live-modal.hidden, .live-simulation-modal.hidden, .update-profile-modal.hidden, .client-presentation-modal.hidden, .feature-details-modal.hidden {
            display: none;
        }
        /* Combine modal content styles */
        .tour-content, .category-content, .start-live-content, .live-simulation-content, .update-profile-content, .client-presentation-content , .feature-details-content{
            background: white;
            padding: 30px; /* Increased padding */
            border-radius: 8px;
            max-width: 600px; /* Increased max-width */
            text-align: center;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            transform: scale(0.95); /* Initial scale for animation */
            opacity: 0; /* Initial opacity for animation */
            animation: modalFadeIn 0.3s ease-out forwards;
             z-index: 1001; /* Ensure content is above the modal background */
             overflow-y: auto; /* Allow scrolling if content is too tall */
             max-height: 90%; /* Limit height to prevent overflow */
        }
		
		
		
		
		
		.feature-details-content {
    max-width: 500px; /* Make it slightly smaller */
    text-align: left; /* Align content text left */
}
.feature-details-content h2 {
    color: #7b34dd; /* Purple from Tailwind 600 */
    margin-bottom: 1rem;
    text-align: center; /* Center the title */
}
 .feature-details-description {
     line-height: 1.6;
     color: #333; /* Standard text color */
 }
  .feature-details-content p.text-sm.text-gray-500.mt-4 {
      text-align: center; /* Ensure the "Full access" text is centered */
  }

/* Responsive adjustments for the new modal */
 @media (max-width: 768px) { /* Adjusted breakpoint to md */
     .feature-details-content {
         padding: 20px;
         max-width: 95%;
     }
     .feature-details-content h2 {
         font-size: 1.3rem;
     }
     .feature-details-description {
          font-size: 0.95rem;
     }
      .feature-details-content .flex.justify-center {
          flex-direction: column; /* Stack button */
      }
      .feature-details-content button {
           width: 100%; /* Make button full width */
      }
 }
		
		
		
		
		
		
		
		
		
		
		
		
		
		
         .category-content {
             max-width: 800px; /* Wider for category questions */
         }
         .start-live-content, .update-profile-content {
             max-width: 600px; /* Keep consistent or adjust */
             text-align: left; /* Align form left */
         }
         .live-simulation-content {
              max-width: 500px;
              text-align: center;
         }
          .client-presentation-content {
               max-width: 700px; /* Wider for reports */
               background: #f9f9f9; /* Lighter background for report feel */
          }


        @keyframes modalFadeIn {
            to { transform: scale(1); opacity: 1; }
        }

        .tab-button:hover {
            transform: scale(1.05); /* Slightly less aggressive hover */
            transition: transform 0.2s ease; /* Added ease */
        }
        .form-input:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 5px rgba(37, 99, 235, 0.5);
        }
        [data-tooltip] {
            position: relative;
        }
        [data-tooltip]:hover:after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: white;
            padding: 5px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 10;
        }

        /* Category Selection Specific Styles - AI Theme Applied to specific modals */

        /* Apply dark overlay and pseudo-elements to AI-themed modals */
        .category-selection-modal, .update-profile-modal {
            background: rgba(10, 10, 46, 0.85); /* Dark background with slight transparency */
             /* Add some subtle background elements */
             overflow: hidden; /* Hide elements outside the modal area */
        }

         /* Pseudo-elements for background techy lines/dots - Applied to AI-themed modals */
         .category-selection-modal::before,
         .category-selection-modal::after,
         .update-profile-modal::before,
         .update-profile-modal::after {
             content: '';
             position: absolute;
             background: rgba(0, 255, 255, 0.05); /* Very subtle cyan */
             z-index: 1000; /* Between overlay and content */
         }
         .category-selection-modal::before, .update-profile-modal::before { /* Example: Diagonal line */
             top: 10%;
             left: 5%;
             width: 80%;
             height: 1px;
             transform: rotate(5deg);
             box-shadow: 0 0 5px rgba(0, 255, 255, 0.1);
         }
          .category-selection-modal::after, .update-profile-modal::after { /* Example: Another diagonal line */
             bottom: 10%;
             right: 5%;
             width: 80%;
             height: 1px;
             transform: rotate(-5deg);
              box-shadow: 0 0 5px rgba(0, 255, 255, 0.1);
          }


        /* Modal Content Box - AI Theme Applied to specific content areas */
        .category-selection-modal .category-content,
        .update-profile-modal .update-profile-content {
            background: rgba(10, 10, 46, 0.9); /* Dark background with slight transparency */
            padding: 35px; /* Increased padding */
            border-radius: 8px;
             /* Max-width is handled by the general .tour-content etc rule */
            text-align: center; /* Center text for main message, left for form */
            border: 2px solid #0ff; /* Cyan border */
            box-shadow: 0 0 40px 15px rgba(0, 255, 255, 0.7); /* Stronger glow */
             /* Animation handled by the general .tour-content etc rule */
             z-index: 1001; /* Ensure content is above background elements */
             /* Overflow and max-height handled by general rule */
             color: rgba(0, 255, 255, 0.9); /* Default text color for content */
             position: relative; /* Needed for z-index and potentially for internal elements if added */
             backdrop-filter: blur(5px); /* Subtle blur behind content */
             -webkit-backdrop-filter: blur(5px); /* For Safari support */
        }
         /* Ensure text alignment is left for form sections within AI modals */
         .category-selection-modal .category-questions,
         .category-selection-modal .auth-fields,
         .update-profile-modal .update-profile-questions,
         .update-profile-modal .update-profile-content > form > div, /* Target form divs */
         .update-profile-modal .update-profile-content { /* Target the content div itself */
              text-align: left;
         }


         /* Heading Styles within AI Modals */
         .category-selection-modal .category-content h2,
         .update-profile-modal .update-profile-content h2 {
             font-size: 2em; /* Larger title */
             color: #3fff; /* Brighter cyan for emphasis */
             text-shadow: 0 0 15px rgba(64, 255, 255, 0.8); /* Title glow */
             margin-top: 0;
             margin-bottom: 15px;
             font-weight: bold;
             letter-spacing: 0.5px;
             text-align: center; /* Center the main title */
         }
         .category-selection-modal .category-content h2 span {
              display: block; /* Break "Test Drive" like effect */
              font-size: 0.7em;
              font-weight: normal;
              color: #0ff;
              margin-top: 5px;
         }

         /* Paragraph Styles within AI Modals */
         .category-selection-modal .category-content p,
         .update-profile-modal .update-profile-content p {
              font-size: 1.1em; /* Slightly larger paragraph */
              color: rgba(0, 255, 255, 0.9); /* Brighter cyan */
              margin-bottom: 30px;
              line-height: 1.5;
         }


         /* Category Buttons within AI Modals */
         .category-selection-modal .category-button,
         .update-profile-modal .category-button {
             flex: 1; /* Existing flex property */
             margin: 0 10px;
             padding: 20px;
             border: 1px solid #0ff; /* Cyan border */
             background: rgba(0, 255, 255, 0.08); /* Semi-transparent cyan background */
             color: #0ff; /* Cyan text */
             font-weight: bold;
             border-radius: 4px; /* Slightly more rounded corners */
             box-shadow: 0 0 10px rgba(0, 255, 255, 0.4); /* Input glow */
             transition: all 0.3s ease;
             min-width: 180px;
              cursor: pointer;
              /* Override Tailwind colors */
              --tw-bg-opacity: 0 !important; /* Force Tailwind background transparency */
              --tw-text-opacity: 1 !important; /* Force Tailwind text opacity */
         }
          /* Category Button Headings within AI Modals */
          .category-selection-modal .category-button h3,
          .update-profile-modal .category-button h3 {
               font-size: 1.5rem;
               margin-bottom: 10px;
               color: #3fff; /* Brighter cyan for button headings */
          }
           /* Category Button Paragraphs within AI Modals */
          .category-selection-modal .category-button p,
          .update-profile-modal .category-button p {
               font-size: 1rem;
               color: rgba(0, 255, 255, 0.7); /* Slightly less bright text */
          }

         /* Category Button Hover within AI Modals */
         .category-selection-modal .category-button:hover,
         .update-profile-modal .category-button:hover {
             border-color: #3fff; /* Brighter cyan on hover */
             box-shadow: 0 0 28px rgba(0, 255, 255, 1), inset 0 0 10px rgba(0, 255, 255, 0.5); /* Stronger glow + inner glow */
             background-color: transparent; /* Transparent background on hover */
              transform: translateY(-5px);
              color: #0ff; /* Ensure text remains cyan on hover */
         }

         /* Category Questions Section within AI Modals */
         .category-selection-modal .category-questions,
         .update-profile-modal .category-questions {
             margin-top: 30px;
             padding-top: 20px;
             border-top: 1px solid rgba(0, 255, 255, 0.3); /* Cyan border top */
             text-align: left;
             color: rgba(0, 255, 255, 0.9); /* Cyan text */
         }
          /* Category Questions Heading within AI Modals */
          .category-selection-modal .category-questions h3,
          .update-profile-modal .category-questions h3 {
              font-size: 1.3rem; /* Slightly smaller h3 than main modal title */
              font-weight: bold;
              margin-bottom: 20px;
              color: #3fff; /* Brighter cyan */
              text-shadow: 0 0 8px rgba(64, 255, 255, 0.6); /* Subtle glow */
          }
           /* Category Questions Labels within AI Modals */
           .category-selection-modal .category-questions label,
           .update-profile-modal .category-questions label {
               display: block;
               margin-bottom: 8px;
               font-weight: bold;
               color: rgba(0, 255, 255, 0.9); /* Cyan text */
           }
           /* Form Inputs (Input/Select) within AI Modals - More specific selector to avoid affecting other form inputs */
           .category-selection-modal .form-input, /* Targets inputs/selects with class form-input within this modal */
           .update-profile-modal .form-input {
               width: 100%;
               padding: 10px;
               border: 1px solid #0ff; /* Cyan border */
               background: rgba(0, 255, 255, 0.08); /* Semi-transparent background */
               color: #0ff; /* Cyan text */
               border-radius: 4px;
               box-sizing: border-box;
               outline: none; /* Remove default outline */
               transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Smooth transition */
           }
            /* Form Input Focus within AI Modals */
            .category-selection-modal .form-input:focus,
            .update-profile-modal .form-input:focus {
                border-color: #3fff; /* Brighter cyan on focus */
                box-shadow: 0 0 15px rgba(0, 255, 255, 0.6); /* Input glow on focus */
                background-color: rgba(0, 255, 255, 0.15); /* Slight background change on focus */
           }
            /* Placeholder Text within AI Modals */
           .category-selection-modal .form-input::placeholder,
           .update-profile-modal .form-input::placeholder {
               color: rgba(0, 255, 255, 0.6); /* Placeholder text color */
           }
            /* Individual Question Divs within AI Modals */
            .category-selection-modal .category-questions > div,
            .update-profile-modal .category-questions > div {
                margin-bottom: 20px;
            }

            /* Auth Fields (Email/Password) within AI Modals - Specific to signup/login views */
            .category-selection-modal .auth-fields label {
                 color: rgba(0, 255, 255, 0.9);
                 font-weight: bold;
                 display: block;
                 margin-bottom: 8px;
            }
             .category-selection-modal .auth-fields input {
                 width: 100%;
                 padding: 10px;
                 border: 1px solid #0ff;
                 background: rgba(0, 255, 255, 0.08);
                 color: #0ff;
                 border-radius: 4px;
                 box-sizing: border-box;
                 outline: none;
                 transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
             }
              .category-selection-modal .auth-fields input:focus {
                 border-color: #3fff;
                 box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
                 background-color: rgba(0, 255, 255, 0.15);
              }
              .category-selection-modal .auth-fields input::placeholder {
                  color: rgba(0, 255, 255, 0.6);
              }


           /* Primary Button Style (Start Free Trial) within AI Modals */
           .category-selection-modal #start-free-trial {
                padding: 14px 28px; /* Larger padding */
               font-size: 1.2em; /* Larger font */
               font-weight: bold;
               color: #0a0a2e; /* Dark text */
               background: #0ff; /* Cyan background */
               border: 2px solid #0ff; /* Cyan border */
               box-shadow: 0 0 18px rgba(0, 255, 255, 0.8); /* Button glow */
               cursor: pointer;
               transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; /* Smooth transitions */
               text-transform: uppercase;
               letter-spacing: 1.5px; /* More letter spacing */
               border-radius: 4px;
                /* Override Tailwind colors */
               --tw-bg-opacity: 1 !important;
               --tw-text-opacity: 1 !important;
               margin-top: 20px;
               width: 100%; /* Make buttons full width */
           }
           /* Primary Button Hover within AI Modals */
           .category-selection-modal #start-free-trial:hover {
               background-color: transparent; /* Transparent background on hover */
               color: #0ff; /* Cyan text on hover */
               box-shadow: 0 0 28px rgba(0, 255, 255, 1), inset 0 0 10px rgba(0, 255, 255, 0.5); /* Stronger glow + inner glow on hover */
                border-color: #0ff;
           }


            /* Secondary Button Style (Login, Update, Cancel) within AI Modals */
            .category-selection-modal #login-button,
            .category-selection-modal #update-profile-button, /* Button hidden in signup view initially */
            .update-profile-modal #submit-update-profile, /* Submit button in update modal */
            .update-profile-modal #cancel-update-profile { /* Cancel button in update modal */
                background: rgba(0, 255, 255, 0.15); /* Slightly different style */
                color: #0ff;
                 border: 2px solid rgba(0, 255, 255, 0.5); /* Subtle border */
                 box-shadow: none; /* No glow by default */
                letter-spacing: 1px;
                padding: 10px 20px; /* Smaller padding */
                font-size: 1.1em;
                font-weight: bold;
                cursor: pointer;
                 transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, border-color 0.3s ease;
                 border-radius: 4px;
                 --tw-bg-opacity: 1 !important;
                --tw-text-opacity: 1 !important;
                 margin-top: 20px;
                width: 100%; /* Make buttons full width */
            }

            /* Secondary Button Hover within AI Modals */
            .category-selection-modal #login-button:hover,
            .category-selection-modal #update-profile-button:hover,
            .update-profile-modal #submit-update-profile:hover,
            .update-profile-modal #cancel-update-profile:hover {
                 background-color: rgba(0, 255, 255, 0.3); /* More opaque on hover */
                 color: #0ff;
                 border-color: #0ff;
                 box-shadow: 0 0 15px rgba(0, 255, 255, 0.6); /* Subtle glow on hover */
            }

             /* Adjust specific buttons in update modal to align/have spacing */
             .update-profile-modal #submit-update-profile {
                 width: auto; /* Don't force full width if next button is inline */
             }
              .update-profile-modal #cancel-update-profile {
                  width: auto;
                   margin-left: 1rem; /* Add space to the left */
              }
              /* If the container uses flex/grid, the width:auto will allow them to sit side-by-side */


           /* Modal Toggler Links within AI Modals */
            .category-selection-modal .modal-toggle-link,
             .update-profile-modal .modal-toggle-link { /* Added update modal selector - though update modal has no links */
                 display: block;
                 margin-top: 15px;
                 color: #0ff;
                 text-decoration: underline;
                 cursor: pointer;
                 font-size: 0.9em;
                 transition: color 0.2s ease;
                 text-align: center; /* Center the links */
            }
             .category-selection-modal .modal-toggle-link:hover,
             .update-profile-modal .modal-toggle-link:hover {
                 color: #3fff;
            }

            /* Error Message within AI Modals */
            .category-selection-modal .error-message,
            .update-profile-modal .error-message {
                color: #ff6b6b; /* Light red */
                 background-color: rgba(255, 107, 107, 0.1); /* Subtle red background */
                 border-color: rgba(255, 107, 107, 0.4); /* Subtle red border */
                margin-top: 15px;
                font-size: 0.9em;
                padding: 10px;
                border-radius: 4px;
                text-align: left;
            }


            /* Responsive adjustments for the modal */
            @media (max-width: 768px) { /* Adjusted breakpoint to md */
               .category-selection-modal .category-content,
                .update-profile-modal .update-profile-content {
                   padding: 25px;
                   max-width: 95%;
               }
               .category-selection-modal .category-content h2,
               .update-profile-modal .update-profile-content h2 {
                   font-size: 1.6em;
               }
                .category-selection-modal .category-content h2 span {
                    font-size: 0.65em;
                }
               .category-selection-modal .category-content p,
                .update-profile-modal .update-profile-content p {
                   font-size: 1em;
               }
               .category-selection-modal .category-buttons-container,
               .update-profile-modal .category-buttons-container {
                    flex-direction: column; /* Stack buttons vertically */
                    gap: 15px; /* Smaller gap */
               }
                .category-selection-modal .category-button,
                .update-profile-modal .category-button {
                    margin: 0; /* Remove horizontal margin */
                     padding: 15px; /* Adjust button padding */
                     min-width: auto; /* Remove min-width constraint */
                }
                .category-selection-modal .form-input,
                .update-profile-modal .form-input {
                    padding: 8px;
                }
                .category-selection-modal #start-free-trial,
                .category-selection-modal #login-button,
                .category-selection-modal #update-profile-button,
                 .update-profile-modal #submit-update-profile,
                 .update-profile-modal #cancel-update-profile {
                    padding: 10px 20px;
                    font-size: 1em;
                    letter-spacing: 1px;
                    width: 100%; /* Make buttons full width */
                    margin-left: 0; /* Remove margin for buttons */
                    margin-top: 10px; /* Add some space if they stack */
                }
                 /* Ensure submit and cancel stack properly on small screens */
                 .update-profile-modal #submit-update-profile,
                 .update-profile-modal #cancel-update-profile {
                     width: 100%;
                      margin-left: 0;
                 }
                 /* Wrap buttons if needed */
                 .update-profile-modal .tour-content .flex.justify-center.gap-4 {
                      flex-direction: column;
                      gap: 10px;
                 }
            }


        /* Highlight class for tour */
        .tour-highlight {
             border: 3px dashed orange; /* Example highlight style */
             box-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
             transition: border 0.3s ease, box-shadow 0.3s ease;
             z-index: 999; /* Ensure highlight is above normal content */
             position: relative; /* Needed for z-index to work */
        }
         /* Add styles for the chatbot message bubble */
         #chatbot-history > div {
             display: flex;
             margin-bottom: 4px; /* Space between messages */
         }
          #chatbot-history > div:last-child {
             margin-bottom: 0;
          }
         #chatbot-history > div.text-left {
             justify-content: flex-start;
         }
         #chatbot-history > div.text-right {
             justify-content: flex-end;
         }
          #chatbot-history span { /* Style the message bubbles */
               max-width: 80%; /* Limit bubble width */
               word-wrap: break-word; /* Break long words */
               white-space: pre-wrap; /* Allow wrapping and respect line breaks */
          }


         /* Floating Continue Message */
         #continue-tour-message {
             position: fixed;
             bottom: 20px;
             left: 50%;
             transform: translateX(-50%);
             background: white;
             padding: 15px 20px;
             border-radius: 8px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
             z-index: 1000; /* Above most content */
             display: flex;
             align-items: center;
             gap: 15px;
             animation: slideUp 0.5s ease-out forwards;
              min-width: 250px; /* Ensure minimum width */
              text-align: center;
         }
          #continue-tour-message.hidden {
              display: none;
          }
         @keyframes slideUp {
             from { opacity: 0; transform: translate(-50%, 50px); }
             to { opacity: 1; transform: translate(-50%, 0); }
         }
          #continue-tour-button {
              background: #2563eb;
              color: white;
              padding: 8px 15px;
              border-radius: 4px;
              cursor: pointer;
              transition: background-color 0.2s ease;
          }
          #continue-tour-button:hover {
              background: #1d4ed8;
          }
           #dismiss-tour-message {
              background: none;
              border: none;
              font-size: 1.2rem;
              cursor: pointer;
              color: #555;
              padding: 0;
              margin-left: 10px;
           }
           #dismiss-tour-message:hover {
               color: #333;
           }

           /* Mock Feature Styles */
           .mock-feature {
               background-color: #f0f9ff; /* Light blue */
               border: 1px dashed #3b82f6; /* Blue border */
               padding: 20px;
               margin-top: 20px;
               margin-bottom: 20px; /* Add space below */
               border-radius: 8px;
               display: none; /* Hidden by default */
               text-align: left;
           }
            .mock-feature h3 {
                margin-top: 0;
                 color: #1e40af; /* Darker blue */
            }
            .mock-feature.active {
                display: block;
            }

            .mock-feature .slider-container {
                margin-top: 15px;
                 margin-bottom: 15px;
            }
             .mock-feature label {
                 display: inline-block;
                 margin-bottom: 5px;
                 font-weight: normal; /* Less bold than question labels */
                 color: #333; /* Standard text color */
             }
             .mock-feature input[type="range"] {
                 width: calc(100% - 150px); /* Adjust width to fit next to label and value */
                 vertical-align: middle; /* Align with text */
                 margin-left: 10px;
             }
              .mock-feature .value-display {
                  display: inline-block; /* Keep value display inline */
                  min-width: 40px; /* Give it some space */
                  text-align: right; /* Align value right */
                  vertical-align: middle; /* Align with slider/label */
                 font-weight: bold;
                 color: #059669; /* Green */
             }

            #simulation-chart, #team-deal-chart, #executive-portfolio-chart {
                height: 300px; /* Set a height for the chart */
                 margin-top: 20px;
                 /* Background white by default from Plotly */
            }

             /* Start Live Case Button Style */
             .start-live-case {
                 background: #10b981; /* Green to signify action */
                 color: white;
                 padding: 8px 15px; /* Adjust padding to fit header */
                 border-radius: 4px; /* Adjust border-radius */
                 font-weight: bold;
                 transition: background 0.2s ease;
                 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adjust shadow */
                 margin-bottom: 2px; /* Match other header buttons */
                 margin-right: 2px; /* Match other header buttons */
             }
            .start-live-case:hover {
                 background: #059669; /* Darker green on hover */
                 transform: scale(1.05); /* Keep transform */
             }
             /* Ensure start-live-case button also has mb/mr on small screens */
             @media (min-width: 768px) { /* md breakpoint */
                 .start-live-case {
                     margin-bottom: 0;
                     margin-right: 1rem; /* Add more space before nav */
                 }
             }

            /* Update Profile Button Style */
            .update-profile {
                background: #ff9800; /* Orange */
                color: white;
                padding: 8px 15px;
                border-radius: 4px;
                font-weight: bold;
                transition: background 0.2s ease;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                margin-bottom: 2px;
                margin-right: 2px;
            }
             .update-profile:hover {
                 background: #f57c00; /* Darker orange */
                 transform: scale(1.05);
             }
             @media (min-width: 768px) { /* md breakpoint */
                 .update-profile {
                     margin-bottom: 0;
                     margin-right: 1rem;
                 }
             }

            /* Styling for Lead Gen Dropdown button */