/* ==========================================================================
   #GLOBAL VARIABLES
   ========================================================================== */
   
   /*
    * Global CSS variables for consistent theming and easy maintenance.
    * Organized into logical groups for better readability.
    */
:root {
    /* Colors */
    --primary: #1a3a2b;
    --accent: #4ecb71;
    --accent-dark: #3aa75a;
    --background: #f7faf9;
    --surface: #ffffff;
    --header-bg: #40c48ba2;
    --footer-bg: #e5e9e6;
    --text: #19211e;
    --border: #d1e0d9;
    
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-size-base: 18px;
    --line-height-base: 1.6;
    
    /* Spacing */
    --spacing-small: 0.5rem;
    --spacing-medium: 1rem;
    --spacing-large: 2rem;
    --spacing-xlarge: 4rem;
    
    /* Layout */
    --border-radius: 5px;
    --container-width: 1200px;
    --transition-speed: 0.3s;
}

/* ==========================================================================
   #BASE STYLES
   ========================================================================== */
   
   /*
    * Reset default browser styles and set up base typography and layout.
    * Using border-box to ensure consistent box-model behavior.
    */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    line-height: var(--line-height-base);
    color: var(--text);
    background-color: var(--background);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--accent);
}

h1, h2 {
    margin-bottom: var(--spacing-medium);
    line-height: 1.2;
}

p {
    margin-bottom: var(--spacing-medium);
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-medium);
}

/* ==========================================================================
   #HEADER
   ========================================================================== */
   
   /*
    * Header section containing logo and site title.
    * Uses a semi-transparent background for a modern look.
    */
header {
    background: var(--header-bg);
    color: var(--primary);
    padding: 1.5rem 0; /* Consistent padding */
    text-align: center;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* Adjusted shadow */
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ensure full width for centering content */
    margin-bottom: var(--spacing-small); /* Align with previous inline style intention */
}

.logo {
    max-width: 280px; /* Consolidated and centered value */
    height: auto;
    display: block; /* Ensure it behaves as a block, flex parent handles centering */
}

header h1 {
    font-size: 2.5rem;
    margin: 0 0 0.25rem 0; /* Match precise spacing from previous inline style */
}

.tagline {
    font-size: 1.2rem;
    opacity: 0.9;
    margin: 0; /* Consolidate from removed rule and inline style */
    padding-bottom: var(--spacing-small); /* From previous inline style */
}

/* ==========================================================================
   #MAIN CONTENT
   ========================================================================== */
   
   /*
    * Main content sections with consistent spacing and alternating backgrounds.
    * Uses CSS variables for consistent spacing and theming.
    */
section {
    padding: 1.77rem 0 1.33rem; /* Top: 1.33 * 1.33 = ~1.77rem, Bottom: 1.33rem */
    text-align: center;
}

section:nth-child(even) {
    background-color: var(--surface);
    /* Padding is inherited from the general 'section' rule */
}

.intro {
    background-color: var(--surface);
    padding: var(--spacing-medium) 0 var(--spacing-small); /* Using spacing variables: 1rem 0 0.5rem */
}

.intro p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 1.6rem; /* Added bottom margin to create space between paragraphs */
}

/* Remove bottom margin from last paragraph in intro */
.intro p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   #PRODUCTS
   ========================================================================== */
   
   /*
    * Product cards with hover effects and status indicators.
    * Responsive grid layout that adapts to different screen sizes.
    */
.products .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-large);
}

.product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px 0 rgba(26, 58, 43, 0.07);
    padding: 2.5rem 1.5rem 2rem;
    width: 320px;
    max-width: 100%; /* Added for responsiveness */
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible; /* Ensure the status banner is visible */
}

.product-card:hover {
    box-shadow: 0 6px 24px 0 rgba(46, 134, 95, 0.15);
    transform: translateY(-4px);
}

.brand-message {
    width: 100%;
    max-width: 800px;
    margin: 2rem auto 0;
    padding: 1.5rem;
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px 0 rgba(26, 58, 43, 0.07);
}

.brand-message p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0;
}

.product-status {
    position: absolute;
    top: 0.75rem; /* Reduced by 50% from 1.5rem */
    right: 0.75rem; /* Reduced by 50% from 1.5rem */
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem; /* Slightly smaller to fit better */
    font-weight: 700;
    padding: 0.2rem 0.8rem; /* Slightly adjusted padding */
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.product-icon {
    font-size: 3rem;
    margin: 1.5rem 1.5rem var(--spacing-medium); /* Added left/right margin to create space */
    color: var(--primary);
    display: flex;
    justify-content: center;
    min-height: 100px; /* Reduced slightly to accommodate status banner */
    align-items: center;
    position: relative;
}

.product-image {
    width: 120px;
    height: 120px;
    transition: transform var(--transition-speed) ease;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.product-card h2 {
    font-size: 1.5rem;
    color: var(--primary);
}

/* ==========================================================================
   #SIGNUP FORM
   ========================================================================== */
   
   /*
    * Email signup form with validation states and responsive layout.
    * Includes focus and invalid states for better UX.
    */
.signup {
    background: var(--header-bg);
    color: var(--primary);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 12px 0 rgba(26, 58, 43, 0.1);
    padding: 2.5rem 1.5rem;
    text-align: center;
    margin-bottom: 2.5rem;
    border: 1px solid var(--border);
}

.signup h2 {
    margin-bottom: 1.2rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.signup-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-small);
    max-width: 500px;
    margin: 0 auto;
}

.signup-form input {
    flex-grow: 1;
    padding: 0.5rem var(--spacing-medium); /* Adjusted top/bottom padding */
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    font-size: 1rem;
}

.signup-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(78, 203, 113, 0.2);
    outline: none;
}

.signup-form input:invalid:not(:placeholder-shown) {
    border-color: #ff4444;
}

.signup-form input:invalid:not(:placeholder-shown) + .error-message {
    display: block;
    color: #ff4444;
    font-size: 0.85rem;
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
    text-align: left;
    padding: 0 0.5rem;
}

.signup-form button {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 999px;
    padding: 0.7rem 1.6rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.signup-form button:hover {
    background: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(78, 203, 113, 0.3);
}

/* ==========================================================================
   #FOOTER
   ========================================================================== */
   
   /*
    * Site footer with mission statement and social media links.
    * Uses a light background to distinguish from main content.
    */
footer {
    background: var(--footer-bg);
    color: var(--primary);
    padding: var(--spacing-large) 0;
    text-align: center;
}

footer .mission {
    margin-bottom: var(--spacing-medium);
    font-size: 1.1rem;
    opacity: 0.9;
}

.social-links a {
    margin: 0 var(--spacing-small);
    display: inline-block;
    font-size: 1.2rem; /* Ensure icons are a bit larger */
}

.social-links a i {
    margin-right: var(--spacing-small); /* Space between icon and text */
}

/* ==========================================================================
   #MEDIA QUERIES
   ========================================================================== */
   
   /*
    * Responsive breakpoints for different device sizes.
    * Mobile-first approach with progressive enhancement.
    */
/* Tablet and below */
@media (max-width: 768px) {
    .logo {
        width: 100%;
        max-width: 200px;
    }
    
    header h1 {
        font-size: 2rem;
    }
    
    .intro p {
        font-size: 1.1rem;
        padding: 0 1rem;
    }
    
    .product-card {
        width: 100%;
        margin: 0 0 1.5rem 0;
    }
    
    .products .container {
        padding: 0 1rem;
    }
    
    .signup-form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .signup-form input,
    .signup-form button {
        width: 100%;
        margin: 0.5rem 0;
    }
    
    .tagline {
        font-size: 1rem;
    }
}

/* Small tablets and large phones */
@media (max-width: 700px) {
    .container {
        padding: 1.2rem 0.7rem; /* Custom padding for smaller containers */
    }

    .product-card {
        /* Ensures product cards don't exceed container padding on this specific breakpoint */
        width: calc(100% - 1.4rem); /* Adjusting for the 0.7rem padding on each side */
        margin-left: auto;
        margin-right: auto;
    }

    footer .container {
        padding: var(--spacing-large) 0.7rem; /* Consistent with above .container padding */
    }
}

/* Mobile devices */
@media (max-width: 480px) {
    header h1 {
        font-size: 1.5rem; /* Further reduced for very small screens */
    }

    .tagline {
        font-size: 1rem; /* Further reduced */
    }

    .signup-form {
        flex-direction: column;
    }

    .signup-form input,
    .signup-form button {
        width: 100%; /* Stack them */
    }
}