/* ============================================================================
   ThreeOneOgirl — Master Stylesheet
   ============================================================================
   TABLE OF CONTENTS
   ----------------------------------------------------------------------------
   1.  DESIGN TOKENS           — All colors, sizes, spacing, radii, shadows
   2.  RESET & BASE            — Normalize + body defaults
   3.  LAYOUT UTILITIES        — .container, .narrow, .reveal, .section-label
   4.  NAVIGATION              — .site-nav (shared across all pages)
   5.  BREADCRUMB              — .breadcrumb-bar (shared)
   6.  BUTTONS                 — .btn-blurple, .btn-white
   7.  PAGE HEADER             — .page-header (blog, blog articles)
   8.  FOOTER                  — .site-footer (shared across all pages)
   9.  MEDIA PLACEHOLDER       — .media-placeholder (shared, dev placeholder)
   10. HOME PAGE               — index.html specific
   11. RETIRE WHEN PAGE        — retire_when.html specific
   12. CONTACT PAGE            — contact.html specific
   13. BLOG LISTING            — blog.html specific
   14. BLOG ARTICLES           — blog-*.html specific
   15. LEGAL PAGES             — terms-of-use.html, privacy-policy.html
   16. 404 PAGE                — 404.shtml specific
   17. RESPONSIVE — TABLET     — (max-width: 1024px)
   18. RESPONSIVE — MOBILE     — (max-width: 768px)
   19. RESPONSIVE — SMALL      — (max-width: 480px)
   ============================================================================ */


/* ============================================================================
   1. DESIGN TOKENS
   ============================================================================
   All colors, sizes, spacing, and stylistic values live here and ONLY here.
   Every rule in this file references these tokens. Change a value here to
   update it everywhere it's used.
   ============================================================================ */

:root {

    /* ────────────────────────────────────────────────────────────────────
       Abbreviations used in comments below:
         all     = every page uses this (usually via shared nav/footer)
         home    = index.html
         rw      = retire_when.html
         contact = contact.html
         blog    = blog.html (listing page)
         article = blog-social-security.html / blog-net-worth.html
         legal   = terms-of-use.html / privacy-policy.html
         404     = 404.shtml
       ──────────────────────────────────────────────────────────────────── */

    /* ── Colors: Brand (Blurple) ──────────────────────────────────────── */
    --blurple:              #3F6EA8;                      /* Primary brand color — used on all pages (links, buttons, accents, hero bgs) */
    --blurple-dark:         #2E5680;                      /* Button hover states — all pages */
    --blurple-light:        #7FA3D1;                      /* Apps section eyebrow + app badge (home) */
    --blurple-glow:         rgba(63, 110, 168, 0.15);     /* Focus rings, step icons, article-step numbers, hotspot pulse (home, rw, contact, article) */
    --blurple-border:       rgba(63, 110, 168, 0.15);     /* Border on tinted-blurple boxes — diff-card (rw), legal-box (legal), article-callout (article), contact-notice (contact) */
    --blurple-hover-bg:     rgba(63, 110, 168, 0.08);     /* File-upload area drag-over state (contact) */

    /* ── Colors: Backgrounds ──────────────────────────────────────────── */
    --bg-white:             #ffffff;                      /* Default page bg + card backgrounds — all pages */
    --bg-offwhite:          #F6F6F6;                      /* Body bg on blog + contact; form inputs, formula/comparison boxes (article) */
    --bg-light-blurple:     #E6EDF5;                      /* Tinted-blurple surfaces — tags, callouts, boxes (home, rw, blog, contact, article, legal) */
    --bg-dark:              #23272A;                      /* Phone frame (rw) */
    --bg-footer:            #4E5058;                      /* Footer background — all pages */
    --bg-not-black:         #2C2F33;                      /* (reserved — formerly app cards on dark bg) */

    /* ── Colors: Text ─────────────────────────────────────────────────── */
    --text-dark:            #23272A;                      /* Default body text + headings — all pages */
    --text-body:            #4E5058;                      /* Paragraph body + secondary text — all pages */
    --text-muted:           #6B6F78;                      /* Metadata: dates, hints, breadcrumbs — all pages */
    --text-white:           #ffffff;                      /* Text on dark/blurple backgrounds — all pages (hero, footer, etc.) */
    --greyple:              #99AAB5;                      /* Muted text on dark bgs — footer links (all), app card desc (home) */

    /* ── Colors: Gradient helpers (media placeholders only) ───────────── */
    --gradient-blurple-a:   #E6EDF5;                      /* Blurple-tinted placeholder gradient (home mission placeholder, rw media placeholders) */
    --gradient-neutral-a:   #F6F6F6;                      /* Neutral placeholder gradient on offwhite sections (home) */
    --gradient-neutral-b:   #DCE8F5;                      /* Neutral placeholder gradient on offwhite sections (home) */

    /* ── Colors: Feedback (forms, alerts) ─────────────────────────────── */
    --color-error:          #C9303A;                      /* Form field errors (contact), legal-alert text (legal) */
    --color-error-bg:       rgba(201, 48, 58, 0.08);      /* Form error message background (contact) */
    --color-error-border:   rgba(201, 48, 58, 0.2);       /* Form error message + legal-alert border (contact, legal) */
    --color-error-soft-bg:  rgba(201, 48, 58, 0.06);      /* Legal-alert background (legal) */
    --color-success:        #2E8A4C;                      /* Successful form submission text (contact) */
    --color-success-bg:     rgba(46, 138, 76, 0.08);      /* Success message background (contact) */
    --color-success-border: rgba(46, 138, 76, 0.2);       /* Success message border (contact) */

    /* ── Colors: Borders & overlays (neutral) ─────────────────────────── */
    --border-subtle:        rgba(0, 0, 0, 0.06);          /* Hairline dividers everywhere — nav bottom, card borders, section dividers (all pages) */
    --border-light:         rgba(0, 0, 0, 0.1);           /* Form input borders (contact), phone frame outer border (rw) */
    --border-dashed:        rgba(0, 0, 0, 0.08);          /* Dashed placeholder outlines — mission placeholder (home), coming-soon cards (blog) */
    --border-dark:          rgba(255, 255, 255, 0.06);    /* Dividers on dark bgs — footer bottom (all), app card borders (home) */
    --border-dark-dashed:   rgba(255, 255, 255, 0.06);    /* Dashed placeholder on dark bg — app placeholder card (home) */
    --overlay-nav:          rgba(255, 255, 255, 0.92);    /* Frosted-glass sticky nav background (all pages) */
    --overlay-copy:         rgba(255, 255, 255, 0.25);    /* Footer copyright (all), placeholder inner text (home) */
    --overlay-dashed-dark:  rgba(63, 110, 168, 0.25);     /* Media-placeholder dashed border (home mission, rw) */
    --overlay-hero-top:     rgba(0, 0, 0, 0.35);          /* Top of dark gradient over hero image (rw only) */
    --overlay-hero-bot:     rgba(0, 0, 0, 0.55);          /* Bottom of dark gradient over hero image (rw only) */
    --hotspot-hover:        rgba(63, 110, 168, 0.2);      /* Screenshot hotspot hover state (rw only) */
    --hotspot-pulse:        rgba(63, 110, 168, 0.15);     /* Screenshot hotspot pulse animation (rw only) */
    --sunset-orange:        #F26B1F;
    --sunset-orange-dark:   #C24F10;
    --burgundy:             #8C2F39;
    --burgundy-dark:        #5E1E25;

    /* ── Typography: Families ─────────────────────────────────────────── */
    --font-brand:           'Dancing Script', 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive;
                                                          /* Cursive display font — brand logos, large display headings (all pages) */
    --font-body:            'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
                                                          /* Default UI font for all body text, nav, forms (all pages) */

    /* ── Typography: Size Scale (curated) ─────────────────────────────── */
    --fs-tiny:              0.625rem;                     /* 10px — TM superscripts on brand marks (all pages: nav, home hero, footer, page-header) */
    --fs-xs:                0.75rem;                      /* 12px — small tags, dates, badges (home, blog, article) */
    --fs-sm:                0.875rem;                     /* 14px — nav links, breadcrumb, footer links, form labels, secondary text (all pages) */
    --fs-base:              1rem;                         /* 16px — default body text, article/legal body, form inputs, buttons (all pages) */
    --fs-lg:                1.125rem;                     /* 18px — hero descriptions, article intros, app-card titles, formula box (home, rw, article) */
    --fs-xl:                1.375rem;                     /* 22px — subtitles, small H2s, contact form heading, article-heading, legal-heading */
    --fs-2xl:               1.75rem;                      /* 28px — rw hero sub, tagline area, 404 error title, mobile large headings */
    --fs-3xl:               2.25rem;                      /* 36px — section titles, CTA banner, article-title, contact-intro h1 (all section-level headings) */
    --fs-4xl:               3rem;                         /* 48px — page-header h1 (blog + articles), responsive mobile home hero */
    --fs-5xl:               3.5rem;                       /* 56px — rw hero h1 (Retire When:), responsive mobile 404 error code */
    --fs-6xl:               5rem;                         /* 80px — home hero h1 (ThreeOneOgirl), 404 error code */

    /* ── Typography: Weights ──────────────────────────────────────────── */
    --fw-normal:            400;                          /* Dancing Script display headings (all pages) */
    --fw-semibold:          600;                          /* Buttons, nav links, form-submit, back-to-blog link (all pages) */
    --fw-bold:              700;                          /* Strong emphasis, tags, footer column headings (all pages) */
    --fw-extrabold:         800;                          /* Large headings, page titles, hero taglines (all pages) */

    /* ── Typography: Line heights ─────────────────────────────────────── */
    --lh-none:              1;                            /* 404 error code only (tight display digits) */
    --lh-tight:             1.15;                         /* Large display headings — hero h1, page-hero h1, page-header h1, article-title */
    --lh-snug:              1.4;                          /* Blog card headings (blog), italic rw tagline (rw) */
    --lh-base:              1.6;                          /* General body text — hero description, app-card desc, value card p, steps p (all pages) */
    --lh-relaxed:           1.8;                          /* Long-form reading text — article body, legal text, promo text, contact-notice (rw, article, legal, contact) */

    /* ── Typography: Letter spacing ───────────────────────────────────── */
    --ls-tight:             -0.02em;                      /* Negative tracking on large display headings (all pages) */
    --ls-snug:              -0.01em;                      /* Slight negative on medium headings — article-heading, legal-heading (article, legal) */
    --ls-wide:              0.06em;                       /* Uppercase small caps — footer column headings, app badge (all, home) */
    --ls-wider:             0.12em;                       /* Uppercase section eyebrow labels (home, rw, blog apps) */

    /* ── Spacing Scale (curated) ──────────────────────────────────────── */
    --space-xs:             4px;                          /* Fine gaps — icon gutters, tight margins, badge padding (all pages) */
    --space-sm:             8px;                          /* Small gaps — button gutters, form gap, tiny spacing (all pages) */
    --space-md:             12px;                         /* Default margins, form input padding, button gap (all pages) */
    --space-lg:             16px;                         /* Standard spacing — component gaps, input padding, grid gutters (all pages) */
    --space-xl:             24px;                         /* Card padding, page gutters, comfortable gaps (all pages) */
    --space-2xl:            32px;                         /* Between sections, grid gaps, diff-card padding (home, rw, blog, contact) */
    --space-3xl:            48px;                         /* Section vertical padding, page-section top/bottom (all pages) */
    --space-4xl:            64px;                         /* Large feature-row grid gap (home), 404 padding */
    --space-5xl:            80px;                         /* Major section padding — hero top, apps/feature/steps/screenshot sections (home, rw) */

    /* ── Border Radius ────────────────────────────────────────────────── */
    --radius-sm:            4px;                          /* Screenshot hotspot rectangles (rw only) */
    --radius-md:            8px;                          /* Form inputs (contact), step numbers (home, article), file preview items (contact) */
    --radius-lg:            12px;                         /* Cards, callouts, boxes — value cards, step cards, blog cards, callouts, legal-box, contact-notice, etc. (all pages) */
    --radius-xl:            16px;                         /* Large cards — contact form card, home hero image, app icon, diff-card, article screenshot image (home, rw, contact) */
    --radius-2xl:           32px;                         /* Phone-frame outer shape on screenshot (rw only) */
    --radius-pill:          40px;                         /* Pills & rounded buttons — nav CTA, all buttons, tags, badges (all pages) */
    --radius-full:          50%;                          /* Circles — badge pulse dot (home), comparison-box bullets (article) */

    /* ── Shadows ──────────────────────────────────────────────────────── */
    --shadow-sm:            0 2px 8px rgba(0, 0, 0, 0.04);                                /* Resting card shadow — value/step/blog cards (home, rw, blog) */
    --shadow-md:            0 4px 16px rgba(0, 0, 0, 0.06);                               /* Contact form card (contact only) */
    --shadow-lg:            0 12px 32px rgba(0, 0, 0, 0.08);                              /* Card hover lift — value/step/blog cards (home, rw, blog) */
    --shadow-xl:            0 16px 40px rgba(0, 0, 0, 0.4);                               /* App card hover on dark bg (home only) */
    --shadow-phone:         0 30px 60px rgba(0, 0, 0, 0.18), 0 0 40px var(--blurple-glow); /* Phone frame on screenshot (rw only) */
    --shadow-blurple:       0 8px 24px rgba(63, 110, 168, 0.3);                           /* Blurple button hover + form-submit hover (all pages, contact) */
    --shadow-btn-dark:      0 8px 24px rgba(0, 0, 0, 0.2);                                /* White button hover on blurple CTA banner (rw only) */
    --shadow-focus-ring:    0 0 0 3px var(--blurple-glow);                                /* Form input focus ring (contact only) */

    /* ── Transitions ──────────────────────────────────────────────────── */
    --transition-fast:      0.2s;                         /* Quick color/opacity/link hover changes (all pages) */
    --transition-base:      0.3s;                         /* Transform, shadow, background transitions — card hovers, form inputs (all pages) */
    --transition-reveal:    0.65s;                        /* Scroll-reveal fade+slide animation for .reveal elements (home, rw, blog) */

    /* ── Layout ───────────────────────────────────────────────────────── */
    --container-max:        1140px;                       /* Primary layout width — nav, footer, breadcrumb, home container, blog grid (all pages) */
    --container-narrow:     860px;                        /* Narrower content — rw body via .narrow, steps grid, rw divider (rw only) */
    --content-max:          800px;                        /* Long-form reading column — article wrap, legal wrap, home hero inner (home, article, legal) */
    --nav-height:           64px;                         /* Sticky nav height (all pages) */
    --nav-padding-x:        40px;                         /* Desktop nav horizontal inset — doesn't fit the 4/8/12/16… scale, so kept as its own token (all pages) */
    --backdrop-blur:        16px;                         /* Frosted-glass blur on sticky nav (all pages) */
}


/* ============================================================================
   2. RESET & BASE
   ============================================================================ */

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

body {
    font-family: var(--font-body);
    background: var(--bg-white);
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Body variants for pages that need a different background */
body.bg-offwhite {
    background: var(--bg-offwhite);
}

/* 404 page needs flex column so footer sits at bottom of viewport */
body.page-404 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* ============================================================================
   3. LAYOUT UTILITIES
   ============================================================================ */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

/* Section eyebrow label (uppercase tiny text above headings) */
.section-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--blurple);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

/* Retire When page — section-labels are centered within their sections */
.why-area .section-label,
.screenshot-area .section-label,
.steps-area .section-label {
    text-align: center;
}

/* Scroll-reveal animation: elements fade + slide up as they enter viewport */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity var(--transition-reveal) ease,
        transform var(--transition-reveal) ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================================
   4. NAVIGATION — shared across all pages
   ============================================================================ */

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--nav-padding-x);
    height: var(--nav-height);
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--overlay-nav);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    border-bottom: 1px solid var(--border-subtle);
}

.nav-brand {
    font-family: var(--font-brand);
    font-size: var(--fs-xl);
    color: var(--text-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.nav-brand-icon {
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.nav-brand-text {
    line-height: 1;
}

.nav-brand sup {
    font-family: var(--font-body);
    font-size: var(--fs-tiny);
    vertical-align: super;
    margin-left: 2px;
    opacity: 0.4;
}

.nav-links {
    display: flex;
    gap: var(--space-2xl);
    align-items: center;
}

.nav-links a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    transition: color var(--transition-fast);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--blurple);
}

.nav-cta {
    background: var(--blurple) !important;
    color: var(--text-white) !important;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm) !important;
    transition:
        background var(--transition-fast),
        transform var(--transition-fast) !important;
}

.nav-cta:hover {
    background: var(--blurple-dark) !important;
    color: var(--text-white) !important;
    transform: translateY(-1px);
}


/* ============================================================================
   5. BREADCRUMB — shared
   ============================================================================ */

.breadcrumb-bar {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-md) var(--space-xl);
    font-size: var(--fs-sm);
}

.breadcrumb-bar a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb-bar a:hover {
    color: var(--blurple);
}

.breadcrumb-bar span {
    color: var(--text-muted);
    margin: 0 var(--space-sm);
}

.breadcrumb-bar .current {
    color: var(--text-body);
}


/* ============================================================================
   6. BUTTONS — shared
   ============================================================================ */

.btn-blurple,
.btn-white {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-2xl);
    border-radius: var(--radius-pill);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn-blurple {
    background: var(--blurple);
    color: var(--text-white);
}

.btn-blurple:hover {
    background: var(--blurple-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-blurple);
}

.btn-white {
    background: var(--bg-white);
    color: var(--text-dark);
}

.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-dark);
}


/* ============================================================================
   7. PAGE HEADER — blog, blog articles
   ============================================================================ */

.page-header {
    background: var(--blurple);
    color: var(--text-white);
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
}

.page-header h1 {
    font-family: var(--font-brand);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-normal);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-xs);
}

.page-header h1 sup {
    font-family: var(--font-body);
    font-size: var(--fs-tiny);
    vertical-align: super;
    margin-left: var(--space-xs);
    opacity: 0.6;
}

.page-header .page-subtitle {
    font-size: var(--fs-xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
}


/* ============================================================================
   8. FOOTER — shared across all pages
   ============================================================================ */

.site-footer {
    background: var(--bg-footer);
    color: var(--bg-light-blurple);
    padding: var(--space-3xl) var(--space-xl) var(--space-2xl);
}

.footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
    align-items: flex-start;
}

/* ── Top band: brand + description (left) | newsletter (right) ─────── */
.footer-band-brand {
    max-width: var(--container-max);
    margin: 0 auto var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2xl);
}

.footer-brand-left {
    flex: 1;
    min-width: 0;
}

.footer-brand-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    font-size: var(--fs-xl);
}

.footer-brand-icon {
    width: 1.8em;
    height: 1.8em;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.footer-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-description {
    font-size: var(--fs-base);
    color: var(--bg-light-blurple);
    line-height: var(--lh-base);
    max-width: 640px;
    margin: 0;
}

.footer-newsletter {
    width: 380px;
    flex-shrink: 0;
}

.footer-form {
    display: flex;
    align-items: center;
    background: var(--bg-not-black);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-pill);
    padding: 4px 4px 4px var(--space-lg);
    transition: border-color var(--transition-fast);
}

.footer-form:focus-within {
    border-color: var(--blurple);
}

.footer-form-icon {
    color: var(--bg-light-blurple);
    opacity: 0.6;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: var(--space-sm);
}

.footer-form input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-white);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    padding: var(--space-sm) 0;
}

.footer-form input::placeholder {
    color: var(--bg-light-blurple);
    opacity: 0.6;
}

.footer-form-submit {
    background: var(--blurple);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--space-sm) var(--space-xl);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.footer-form-submit:hover {
    background: var(--blurple-dark);
}

.footer-brand-name {
    font-family: var(--font-brand);
    font-size: var(--fs-xl);
    color: var(--text-white);
    line-height: 1;
}

.footer-brand-name sup {
    font-family: var(--font-body);
    font-size: var(--fs-tiny);
    vertical-align: super;
}

.footer-tagline {
    font-size: var(--fs-sm);
}

.footer-link-col h4,
.footer-newsletter-label {
    color: var(--text-white);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    margin-bottom: var(--space-md);
}

.footer-link-col a {
    display: block;
    color: var(--bg-light-blurple);
    text-decoration: none;
    font-size: var(--fs-sm);
    margin-bottom: var(--space-sm);
    transition: color var(--transition-fast);
}

.footer-link-col a:hover {
    color: var(--text-white);
}

.footer-bottom {
    max-width: var(--container-max);
    margin: var(--space-lg) auto 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xl);
}

.footer-copy {
    font-size: var(--fs-sm);
    color: var(--bg-light-blurple);
}

.footer-social {
    display: flex;
    gap: var(--space-md);
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--bg-not-black);
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}

.footer-social a:hover {
    background: var(--blurple);
}


/* ============================================================================
   9. MEDIA PLACEHOLDER — shared, dev placeholder for future media assets
   ============================================================================ */

.media-placeholder {
    width: 100%;
    background: linear-gradient(135deg, var(--bg-light-blurple) 0%, var(--gradient-blurple-a) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    border: 2px dashed var(--overlay-dashed-dark);
}

.media-placeholder .mp-icon {
    font-size: var(--fs-3xl);
    opacity: 0.5;
}

.media-placeholder .mp-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--blurple);
    opacity: 0.6;
}

/* Home-page offwhite context — neutralize the placeholder gradient */
.feature-section.bg-offwhite .media-placeholder {
    background: linear-gradient(135deg, var(--gradient-neutral-a) 0%, var(--gradient-neutral-b) 100%);
    border-color: var(--border-dashed);
}

.feature-section.bg-offwhite .media-placeholder .mp-label {
    color: var(--text-muted);
}

/* ── Embedded video wrapper (replaces media-placeholder) ────────────── */
.video-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.video-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
}


/* ============================================================================
   10. HOME PAGE — index.html specific
   ============================================================================ */

/* ── Announcement strip at top of page ──────────────────────────────── */
.announcement-strip {
    background: var(--blurple);
    color: var(--text-white);
    text-align: center;
    padding: var(--space-md) var(--space-lg);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
}

.announcement-strip span {
    opacity: 0.7;
    font-weight: var(--fw-normal);
    margin-left: var(--space-sm);
}

/* ── Hero section (white background) ────────────────────────────────── */
.hero {
    background: var(--bg-white);
    color: var(--text-dark);
    text-align: center;
    padding: var(--space-1xl) var(--space-xl) 0;
    position: relative;
    overflow: hidden;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--content-max);
    margin: 0 auto;
}

.hero h1 {
    font-family: var(--font-brand);
    font-size: var(--fs-6xl);
    font-weight: var(--fw-normal);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-sm);
}

.hero h1 sup {
    font-family: var(--font-body);
    font-size: var(--fs-tiny);
    vertical-align: super;
    margin-left: var(--space-xs);
    opacity: 0.6;
}

.hero-tagline {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-extrabold);
    margin-bottom: var(--space-lg);
    letter-spacing: var(--ls-tight);
}

.hero-description {
    font-size: var(--fs-lg);
    line-height: var(--lh-base);
    max-width: 580px;
    margin: 0 auto var(--space-2xl);
    color: var(--text-body);
}

.hero-image-wrap {
    max-width: 940px;
    margin: 0 auto;
}

.hero-image-wrap img {
    width: 100%;
    display: block;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* ── Feature sections (alternating backgrounds) ─────────────────────── */
.feature-section {
    padding: var(--space-3xl) 0;
}

.feature-section.bg-offwhite {
    background: var(--bg-offwhite);
}

.feature-section.bg-blurple-light {
    background: var(--bg-light-blurple);
}

.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}

.feature-row.reverse .feature-media { order: 2; }
.feature-row.reverse .feature-text { order: 1; }

.feature-text h2 {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--space-lg);
}

.feature-text p {
    font-size: var(--fs-base);
    color: var(--text-body);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-lg);
}

.feature-text p strong {
    color: var(--blurple);
    font-weight: var(--fw-bold);
}

/* Feature media uses the shared .media-placeholder with 4:3 aspect */
.feature-media .media-placeholder {
    aspect-ratio: 4 / 3;
}

/* ── Values grid (three cards) ──────────────────────────────────────── */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-3xl);
}

.value-card {
    background: var(--bg-white);
    border-left: 4px solid var(--blurple);
    border-radius: var(--radius-lg);
    padding: 16px 18px 14px;
    text-align: left;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.value-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.value-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.value-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
}

.value-card h3 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-extrabold);
    color: var(--text-dark);
    line-height: var(--lh-tight);
    margin: 0;
}

.value-card p {
    font-size: var(--fs-sm);
    color: var(--text-body);
    line-height: var(--lh-base);
    margin: 0;
}

/* ── Apps section (offwhite background) ─────────────────────────────── */
.apps-section {
    background: var(--bg-offwhite);
    color: var(--text-dark);
    padding: var(--space-3xl) 0;
    text-align: center;
}

.apps-section .section-label {
    color: var(--blurple);
}

.apps-section h2 {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    margin-bottom: var(--space-md);
    letter-spacing: var(--ls-tight);
}

.apps-section .section-subtitle {
    font-size: var(--fs-base);
    color: var(--text-body);
    max-width: 460px;
    margin: 0 auto var(--space-3xl);
    line-height: var(--lh-base);
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-xl);
    max-width: 780px;
    margin: 0 auto;
}

.app-card {
    background: var(--bg-white);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--burgundy);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: left;
    text-decoration: none;
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.app-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.app-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.app-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-xl);
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
}

.app-card-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
}

.app-card-title span {
    display: block;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--text-dark);
}

.app-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: rgba(140, 47, 57, 0.12);
    color: var(--burgundy);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    margin-top: var(--space-xs);
}

.badge-dot {
    width: 5px;
    height: 5px;
    background: var(--burgundy);
    border-radius: var(--radius-full);
    animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(1.5); }
}

.app-card-desc {
    font-size: var(--fs-sm);
    color: var(--text-body);
    line-height: var(--lh-base);
    flex-grow: 1;
    margin-bottom: var(--space-lg);
}

.app-card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--burgundy);
    color: var(--text-white);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background var(--transition-fast);
    align-self: flex-start;
}

.app-card-cta:hover {
    background: var(--burgundy-dark);
}

.app-card-cta svg {
    transition: transform var(--transition-fast);
}

.app-card-cta:hover svg {
    transform: translateX(3px);
}

.app-card-placeholder {
    background: transparent;
    border: 2px dashed var(--border-dashed);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

.placeholder-inner {
    text-align: center;
}

.placeholder-inner .p-icon {
    font-size: var(--fs-xl);
    opacity: 0.3;
    margin-bottom: var(--space-sm);
}

.placeholder-inner p {
    font-family: var(--font-brand);
    font-size: var(--fs-xl);
    color: var(--text-muted);
}


/* ============================================================================
   11. RETIRE WHEN PAGE — retire_when.html specific
   ============================================================================ */

/* ── Page hero with background image + dark overlay ─────────────────── */
.page-hero {
    color: var(--text-white);
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../images/targetIncome1.jpg') center 60% / cover no-repeat;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--overlay-hero-top) 0%, var(--overlay-hero-bot) 100%);
    z-index: 1;
}

.page-hero-content {
    position: relative;
    z-index: 2;
    padding: var(--space-4xl) var(--space-xl);
}

.page-hero h1 {
    font-family: var(--font-body);
    font-size: var(--fs-5xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-xs);
}

.page-hero .hero-sub {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--space-lg);
}

.page-hero .hero-desc {
    font-size: var(--fs-lg);
    opacity: 0.85;
    max-width: 500px;
    margin: 0 auto;
    line-height: var(--lh-base);
}

/* ── Tagline area (below hero) ──────────────────────────────────────── */
.tagline-area {
    padding: var(--space-3xl) 0;
    text-align: center;
}

.tagline-area p {
    font-family: var(--font-body);
    font-size: 2.5rem;
    color: #000000;
    font-weight: var(--fw-bold);
    max-width: 620px;
    margin: 0 auto;
    line-height: var(--lh-snug);
}

/* ── Thin divider between sections ──────────────────────────────────── */
.divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    max-width: var(--container-narrow);
    margin: 0 auto;
}

/* ── Why This App (question card) ───────────────────────────────────── */
.why-area {
    padding: var(--space-4xl) 0;
}

.diff-card {
    background: var(--bg-light-blurple);
    border: 1px solid var(--blurple-border);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-2xl);
    text-align: center;
    margin: var(--space-2xl) 0;
}

.diff-card .quote-mark {
    font-size: var(--fs-3xl);
    color: var(--blurple);
    opacity: 0.4;
    line-height: var(--lh-none);
    margin-bottom: var(--space-md);
}

.diff-card blockquote {
    font-size: var(--fs-xl);
    font-style: italic;
    color: var(--text-dark);
    margin-bottom: var(--space-lg);
}

.diff-card .diff-answer {
    font-size: var(--fs-base);
    color: var(--text-body);
    line-height: var(--lh-relaxed);
    max-width: 540px;
    margin: 0 auto;
}

.diff-card .diff-answer strong {
    color: var(--blurple);
}

/* ── Promo text blocks ──────────────────────────────────────────────── */
.promo-text {
    font-size: var(--fs-base);
    color: var(--text-body);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-2xl);
    text-align: left;
}

.promo-text strong {
    color: var(--blurple);
    font-weight: var(--fw-bold);
}

/* ── How It Works steps (offwhite background) ───────────────────────── */
.steps-area {
    background: var(--bg-light-blurple);
    padding: var(--space-3xl) 0;
}

.steps-title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    text-align: center;
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--space-sm);
}

.steps-subtitle {
    font-size: var(--fs-base);
    color: var(--text-body);
    text-align: center;
    max-width: 480px;
    margin: 0 auto var(--space-2xl);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.step-card {
    background: var(--bg-white);
    border-left: 4px solid var(--sunset-orange);
    border-radius: var(--radius-lg);
    padding: 16px 18px 14px;
    text-align: left;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.step-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.step-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--blurple-glow);
    color: var(--blurple);
    border-radius: var(--radius-lg);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-xl);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
}

.step-card h3 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-extrabold);
    color: var(--text-dark);
    line-height: var(--lh-tight);
    margin: 0;
}

.step-card p {
    font-size: var(--fs-sm);
    color: var(--text-body);
    line-height: var(--lh-base);
    margin: 0;
}

/* ── Interactive screenshot with hotspots ───────────────────────────── */
.screenshot-area {
    padding: var(--space-5xl) 0;
}

.screenshot-title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    text-align: center;
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--space-sm);
}

.screenshot-subtitle {
    font-size: var(--fs-base);
    color: var(--text-body);
    text-align: center;
    margin-bottom: var(--space-xl);
}

.screenshot-wrapper {
    max-width: 380px;
    margin: 0 auto;
}

.screenshot-frame {
    position: relative;
    display: inline-block;
    width: 100%;
    background: var(--bg-dark);
    border-radius: var(--radius-2xl);
    padding: var(--space-sm);
    border: 2px solid var(--border-light);
    box-shadow: var(--shadow-phone);
}

.screenshot-frame img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-xl);
}

.screenshot-hotspot {
    position: absolute;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
    z-index: 2;
    animation: hotspotPulse 3s ease-in-out infinite;
}

.screenshot-hotspot:hover {
    background-color: var(--hotspot-hover);
    animation: none;
}

.screenshot-hotspot:focus-visible {
    outline: 2px solid var(--blurple);
    outline-offset: 1px;
}

@keyframes hotspotPulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%      { box-shadow: 0 0 0 4px var(--hotspot-pulse); }
}

.screenshot-hint {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: center;
    margin-top: var(--space-lg);
}

.screenshot-hint svg {
    vertical-align: middle;
    margin-right: var(--space-xs);
}

/* Retire-when page uses a 16:9 media placeholder */
.screenshot-area .media-placeholder {
    aspect-ratio: 16 / 9;
    margin: var(--space-2xl) auto;
    max-width: 700px;
}

.why-area .media-placeholder {
    aspect-ratio: 16 / 9;
    margin: var(--space-2xl) auto;
    max-width: 700px;
}

/* ── CTA banner at bottom (blurple bg) ──────────────────────────────── */
.cta-banner {
    background: var(--blurple);
    color: var(--text-white);
    text-align: center;
    padding: var(--space-4xl) var(--space-xl);
}

.cta-banner h2 {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    margin-bottom: var(--space-md);
}

.cta-banner p {
    font-size: var(--fs-base);
    opacity: 0.85;
    max-width: 440px;
    margin: 0 auto var(--space-xl);
    line-height: var(--lh-base);
}

.cta-simple {
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
}


/* ============================================================================
   12. CONTACT PAGE — contact.html specific
   ============================================================================ */

.contact-page {
    max-width: 620px;
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-xl) var(--space-5xl);
}

/* ── Page intro (headline + lead + notice box) ──────────────────────── */
.contact-intro {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.contact-intro h1 {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-md);
}

.contact-intro h1 .blurple {
    color: var(--blurple);
}

.contact-intro .lead {
    font-size: var(--fs-base);
    color: var(--text-body);
    line-height: var(--lh-base);
    margin-bottom: var(--space-lg);
}

.contact-notice {
    background: var(--bg-light-blurple);
    border: 1px solid var(--blurple-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--fs-base);
    color: var(--text-body);
    line-height: var(--lh-base);
    text-align: center;
}

.contact-notice strong {
    color: var(--blurple);
}

/* ── Form card ──────────────────────────────────────────────────────── */
.contact-form-card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-2xl);
    box-shadow: var(--shadow-md);
}

.contact-form-card h2 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-xl);
}

.form-group {
    margin-bottom: var(--space-lg);
    text-align: left;
}

.form-group label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-dark);
    margin-bottom: var(--space-xs);
}

.form-group label .required {
    color: var(--color-error);
    margin-left: 2px;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--text-dark);
    background: var(--bg-offwhite);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    transition:
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--blurple);
    box-shadow: var(--shadow-focus-ring);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted);
}

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

.form-input.error,
.form-textarea.error {
    border-color: var(--color-error);
}

.form-error {
    color: var(--color-error);
    font-size: var(--fs-sm);
    margin-top: var(--space-xs);
    display: none;
}

.form-error.visible {
    display: block;
}


/* ── Submit button (full-width pill) ────────────────────────────────── */
.form-submit-btn {
    width: 100%;
    background: var(--blurple);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
    margin-top: var(--space-sm);
}

.form-submit-btn:hover:not(:disabled) {
    background: var(--blurple-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-blurple);
}

.form-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Form success/error messages (below submit) ─────────────────────── */
.form-message {
    font-size: var(--fs-base);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin-top: var(--space-lg);
    display: none;
    text-align: center;
}

.form-message.success {
    display: block;
    color: var(--color-success);
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
}

.form-message.error {
    display: block;
    color: var(--color-error);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
}

/* ── Honeypot (visually hidden for bot detection) ───────────────────── */
.form-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}


/* ============================================================================
   13. BLOG LISTING — blog.html specific
   ============================================================================ */

.blog-area {
    padding: var(--space-3xl) var(--space-xl) var(--space-5xl);
}

.blog-grid {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
}
/* ── Blog category colors ──────────────────────────────────────────── */
.cat-financial-literacy  { --cat-color: var(--sunset-orange); --cat-hover: var(--sunset-orange-dark); }
.cat-retirement          { --cat-color: var(--burgundy);      --cat-hover: var(--burgundy-dark); }

/* ── Blog card ──────────────────────────────────────────────────────── */
.blog-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--cat-color, var(--blurple));
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.blog-card-tag {
    display: inline-block;
    background: var(--cat-color, var(--blurple));
    color: var(--text-white);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-pill);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
    align-self: flex-start;
}

.blog-card h2 {
    font-size: var(--fs-sm);
    font-weight: var(--fw-extrabold);
    color: var(--text-dark);
    letter-spacing: var(--ls-snug);
    line-height: var(--lh-snug);
    margin-bottom: var(--space-sm);
}

.blog-card-excerpt {
    font-size: var(--fs-xs);
    color: var(--text-body);
    line-height: var(--lh-base);
    margin-bottom: var(--space-lg);
    flex-grow: 1;
}

.blog-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog-card-date {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.blog-card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--blurple);
    color: var(--text-white);
    padding: var(--space-xs) var(--space-lg);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.blog-card-cta:hover {
   background: var(--blurple-dark);
}

/* ── Placeholder card (for upcoming posts) ──────────────────────────── */
.blog-card-placeholder {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    border: 2px dashed var(--border-dashed);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    text-align: center;
}

.placeholder-icon {
    font-size: var(--fs-xl);
    opacity: 0.2;
    margin-bottom: var(--space-md);
}

.placeholder-text {
    font-size: var(--fs-sm);
    color: var(--greyple);
    line-height: var(--lh-snug);
}


/* ============================================================================
   14. BLOG ARTICLES — blog-*.html specific
   ============================================================================ */

.article-wrap {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-xl) var(--space-5xl);
}

/* ── Article meta row (tag + date) ──────────────────────────────────── */
.article-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.article-tag {
    display: inline-block;
    background: var(--bg-light-blurple);
    color: var(--blurple);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-pill);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

.article-date {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ── Article title + intro ──────────────────────────────────────────── */
.article-title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
    color: var(--text-dark);
    margin-bottom: var(--space-xl);
}

.article-intro {
    font-size: var(--fs-lg);
    color: var(--text-body);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-2xl);
    border-left: 3px solid var(--blurple);
    padding-left: var(--space-lg);
}

/* ── Article body typography ────────────────────────────────────────── */
.article-heading {
    font-size: var(--fs-xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-snug);
    color: var(--text-dark);
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-md);
}

.article-subheading {
    font-size: var(--fs-lg);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-snug);
    color: var(--text-dark);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.article-text {
    font-size: var(--fs-base);
    color: var(--text-body);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-lg);
}

.article-text a {
    color: var(--blurple);
    text-decoration: none;
}

.article-text a:hover {
    text-decoration: underline;
}

.article-text strong {
    color: var(--text-dark);
}

/* ── Article lists ──────────────────────────────────────────────────── */
.article-list {
    font-size: var(--fs-base);
    color: var(--text-body);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-lg);
    padding-left: var(--space-xl);
}

.article-list li {
    margin-bottom: var(--space-sm);
}

.article-list li strong {
    color: var(--text-dark);
}

.article-steps {
    list-style: none;
    padding-left: 0;
    font-size: var(--fs-base);
    color: var(--text-body);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-lg);
}

.article-steps li {
    margin-bottom: var(--space-md);
    padding-left: var(--space-2xl);
    position: relative;
}

.article-steps li .step-num {
    position: absolute;
    left: 0;
    top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--blurple-glow);
    color: var(--blurple);
    border-radius: var(--radius-md);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    margin-bottom: 0;
}

.article-steps li strong {
    color: var(--text-dark);
}

/* ── Formula box (net-worth article) ────────────────────────────────── */
.formula-box {
    background: var(--bg-offwhite);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    margin: var(--space-lg) 0 var(--space-xl);
    text-align: center;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text-dark);
    letter-spacing: 0.01em;
}

/* ── Comparison box (net-worth article) ─────────────────────────────── */
.comparison-box {
    background: var(--bg-offwhite);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    margin: var(--space-lg) 0 var(--space-xl);
}

.comparison-box ul {
    list-style: none;
    padding: 0;
}

.comparison-box ul li {
    font-size: var(--fs-base);
    color: var(--text-body);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-xs);
    padding-left: var(--space-lg);
    position: relative;
}

.comparison-box ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--blurple-glow);
    border: 2px solid var(--blurple);
}

.comparison-box ul li strong {
    color: var(--text-dark);
}

/* ── Callout box ────────────────────────────────────────────────────── */
.article-callout {
    background: var(--bg-light-blurple);
    border: 1px solid var(--blurple-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin: var(--space-2xl) 0;
}

.article-callout p {
    font-size: var(--fs-base);
    color: var(--text-body);
    line-height: var(--lh-relaxed);
    margin-bottom: 0;
}

.article-callout p strong {
    color: var(--blurple);
}

/* Inline link used inside callouts (retire_when.html link) */
.article-callout a {
    color: var(--blurple);
    text-decoration: none;
    font-weight: var(--fw-semibold);
}

.article-callout a:hover {
    text-decoration: underline;
}

/* ── Article divider ────────────────────────────────────────────────── */
.article-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    max-width: 100%;
    margin: var(--space-3xl) 0;
}

/* ── References section ─────────────────────────────────────────────── */
.references-section {
    margin-top: var(--space-3xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--border-subtle);
}

.references-heading {
    font-size: var(--fs-base);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-snug);
    color: var(--text-dark);
    margin-bottom: var(--space-lg);
}

.references-list {
    list-style: none;
    padding: 0;
}

.references-list li {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: var(--lh-base);
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
    border-left: 2px solid var(--border-subtle);
}

.references-list li a {
    color: var(--blurple);
    text-decoration: none;
    word-break: break-all;
}

.references-list li a:hover {
    text-decoration: underline;
}

/* ── Back-to-blog link (arrow pushes right on hover) ────────────────── */
.back-to-blog {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--blurple);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    margin-top: var(--space-3xl);
    transition: gap var(--transition-fast);
}

.back-to-blog:hover {
    gap: var(--space-sm);
}


/* ============================================================================
   15. LEGAL PAGES — terms-of-use.html, privacy-policy.html
   ============================================================================ */

.legal-wrap {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-xl) var(--space-5xl);
}

.legal-date {
    font-size: var(--fs-sm);
    color: var(--text-body);
    margin-bottom: var(--space-2xl);
}

.legal-date strong {
    color: var(--text-dark);
}

.legal-alert {
    background: var(--color-error-soft-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error);
    padding: var(--space-lg) var(--space-xl);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2xl);
    text-align: center;
}

.legal-heading {
    font-size: var(--fs-xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-snug);
    color: var(--text-dark);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.legal-text {
    font-size: var(--fs-base);
    color: var(--text-body);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-lg);
}

.legal-text a {
    color: var(--blurple);
    text-decoration: none;
}

.legal-text a:hover {
    text-decoration: underline;
}

.legal-text strong {
    color: var(--text-dark);
}

.legal-list {
    font-size: var(--fs-base);
    color: var(--text-body);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-lg);
    padding-left: var(--space-xl);
}

.legal-list li {
    margin-bottom: var(--space-sm);
}

.legal-list li strong {
    color: var(--text-dark);
}

.legal-box {
    background: var(--bg-light-blurple);
    border: 1px solid var(--blurple-border);
    padding: var(--space-xl);
    margin: var(--space-2xl) 0;
    border-radius: var(--radius-lg);
}

.legal-box .legal-heading {
    margin-top: 0;
}


/* ============================================================================
   16. 404 PAGE — 404.shtml specific
   ============================================================================ */

.error-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-4xl) var(--space-xl);
}

.error-inner {
    max-width: 480px;
}

.error-image-container {
    margin-bottom: var(--space-xl);
}

.error-image {
    width: 20vw;
    min-width: 120px;
    max-width: 200px;
    height: auto;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-20px); }
}

.error-code {
    font-size: var(--fs-6xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.04em;
    color: var(--blurple);
    line-height: var(--lh-none);
    margin-bottom: var(--space-md);
}

.error-title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--space-md);
}

.error-message {
    font-size: var(--fs-base);
    color: var(--text-body);
    line-height: var(--lh-base);
    margin-bottom: var(--space-2xl);
}


/* ============================================================================
   17. RESPONSIVE — TABLET (max-width: 1024px)
   ============================================================================ */

@media (max-width: 1024px) {

    /* Blog grid collapses from 4 columns to 2 */
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ============================================================================
   18. RESPONSIVE — MOBILE (max-width: 768px)
   ============================================================================ */

@media (max-width: 768px) {

    /* ── Navigation: collapse links, keep only CTA ── */
    .site-nav {
        padding: 0 var(--space-lg);
    }
    .nav-links a:not(.nav-cta) {
        display: none;
    }

    /* ── Home page ── */
    .hero {
        padding: var(--space-3xl) var(--space-lg) 0;
    }
    .hero h1 { font-size: var(--fs-4xl); }
    .hero-tagline { font-size: var(--fs-xl); }
    .hero-description { font-size: var(--fs-base); }
    .btn-blurple,
    .btn-white {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    .feature-row {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    .feature-row.reverse .feature-media,
    .feature-row.reverse .feature-text { order: 0; }
    .feature-text h2 { font-size: var(--fs-2xl); text-align: center; }
    .feature-text p { text-align: center; }
    .values-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: var(--space-3xl) auto 0;
    }
    .apps-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    .apps-section h2 { font-size: var(--fs-2xl); }

    /* ── Retire When page ── */
    .page-hero { min-height: 280px; }
    .page-hero-content { padding: var(--space-3xl) var(--space-lg); }
    .page-hero h1 { font-size: var(--fs-3xl); }
    .page-hero .hero-sub { font-size: var(--fs-lg); }
    .tagline-area p { font-size: var(--fs-xl); }
    .steps-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto;
    }
    .steps-title,
    .screenshot-title { font-size: var(--fs-2xl); }
    .screenshot-wrapper { max-width: 90%; }
    .diff-card { padding: var(--space-xl) var(--space-lg); }

    /* ── Contact page ── */
    .contact-page { padding: var(--space-2xl) var(--space-lg) var(--space-4xl); }
    .contact-intro h1 { font-size: var(--fs-2xl); }
    .contact-form-card { padding: var(--space-xl) var(--space-lg); }

    /* ── Page header (blog + articles) ── */
    .page-header { padding: var(--space-2xl) var(--space-lg); }
    .page-header h1 { font-size: var(--fs-3xl); }
    .page-header .page-subtitle { font-size: var(--fs-lg); }

    /* ── Blog listing ── */
    .blog-area { padding: var(--space-2xl) var(--space-lg) var(--space-4xl); }
    .blog-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    /* ── Blog articles ── */
    .article-wrap { padding: var(--space-2xl) var(--space-lg) var(--space-4xl); }
    .article-title { font-size: var(--fs-2xl); }
    .article-heading { font-size: var(--fs-lg); }

    /* ── Legal pages ── */
    .legal-wrap { padding: var(--space-2xl) var(--space-lg) var(--space-4xl); }
    .legal-heading { font-size: var(--fs-lg); }

    /* ── 404 page ── */
    .error-code { font-size: var(--fs-5xl); }
    .error-title { font-size: var(--fs-xl); }
    .error-message { font-size: var(--fs-base); }

    /* ── Footer (all pages) ── */
    .footer-band-brand {
        flex-direction: column;
    }
    .footer-newsletter {
        width: 100%;
    }
    .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .footer-form {
        flex-wrap: wrap;
    }
}


/* ============================================================================
   19. RESPONSIVE — SMALL MOBILE (max-width: 480px)
   ============================================================================ */

@media (max-width: 480px) {

    .hero h1 { font-size: var(--fs-3xl); }
    .feature-text h2 { font-size: var(--fs-xl); }
    .app-card-header {
        flex-direction: column;
        text-align: center;
    }

    .page-hero h1 { font-size: var(--fs-2xl); }
    .page-hero { min-height: 240px; }
    .screenshot-wrapper { max-width: 95%; }
}