refactor: simplify the explanation of different modes in live preview

Author: devvaannsh

docs/07-Pro Features/01-live-preview-edit.md

@@ -9,11 +9,8 @@ import VideoPlayer from '@site/src/components/Video/player';
 [Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
 :::
 
-**Edit Mode** turns the Live Preview interface into a full-fledged editing environment. It lets you modify elements directly in the preview.
-You can edit text, drag and drop elements, change images and links, inspect elements with precise measurements, and a lot more, right in the Live Preview.   
-**Phoenix Code** automatically updates the source code.
-
-**Edit Mode** also has all the capabilities of **Highlight Mode**, such as moving your cursor in the editor when an element is clicked, and highlighting the corresponding element in Live Preview. It also works in reverse: moving your cursor in the editor highlights the corresponding element in Live Preview.
+**Edit Mode** lets you modify your page directly in the Live Preview. You can edit text, rearrange elements, and update images and links. You can also duplicate, delete, and inspect elements with precise measurements.  
+**Phoenix Code** updates your source code automatically as you make changes.
 
 <VideoPlayer
   src="https://docs-images.phcode.dev/videos/live-preview-edit/live-preview-edit.mp4"

docs/08-Features/06-Live Preview/01-live-preview.md

@@ -79,19 +79,17 @@ Phoenix Code provides various options in the Live Preview toolbar.
 
 ![Live Preview mode](../images/livePreview/lp-mode.png "Live Preview mode")
 
-* **Live Preview Modes** — Live Preview offers 3 modes: **Preview Mode**, **Highlight Mode**, and **Edit Mode**.
+* **Live Preview Modes** - Live Preview offers 3 modes:
 
-  - **Preview Mode**: Disables all editing features. The page appears as it would in a normal browser.
-    > Live Preview still updates in real-time when you edit source code in Preview Mode.
+  - **Preview Mode**: View-only. The page behaves like a normal browser, but still updates in real-time as you edit code.
 
-  - **Highlight Mode**: When you click an element in Live Preview, a highlight marker appears showing the element's position, padding, and margin. Phoenix Code also moves your cursor in the editor to that element so you can start editing directly. Highlighting also works in reverse: moving your cursor in the editor highlights the corresponding element in Live Preview.
+  - **Highlight Mode**: Click any element to see its size, padding, and margins. Phoenix Code jumps to that element in your source code so you can start editing right away.
 
   <VideoPlayer
     src="https://docs-images.phcode.dev/videos/live-preview/highlight-mode.mp4"
   />
 
-  - **Edit Mode**: Allows you to edit Live Preview directly. Phoenix Code will automatically update the source code. [Click here to read more about Live Preview Edit Mode and its features](../../Pro%20Features/live-preview-edit).
-    > The `Inspect Element on Hover` and `Show Measurements` options in the dropdown are Edit Mode features.
+  - **Edit Mode** *(Pro)*: Edit elements directly in the preview-change text, drag elements, swap images, and more. Phoenix Code updates your source code automatically. [Learn more](../../Pro%20Features/live-preview-edit).
 
 ---