/* ============================================================
   Shared Static Page Styles
   Module Prefix: sp- (static-pages)

   Common patterns used across all static pages:
   body defaults, hero section, mobile breakpoints.
   Load BEFORE page-specific CSS files.
   ============================================================ */

/* --- Page defaults --- */
body {
    background-color: var(--color-bg-subtle);
    min-height: 100vh;
}

/* --- Hero section --- */
.hero-section {
    padding: var(--space-xl) 0;
    padding-bottom: 0;
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.hero-title {
    font-size: var(--font-2xl);
    font-weight: var(--font-semibold);
    color: var(--color-text);
    text-align: center;
}

.hero-subtitle {
    font-size: var(--font-base);
    color: var(--color-text-secondary);
    font-weight: var(--font-normal);
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* --- Mobile hero --- */
@media (max-width: 768px) {
    .hero-title {
        font-size: var(--font-xl);
    }

    .hero-subtitle {
        font-size: var(--font-sm);
        padding: 0 var(--space-md);
    }
}