Enlarge watermark badge for preview/encode parity and document video title fields.

Fix double-scaled badge preview, bump default watermark to 42% frame width, and update OSS docs/API for title vs songTitle separation and shared typography.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/LayoutStudio.tsx

@@ -87,12 +87,16 @@ function watermarkOverlayStyle(
   position: WatermarkPosition,
   offsetX: number,
   offsetY: number,
+  sizedBox = false,
 ): CSSProperties {
   const base: CSSProperties = {
     position: "absolute",
-    maxWidth: "32%",
+    maxWidth: `${WATERMARK_WIDTH_FRACTION * 100}%`,
     pointerEvents: "none",
     zIndex: 5,
+    ...(sizedBox
+      ? { width: `${WATERMARK_WIDTH_FRACTION * 100}%` }
+      : null),
   };
   const ox = `${offsetX}px`;
   const oy = `${offsetY}px`;
@@ -347,8 +351,14 @@ export function LayoutStudio({
   );
 
   const wmOverlay = useMemo(
-    () => watermarkOverlayStyle(W.position, W.offsetX, W.offsetY),
-    [W.position, W.offsetX, W.offsetY],
+    () =>
+      watermarkOverlayStyle(
+        W.position,
+        W.offsetX,
+        W.offsetY,
+        W.mode === "default" || W.mode === "logo",
+      ),
+    [W.position, W.offsetX, W.offsetY, W.mode],
   );
 
   const textFontStyle = useMemo(
@@ -569,16 +579,14 @@ export function LayoutStudio({
                   <img
                     src="/api/branding/watermark"
                     alt=""
-                    className="h-auto object-contain"
-                    style={{ width: `${WATERMARK_WIDTH_FRACTION * 100}%` }}
+                    className="h-auto w-full object-contain"
                   />
                 ) : W.mode === "logo" && logoPreviewUrl ? (
                   // eslint-disable-next-line @next/next/no-img-element
                   <img
                     src={logoPreviewUrl}
                     alt=""
-                    className="h-auto object-contain"
-                    style={{ width: `${WATERMARK_WIDTH_FRACTION * 100}%` }}
+                    className="h-auto w-full object-contain"
                   />
                 ) : W.mode === "text" ? (
                   <span