Onboarding flow

app/onboarding/slides.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Image, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
@@ -168,6 +168,8 @@ function splitReminder(text: string): [string, string] {
 
 export default function OnboardingSlidesScreen() {
   const router = useRouter();
+  const { height } = useWindowDimensions();
+  const compact = height < 700;
   const { language, isDarkMode, colorPalette } = useApp();
   const colors = useColors(isDarkMode, colorPalette);
   const posthog = useSafeAnalytics();
@@ -197,13 +199,13 @@ export default function OnboardingSlidesScreen() {
 
   return (
     <View style={[styles.container, { backgroundColor: isDarkMode ? '#0a110b' : '#f8fbef' }]}>
-      <View style={styles.imageArea}>
+      <View style={[styles.imageArea, { height: compact ? '58%' : '65%' }]}>
         <Image
           source={
             page === 0
               ? require('../../assets/paywall_scan_background.png')
               : page === 1
-                ? require('../../assets/onboarding_health_scan_mockup.png')
+                ? require('../../assets/onboarding_health_scan_mockup_vertical.png')
                 : require('../../assets/welcome_botanical_header.png')
           }
           style={styles.image}
@@ -353,7 +355,7 @@ const styles = StyleSheet.create({
   // Health card overlay (slide 2)
   healthCard: {
     position: 'absolute',
-    bottom: 16,
+    bottom: 34,
     left: 16,
     right: 16,
     backgroundColor: 'rgba(255,255,255,0.96)',