/* ===== Page Hero ===== */
.page-hero { background: var(--header-bg); padding: 80px 24px 60px; text-align: center; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,200,150,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,200,150,.05) 1px, transparent 1px); background-size: 50px 50px; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: white; position: relative; z-index: 1; }
.page-hero p { color: rgba(255,255,255,.65); font-size: 16px; margin-top: 10px; position: relative; z-index: 1; }

/* ===== Page Content ===== */
.page-content { max-width: 860px; margin: 0 auto; padding: 60px 24px 80px; }

/* ===== Prose ===== */
.prose h2 { font-size: 1.2rem; font-weight: 700; margin: 36px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--blue); display: inline-block; }
.prose p { color: var(--text-muted); line-height: 1.8; margin-bottom: 14px; font-size: 15px; }
.prose ul, .prose ol { color: var(--text-muted); padding-left: 22px; margin-bottom: 14px; }
.prose li { margin-bottom: 8px; line-height: 1.7; font-size: 15px; }
.prose a { color: var(--blue); text-decoration: none; }
.prose a:hover { text-decoration: underline; }

/* ===== 404 ===== */
.not-found { min-height: 65vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; }
.not-found-code { font-size: clamp(6rem, 20vw, 10rem); font-weight: 800; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.not-found h2 { font-size: 1.8rem; margin: 12px 0 10px; }
.not-found p { color: var(--text-muted); font-size: 16px; margin-bottom: 32px; }
.not-found-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }