feat: add scroll top mask, unify page top spacing and docs

src/pages/agreement/index.tsx

@@ -4,6 +4,7 @@ import { useThemeContext } from '../../context/ThemeContext'
 import { useSafeArea } from '../../hooks/useSafeArea'
 import { useStatusBar } from '../../hooks/useStatusBar'
 import ThemedPageMeta from '../../components/ThemedPageMeta'
+import ScrollTopMask from '../../components/ScrollTopMask'
 
 export default function AgreementPage() {
   const { theme, resolvedTheme } = useThemeContext()
@@ -36,8 +37,9 @@ export default function AgreementPage() {
   return (
     <View className={`theme-${resolvedTheme}`}>
       <ThemedPageMeta />
+      <ScrollTopMask title="定制协议" targetSelector=".agreement-title" />
       <View className='agreement-page'>
-        <View className='agreement-content' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
+        <View className='agreement-content' style={{ marginTop: `${safe.statusBarHeight + 12}px` }}>
           <Text className='agreement-title'>定制协议</Text>
           {SECTIONS.map((sec, idx) => (
             <View key={idx} className='agreement-section surface-card'>