MOBILE FINAL REVIEW — MANDATORY LAST PASS, AFTER EVERYTHING ELSE IS WRITTEN:

You have now finished writing the full HTML, CSS, and JavaScript for this page. Before outputting anything, perform one final, dedicated review pass of your own CSS against every item below, specifically at the mobile breakpoint (max-width: 767px). This is not a restatement of rules you've already followed — it is a deliberate second look, because mobile-specific mistakes are the single most common category of error even when every other part of the page is correct. Go through each item below in order and actually check your CSS against it; do not skip ahead assuming you already got it right the first time.

1. OUTER SECTION PADDING — EXACTLY ONE DIV PER SECTION OWNS 10PX: Confirm the outermost div of every section has exactly 10px horizontal padding (not 0, not omitted, not more), and that every div nested inside it is strictly less than 10px (commonly 0px). Re-check every section individually — a single missed section fails this check even if every other section is correct.

2. NO PADDING ON EMPTY/STRUCTURAL DIVS — EVER: Any div that holds nothing but another wrapper div, with no text/image/content of its own, must have exactly 0px horizontal padding. Scan for any wrapper div you wrote that has padding "just in case" and remove it.

3. NOTHING EXCEEDS 10PX HORIZONTAL ON A CONTENT CONTAINER — RE-CHECK EVERY CLASS, INCLUDING SHORTHAND AND REM VALUES: This check applies to containers/wrappers that hold content — sections, inner wrappers, cards, boxes, form wrappers, and any other div whose job is to wrap other elements. It does NOT apply to pills, badges, or buttons — those are small, content-sized elements governed by their own separate snug-fit/sizing rules elsewhere in this document (e.g. width:auto; max-width:max-content for pills/badges, and the platform's own fixed button padding), and forcing them under a 10px ceiling would break their intended shape. Go through every container-type class you wrote and check its mobile padding-left/right and margin-left/right values individually — including values hidden inside shorthand or written in rem.
   a. FIND ANY rem-UNIT PADDING AT THE MOBILE BREAKPOINT AND CONVERT IT TO PX: Search your mobile CSS (max-width:767px and any narrower breakpoint) for any padding value written in rem on a content container (e.g. padding: 1rem, padding-left: 2rem). Convert each one to its actual pixel value (at the standard 16px root: 1rem=16px, 1.5rem=24px, 2rem=32px, etc.) and rewrite it as a literal px value at that breakpoint — rem can scale unpredictably with root font-size changes, so the mobile breakpoint's padding should be a fixed, known px value, not a rem value you're trusting to "probably be fine."
   b. CHECK SHORTHAND padding DECLARATIONS SPECIFICALLY — THIS IS A CONFIRMED RECURRING FAILURE: A rule like `padding: 0 2rem;` or `padding: 1rem 2rem;` on a container does not look like a horizontal-spacing violation at a glance because the offending value is buried inside a shorthand alongside an unrelated vertical value — but the second value in a 2-value shorthand IS the left/right padding (32px in this example, more than 3x the 10px ceiling). Find every shorthand `padding:` declaration on a content container in your mobile CSS, mentally expand it to its individual top/right/bottom/left values, and check the right and left values specifically against the 10px ceiling. If either exceeds 10px, rewrite the rule using explicit `padding-left`/`padding-right` (or `padding-top`/`padding-bottom` plus separate horizontal values) so the horizontal values are never silently smuggled inside a shorthand that was really only intended to set vertical spacing.
   c. Beyond these two specific checks, scan content containers for other common offenders that get missed: form wrappers, card containers, section inner wrappers. None may exceed 10px on either side. (Again: this does not apply to the pill/badge/button elements that may sit inside these containers — only to the container itself.)

4. EVERY GRID COLLAPSES TO ONE COLUMN ON MOBILE — EXCEPT ICON+HEADING CARD GRIDS: Outer multi-card grids (modules-grid, bonuses-grid, testimonials-grid, problem-grid, etc.) must stack to a single column. The one exception: a card's own internal icon+heading 2-column grid (the under-40px case) must KEEP its `auto 1fr` columns at every breakpoint, including mobile — do not let a blanket grid reset collapse this internal structure too.

5. THE 40PX ICON/BADGE THRESHOLD STILL APPLIES AT EVERY BREAKPOINT: Re-verify every card's icon/badge-beside-heading layout one more time here. Under 40px = beside the heading. Over 40px = stacked above, centered. This does not change between desktop and mobile — re-confirm you haven't accidentally let a mobile-specific override flip which layout a given card uses.

6. CENTERED HEADINGS AND SUBHEADINGS CARRY THE "text-center" CLASS: Any h1–h6 or p you centered must have class="text-center" in its class list, so the platform's balanced-wrapping fallback actually applies. Scan your HTML for any centered heading/paragraph missing this class.

7. NO !important ANYWHERE IN YOUR CSS: Search your entire CSS output for the literal string "!important." If you find any, remove it — there is no case where it belongs in your output.

8. LINE-HEIGHT VALUES ARE UNITLESS, NEVER rem/px: Check every line-height declaration you wrote. It must be a plain number (e.g. 1.5), never a fixed unit like 1.5rem.

9. BUTTON + NOTE/DISCLAIMER GAP — NO DOUBLE-SPACING: For any button immediately followed by trust/disclaimer/microcopy text (.pricing__disclaimer, .hero-note, .form-note, .cta-note, or similar), confirm that text has no margin-top of its own, and that if they share a flex/grid parent, that parent's `gap` is set to 0. The button's own margin-bottom should be the only source of that gap.

10. .nav-toggle AND .faq-question NEVER CARRY THE "btn" CLASS: Confirm these two elements do not have the `btn` class anywhere in their class list — adding it forces platform button sizing (min-width:180px, min-height:50px) onto what should be small icon-only triggers, breaking the mobile hamburger and FAQ accordion.

11. PLATFORM-OWNED CONTAINER/WRAPPER CLASSES HAVE NO PADDING/MARGIN/WIDTH/MAX-WIDTH OF YOUR OWN: Re-check `.container`, any class containing "container," and any class ending in "-inner" — these must have none of these four properties set in your own CSS at any breakpoint, mobile included.

12. HORIZONTAL OVERFLOW CHECK: Mentally trace the widest element in each section at 375px viewport width. If anything would extend past the screen edge (a long badge, an unwrapped headline, a wide fixed-width image), fix it now before finalizing — this is your last chance to catch it.

13. EVERY BUTTON IS CENTERED ON TABLET AND MOBILE: Check every button on the page at both the tablet (max-width:1024px) and mobile (max-width:767px) breakpoints. Regardless of how it's aligned on desktop — even a button left-aligned inside a two-column layout's left column — it must be horizontally centered at these two breakpoints. This overrides column-alignment consistency specifically for buttons; the surrounding text in that column can stay left-aligned while the button itself centers.

14. JAVASCRIPT SYNTAX CHECK — RE-READ EVERY SCRIPT CHARACTER-BY-CHARACTER: A single typo (a misspelled `function` keyword, a missing brace, a dropped comma) breaks parsing for the ENTIRE script file it's in — not just the one broken function. Since this platform's scroll-reveal system (`.animate-on-scroll` and friends, made visible by an IntersectionObserver adding `.is-visible`) frequently shares a file with other page scripts (particle effects, accordions, form validation), one typo anywhere in that file can silently kill the reveal animation for the WHOLE page, leaving it rendering almost entirely blank. Re-read every function declaration, every brace/parenthesis/bracket pair, and every statement terminator in your javascript field and any inline `<script>` blocks — character by character, not skimmed for general shape.

Only after you have explicitly gone through all fourteen items above should you finalize and output the page.
