<?php
declare(strict_types=1);

if (! defined('ABSPATH')) {
    exit;
}

$h4bsTutorialVideoCatalog = json_decode(
    <<<'H4BS_TUTORIAL_VIDEO_JSON'
[
  {
    "number": 1,
    "slug": "find-and-open-help4-builder",
    "title": "Find and Open Help4 Builder",
    "description": "Open the correct page, recognize the Studio workspace, select nested elements, and find page recovery controls.",
    "guidePath": "/help4-builder-tutorials/",
    "keywords": [
      "open builder",
      "builder pages",
      "studio",
      "navigator"
    ],
    "segments": [
      {
        "label": "Open Builder Pages",
        "screen": "01-builder-pages.png",
        "narration": "Start in WordPress and choose Help4 Builder, then Builder Pages. Find the page you want and open it in Studio. This avoids editing the wrong WordPress object or template."
      },
      {
        "label": "Recognize Studio",
        "screen": "02-studio-overview.png",
        "narration": "Studio has three working areas. Elements and templates are on the left, your live page is in the center, and the selected element settings appear on the right."
      },
      {
        "label": "Use Navigator",
        "screen": "03-navigator.png",
        "narration": "When a page is busy, open Navigator. Select the exact section, heading, button, or image by name instead of trying to click through overlapping content."
      },
      {
        "label": "Know Your Recovery Controls",
        "screen": "14-page-settings.png",
        "narration": "Before a larger change, open Page Settings and confirm the page mode and history controls. You now know where to recover without rebuilding the page."
      }
    ],
    "filename": "01-find-and-open-help4-builder.mp4",
    "poster": "01-find-and-open-help4-builder.webp",
    "captions": "01-find-and-open-help4-builder.vtt",
    "transcript": "01-find-and-open-help4-builder.txt",
    "duration": "PT42S",
    "sha256": {
      "video": "85c9d1b29824cd3acc554d0509d10dd3bbab2f98f1222288b3c74a542d35711d",
      "poster": "67f27334d4f1c0b12e470af25089e82bb40ea94d3e52abecd3ec4bcb39248d75",
      "captions": "3f16c7fcc45df538c49965e2957ca95450d81e9a1e2da124bd47f0ad04d5fd84",
      "transcript": "b0790bd1bfaa61d77572aad674107f6a8a8a7d2fcbd84a043e17b4358363958b"
    }
  },
  {
    "number": 2,
    "slug": "edit-text-and-responsive-style",
    "title": "Edit Text and Responsive Style",
    "description": "Change heading content, typography, spacing, and mobile values while keeping semantic structure intact.",
    "guidePath": "/help4-builder-editor-controls/",
    "keywords": [
      "edit text",
      "heading",
      "typography",
      "responsive style"
    ],
    "segments": [
      {
        "label": "Edit the Words",
        "screen": "04-heading-content.png",
        "narration": "Select the heading and begin in Content. Replace only the words you need. Keep one meaningful H1 for the page, and use H2 or H3 for sections underneath it."
      },
      {
        "label": "Open Design",
        "screen": "05-heading-design.png",
        "narration": "Move to Design for font family, weight, size, line height, color, spacing, and alignment. These controls change appearance without replacing the content."
      },
      {
        "label": "Set Mobile Values",
        "screen": "06-heading-mobile.png",
        "narration": "Choose the Mobile device context before changing small-screen size or spacing. A mobile value can differ from desktop while the original desktop value stays intact."
      },
      {
        "label": "Review Then Save",
        "screen": "02-studio-overview.png",
        "narration": "Look at the center preview after each meaningful change. Check desktop, tablet, and mobile, then save only when the text and spacing look correct in every view."
      }
    ],
    "filename": "02-edit-text-and-responsive-style.mp4",
    "poster": "02-edit-text-and-responsive-style.webp",
    "captions": "02-edit-text-and-responsive-style.vtt",
    "transcript": "02-edit-text-and-responsive-style.txt",
    "duration": "PT44S",
    "sha256": {
      "video": "6b1739f91926e91106eb89875ddeafd56db49472c6e7c9292134f9a96c49aea7",
      "poster": "84efd845db1e24427cd736253a297aec645219b80c147efe18d59a7de9a88621",
      "captions": "84ac66f73262b21133123f1f9f0a1b6217a606b7a42eca29be520f6f4e9b00eb",
      "transcript": "6c4e4f6f0bbad27b0b61f56941340d92bd4260a046c19c708106d9253d12a43b"
    }
  },
  {
    "number": 3,
    "slug": "replace-an-image-safely",
    "title": "Replace an Image Safely",
    "description": "Replace image media, write useful alternative text, and verify responsive fit without deleting the surrounding layout.",
    "guidePath": "/help4-builder-images-media/",
    "keywords": [
      "replace image",
      "alt text",
      "media",
      "image fit"
    ],
    "segments": [
      {
        "label": "Select Only the Image",
        "screen": "03-navigator.png",
        "narration": "Use Navigator to select the image element itself. Do not remove the parent section or an HTML block when your goal is only to replace one picture."
      },
      {
        "label": "Choose the New Media",
        "screen": "09-image-content.png",
        "narration": "In Content, choose the media item or enter the approved image URL. Keep the existing element ID so surrounding styles, links, and responsive rules remain attached."
      },
      {
        "label": "Describe the Image",
        "screen": "09-image-content.png",
        "narration": "Add concise alternative text that explains the image's purpose. Decorative images can use empty alt text, but informative images need a useful description for visitors using assistive technology."
      },
      {
        "label": "Check Every View",
        "screen": "06-heading-mobile.png",
        "narration": "Switch through desktop, tablet, and mobile. Confirm the image does not crop important content, stretch, disappear, or force the page wider than the screen before saving."
      }
    ],
    "filename": "03-replace-an-image-safely.mp4",
    "poster": "03-replace-an-image-safely.webp",
    "captions": "03-replace-an-image-safely.vtt",
    "transcript": "03-replace-an-image-safely.txt",
    "duration": "PT47S",
    "sha256": {
      "video": "cdc49c7f0606d8a062d5541ab32d489725adb3522c888cc757eca89fd91877eb",
      "poster": "1cf6056f18dc084a87de3469e4ae0aed1cec52d6d6b9df0c925966df56e7acc8",
      "captions": "17898692c7b266baed7e5f0419ed141f34f437e7bb927687b46e0965910c042c",
      "transcript": "230b6def9c558a3ee892d488de61602cc6ff953406d88820d73364301272fb7d"
    }
  },
  {
    "number": 4,
    "slug": "page-settings-history-and-recovery",
    "title": "Page Settings, History, and Recovery",
    "description": "Use page-level settings, responsive preview, revision history, and recovery controls before publishing a larger change.",
    "guidePath": "/help4-builder-safe-editing-recovery/",
    "keywords": [
      "page settings",
      "history",
      "revision",
      "recovery"
    ],
    "segments": [
      {
        "label": "Open Page Settings",
        "screen": "14-page-settings.png",
        "narration": "Open Page Settings from the Studio toolbar. This area controls the page-level Builder mode, layout behavior, and recovery tools rather than one individual element."
      },
      {
        "label": "Confirm the Right Page",
        "screen": "02-studio-overview.png",
        "narration": "Read the page title at the top of Studio before making changes. On sites with templates and similarly named pages, this simple check prevents expensive mistakes."
      },
      {
        "label": "Use History Deliberately",
        "screen": "14-page-settings.png",
        "narration": "Use the available history or recovery entry when a recent edit caused a problem. Restore the smallest known-good state, then verify the page instead of repeatedly changing unrelated controls."
      },
      {
        "label": "Preview Before Publishing",
        "screen": "02-studio-overview.png",
        "narration": "Review the live preview at desktop, tablet, and mobile. Publish only after content, links, spacing, and important interactions still behave as expected."
      }
    ],
    "filename": "04-page-settings-history-and-recovery.mp4",
    "poster": "04-page-settings-history-and-recovery.webp",
    "captions": "04-page-settings-history-and-recovery.vtt",
    "transcript": "04-page-settings-history-and-recovery.txt",
    "duration": "PT46S",
    "sha256": {
      "video": "d2b0c003ebb106e650243c39c3684c8a7f3e96a0c7abbd91efea9ebbdba6ab81",
      "poster": "7c1fed09c7c9ba2ea95bb2523c48f4a1e9798ed18a40d47d3bfaa55ae1172d0b",
      "captions": "ab4617f3dbbb6606b589ee5df227c042a75010d8ca39670921196c7982c990ac",
      "transcript": "0f48f4f052fb596b99f5cae3aab8174ebdfabd8663103e62da858048b3f2cef2"
    }
  },
  {
    "number": 5,
    "slug": "safe-builder-editing-workflow",
    "title": "A Safe Builder Editing Workflow",
    "description": "Make one controlled change at a time, inspect the correct element, verify responsive output, and recover cleanly if needed.",
    "guidePath": "/help4-builder-tutorials/",
    "keywords": [
      "safe editing",
      "avoid broken page",
      "workflow",
      "publish"
    ],
    "segments": [
      {
        "label": "Select by Name",
        "screen": "03-navigator.png",
        "narration": "Begin with Navigator and select the element by name. This is safer than deleting a row or replacing raw HTML when you only need to change text, a link, or an image."
      },
      {
        "label": "Change One Thing",
        "screen": "04-heading-content.png",
        "narration": "Change one logical item at a time. After editing content, pause and inspect the preview. Small steps make it clear which change caused a visual problem."
      },
      {
        "label": "Check Responsive Design",
        "screen": "06-heading-mobile.png",
        "narration": "Review desktop, tablet, and mobile contexts before saving. Watch for clipped text, unexpected wrapping, missing media, and controls that become too small to use."
      },
      {
        "label": "Recover, Do Not Rebuild",
        "screen": "14-page-settings.png",
        "narration": "If the page goes wrong, stop editing and use Page Settings or history. Recover the last good state first, then retry the intended change with the correct element selected."
      }
    ],
    "filename": "05-safe-builder-editing-workflow.mp4",
    "poster": "05-safe-builder-editing-workflow.webp",
    "captions": "05-safe-builder-editing-workflow.vtt",
    "transcript": "05-safe-builder-editing-workflow.txt",
    "duration": "PT45S",
    "sha256": {
      "video": "818bdec1188551e6553e74206954a8e2437dd18420bee1e44caba3082a910068",
      "poster": "20fa6cc9d853668d30451106db4228fdc7474445e7e47562851b73633302ac1f",
      "captions": "56a3ecc71337ddd4b86d7696008bb32ce838194dc4c722677e6d84f8023491e9",
      "transcript": "a2b95dabbf55db38b0dbea0547fe93040ef7587072069d6850a0ac75f96530cf"
    }
  },
  {
    "number": 6,
    "slug": "build-and-style-buttons",
    "title": "Build and Style Buttons",
    "description": "Set a button label and destination, style normal and interaction states, and tune padding for each device.",
    "guidePath": "/help4-builder-buttons-typography-spacing/",
    "keywords": [
      "button",
      "link",
      "hover",
      "padding"
    ],
    "segments": [
      {
        "label": "Set Label and Link",
        "screen": "07-button-content.png",
        "narration": "Select the Button element and begin in Content. Write a specific action label, enter the correct destination, and choose new-tab behavior only when it helps the visitor."
      },
      {
        "label": "Style the Normal State",
        "screen": "08-button-design.png",
        "narration": "In Design, set typography, text and background colors, border, radius, and padding. Keep the button easy to recognize and large enough to tap."
      },
      {
        "label": "Check Interaction States",
        "screen": "08-button-design.png",
        "narration": "Switch between normal and hover settings. Use a visible state change while preserving readable contrast. Keyboard focus must remain obvious instead of disappearing into the page."
      },
      {
        "label": "Tune Each Device",
        "screen": "06-heading-mobile.png",
        "narration": "Use device-specific controls for mobile padding, alignment, or width. Confirm the label stays inside the button and the button does not push the page sideways."
      }
    ],
    "filename": "06-build-and-style-buttons.mp4",
    "poster": "06-build-and-style-buttons.webp",
    "captions": "06-build-and-style-buttons.vtt",
    "transcript": "06-build-and-style-buttons.txt",
    "duration": "PT44S",
    "sha256": {
      "video": "e284b37b89ea40d08334feec72d00620da39207939802081efb07d92d049875f",
      "poster": "58c81cc11844708ea046fc47148b7634f665df96f4cf00f175237daed6530575",
      "captions": "70039e2e4052cfeb606fdbe5eca736d4cdc2d7399d6494c6f62e1f94c54ff4bf",
      "transcript": "10447288ab7c9c0a1f4a4bc928b23d04f9f56f03362fd2ffa8823191a095af88"
    }
  },
  {
    "number": 7,
    "slug": "sections-containers-and-columns",
    "title": "Sections, Containers, and Columns",
    "description": "Understand the layout hierarchy, choose grid or flex behavior, and set responsive gaps, widths, and stacking.",
    "guidePath": "/help4-builder-sections-containers-columns/",
    "keywords": [
      "section",
      "container",
      "columns",
      "grid",
      "flex"
    ],
    "segments": [
      {
        "label": "Read the Hierarchy",
        "screen": "03-navigator.png",
        "narration": "Navigator shows the page hierarchy. A section contains columns or inner containers, and those containers hold headings, images, buttons, and other content elements."
      },
      {
        "label": "Choose the Layout",
        "screen": "10-section-design.png",
        "narration": "Select the parent section and open Design. Choose grid or flex behavior, then set column structure, alignment, wrapping, content width, and overflow intentionally."
      },
      {
        "label": "Control Space",
        "screen": "10-section-design.png",
        "narration": "Use gap for space between children and padding for space inside the parent. Avoid stacking large margins and padding until the layout becomes unpredictable."
      },
      {
        "label": "Set Responsive Structure",
        "screen": "06-heading-mobile.png",
        "narration": "On tablet and mobile, change columns, stacking, gap, width, and alignment as needed. The mobile layout should read in a logical order without custom CSS."
      }
    ],
    "filename": "07-sections-containers-and-columns.mp4",
    "poster": "07-sections-containers-and-columns.webp",
    "captions": "07-sections-containers-and-columns.vtt",
    "transcript": "07-sections-containers-and-columns.txt",
    "duration": "PT44S",
    "sha256": {
      "video": "b48e93383781b9c89dc9b284b21113dfb698bde051134175969bc9e638b6aa54",
      "poster": "e6b12ab8a97bc4ecb9858ebd043e79916a6fdffffee7154a736dfc1872fbd0b5",
      "captions": "8d7ed7e7d62ffb34278c8e493da0bb9e6ec0275b03a873cf3f93ba1bcaef8e61",
      "transcript": "86714e2e59734ccf16a8af36c855b05aab98f9261326697ae7e50d44432ea012"
    }
  },
  {
    "number": 8,
    "slug": "headers-menus-and-mobile-navigation",
    "title": "Headers, Menus, and Mobile Navigation",
    "description": "Create a reusable header, add a native menu, configure dropdown and mobile behavior, and assign it safely.",
    "guidePath": "/help4-builder-menus-headers-footers/",
    "keywords": [
      "header",
      "menu",
      "dropdown",
      "mobile navigation",
      "hamburger"
    ],
    "segments": [
      {
        "label": "Create a Header Template",
        "screen": "15-theme-builder.png",
        "narration": "Open Theme Builder and create or edit a header template. Reusable headers belong here so one controlled update can reach the assigned parts of the site."
      },
      {
        "label": "Insert the Menu Widget",
        "screen": "13-widget-library.png",
        "narration": "In Studio, search the widget library for Menu. Insert the native component, then select the WordPress menu you want visitors to use."
      },
      {
        "label": "Configure Navigation",
        "screen": "02-studio-overview.png",
        "narration": "Set desktop orientation, dropdown behavior, submenu spacing, mobile breakpoint, and the compact menu trigger. Check that pointer and keyboard users can reach every submenu item."
      },
      {
        "label": "Assign and Test",
        "screen": "15-theme-builder.png",
        "narration": "Save the template conditions, then test a normal page on desktop and mobile. The mobile trigger should be visible, named, and able to open and close the complete menu."
      }
    ],
    "filename": "08-headers-menus-and-mobile-navigation.mp4",
    "poster": "08-headers-menus-and-mobile-navigation.webp",
    "captions": "08-headers-menus-and-mobile-navigation.vtt",
    "transcript": "08-headers-menus-and-mobile-navigation.txt",
    "duration": "PT43S",
    "sha256": {
      "video": "3291ba5565df40dc185169726ad9c568536d21a5bafbf754dda5a9377523c03c",
      "poster": "9fa8f89ea7844b61b09aa39f22d1db9bf0b8b7576a43caec80923fb24d695fca",
      "captions": "994d8f528d361dd9a84ac0673c095fff7fc62636ed89865d32be2270d447c14b",
      "transcript": "6d0c2aa193ef5137190caff68b29c2818c58b41f64c76b7cb4cb5c7181fae7d8"
    }
  },
  {
    "number": 9,
    "slug": "forms-lead-delivery-and-spam-protection",
    "title": "Forms, Lead Delivery, and Spam Protection",
    "description": "Create a form, add it to a page, configure delivery and consent, and test the full submission path.",
    "guidePath": "/help4-builder-forms-lead-capture/",
    "keywords": [
      "form",
      "lead",
      "email delivery",
      "spam protection",
      "consent"
    ],
    "segments": [
      {
        "label": "Create the Form",
        "screen": "16-forms.png",
        "narration": "Open Help4 Forms and create the form record first. Give it a clear internal name so editors can choose the correct form later without guessing."
      },
      {
        "label": "Place It on the Page",
        "screen": "13-widget-library.png",
        "narration": "In Studio, insert the Form widget and select the saved form. Keep labels visible, mark required fields accurately, and use fields that match the actual follow-up workflow."
      },
      {
        "label": "Configure Delivery",
        "screen": "16-forms.png",
        "narration": "Set the recipient, reply behavior, confirmation message, consent text, retention, and spam controls. Do not assume a form works merely because it looks correct."
      },
      {
        "label": "Submit a Real Test",
        "screen": "02-studio-overview.png",
        "narration": "Publish to the approved test page and submit from desktop and mobile. Confirm validation, success messaging, stored submission, notification delivery, and the reply path end to end."
      }
    ],
    "filename": "09-forms-lead-delivery-and-spam-protection.mp4",
    "poster": "09-forms-lead-delivery-and-spam-protection.webp",
    "captions": "09-forms-lead-delivery-and-spam-protection.vtt",
    "transcript": "09-forms-lead-delivery-and-spam-protection.txt",
    "duration": "PT44S",
    "sha256": {
      "video": "9155b0465b717c08ef0ab40d4ca229caad76ba9d04138cc6f4ff8adb7de29bb0",
      "poster": "e8728828d69bf7f4eb589e9447f34b9495fd6f1570a551df89f43c4bad336552",
      "captions": "9c7b676dff79135d6847caedc031e3a5977170ca58748c669a8ed7b4878be771",
      "transcript": "cfef02aab73c733c0c4644cbd3f4e622c7c8fc036942cfbba6e605fdc4d79e1c"
    }
  },
  {
    "number": 10,
    "slug": "templates-site-kits-and-safe-imports",
    "title": "Templates, Site Kits, and Safe Imports",
    "description": "Choose reusable templates or style packs, understand import modes, and protect existing page content during application.",
    "guidePath": "/help4-builder-template-library/",
    "keywords": [
      "templates",
      "site kits",
      "style pack",
      "import"
    ],
    "segments": [
      {
        "label": "Browse Templates",
        "screen": "11-template-library.png",
        "narration": "Open Templates in Studio to browse reusable sections and page structures. Preview the purpose and responsive shape before inserting anything into the current page."
      },
      {
        "label": "Review Site Kits",
        "screen": "12-site-kits.png",
        "narration": "Site Kits coordinate colors, typography, buttons, spacing, and related templates. Choose a kit that matches the site's purpose, not only its thumbnail."
      },
      {
        "label": "Choose the Right Mode",
        "screen": "12-site-kits.png",
        "narration": "Use style-only application when existing content and block IDs must remain. Use a starter-layout replacement only when you intentionally want to replace the current structure."
      },
      {
        "label": "Verify the Result",
        "screen": "02-studio-overview.png",
        "narration": "After applying a template or kit, check content, links, global styles, desktop, tablet, and mobile. Use history immediately if the selected mode changed more than intended."
      }
    ],
    "filename": "10-templates-site-kits-and-safe-imports.mp4",
    "poster": "10-templates-site-kits-and-safe-imports.webp",
    "captions": "10-templates-site-kits-and-safe-imports.vtt",
    "transcript": "10-templates-site-kits-and-safe-imports.txt",
    "duration": "PT44S",
    "sha256": {
      "video": "0578a102e5195ee3d2f9914ff89bb374e6f5432e215eb425fea8cc98b480faf5",
      "poster": "8fca8ec1f9d73395bf0a9214401f455037b7195d18bc4433370ddb40ce8a6020",
      "captions": "d6f1607f08a3f179bb9e457c7e76d6d281ef430228dee907febf916fed1c4f06",
      "transcript": "99e7129be05d3efc1004f7b4f56826d9f53ea028f9f24175a0c3b8c7256e7424"
    }
  },
  {
    "number": 11,
    "slug": "seo-social-sharing-and-readability",
    "title": "SEO, Social Sharing, and Readability",
    "description": "Review search metadata, social images, schema, indexability, and readability without replacing human-focused page content.",
    "guidePath": "/help4-seo-local-international-indexnow/",
    "keywords": [
      "SEO",
      "social image",
      "schema",
      "readability",
      "indexing"
    ],
    "segments": [
      {
        "label": "Open SEO Control",
        "screen": "17-seo-control.png",
        "narration": "Open SEO Control to see sitewide indexing health and content gaps. Start with real errors such as missing titles, descriptions, canonicals, or social images."
      },
      {
        "label": "Write Useful Metadata",
        "screen": "04-heading-content.png",
        "narration": "Give each important page a specific search title and description that match its visible purpose. Avoid stuffing repeated phrases that make the result harder to understand."
      },
      {
        "label": "Set Social and Schema",
        "screen": "09-image-content.png",
        "narration": "Choose a clear social image and accurate alternative text. Select schema that describes the real page, business, product, article, event, or service rather than forcing a generic type."
      },
      {
        "label": "Review Before Indexing",
        "screen": "17-seo-control.png",
        "narration": "Check readability, links, canonical URL, robots settings, sitemap coverage, and structured data. Keep drafts and staging pages out of search until the content is ready."
      }
    ],
    "filename": "11-seo-social-sharing-and-readability.mp4",
    "poster": "11-seo-social-sharing-and-readability.webp",
    "captions": "11-seo-social-sharing-and-readability.vtt",
    "transcript": "11-seo-social-sharing-and-readability.txt",
    "duration": "PT47S",
    "sha256": {
      "video": "280af82c1b20b7834c572313442c84f477bf1a3f3d1b4e78cf5d7f1db093db5e",
      "poster": "b7419bc06b987522c94364dc12f887bc336f2de62a6421c3222481142733ebf0",
      "captions": "838493260b9e4448588c76d40163cddec3e351633777c0097030b81b403e4418",
      "transcript": "52988fad20eb018e4bec5ebbff7c89a84d0277bc8142918a9da2d4ffe506a363"
    }
  },
  {
    "number": 12,
    "slug": "commerce-products-quantity-and-checkout",
    "title": "Commerce Products, Quantity, and Checkout",
    "description": "Create a native product, configure purchase and quantity rules, and verify the checkout and order path.",
    "guidePath": "/help4-commerce-products-variations-customer-fields/",
    "keywords": [
      "commerce",
      "product",
      "quantity",
      "checkout",
      "variations"
    ],
    "segments": [
      {
        "label": "Open Native Products",
        "screen": "19-products.png",
        "narration": "Open Commerce, then Products. Native Catalog mode lets you create simple, service, digital, booking, variable, and subscription products without adding a separate store plugin."
      },
      {
        "label": "Describe the Product",
        "screen": "20-product-editor.png",
        "narration": "Set the name, SKU, status, price, stock, description, image, tax behavior, fulfillment, and customer requirements. Use variants when options need their own price, stock, image, or SKU."
      },
      {
        "label": "Set Quantity Rules",
        "screen": "21-product-quantity-rules.png",
        "narration": "Turn off customer quantity when a configured package must stay one unit per cart line. Customers can still add another separately. Use the order-limit option only when the whole order may contain one."
      },
      {
        "label": "Test the Full Order",
        "screen": "18-commerce.png",
        "narration": "Run a test from product display through cart, payment routing, confirmation, inventory, customer record, and order status. Verify both normal quantity products and fixed one-per-line products."
      }
    ],
    "filename": "12-commerce-products-quantity-and-checkout.mp4",
    "poster": "12-commerce-products-quantity-and-checkout.webp",
    "captions": "12-commerce-products-quantity-and-checkout.vtt",
    "transcript": "12-commerce-products-quantity-and-checkout.txt",
    "duration": "PT50S",
    "sha256": {
      "video": "1eb88f7ca0740885c781459a5c531322bf8bca62b18ad04afc1beec5410d7ef8",
      "poster": "83f16889a39a390bfe2a094e1af1f571161ad3f7ae7dfbafbd3650035a4ed19c",
      "captions": "f93ebe1102b36a7e145444118d902b5ea1a25088f2fa7fff56a36b117651dfc9",
      "transcript": "1e825fc9dd3688f2b46d9800fd3c4bc50a270c5f33469ea25a2ef1afeb9f70f7"
    }
  },
  {
    "number": 13,
    "slug": "global-styles-and-theme-packs",
    "title": "Global Styles and Theme Packs",
    "description": "Set reusable color, typography, spacing, and component styles while protecting the page structure already in place.",
    "guidePath": "/help4-builder-global-styles-theme-packs/",
    "keywords": [
      "global styles",
      "theme pack",
      "design tokens",
      "style only"
    ],
    "segments": [
      {
        "label": "Open the Theme Library",
        "screen": "23-global-theme-packs.png",
        "narration": "Open Themes in Builder Studio to review style packs. A style pack coordinates semantic colors, typography, buttons, forms, and spacing. Preview its purpose before applying it, because one global choice can affect every Builder page that inherits the token."
      },
      {
        "label": "Use Style-Only Mode",
        "screen": "23-global-theme-packs.png",
        "narration": "Choose Apply Style when you want the design system without replacing the current page blocks. Use Style plus Starter only for an intentional new structure. On an existing site, style-only mode is the safer starting point because content and element IDs remain in place."
      },
      {
        "label": "Check an Inherited Element",
        "screen": "05-heading-design.png",
        "narration": "Select a heading, button, or form control after applying global styles. Confirm the element is inheriting the intended token instead of carrying an old literal value. Resetting an override should return to the semantic token, not introduce another unrelated color or font."
      },
      {
        "label": "Verify Every Device",
        "screen": "06-heading-mobile.png",
        "narration": "Review desktop, tablet, and mobile before saving global changes. Typography and spacing may inherit globally while responsive values remain device-specific. Check contrast, wrapping, tap size, and page width on several important templates, then save the global revision once."
      }
    ],
    "filename": "13-global-styles-and-theme-packs.mp4",
    "poster": "13-global-styles-and-theme-packs.webp",
    "captions": "13-global-styles-and-theme-packs.vtt",
    "transcript": "13-global-styles-and-theme-packs.txt",
    "duration": "PT1M11S",
    "sha256": {
      "video": "f30aef3291d7fefee7b158fb5bd5702a2e13acc30adbb4973167b387226421c6",
      "poster": "b84c466116272a24846a3c4865c78c754b6578b5e0d071a48fcc8d51fffcc81f",
      "captions": "88d6c583c427750a820cf313e576b6cf651399d85cd5d5b884f69430cf915ab6",
      "transcript": "e1c89ac3ed39369ad1f5190bcc928c84f7a93d4463b4d803c74401efe3f736fb"
    }
  },
  {
    "number": 14,
    "slug": "theme-builder-conditions-and-reuse",
    "title": "Theme Builder Conditions and Reuse",
    "description": "Create reusable site templates and assign them to the correct content without duplicate headers, footers, or archive output.",
    "guidePath": "/help4-theme-builder-template-conditions/",
    "keywords": [
      "theme builder",
      "template conditions",
      "header",
      "footer",
      "archive"
    ],
    "segments": [
      {
        "label": "Choose the Template Role",
        "screen": "15-theme-builder.png",
        "narration": "Open Theme Builder and choose the job first: header, footer, page shell, post, archive, search, 404, popup, or canvas page. Giving the template one clear role keeps the same layout from appearing twice or being inserted once for every archive result."
      },
      {
        "label": "Build Reusable Structure",
        "screen": "11-template-library.png",
        "narration": "Open the template in Studio and insert only the reusable structure that belongs to its role. Keep page-specific copy in the page layout or dynamic fields. A global header or footer should not quietly contain content meant for one campaign or one customer."
      },
      {
        "label": "Set Narrow Conditions",
        "screen": "14-page-settings.png",
        "narration": "Set scope, content type, includes, excludes, and priority as narrowly as the job requires. Start with a draft assignment, confirm a representative route, and avoid competing templates with the same priority. Specific exclusions should win when a checkout or canvas page needs a different shell."
      },
      {
        "label": "Test Assigned Routes",
        "screen": "02-studio-overview.png",
        "narration": "Check Studio and public output on a normal page, a matching singular item, an archive, search, 404, and mobile navigation where relevant. Confirm exactly one assigned template renders, required assets load, interactive controls work, and an unrelated route remains unchanged."
      }
    ],
    "filename": "14-theme-builder-conditions-and-reuse.mp4",
    "poster": "14-theme-builder-conditions-and-reuse.webp",
    "captions": "14-theme-builder-conditions-and-reuse.vtt",
    "transcript": "14-theme-builder-conditions-and-reuse.txt",
    "duration": "PT1M13S",
    "sha256": {
      "video": "85971c4c6684325566b450eb14de10e3ce871c8312d2191e309f4a00efc577bf",
      "poster": "928956989e07c96de766460a6bea3f5407c4b17fe074059251a231a9e3258cfc",
      "captions": "6b624403e1c6156f831be34c156435d23c438e947e36170582b3c8debfadf465",
      "transcript": "fc36f6996dde65ede60661a8eb7feffefc8d3d18f10ad8c8650a121bdd36c8f8"
    }
  },
  {
    "number": 15,
    "slug": "custom-fields-and-dynamic-data",
    "title": "Custom Fields and Dynamic Data",
    "description": "Model reusable content with typed fields, then bind approved post, taxonomy, user, product, and relationship values safely.",
    "guidePath": "/help4-builder-dynamic-data/",
    "keywords": [
      "custom fields",
      "dynamic data",
      "repeater",
      "relationship",
      "product data"
    ],
    "segments": [
      {
        "label": "Model the Content",
        "screen": "26-fields-lab.png",
        "narration": "Open Fields Lab before building the template. Create stable field names and choose the correct types for text, images, choices, repeaters, groups, relationships, maps, and private values. Use conditional logic only when it makes the editing form easier to understand."
      },
      {
        "label": "Choose an Approved Source",
        "screen": "22-dynamic-data-widgets.png",
        "narration": "In the Widget library, search for dynamic. Choose the source that owns the value, such as the current post, taxonomy term, author, site, product, variant, or approved post metadata. Add a sensible fallback so a missing optional value does not break the layout."
      },
      {
        "label": "Place Dynamic Output",
        "screen": "13-widget-library.png",
        "narration": "Insert the dynamic widget or shortcode into a reusable template, then bind only the property needed for that element. Use the proper output format for text, links, images, lists, currency, dates, or structured content rather than forcing raw HTML into every page."
      },
      {
        "label": "Test More Than One Record",
        "screen": "02-studio-overview.png",
        "narration": "Preview the template with several real records, including one with a missing optional field and one with a longer value. Verify escaping, links, image alternatives, repeaters, mobile wrapping, and private-field rules. A template is not proven by the easiest record alone."
      }
    ],
    "filename": "15-custom-fields-and-dynamic-data.mp4",
    "poster": "15-custom-fields-and-dynamic-data.webp",
    "captions": "15-custom-fields-and-dynamic-data.vtt",
    "transcript": "15-custom-fields-and-dynamic-data.txt",
    "duration": "PT1M10S",
    "sha256": {
      "video": "8d13bf9d4ddc5588bc313eb8bc894f101c5c56729250088c0f925c5f9fd17de0",
      "poster": "b3d6e4bfc81a0655879bf8558fd8979161bfc17ca85b934af03453da4445a6bc",
      "captions": "7dd0f3e21283e7f14dc1e078e749aa78c42be2de22b8c8b5f512dc5c9483f422",
      "transcript": "dc5211071ac9c5e3c2f7249e7f8791b716c705596372c6ac073e64f9c68fd465"
    }
  },
  {
    "number": 16,
    "slug": "sliders-motion-and-video-fallbacks",
    "title": "Sliders, Motion, and Video Fallbacks",
    "description": "Configure accessible sliders and video with responsive sizing, reduced motion, HLS primary playback, and dependable fallbacks.",
    "guidePath": "/help4-builder-motion-sliders/",
    "keywords": [
      "slider",
      "motion",
      "reduced motion",
      "HLS",
      "video fallback"
    ],
    "segments": [
      {
        "label": "Configure the Slider Source",
        "screen": "24-slider-motion-controls.png",
        "narration": "Select the Slider element and choose saved slides or approved dynamic content. Set a deliberate order, limit, image fit, and responsive height. Keep keyboard, swipe, arrows, dots, and a pause control available whenever the slider advances or changes content automatically."
      },
      {
        "label": "Use Motion with Restraint",
        "screen": "24-slider-motion-controls.png",
        "narration": "Choose the transition, duration, delay, easing, and optional image motion for a clear purpose. Avoid rapid autoplay or movement that hides information before it can be read. Reduced-motion visitors should receive a stable version without losing the slide content or controls."
      },
      {
        "label": "Build the Video Fallback Chain",
        "screen": "25-video-hls-fallback-controls.png",
        "narration": "For video, set HLS as the primary stream when available, then provide a compatible MP4, WebM, or media-library fallback. Add a poster and a separate failure image. Configure controls, preload, fit, title, mute, loop, and autoplay according to the video's actual role."
      },
      {
        "label": "Verify Playback and Layout",
        "screen": "06-heading-mobile.png",
        "narration": "Test desktop, tablet, and mobile with normal and reduced motion. Check HLS support, file fallback, blocked autoplay, poster loading, failure image, captions where speech matters, keyboard controls, focal framing, and page containment. A working administrator preview is not the final playback test."
      }
    ],
    "filename": "16-sliders-motion-and-video-fallbacks.mp4",
    "poster": "16-sliders-motion-and-video-fallbacks.webp",
    "captions": "16-sliders-motion-and-video-fallbacks.vtt",
    "transcript": "16-sliders-motion-and-video-fallbacks.txt",
    "duration": "PT1M13S",
    "sha256": {
      "video": "8a07f168455a9dec4b350052181eafbfebb346f63cdd4801c7737fcfa173ba6a",
      "poster": "e9af5dae3208b3c2c0d67d73ad233d7fa01ff8fff9e924d7c0c02e1ef93e6a08",
      "captions": "5ae1c47d16d0f808767a29b0aac69752de3e6c7af2e1183bcb04adfdbecfd4d1",
      "transcript": "2435f7254997a4520797252f47bcae1edacd808fa21ad72ea472928b2dcaf56e"
    }
  },
  {
    "number": 17,
    "slug": "seo-scores-readability-and-schema",
    "title": "SEO Scores, Readability, and Schema",
    "description": "Use page-specific search, readability, social, and structured-data checks to improve useful content without chasing a cosmetic score.",
    "guidePath": "/help4-builder-seo-security-performance/",
    "keywords": [
      "SEO score",
      "readability",
      "social image",
      "schema",
      "canonical"
    ],
    "segments": [
      {
        "label": "Start with the Health Report",
        "screen": "17-seo-control.png",
        "narration": "Open SEO Control and review the page-specific findings. Prioritize missing titles, descriptions, canonicals, social images, indexability mistakes, broken sitemap routes, and absent structured data. A high score is useful only when the visible page also answers the visitor's real question."
      },
      {
        "label": "Align Metadata and Content",
        "screen": "04-heading-content.png",
        "narration": "Write one clear page heading, a specific search title, and a useful description that describe the same purpose. Review paragraph length, headings, links, and reading difficulty for the intended audience. Do not repeat a phrase until the copy becomes awkward or less informative."
      },
      {
        "label": "Set Social and Schema Details",
        "screen": "09-image-content.png",
        "narration": "Choose a relevant 1200 by 630 social image or an approved sitewide fallback, and verify its alternative text where the image is visible. Select schema that matches the real page entity, then complete required business, product, article, event, or service properties truthfully."
      },
      {
        "label": "Verify the Public Source",
        "screen": "17-seo-control.png",
        "narration": "Open the public URL and confirm one title, one canonical, robots directives, Open Graph and messaging metadata, social image URLs, structured data, and sitemap status. Test an indexable page and a draft or private page so the controls prove both inclusion and exclusion behavior."
      }
    ],
    "filename": "17-seo-scores-readability-and-schema.mp4",
    "poster": "17-seo-scores-readability-and-schema.webp",
    "captions": "17-seo-scores-readability-and-schema.vtt",
    "transcript": "17-seo-scores-readability-and-schema.txt",
    "duration": "PT1M16S",
    "sha256": {
      "video": "c88377fa0e287c2dd3e23f46e4882e68033601c77b186fd85eedc7b149077e58",
      "poster": "c40cc22e9f4e4c8cbaf10d12133a82413cf48d6f4f95ded84f84de735b4f1376",
      "captions": "7c42de114eef5ea4e9b8e3fc66ed4874e89dfe9337c506b811e9d1ce21dccc11",
      "transcript": "c62606436562795aceccddc89cf6ba28d813e567ae3f4374e3e06e0e4e3a11b7"
    }
  },
  {
    "number": 18,
    "slug": "local-international-seo-and-indexnow",
    "title": "Local, International SEO, and IndexNow",
    "description": "Configure truthful business entities, locations, languages, social profiles, sitemaps, and change notifications for wider discovery.",
    "guidePath": "/help4-seo-local-international-indexnow/",
    "keywords": [
      "local SEO",
      "international SEO",
      "IndexNow",
      "business location",
      "sitemap"
    ],
    "segments": [
      {
        "label": "Define the Real Business",
        "screen": "27-local-seo.png",
        "narration": "Open Local SEO and enter the public business name, phone, website, category, hours, address or truthful service area, and social profiles. Do not create a location for an address that does not serve customers. Visible contact content and structured data should describe the same entity."
      },
      {
        "label": "Plan Locations and Languages",
        "screen": "27-local-seo.png",
        "narration": "Create a location page only when it provides distinct, accurate help for that market. For multilingual sites, use the real language and regional URLs, translated content, canonicals, and alternate-language relationships. Avoid copying a city name into many otherwise identical doorway pages."
      },
      {
        "label": "Review Discovery Settings",
        "screen": "17-seo-control.png",
        "narration": "Check sitemap coverage, robots rules, canonical URLs, Bing and Google verification fields, and social profiles. Enable IndexNow only on the production site with a valid key endpoint. Queue changed or deleted URLs rather than resubmitting the entire site after every small edit."
      },
      {
        "label": "Confirm the Public Signals",
        "screen": "17-seo-control.png",
        "narration": "Verify the business facts in visible content, local schema, maps, contact links, social previews, sitemap pages, and external profiles. Review IndexNow response history and retries without treating submission as guaranteed indexing. Search engines still decide whether and when a page appears."
      }
    ],
    "filename": "18-local-international-seo-and-indexnow.mp4",
    "poster": "18-local-international-seo-and-indexnow.webp",
    "captions": "18-local-international-seo-and-indexnow.vtt",
    "transcript": "18-local-international-seo-and-indexnow.txt",
    "duration": "PT1M17S",
    "sha256": {
      "video": "4f3a79201002c9f0e6956ec75040a762ea0caaec30dd4ef5a12bfc8d8ed8471b",
      "poster": "2bab0f1edb334d11be9c01ba2ba359c8c76010a13305f30f47efe5814d5ae229",
      "captions": "44a956633a0a3705445be9c101531f1471153758a52b706f7478b34b27b6c5ee",
      "transcript": "5b824300f9a12d51b3c8198572d5df1ef53913e98c82710004f9e0b5d50ed8db"
    }
  },
  {
    "number": 19,
    "slug": "commerce-variations-subscriptions-and-customer-fields",
    "title": "Commerce Variations, Subscriptions, and Customer Fields",
    "description": "Configure product options, recurring terms, quantity behavior, and reusable customer data across checkout and account workflows.",
    "guidePath": "/help4-commerce-products-variations-customer-fields/",
    "keywords": [
      "variations",
      "subscriptions",
      "quantity rules",
      "customer fields",
      "commerce"
    ],
    "segments": [
      {
        "label": "Choose the Product Model",
        "screen": "20-product-editor.png",
        "narration": "Open the product editor and choose the type that matches the offer: simple, service, digital, booking, variable, or subscription. Add variants only when an option needs its own price, stock, SKU, image, fulfillment, tax, or availability instead of hiding those differences in description text."
      },
      {
        "label": "Set Quantity and Recurring Rules",
        "screen": "21-product-quantity-rules.png",
        "narration": "Decide whether the customer may change quantity, whether one configured package must stay one unit per cart line, and whether the entire order is limited to one. For subscriptions, state the interval, trial, setup amount, renewal behavior, and cancellation path before testing payment."
      },
      {
        "label": "Define Customer Fields Once",
        "screen": "28-commerce-customer-fields.png",
        "narration": "Use Customer Fields for information needed across checkout, accounts, orders, support, exports, and privacy tools. Choose the correct field type, placement, requirement, validation, conditional logic, and visibility. Never collect sensitive information merely because a text field makes it possible."
      },
      {
        "label": "Test Different Product Paths",
        "screen": "18-commerce.png",
        "narration": "Run simple, variable, subscription, and fixed-quantity examples through catalog, cart, checkout, payment, confirmation, customer account, inventory, email, refund, and renewal states. Confirm customer fields persist only where intended and a fixed one-per-line item never exposes a quantity control."
      }
    ],
    "filename": "19-commerce-variations-subscriptions-and-customer-fields.mp4",
    "poster": "19-commerce-variations-subscriptions-and-customer-fields.webp",
    "captions": "19-commerce-variations-subscriptions-and-customer-fields.vtt",
    "transcript": "19-commerce-variations-subscriptions-and-customer-fields.txt",
    "duration": "PT1M14S",
    "sha256": {
      "video": "d691f01548d38b4bf8b3641591a09002e4f76cf7102e5d31573720cdef2aae46",
      "poster": "c532712805ca0e13e197177077104533f30d7f79f8c569164d269dcea0db6eea",
      "captions": "3094a03247957732e21f4acfdc19db4b35291a386d58d207ff50b8b836970e93",
      "transcript": "11f89c4a760434a1e6991bf45ca647fbe00803b65c2201a2b4afcba5ccfe6260"
    }
  },
  {
    "number": 20,
    "slug": "checkout-payment-routing-and-orders",
    "title": "Checkout, Payment Routing, and Orders",
    "description": "Connect payment processors, validate routing and totals, and test the complete order lifecycle before accepting a live payment.",
    "guidePath": "/help4-commerce-launch-testing/",
    "keywords": [
      "checkout",
      "payment routing",
      "gateway",
      "order lifecycle",
      "refund"
    ],
    "segments": [
      {
        "label": "Configure Gateways Safely",
        "screen": "29-commerce-gateways.png",
        "narration": "Open Gateways and configure only the processors the store will use. Keep test and live credentials separate, choose supported currencies, and verify webhook destinations. Never place secret keys in screenshots, page content, Builder settings, support messages, or browser-visible source."
      },
      {
        "label": "Set Routing Rules",
        "screen": "29-commerce-gateways.png",
        "narration": "Build the narrowest routing rule for product, currency, country, subscription, or other supported context, then define a safe default. Review rule priority so one order cannot match several conflicting accounts. A route should explain why the selected processor received that checkout."
      },
      {
        "label": "Verify Cart and Totals",
        "screen": "19-products.png",
        "narration": "Test product selection, variations, quantity behavior, promotions, shipping, tax, and customer fields before payment begins. Compare the displayed subtotal, discount, shipping, tax, and total with the order record. Failed payment initialization should not create a false completed order or consume inventory."
      },
      {
        "label": "Complete the Order Matrix",
        "screen": "18-commerce.png",
        "narration": "Use approved test transactions for success, decline, retry, webhook delay, duplicate event, cancellation, refund, subscription renewal, and mobile checkout. Confirm order status, inventory, customer history, email notices, payment references, and idempotency remain correct after refresh or repeated callbacks."
      }
    ],
    "filename": "20-checkout-payment-routing-and-orders.mp4",
    "poster": "20-checkout-payment-routing-and-orders.webp",
    "captions": "20-checkout-payment-routing-and-orders.vtt",
    "transcript": "20-checkout-payment-routing-and-orders.txt",
    "duration": "PT1M17S",
    "sha256": {
      "video": "0250bfbfc255f692951627cea0b5f41dd0c26322449cb531f2069651874478f1",
      "poster": "3e1bd5ca5706eec4691d92c2c056f2799c9c527713b5ffc399da4858f5f84f41",
      "captions": "96fefe39ce12fbaeb862eb85bce8cb7db9c33477d7c8253bacfb50c03ab67117",
      "transcript": "524de8dfe5889b9c2f581654bc97f69e71273f6f8b5e7bad6cebee491fcb7bed"
    }
  },
  {
    "number": 21,
    "slug": "newsletter-subscribers-and-campaign-readiness",
    "title": "Newsletter Subscribers and Campaign Readiness",
    "description": "Capture consent-based subscribers, preserve status and privacy controls, and prepare clean audience data for an approved campaign system.",
    "guidePath": "/help4-email-marketing-newsletters-drip-campaigns/",
    "keywords": [
      "newsletter",
      "subscriber consent",
      "email delivery",
      "suppression",
      "campaign readiness"
    ],
    "segments": [
      {
        "label": "Build the Signup Form",
        "screen": "16-forms.png",
        "narration": "Create a short newsletter form with a visible email label, clear purpose, required consent where applicable, an honest confirmation message, spam protection, and the correct privacy link. Keep personal newsletter signups separate from business prospect records and unrelated contact forms."
      },
      {
        "label": "Review Subscriber Status",
        "screen": "30-newsletter.png",
        "narration": "Open Newsletter to review subscriber email, name, tags, and status. Add a person manually only when the source and permission are known. Preserve pending, confirmed, unsubscribed, bounced, complained, and suppressed states so a later import or export cannot quietly reactivate them."
      },
      {
        "label": "Prepare Sender and Audience Data",
        "screen": "16-forms.png",
        "narration": "Before sending, verify the From name, reply address, postal address, authentication records, privacy URL, unsubscribe path, and audience segment outside the page design. Use tags that describe a real signup source or interest, and do not invent engagement or consent history."
      },
      {
        "label": "Test the Handoff",
        "screen": "32-insights.png",
        "narration": "Submit a real test signup, confirm validation and storage, exercise confirmation and unsubscribe paths, and inspect fresh logs. If an external or later campaign module receives the audience, verify suppression, personalization, mobile email layout, reply handling, delivery, open measurement, and click measurement before scheduling."
      }
    ],
    "filename": "21-newsletter-subscribers-and-campaign-readiness.mp4",
    "poster": "21-newsletter-subscribers-and-campaign-readiness.webp",
    "captions": "21-newsletter-subscribers-and-campaign-readiness.vtt",
    "transcript": "21-newsletter-subscribers-and-campaign-readiness.txt",
    "duration": "PT1M16S",
    "sha256": {
      "video": "b3939a576c5471ebbade96ffc16f52e86e6d76a27aeb88b999aa6a8926d76b44",
      "poster": "badcd6aaaa31ec43ef0cf7f498ee9bb96fd465bf9cc3b18cabad32f88a9168de",
      "captions": "377f2f0620912beed1049025a7ac3918cbf483db957875eafb8b17164cbb4b25",
      "transcript": "40c87d5f1a5a3130be3c1ad9b725deea5ba22a2f7a1d027019d15da31729c621"
    }
  },
  {
    "number": 22,
    "slug": "images-cache-assets-and-performance",
    "title": "Images, Cache, Assets, and Performance",
    "description": "Optimize media and module loading, measure cold and warm requests, and improve speed without breaking interactive behavior.",
    "guidePath": "/help4-performance-cache-assets-guide/",
    "keywords": [
      "performance",
      "image optimization",
      "cache",
      "assets",
      "site speed"
    ],
    "segments": [
      {
        "label": "Prepare the Media",
        "screen": "31-image-studio.png",
        "narration": "Open Image Studio and inspect the original before generating a derivative. Choose dimensions, crop, quality, and modern formats for the actual placement. Preserve the approved original and metadata, then confirm the responsive source set does not substitute an unrelated image."
      },
      {
        "label": "Read the Performance Evidence",
        "screen": "32-insights.png",
        "narration": "Open Insights and review versions, module health, page estimates, REST checks, shortcodes, and recent diagnostics. Measure a cold anonymous request and a warmed request separately. A fast cached page does not prove the origin, editor, checkout, or signed-in experience is healthy."
      },
      {
        "label": "Reduce Unused Work",
        "screen": "02-studio-overview.png",
        "narration": "Use Performance Coach and the page structure to remove duplicate widgets, oversized media, unnecessary sliders, and modules the page does not use. Keep module CSS and scripts scoped to the surfaces that need them, while preserving preview and public asset parity."
      },
      {
        "label": "Retest Interactions and Bypasses",
        "screen": "14-page-settings.png",
        "narration": "After cache or asset changes, retest menus, forms, sliders, video, search, cart, checkout, account pages, preview, and save behavior at desktop and mobile. Confirm query, cookie, private, and transactional requests bypass public cache correctly, then inspect fresh browser and PHP logs."
      }
    ],
    "filename": "22-images-cache-assets-and-performance.mp4",
    "poster": "22-images-cache-assets-and-performance.webp",
    "captions": "22-images-cache-assets-and-performance.vtt",
    "transcript": "22-images-cache-assets-and-performance.txt",
    "duration": "PT1M14S",
    "sha256": {
      "video": "eaa205b15e5b9b7a51ca9563d43b53b6b673ebda970e55af7ee8632ac15be0f9",
      "poster": "460ce70f3dc83d30a05895b29ff46af68bb088cb99ef7a09770c972962d144fd",
      "captions": "94426d839819f529e9af35bf5d9586c63c33d61a1b47fb7b0bd2923f915faf22",
      "transcript": "3e1c4c07b04c2b327cdaddb145131fb809f180a79f712f9a2ad94a45b272492d"
    }
  },
  {
    "number": 23,
    "slug": "security-updates-and-recovery",
    "title": "Security, Updates, and Recovery",
    "description": "Harden the site in measured steps, verify release identity, and keep a tested recovery path before changing production.",
    "guidePath": "/help4-security-hardening-guide/",
    "keywords": [
      "security",
      "hardening",
      "updates",
      "dependencies",
      "recovery"
    ],
    "segments": [
      {
        "label": "Review Security Findings",
        "screen": "33-security.png",
        "narration": "Open Security and review HTTPS, headers, login protection, trusted proxy handling, origin access, file permissions, salts, XML-RPC, REST exposure, and commerce protections. Change one bounded control at a time so the exact setting can be reversed if authentication or public delivery fails."
      },
      {
        "label": "Verify the Release Identity",
        "screen": "34-update-module-settings.png",
        "narration": "Open Builder settings and record the active version, immutable build hash, enabled modules, update channel, WordPress version, PHP version, database state, active theme, and companion requirements. The displayed version, manifest, ZIP hash, installed files, and asset query versions should describe one release."
      },
      {
        "label": "Prepare Recovery Before Updating",
        "screen": "14-page-settings.png",
        "narration": "Keep a current database recovery point, the prior immutable plugin ZIP or directory, and any page or global layout data at risk. Confirm the recovery artifact is complete and readable before updating. A progress message or unfinished archive is not a rollback plan."
      },
      {
        "label": "Run Post-Update Regression",
        "screen": "32-insights.png",
        "narration": "After the update, check public pages, Studio open and save, templates, mobile menus, forms, media, SEO output, commerce, cache behavior, and fresh logs. Confirm the updater reports no remaining Builder update only after the exact tested artifact and runtime behavior agree."
      }
    ],
    "filename": "23-security-updates-and-recovery.mp4",
    "poster": "23-security-updates-and-recovery.webp",
    "captions": "23-security-updates-and-recovery.vtt",
    "transcript": "23-security-updates-and-recovery.txt",
    "duration": "PT1M19S",
    "sha256": {
      "video": "ae3e4d97c137f084c529798ba474ab00eabd6331892902ec40875320bc1db643",
      "poster": "1f31d50d6f6011cdaa5d4ce09624332d04013609a0664531d09fdd9c71a55c0e",
      "captions": "163ab8c48c8766dbcfa559680007f1e5605bf205c83f84cfd97c6ad297e387da",
      "transcript": "5c07e1fa574777a411a206feea58f4804f5ccb66605816bf05e8fba8d0ba02fd"
    }
  },
  {
    "number": 24,
    "slug": "insights-logs-and-igor-diagnostics",
    "title": "Insights, Logs, and I.G.O.R. Diagnostics",
    "description": "Turn a vague Builder problem into a privacy-safe report with one reproducible action, fresh evidence, and a clear expected result.",
    "guidePath": "/help4-feedback-igor-diagnostics/",
    "keywords": [
      "I.G.O.R.",
      "diagnostics",
      "logs",
      "bug report",
      "support"
    ],
    "segments": [
      {
        "label": "Stop and Define the Failure",
        "screen": "35-igor-feedback.png",
        "narration": "When an edit starts removing content, losing styles, or returning an error, stop repeated changes. Record one affected URL or admin screen, page or template ID, selected element, user role, viewport, exact action, expected result, actual result, and the time of the attempt."
      },
      {
        "label": "Gather Fresh Evidence",
        "screen": "32-insights.png",
        "narration": "Use Insights and fresh browser or PHP logs from the same reproduction. Capture the response status, one relevant console message, active versions, enabled modules, theme, and a screenshot showing the complete control and result. Old errors from another request can send diagnosis in the wrong direction."
      },
      {
        "label": "Protect Private Information",
        "screen": "35-igor-feedback.png",
        "narration": "Review what I.G.O.R. will send before submission. Remove passwords, nonces, license keys, payment secrets, application passwords, private messages, database content, raw customer records, and tracking details. Include only the smallest environment and reproduction evidence needed to understand the issue."
      },
      {
        "label": "Submit One Connected Report",
        "screen": "14-page-settings.png",
        "narration": "Send one complete report, keep follow-up evidence on the same support record, and use History or the known recovery path when appropriate. After a fix, repeat the original action and verify Studio, public output, desktop, mobile, and fresh logs before closing the issue."
      }
    ],
    "filename": "24-insights-logs-and-igor-diagnostics.mp4",
    "poster": "24-insights-logs-and-igor-diagnostics.webp",
    "captions": "24-insights-logs-and-igor-diagnostics.vtt",
    "transcript": "24-insights-logs-and-igor-diagnostics.txt",
    "duration": "PT1M17S",
    "sha256": {
      "video": "2ed4337e851e2216fd499777a88c49d9cca28779bb4fddf85b100d9983949f68",
      "poster": "43e9b842f5e548793afb6e7d691bbf5f7ff1eae043a17cfdcfd915a608f2cc96",
      "captions": "78f99e8253d841a7e1ce1e8b5b1a3bf49226471e868b62ad30fa3ee75a9641ef",
      "transcript": "617fc52d23f041a91d23b0b82b16a72c24aceff68eeceff83cd71e9b64e39b12"
    }
  },
  {
    "number": 25,
    "slug": "live-preview-and-responsive-viewports",
    "title": "Live Preview and Responsive Viewports",
    "description": "See draft changes in the real preview document, inspect practical device presets, and verify interactions before publishing.",
    "guidePath": "/help4-builder-live-preview-workflow/",
    "keywords": [
      "live preview",
      "responsive preview",
      "viewport",
      "tablet",
      "mobile"
    ],
    "segments": [
      {
        "label": "Understand the Preview",
        "screen": "02-studio-overview.png",
        "narration": "The center of Builder Studio is an isolated preview document, not a decorative picture of the page. It loads the current draft layout with the frontend styles and scripts needed by the page. Make one change at a time and wait for the preview to settle before deciding whether the result is correct."
      },
      {
        "label": "Inspect a Tablet Preset",
        "screen": "36-studio-tablet-preview.png",
        "narration": "Choose Tablets, then select a useful preset. Check content order, columns, gutters, typography, buttons, media, menus, forms, and any interactive module. Device presets help expose breakpoint mistakes, but they do not replace testing on a real browser at the exact boundary widths used by the design."
      },
      {
        "label": "Inspect a Phone Preset",
        "screen": "37-studio-mobile-preview.png",
        "narration": "Switch to Mobiles and review the complete page at a narrow width. Look for clipped content, tiny controls, open menu panels, missing media, horizontal drift, and awkward reading order. Correct the mobile-specific value in the element or parent layout instead of shrinking the entire page."
      },
      {
        "label": "Save Only After Parity",
        "screen": "14-page-settings.png",
        "narration": "Use Page Settings and the save state to confirm whether you are working with an unsaved draft or public content. Check interactive behavior in Studio, save, then open the public URL in a separate session. The layout, typography, spacing, radius, colors, and module output should agree in both places."
      }
    ],
    "filename": "25-live-preview-and-responsive-viewports.mp4",
    "poster": "25-live-preview-and-responsive-viewports.webp",
    "captions": "25-live-preview-and-responsive-viewports.vtt",
    "transcript": "25-live-preview-and-responsive-viewports.txt",
    "duration": "PT1M16S",
    "sha256": {
      "video": "0eccd8c4f74510460e2b30e144e926e3672c97413117d9c117bc3fd20f9d0108",
      "poster": "111160ee6b43d24997e3f55274b3358e3739cc7e6d47b17f4216f52dc87c8c90",
      "captions": "0fc7dd1524ebd455f69d6863b9806a0bcc8c1241198f7266cec6b0498a0a420b",
      "transcript": "324da7ccdbc71bcbaefef98abb378cea84beed7ecc2c43f0e7f35309ce71b1b4"
    }
  },
  {
    "number": 26,
    "slug": "navigator-layers-and-reusable-sections",
    "title": "Navigator, Layers, and Reusable Sections",
    "description": "Work safely with nested page structure, rename meaningful layers, and promote repeated sections into controlled templates.",
    "guidePath": "/help4-builder-navigator-layers/",
    "keywords": [
      "navigator",
      "layers",
      "nested elements",
      "reusable section",
      "template"
    ],
    "segments": [
      {
        "label": "Read the Element Tree",
        "screen": "03-navigator.png",
        "narration": "Open Navigator when the canvas is crowded or an element is hard to click. Read the parent, slot, and child relationships before moving anything. Select the exact heading, image, button, column, or section by name so a small content update never removes the surrounding page structure."
      },
      {
        "label": "Name Important Layers",
        "screen": "03-navigator.png",
        "narration": "Give major sections and reusable elements descriptive names. Names such as Home Hero, Pricing Grid, or Contact Button make later support and team editing much safer than a long list of generic sections. Keep stable element identifiers when replacing content so responsive values and extension data remain connected."
      },
      {
        "label": "Reuse the Right Structure",
        "screen": "11-template-library.png",
        "narration": "Use a section or page template when the same structure belongs in several places. Insert a reviewed starter, then replace its sample copy, media, links, and accessibility text. Reuse should reduce repeated work without turning every page into an identical block of unrelated content."
      },
      {
        "label": "Manage Shared Templates",
        "screen": "46-template-admin.png",
        "narration": "Use Builder Templates and Theme Builder for headers, footers, page shells, archives, search, 404 pages, and other shared layouts. Confirm the role and display conditions before publishing. A shared template change can reach many routes, so test one matching and one nonmatching page before completing the update."
      }
    ],
    "filename": "26-navigator-layers-and-reusable-sections.mp4",
    "poster": "26-navigator-layers-and-reusable-sections.webp",
    "captions": "26-navigator-layers-and-reusable-sections.vtt",
    "transcript": "26-navigator-layers-and-reusable-sections.txt",
    "duration": "PT1M19S",
    "sha256": {
      "video": "8c4edaaad114408e3c42b68b204a41216084f025c4af9bb99efe4e7054e3b879",
      "poster": "04981343fb9f9882d3f52de671e6a2ebb8b0308b206c70f56ea23175091008d8",
      "captions": "cafdf79e51f63d836e12f9a305631b9797b31e4a197121e35efdee7c4129eafb",
      "transcript": "15e7d0b16a8d5adfede3901d1307a281a99eabefb96d8947c034a839c1010af4"
    }
  },
  {
    "number": 27,
    "slug": "custom-css-classes-and-page-styles",
    "title": "Custom CSS, Classes, and Page-Level Styles",
    "description": "Use native design controls first, then add narrowly scoped page CSS with responsive and reduced-motion safeguards.",
    "guidePath": "/help4-builder-custom-css-advanced-controls/",
    "keywords": [
      "custom CSS",
      "CSS classes",
      "page styles",
      "pseudo element",
      "media query"
    ],
    "segments": [
      {
        "label": "Use Native Controls First",
        "screen": "05-heading-design.png",
        "narration": "Start with the element Design controls for typography, color, spacing, border, radius, alignment, and responsive values. Native settings are editable, portable, and visible to the next person. Add custom CSS only when the intended visual cannot be expressed clearly through the supported controls."
      },
      {
        "label": "Scope Page CSS",
        "screen": "38-page-custom-css.png",
        "narration": "Open Page Settings, then Code. Use the Builder root token to scope selectors to the current page or template. The supported surface can retain media queries, pseudo-elements, keyframes, and reduced-motion rules while rejecting unsafe markup. Keep selectors narrow and avoid overriding unrelated WordPress administration or plugin screens."
      },
      {
        "label": "Use Classes Deliberately",
        "screen": "10-section-design.png",
        "narration": "Add a meaningful advanced CSS class to the exact section or element that needs the rule. Prefer a reusable component name over selectors based on element order. Do not target generated browser structure that may change when blocks are reordered, and do not paste an entire third-party theme stylesheet into one page."
      },
      {
        "label": "Verify and Recover",
        "screen": "48-page-history.png",
        "narration": "Save, reopen Studio, and verify the normalized CSS is still present. Check public output at desktop, tablet, mobile, keyboard focus, normal motion, and reduced motion. If a rule causes a regression, use the page history or remove the narrow rule rather than adding a second override that hides the first problem."
      }
    ],
    "filename": "27-custom-css-classes-and-page-styles.mp4",
    "poster": "27-custom-css-classes-and-page-styles.webp",
    "captions": "27-custom-css-classes-and-page-styles.vtt",
    "transcript": "27-custom-css-classes-and-page-styles.txt",
    "duration": "PT1M23S",
    "sha256": {
      "video": "0627afbeec4d5dc6b309a32df4437fe2a138683857450441dd0429ca9b6c74e4",
      "poster": "f3e747bea715c33587521cd0dc403ed2d98c7832f06867401ae2673a4e5b2bd3",
      "captions": "a8df5cbb1e70ef37e0b30cc99f0b509ba2c1e29aadfbee44402fc58aaeea65e2",
      "transcript": "2714df21d910879b134d9f37758993c9549ac00afceebf0d5fe0822614400055"
    }
  },
  {
    "number": 28,
    "slug": "redirects-and-404-monitoring",
    "title": "Redirects and 404 Monitoring",
    "description": "Repair moved URLs with narrow redirects, review 404 evidence, and keep canonicals, links, and sitemaps aligned.",
    "guidePath": "/help4-redirects-404-monitoring/",
    "keywords": [
      "redirect",
      "404",
      "broken URL",
      "canonical",
      "redirect chain"
    ],
    "segments": [
      {
        "label": "Review the Missing Path",
        "screen": "42-redirects-404.png",
        "narration": "Open Redirects and review the exact missing path, request count, referrer, and most recent occurrence. A 404 is evidence, not an automatic instruction to send every missing URL to the home page. Decide whether the content moved, was replaced, should remain gone, or is simply a bad automated request."
      },
      {
        "label": "Create a Narrow Rule",
        "screen": "42-redirects-404.png",
        "narration": "Use an exact path redirect for a known moved page. Choose a permanent response only when the change is intended to last, and point to the closest useful replacement. Avoid broad regular expressions until they have been tested against a list of paths, because one loose rule can capture valid pages."
      },
      {
        "label": "Align Search Signals",
        "screen": "17-seo-control.png",
        "narration": "Update internal links, canonical URLs, navigation, structured data, and sitemap entries so they use the final destination directly. A redirect can preserve a moved route, but repeated chains waste time and create confusing search signals. Remove the old URL from generated discovery surfaces after the replacement is verified."
      },
      {
        "label": "Test Both Outcomes",
        "screen": "32-insights.png",
        "narration": "Request the old path and confirm one redirect reaches the correct final page. Then request the destination directly and confirm a normal successful response. Check query behavior, loops, cache state, mobile rendering, and fresh logs. Keep a true 404 response for unknown paths that have no appropriate replacement."
      }
    ],
    "filename": "28-redirects-and-404-monitoring.mp4",
    "poster": "28-redirects-and-404-monitoring.webp",
    "captions": "28-redirects-and-404-monitoring.vtt",
    "transcript": "28-redirects-and-404-monitoring.txt",
    "duration": "PT1M23S",
    "sha256": {
      "video": "b0ba32b7b7e8958a51620c7fdbdd61787b6a321b2bd3cc54ffc396a89024d9a2",
      "poster": "2d0e4a92e5be61d3c204b94afaedd40fa516863f48d6c4b9560151dd8cf0f9e9",
      "captions": "2c714b98da03a11ec7136051eca54306991a2351157f872b9482d4209c1fbbcc",
      "transcript": "20c185408569eefa1be515e73b72f8583b7dbd04bcd2b486a619b11bbb7a430e"
    }
  },
  {
    "number": 29,
    "slug": "site-search-setup-and-result-testing",
    "title": "Site Search Setup and Result Testing",
    "description": "Add scoped on-site search, create a useful result experience, and test empty, keyboard, and mobile states.",
    "guidePath": "/help4-site-search-setup/",
    "keywords": [
      "site search",
      "advanced search",
      "search results",
      "keyboard search",
      "empty results"
    ],
    "segments": [
      {
        "label": "Insert Advanced Search",
        "screen": "39-site-search-widget.png",
        "narration": "Open Widgets and search for Advanced Search. Insert the native widget where visitors expect it, then choose whether it searches pages, posts, products, or all supported content. Write a short placeholder that describes the scope instead of using a vague label that promises results the site cannot provide."
      },
      {
        "label": "Build the Result Template",
        "screen": "15-theme-builder.png",
        "narration": "Use Theme Builder to create or assign a search-results template. Include the query, result count, useful titles, excerpts, content types, and a clear no-results state. Keep one page heading and preserve the visitor query so the result page explains what was searched."
      },
      {
        "label": "Test Real Queries",
        "screen": "02-studio-overview.png",
        "narration": "Test an exact title, a partial phrase, different capitalization, a product term, a common misspelling, and a query with no result. Confirm excluded, draft, private, and protected content stays out. Search should return useful destinations rather than exposing internal records or unrelated system content."
      },
      {
        "label": "Check Keyboard and Mobile",
        "screen": "37-studio-mobile-preview.png",
        "narration": "At a narrow viewport, verify the field, submit control, filters, and result cards fit without horizontal scrolling. Use only the keyboard to reach search, submit, move through results, and return to the field. Focus must stay visible and an empty result must offer a useful next action."
      }
    ],
    "filename": "29-site-search-setup-and-result-testing.mp4",
    "poster": "29-site-search-setup-and-result-testing.webp",
    "captions": "29-site-search-setup-and-result-testing.vtt",
    "transcript": "29-site-search-setup-and-result-testing.txt",
    "duration": "PT1M15S",
    "sha256": {
      "video": "a407d59e60a412cde60c0bcd78df522df6e4b536a710d24ca31ae2db237393f8",
      "poster": "73f433b73fd7c3255bac5cc3e973c4a9951f2eb525e4be7144f5a81db9837d11",
      "captions": "abe29ccd1e9fdb5d36222390107de3f7f1500e69f478017b31fca2dbecd82e06",
      "transcript": "ac82ced078ff8f24396ed1a010ca3ea4d8f5c1bde4ecade75cc6eec7d2cbca0e"
    }
  },
  {
    "number": 30,
    "slug": "mega-menus-and-complex-navigation",
    "title": "Mega Menus and Complex Navigation",
    "description": "Build larger navigation from native menu hierarchy with reliable hover, keyboard, touch, and responsive behavior.",
    "guidePath": "/help4-mega-menu-guide/",
    "keywords": [
      "mega menu",
      "navigation hierarchy",
      "dropdown",
      "submenu",
      "mobile menu"
    ],
    "segments": [
      {
        "label": "Build Native Hierarchy",
        "screen": "41-mega-menu-controls.png",
        "narration": "Begin in WordPress Menus and arrange parent and child destinations in a logical hierarchy. Enable the Help4 mega-menu container only on the parent that needs grouped content, then choose an appropriate column count and optional badge. The underlying links should remain understandable even without the expanded visual treatment."
      },
      {
        "label": "Place the Menu in a Header",
        "screen": "15-theme-builder.png",
        "narration": "Edit the global header template and insert the native menu component. Select the saved menu, set desktop alignment, dropdown placement, spacing, and the responsive breakpoint. Keep the logo, primary actions, and menu inside a structure that can shrink without clipping the last item."
      },
      {
        "label": "Test Pointer and Keyboard",
        "screen": "36-studio-tablet-preview.png",
        "narration": "On a desktop or tablet-width layout, move from the parent trigger into the submenu and confirm it remains open across the pointer path. Then use Tab, Enter, Space, and Escape. Every submenu link must be reachable, focus must remain visible, and leaving the menu should close it predictably."
      },
      {
        "label": "Test the Mobile Trigger",
        "screen": "37-studio-mobile-preview.png",
        "narration": "At the mobile breakpoint, verify one clearly named menu button opens and closes the complete hierarchy. The control should be large enough to tap, report its expanded state, trap no keyboard focus, and restore the page when closed. Long labels and nested items must wrap inside the viewport."
      }
    ],
    "filename": "30-mega-menus-and-complex-navigation.mp4",
    "poster": "30-mega-menus-and-complex-navigation.webp",
    "captions": "30-mega-menus-and-complex-navigation.vtt",
    "transcript": "30-mega-menus-and-complex-navigation.txt",
    "duration": "PT1M17S",
    "sha256": {
      "video": "e46fe665afb8c595f673c6f3852d39de730e8992c96cc5f019648658b92097e9",
      "poster": "576e654315bcc6d189e9cb27011b93105857588ff27e324574b3e1f326a216a7",
      "captions": "1237662b1f892597b554ce31b5be589a64ab85f51b21a46a92e009c9a9df1795",
      "transcript": "8c618945980cbc570d315522f5270eec0498bca6105f0e038f0b04080c3653f1"
    }
  },
  {
    "number": 31,
    "slug": "lms-courses-protected-video-and-certificates",
    "title": "LMS Courses, Protected Video, and Certificates",
    "description": "Compose learning surfaces for course discovery, member progress, protected playback, resources, and certificate verification.",
    "guidePath": "/help4-lms-courses-progress-certificates/",
    "keywords": [
      "LMS",
      "course",
      "progress",
      "protected video",
      "certificate"
    ],
    "segments": [
      {
        "label": "Review the LMS Module",
        "screen": "43-lms-dashboard.png",
        "narration": "Open LMS and confirm the learning module and any registered course integration are active. Review courses, enrollments, progress, protected resources, and certificate behavior before building the public surface. Keep course ownership and access rules in the learning system rather than reproducing them as hidden page content."
      },
      {
        "label": "Insert Learning Widgets",
        "screen": "13-widget-library.png",
        "narration": "In Studio, use the LMS course catalog, progress dashboard, protected video, certificate verifier, and approved addon modules. Place each widget in a template that matches its context. Provide an empty or signed-out state so anonymous visitors and members without progress do not see a broken blank area."
      },
      {
        "label": "Configure Protected Playback",
        "screen": "25-video-hls-fallback-controls.png",
        "narration": "For a protected lesson video, configure the approved access context, HLS source, file fallback, poster, failure image, controls, preload, fit, and accessible title. Test authorized, unauthorized, expired, and unsupported playback states. The fallback must not expose a private source to a visitor who lacks course access."
      },
      {
        "label": "Test the Learning Matrix",
        "screen": "37-studio-mobile-preview.png",
        "narration": "Check course, library, dashboard, progress, certificate, video, and protected document surfaces as an anonymous visitor, enrolled member, completed member, and editor. Repeat at desktop and mobile. Confirm progress updates, certificate codes, media controls, forms, links, and access messages work in Studio and public output."
      }
    ],
    "filename": "31-lms-courses-protected-video-and-certificates.mp4",
    "poster": "31-lms-courses-protected-video-and-certificates.webp",
    "captions": "31-lms-courses-protected-video-and-certificates.vtt",
    "transcript": "31-lms-courses-protected-video-and-certificates.txt",
    "duration": "PT1M22S",
    "sha256": {
      "video": "cd95893b548347d32d78a084f175b1b8dbda8f783db41e8e77e3663a7188ca0c",
      "poster": "18474dbc56aa9b8c700c13296d10107aaee33980ad3025a8945cb058e2695a99",
      "captions": "70ce6ad9e842281e791cb6a29704f009f5836b54a7dffe3913525f5606ac6402",
      "transcript": "b50fec329789e34a5e0d8f7a32c93e3600979984462419be4cf54729ba4978e8"
    }
  },
  {
    "number": 32,
    "slug": "website-snapshot-and-portfolio-proof",
    "title": "Website Snapshot and Portfolio Proof",
    "description": "Turn an approved public URL into current visual proof for portfolios, migrations, launch records, and support context.",
    "guidePath": "/help4-builder-website-snapshot/",
    "keywords": [
      "website snapshot",
      "portfolio",
      "website screenshot",
      "recent work",
      "migration proof"
    ],
    "segments": [
      {
        "label": "Insert Website Snapshot",
        "screen": "40-website-snapshot-widget.png",
        "narration": "Open Widgets and search for Website Snapshot. Insert it into a recent-work, migration, or support layout, then enter the approved public URL. Use only a site you are allowed to present, and provide a fixed uploaded image when a live capture is inappropriate or unavailable."
      },
      {
        "label": "Set the Display",
        "screen": "09-image-content.png",
        "narration": "Choose the requested width, height, fit, refresh interval, link behavior, caption, and accessible description. A portfolio image should reveal the actual work clearly rather than hiding it behind heavy cropping or a generic substitute. Preserve the destination URL separately from the image source."
      },
      {
        "label": "Use a Proof Template",
        "screen": "11-template-library.png",
        "narration": "Choose a Website Snapshot gallery, comparison, migration audit, or support-context template when it matches the job. Replace sample destinations, captions, project facts, and calls to action. Do not imply work, results, or customer approval that the business cannot document."
      },
      {
        "label": "Verify Capture and Fallback",
        "screen": "37-studio-mobile-preview.png",
        "narration": "Check the snapshot at desktop and mobile, then test the linked destination, loading state, blocked capture, fallback image, caption, and refresh behavior. The page must remain contained when a source image has unusual dimensions, and a failed remote capture should never leave an empty broken frame."
      }
    ],
    "filename": "32-website-snapshot-and-portfolio-proof.mp4",
    "poster": "32-website-snapshot-and-portfolio-proof.webp",
    "captions": "32-website-snapshot-and-portfolio-proof.vtt",
    "transcript": "32-website-snapshot-and-portfolio-proof.txt",
    "duration": "PT1M14S",
    "sha256": {
      "video": "24d848ea941cf137d44c38c9205270f58cb6e011e33d39c766ee72f7c8791e92",
      "poster": "ef872f844a6eb5958081fcdfa5471c8944df0fa82ec53e95b1b7da77cd4d368b",
      "captions": "bea7df8261b7852da89adb25544dabb8c75e11cb81645e0e4043b1622b1c4d07",
      "transcript": "e6efd21b544305db291416e30b2e03eac834844178ab75ee294fa4248b177c02"
    }
  },
  {
    "number": 33,
    "slug": "theme-catalog-and-companion-theme-setup",
    "title": "Theme Catalog and Companion Theme Setup",
    "description": "Install the clean Help4 Blank companion, understand theme and plugin boundaries, and apply a Builder design direction safely.",
    "guidePath": "/help4-blank-theme/",
    "keywords": [
      "Help4 Blank",
      "theme catalog",
      "companion theme",
      "theme setup",
      "starter theme"
    ],
    "segments": [
      {
        "label": "Understand the Two Packages",
        "screen": "34-update-module-settings.png",
        "narration": "Help4 Builder Suite is the plugin that owns visual building, templates, styles, modules, and content tools. Help4 Blank is the separate WordPress theme package that provides a quiet standards-based shell. Keeping them separate preserves normal WordPress update and review boundaries while allowing Builder to work with other themes."
      },
      {
        "label": "Open the Theme Catalog",
        "screen": "44-theme-catalog.png",
        "narration": "Open Appearance, then Help4 Theme Catalog. Review the compatible theme directions and the current active theme before changing anything. A catalog direction is inspiration and setup guidance, while the companion theme remains intentionally clean instead of shipping one customer site or Help4 marketing design."
      },
      {
        "label": "Install Without Losing Recovery",
        "screen": "45-migration-cutover.png",
        "narration": "Before switching an established site, keep a database recovery point, the current theme package, and a record of menus, widgets, templates, and custom code. Install Help4 Blank, preview where supported, and activate only during an approved test window. Theme activation should not delete Builder layouts or media."
      },
      {
        "label": "Apply the Site Design in Builder",
        "screen": "23-global-theme-packs.png",
        "narration": "Return to Builder Studio and apply an appropriate style pack or site kit. Set the real site name, logo, typography, colors, buttons, forms, header, footer, and templates. Remove sample branding and verify ordinary non-Builder WordPress content still receives a readable theme layout."
      }
    ],
    "filename": "33-theme-catalog-and-companion-theme-setup.mp4",
    "poster": "33-theme-catalog-and-companion-theme-setup.webp",
    "captions": "33-theme-catalog-and-companion-theme-setup.vtt",
    "transcript": "33-theme-catalog-and-companion-theme-setup.txt",
    "duration": "PT1M18S",
    "sha256": {
      "video": "8863288ae514a7563b84513fdd7518b0098778254ec5eac1050b7bcb75266430",
      "poster": "c0e384275332d947202c673bd1859f39c8993414a0164c913bff6ed8bf69e9cf",
      "captions": "84e1021ef7d68c1a84454aa68f6bfab9a99a747258d7b66f57480072217b6356",
      "transcript": "18aad93e99722e528c9adf7c135dd98363d9dae187754e74f7ff9f943a8e42c5"
    }
  },
  {
    "number": 34,
    "slug": "migration-import-export-and-cutover",
    "title": "Migration, Import, Export, and Cutover",
    "description": "Move Builder layouts and settings through guarded exports, structural checks, media mapping, and a verified launch sequence.",
    "guidePath": "/help4-builder-import-export-migrations/",
    "keywords": [
      "migration",
      "import",
      "export",
      "cutover",
      "layout hash"
    ],
    "segments": [
      {
        "label": "Inventory Before Moving",
        "screen": "45-migration-cutover.png",
        "narration": "Open the migration and cutover tools only after inventorying pages, templates, global styles, custom fields, menus, forms, media, redirects, SEO metadata, commerce data, users, and addon dependencies. Record the source and target versions. A migration is more than copying page HTML."
      },
      {
        "label": "Export a Guarded Bundle",
        "screen": "45-migration-cutover.png",
        "narration": "Export the supported Builder bundle and keep its manifest and checksum with the recovery record. Do not place credentials, private customer records, payment secrets, or unrelated uploads in a portable design package. When a script will run through WP CLI eval-file, avoid first-statement assumptions and preserve every host and dry-run guard."
      },
      {
        "label": "Import Without Replacing by Accident",
        "screen": "12-site-kits.png",
        "narration": "Choose style-only, merge, or explicit layout replacement according to the migration plan. Verify the import target and expected current hash before the first write. Preserve stable element identifiers, parent relationships, extension data, and non-pack global tokens unless replacement was approved."
      },
      {
        "label": "Validate Then Cut Over",
        "screen": "32-insights.png",
        "narration": "Check block counts, unique identifiers, parent and slot graphs, media URLs, forms, menus, responsive layout, Studio parity, public pages, SEO output, and logs before changing traffic. After cutover, verify redirects, canonical host, sitemap, cache, SSL, checkout bypasses, and the exact rollback path while the recovery window is still open."
      }
    ],
    "filename": "34-migration-import-export-and-cutover.mp4",
    "poster": "34-migration-import-export-and-cutover.webp",
    "captions": "34-migration-import-export-and-cutover.vtt",
    "transcript": "34-migration-import-export-and-cutover.txt",
    "duration": "PT1M25S",
    "sha256": {
      "video": "50fd15b3a88d654518b4648631470e94140b43e4f207a60b7ff4d0b74f7a4902",
      "poster": "a919bcd7dbc22fc2a79494ba687667d7f090b87064ea0edd1199ffced0209a72",
      "captions": "e6249a414e8da685c890fcb5522a9e0d0d91207b0ce5b0607bd309ce7dd7a3c0",
      "transcript": "a53c1a75cdd7b27f11a4c8f49dcf73c8f5166101b8c9098442ee223d32a9c633"
    }
  },
  {
    "number": 35,
    "slug": "modules-dependencies-and-update-diagnostics",
    "title": "Modules, Dependencies, and Update Diagnostics",
    "description": "Enable only the features a site needs, verify dependency health, and prove the identity and behavior of every update.",
    "guidePath": "/help4-dependency-update-diagnostics/",
    "keywords": [
      "modules",
      "dependencies",
      "update diagnostics",
      "release identity",
      "rollback"
    ],
    "segments": [
      {
        "label": "Choose Active Modules",
        "screen": "47-module-controls.png",
        "narration": "Open Builder settings and review the feature modules. Enable the Builder, commerce, SEO, forms, learning, operations, or other compartments the site actually uses. Disabling an unused module can reduce administration noise and asset work, but never disable a module until you know which pages, shortcodes, templates, and data depend on it."
      },
      {
        "label": "Review Dependency State",
        "screen": "34-update-module-settings.png",
        "narration": "Confirm WordPress, PHP, database, active theme, companion theme, addon contracts, and required extensions meet the release requirements. A dependency warning should identify the affected feature and a safe next action. It should not crash the whole site or replace an administrator screen with an unrelated promotion."
      },
      {
        "label": "Verify Update Identity",
        "screen": "32-insights.png",
        "narration": "Record the installed version and immutable build hash, then compare the updater manifest, versioned ZIP, latest alias, downloaded checksum, plugin headers, readme, asset query versions, and runtime diagnostics. All of these should identify the same release before it is promoted from beta to public."
      },
      {
        "label": "Run the Regression Gate",
        "screen": "35-igor-feedback.png",
        "narration": "After updating, open and save Builder Studio, test templates, responsive menus, forms, media, search, SEO, commerce, cache bypasses, and fresh logs. Use I.G.O.R. to report one reproducible failure with privacy-safe evidence. Keep the prior immutable package until the new release passes the real site acceptance matrix."
      }
    ],
    "filename": "35-modules-dependencies-and-update-diagnostics.mp4",
    "poster": "35-modules-dependencies-and-update-diagnostics.webp",
    "captions": "35-modules-dependencies-and-update-diagnostics.vtt",
    "transcript": "35-modules-dependencies-and-update-diagnostics.txt",
    "duration": "PT1M24S",
    "sha256": {
      "video": "a1bae60137580afacf456d3d9dc03f0e0dc54b61a33b791b2243ebef83bd4fd8",
      "poster": "0bf42ffaa59a84e2ffbda241b4fdcc21568ec5c255c57a1dcc8587ebb141a29e",
      "captions": "7495fb9bcac112d1f9e384340f947a06a9d5ea774adefd16b90df192bec44857",
      "transcript": "55af5d7dee38a046acdaf5e1b2538a41f6cee90cefbabea8a69418278feb3caf"
    }
  },
  {
    "number": 36,
    "slug": "publish-launch-qa-and-rollback",
    "title": "Publish, Launch QA, and Rollback",
    "description": "Move from a reviewed Builder draft to public release with responsive, SEO, interaction, performance, and recovery checks.",
    "guidePath": "/help4-builder-save-preview-publish/",
    "keywords": [
      "publish",
      "launch QA",
      "rollback",
      "save conflict",
      "public verification"
    ],
    "segments": [
      {
        "label": "Confirm the Intended Change",
        "screen": "14-page-settings.png",
        "narration": "Before publishing, confirm the page or template title, status, mode, assignment, global-change state, and save revision. Read the change summary and resolve any conflict from another editor instead of overwriting it. A global style save and a page content save have different reach and should be reviewed separately."
      },
      {
        "label": "Keep a Recovery Point",
        "screen": "48-page-history.png",
        "narration": "Verify the recent page history and the wider site recovery artifact before a major launch. Record the current public layout hash or other known-good identity. The recovery target must be complete and readable, and the person running the launch should know the exact command or control used to restore it."
      },
      {
        "label": "Run Prelaunch Checks",
        "screen": "17-seo-control.png",
        "narration": "Review one page heading, title, description, canonical, robots, social image, schema, sitemap status, links, forms, analytics intent, consent, accessibility, cold and warm performance, security headers, and mobile containment. Test important anonymous, signed-in, customer, and editor states without using a production payment or private record unnecessarily."
      },
      {
        "label": "Verify Public and Monitor",
        "screen": "37-studio-mobile-preview.png",
        "narration": "Publish once, purge only the affected cache, and open the public page in a clean session at desktop, tablet, and mobile. Confirm content, styles, media, menus, forms, and calls to action. Inspect fresh browser and PHP logs, then keep the rollback package until the update remains healthy after a warmed request and a second independent check."
      }
    ],
    "filename": "36-publish-launch-qa-and-rollback.mp4",
    "poster": "36-publish-launch-qa-and-rollback.webp",
    "captions": "36-publish-launch-qa-and-rollback.vtt",
    "transcript": "36-publish-launch-qa-and-rollback.txt",
    "duration": "PT1M23S",
    "sha256": {
      "video": "3ff47b4ff31caaff868b873d5b622b0a983705d78873a6909e86e818639e2ad9",
      "poster": "144074db3b194b7ad4f1e60a3af8c4617dbf66f5f9c8a16f488bb948fc2144fe",
      "captions": "6e3654f06f274e27e38026ed81fa889052228a123e1152b212ce1744f3268520",
      "transcript": "625600374d52ac830aec29482936dfa8e6434b589f1af3684f72241e6b7ff8ba"
    }
  },
  {
    "number": 37,
    "slug": "build-a-sales-homepage-from-blank-canvas",
    "title": "Build a Sales Homepage from a Blank Canvas",
    "description": "Turn one clear offer into a complete responsive homepage with proof, services, process, pricing, FAQ, and a final action.",
    "guidePath": "/help4-builder-sales-homepage/",
    "keywords": [
      "sales homepage",
      "landing page",
      "offer",
      "conversion page",
      "blank canvas"
    ],
    "segments": [
      {
        "label": "Choose the Page Job",
        "screen": "49-sales-page-template.png",
        "narration": "Begin with the visitor, the problem, and one primary action. A useful sales homepage normally needs an offer, proof, service or product choices, a simple process, pricing guidance, common questions, and a final contact action. Use a reviewed landing-page starter when it matches that job, or build the same open-band structure from a blank page."
      },
      {
        "label": "Build the Structure First",
        "screen": "10-section-design.png",
        "narration": "Create full-width sections for each part of the story, then add constrained containers and only the columns the content needs. Set desktop, tablet, and mobile gaps and padding at the parent level. Finish the reading order before styling individual headings or buttons, because a clear structure is easier to edit and less likely to collapse on a phone."
      },
      {
        "label": "Add Real Content and Proof",
        "screen": "11-template-library.png",
        "narration": "Replace every sample with the real offer, audience, evidence, service facts, links, images, and limitations. Keep one page heading, use meaningful section headings, and connect each action to a real next step. Do not publish invented testimonials, rankings, customer counts, guarantees, or visually similar replacement brand assets."
      },
      {
        "label": "Verify the Whole Journey",
        "screen": "37-studio-mobile-preview.png",
        "narration": "Read the page from the first promise through the final action at desktop, tablet, three hundred ninety pixels, and three hundred sixty pixels. Test every button, menu, form, media item, FAQ, and pricing choice. Then review title, description, social image, schema, performance, accessibility, and the public page before calling the homepage complete."
      }
    ],
    "filename": "37-build-a-sales-homepage-from-blank-canvas.mp4",
    "poster": "37-build-a-sales-homepage-from-blank-canvas.webp",
    "captions": "37-build-a-sales-homepage-from-blank-canvas.vtt",
    "transcript": "37-build-a-sales-homepage-from-blank-canvas.txt",
    "duration": "PT1M25S",
    "sha256": {
      "video": "4a2439c7b16b953b0670816fd0b2cacd66cd1fe94b46c4bfa4e0df5d6cd7978e",
      "poster": "2ff69c256eac6d2f403c3867d3aac3bb0137594954eac80878b5ec2eff10b431",
      "captions": "7f867355e5fb7f050ee3582e2458bd6ebb6b3a8c6a72facf7daa8858baff9df5",
      "transcript": "74f4171cbfa83503458209726805bcf34bd4ca30d50b11be707e4ff086f6acec"
    }
  },
  {
    "number": 38,
    "slug": "five-plan-pricing-comparison",
    "title": "Build a Five-Plan Pricing Comparison",
    "description": "Compare as many as five offers with semantic rows, honest distinctions, clear actions, and a deliberate narrow-screen order.",
    "guidePath": "/help4-builder-pricing-comparison/",
    "keywords": [
      "pricing comparison",
      "five plans",
      "pricing table",
      "packages",
      "mobile plan order"
    ],
    "segments": [
      {
        "label": "Start with the Decisions",
        "screen": "50-pricing-comparison-template.png",
        "narration": "List the decisions a customer actually needs to make before choosing a visual pattern. Give each plan a clear audience, price basis, included work, important limits, and one destination. Use a pricing comparison starter only after verifying it can represent every approved plan without hiding material differences in tiny text."
      },
      {
        "label": "Build Semantic Plan Content",
        "screen": "13-widget-library.png",
        "narration": "Use headings, price text, real lists, buttons, and optional badges inside stable plan containers. Do not build the comparison as one pasted image or a maze of manual line breaks. Meaningful elements remain editable, searchable, accessible, and easier to reorder when a package changes."
      },
      {
        "label": "Set an Intentional Order",
        "screen": "10-section-design.png",
        "narration": "Choose the desktop grid and the tablet and mobile order deliberately. Five plans usually need a smaller grid or one-column sequence on narrow screens. Make the visual order match the document and keyboard order, keep plan names attached to their features, and avoid using CSS positioning to create a different inaccessible reading sequence."
      },
      {
        "label": "Test Prices and Actions",
        "screen": "37-studio-mobile-preview.png",
        "narration": "Verify every approved price, billing period, setup fee, feature allowance, exclusion, button label, and checkout or contact destination. Check wrapping at all responsive boundaries, keyboard focus, contrast on highlighted plans, and the public page. A pricing layout is not ready if one plan is clipped or a customer cannot tell what happens after clicking."
      }
    ],
    "filename": "38-five-plan-pricing-comparison.mp4",
    "poster": "38-five-plan-pricing-comparison.webp",
    "captions": "38-five-plan-pricing-comparison.vtt",
    "transcript": "38-five-plan-pricing-comparison.txt",
    "duration": "PT1M24S",
    "sha256": {
      "video": "658b0e7538f147421d46abfcb30fafaa2790aad871db052f79f5ff1366efa422",
      "poster": "83e5f376b18d499d5a028c60669051c90c4361f79e3e3e8720de5405f9d5cda4",
      "captions": "d870a928bd25744005f4663feb36a7bb3017d6d98b136ec1a4ab6dfdf2948f96",
      "transcript": "4f59cc2faaf200510dc7f6d9d9083ddd4f318ce9d19261b7e7285ccb6140152d"
    }
  },
  {
    "number": 39,
    "slug": "accessible-faq-accordion-and-schema",
    "title": "Build an Accessible FAQ Accordion with Schema",
    "description": "Create useful question-and-answer disclosures that work by keyboard and produce accurate FAQ structured data without duplication.",
    "guidePath": "/help4-builder-faq-accordion-schema/",
    "keywords": [
      "FAQ accordion",
      "FAQ schema",
      "accessible disclosure",
      "questions",
      "structured data"
    ],
    "segments": [
      {
        "label": "Choose Real Questions",
        "screen": "51-faq-template.png",
        "narration": "Collect questions people actually ask before buying, contacting, or completing the task. Keep each question focused and answer it directly in visible page content. An FAQ starter supplies structure, not facts, so replace every sample and remove questions that do not belong to this page."
      },
      {
        "label": "Use the Native FAQ Element",
        "screen": "13-widget-library.png",
        "narration": "Insert the native accordion or FAQ element and enter one question and answer per item. Use controls that expose expanded state, connect each trigger to its panel, and preserve useful HTML such as links and short lists. Do not hide critical terms only inside collapsed content."
      },
      {
        "label": "Match Visible Content and Schema",
        "screen": "17-seo-control.png",
        "narration": "Enable FAQ structured data only when the same questions and answers are visibly available on the page and appropriate for the content. Keep one source of truth so the schema cannot drift from the accordion. Review the page graph and avoid emitting a second FAQ block from another SEO tool."
      },
      {
        "label": "Test Every State",
        "screen": "37-studio-mobile-preview.png",
        "narration": "Open and close every item with pointer, touch, Enter, and Space. Confirm focus remains visible, answers fit at narrow widths, links work, and the open state does not jump the page unexpectedly. Then validate public structured data and verify the page remains useful when scripting is delayed or unavailable."
      }
    ],
    "filename": "39-accessible-faq-accordion-and-schema.mp4",
    "poster": "39-accessible-faq-accordion-and-schema.webp",
    "captions": "39-accessible-faq-accordion-and-schema.vtt",
    "transcript": "39-accessible-faq-accordion-and-schema.txt",
    "duration": "PT1M18S",
    "sha256": {
      "video": "5b1b1237e4380bfaf2c28e76f9c3886cc4a8a47b0e618f295fbddb63132059d0",
      "poster": "d78157229d3a71f92a65982d2e480908eb99e609ef1023d683d6f2ea283d362b",
      "captions": "117d00a35af9bf904e81a479165845c4aef4e474f90076a3a3fb7ffcdf6b1d81",
      "transcript": "aa8061528ee99065b41f517e2304a28cedd520576df38815a4699be383b9f338"
    }
  },
  {
    "number": 40,
    "slug": "widget-library-favorites-and-addon-modules",
    "title": "Widget Library, Favorites, and Addon Modules",
    "description": "Find the right Builder element, keep trusted widgets close, and understand when an addon module owns its own data, assets, and controls.",
    "guidePath": "/help4-builder-widget-library/",
    "keywords": [
      "widget library",
      "favorites",
      "addon modules",
      "elements",
      "recent widgets"
    ],
    "segments": [
      {
        "label": "Search by the Job",
        "screen": "13-widget-library.png",
        "narration": "Open Widgets and search for the job you need, such as menu, form, image, product, course, search, video, or dynamic field. Read the widget name and category before inserting it. Similar-looking elements can own different content, accessibility behavior, scripts, and data contracts."
      },
      {
        "label": "Use Favorites and Recent Items",
        "screen": "52-widget-favorites.png",
        "narration": "Favorite the small set of widgets your team uses correctly and use the Recent filter while building related sections. Favorites do not disable the rest of the catalog; they reduce hunting and help newer editors start from approved components. Remove a favorite when the team has replaced that pattern."
      },
      {
        "label": "Configure the Element, Not Its Parent",
        "screen": "22-dynamic-data-widgets.png",
        "narration": "Select the inserted widget in Navigator or the preview, then edit its Content, Design, and Advanced settings. Use the parent section for layout and the widget for its own data and presentation. When a registered addon module supplies the element, keep its wrapper and extension settings intact through save and reload."
      },
      {
        "label": "Verify Assets and Empty States",
        "screen": "32-insights.png",
        "narration": "Check that the widget loads only the styles and scripts it needs on the public page and inside Studio. Test normal data, no data, loading, error, signed-out, and mobile states where they apply. A widget is complete only when it survives save, reopen, responsive preview, and public rendering without a missing dependency."
      }
    ],
    "filename": "40-widget-library-favorites-and-addon-modules.mp4",
    "poster": "40-widget-library-favorites-and-addon-modules.webp",
    "captions": "40-widget-library-favorites-and-addon-modules.vtt",
    "transcript": "40-widget-library-favorites-and-addon-modules.txt",
    "duration": "PT1M16S",
    "sha256": {
      "video": "eee617b5cd2ec7ccc12594272d660db3162de967e05def2bfdff2d2f9a80ace7",
      "poster": "44c8d81386f66c589f285c1c08bfac96973b8e6c089289ceca5782c7c82d5c43",
      "captions": "4f203ef6d0212de25f73dc11c3d59360d1b27c1180b6562f38359a9e23ee70f8",
      "transcript": "0f67c466c1b9be9c8525069b96b5c97793802affc89b97b3747ce5f5f472148b"
    }
  },
  {
    "number": 41,
    "slug": "repeaters-relationships-and-dynamic-templates",
    "title": "Repeaters, Relationships, and Dynamic Templates",
    "description": "Model repeating content once, connect related records, and bind approved values into reusable Builder templates safely.",
    "guidePath": "/help4-builder-fields/",
    "keywords": [
      "repeater",
      "relationship",
      "dynamic fields",
      "field group",
      "dynamic template"
    ],
    "segments": [
      {
        "label": "Model the Content",
        "screen": "53-field-group-editor.png",
        "narration": "Create a field group around the information people maintain, not the shape of one page. Use clear field names, instructions, types, validation, defaults, privacy settings, and location rules. A repeater fits repeated rows such as FAQs or specifications, while a relationship connects this record to another approved post, product, person, or resource."
      },
      {
        "label": "Enter Structured Values",
        "screen": "26-fields-lab.png",
        "narration": "Test the group on a representative content record. Add, reorder, and remove repeater rows; select valid related records; and confirm required, numeric, date, choice, URL, and media rules behave as expected. Keep private operational values out of public bindings even if they are convenient to store beside public content."
      },
      {
        "label": "Bind a Dynamic Widget",
        "screen": "22-dynamic-data-widgets.png",
        "narration": "In the reusable template, insert the widget that matches the value and choose its approved dynamic source. Add a meaningful fallback for missing optional content. Keep formatting in the widget and source data in the field so editors can change a value without editing the template layout."
      },
      {
        "label": "Test the Content Matrix",
        "screen": "46-template-admin.png",
        "narration": "Apply the template to the intended content type and test records with complete, partial, empty, long, and repeated data. Verify relationship permissions, parent and slot structure, mobile containment, and save reload behavior. A reusable template should fail gracefully rather than showing raw keys or empty decorative boxes."
      }
    ],
    "filename": "41-repeaters-relationships-and-dynamic-templates.mp4",
    "poster": "41-repeaters-relationships-and-dynamic-templates.webp",
    "captions": "41-repeaters-relationships-and-dynamic-templates.vtt",
    "transcript": "41-repeaters-relationships-and-dynamic-templates.txt",
    "duration": "PT1M22S",
    "sha256": {
      "video": "75dd8a8ac655b10375b7f155add0dbfe20abbc265cb049f467dc541c1400ed47",
      "poster": "89f56b7764c7e80ddf8b691c0392e0355a924ab2da7cfdfc3cff8964d61d9f07",
      "captions": "d66d69fd2fcbfe44cd280763940bcc2fbc6030a5d0515c2ff8ec3e68dc2a40f6",
      "transcript": "af17e8b8da711a174525cf396fc473f07431f9289d79205e8a182ca26f818c05"
    }
  },
  {
    "number": 42,
    "slug": "commerce-catalog-tax-shipping-and-orders",
    "title": "Commerce Catalog, Tax, Shipping, and Order Operations",
    "description": "Configure a native store from product rules through tax, shipping, checkout, payment, fulfillment, subscriptions, and refunds.",
    "guidePath": "/help4-commerce-launch-testing/",
    "keywords": [
      "commerce operations",
      "orders",
      "tax",
      "shipping",
      "subscriptions"
    ],
    "segments": [
      {
        "label": "Review Store Readiness",
        "screen": "18-commerce.png",
        "narration": "Start on the Commerce dashboard and review catalog, customer, payment, order, fulfillment, subscription, refund, and operational health. Confirm currency, business identity, policy pages, email delivery, test mode, and required modules before accepting a real order."
      },
      {
        "label": "Verify Order Context",
        "screen": "54-commerce-orders.png",
        "narration": "Open an order and read customer context, line items, quantities, options, discounts, tax, shipping, payment state, fulfillment, notes, and status history together. A single-sale product with quantity disabled should not expose a quantity control, while separately configured line items remain independently purchasable according to their product rules."
      },
      {
        "label": "Test Tax and Shipping",
        "screen": "55-commerce-taxes.png",
        "narration": "Configure reviewed tax behavior for the relevant jurisdiction and verify display, rounding, exemptions, and saved order evidence. Then test shipping zones, providers, service levels, package rules, fallback behavior, and address failures. Use test destinations that cover the boundaries the store actually serves."
      },
      {
        "label": "Run the Lifecycle",
        "screen": "56-commerce-shipping.png",
        "narration": "Complete a test from catalog through variation selection, customer fields, cart, discount, tax, shipping, payment, webhook, order email, account state, fulfillment, cancellation, refund, and subscription renewal where applicable. Repeat the critical path on mobile and keep the processor and checkout in test mode until every expected transition is recorded."
      }
    ],
    "filename": "42-commerce-catalog-tax-shipping-and-orders.mp4",
    "poster": "42-commerce-catalog-tax-shipping-and-orders.webp",
    "captions": "42-commerce-catalog-tax-shipping-and-orders.vtt",
    "transcript": "42-commerce-catalog-tax-shipping-and-orders.txt",
    "duration": "PT1M21S",
    "sha256": {
      "video": "3b1566d4de7612b5fe1c3ad9d80ff3431ee48622b85b7a17485eb15997085b2f",
      "poster": "48700f1700d232f41e4961dfbf0d90fa4e94b3ec0a10f3a6edc8146eeaca6183",
      "captions": "3b37a8e301b859ea5e12cc795e7886f2a2280f0e388ea7381cdc9496163e92bd",
      "transcript": "85f13ffd5d5b78a820432f733725c7bfae907d9a67625f44dc87b1961027e587"
    }
  },
  {
    "number": 43,
    "slug": "form-entries-delivery-and-spam-diagnostics",
    "title": "Form Entries, Delivery, and Spam Diagnostics",
    "description": "Trace a form from accessible fields through validation, consent, spam checks, delivery evidence, confirmation, and privacy handling.",
    "guidePath": "/help4-builder-forms-lead-capture/",
    "keywords": [
      "form entries",
      "delivery",
      "spam diagnostics",
      "lead capture",
      "validation"
    ],
    "segments": [
      {
        "label": "Build the Complete Form",
        "screen": "16-forms.png",
        "narration": "Create only the fields needed for the visitor task and give each one a visible label, expected format, required state, helpful instruction, and useful error. Configure the monitored destination, subject, reply behavior, consent language, retention, spam controls, success message, and failure message before placing the form on a public page."
      },
      {
        "label": "Submit Controlled Test Cases",
        "screen": "37-studio-mobile-preview.png",
        "narration": "Complete the form at desktop and mobile with a valid submission, each required field missing, an invalid email or phone value, a long message, keyboard-only input, and a deliberate spam-control failure. The page should preserve useful values, move focus to the problem, explain the correction, and never expose configuration or private server details."
      },
      {
        "label": "Review Entry Evidence",
        "screen": "61-form-entries.png",
        "narration": "Open Form Entries and match the test submission to its form, time, validation state, consent context, delivery attempt, and final status. Restrict access to people who need the records, avoid placing secrets in message fields, and follow the configured retention, export, and erasure policy."
      },
      {
        "label": "Diagnose Without Guessing",
        "screen": "35-igor-feedback.png",
        "narration": "If the visitor saw success but no message arrived, confirm the entry exists, inspect the recorded delivery result, verify the monitored destination and site mail transport, check fresh logs, and test again with a controlled address. Report one reproducible path through I.G.O.R. instead of repeatedly submitting real customer data or disabling every spam control."
      }
    ],
    "filename": "43-form-entries-delivery-and-spam-diagnostics.mp4",
    "poster": "43-form-entries-delivery-and-spam-diagnostics.webp",
    "captions": "43-form-entries-delivery-and-spam-diagnostics.vtt",
    "transcript": "43-form-entries-delivery-and-spam-diagnostics.txt",
    "duration": "PT1M26S",
    "sha256": {
      "video": "87766a33c01c6971b8bbc0b8999d5d2d642b3fe79f4e9c85b1c6111474cfa82e",
      "poster": "f4487e2e6be863d904dba9da184ba0b4d8cddf4dbe6e3460981abf419725d640",
      "captions": "d8d9e02182b7a67076c3e6e1aab9ba0c7385ebd812450d48164605fc3e4325e4",
      "transcript": "8ae1c327a67bd682fb803ce41c06104e3125caa7ed2b656d87f5de8c9eec7093"
    }
  },
  {
    "number": 44,
    "slug": "multisite-network-setup-and-seo-controls",
    "title": "Multisite Network Setup and SEO Controls",
    "description": "Provision useful network defaults while preserving per-site ownership, indexing choices, data isolation, and bounded operations.",
    "guidePath": "/help4-builder-multisite-guide/",
    "keywords": [
      "multisite",
      "network settings",
      "network SEO",
      "site defaults",
      "WordPress network"
    ],
    "segments": [
      {
        "label": "Define Network Ownership",
        "screen": "47-module-controls.png",
        "narration": "Decide which settings belong to the network and which remain site-specific before enabling modules across a multisite installation. A network default can recommend modules, security, update channels, or SEO foundations, but each site still needs its own brand, public status, content, business details, social profiles, and permissions."
      },
      {
        "label": "Provision Conservative Defaults",
        "screen": "34-update-module-settings.png",
        "narration": "Enable only the compartments the network expects and use defaults that are safe when a new site has no stored configuration. Do not make a new site indexable merely because the network is public, and do not copy one customer organization, schema identity, analytics value, sender address, or commerce secret into every site."
      },
      {
        "label": "Configure Each Site",
        "screen": "17-seo-control.png",
        "narration": "Visit the individual site administration and set its site name, canonical host, indexing choice, sitemap, metadata, social image, organization or person identity, local business data, forms, privacy routes, and template assignments. Confirm network controls do not overwrite a deliberate site-level choice during autosave or update."
      },
      {
        "label": "Test Isolation and Scale",
        "screen": "32-insights.png",
        "narration": "Create representative sites with different modules and indexing states, then verify caches, scheduled jobs, database tables, uploads, REST routes, permissions, and deletion behavior stay isolated. Test network activation and per-site activation, upgrade one existing site, and confirm a failure on one site does not break administration or public output across the network."
      }
    ],
    "filename": "44-multisite-network-setup-and-seo-controls.mp4",
    "poster": "44-multisite-network-setup-and-seo-controls.webp",
    "captions": "44-multisite-network-setup-and-seo-controls.vtt",
    "transcript": "44-multisite-network-setup-and-seo-controls.txt",
    "duration": "PT1M28S",
    "sha256": {
      "video": "541104ecf55512a5975615ed003e21ff91093c8c8affb85ea77032552115225e",
      "poster": "e246469e69484b20e5f58c406cf64ccd404f720e15323dd19f75ffa7adad4ff0",
      "captions": "bef4f7f77b05c3cb570e4ba8862bda99b969913b880627a73e0675b620cc3958",
      "transcript": "f69f7bf229e3d11db3256260924acff66b5e5d5bffda290ee534423a4a32321c"
    }
  },
  {
    "number": 45,
    "slug": "google-business-profiles-reviews-and-local-proof",
    "title": "Google Business Profiles, Reviews, and Local Proof",
    "description": "Connect accurate business identity, locations, service areas, maps, reviews, visible proof, and local structured data.",
    "guidePath": "/help4-google-business-reviews-guide/",
    "keywords": [
      "Google Business Profile",
      "reviews",
      "local proof",
      "Place ID",
      "service area"
    ],
    "segments": [
      {
        "label": "Match the Real Business",
        "screen": "27-local-seo.png",
        "narration": "Enter the real business name, phone, website, address or service area, hours, categories, support route, and social profiles exactly as the organization uses them publicly. Do not create a fake location or copy one site identity into another. Local structured data should describe visible, supportable business facts."
      },
      {
        "label": "Connect the Approved Profile",
        "screen": "60-google-business.png",
        "narration": "Use the approved domain, location, Place ID, map, and review connection without exposing private credentials in page content or screenshots. Verify the selected profile belongs to the business and location being edited. Keep API usage bounded to the data the site actually displays and refresh only on an appropriate schedule."
      },
      {
        "label": "Place Honest Local Proof",
        "screen": "17-seo-control.png",
        "narration": "Add the business identity, location or service area, map, contact path, and review output where they help a visitor make a decision. Keep visible content and structured data aligned, label aggregate values accurately, and never manufacture, filter deceptively, or rewrite customer reviews as if they were verbatim."
      },
      {
        "label": "Verify the Local Surface",
        "screen": "37-studio-mobile-preview.png",
        "narration": "Check the page at desktop and mobile, then test the address or service-area language, click-to-call link, directions, map consent behavior, review source, profile destination, social preview, local schema, and public contact route. Repeat the check after a location, hours, or business-name change."
      }
    ],
    "filename": "45-google-business-profiles-reviews-and-local-proof.mp4",
    "poster": "45-google-business-profiles-reviews-and-local-proof.webp",
    "captions": "45-google-business-profiles-reviews-and-local-proof.vtt",
    "transcript": "45-google-business-profiles-reviews-and-local-proof.txt",
    "duration": "PT1M22S",
    "sha256": {
      "video": "63618c758c5c6e56884882d8b18ef22a3900a721a85cc1f03f7f5d1308c48ebb",
      "poster": "a3dd7becff9817fd517491bf32b1fde6e261d8e513f516b44b166bc5099f5d93",
      "captions": "e3eeb04f907a8efa3fc262714feb9f362b3956a8cbb66399ccabbcc37fc6f42f",
      "transcript": "c6cc236a40a02bfd5330240800f0c98ce09cb8800ca81aaa46282b95e6448c89"
    }
  },
  {
    "number": 46,
    "slug": "wordpress-security-hardening-and-recovery",
    "title": "WordPress Security Hardening and Recovery Access",
    "description": "Apply evidence-based hardening without locking out administrators, breaking trusted proxies, or losing the recovery path.",
    "guidePath": "/help4-security-hardening-guide/",
    "keywords": [
      "WordPress security",
      "hardening",
      "recovery",
      "proxy trust",
      "login protection"
    ],
    "segments": [
      {
        "label": "Review Current Risk",
        "screen": "33-security.png",
        "narration": "Open Security and review HTTPS, headers, login protection, proxy trust, file permissions, user roles, update state, secrets, exposed routes, commerce data, and fresh logs. A warning is a starting point for verification, not permission to turn on every control at once."
      },
      {
        "label": "Confirm Dependencies",
        "screen": "34-update-module-settings.png",
        "narration": "Record the WordPress, PHP, database, plugin, theme, web server, cache, proxy, CDN, and authentication path before changing enforcement. Trust only known proxy headers and addresses. Test the real administrator route and public origin so a header or redirect change does not create a loop or hide the actual client address."
      },
      {
        "label": "Keep Recovery Available",
        "screen": "48-page-history.png",
        "narration": "Maintain a verified database and file recovery point, the prior immutable package, and an out-of-band way to disable the affected module if administration fails. Builder page history can recover content structure, but it does not replace a complete site backup for plugin, database, user, or server changes."
      },
      {
        "label": "Apply and Regression Test",
        "screen": "35-igor-feedback.png",
        "narration": "Make one bounded change, then test anonymous pages, login, logout, password reset, administrator access, REST routes, forms, uploads, cache behavior, checkout, webhooks, scheduled jobs, and fresh logs. Use I.G.O.R. to record the exact failure and evidence instead of weakening broad controls without knowing which rule caused the problem."
      }
    ],
    "filename": "46-wordpress-security-hardening-and-recovery.mp4",
    "poster": "46-wordpress-security-hardening-and-recovery.webp",
    "captions": "46-wordpress-security-hardening-and-recovery.vtt",
    "transcript": "46-wordpress-security-hardening-and-recovery.txt",
    "duration": "PT1M22S",
    "sha256": {
      "video": "1872d03a638705247eb70bfdafd2f496a96af79dac21aa261e772bc83c252f43",
      "poster": "dadc3032f54d5665c0dfb82c73b9aaa1d6ae41b2252a7d62ae59fa967956a372",
      "captions": "57e7bbc1e7a87c41a3a2fefa5d3b00f851ccb8e710b797cd07f0a8f8d215c451",
      "transcript": "a1c3c0520336f4c939f5e5bd26f10ebecc82d6450aacd90d273d421f787d5bc5"
    }
  },
  {
    "number": 47,
    "slug": "cache-assets-and-performance-diagnostics",
    "title": "Cache, Assets, and Performance Diagnostics",
    "description": "Measure cold and warm behavior, reduce unused work, preserve bypass rules, and verify interactions instead of chasing one score.",
    "guidePath": "/help4-performance-cache-assets-guide/",
    "keywords": [
      "performance",
      "cache",
      "assets",
      "page speed",
      "diagnostics"
    ],
    "segments": [
      {
        "label": "Measure a Real Route",
        "screen": "32-insights.png",
        "narration": "Choose a representative public route and record cold and warm response time, rendered content, transfer size, requests, long tasks, layout shifts, largest content, interaction behavior, and server logs. Test anonymously and use the same route and viewport for the before and after comparison."
      },
      {
        "label": "Reduce Unused Work",
        "screen": "31-image-studio.png",
        "narration": "Optimize the media actually rendered, use responsive sources, preserve useful lazy loading, and enable only the Builder modules the page needs. Keep component styles and scripts tied to their widgets or module contracts rather than loading every commerce, learning, slider, form, or administration asset on every page."
      },
      {
        "label": "Protect Cache Boundaries",
        "screen": "34-update-module-settings.png",
        "narration": "Cache public read-only pages where appropriate, but preserve bypass behavior for administration, previews, signed-in sessions, carts, checkout, account pages, forms, query-sensitive routes, webhooks, and personalized content. A fast cached response is wrong when it contains another visitor state or stale post-save output."
      },
      {
        "label": "Warm and Recheck Behavior",
        "screen": "37-studio-mobile-preview.png",
        "narration": "Purge only the affected route or site scope, request it cold, confirm the new content fingerprint, then request it warm and compare. Test menus, FAQ, sliders, video, forms, search, cart, responsive layout, and reduced motion. Keep the change only when public behavior and fresh logs remain correct as well as the performance evidence."
      }
    ],
    "filename": "47-cache-assets-and-performance-diagnostics.mp4",
    "poster": "47-cache-assets-and-performance-diagnostics.webp",
    "captions": "47-cache-assets-and-performance-diagnostics.vtt",
    "transcript": "47-cache-assets-and-performance-diagnostics.txt",
    "duration": "PT1M22S",
    "sha256": {
      "video": "0a6f9fa164bb91db19147b08b8215f25ceefb08e04b149de44d392d0302199e4",
      "poster": "a859253bc2f20ffa9509d166ad91b52a31cc600a0e2ba798123014912e7f32fc",
      "captions": "90dec741ffb0f0312b2beeb3e7c876d5cf21b7dd74ced411d8a981543e77d398",
      "transcript": "88bc643912d4f868969b308b81d53dca30d23f6969e0010c387eacfd7c5e3f6c"
    }
  },
  {
    "number": 48,
    "slug": "accessibility-keyboard-contrast-and-reduced-motion",
    "title": "Accessibility, Keyboard, Contrast, and Reduced Motion",
    "description": "Audit Builder pages for meaningful structure, complete keyboard operation, visible focus, sufficient contrast, and calm motion alternatives.",
    "guidePath": "/help4-builder-accessibility-audit/",
    "keywords": [
      "accessibility",
      "keyboard",
      "contrast",
      "reduced motion",
      "focus"
    ],
    "segments": [
      {
        "label": "Check Structure and Names",
        "screen": "04-heading-content.png",
        "narration": "Start with one descriptive page heading, a logical heading sequence, landmarks, real lists, useful link and button names, form labels, image alternatives, and an accurate page title. Structure should describe the content without depending on color, position, or a screenshot of text."
      },
      {
        "label": "Use the Entire Page by Keyboard",
        "screen": "08-button-design.png",
        "narration": "Move through the public page with Tab and Shift Tab, then operate menus, disclosures, sliders, forms, dialogs, media, and custom controls with their expected keys. Focus must remain visible, follow a useful order, avoid traps, and return to the invoking control after a dialog or menu closes."
      },
      {
        "label": "Verify Contrast and Responsive Reflow",
        "screen": "37-studio-mobile-preview.png",
        "narration": "Check text, icons, controls, focus indicators, errors, placeholders, disabled states, and text placed on images or colored panels. Zoom and inspect narrow widths without losing content or forcing horizontal document scrolling. A large desktop contrast value does not excuse faint body text or controls on another state."
      },
      {
        "label": "Respect Motion Preferences",
        "screen": "24-slider-motion-controls.png",
        "narration": "Use motion only to support understanding, provide pause or manual controls where needed, and keep duration, delay, easing, and triggers editable. Under reduced motion, remove ambient movement, parallax, automatic transitions, and decorative video where practical while preserving every message and action. Test both preference states in Studio and public output."
      }
    ],
    "filename": "48-accessibility-keyboard-contrast-and-reduced-motion.mp4",
    "poster": "48-accessibility-keyboard-contrast-and-reduced-motion.webp",
    "captions": "48-accessibility-keyboard-contrast-and-reduced-motion.vtt",
    "transcript": "48-accessibility-keyboard-contrast-and-reduced-motion.txt",
    "duration": "PT1M22S",
    "sha256": {
      "video": "f64667c427945aa895633c0d18c6db2b73d8126e9c3ba602164fb7b6b3b56300",
      "poster": "bec863fc370102d1740922291e9f690d65b2e5385192436c12e06103bc13344c",
      "captions": "d1ba6859d2e8ee4cf9b542305cd8957d18ddb1ecc51663619bf57592a003ddaf",
      "transcript": "c944d209594c0339a774e544ae02e7ca3de480bbb4ff0863f89074fa05807078"
    }
  },
  {
    "number": 49,
    "slug": "click-to-edit-your-first-change",
    "title": "Click to Edit Your First Builder Change",
    "description": "Open the correct page, click visible text or an image, preview the unsaved result, publish, and verify without deleting neighboring content.",
    "guidePath": "/help4-builder-editor-controls/",
    "keywords": [
      "click to edit",
      "first Builder change",
      "replace image",
      "edit text",
      "migrated HTML page"
    ],
    "segments": [
      {
        "label": "Open the Correct Page",
        "screen": "66-click-to-edit-open.png",
        "narration": "From WordPress, open Help4 Builder, choose Builder Pages, and open the page you mean to change. Check the page title at the upper left. The page is now in Studio: tools on the left, Live Preview in the center, and the inspector on the right."
      },
      {
        "label": "Click and Replace an Image",
        "screen": "67-click-to-edit-image.png",
        "narration": "To change a photo, click the photo itself in Live Preview. The inspector says Selected image. Choose Replace Image, pick the approved file, add a useful description, and change its link only when needed. On migrated pages, this quick editor protects the rest of the HTML block."
      },
      {
        "label": "Click and Edit the Words",
        "screen": "68-click-to-edit-text.png",
        "narration": "To change words, click the visible heading or paragraph. Type only the new words in Selected heading text. Watch the same unsaved result stay visible in Live Preview, then check tablet and mobile. If the old value returns, stop and do not publish."
      },
      {
        "label": "Publish and Verify",
        "screen": "69-click-to-edit-public-verify.png",
        "narration": "When the preview is correct, choose Save Element and Publish. Open the public page in another tab and confirm the new words or image, every link, and the neighboring content. Use Navigator only when overlapping layers make the exact item difficult to click."
      }
    ],
    "filename": "49-click-to-edit-your-first-change.mp4",
    "poster": "49-click-to-edit-your-first-change.webp",
    "captions": "49-click-to-edit-your-first-change.vtt",
    "transcript": "49-click-to-edit-your-first-change.txt",
    "duration": "PT1M6S",
    "sha256": {
      "video": "be92b82c7a5a31e508339664913e4771cd124a3ebe7de0fee7e2aa94fe77f78b",
      "poster": "de1ed109f24eb285ac091f8ce558022436f70da90de8d9b145e96c3693c2fa7f",
      "captions": "a5d18ced30b0e71d5f08e50a86ede243f42364af696b8ace7ffbed0d1e3a5a35",
      "transcript": "3b9a2d6e9ee8a9c61e4a7374ae7cf99eadf9768868b0579c0456f0acd3117f0a"
    }
  }
]
H4BS_TUTORIAL_VIDEO_JSON,
    true,
    512,
    JSON_THROW_ON_ERROR
);

return is_array($h4bsTutorialVideoCatalog) ? $h4bsTutorialVideoCatalog : [];
