Landing shell

What it is

It is the landing's answer to what app-shell.css does for a screen, and it could not be that file. The app shell centres one column of blocks a person is working through, at --container-page, with the tab bar or the rail around it. A landing has no navigation to hold, its blocks are arguments a person is deciding between, and it runs full bleed section by section so a band can take its own ground. Two jobs, two files.

The measure is --container-wide, the same value the app uses above its desktop point. That is deliberate rather than convenient: a person who reads this page and then signs up should not feel the page change width under them.

Anatomy

• .lp-wrap the measure, 80rem, centred, with the screen's own side padding: 16px at the narrow end and 40 past the tablet point, which is what the app shell spends there too
• .lp-section 80px of air on a phone, 96 past the tablet point. It is the widest gap in this product, and it is the point: on an app screen the next block is the next thing you do, here it is a different claim
• .lp-section.lp-trust, .lp-section.lp-plan the two bands that stand on the surface fill instead of the canvas. No border between them: the fill change is the edge, which is the Flat Paper Rule every card in this product already follows
• .lp-section.lp-final the closing block, and the only centred thing on the page. Centring a column of arguments would cost the left edge each one is read from; centring one sentence and one button is what an ending looks like

Behaviour on width

One point, the registered 47.5rem. The measure's padding goes 16 to 40 and the section rhythm 80 to 96. Nothing else changes, and there is no second point: the page is a single column of full-bleed bands at every width, so there is nothing for a second one to switch.

Limits

The grid floor is set here and it is the grid's own axis, not an override. .grid counts columns from --grid-col-min, and the default 10rem is sized for preset tiles in a 588px pane. Inside a 1200px landing measure that floor produced seven tracks for three cards, so the benefit cards sat in the left third with four empty tracks beside them. This file sets --grid-col-min: 20rem on the sections, which is the floor a paragraph of argument needs, and no column count is written anywhere.

Where it comes from

Drawn by design/system/components/landing-shell.css through ../system/index.css, the same entry point a product screen loads. It stands on the coloured landing and on wireframes/index.html, and on nothing else: the landing is the only public surface this product has. Registered in docs/inventory.md and in _nav.js, in the organism group.