feat: live preview edit mode document

Author: devvaannsh

docs/08-Features/08-Live Preview/index.md

@@ -77,28 +77,24 @@ The left side of the toolbar groups three controls:
 
 * **Design Mode**: The maximize icon after the reload button is for Design Mode. This mode hides the editor and expands the Live Preview to take over the full window, giving you more room to work on the page with [Edit Mode](../../Pro%20Features/edit-mode-live-preview) or [Phoenix Code AI](../../Pro%20Features/ai-chat). Click the icon again to exit Design Mode.
 
-* **Edit / Preview Toggle**: The pencil icon. Toggles between **Edit Mode** *(Pro)* and **Preview Mode**. The pencil lights up when Edit Mode is active. Press `F8` for the same toggle.
+* **Live Preview Modes**: The pen icon lets you quickly switch between [Edit Mode](../../Pro%20Features/edit-mode-live-preview) and Preview Mode. The pen lights up when Edit Mode is active. You can also press `F8` to toggle between these two modes.
 
-  <VideoPlayer
-    src="https://docs-images.phcode.dev/videos/live-preview-edit/live-preview-edit.mp4"
-  />
-
-* **Mode Dropdown**: The chevron next to the pencil opens a menu of Live Preview modes:
+  For more mode options, click the chevron next to the pen icon. This opens a dropdown where you can select from all available Live Preview modes:
 
   ![Live Preview mode dropdown](../images/livePreview/lp-mode.png "Live Preview mode dropdown")
 
-  - **Preview Mode**: View-only. The page behaves like a normal browser but still updates in real-time as you edit code.
-  - **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.
-  - **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/edit-mode-live-preview).
+  - **Preview Mode**: View-only. The page behaves like a normal browser but still updates as you edit code. All interactions with the page (clicks, hovers, etc.) are disabled.
+  - **Highlight Mode**: Click any element to see its paddings and margins. Phoenix Code also jumps to that element in your source code so you can start editing right away.
+  - **Edit Mode**: Edit elements directly in the preview. Insert elements, change text, drag elements, swap images, and more. Phoenix Code updates your source code automatically. [Learn more](../../Pro%20Features/edit-mode-live-preview).
 
-  <VideoPlayer
-    src="https://docs-images.phcode.dev/videos/live-preview/highlight-mode.mp4"
-  />
+  When Edit Mode is active, two extra options appear in the same dropdown:
 
-  When Edit Mode is active (Pro), two extra options appear in the same dropdown:
+  - **Inspect Element on Hover**: Highlights elements as you hover, instead of only on click. This option is enabled by default. [Learn more](../../Pro%20Features/edit-mode-live-preview#inspect-element-on-hover).
+  - **Show Measurements**: Displays ruler lines from the edges of the selected element to the edges of the Live Preview, with labels showing the exact pixel positions. This option is disabled by default. [Learn more](../../Pro%20Features/measurements).
 
-  - **Inspect Element on Hover**: Highlights elements as you hover, instead of only on click.
-  - **Show Measurements**: Shows ruler-style guide lines around the selected element with its size and spacing.
+  :::note
+  Edit Mode and the two extra options above are Phoenix Pro features.
+  :::
 
 
 ![Live Preview center toolbar](../images/livePreview/lp-central.png "Live Preview pin, file name, and pop out")
@@ -114,8 +110,11 @@ The center section of the toolbar groups three controls for the currently previe
 
 ![Live Preview browsers](../images/livePreview/lp-browsers.png "Live Preview browsers")
 
-* **Browser Icons** — Select a specific browser icon to open the page in that browser. This helps you see how your page looks across different browsers. The icons are hidden by default. You need to hover over the toolbar to reveal them.
-  > This option is available only in Desktop apps.
+* **Browser Icons**: Select a specific browser icon to open the page in that browser. This helps you see how your page looks across different browsers. The icons are hidden by default and only appear when you hover over the toolbar.
+
+  :::note
+  This option is available only in Desktop apps.
+  :::
 
 
 ![Live Preview right toolbar](../images/livePreview/lp-right.png "Live Preview settings and device size")
@@ -124,7 +123,7 @@ The right end of the toolbar has two controls:
 
 * **Live Preview Settings**: The gear icon on the left. Clicking it opens the Live Preview settings dialog. This icon is hidden by default and only appears when you hover over the toolbar. [Read more about Live Preview Settings](./live-preview-settings/#accessing-live-preview-settings).
 
-* **Device Size Presets** *(Pro)*: Resize the Live Preview to common phone, tablet, and desktop widths. Click the icon to cycle through sizes, or click the chevron for the full list. See [Resize Ruler](../../Pro%20Features/resize-ruler) for more.
+* **Device Size Presets**: Resize the Live Preview to common phone, tablet, and desktop widths. Click the icon to cycle through sizes, or click the chevron for the full list. See [Resize Ruler](../../Pro%20Features/resize-ruler) for more.
 
   <VideoPlayer
     src="https://docs-images.phcode.dev/website/videos/device-size-pro-dialog.mp4"