Challenge 3: Decide What Not to Lazy-Load — Possible Solution
====================================================================

THE ELEMENTS: a headline, a hero image, and an interactive pricing
calculator widget directly beneath the hero image — all visible without
scrolling (all above the fold).

WHAT SHOULD NOT BE LAZY-LOADED: ALL THREE of these elements.

WHY, USING THIS CHAPTER'S TRADEOFF SECTION
-----------------------------------------------
The chapter's rule is explicit: "never lazy-load anything needed for the
initial, above-the-fold render" and "the right split line is the same
above/below-the-fold boundary already established for images." Since
the scenario states plainly that ALL THREE elements are "visible without
scrolling" — meaning all three sit above the fold — none of them
qualify as candidates for lazy loading under this chapter's own
boundary, regardless of their individual type (text, image, or
interactive widget).

Breaking this down element by element:
- The headline: almost certainly part of, or directly adjacent to, the
  LCP candidate itself (Chapter 2's "largest content" — a large text
  block is an explicit LCP candidate type). Delaying it would directly
  worsen LCP.
- The hero image: this is Chapter 5's own explicit warning repeated
  here — lazy-loading an above-the-fold image is the original version
  of this exact gotcha, and doing so would likely make it (or
  contribute to making something else) the actual LCP element later
  than necessary.
- The pricing calculator widget: even though it's a JS-heavy
  INTERACTIVE component (the kind of thing that might seem like an
  obvious lazy-loading candidate at a glance, since Chapter 6 is
  specifically about JS/component lazy loading), it's stated to be
  immediately visible without scrolling. If its code isn't loaded until
  some deferred trigger, it will either render as a placeholder that a
  user can see immediately but not use, or its placeholder — if not
  correctly sized (Chapter 6's own reserved-space point) — could cause
  a layout shift once the real widget finally loads in in place of it.
  Either outcome is exactly the kind of harm this chapter warns against
  for above-the-fold content.

WHY THIS WORKS AS AN ANSWER
------------------------------
The determining factor is NOT what kind of element something is (text,
image, or interactive component) — it's whether it's above or below the
fold. This chapter is explicit that ALL THREE categories of content
follow the identical rule once they're above the fold: lazy loading is
"a tool for what's not immediately needed," and everything in this
scenario, by the problem's own description, IS immediately needed.