/* pages.css — page-level styles shared across multiple pages
 * (generic page heroes, the 404 page). Component-specific styles live in
 * css/components/*.css.
 */

/* ── Generic page hero (About / Products / Blog / Contact) ─────────────────── */
.page-hero {
    padding-block: var(--space-20) var(--space-12);
    text-align: center;
}

.page-hero .container {
    max-width: 760px;
}

.page-hero-title {
    margin-bottom: var(--space-4);
}

.page-hero-subtitle {
    font-size: 1.1875rem;
    color: var(--color-text-muted);
}

/* ── Prose (Privacy / Terms) ─────────────────────────────────────────────── */
.prose {
    max-width: 65ch;
}

.prose p {
    color: var(--color-text-muted);
    font-size: 1.0625rem;
    line-height: 1.75;
}

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.error-page {
    padding-block: var(--space-24);
}

.error-page h1 {
    margin-bottom: var(--space-4);
}

.error-page p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}