/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* New Flat Color Palette - Light Mode */
    --bg-color-light: #FAF9F7; /* Very Light Warm Beige/Off-White - Good */
    --text-color-light: #4A443F; /* Dark Warm Gray/Brown - Good */
    --text-color-secondary-light: #6E665F; /* Slightly lighter than primary text - Good */
    --accent-primary-color-light: #D97D54; /* Muted Terracotta - Good */
    --accent-secondary-color-light: #A4A87A; /* Soft Olive Green - Good */
    --section-bg-color-light: #FFFFFF; /* Subtle off-white for light content blocks - Good */
    --border-color-light: #E0D8CC; /* Subtle border for light mode - Good */

    /* Semantic Variable Mapping - Light Mode */
    --bg-color: var(--bg-color-light);
    --text-color: var(--text-color-light);
    --text-color-secondary: var(--text-color-secondary-light);
    --accent-primary-color: var(--accent-primary-color-light);
    --accent-secondary-color: var(--accent-secondary-color-light);
    --section-bg-color: var(--section-bg-color-light);
    --border-color: var(--border-color-light);
    
    /* General UI variables (can be overridden in dark mode) */
    --header-bg-color: var(--bg-color);
    --header-text-color: var(--text-color);
    --footer-bg-color: var(--bg-color);
    --footer-text-color: var(--text-color-secondary);
    --card-bg-color: var(--section-bg-color);
    --card-border-color: var(--border-color); 
    --button-bg-color: var(--accent-primary-color);
    --button-text-color: #FFFFFF;
    --button-hover-bg-color: #C86A43; /* Darker Muted Terracotta */
    --form-input-bg-color: #FFFFFF; 
    --form-input-border-color: var(--border-color);
    --form-input-text-color: var(--text-color);
    --nav-link-color: var(--text-color);
    --nav-link-hover-bg-color: var(--accent-primary-color);
    --nav-link-hover-text-color: #FFFFFF;
    --svg-primary-accent-color: var(--accent-primary-color);
    --svg-secondary-accent-color: var(--accent-secondary-color);

    /* Standard Border Radius */
    --minimal-radius: 8px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 17px; /* Apple's typical base body font size */
    line-height: 1.65; 
    font-weight: 400; 
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}

p { /* Base paragraph styling */
    margin-bottom: 1.25rem; 
    font-size: 1em; /* Inherits from body, so 17px */
    line-height: 1.65; 
}

/* Container for consistent padding and centering */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

header {
    background-color: var(--header-bg-color);
    color: var(--header-text-color);
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color); 
}

nav {
    padding: 0 1rem; 
}

nav ul {
    list-style: none;
    text-align: center;
    padding: 0;
}

nav ul li {
    display: inline-block; 
    margin: 0 10px;
}

nav ul li a {
    color: var(--nav-link-color);
    text-decoration: none;
    padding: 0.6rem 1.1rem; 
    display: block; 
    border-radius: var(--minimal-radius); 
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: 500; 
    font-size: 0.9rem; /* Approx 15px */
}

nav ul li a:hover {
    background-color: var(--nav-link-hover-bg-color);
    color: var(--nav-link-hover-text-color);
}

#hero {
    background-color: var(--bg-color); 
    padding: 60px 20px; 
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    text-align: center;
}

#hero .neumorphic-card { 
    max-width: 750px; 
    width: 100%; 
    background-color: var(--section-bg-color); 
    padding: 2.5rem; 
    border-radius: var(--minimal-radius);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.03); /* Updated shadow */
}

#hero h1 {
    font-size: 3rem; /* Approx 51px */
    font-weight: 700; 
    line-height: 1.15; 
    margin-bottom: 1.25rem; 
    color: var(--text-color);
    text-shadow: none; /* Confirmed */
}

#hero p {
    font-size: 1.18rem; /* Approx 20px */
    line-height: 1.6;
    color: var(--text-color-secondary);
    margin-bottom: 0; 
}

section { 
    padding: 50px 20px; 
    text-align: center;
    background-color: var(--bg-color); 
}

section h2 { /* General Section Titles */
    font-size: 2.1rem; /* Approx 36px */
    font-weight: 600; 
    line-height: 1.25;
    margin-bottom: 1.75rem; 
    color: var(--text-color);
    text-shadow: none; /* Confirmed */
    text-align: center; /* Ensure all section titles are centered */
}

#features article h3 { /* Sub-headings for features */
    font-size: 1.4rem; /* Approx 24px */
    font-weight: 600; /* Semi-bold for more emphasis */
    line-height: 1.35;
    margin-bottom: 0.75rem; 
    margin-top: 0; 
    color: var(--text-color);
    text-shadow: none; /* Confirmed */
}

#features {
    /* Flex properties are moved to .features-container */
    /* text-align: center; is inherited from 'section' for the h2 */
    padding: 40px 20px; /* Specific padding for #features section */
    background-color: var(--bg-color); /* Redundant if same as general section, but kept as per instruction */
}

.features-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 2rem; /* Space between title and cards, similar to .insights-container */
}

#features article {
    flex: 1 1 300px; 
    min-width: 280px; 
    margin-bottom: 20px; 
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center; 
    background-color: var(--card-bg-color);
    padding: 1.5rem;
    border-radius: var(--minimal-radius);
    border: 1px solid var(--border-color); /* Confirmed border */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.03); /* Updated shadow */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
#features article:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 4px 10px rgba(0,0,0,0.04); /* Slightly enhanced hover shadow */
}

.feature-placeholder {
    width: 100%; 
    max-width: 260px; 
    height: 180px; 
    margin: 0 auto 1rem auto; 
    background-color: var(--bg-color); 
    border-radius: var(--minimal-radius); 
    overflow: hidden; 
    box-shadow: none; 
    border: 1px solid var(--border-color); 
}

.feature-placeholder svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: var(--text-color-secondary); 
}

.feature-placeholder-scan .svg-bg-stroke {
    stroke: var(--border-color); 
    fill: var(--bg-color); 
}
.feature-placeholder-scan .svg-accent-line {
    stroke: var(--svg-primary-accent-color); 
}
.feature-placeholder-scan .svg-text-line {
    stroke: var(--text-color-secondary); 
}

.feature-placeholder-details .svg-shape-1 {
    fill: var(--text-color-secondary);
}
.feature-placeholder-details .svg-shape-2 {
    fill: var(--svg-primary-accent-color);
}
.feature-placeholder-details .svg-shape-3 {
    fill: var(--svg-secondary-accent-color);
}

.feature-placeholder-gallery .svg-gallery-item {
    fill: var(--bg-color); 
    stroke: var(--border-color);
    stroke-width: 1; 
    rx: 6px; 
}
.feature-placeholder-gallery .svg-gallery-item:hover {
    fill: var(--section-bg-color); 
}

#features article p {
    color: var(--text-color-secondary);
    font-size: 0.95rem; /* Approx 16px */
    line-height: 1.6; 
    margin-top: 0.75rem; 
}

#features article img { 
    max-width: 100%;
    height: auto;
    border-radius: var(--minimal-radius); 
    margin-bottom: 1rem;
}

/* Interactive Insight Bubbles Section */
#interactive-insights {
    padding: 50px 20px; /* Matches other sections */
    text-align: center; /* Matches other sections */
    background-color: var(--bg-color); /* Matches other sections */
}

/* #interactive-insights h2 will inherit from section h2 styling */

.insights-container {
    display: flex;
    justify-content: center; /* Center bubbles, allow wrapping */
    flex-wrap: wrap;
    gap: 25px; /* Spacing between bubbles */
    margin-top: 2rem; /* Space from section title */
    padding: 0 10px; /* Ensure some padding on very small screens */
}

.insight-bubble {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px; /* Slightly more rounded for "bubbly" feel */
    padding: 1.75rem; /* Generous padding */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.03); /* Standard card shadow */
    flex: 1 1 290px; /* Responsive base size, allows 3-across then 2, then 1 */
    min-width: 280px; /* Minimum width before breaking */
    max-width: 380px; /* Maximum width to prevent bubbles from becoming too wide */
    text-align: left; /* Better for readability of details */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    outline: none; /* Remove default outline, custom focus style below */
}

.insight-bubble:hover {
    transform: translateY(-4px); /* Subtle lift */
    box-shadow: 0 3px 6px rgba(0,0,0,0.07), 0 5px 15px rgba(0,0,0,0.05); /* Enhanced hover shadow */
}

.insight-bubble:focus, /* For keyboard navigation */
.insight-bubble.active { /* For JS-toggled active state */
    border-color: var(--accent-primary-color); /* Highlight with accent color */
    box-shadow: 0 3px 6px rgba(0,0,0,0.07), 0 5px 15px rgba(0,0,0,0.05), 0 0 0 2px var(--accent-primary-color); /* Keep hover shadow + add focus ring */
    /* background-color: var(--section-bg-color); Slightly different bg when active if desired */
}


.insight-bubble h4 {
    font-size: 1.3rem; /* Slightly larger for bubble titles */
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.insight-detail {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, margin-top 0.4s ease-in-out;
    font-size: 0.95rem; /* Consistent with feature card text */
    color: var(--text-color-secondary);
    line-height: 1.6;
    margin-top: 0; /* No margin when hidden */
}

.insight-bubble.active .insight-detail {
    max-height: 200px; /* Adjust as needed for content */
    opacity: 1;
    margin-top: 1rem; /* Space between title and detail when expanded */
}

/* Dark Mode specific adjustments for shadows on insight bubbles if needed */
@media (prefers-color-scheme: dark) {
    .insight-bubble {
        /* Standard card shadow for dark mode is already applied via variables, this is for hover/active */
         box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.08); /* From existing dark card shadow */
    }
    .insight-bubble:hover {
        transform: translateY(-4px);
        box-shadow: 0 3px 6px rgba(0,0,0,0.12), 0 5px 15px rgba(0,0,0,0.1); /* Enhanced dark hover shadow */
    }

    .insight-bubble:focus,
    .insight-bubble.active {
        border-color: var(--accent-primary-color-dark); /* Dark mode accent */
        box-shadow: 0 3px 6px rgba(0,0,0,0.12), 0 5px 15px rgba(0,0,0,0.1), 0 0 0 2px var(--accent-primary-color-dark); /* Dark mode focus ring */
    }
}


#cta {
    background-color: var(--accent-secondary-color); 
    color: #FFFFFF; 
    padding: 50px 20px; 
    text-align: center;
}

#cta h2 { 
    margin-bottom: 1rem; 
    color: #FFFFFF; 
    text-shadow: none; /* Confirmed */
}
#cta p {
    color: #FFFFFF; 
    margin-bottom: 2rem; 
    font-size: 1.18rem; /* Approx 20px, match hero p */
    line-height: 1.6;
}

#cta button#joinBetaButton {
    background-color: var(--accent-primary-color); 
    color: #FFFFFF; 
    border: none;
    border-radius: var(--minimal-radius);
    padding: 16px 38px; 
    font-size: 1.1rem; /* Approx 18-19px */
    font-weight: 600; 
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
    text-shadow: none; /* Confirmed */
}

#cta button#joinBetaButton:hover {
    background-color: #C86A43; 
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07); /* Subtle hover shadow */
}

#cta button#joinBetaButton:active {
    background-color: #B75E3B; 
    transform: translateY(0px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Subtle active shadow */
}

#cta button#joinBetaButton:focus {
    outline: 2px solid var(--accent-primary-color-light); 
    outline-offset: 3px;
}

#about h2, #contact h2 { 
    margin-bottom: 1.5rem; 
    font-size: 2.2rem; 
    text-shadow: none; /* Confirmed */
}

#contact form {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--section-bg-color); 
    border-radius: var(--minimal-radius); 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.03); /* Updated shadow */
    border: 1px solid var(--border-color); /* Confirmed border */
}

#contact form div {
    margin-bottom: 1rem;
}

#contact form label {
    display: block;
    margin-bottom: 0.6rem; 
    color: var(--text-color);
    font-weight: 500; 
    font-size: 0.9rem; /* Approx 15px */
}

#contact form input[type="text"],
#contact form input[type="email"],
#contact form textarea {
    width: 100%;
    padding: 0.8rem 1rem; 
    background-color: var(--form-input-bg-color);
    border: 1px solid var(--form-input-border-color); 
    color: var(--form-input-text-color);
    border-radius: var(--minimal-radius); 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: none; 
    font-size: 1rem; /* Approx 17px */
}
#contact form input[type="text"]:focus,
#contact form input[type="email"]:focus,
#contact form textarea:focus {
    outline: none;
    border-color: var(--accent-primary-color); 
    box-shadow: 0 0 0 3px rgba(217, 125, 84, 0.25); 
}

#contact form textarea {
    resize: vertical;
    min-height: 120px; 
}

#contact form button[type="submit"] {
    background-color: var(--button-bg-color); 
    color: var(--button-text-color); 
    border: none;
    padding: 0.9rem 2.2rem; 
    font-size: 1rem; /* Approx 17px */
    font-weight: 500; 
    cursor: pointer;
    border-radius: var(--minimal-radius);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    display: inline-block;
    margin-top: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
}

#contact form button[type="submit"]:hover {
    background-color: var(--button-hover-bg-color); 
    box-shadow: 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07); /* Subtle hover shadow */
}

footer {
    text-align: center;
    padding: 40px 20px; 
    background-color: var(--bg-color);
    color: var(--text-color-secondary); 
    font-size: 0.9rem; /* Approx 15px */
    box-shadow: none; 
    border-top: 1px solid var(--border-color); 
    transition: background-color 0.3s ease, color 0.3s ease;
}

footer p {
    margin: 0;
    line-height: 1.6; 
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
    :root {
        /* New Flat Color Palette - Dark Mode */
        --bg-color-dark: #1D1D1F; /* Apple-like dark gray */
        --text-color-dark: #EAE6E2; /* Good, high contrast */
        --text-color-secondary-dark: #C8C0B8; /* Good, high contrast */
        --accent-primary-color-dark: #E59977; /* Good, Muted Terracotta for dark */
        --accent-secondary-color-dark: #B9BDA0; /* Good, Soft Olive for dark */
        --section-bg-color-dark: #2C2A28; /* Slightly lighter than new bg, for card backgrounds */
        --border-color-dark: #383431; /* Darker border, but visible on section-bg */

        /* Semantic Variable Mapping - Dark Mode */
        --bg-color: var(--bg-color-dark);
        --text-color: var(--text-color-dark);
        --text-color-secondary: var(--text-color-secondary-dark);
        --accent-primary-color: var(--accent-primary-color-dark);
        --accent-secondary-color: var(--accent-secondary-color-dark);
        --section-bg-color: var(--section-bg-color-dark);
        --border-color: var(--border-color-dark);

        /* General UI variables for dark mode */
        --header-bg-color: var(--bg-color);
        --header-text-color: var(--text-color);
        --footer-bg-color: var(--bg-color);
        --footer-text-color: var(--text-color-secondary);
        --card-bg-color: var(--section-bg-color-dark); /* Ensure this uses the dark mode specific var */
        --card-border-color: var(--border-color-dark); /* Ensure this uses the dark mode specific var */
        --button-bg-color: var(--accent-primary-color-dark); /* Ensure this uses the dark mode specific var */
        --button-text-color: #1D1D1F; /* Dark text for high contrast on lighter accent buttons */
        --button-hover-bg-color: #D98A66; /* Darker Muted Terracotta for dark mode hover */
        --form-input-bg-color: #1D1D1F; /* Match new page background or slightly lighter like section-bg */
        --form-input-border-color: var(--border-color-dark); /* Ensure this uses the dark mode specific var */
        --form-input-text-color: var(--text-color-dark); /* Ensure this uses the dark mode specific var */
        --nav-link-color: var(--text-color-dark); /* Ensure this uses the dark mode specific var */
        --nav-link-hover-bg-color: var(--accent-primary-color-dark); /* Ensure this uses the dark mode specific var */
        --nav-link-hover-text-color: #1D1D1F; /* Dark text for high contrast on lighter accent nav hover */
        --svg-primary-accent-color: var(--accent-primary-color-dark); /* Ensure this uses the dark mode specific var */
        --svg-secondary-accent-color: var(--accent-secondary-color-dark); /* Ensure this uses the dark mode specific var */
    }
    
    #hero .neumorphic-card {
        box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.08); /* Subtle dark shadow */
    }
    #features article {
        box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.08); /* Subtle dark shadow */
    }
    #features article:hover {
        box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.1); /* Slightly enhanced hover dark shadow */
    }
    .feature-placeholder {
        border: 1px solid var(--border-color-dark); /* Ensure this uses the dark mode specific var */
    }
    #cta {
        background-color: var(--accent-secondary-color-dark); /* Use dark mode accent */
        color: #1D1D1F; /* High contrast text */
    }
    #cta h2, #cta p {
        color: #1D1D1F; /* High contrast text */
    }
    #cta button#joinBetaButton {
        background-color: var(--accent-primary-color-dark); /* Use dark mode accent */
        color: #1D1D1F; /* High contrast text */
        box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.1); /* Subtle dark shadow */
    }
    #cta button#joinBetaButton:hover {
        background-color: #D98A66; /* Darker accent for hover */
        box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.12); /* Subtle hover dark shadow */
    }
    #cta button#joinBetaButton:active {
        background-color: #C87A55; /* Even darker accent for active */
        box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Subtle active dark shadow */
    }
     #contact form {
        box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.08); /* Subtle dark shadow */
    }
    #contact form input[type="text"]:focus,
    #contact form input[type="email"]:focus,
    #contact form textarea:focus {
        border-color: var(--accent-primary-color-dark); /* Use dark mode accent */
        box-shadow: 0 0 0 3px rgba(229, 153, 119, 0.25); 
    }
    #contact form button[type="submit"] {
        box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.1); /* Subtle dark shadow */
    }
    #contact form button[type="submit"]:hover {
        box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.12); /* Subtle hover dark shadow */
    }
    
    #hero h1, section h2, #features article h3, #about h2, #contact h2, #cta h2 {
        text-shadow: none; /* Confirmed */
    }

    /* Ensure message colors are using the dark mode variables for consistency */
    .success-message {
        color: var(--accent-secondary-color-dark); 
    }
    .error-message {
        color: var(--accent-primary-color-dark); 
    }
    /* Removed duplicate .success-message & .error-message that were outside the dark mode media query but seemed intended for it */
    /* Removed duplicate #hero h1 text-shadow that was outside the dark mode media query */
}

/* Form Status Messages Base Style */
#formStatus {
  margin-top: 15px;
  font-weight: bold;
  text-align: center; /* Center the status message */
}
.success-message {
  color: var(--accent-secondary-color); /* Olive Green for success (light mode) */
}
.error-message {
  color: #D32F2F; /* A distinct red for errors (light mode) */
}

/* Footer styling was duplicated, the version from line ~360 is more consistent with the flat design.
   The following is the original footer style before the erroneous merge/duplication.
   It should be:
    footer {
        text-align: center;
        padding: 40px 20px; 
        background-color: var(--bg-color);
        color: var(--text-color-secondary); 
        font-size: 0.9rem; 
        box-shadow: none; 
        border-top: 1px solid var(--border-color); 
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    footer p {
        margin: 0;
        line-height: 1.6; 
    }
    This is already present around line 360, so this entire block below can be removed if it's a duplicate.
    The `footer` rule starting at line 360 is the one that is consistent with the variables and flat design.
    The `footer` rule below starting at line ~480 seems to be from an older neumorphic attempt.
    I will remove the duplicatd/old footer style.
*/


/* Media Queries for Responsiveness */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    #hero h1 {
        font-size: 2.2rem;
    }

    #hero p {
        font-size: 1rem;
    }

    section h2 { /* This will also apply to #interactive-insights h2 */
        font-size: 1.7rem;
    }

    #features article {
        flex-basis: calc(50% - 2rem); /* Two columns on tablets */
    }
    .insights-container {
        gap: 20px; /* Reduce gap slightly on tablets */
    }
    .insight-bubble {
        flex-basis: calc(50% - 20px); /* Two bubbles per row on tablets, considering gap */
        max-width: none; /* Allow bubbles to fill the 50% width */
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    body {
        font-size: 15px; /* Slightly smaller base font for small devices */
    }

    nav ul li {
        display: block;
        margin: 0 0 10px 0; /* Adjust margin for stacked links */
    }

    nav ul li a {
        padding: 0.75rem 1rem; /* Larger touch targets for mobile nav */
    }

    #hero {
        padding: 2.5rem 1rem;
    }

    #hero h1 {
        font-size: 2rem;
    }

    #hero p {
        font-size: 0.95rem;
    }

    section h2 {
        font-size: 1.6rem;
    }

    #features article {
        flex-basis: 100%; /* Full width on small devices */
        margin-left: 0;
        margin-right: 0;
    }
    .insight-bubble {
        flex-basis: 100%; /* Full width on small devices */
        max-width: 450px; /* Max width for single column bubbles on small screens */
        margin-left: auto; /* Center single column bubbles */
        margin-right: auto; /* Center single column bubbles */
    }

    #contact form {
        padding: 1.5rem;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    body {
        font-size: 14px; /* Even smaller base font for very small devices */
    }

    #hero {
        padding: 2rem 1rem;
    }

    #hero h1 {
        font-size: 1.8rem;
    }

    #hero p {
        font-size: 0.9rem;
    }

    section h2 {
        font-size: 1.5rem;
    }

    #cta button,
    #contact form button[type="submit"] {
        padding: 0.7rem 1.5rem;
        font-size: 1rem;
    }
}