Quote to Sale — Fable 5 course build order

Before any quote exists there is a deal on a board, and the stage it sits in is a promise to everybody downstream. Moving a card is not admin — it tells the quote team to start work, it tells Operations a job is coming, and it decides which reports a deal appears in. So learn what the stages mean before you learn anything else, because a card in the wrong column is work nobody knows about.

1. Slide 1 of 5

   On screen — use verbatim as the slide caption

   The pipeline board on /UnifiedLeads — stage columns across the screen, each holding lead cards, with a count on every column header.

   Do

   Read the columns left to right.

   Say — verbatim voiceover

   “Left to right is the life of a deal. Your job is to move cards rightwards with something to show for each move — never to tidy the board.”

   Expect

   Columns render with counts and cards.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Pipeline board surface" for layout language, palette and density. SCREEN: /UnifiedLeads. IN FRAME: The pipeline board on /UnifiedLeads — stage columns across the screen, each holding lead cards, with a count on every column header. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Columns render with counts and cards. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 5

   On screen — use verbatim as the slide caption

   A lead card with a breathing gold halo, and separately a card flashing rose with a small pulsing light.

   Do

   Point at the gold card, then the rose one.

   Say — verbatim voiceover

   “Gold means this customer explicitly asked for a consultation — they are the warmest thing on your board. Rose and flashing means a customer who has come back to us after going quiet. Those two get touched first, every day, before anything else.”

   Expect

   Both attention states are visibly different from a normal card.

   Watch for — draw as a warning callout

   The portal only flashes for a returning customer. If everything is flashing, you are looking at the wrong filter, not a hot pipeline.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Pipeline board surface" for layout language, palette and density. SCREEN: /UnifiedLeads. IN FRAME: A lead card with a breathing gold halo, and separately a card flashing rose with a small pulsing light. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Both attention states are visibly different from a normal card. ALSO DRAW, smaller and to the side: the failure or edge state — The portal only flashes for a returning customer. If everything is flashing, you are looking at the wrong filter, not a hot pipeline. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 5

   On screen — use verbatim as the slide caption

   The lead drawer open from a card — identity rail with name, address, phone and email, then the tabs for notes, files and engagement.

   Do

   Open one card and read the identity rail.

   Say — verbatim voiceover

   “Everything about this customer hangs off this record: the quote, the proposal, the contract, the job folder. If the address or the email is wrong here, it is wrong in all of them.”

   Expect

   Drawer opens with contact and address visible.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: /UnifiedLeads. IN FRAME: The lead drawer open from a card — identity rail with name, address, phone and email, then the tabs for notes, files and engagement. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Drawer opens with contact and address visible. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 5

   On screen — use verbatim as the slide caption

   Moving a card to the next stage — the stage-move dialog, which asks for a reason on the moves that need one.

   Do

   Move a test card forward and read what it asks you for.

   Say — verbatim voiceover

   “Some moves ask you why. That reason is not bureaucracy — it is what the next person reads instead of guessing, and it is what a report can be built from later.”

   Expect

   The stage move completes and the card lands in the new column.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /UnifiedLeads. IN FRAME: Moving a card to the next stage — the stage-move dialog, which asks for a reason on the moves that need one. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: The stage move completes and the card lands in the new column. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 5

   On screen — use verbatim as the slide caption

   The move into Quote Request — the stage that hands the job to engineering.

   Do

   Attempt that move and let the checks run.

   Say — verbatim voiceover

   “Quote Request means: engineering, please build this. It is the one move the portal genuinely argues with you about, because a job arriving there with nothing attached cannot be designed. That is the next lesson.”

   Expect

   Either the move completes, or a blocking panel explains exactly what is missing.

   Watch for — draw as a warning callout

   A rose panel here is the system protecting the quote team, not a bug. Clear what it names — never route around it by moving the deal somewhere else.

   Image 5 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Pipeline board surface" for layout language, palette and density. SCREEN: /UnifiedLeads. IN FRAME: The move into Quote Request — the stage that hands the job to engineering. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: Either the move completes, or a blocking panel explains exactly what is missing. ALSO DRAW, smaller and to the side: the failure or edge state — A rose panel here is the system protecting the quote team, not a bug. Clear what it names — never route around it by moving the deal somewhere else. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: You can say out loud what Quote Request and Verbal Agreement each mean, and what has to be true before a deal may enter them.

Everything starts on the deal. Open your lead, check the address and the contact, then open the quote from there. Doing it from the deal is what keeps the whole job joined up — the quote, the proposal, the CRM stage and the contract all hang off this one record.

1. Slide 1 of 4

   On screen — use verbatim as the slide caption

   The pipeline board on /UnifiedLeads — columns of lead cards, gold-glowing card = hot intent.

   Do

   Click your test lead card.

   Say — verbatim voiceover

   “This is the pipeline. A card glowing gold is a customer who explicitly asked for a consultation — those get touched first.”

   Expect

   The lead drawer slides in from the right.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Pipeline board surface" for layout language, palette and density. SCREEN: /UnifiedLeads → /QuoteBuilder. IN FRAME: The pipeline board on /UnifiedLeads — columns of lead cards, gold-glowing card = hot intent. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: The lead drawer slides in from the right. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 4

   On screen — use verbatim as the slide caption

   Lead drawer — identity rail at the top: name, address, phone, email.

   Do

   Read the address out loud, then the email.

   Say — verbatim voiceover

   “Check these two before anything else. The address is what the designer traces, and the email is where the proposal goes. A wrong pin here costs the quote team an hour, and a missing email means they cannot even send it.”

   Expect

   Address and contact are visible and correct.

   Watch for — draw as a warning callout

   If the customer genuinely has no email, that gets recorded explicitly later — never invent one.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /UnifiedLeads → /QuoteBuilder. IN FRAME: Lead drawer — identity rail at the top: name, address, phone, email. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Address and contact are visible and correct. ALSO DRAW, smaller and to the side: the failure or edge state — If the customer genuinely has no email, that gets recorded explicitly later — never invent one. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 4

   On screen — use verbatim as the slide caption

   Drawer tool pills / Open Quote action.

   Do

   Click through to open the quote for this deal.

   Say — verbatim voiceover

   “Opening it from here creates the quote already linked to the CRM deal. Never start a quote from scratch and try to attach it later.”

   Expect

   Quote Builder opens with the deal reference on the quote.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /UnifiedLeads → /QuoteBuilder. IN FRAME: Drawer tool pills / Open Quote action. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Quote Builder opens with the deal reference on the quote. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 4

   On screen — use verbatim as the slide caption

   Quote Builder left rail — "Quote Builder" header, gold progress bar, five phases: 1 Customer & Site, 2 Design, 3 Materials & Pricing, 4 Quotation, 5 Proposal. Active phase is a white card with a gold left bar; completed phases show an emerald tick.

   Do

   Point at the rail and name the five phases.

   Say — verbatim voiceover

   “Five phases, and the rail is honest — a phase you cannot enter yet is dimmed and tells you why on hover. Reps live in phase one and phase five; the quote team owns the middle.”

   Expect

   Phase 1 Customer & Site is active.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /UnifiedLeads → /QuoteBuilder. IN FRAME: Quote Builder left rail — "Quote Builder" header, gold progress bar, five phases: 1 Customer & Site, 2 Design, 3 Materials & Pricing, 4 Quotation, 5 Proposal. Active phase is a white card with a gold left bar; completed phases show an emerald tick. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Phase 1 Customer & Site is active. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The quote shows the linked deal and your name as the assigned consultant.

This is the most important lesson in the rep track. A design is not drawn from a photograph — it is calculated from facts about the property: where the water comes from and how much of it there is, what power and backup exist, the roof type, the storeys, the vegetation, how many structures we are protecting. Those answers are the design inputs. Without them the quote team is choosing between guessing and waiting, and both of those cost you the deal you are trying to win.

1. Slide 1 of 8

   On screen — use verbatim as the slide caption

   Rose-bordered panel with a warning triangle: "Site assessment required for Quote Request *" and, beneath it, "This job hasn't had its wildfire home assessment yet. Engineering needs the water, power, WiFi, roof and site answers to design the system."

   Do

   Try to move the test lead to Quote Request and read the panel out loud.

   Say — verbatim voiceover

   “Read that second sentence carefully. It is not asking for a form — it is listing the things the engineer physically cannot design without. This block exists because jobs were arriving with none of it.”

   Expect

   The stage move is blocked and the panel names what is required.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /UnifiedLeads → lead workspace → Wildfire home assessment. IN FRAME: Rose-bordered panel with a warning triangle: "Site assessment required for Quote Request *" and, beneath it, "This job hasn't had its wildfire home assessment yet. Engineering needs the water, power, WiFi, roof and site answers to design the system." HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: The stage move is blocked and the panel names what is required. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 8

   On screen — use verbatim as the slide caption

   The line inside that panel: "Still needed:" followed by the specific outstanding answers separated by dots.

   Do

   Read the "Still needed" list.

   Say — verbatim voiceover

   “It names the actual gaps, not a generic warning. That list is your shopping list for the next five minutes on site — and it is exactly what the quote builder would otherwise have to phone you about.”

   Expect

   Named missing answers are listed.

   Watch for — draw as a warning callout

   An assessment that was started but not finished still blocks, and says so. Half a checklist is not an assessment.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /UnifiedLeads → lead workspace → Wildfire home assessment. IN FRAME: The line inside that panel: "Still needed:" followed by the specific outstanding answers separated by dots. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Named missing answers are listed. ALSO DRAW, smaller and to the side: the failure or edge state — An assessment that was started but not finished still blocks, and says so. Half a checklist is not an assessment. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 8

   On screen — use verbatim as the slide caption

   Rose button "Start assessment" with a clipboard icon (it reads "Continue assessment" if one was already begun), alongside an upload button and, when a file exists, "Re-read uploaded assessment".

   Do

   Point at the upload option first, then open the wizard.

   Say — verbatim voiceover

   “If your team already filled the paper sheet in, upload it — the portal reads it and fills the answers in for you. You never have to type a document the system already has.”

   Expect

   The assessment wizard opens.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /UnifiedLeads → lead workspace → Wildfire home assessment. IN FRAME: Rose button "Start assessment" with a clipboard icon (it reads "Continue assessment" if one was already begun), alongside an upload button and, when a file exists, "Re-read uploaded assessment". HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: The assessment wizard opens. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 8

   On screen — use verbatim as the slide caption

   Emerald panel: "Read your uploaded assessment", then a line per file saying how many answers it filled automatically, and if anything remains, "The rest isn't in the document — add just those answers below."

   Do

   Show the state after an upload has been read.

   Say — verbatim voiceover

   “It tells you what it took from your document and what genuinely remains. It never pretends a gap is filled — an unreadable file leaves the block exactly where it was.”

   Expect

   The panel lists the file and the number of answers filled.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /UnifiedLeads → lead workspace → Wildfire home assessment. IN FRAME: Emerald panel: "Read your uploaded assessment", then a line per file saying how many answers it filled automatically, and if anything remains, "The rest isn't in the document — add just those answers below." HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: The panel lists the file and the number of answers filled. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 8

   On screen — use verbatim as the slide caption

   The wizard: dark slate header with a gold clipboard icon, the title "Wildfire home assessment", the line "<job> · complete this on site so engineering can design the system", and a thin gold progress bar. Below: "Step 1 of N", the section title, and its questions.

   Do

   Walk two sections — the water section, then power and site.

   Say — verbatim voiceover

   “One section per screen, because this gets filled in standing in a driveway on a phone. Water sources first: that single answer decides the pump, the tank, the zones and how many heads can run at once. Get it wrong and the whole hydraulic design is wrong.”

   Expect

   Sections advance and answers are recorded.

   Image 5 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /UnifiedLeads → lead workspace → Wildfire home assessment. IN FRAME: The wizard: dark slate header with a gold clipboard icon, the title "Wildfire home assessment", the line "<job> · complete this on site so engineering can design the system", and a thin gold progress bar. Below: "Step 1 of N", the section title, and its questions. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: Sections advance and answers are recorded. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

6. Slide 6 of 8

   On screen — use verbatim as the slide caption

   Amber rail across the bottom of the wizard with a warning triangle: "Still needed:" and the outstanding required answers, always visible while anything is missing.

   Do

   Leave a required answer blank and point at the rail.

   Say — verbatim voiceover

   “It is honest with you the whole way through rather than failing at the end. Whatever is on that rail is what is standing between this job and a real quote.”

   Expect

   The amber rail lists what is still outstanding.

   Image 6 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /UnifiedLeads → lead workspace → Wildfire home assessment. IN FRAME: Amber rail across the bottom of the wizard with a warning triangle: "Still needed:" and the outstanding required answers, always visible while anything is missing. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 6. It marks the control the learner acts on. STATE SHOWN: The amber rail lists what is still outstanding. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

7. Slide 7 of 8

   On screen — use verbatim as the slide caption

   Footer: "Back", an outline "Save draft", and on the last section an emerald "Finish assessment" with a tick — greyed out while anything required is missing, with the reason on hover.

   Do

   Save a draft, reopen it, then finish the assessment.

   Say — verbatim voiceover

   “Save draft means a phone call mid-sentence costs you nothing. Finish only lights up when the required answers are actually there — and then you get: assessment complete, this job can now go to Quote Request.”

   Expect

   Toast: "Assessment complete — this job can now go to Quote Request." A summary note is written to the deal timeline.

   Watch for — draw as a warning callout

   If you finish with gaps you get "Saved as a draft — some required answers are still missing." That is not a failure; it is the system refusing to call a draft an assessment.

   Image 7 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /UnifiedLeads → lead workspace → Wildfire home assessment. IN FRAME: Footer: "Back", an outline "Save draft", and on the last section an emerald "Finish assessment" with a tick — greyed out while anything required is missing, with the reason on hover. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 7. It marks the control the learner acts on. STATE SHOWN: Toast: "Assessment complete — this job can now go to Quote Request." A summary note is written to the deal timeline. ALSO DRAW, smaller and to the side: the failure or edge state — If you finish with gaps you get "Saved as a draft — some required answers are still missing." That is not a failure; it is the system refusing to call a draft an assessment. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

8. Slide 8 of 8

   On screen — use verbatim as the slide caption

   The same lead, moved to Quote Request with no block.

   Do

   Move the deal now.

   Say — verbatim voiceover

   “That is the whole point. Five minutes on site turns a job that would have bounced back at you into one the quote team can start on the same day.”

   Expect

   The stage move completes cleanly.

   Image 8 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /UnifiedLeads → lead workspace → Wildfire home assessment. IN FRAME: The same lead, moved to Quote Request with no block. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 8. It marks the control the learner acts on. STATE SHOWN: The stage move completes cleanly. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The assessment reads Complete, the deal moved to Quote Request without a block, and the deal timeline carries the assessment summary.

The biggest cause of a redrawn design is a pin on the wrong roof. So we do not guess — we ask the customer. This card sends them a one-tap link to confirm their own property and upload photos, and the builder's map then opens on their pin instead of a road-side guess.

1. Slide 1 of 4

   On screen — use verbatim as the slide caption

   White card, rounded, gold map-pin icon in a pale gold square. Heading: "Get the exact property location from the customer". Body names the email address it will go to.

   Do

   Read the heading and check the email in the body text is right.

   Say — verbatim voiceover

   “It tells you exactly who it is emailing. If that says no email on file, stop and fix the contact first — the button will refuse.”

   Expect

   Card shows the customer email in bold.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1, Customer & Site. IN FRAME: White card, rounded, gold map-pin icon in a pale gold square. Heading: "Get the exact property location from the customer". Body names the email address it will go to. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Card shows the customer email in bold. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 4

   On screen — use verbatim as the slide caption

   Black pill button, bottom-right of that card: "Send link" with a paper-plane icon.

   Do

   Click Send link.

   Say — verbatim voiceover

   “One click. They get a branded email with a single link.”

   Expect

   A green toast: "Location link sent to <email>". The card turns amber.

   Watch for — draw as a warning callout

   An amber toast saying the link saved but email hiccuped means the link is valid — resend rather than assume it failed.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1, Customer & Site. IN FRAME: Black pill button, bottom-right of that card: "Send link" with a paper-plane icon. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: A green toast: "Location link sent to <email>". The card turns amber. ALSO DRAW, smaller and to the side: the failure or edge state — An amber toast saying the link saved but email hiccuped means the link is valid — resend rather than assume it failed. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 4

   On screen — use verbatim as the slide caption

   Amber card, amber circle with a mail icon: "Waiting for customer to confirm location", with when it was sent and a "Resend" link on the right.

   Do

   Point at the amber state.

   Say — verbatim voiceover

   “Amber means the ball is in their court. You do not need to refresh anything — this updates itself the moment they drop the pin.”

   Expect

   Amber waiting card with the sent time.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1, Customer & Site. IN FRAME: Amber card, amber circle with a mail icon: "Waiting for customer to confirm location", with when it was sent and a "Resend" link on the right. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Amber waiting card with the sent time. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 4

   On screen — use verbatim as the slide caption

   Emerald card, emerald tick circle: "📍 Customer-confirmed location", the method (GPS or tapped on the map), the exact coordinates in mono type, and a "Re-send" link.

   Do

   Show the confirmed state.

   Say — verbatim voiceover

   “Green means we now have the property from the customer's own hand, and the design map will open exactly there. That is as good as site data gets before anyone drives out.”

   Expect

   Coordinates and method are shown.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1, Customer & Site. IN FRAME: Emerald card, emerald tick circle: "📍 Customer-confirmed location", the method (GPS or tapped on the map), the exact coordinates in mono type, and a "Re-send" link. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Coordinates and method are shown. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The card is emerald and shows the method plus coordinates; uploads appear on the quote.

If the quote team cannot build the job they park it and it lands on you. The questions are theirs, word for word — water source, flow and pressure, power, roof and storeys, snow, access, photos, what was promised, which structures. Answer what you can, attach the photos, hand it back. This replaced a Teams message nobody could find.

1. Slide 1 of 4

   On screen — use verbatim as the slide caption

   Amber-bordered banner on the quote naming who asked and quoting their request in quote marks.

   Do

   Read the request out loud, exactly as written.

   Say — verbatim voiceover

   “It is quoted rather than summarised on purpose — you answer the actual question, not a paraphrase of it.”

   Expect

   Banner shows the requester and the request text.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: /QuoteBuilder — the quote parked at Information Required. IN FRAME: Amber-bordered banner on the quote naming who asked and quoting their request in quote marks. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Banner shows the requester and the request text. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 4

   On screen — use verbatim as the slide caption

   The checklist — one row per question, each with its own answer field.

   Do

   Type real answers into two rows.

   Say — verbatim voiceover

   “Answer per question, so the builder can see exactly which parts came back and which are still outstanding.”

   Expect

   Answers typed into the individual rows.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /QuoteBuilder — the quote parked at Information Required. IN FRAME: The checklist — one row per question, each with its own answer field. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Answers typed into the individual rows. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 4

   On screen — use verbatim as the slide caption

   Draft save behaviour.

   Do

   Save the draft, reload the page, show the answers are still there.

   Say — verbatim voiceover

   “Half-typed answers are saved as a draft. A closed tab or a phone call mid-sentence costs you nothing.”

   Expect

   After reload the typed answers persist and the request reads draft saved.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: /QuoteBuilder — the quote parked at Information Required. IN FRAME: Draft save behaviour. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: After reload the typed answers persist and the request reads draft saved. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 4

   On screen — use verbatim as the slide caption

   Hand-back / supply action on the request.

   Do

   Hand the answers back.

   Say — verbatim voiceover

   “Now it goes back to whoever asked, they are emailed and notified, and the quote returns to exactly the status it was on before it was parked — not a guessed default.”

   Expect

   Request reads supplied; the quote is no longer Information Required.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: /QuoteBuilder — the quote parked at Information Required. IN FRAME: Hand-back / supply action on the request. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Request reads supplied; the quote is no longer Information Required. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The request reads supplied, the quote status is restored, and the builder was notified.

You do not have to watch for a finished quote. The moment the quote team marks it complete you get an email and a text, both carrying their handover brief, and the job appears in All Proposals ready to send. Then you choose the format: the live link, a PDF, or the whole published set. They are all rendered from the same quote, so they cannot disagree with each other.

1. Slide 1 of 6

   On screen — use verbatim as the slide caption

   The completion email in an inbox — the Prodigy branded shell, the quote number and address, and the quote builder's handover notes quoted inside it. A text arrives at the same time with the short version.

   Do

   Open the email and read the handover paragraph.

   Say — verbatim voiceover

   “Email and text, together, because a rep on site does not read email. The brief in here is the builder telling you why things were specified the way they were — it is what lets you answer questions on the phone without calling the office.”

   Expect

   Email and text received; the brief is quoted in both.

   Watch for — draw as a warning callout

   If nobody is assigned to the deal, this notice goes to the shared inbox and says it is unassigned. An unassigned deal is never silently dropped — but it is also not being followed up by anyone, so fix the owner.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: Email + text → /QuotingHub → /ProposalWorkspace. IN FRAME: The completion email in an inbox — the Prodigy branded shell, the quote number and address, and the quote builder's handover notes quoted inside it. A text arrives at the same time with the short version. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Email and text received; the brief is quoted in both. ALSO DRAW, smaller and to the side: the failure or edge state — If nobody is assigned to the deal, this notice goes to the shared inbox and says it is unassigned. An unassigned deal is never silently dropped — but it is also not being followed up by anyone, so fix the owner. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 6

   On screen — use verbatim as the slide caption

   The All Proposals list — one row per quote with its number, customer, region and current status, filterable.

   Do

   Find your test quote in the list.

   Say — verbatim voiceover

   “This is the register of every quote in the business. If you have lost a job, it is in here — you do not need to ask.”

   Expect

   The quote appears at its completed status.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: Email + text → /QuotingHub → /ProposalWorkspace. IN FRAME: The All Proposals list — one row per quote with its number, customer, region and current status, filterable. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: The quote appears at its completed status. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 6

   On screen — use verbatim as the slide caption

   The proposal workspace, top card: "FROM THE QUOTING TEAM" in small grey caps with the brief beneath it.

   Do

   Read the brief on the workspace.

   Say — verbatim voiceover

   “The same brief lives here permanently. The email was only a copy — this is the record, so re-read it before the call rather than digging through your inbox.”

   Expect

   Handover card renders with the brief.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: Email + text → /QuotingHub → /ProposalWorkspace. IN FRAME: The proposal workspace, top card: "FROM THE QUOTING TEAM" in small grey caps with the brief beneath it. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Handover card renders with the brief. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 6

   On screen — use verbatim as the slide caption

   The Documents section — the published file set, each row opening from the portal: the proposal, the quotation, the materials list, and the engineering pack.

   Do

   Open the documents list and name each file.

   Say — verbatim voiceover

   “Four documents, four audiences. The proposal is for the customer. The quotation is the priced summary they will forward to a partner or an insurer. The materials list and the engineering pack are internal and for the installers — never send those two to a customer.”

   Expect

   Documents list renders with links that open without a SharePoint login.

   Watch for — draw as a warning callout

   If the engineering pack is missing from the set, it has not been baked yet. Ask the quote team rather than sending the customer a set with a hole in it.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: Email + text → /QuotingHub → /ProposalWorkspace. IN FRAME: The Documents section — the published file set, each row opening from the portal: the proposal, the quotation, the materials list, and the engineering pack. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Documents list renders with links that open without a SharePoint login. ALSO DRAW, smaller and to the side: the failure or edge state — If the engineering pack is missing from the set, it has not been baked yet. Ask the quote team rather than sending the customer a set with a hole in it. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 6

   On screen — use verbatim as the slide caption

   The choice of format: the "CUSTOMER PROPOSAL LINK" card with the live URL and its "Not sent yet" or "Shared" chip, versus the "Download PDF" button that renders the same proposal as a document.

   Do

   Compare the two side by side.

   Say — verbatim voiceover

   “The link is alive: it always shows current pricing, it works on a phone, and it is the only thing they can accept from. The PDF is a snapshot for someone who wants to print it or forward it. Same renderer, same numbers — so send the link by default and the PDF only when they ask for one.”

   Expect

   Both the live link and the PDF are available for the same quote.

   Watch for — draw as a warning callout

   A PDF cannot be accepted and does not update. If you send only a PDF, you have taken the Accept button away from the customer.

   Image 5 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: Email + text → /QuotingHub → /ProposalWorkspace. IN FRAME: The choice of format: the "CUSTOMER PROPOSAL LINK" card with the live URL and its "Not sent yet" or "Shared" chip, versus the "Download PDF" button that renders the same proposal as a document. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: Both the live link and the PDF are available for the same quote. ALSO DRAW, smaller and to the side: the failure or edge state — A PDF cannot be accepted and does not update. If you send only a PDF, you have taken the Accept button away from the customer. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

6. Slide 6 of 6

   On screen — use verbatim as the slide caption

   The delivery panel: grey line "Email and text are recorded against the deal…" above the outline buttons "Email proposal" and "Text proposal".

   Do

   Send it, and say why not to use your own mail client.

   Say — verbatim voiceover

   “Send from here. It goes through the one branded pipeline, so it is logged on the deal, deduplicated, and retried if the provider hiccups. Pasted into your own Outlook, nobody else can see what the customer received — and that is how a live deal starts looking abandoned.”

   Expect

   Green toast confirming the send; the link chip flips to Shared.

   Image 6 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: Email + text → /QuotingHub → /ProposalWorkspace. IN FRAME: The delivery panel: grey line "Email and text are recorded against the deal…" above the outline buttons "Email proposal" and "Text proposal". HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 6. It marks the control the learner acts on. STATE SHOWN: Green toast confirming the send; the link chip flips to Shared. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: You can name all four published documents, say which two never go to a customer, and explain why the link is sent instead of the PDF.

Here's the thing — you're about to put your name on an email to someone deciding on a big purchase. So look at it the way they will, first. Send me a test drops the exact same email into your own inbox. Open it on your phone, tap the button, and read the proposal as the customer. Nothing goes to them and nothing is written on their deal.

1. Slide 1 of 3

   On screen — use verbatim as the slide caption

   The composer footer: outline "Reset wording", outline "Send me a test" with a small flask icon, and the gold send button ("Send to <first name>", or "Email + text <first name>" when their mobile is on file).

   Do

   Press "Send me a test".

   Say — verbatim voiceover

   “Go on, press it. It's the same email, word for word, with your signature on the bottom — it just comes to you instead.”

   Expect

   Green toast: "Test sent to <your email>. Nothing was sent to the customer or recorded on the deal."

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: /ProposalWorkspace → Write the proposal email. IN FRAME: The composer footer: outline "Reset wording", outline "Send me a test" with a small flask icon, and the gold send button ("Send to <first name>", or "Email + text <first name>" when their mobile is on file). HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Green toast: "Test sent to <your email>. Nothing was sent to the customer or recorded on the deal." Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 3

   On screen — use verbatim as the slide caption

   The email in the rep's own inbox, subject starting "[TEST]", in the Prodigy branded shell with the gold "View my proposal" button.

   Do

   Open it on your phone and tap the button.

   Say — verbatim voiceover

   “Read it on your phone, because that's where they'll read it. If a sentence feels off here, it'll feel off to them too.”

   Expect

   The proposal opens.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace → Write the proposal email. IN FRAME: The email in the rep's own inbox, subject starting "[TEST]", in the Prodigy branded shell with the gold "View my proposal" button. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: The proposal opens. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 3

   On screen — use verbatim as the slide caption

   A bright amber strip pinned to the top of the proposal: "Test copy: this is exactly what the customer sees. Accept and decline are switched off, and this visit is not recorded."

   Do

   Scroll to the bottom and look for the Accept bar.

   Say — verbatim voiceover

   “See, no Accept button. You can't accidentally accept on their behalf, and your visit doesn't show up as them opening it.”

   Expect

   No accept or decline controls; the amber strip stays visible.

   Watch for — draw as a warning callout

   If you see no amber strip, you opened the real customer link, not the test. Close it — that visit counted.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace → Write the proposal email. IN FRAME: A bright amber strip pinned to the top of the proposal: "Test copy: this is exactly what the customer sees. Accept and decline are switched off, and this visit is not recorded." HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: No accept or decline controls; the amber strip stays visible. ALSO DRAW, smaller and to the side: the failure or edge state — If you see no amber strip, you opened the real customer link, not the test. Close it — that visit counted. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The [TEST] email is in your inbox, the proposal opens with the amber strip, and the quote still reads "Not sent yet".

When a quote is finished you get an email, a text and this workspace. Read the handover brief first — that is the builder telling you why things were specified the way they were. Then send the proposal from here so the send is recorded against the deal.

1. Slide 1 of 5

   On screen — use verbatim as the slide caption

   White card headed "FROM THE QUOTING TEAM" in small grey caps, with the brief underneath.

   Do

   Read the brief out loud.

   Say — verbatim voiceover

   “This is the single most useful paragraph on the screen. It is what lets you answer 'why is there no tank?' on the phone without calling the office.”

   Expect

   Handover text is visible.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace. IN FRAME: White card headed "FROM THE QUOTING TEAM" in small grey caps, with the brief underneath. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Handover text is visible. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 5

   On screen — use verbatim as the slide caption

   Card headed "CUSTOMER PROPOSAL LINK" with a gold link icon, the full URL in a grey mono box, a "Copy" button, and on the right either a grey "Not sent yet" chip or a blue "Shared <date>" chip.

   Do

   Point at the chip, then click Copy.

   Say — verbatim voiceover

   “The link existing is not the same as the link being sent — that chip is the difference, and it is the most commonly mistaken fact about a proposal. Copy is for WhatsApp, a CRM note, or reading it out on a call.”

   Expect

   Button flips to a green "Copied".

   Watch for — draw as a warning callout

   If an amber strip says "Preview link — do not send", that URL cannot reach a customer. Never send it.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace. IN FRAME: Card headed "CUSTOMER PROPOSAL LINK" with a gold link icon, the full URL in a grey mono box, a "Copy" button, and on the right either a grey "Not sent yet" chip or a blue "Shared <date>" chip. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Button flips to a green "Copied". ALSO DRAW, smaller and to the side: the failure or edge state — If an amber strip says "Preview link — do not send", that URL cannot reach a customer. Never send it. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 5

   On screen — use verbatim as the slide caption

   Button below the link: "Open exactly what the customer sees" with an external-link icon.

   Do

   Click it and let the customer page load.

   Say — verbatim voiceover

   “Always look at it once before you send it. This is not a preview of the proposal — it is the proposal.”

   Expect

   The public proposal opens in a new tab.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace. IN FRAME: Button below the link: "Open exactly what the customer sees" with an external-link icon. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: The public proposal opens in a new tab. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 5

   On screen — use verbatim as the slide caption

   White panel: grey line "Email and text are recorded against the deal…" above two outline buttons — "Email proposal" (mail icon) and "Text proposal" (message icon).

   Do

   Click Email proposal.

   Say — verbatim voiceover

   “Email and text go through the one branded pipeline, so they are logged, deduplicated and retried if the provider hiccups. Never paste the link into your own Outlook — then nobody else can see what the customer received.”

   Expect

   Green toast "Proposal email on its way to <email>"; the link chip becomes Shared.

   Watch for — draw as a warning callout

   A button greyed out means no email or no phone number on the deal. An amber "that number cannot receive texts" is a landline — the system caught it before wasting the send.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace. IN FRAME: White panel: grey line "Email and text are recorded against the deal…" above two outline buttons — "Email proposal" (mail icon) and "Text proposal" (message icon). HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Green toast "Proposal email on its way to <email>"; the link chip becomes Shared. ALSO DRAW, smaller and to the side: the failure or edge state — A button greyed out means no email or no phone number on the deal. An amber "that number cannot receive texts" is a landline — the system caught it before wasting the send. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 5

   On screen — use verbatim as the slide caption

   The "Request changes from the quoting team" button (pencil-ruler icon) — sales surface only.

   Do

   Open it, show the dialog, then cancel.

   Say — verbatim voiceover

   “If the customer wants something changed, this files a formal request on the quote itself rather than a message in a chat. You get the revised proposal back on this same screen.”

   Expect

   Dialog "Request changes — <quote number>" with a gold "Send request" button.

   Image 5 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace. IN FRAME: The "Request changes from the quoting team" button (pencil-ruler icon) — sales surface only. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: Dialog "Request changes — <quote number>" with a gold "Send request" button. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The link chip reads Shared, and the History section shows the send.

This is the discovery-call feeling, but for the proposal. You're on the phone, they've got the proposal open on their own screen, and you can see exactly where they are. If they're stuck on the price and you want to show them the design first, you bring them there. When the call's done, you end it — their normal link keeps working.

1. Slide 1 of 5

   On screen — use verbatim as the slide caption

   The card headed "Walk through it live" with a gold radio icon and the gold button "Start live walkthrough".

   Do

   Press "Start live walkthrough" while you have them on the phone.

   Say — verbatim voiceover

   “Start it while they're still with you. Then it's just — hey, I've texted you a link, tap it and we'll go through it together.”

   Expect

   A green LIVE badge appears with the live link and two buttons: "Copy live link" and "Text it".

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace → Walk through it live. IN FRAME: The card headed "Walk through it live" with a gold radio icon and the gold button "Start live walkthrough". HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: A green LIVE badge appears with the live link and two buttons: "Copy live link" and "Text it". Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 5

   On screen — use verbatim as the slide caption

   The two buttons under the live link: outline "Copy live link" and gold "Text it".

   Do

   Press "Text it".

   Say — verbatim voiceover

   “Text it from here, not your own phone. It comes from the Prodigy number and it's logged on the deal, so everyone can see they got it.”

   Expect

   Toast "Text queued"; the button reads "Text queued".

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace → Walk through it live. IN FRAME: The two buttons under the live link: outline "Copy live link" and gold "Text it". HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Toast "Text queued"; the button reads "Text queued". Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 5

   On screen — use verbatim as the slide caption

   A status line with an eye icon: amber "Waiting for the customer to open the link…", turning green "Customer connected — reading <section>", and a small live copy of their screen beneath it.

   Do

   Watch it change when they open the link.

   Say — verbatim voiceover

   “Now you can see them. When it says they're on Your Risk, you're both looking at the same page — talk about what's in front of them.”

   Expect

   The line turns green and names the section they are reading.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace → Walk through it live. IN FRAME: A status line with an eye icon: amber "Waiting for the customer to open the link…", turning green "Customer connected — reading <section>", and a small live copy of their screen beneath it. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: The line turns green and names the section they are reading. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 5

   On screen — use verbatim as the slide caption

   Small grey caps "BRING THEM TO" above a row of section chips such as "Your Risk", "Your Design", "Investment".

   Do

   Tap "Your Risk".

   Say — verbatim voiceover

   “Say it out loud first — let me bring you to the fire history near you — then tap. Their screen moves once. It won't keep dragging them around.”

   Expect

   The customer's screen scrolls to that section a moment later.

   Watch for — draw as a warning callout

   The fire map with the real agency fire records lives inside Your Risk. If it isn't there, that property has no fire records on file — don't promise one.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace → Walk through it live. IN FRAME: Small grey caps "BRING THEM TO" above a row of section chips such as "Your Risk", "Your Design", "Investment". HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: The customer's screen scrolls to that section a moment later. ALSO DRAW, smaller and to the side: the failure or edge state — The fire map with the real agency fire records lives inside Your Risk. If it isn't there, that property has no fire records on file — don't promise one. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 5

   On screen — use verbatim as the slide caption

   The outline red button "End live walkthrough" with a hang-up icon, and afterwards the grey line "The last walkthrough has ended."

   Do

   End it when the call ends.

   Say — verbatim voiceover

   “Always end it. They keep their normal proposal link — they just stop being live with you.”

   Expect

   The card returns to "Start a new live walkthrough"; the customer sees a calm note that the walkthrough ended.

   Image 5 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace → Walk through it live. IN FRAME: The outline red button "End live walkthrough" with a hang-up icon, and afterwards the grey line "The last walkthrough has ended." HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: The card returns to "Start a new live walkthrough"; the customer sees a calm note that the walkthrough ended. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: You started a walkthrough, saw the customer's section change, brought them to Your Risk, and ended it.

A customer with a question is a live deal, not a lost one. Their question lands here word for word, and you answer it here — recorded on the deal and emailed to them. Answering from your own mail client is invisible to everyone else, and that is how a live deal ends up looking abandoned.

1. Slide 1 of 5

   On screen — use verbatim as the slide caption

   Section "CONVERSATION WITH THE CUSTOMER". The card has a gold border and cream fill with "Waiting on your reply" in gold when the last message is theirs; plain white and "Answered" once you have replied.

   Do

   Point at the gold state.

   Say — verbatim voiceover

   “Gold means the customer is waiting on you. This card sits above everything else on the screen — an unanswered question outranks an acceptance, because an acceptance does not need chasing.”

   Expect

   Gold card reading "Waiting on your reply".

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace. IN FRAME: Section "CONVERSATION WITH THE CUSTOMER". The card has a gold border and cream fill with "Waiting on your reply" in gold when the last message is theirs; plain white and "Answered" once you have replied. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Gold card reading "Waiting on your reply". Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 5

   On screen — use verbatim as the slide caption

   The transcript — customer messages in white cards with a soft gold border, your replies indented in grey.

   Do

   Read the customer message.

   Say — verbatim voiceover

   “Theirs on the left, yours indented. Verbatim, never summarised.”

   Expect

   Question shown in quote marks with the sender and time.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace. IN FRAME: The transcript — customer messages in white cards with a soft gold border, your replies indented in grey. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Question shown in quote marks with the sender and time. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 5

   On screen — use verbatim as the slide caption

   Reply box, placeholder: "Answer their question — this is emailed to them and recorded on the deal…". Gold focus ring.

   Do

   Type a real answer.

   Say — verbatim voiceover

   “Write it as you would say it. This exact text is what they receive, inside the branded shell.”

   Expect

   Text entered.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace. IN FRAME: Reply box, placeholder: "Answer their question — this is emailed to them and recorded on the deal…". Gold focus ring. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Text entered. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 5

   On screen — use verbatim as the slide caption

   Gold "Send reply" button (#b18c19, darker on hover) with a paper-plane icon, a checkbox "Mark the question answered", and outline buttons "Call instead" and "Own mail client".

   Do

   Untick the checkbox, explain, re-tick, then Send reply.

   Say — verbatim voiceover

   “Closing the thread is your explicit act — answering one of three questions does not finish a conversation, so untick this if there is more to come. Call instead is there when a phone call is genuinely the right answer.”

   Expect

   Green line: "Reply sent and recorded on the deal." The card flips to "Answered".

   Watch for — draw as a warning callout

   A rose "not delivered" tag under your reply means the customer never got it — act on that. An amber "recorded only — no email address" means there was nowhere to send it, so call them.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace. IN FRAME: Gold "Send reply" button (#b18c19, darker on hover) with a paper-plane icon, a checkbox "Mark the question answered", and outline buttons "Call instead" and "Own mail client". HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Green line: "Reply sent and recorded on the deal." The card flips to "Answered". ALSO DRAW, smaller and to the side: the failure or edge state — A rose "not delivered" tag under your reply means the customer never got it — act on that. An amber "recorded only — no email address" means there was nowhere to send it, so call them. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 5

   On screen — use verbatim as the slide caption

   Grey line under the box: "The proposal stays live — they can accept it once you've answered."

   Do

   Read it out.

   Say — verbatim voiceover

   “That is the point of the whole feature. A question never closes the deal and never blocks acceptance.”

   Expect

   —

   Image 5 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace. IN FRAME: Grey line under the box: "The proposal stays live — they can accept it once you've answered." HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: — Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The thread shows your reply as delivered and the card reads Answered.

The moment they accept, eight things happen without you: the quote is marked accepted, the exact price they agreed is frozen, you and Operations are emailed, the customer gets a confirmation, the deal moves to Verbal Agreement, and the agreement is prepared. Accepted is a verbal agreement — not a won job. Contract, signature and deposit are still ahead, and the agreement is your next action.

1. Slide 1 of 5

   On screen — use verbatim as the slide caption

   Notification bell in the global header, with a count.

   Do

   Open it and show the acceptance notification.

   Say — verbatim voiceover

   “You are told in-app and by email. Administrators are told in-app only, deliberately — thirteen people emailed on every acceptance is how the one email that matters gets ignored.”

   Expect

   Notification: "<Customer> accepted their proposal" with "Open the proposal" action.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace. IN FRAME: Notification bell in the global header, with a count. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Notification: "<Customer> accepted their proposal" with "Open the proposal" action. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 5

   On screen — use verbatim as the slide caption

   The customer decision card on the workspace, above the link.

   Do

   Point at the accepted state and the total.

   Say — verbatim voiceover

   “That total is frozen. Even if the quote is edited tomorrow, this number is what they agreed to, and it is what the contract and the invoice will read.”

   Expect

   Accepted state with date and the accepted total.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace. IN FRAME: The customer decision card on the workspace, above the link. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Accepted state with date and the accepted total. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 5

   On screen — use verbatim as the slide caption

   The same figure on the quote versus the accepted snapshot.

   Do

   State the rule.

   Say — verbatim voiceover

   “Two numbers exist from now on: the live quote total, which can still move, and the accepted total, which cannot. Anything commercial reads the accepted one.”

   Expect

   —

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace. IN FRAME: The same figure on the quote versus the accepted snapshot. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: — Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 5

   On screen — use verbatim as the slide caption

   CRM stage on the deal.

   Do

   Show the stage now reading Verbal Agreement.

   Say — verbatim voiceover

   “The portal moved it forward one stage and will never move a deal backwards. If it cannot recognise a stage it refuses and raises a review item rather than guessing.”

   Expect

   Deal stage: Verbal Agreement.

   Watch for — draw as a warning callout

   If the deal was already further along, the stage is deliberately left alone — that is correct, not a failure.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace. IN FRAME: CRM stage on the deal. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Deal stage: Verbal Agreement. ALSO DRAW, smaller and to the side: the failure or edge state — If the deal was already further along, the stage is deliberately left alone — that is correct, not a failure. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 5

   On screen — use verbatim as the slide caption

   History section on the workspace.

   Do

   Scroll to History and read the entries.

   Say — verbatim voiceover

   “Every act on this proposal is listed here with who did it and when. If anyone ever asks what happened on a deal, this is the answer.”

   Expect

   Timeline entries for the send, the acceptance and the notifications.

   Image 5 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /ProposalWorkspace. IN FRAME: History section on the workspace. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: Timeline entries for the send, the acceptance and the notifications. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The accepted total matches what the customer saw, and the deal reads Verbal Agreement.

Need a poster for Saturday's market, or a flyer with your own QR on it? It's one page now. Say what it is, what it's for, and whether it needs a tracked QR code — that's it. If you'd rather talk it through, William is still on the other tab.

1. Slide 1 of 4

   On screen — use verbatim as the slide caption

   Two wide tabs at the top: dark "Quick form" (selected) and "Talk it through with William".

   Do

   Stay on "Quick form".

   Say — verbatim voiceover

   “The form's the fast way. William's there if you're not sure what you need yet.”

   Expect

   The one-page form is showing.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /RequestResource. IN FRAME: Two wide tabs at the top: dark "Quick form" (selected) and "Talk it through with William". HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: The one-page form is showing. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 4

   On screen — use verbatim as the slide caption

   The fields "What do you need?", "Give it a name", "What is it for?", then optional "Who will see it?", "What should it say?" and "Size or format".

   Do

   Fill in the first three.

   Say — verbatim voiceover

   “Only the first three matter to get it moving. Tell them where it's going to be used — that one line saves the designer a phone call.”

   Expect

   The grey line under the form stops listing missing items.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: /RequestResource. IN FRAME: The fields "What do you need?", "Give it a name", "What is it for?", then optional "Who will see it?", "What should it say?" and "Size or format". HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: The grey line under the form stops listing missing items. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 4

   On screen — use verbatim as the slide caption

   A soft grey box headed "Tracked QR code" with a dropdown: "No QR code", "My own tracked link (leads credited to me)", "A page on prodigywildfire.com", "An event (full campaign kit)".

   Do

   Choose "My own tracked link".

   Say — verbatim voiceover

   “If it's got a QR on it, make it tracked. Pick your own link and every scan that turns into a lead is credited to you — nobody has to guess later.”

   Expect

   No red message under the box.

   Watch for — draw as a warning callout

   A red line here means the website couldn't use that page. Fix it now — a QR that goes to the wrong page still prints perfectly.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /RequestResource. IN FRAME: A soft grey box headed "Tracked QR code" with a dropdown: "No QR code", "My own tracked link (leads credited to me)", "A page on prodigywildfire.com", "An event (full campaign kit)". HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: No red message under the box. ALSO DRAW, smaller and to the side: the failure or edge state — A red line here means the website couldn't use that page. Fix it now — a QR that goes to the wrong page still prints perfectly. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 4

   On screen — use verbatim as the slide caption

   The box "Needed sooner than <date>?" with a switch, and the "Send request" button with a paper-plane icon at the bottom right.

   Do

   Leave it at 14 days and press "Send request".

   Say — verbatim voiceover

   “Two weeks is standard. If you really need it sooner, flip the switch and say why — Kimberly reads that.”

   Expect

   The "Request received" card with the expected date; the request appears in your list below.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Desktop portal surface" for layout language, palette and density. SCREEN: /RequestResource. IN FRAME: The box "Needed sooner than <date>?" with a switch, and the "Send request" button with a paper-plane icon at the bottom right. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: The "Request received" card with the expected date; the request appears in your list below. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: Your request is in "My requests" with its due date, and — if you asked for one — its QR code shows there once the website has made it.

Start by reading what the rep captured on the call — what system was promised, where the water comes from, tank, constraints. It is read-only because it is a record of a conversation, not a field to tidy up. If what was promised and what you can see do not match, that is your cue to ask, not to guess.

1. Slide 1 of 4

   On screen — use verbatim as the slide caption

   The entry gate on Phase 1 — jobs waiting to be quoted, with the address and stage on each row.

   Do

   Open your test job.

   Say — verbatim voiceover

   “These are the jobs asking for a quote. Open one and the whole deal context comes with it.”

   Expect

   Phase 1 loads for that quote.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1, Customer & Site. IN FRAME: The entry gate on Phase 1 — jobs waiting to be quoted, with the address and stage on each row. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Phase 1 loads for that quote. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 4

   On screen — use verbatim as the slide caption

   The "From discovery" panel — greyed, read-only: system type, water supply, tank capacity, pump/generator, constraints, and the Q&A captured on the call.

   Do

   Read the water supply line and the promised system type out loud.

   Say — verbatim voiceover

   “Two lines decide most of the design: where the water is coming from, and what they were actually promised. If either is blank, that is your information request.”

   Expect

   Panel shows the discovery fields.

   Watch for — draw as a warning callout

   Never edit around this panel — it is a projection written once when the quote was created.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1, Customer & Site. IN FRAME: The "From discovery" panel — greyed, read-only: system type, water supply, tank capacity, pump/generator, constraints, and the Q&A captured on the call. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Panel shows the discovery fields. ALSO DRAW, smaller and to the side: the failure or edge state — Never edit around this panel — it is a projection written once when the quote was created. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 4

   On screen — use verbatim as the slide caption

   Street view card for the address.

   Do

   Look at the property.

   Say — verbatim voiceover

   “Thirty seconds here saves an hour later. Storeys, roof type, how far the mains might run, whether a lift is needed.”

   Expect

   Street view renders for the address.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1, Customer & Site. IN FRAME: Street view card for the address. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Street view renders for the address. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 4

   On screen — use verbatim as the slide caption

   The location card — emerald if the customer confirmed their own pin.

   Do

   Check for the emerald confirmed state.

   Say — verbatim voiceover

   “If it is green, the customer told us which building is theirs and the map will open exactly there. If it is not, ask the rep to send the link before you trace anything.”

   Expect

   Confirmed pin state visible or noted as missing.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1, Customer & Site. IN FRAME: The location card — emerald if the customer confirmed their own pin. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Confirmed pin state visible or noted as missing. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: You can state out loud what system was promised and where the water comes from.

Region is not cosmetic. It decides the tax model, the currency, the contract template and which market's price book you are quoting from. Confirm the address, check the banner says the country you think it does, then pass the gate.

1. Slide 1 of 4

   On screen — use verbatim as the slide caption

   Address block with a verification state (verified / needs review / unverified).

   Do

   Verify the address.

   Say — verbatim voiceover

   “Verified means the geocoder and the address agree. Needs review means read it yourself before trusting it.”

   Expect

   Address reads verified.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1. IN FRAME: Address block with a verification state (verified / needs review / unverified). HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Address reads verified. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 4

   On screen — use verbatim as the slide caption

   The region / tax banner naming the region and the tax treatment for this job.

   Do

   Read the banner.

   Say — verbatim voiceover

   “One wrong region is a wrong price, a wrong tax line and a wrong contract template. Check it here, once, deliberately.”

   Expect

   Banner shows the correct region and currency.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1. IN FRAME: The region / tax banner naming the region and the tax treatment for this job. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Banner shows the correct region and currency. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 4

   On screen — use verbatim as the slide caption

   The confirmation gate — the control that must be passed to leave Phase 1, including the "Customer has no email" option.

   Do

   Pass the gate.

   Say — verbatim voiceover

   “If the customer genuinely has no email address, record that explicitly. It waives the form requirement — it does not invent an address, and it does not hide a failed send later.”

   Expect

   Phase 2 becomes enterable in the rail.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1. IN FRAME: The confirmation gate — the control that must be passed to leave Phase 1, including the "Customer has no email" option. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Phase 2 becomes enterable in the rail. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 4

   On screen — use verbatim as the slide caption

   Amber pill button top-right of the step: "Need more info" with a mail-question icon (amber border, pale amber fill, dark amber text).

   Do

   Point at it without clicking.

   Say — verbatim voiceover

   “This is your escape hatch, and you will use it. We will come back to it at the end.”

   Expect

   Button visible.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1. IN FRAME: Amber pill button top-right of the step: "Need more info" with a mail-question icon (amber border, pale amber fill, dark amber text). HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Button visible. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The quote shows a verified address, the correct region, and the gate passed.

Most of the difficulty in this job is not drawing — it is deciding what to do about a fact nobody gave you. There are only ever three options: find it, ask for it, or assume it and say so out loud. What you may never do is assume it silently, because every number downstream is calculated from that assumption, and a pump sized from a guess is the one failure this whole system exists to prevent.

1. Slide 1 of 6

   On screen — use verbatim as the slide caption

   The read-only "From discovery" panel with the water supply and tank capacity lines empty.

   Do

   Point at the blank water supply line.

   Say — verbatim voiceover

   “This is the single most expensive blank on the screen. Water supply decides the pump, the tank, the number of zones and how many heads can run at once — so with this empty you cannot size anything, you can only draw a picture.”

   Expect

   The empty discovery fields are visible.

   Watch for — draw as a warning callout

   Never fill this panel in yourself from memory of a phone call. It is a record of what the customer actually said — if it is blank, the answer does not exist yet.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1 into Phase 2, on a job with gaps. IN FRAME: The read-only "From discovery" panel with the water supply and tank capacity lines empty. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: The empty discovery fields are visible. ALSO DRAW, smaller and to the side: the failure or edge state — Never fill this panel in yourself from memory of a phone call. It is a record of what the customer actually said — if it is blank, the answer does not exist yet. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 6

   On screen — use verbatim as the slide caption

   The amber notice above the bill of materials: warning triangle, "Some heads were assumed, not chosen", then a line per structure — "<structure>: 22 of 24 heads —" with the reason, and the link "Choose the head model now — it saves onto the design".

   Do

   Read the notice and follow the link to fix it.

   Say — verbatim voiceover

   “This is the portal refusing to pretend. Nobody picked those heads, so it priced the most likely one and then told you, next to the money, exactly how many and why. Twenty-two heads priced as the wrong model is thousands of dollars and a system that does not perform as drawn.”

   Expect

   The notice names the structure and the count; choosing the model clears it.

   Watch for — draw as a warning callout

   A rose line inside the same notice means heads are set to a part this region does not sell — that is not an assumption, that is an unpriced line. It must be fixed, not accepted.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1 into Phase 2, on a job with gaps. IN FRAME: The amber notice above the bill of materials: warning triangle, "Some heads were assumed, not chosen", then a line per structure — "<structure>: 22 of 24 heads —" with the reason, and the link "Choose the head model now — it saves onto the design". HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: The notice names the structure and the count; choosing the model clears it. ALSO DRAW, smaller and to the side: the failure or edge state — A rose line inside the same notice means heads are set to a part this region does not sell — that is not an assumption, that is an unpriced line. It must be fixed, not accepted. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 6

   On screen — use verbatim as the slide caption

   A design where a head has no published throw — the design states that the throw was assumed rather than drawing a confident circle.

   Do

   Point at the assumed-throw wording on the design.

   Say — verbatim voiceover

   “Coverage circles are drawn from the head's rated throw in the catalogue. If nobody has entered that head's published data, the design still runs — but it says the throw was assumed, and hydraulic sign-off will not pass until a real figure exists. It works, and it tells you it is standing on an assumption.”

   Expect

   The assumption is stated on screen, not hidden.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1 into Phase 2, on a job with gaps. IN FRAME: A design where a head has no published throw — the design states that the throw was assumed rather than drawing a confident circle. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: The assumption is stated on screen, not hidden. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 6

   On screen — use verbatim as the slide caption

   Equipment & Pricing — the sprinkler engineering fields: design flow, the pressure that flow is stated at, and rated throw, each with the basis it rests on and whether it is confirmed.

   Do

   Open the head in Equipment & Pricing and read those fields.

   Say — verbatim voiceover

   “This is the only place those three numbers may be entered, and they must carry a basis — a datasheet, a published table, a named person's measurement. A flow figure with no pressure beside it is not a specification, it is a rumour. And you never type a flow into a design to get past a blocker.”

   Expect

   The engineering fields and their basis are visible.

   Watch for — draw as a warning callout

   Empty is a safe answer here and blocks sign-off honestly. Copying another head's flow to make the block go away is the single most dangerous thing anyone can do in this application.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1 into Phase 2, on a job with gaps. IN FRAME: Equipment & Pricing — the sprinkler engineering fields: design flow, the pressure that flow is stated at, and rated throw, each with the basis it rests on and whether it is confirmed. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: The engineering fields and their basis are visible. ALSO DRAW, smaller and to the side: the failure or edge state — Empty is a safe answer here and blocks sign-off honestly. Copying another head's flow to make the block go away is the single most dangerous thing anyone can do in this application. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 6

   On screen — use verbatim as the slide caption

   The blocker resolver panel naming the specific part and the reason it cannot be priced.

   Do

   Open the resolver and read what it names.

   Say — verbatim voiceover

   “It tells you exactly which part and why. Fix it once in Equipment & Pricing and every future quote is right. Add a custom line at a guessed price and you have hidden a catalogue problem inside a customer's total, where nobody will ever find it.”

   Expect

   The resolver names the SKU and the reason.

   Image 5 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1 into Phase 2, on a job with gaps. IN FRAME: The blocker resolver panel naming the specific part and the reason it cannot be priced. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: The resolver names the SKU and the reason. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

6. Slide 6 of 6

   On screen — use verbatim as the slide caption

   The amber "Need more info" pill button with a mail-question icon, and the dialog "Ask the rep for what's missing" — nine checkboxes, a free-text box, and a gold "Send request" button.

   Do

   Tick water source, flow and pressure, and photos, then send.

   Say — verbatim voiceover

   “This is the professional answer to missing data. Nine questions, because these are the same nine that stall every job. Ticking three boxes takes ten seconds and gives the rep something they can act on — and the quote is parked at Information Required, so it is visibly waiting on somebody rather than sitting in your head.”

   Expect

   Toast confirming it was sent to the rep; the quote status becomes Information Required and names who owes the answer.

   Watch for — draw as a warning callout

   One open request per quote — a second send merges into the existing row instead of creating a rival blocker. The CRM stage deliberately does not move backwards.

   Image 6 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 1 into Phase 2, on a job with gaps. IN FRAME: The amber "Need more info" pill button with a mail-question icon, and the dialog "Ask the rep for what's missing" — nine checkboxes, a free-text box, and a gold "Send request" button. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 6. It marks the control the learner acts on. STATE SHOWN: Toast confirming it was sent to the rep; the quote status becomes Information Required and names who owes the answer. ALSO DRAW, smaller and to the side: the failure or edge state — One open request per quote — a second send merges into the existing row instead of creating a rival blocker. The CRM stage deliberately does not move backwards. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: Every assumption still on the quote is stated on screen, and everything you could not resolve is on one open request naming who owes it.

Two ways in, one outcome. On the map you trace the structures and lay out the heads, and coverage circles show what is actually protected. If you were given calibrated architectural plans, use the plan-sheet path — a manual quote is not a lesser quote, it produces the same drawing set through the same renderer.

1. Slide 1 of 8

   On screen — use verbatim as the slide caption

   Design mode choice — the map designer, or the manual / plan-sheet path.

   Do

   Choose the designer, and say what the other option is for.

   Say — verbatim voiceover

   “Map when we are working from imagery. Plan sheets when the customer has given us drawings we can calibrate. Both end up in the same place.”

   Expect

   The map designer opens on the customer-confirmed pin.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 2, Design. IN FRAME: Design mode choice — the map designer, or the manual / plan-sheet path. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: The map designer opens on the customer-confirmed pin. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 8

   On screen — use verbatim as the slide caption

   The workflow rail docked in the left column under the phases — the designer's own ordered steps.

   Do

   Point at the rail and work top to bottom.

   Say — verbatim voiceover

   “Work down this list. It is ordered the way the design has to be built — structures before heads, heads before pipe, pipe before zones.”

   Expect

   Workflow steps visible in the left rail.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 2, Design. IN FRAME: The workflow rail docked in the left column under the phases — the designer's own ordered steps. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Workflow steps visible in the left rail. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 8

   On screen — use verbatim as the slide caption

   The Quote Vision card at the top of the rail — a small gold dot, the word QUOTE VISION, a "LIVE" pill, a plain-English line of what it is doing right now, and a thin gold progress bar with a step count such as 4/7.

   Do

   Let it run and read the line it is showing.

   Say — verbatim voiceover

   “Quote Vision reads the property and lays the system out for you. It narrates what it is doing in plain English rather than spinning silently, and the count tells you where it is. It is a starting point you then correct — not an answer you accept.”

   Expect

   The card shows a live line and the progress bar advances.

   Watch for — draw as a warning callout

   The state pills at the top right of the map — working, paused, design ready, before first run. If it says design ready and the drawing looks wrong, trust your eyes and fix it.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 2, Design. IN FRAME: The Quote Vision card at the top of the rail — a small gold dot, the word QUOTE VISION, a "LIVE" pill, a plain-English line of what it is doing right now, and a thin gold progress bar with a step count such as 4/7. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: The card shows a live line and the progress bar advances. ALSO DRAW, smaller and to the side: the failure or edge state — The state pills at the top right of the map — working, paused, design ready, before first run. If it says design ready and the drawing looks wrong, trust your eyes and fix it. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 8

   On screen — use verbatim as the slide caption

   The structures checklist inside the workflow — each traced building ticked in emerald, with an amber "OPTIONAL" pill on structures that are not part of the protected scope.

   Do

   Work through the structures and point at the optional pill.

   Say — verbatim voiceover

   “Every building it found is listed, and you confirm them one at a time. Optional means we are not protecting it — a shed the customer never asked to cover should not be quietly adding heads and cost.”

   Expect

   Structures ticked; optional ones clearly marked.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 2, Design. IN FRAME: The structures checklist inside the workflow — each traced building ticked in emerald, with an amber "OPTIONAL" pill on structures that are not part of the protected scope. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Structures ticked; optional ones clearly marked. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 8

   On screen — use verbatim as the slide caption

   The command bar across the bottom of the map — a sparkle glyph, the placeholder "Ask Quote Vision to change this design…", a "Focus" control, and a gold circular send button.

   Do

   Type a real instruction, such as tightening head spacing on one structure, and send it.

   Say — verbatim voiceover

   “You can talk to the design instead of hand-editing everything. Ask it to change spacing or re-run one structure, and it edits the same geometry you are looking at — there is no second design hiding anywhere.”

   Expect

   The design updates and the Quote Vision card reports what it changed.

   Image 5 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 2, Design. IN FRAME: The command bar across the bottom of the map — a sparkle glyph, the placeholder "Ask Quote Vision to change this design…", a "Focus" control, and a gold circular send button. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: The design updates and the Quote Vision card reports what it changed. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

6. Slide 6 of 8

   On screen — use verbatim as the slide caption

   Head placement with coverage circles drawn per head — heads and pipe in blue, coverage as translucent blue circles, and the water-supply point as a small gold square.

   Do

   Place heads along a ridge.

   Say — verbatim voiceover

   “The circle is the head's rated throw from the catalogue — not a guess and not a fixed number. Change the head model and the circles change with it.”

   Expect

   Heads with coverage circles; gaps are visibly uncovered.

   Watch for — draw as a warning callout

   If a head has no recorded throw the design says the throw was assumed. It still works — but it says so.

   Image 6 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 2, Design. IN FRAME: Head placement with coverage circles drawn per head — heads and pipe in blue, coverage as translucent blue circles, and the water-supply point as a small gold square. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 6. It marks the control the learner acts on. STATE SHOWN: Heads with coverage circles; gaps are visibly uncovered. ALSO DRAW, smaller and to the side: the failure or edge state — If a head has no recorded throw the design says the throw was assumed. It still works — but it says so. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

7. Slide 7 of 8

   On screen — use verbatim as the slide caption

   Pipe runs snapping to the roof lines.

   Do

   Run the pipe.

   Say — verbatim voiceover

   “Runs follow the building's own axes. Diagonal pipe across a roof is almost always the engine being told something wrong about the structure.”

   Expect

   Pipe follows ridge lines; totals update.

   Image 7 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 2, Design. IN FRAME: Pipe runs snapping to the roof lines. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 7. It marks the control the learner acts on. STATE SHOWN: Pipe follows ridge lines; totals update. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

8. Slide 8 of 8

   On screen — use verbatim as the slide caption

   Zone controls, and the takeoff panel showing head count, pipe length and zones.

   Do

   Split into zones and read the takeoff numbers.

   Say — verbatim voiceover

   “Zones come from the flow budget — how much water the supply can actually deliver at once. These three numbers are what the entire price hangs off, so read them before you move on.”

   Expect

   Takeoff totals match what is on screen.

   Image 8 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 2, Design. IN FRAME: Zone controls, and the takeoff panel showing head count, pipe length and zones. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 8. It marks the control the learner acts on. STATE SHOWN: Takeoff totals match what is on screen. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: Every protected structure has coverage and the takeoff totals match the drawing.

Generate the drawing set and actually look at it — these sheets are what the customer and the installers will hold. Then the important part: if you change the design afterwards, drawings of the old design are discarded rather than quietly left behind.

1. Slide 1 of 3

   On screen — use verbatim as the slide caption

   The plan set panel listing the generated sheets.

   Do

   Generate the set.

   Say — verbatim voiceover

   “One action produces the whole set from the geometry on screen. Nothing is drawn by hand.”

   Expect

   Sheets appear in the list.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 2, plan set. IN FRAME: The plan set panel listing the generated sheets. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Sheets appear in the list. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 3

   On screen — use verbatim as the slide caption

   A single sheet opened full width.

   Do

   Open one and read the title block.

   Say — verbatim voiceover

   “Check it as a drawing, not a thumbnail. Head schedule, zones, pipe sizes, the title block — this is an engineering document with our name on it.”

   Expect

   Sheet renders legibly.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 2, plan set. IN FRAME: A single sheet opened full width. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Sheet renders legibly. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 3

   On screen — use verbatim as the slide caption

   Design edit, then return to the plan set.

   Do

   Move a head, come back, and show what happened to the sheet.

   Say — verbatim voiceover

   “The old drawing is gone rather than sitting there looking current. A drawing of a system that no longer exists is the most expensive document this business can send.”

   Expect

   Stale generated sheets are discarded / need regenerating.

   Watch for — draw as a warning callout

   Rep-uploaded photos are never touched by this — only sheets this system generated.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 2, plan set. IN FRAME: Design edit, then return to the plan set. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Stale generated sheets are discarded / need regenerating. ALSO DRAW, smaller and to the side: the failure or edge state — Rep-uploaded photos are never touched by this — only sheets this system generated. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: Every drawing in the set was generated from the design currently on screen.

The bill of materials is built from your design, not typed. Check the modules, because that is hardware the customer is being charged for and it must match what was promised. If something cannot be resolved, fix the catalogue — never paper over it with a guessed custom line.

1. Slide 1 of 4

   On screen — use verbatim as the slide caption

   The grouped BOM — sprinklers, pipe, fittings, mounting, automation, labour, shipping.

   Do

   Scroll the groups and check the head count.

   Say — verbatim voiceover

   “Head count here must equal heads on the design. If those two disagree, something upstream is wrong and the price is wrong with it.”

   Expect

   Head count matches the design.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 3, Materials & Pricing. IN FRAME: The grouped BOM — sprinklers, pipe, fittings, mounting, automation, labour, shipping. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Head count matches the design. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 4

   On screen — use verbatim as the slide caption

   Module inclusion controls — tank, pump, backup pump, Optect units, generator, access.

   Do

   Toggle a module and watch the totals move.

   Say — verbatim voiceover

   “Each module is real hardware. Compare them against what the rep promised on the discovery panel — a promised generator that is not here is a conversation you do not want to have after acceptance.”

   Expect

   Totals change as modules are toggled.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 3, Materials & Pricing. IN FRAME: Module inclusion controls — tank, pump, backup pump, Optect units, generator, access. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Totals change as modules are toggled. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 4

   On screen — use verbatim as the slide caption

   The blocker resolver panel, when a part or a price cannot be resolved.

   Do

   Open it and read what it names.

   Say — verbatim voiceover

   “It tells you exactly which part and why. Fix it in Equipment & Pricing once and every future quote is right; add a custom line at a guessed price and you have hidden a catalogue problem inside a customer's total.”

   Expect

   Resolver names the specific SKU and reason.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 3, Materials & Pricing. IN FRAME: The blocker resolver panel, when a part or a price cannot be resolved. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Resolver names the specific SKU and reason. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 4

   On screen — use verbatim as the slide caption

   The pricing breakdown panel — cost through the markup chain to the customer number.

   Do

   Read the breakdown.

   Say — verbatim voiceover

   “Cost, overhead and profit, travel, commission, card fees, tax. One engine produces this, and it is the same engine the customer's quotation reads.”

   Expect

   Breakdown totals reconcile.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 3, Materials & Pricing. IN FRAME: The pricing breakdown panel — cost through the markup chain to the customer number. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Breakdown totals reconcile. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: BOM head count equals design heads and every module resolves to a real catalogue price.

This is what the customer reads, so read it as they will. If the number here surprises you, stop — this is the last cheap moment to find it.

1. Slide 1 of 4

   On screen — use verbatim as the slide caption

   The quotation as the customer sees it — grouped sections with a price each.

   Do

   Read the section labels out loud.

   Say — verbatim voiceover

   “Customers read section labels, not SKUs. If a label does not describe what they are buying, change it here rather than explaining it on the phone.”

   Expect

   Sections and prices render.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 4, Quotation. IN FRAME: The quotation as the customer sees it — grouped sections with a price each. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Sections and prices render. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 4

   On screen — use verbatim as the slide caption

   The tax lines and total.

   Do

   Hold on the tax lines.

   Say — verbatim voiceover

   “These come from the region's rules. A zero tax line is a real answer in some places and a red flag in others — that is why the model is named rather than implied.”

   Expect

   Tax lines and total shown.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 4, Quotation. IN FRAME: The tax lines and total. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Tax lines and total shown. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 4

   On screen — use verbatim as the slide caption

   The payment schedule.

   Do

   Read the schedule.

   Say — verbatim voiceover

   “Deposit and stages. The customer will ask about this before they ask about anything technical.”

   Expect

   Schedule renders with amounts.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 4, Quotation. IN FRAME: The payment schedule. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Schedule renders with amounts. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 4

   On screen — use verbatim as the slide caption

   Cross-check against Phase 3.

   Do

   Compare subtotal, tax and total with the pricing breakdown.

   Say — verbatim voiceover

   “They must be identical. One engine, one number — if these two screens disagree, do not send anything.”

   Expect

   Figures match exactly.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 4, Quotation. IN FRAME: Cross-check against Phase 3. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Figures match exactly. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: Subtotal, tax and total match the pricing breakdown exactly.

Two notes, two audiences, side by side so neither gets forgotten — and never merged, because one shared box would send the candid one to the customer. Then choose which design images the customer sees, and generate the link.

1. Slide 1 of 5

   On screen — use verbatim as the slide caption

   Left card: gold quote-bubble icon, "Notes for the customer", gold chip "Customer sees this", and the line "Printed on their proposal and their quotation, word for word — on screen and in the PDF."

   Do

   Write a real customer note and click Save note.

   Say — verbatim voiceover

   “Write to the customer, in your words. Why there is no new tank, what the optional additions are. This prints on their proposal and their quotation — identical on screen and in the PDF.”

   Expect

   Toast: "Customer note saved — it is on the proposal and the quotation".

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 5, Proposal. IN FRAME: Left card: gold quote-bubble icon, "Notes for the customer", gold chip "Customer sees this", and the line "Printed on their proposal and their quotation, word for word — on screen and in the PDF." HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Toast: "Customer note saved — it is on the proposal and the quotation". Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 5

   On screen — use verbatim as the slide caption

   Right card: slate hard-hat icon, "Notes for the engineers", chip "Internal · engineering pack", and "The customer never sees this."

   Do

   Write an engineering note and save it.

   Say — verbatim voiceover

   “Now write to whoever installs it. Why the trunk is up-sized, which roof is standing seam, what to check at commissioning. The chip on each card is there so you can never mix these two up while typing.”

   Expect

   Toast: "Engineering note saved — it is on the engineering pack".

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 5, Proposal. IN FRAME: Right card: slate hard-hat icon, "Notes for the engineers", chip "Internal · engineering pack", and "The customer never sees this." HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Toast: "Engineering note saved — it is on the engineering pack". Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 5

   On screen — use verbatim as the slide caption

   Outline button "Proposal images" with an images icon and a count on the right, e.g. 4/6.

   Do

   Open it.

   Say — verbatim voiceover

   “That count is how many of your images actually ship to the customer, out of how many exist.”

   Expect

   The "Proposal Images" dialog opens.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 5, Proposal. IN FRAME: Outline button "Proposal images" with an images icon and a count on the right, e.g. 4/6. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: The "Proposal Images" dialog opens. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 5

   On screen — use verbatim as the slide caption

   Dialog: "HOW THEY APPEAR" row with layout choices (the selected one is outlined in gold), then one row per image with position number, thumbnail, name, head/pipe counts, and icon buttons — up arrow, down arrow, eye, star, bin.

   Do

   Reorder with the arrows, hide one with the eye, set the hero with the star.

   Say — verbatim voiceover

   “Arrows set the order the customer scrolls. The eye hides an image — reversible, unlike the bin. The star picks the hero. Carousel, stacked or grid changes how the whole set is presented.”

   Expect

   Hidden image dims and loses its number; the count in the button drops.

   Watch for — draw as a warning callout

   The internal design-map capture cannot be shown or made hero — it is labelled "Internal reference" and its controls are disabled on purpose.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 5, Proposal. IN FRAME: Dialog: "HOW THEY APPEAR" row with layout choices (the selected one is outlined in gold), then one row per image with position number, thumbnail, name, head/pipe counts, and icon buttons — up arrow, down arrow, eye, star, bin. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Hidden image dims and loses its number; the count in the button drops. ALSO DRAW, smaller and to the side: the failure or edge state — The internal design-map capture cannot be shown or made hero — it is labelled "Internal reference" and its controls are disabled on purpose. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 5

   On screen — use verbatim as the slide caption

   Outline button "Generate Customer Link" with a link icon; afterwards a green panel "Customer proposal link ready" with the URL, a copy icon and an open icon.

   Do

   Click Generate Customer Link.

   Say — verbatim voiceover

   “This freezes the priced snapshot and mints the customer's link. Press it again after a change and the customer keeps the same link but sees the latest pricing — so never send a second URL.”

   Expect

   Green "Customer proposal link ready" panel with the /proposal?token= URL.

   Image 5 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Design + engineering surface" for layout language, palette and density. SCREEN: /QuoteBuilder — Phase 5, Proposal. IN FRAME: Outline button "Generate Customer Link" with a link icon; afterwards a green panel "Customer proposal link ready" with the URL, a copy icon and an open icon. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: Green "Customer proposal link ready" panel with the /proposal?token= URL. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The proposal shows exactly the images you chose, in your order, and both notes appear on their correct documents.

One quote produces four documents for four different audiences, and it is your job to know which is which. The proposal and the quotation go to the customer. The materials list and the engineering pack are internal — one for buying, one for building. Three of the four are generated for you when you publish. The engineering pack is the exception, and that exception is where packages go out incomplete.

1. Slide 1 of 6

   On screen — use verbatim as the slide caption

   The four outputs of one quote, side by side: the customer proposal, the quotation, the materials list, the engineering pack.

   Do

   Name each one and who reads it.

   Say — verbatim voiceover

   “Proposal: the customer's document, with the design images and the note you wrote them. Quotation: the priced summary they forward on. Materials list: what gets ordered. Engineering pack: what the installer builds from, including your engineering note. Same quote, four renderings — nobody retypes anything.”

   Expect

   All four are identifiable as separate documents.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: /QuoteBuilder Phase 5 → the engineering pack → Publish to SharePoint. IN FRAME: The four outputs of one quote, side by side: the customer proposal, the quotation, the materials list, the engineering pack. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: All four are identifiable as separate documents. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 6

   On screen — use verbatim as the slide caption

   The outline "Download PDF" button with a download icon.

   Do

   Download the proposal PDF and open it.

   Say — verbatim voiceover

   “The PDF comes from the same renderer as the customer's web page, so the two cannot drift. It is for printing and forwarding — remember it is a snapshot, and a customer cannot accept from it.”

   Expect

   A PDF downloads and matches the on-screen proposal.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: /QuoteBuilder Phase 5 → the engineering pack → Publish to SharePoint. IN FRAME: The outline "Download PDF" button with a download icon. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: A PDF downloads and matches the on-screen proposal. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 6

   On screen — use verbatim as the slide caption

   The outline "Publish to SharePoint" button, and directly beneath it an amber warning: "No engineering plans baked yet — publishing now files the proposal, quotation and BOM without them. Open the Engineering Pack, press 'File to SharePoint', then publish."

   Do

   Read the amber warning BEFORE pressing publish.

   Say — verbatim voiceover

   “Read this one out loud. The proposal, the quotation and the materials list are generated server-side and always file. The engineering pack is baked from the pack page, so if you have not baked it, publish files three documents where four belong — and the warning is deliberately in front of the button rather than in the success message afterwards.”

   Expect

   The amber warning is visible while the pack is unbaked.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: /QuoteBuilder Phase 5 → the engineering pack → Publish to SharePoint. IN FRAME: The outline "Publish to SharePoint" button, and directly beneath it an amber warning: "No engineering plans baked yet — publishing now files the proposal, quotation and BOM without them. Open the Engineering Pack, press 'File to SharePoint', then publish." HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: The amber warning is visible while the pack is unbaked. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 6

   On screen — use verbatim as the slide caption

   The engineering pack page with its "File to SharePoint" action.

   Do

   Bake and file the pack, then return.

   Say — verbatim voiceover

   “Bake it from the pack page — that is what puts the plans, hydraulics and takeoff into the folder. It also records which version of the quote it was baked from, so a pack drawn from an older design cannot be passed off as current.”

   Expect

   The pack files successfully; the amber warning disappears.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: /QuoteBuilder Phase 5 → the engineering pack → Publish to SharePoint. IN FRAME: The engineering pack page with its "File to SharePoint" action. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: The pack files successfully; the amber warning disappears. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 6

   On screen — use verbatim as the slide caption

   The emerald panel: "Published to SharePoint · <PO number>" with a file-count chip such as 4/4, then a chip per document — proposal, quotation, materials list, engineering pack — and an "Open folder" chip.

   Do

   Publish, wait, and read the count.

   Say — verbatim voiceover

   “Read the count, not the word Published. Four of four means the package is complete. An amber three of four means it published and something is missing, and it names which — that chip is the difference between a complete handover and a job the installers cannot build.”

   Expect

   Emerald panel with the file count and one chip per filed document.

   Watch for — draw as a warning callout

   A publish that says it is complete but shows an amber count is NOT complete. So is one warning that the pack was baked from an earlier version of this quote — re-file it.

   Image 5 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: /QuoteBuilder Phase 5 → the engineering pack → Publish to SharePoint. IN FRAME: The emerald panel: "Published to SharePoint · <PO number>" with a file-count chip such as 4/4, then a chip per document — proposal, quotation, materials list, engineering pack — and an "Open folder" chip. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: Emerald panel with the file count and one chip per filed document. ALSO DRAW, smaller and to the side: the failure or edge state — A publish that says it is complete but shows an amber count is NOT complete. So is one warning that the pack was baked from an earlier version of this quote — re-file it. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

6. Slide 6 of 6

   On screen — use verbatim as the slide caption

   The failure states: a red strip with the real error and Reset plus Retry, or an amber "Publish appears to have stalled. Reset and try again."

   Do

   Explain both.

   Say — verbatim voiceover

   “It tells you what actually went wrong rather than a status code, and a run that dies halfway is detected and offered a reset instead of sitting there looking busy forever. If you see either of these, the folder is not populated — do not tell Operations the job is filed.”

   Expect

   Both recoverable states are understood.

   Image 6 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Publish + documents surface" for layout language, palette and density. SCREEN: /QuoteBuilder Phase 5 → the engineering pack → Publish to SharePoint. IN FRAME: The failure states: a red strip with the real error and Reset plus Retry, or an amber "Publish appears to have stalled. Reset and try again." HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 6. It marks the control the learner acts on. STATE SHOWN: Both recoverable states are understood. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The job folder holds four of four documents, the engineering pack was baked from the current quote version, and you can say which two documents never go to a customer.

Completing a quote is the moment the rep is told to pick it up, so it is the moment to tell them what they need to know. And when you cannot build a job at all, send it back properly rather than in a chat message.

1. Slide 1 of 5

   On screen — use verbatim as the slide caption

   Dialog "Mark quote complete" — description naming the rep who will be emailed and texted.

   Do

   Open it and read who it names.

   Say — verbatim voiceover

   “It names the person who is about to be notified. If that is not who you expect, stop and check the deal owner.”

   Expect

   Dialog names the assigned rep.

   Image 1 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /QuoteBuilder — mark complete, and the Need more info dialog. IN FRAME: Dialog "Mark quote complete" — description naming the rep who will be emailed and texted. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Dialog names the assigned rep. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 5

   On screen — use verbatim as the slide caption

   Amber warning box (only when nobody is assigned): "No sales rep is assigned to this deal." — the notice will go to contact@prodigywildfire.com and say it is unassigned.

   Do

   Show it on an unassigned test quote.

   Say — verbatim voiceover

   “An unassigned deal is never silent — the notice escalates to the shared inbox and says so. Completing a quote is a good moment to notice nobody owns the customer.”

   Expect

   Amber warning renders.

   Image 2 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /QuoteBuilder — mark complete, and the Need more info dialog. IN FRAME: Amber warning box (only when nobody is assigned): "No sales rep is assigned to this deal." — the notice will go to contact@prodigywildfire.com and say it is unassigned. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Amber warning renders. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 5

   On screen — use verbatim as the slide caption

   Textarea "Notes & recommendations for the sales rep", placeholder about why things were specified, substituted or excluded.

   Do

   Write a real brief.

   Say — verbatim voiceover

   “This is the handover. Why the pump is that size, what you excluded, what they should explain. It is saved on the quote so the rep can re-read it any time — the email is only a copy.”

   Expect

   Brief typed.

   Image 3 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /QuoteBuilder — mark complete, and the Need more info dialog. IN FRAME: Textarea "Notes & recommendations for the sales rep", placeholder about why things were specified, substituted or excluded. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Brief typed. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 5

   On screen — use verbatim as the slide caption

   Footer: outline "Save note only" (save icon) and purple "Save & mark complete" (tick icon).

   Do

   Use Save note only first, reopen to show it persisted, then Save & mark complete.

   Say — verbatim voiceover

   “Save note only leaves the quote exactly where it is — useful when you are not finished. Save and mark complete saves the note FIRST and only then notifies anyone, so a rep is never told about a brief that was never stored.”

   Expect

   Quote marked complete; the rep is emailed and texted.

   Image 4 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /QuoteBuilder — mark complete, and the Need more info dialog. IN FRAME: Footer: outline "Save note only" (save icon) and purple "Save & mark complete" (tick icon). HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Quote marked complete; the rep is emailed and texted. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 5

   On screen — use verbatim as the slide caption

   On the blocked quote: the amber "Need more info" button, then the dialog "Ask the rep for what's missing" — nine checkboxes, a free-text box, and a gold "Send request" button.

   Do

   Tick water source, flow and photos, add a note, and send.

   Say — verbatim voiceover

   “Nine questions, because these are the same nine that stall every job. Ticking takes seconds and gives the rep something they can act on without a phone call.”

   Expect

   Toast "Sent to <rep>" and the quote status becomes Information Required.

   Watch for — draw as a warning callout

   One open request per quote — a second send merges into the existing row rather than creating a rival blocker. The CRM stage deliberately does not move backwards.

   Image 5 — generate from this

   16:9 desktop frame, 1440px-wide feel. Match the supplied reference plate "Modal wizard / dialog surface" for layout language, palette and density. SCREEN: /QuoteBuilder — mark complete, and the Need more info dialog. IN FRAME: On the blocked quote: the amber "Need more info" button, then the dialog "Ask the rep for what's missing" — nine checkboxes, a free-text box, and a gold "Send request" button. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: Toast "Sent to <rep>" and the quote status becomes Information Required. ALSO DRAW, smaller and to the side: the failure or edge state — One open request per quote — a second send merges into the existing row rather than creating a rival blocker. The CRM stage deliberately does not move backwards. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The rep receives the brief; the blocked quote reads Information Required and names who owes the answer.

This is usually the first thing a customer touches, and it has to feel like ten seconds of work. They confirm which building is theirs and add photos. It is a single-use link, so an old email can never overwrite the pin they gave us.

1. Slide 1 of 6

   On screen — use verbatim as the slide caption

   White header on a warm off-white page: "Hi <first name>," then "Please confirm the exact location of your property at <address>" with the address in bold.

   Do

   Open the link on a phone.

   Say — verbatim voiceover

   “It greets them by name and states the address we hold. No login, no app, no account.”

   Expect

   Header renders with their name and address.

   Image 1 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /confirm-location?token=…. IN FRAME: White header on a warm off-white page: "Hi <first name>," then "Please confirm the exact location of your property at <address>" with the address in bold. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Header renders with their name and address. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 6

   On screen — use verbatim as the slide caption

   Two side-by-side controls: a black pill "Use my current location" with a crosshair icon, and a grey panel "…or tap your spot on the map" with a gold pin icon. Below, a tip about the Map / Satellite buttons for empty lots.

   Do

   Point at both options.

   Say — verbatim voiceover

   “Two ways in. Standing at the property? Use my location. Sitting on the sofa? Tap the roof. The Map and Satellite toggle at the top of the map is there because a vacant lot looks like trees until you turn road labels on.”

   Expect

   Both options visible.

   Watch for — draw as a warning callout

   If they deny location permission the page says so plainly and tells them to tap the map instead — it never dead-ends.

   Image 2 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /confirm-location?token=…. IN FRAME: Two side-by-side controls: a black pill "Use my current location" with a crosshair icon, and a grey panel "…or tap your spot on the map" with a gold pin icon. Below, a tip about the Map / Satellite buttons for empty lots. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Both options visible. ALSO DRAW, smaller and to the side: the failure or edge state — If they deny location permission the page says so plainly and tells them to tap the map instead — it never dead-ends. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 6

   On screen — use verbatim as the slide caption

   Google satellite/hybrid map. Tapping drops a gold arrow marker and zooms in.

   Do

   Tap the roof.

   Say — verbatim voiceover

   “A gold pin lands where they tapped and the map zooms so they can check it. This pin beats our geocoder every time.”

   Expect

   Gold marker on the building; bottom bar changes to "📍 Location selected. Tap confirm to send."

   Image 3 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /confirm-location?token=…. IN FRAME: Google satellite/hybrid map. Tapping drops a gold arrow marker and zooms in. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Gold marker on the building; bottom bar changes to "📍 Location selected. Tap confirm to send." Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 6

   On screen — use verbatim as the slide caption

   The upload portal beneath the map — attach photos and plans.

   Do

   Add two photos.

   Say — verbatim voiceover

   “While they are here, they can send photos. Elevations, the water supply, the electrical panel. These are exactly the things that otherwise come back as an information request a week later.”

   Expect

   Files listed as uploaded.

   Image 4 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /confirm-location?token=…. IN FRAME: The upload portal beneath the map — attach photos and plans. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Files listed as uploaded. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 6

   On screen — use verbatim as the slide caption

   Sticky white bottom bar with a gold gradient button "Confirm location" (tick icon) that pulses softly once a pin is placed. Disabled and dim until then.

   Do

   Tap Confirm location.

   Say — verbatim voiceover

   “The button only wakes up once there is a pin, so they cannot submit nothing.”

   Expect

   A brief confirming animation, then "All set!" with an emerald tick and "Your property location is confirmed."

   Image 5 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /confirm-location?token=…. IN FRAME: Sticky white bottom bar with a gold gradient button "Confirm location" (tick icon) that pulses softly once a pin is placed. Disabled and dim until then. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: A brief confirming animation, then "All set!" with an emerald tick and "Your property location is confirmed." Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

6. Slide 6 of 6

   On screen — use verbatim as the slide caption

   Return visit: the same link later shows "Location confirmed" plus the upload portal.

   Do

   Reopen the link.

   Say — verbatim voiceover

   “Coming back weeks later, they cannot move the pin again but they can still send us files. Same link, same ledger.”

   Expect

   "Location confirmed" screen with uploads still available.

   Image 6 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /confirm-location?token=…. IN FRAME: Return visit: the same link later shows "Location confirmed" plus the upload portal. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 6. It marks the control the learner acts on. STATE SHOWN: "Location confirmed" screen with uploads still available. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The quote shows a customer-confirmed pin, the method, and the uploads.

Scroll it the way a homeowner does — on a phone, in the evening, with a partner reading over their shoulder. Risk first, then their own roof with the system drawn on it, then what the system is, then the price. Every number and drawing comes from the design that was actually engineered.

1. Slide 1 of 5

   On screen — use verbatim as the slide caption

   Dark cinematic hero with the property and the risk framing. No price.

   Do

   Open the link, hold on the hero.

   Say — verbatim voiceover

   “No price in the first screen, on purpose. The conversation is about risk before it is about money.”

   Expect

   Hero renders with the property.

   Image 1 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: Dark cinematic hero with the property and the risk framing. No price. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Hero renders with the property. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 5

   On screen — use verbatim as the slide caption

   The design gallery — carousel by default, or stacked or two-across grid depending on what the builder chose.

   Do

   Swipe through the images.

   Say — verbatim voiceover

   “These are the exact sheets the builder selected, in the order they set. If an image is missing here, it was hidden on purpose — hiding is reversible, deleting is not.”

   Expect

   Only the chosen customer-facing sheets appear.

   Image 2 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: The design gallery — carousel by default, or stacked or two-across grid depending on what the builder chose. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Only the chosen customer-facing sheets appear. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 5

   On screen — use verbatim as the slide caption

   System overview and equipment detail sections.

   Do

   Scroll through.

   Say — verbatim voiceover

   “Head counts, zones, pipe, tank and pump all come from the design — nobody typed them into this page.”

   Expect

   Figures match the quote.

   Image 3 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: System overview and equipment detail sections. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Figures match the quote. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 5

   On screen — use verbatim as the slide caption

   The quotation section: line groups, subtotal, tax lines, total, in the region's currency.

   Do

   Hold on the tax lines.

   Say — verbatim voiceover

   “Tax comes from the region's rules, not a percentage someone typed. This is the number they will be asked to accept.”

   Expect

   Subtotal, tax and total shown.

   Image 4 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: The quotation section: line groups, subtotal, tax lines, total, in the region's currency. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Subtotal, tax and total shown. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 5

   On screen — use verbatim as the slide caption

   Section "A note from your consultant" — the customer note, verbatim.

   Do

   Read it out.

   Say — verbatim voiceover

   “This is the builder's own words to the customer. It is the only note field the customer ever sees, which is what makes it safe to write plainly in.”

   Expect

   Note renders in its own section.

   Image 5 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: Section "A note from your consultant" — the customer note, verbatim. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: Note renders in its own section. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: Every figure matches the quote and only the selected images appear.

Three buttons, and the middle one matters more than it looks. Before it existed a customer with a question had to choose accept or decline — so the honest answer got filed as a lost sale. Now they ask, the consultant is told, and the proposal stays live.

1. Slide 1 of 5

   On screen — use verbatim as the slide caption

   Sticky dark glass bar at the bottom of the proposal: grey outline "Decline" on the left, white outline "I have a question" with a speech-bubble icon in the middle, and a full-width gold gradient "Accept Proposal" with a tick on the right.

   Do

   Point at each of the three.

   Say — verbatim voiceover

   “Decline is deliberately quiet and grey. The question sits BESIDE Accept, not hidden behind Decline, because it is a way forward, not a way out. Accept is the only gold thing on the screen.”

   Expect

   All three controls visible.

   Image 1 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: Sticky dark glass bar at the bottom of the proposal: grey outline "Decline" on the left, white outline "I have a question" with a speech-bubble icon in the middle, and a full-width gold gradient "Accept Proposal" with a tick on the right. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: All three controls visible. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 5

   On screen — use verbatim as the slide caption

   Tapping "I have a question" reveals a textarea: "What would you like to go over? (optional — we'll call either way)" with Cancel and "Send to my consultant".

   Do

   Type a question and send it.

   Say — verbatim voiceover

   “The message is optional — we will call either way. Whatever they write reaches the rep word for word.”

   Expect

   Button spins, then an emerald strip appears.

   Image 2 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: Tapping "I have a question" reveals a textarea: "What would you like to go over? (optional — we'll call either way)" with Cancel and "Send to my consultant". HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Button spins, then an emerald strip appears. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 5

   On screen — use verbatim as the slide caption

   Emerald strip with a tick: "Sent — your consultant will be in touch. You can still accept below whenever you're ready."

   Do

   Read it out, then point at Accept, still there.

   Say — verbatim voiceover

   “Said once, quietly, and the Accept button has not moved. Asking is not an outcome.”

   Expect

   Accept Proposal is still available.

   Image 3 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: Emerald strip with a tick: "Sent — your consultant will be in touch. You can still accept below whenever you're ready." HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Accept Proposal is still available. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 5

   On screen — use verbatim as the slide caption

   The Decline path: tapping Decline reveals "We'd appreciate knowing why (optional)…" with Cancel and a rose "Decline".

   Do

   Open it, then Cancel.

   Say — verbatim voiceover

   “If they do decline, we ask why in their own words and we keep it. That sentence is the most valuable thing a lost deal produces, and it is never rewritten.”

   Expect

   Decline form opens and cancels cleanly.

   Image 4 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: The Decline path: tapping Decline reveals "We'd appreciate knowing why (optional)…" with Cancel and a rose "Decline". HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: Decline form opens and cancels cleanly. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 5

   On screen — use verbatim as the slide caption

   A red strip above the buttons if a response fails to save.

   Do

   Explain it.

   Say — verbatim voiceover

   “If their response does not save, they are told out loud and asked to try again. They are never left believing they accepted when nothing was recorded.”

   Expect

   —

   Image 5 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: A red strip above the buttons if a response fails to save. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: — Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The proposal is still acceptable and the rep has the question verbatim.

Almost nobody accepts on the first read. They open it in the evening, show somebody, sleep on it, and come back. So the link they hold is deliberately alive: the same URL, always current pricing, and still theirs weeks later. That is why we send one link and never a second one — and why a PDF is an extra, not a replacement.

1. Slide 1 of 5

   On screen — use verbatim as the slide caption

   The proposal reopened on the original link, days later, on the same phone.

   Do

   Reopen the link.

   Say — verbatim voiceover

   “Same link, no login, no expiry to explain. Whatever we have changed since, this is what they see now — so there is never a stale price circulating with our name on it.”

   Expect

   The proposal loads with the current pricing.

   Image 1 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: The proposal reopened on the original link, days later, on the same phone. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: The proposal loads with the current pricing. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 5

   On screen — use verbatim as the slide caption

   A small, quiet pill near the top telling them the proposal has been updated since they last looked.

   Do

   Point at it.

   Say — verbatim voiceover

   “Said once, quietly. Enough that they are not confused by a number that moved, not so loud that it feels like pressure.”

   Expect

   The updated indicator is visible but understated.

   Image 2 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: A small, quiet pill near the top telling them the proposal has been updated since they last looked. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: The updated indicator is visible but understated. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 5

   On screen — use verbatim as the slide caption

   The proposal PDF as it arrives in an inbox — the same cover, the same design images, the same quotation and the same consultant's note as the web page.

   Do

   Compare the PDF against the web proposal, page by page.

   Say — verbatim voiceover

   “When they ask for something to print or forward, this is it. Both come out of the same renderer reading the same frozen ledger, so the document in their hand can never disagree with the page on their phone.”

   Expect

   PDF content matches the web proposal exactly.

   Watch for — draw as a warning callout

   The PDF has no Accept button and does not update. Send the link as well, always — otherwise you have handed them a document they cannot say yes to.

   Image 3 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: The proposal PDF as it arrives in an inbox — the same cover, the same design images, the same quotation and the same consultant's note as the web page. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: PDF content matches the web proposal exactly. ALSO DRAW, smaller and to the side: the failure or edge state — The PDF has no Accept button and does not update. Send the link as well, always — otherwise you have handed them a document they cannot say yes to. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. When a design drawing is in frame, use the production renderer’s own language: building outline in slate grey hairline, pipe runs and sprinkler head markers in blue #3B82F6, coverage as large translucent light-blue circles with a blue stroke, the water-supply point as a small solid gold #B18C19 square, and any fault or off-axis pipe in red #EF4444. Never draw the coverage circles in gold — gold means supply. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 5

   On screen — use verbatim as the slide caption

   The proposal open on a laptop beside the phone — the same page, wider.

   Do

   Open the same link on a desktop.

   Say — verbatim voiceover

   “The second reader is usually a partner at a kitchen table on a bigger screen. It is the same page, laid out wider — there is no separate desktop version to keep in step.”

   Expect

   The same proposal renders correctly at desktop width.

   Image 4 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: The proposal open on a laptop beside the phone — the same page, wider. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: The same proposal renders correctly at desktop width. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

5. Slide 5 of 5

   On screen — use verbatim as the slide caption

   The sticky action bar, still present on the returning visit: Decline, I have a question, Accept Proposal.

   Do

   Show that all three are still available.

   Say — verbatim voiceover

   “Nothing has been taken away by waiting. They can still ask, still accept, still decline — and if they already asked a question and we answered it, the proposal is exactly where they left it.”

   Expect

   All three controls remain available on the returning visit.

   Image 5 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: The sticky action bar, still present on the returning visit: Decline, I have a question, Accept Proposal. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 5. It marks the control the learner acts on. STATE SHOWN: All three controls remain available on the returning visit. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The reopened link shows current pricing, the PDF matches it page for page, and every action is still available.

One tap, and they are told immediately on the page and then by email: what they agreed to, what it costs, and what happens next. They do not have to chase anybody.

1. Slide 1 of 4

   On screen — use verbatim as the slide caption

   Gold gradient "Accept Proposal" button, full width.

   Do

   Tap it once.

   Say — verbatim voiceover

   “One tap. Note it says Accept Proposal — not sign, not pay. This is a verbal agreement.”

   Expect

   Spinner in the button, then the bar is replaced by the confirmation state.

   Watch for — draw as a warning callout

   If the design has an unresolved blocking gate, the gold button is replaced by an amber line explaining why — we do not take a commitment against quantities the engine will not certify. Decline stays available regardless.

   Image 1 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: Gold gradient "Accept Proposal" button, full width. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Spinner in the button, then the bar is replaced by the confirmation state. ALSO DRAW, smaller and to the side: the failure or edge state — If the design has an unresolved blocking gate, the gold button is replaced by an amber line explaining why — we do not take a commitment against quantities the engine will not certify. Decline stays available regardless. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 4

   On screen — use verbatim as the slide caption

   The response confirmation on the page.

   Do

   Hold for three seconds.

   Say — verbatim voiceover

   “They get told on the page first, because the email takes a moment and a silent screen makes people tap twice.”

   Expect

   Confirmation state; the action bar is gone.

   Image 2 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: The response confirmation on the page. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Confirmation state; the action bar is gone. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 4

   On screen — use verbatim as the slide caption

   The branded confirmation email in an inbox — Prodigy shell, their name, the accepted total, and the next steps.

   Do

   Open the email.

   Say — verbatim voiceover

   “Same branded shell as everything else we send. It states the accepted total and that their consultant will prepare the agreement and confirm the deposit and scheduling.”

   Expect

   Email total equals the accepted snapshot total.

   Image 3 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: The branded confirmation email in an inbox — Prodigy shell, their name, the accepted total, and the next steps. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Email total equals the accepted snapshot total. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

4. Slide 4 of 4

   On screen — use verbatim as the slide caption

   A second tap or a refresh.

   Do

   Try accepting again from a second tab.

   Say — verbatim voiceover

   “Two devices, a double tap, a refresh — all of it collapses to one acceptance and one set of notifications. Nobody gets emailed twice.”

   Expect

   No second acceptance, no duplicate email.

   Image 4 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /proposal?token=…. IN FRAME: A second tap or a refresh. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 4. It marks the control the learner acts on. STATE SHOWN: No second acceptance, no duplicate email. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: One acceptance event exists and the confirmation email quotes the frozen total.

This is where a verbal agreement becomes a sale. The agreement is built from the frozen accepted snapshot, so what they sign is what they agreed to — not whatever the quote says today.

1. Slide 1 of 3

   On screen — use verbatim as the slide caption

   The signing page with the scope and the totals.

   Do

   Hold on the total and the scope.

   Say — verbatim voiceover

   “Check this against the accepted total. They must be identical — the contract reads the frozen snapshot, not the live quote.”

   Expect

   Contract total equals the accepted total.

   Image 1 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /SignContract?…. IN FRAME: The signing page with the scope and the totals. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 1. It marks the control the learner acts on. STATE SHOWN: Contract total equals the accepted total. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

2. Slide 2 of 3

   On screen — use verbatim as the slide caption

   The signature step.

   Do

   Sign as the test customer.

   Say — verbatim voiceover

   “Now, and only now, is this a won job. Acceptance was the verbal agreement; this is the executed contract.”

   Expect

   Signed confirmation appears.

   Image 2 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /SignContract?…. IN FRAME: The signature step. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 2. It marks the control the learner acts on. STATE SHOWN: Signed confirmation appears. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

3. Slide 3 of 3

   On screen — use verbatim as the slide caption

   Post-signature: the internal notification and the filed document.

   Do

   Show the team notification and the job folder.

   Say — verbatim voiceover

   “The signed document is filed to the job folder and the team is notified, so Operations can start scheduling without asking anybody for a PDF.”

   Expect

   Signed contract filed; notification raised.

   Image 3 — generate from this

   Single phone screen shown flat, 390px-wide feel, centred on an off-white surround. Match the supplied reference plate "Customer phone surface" for layout language, palette and density. SCREEN: /SignContract?…. IN FRAME: Post-signature: the internal notification and the filed document. HIGHLIGHT: The control being acted on gets a thin 2px gold ring and a small solid gold circle containing only the prompt number. Number it 3. It marks the control the learner acts on. STATE SHOWN: Signed contract filed; notification raised. Flat vector UI mockup illustration. Straight-on, no perspective, no tilt, no device bezels, no browser chrome, no cursor. Page #F7F8FA, cards #FFFFFF, hairlines #E2E8F0, ink #0F172A, secondary ink #475569. Exactly one accent: antique gold #B18C19. Status colours only where the lesson names them — emerald #10B981 confirmed, amber #F59E0B waiting, rose #F43F5E failure, sky #0EA5E9 informational. 12px card radii, generous white space, one soft shadow per card, 1px hairline borders. ZERO GLYPHS OF WRITING: no letters, no words, no digits, no punctuation anywhere in the image. Every label, heading and paragraph is a plain grey rounded horizontal strip of solid colour with nothing inside it. Do not transcribe any word of this description into the picture — not "greeked", not "placeholder", not "lorem ipsum", and not the names of the elements themselves such as label, caption, search or button. Real labels are added afterwards as lesson captions, never drawn into the image. Keep all content inside a centred safe area: generators frequently return a square, so nothing load-bearing may sit near an edge that a 16:9 crop would remove. No people, no hands, no photographs, no 3D renders, no isometric views, no neon, no gradients on backgrounds, no emoji, no logos or wordmarks, no stock-illustration mascots, no drop-shadow clutter. Restrained, editorial, premium enterprise software. Calm, not cheerful.

Check question — learner proves it: The signed contract total equals the accepted snapshot total.