Act as a senior product designer. Build a bento-grid features section for {{business_name}} from these features: {{features}}. The visitors are {{target_audience}}. Style: {{visual_style}}. First rank the features by how much they matter to those visitors, and show me the ranking. Cell size follows rank, not decoration: - rank 1: a 2 by 2 hero cell with the real product in it - ranks 2 and 3: 2 by 1 cells - the rest: 1 by 1 If there are fewer than 5 features, tell me and use alternating rows instead; a bento grid of 3 cells is a tell. Every cell shows proof, and the types vary: a cropped screenshot, a live mini chart from real data, an actual UI control people can poke, a number with its source, or a short customer quote. At most two cells may be text only. Grid: 1280: 4 columns, rows auto with a 220px minimum, gap 16 to 20px, max width 1200px; 768: 2 columns; 360: 1 column in rank order. DOM order equals rank order so screen readers and phones get the same story. Cell: title 18 to 20px weight 600, one sentence of 15 to 16px body at 4.5:1, visual below or beside. One radius (16px), 1px border token, no shadows; at most one accent-filled cell. States: hover gives a small reaction tied to the feature (the chart draws, the toggle flips) in 200ms, never a tilt; focus-visible ring on any interactive cell; a missing image collapses the cell to its text layout, never an empty box; long titles wrap to 2 lines. Motion: cells fade in once, 40ms stagger, 400ms ease-out; nothing loops; none under prefers-reduced-motion. Semantics: a section with an h2, each cell an article with an h3. Avoid: six identical cells with icons in gradient circles, glass cards on blurred blobs, every cell animating, a grid that only works at 1440px. Return the ranking, the build, and a change list with reasons.