Act as a product marketing designer. Build a split hero for {{business_name}}, for {{target_audience}}, in this style: {{visual_style}}. Reuse the project's tokens and components; change only the hero. Text column: a benefit headline (40 / 52 / 64px, line height 1.05, tracking -0.02em), a subhead of at most 2 sentences, a primary button and a secondary link, plus one line of specific reassurance (for example "Free for 14 days, no card"). The screenshot: - a real capture of our product with believable data: real-looking names, dates and numbers, never "Lorem Corp" or "John Doe" - crop to the screen that proves the headline, zoomed enough that its text is legible; don't shrink the whole app into a postage stamp - 1px border token, the app's own radius (8 to 12px), at most one soft shadow; no fake browser chrome, no 3D tilt - up to two callouts naming real features, positioned in percentages so they track the image - export at 2x in AVIF or WebP with width, height and srcset; eager load with fetchpriority high, since it may be the LCP element - a dark version swapped with picture and prefers-color-scheme if the site has dark mode - alt text says what the screen shows, not "screenshot" Layout: 1280: text 5 of 12 columns, image 7 and allowed to bleed off the right edge; 768: stacked, text first, image full width; 360: stacked, image cropped to its most telling region with object-position. Padding 56 / 80 / 120px. States: missing or failed image keeps its aspect-ratio box and shows a plain surface with the caption, never a broken icon; long headlines wrap to 3 lines at 360 without clipping; button hover, focus-visible and active as in the design system. Motion: image rises 16px and fades in over 500ms after the text; none under prefers-reduced-motion. Avoid: angled floating devices, glowing blobs behind the image, fake dashboards with made-up charts, a purple-to-blue backdrop. Ask me for the screenshot if I haven't attached one; don't invent a mock UI.