/**
 * styles.css
 * Version: 1.0.0
 * Date: October 05, 2026 12:35 PM EDT
 *
 * Stylesheet for the Expense Minder landing page. Colors, fonts, spacing and the header treatment
 * are taken from the Expense Manager app's styles.css so the public site and the product match.
 * - v1.0.0: Initial release.
 */

/* Design tokens, same values as the app. */
:root {
    --color-primary: #3d4f5f;
    --color-primary-dark: #2c3e4a;
    --color-primary-light: #5a6f7f;
    --color-accent: #6b8e7b;
    --color-accent-light: #8ba99b;
    --color-secondary: #a08060;
    --color-secondary-light: #c0a080;
    --color-gray-300: #d1d5db;
    --text-primary: #2c3e4a;
    --text-secondary: #5a6a7a;
    --text-muted: #8a9aaa;
    --text-light: #ffffff;
    --bg-body: #f5f6f7;
    --border-light: #d5d8dc;
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --radius-lg: 0.75rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3 {
    font-family: 'Merriweather', Georgia, serif;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

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

/* Site header: slate bar with the tan rule, as in the app. */
.site-header {
    background-color: var(--color-primary);
    border-bottom: 3px solid var(--color-secondary);
    padding: var(--spacing-md) 0;
}
.site-header .brand { display: flex; align-items: center; gap: var(--spacing-md); text-decoration: none; }
.site-header .brand i { font-size: 2rem; color: var(--color-secondary); }
.site-header .brand-name { color: var(--text-light); font-size: 1.5rem; }
.site-header .brand-tag { color: var(--color-gray-300); font-size: 0.875rem; margin: 0; }

/* Hero banner. */
.hero {
    flex: 1;
    display: flex;
    align-items: center;
    padding: clamp(2rem, 8vw, 5rem) 0;
}
.banner {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, var(--color-primary-light) 100%);
    border-radius: var(--radius-lg);
    border-bottom: 4px solid var(--color-secondary);
    box-shadow: var(--shadow-lg);
    padding: clamp(2rem, 7vw, 4.5rem) clamp(1.5rem, 6vw, 4rem);
    text-align: center;
    color: var(--text-light);
}
.banner .banner-icon { font-size: 2.5rem; color: var(--color-secondary-light); margin-bottom: var(--spacing-md); }
.banner h1 { color: var(--text-light); font-size: clamp(2rem, 6vw, 3.25rem); margin-bottom: var(--spacing-md); }
.banner .banner-rule { width: 4rem; height: 3px; background: var(--color-secondary); border: 0; margin: 0 auto var(--spacing-lg); }
.banner p { font-size: clamp(1.05rem, 2.5vw, 1.35rem); color: #e6eaee; margin: 0 auto; max-width: 40rem; }

/* Footer. */
.site-footer { background-color: #f1f3f4; border-top: 1px solid var(--border-light); padding: var(--spacing-lg) 0; }
.site-footer .container { font-size: 0.8125rem; color: var(--text-muted); text-align: center; }