Layout Issues with DIFM Express Calypso Landing Pages

Quick summary

There are currently visual issues with the 2 DIFM Express Calypso landing pages, which are the first step when onboarding to our service. I assume changes made for something else unintentionally affected these pages.

Steps to reproduce

Landing page 1 (Public landing page > Calypso LP)

Visit this landing page directly
View the overall content width, it is too narrow, which is why this text wraps incorrectly.

My guess is that it's the gap here:

.css-c31hln {
  gap: 96px;
}

Toggling that off resolves the issue:

https://github.com/user-attachments/assets/0c4e64bb-fb3d-4bc4-85df-e4dc8447ba9f

Landing page 2 (/start/ flow)

Visit https://wordpress.com/start/domains
Proceed to goals screen, select the Express (let us build your site) button

The font size is smaller than it used to be. Compare the heading and text below it on the right here, with the text on the left, which is the other landing page.

Screen Shot on 2024-09-09 at 15:03:33

Also, look what happens when I refresh the page:

https://github.com/user-attachments/assets/0182b013-4919-465a-89f7-6fcd843d9c0c

What you expected to happen

Both landing pages should have the larger font sizes from the first landing page linked, but without the content width/text wrapping issue.

The second landing page should also not have the issue that occurs when you refresh the page.

What actually happened

See above images

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

These are visual issues, so they are not blockers to signing up. However, this is a bad first impression for a website building service.

Platform (Simple and/or Atomic)

No response

Logs or notes

I see the issues in Firefox and Chrome

Automattic / wp-calypso