Landing paths

Since Light 2

Synced from the product, 2026-09-30 (P16). The two doors are tinted cards with a large icon tile and a display title, and the peek at the screen each door opens is gone. There is still no button, on purpose: the one action of the page is in the bar, the hero and the close. The two doors a person actually walks through are drawn by the start panel (P17).

Live below, rendered by the real css inside a .landing pinned to data-theme="light", white in the dark stand too, as node 1.1 is for a person who chose dark in Settings (P16).

• .lp-paths two equal columns
• .lp-path a door: --bg-selected, the middle radius, fluid padding; the second arrives 110ms later and both lift under a pointer
• .lp-path .lp-ic the icon tile of landing benefits at the size of a door, up to 5.75rem, with a stronger petrol glow
• .lp-path h3 the door's title at up to 2.75rem
• .lp-sec-head the heading and lede, from landing facts, which owns the shared section head

Behaviour on width

One container point, 53.75rem: below it the doors stack.

D2 holds in the drawing. The doors are the same size, the same tint and the same weight, and neither is the default: "Neither one is the real way in."

What it was, until 2026-09-26

Synced from the product, 2026-09-30 (P16). This section and every one after it, down to "Where it comes from", describe this component as it stood before Light 2 replaced the public page on 2026-09-26. Its classes then were .lp-paths with .lp-path cards and a masked well .pdemo holding real product parts (the card, logo, chip, pair list and preset tile). None of it is a present-tense claim about the product any more; what is true now is Since Light 2 above. It is kept as the record, because a stand amends its history and does not delete it.

Two doors that look the same and show nothing are not a choice, they are a form. The block was a heading and a sentence in each of two white cards and nothing else - two identical empty boxes for the one decision this page asks a person to make. The founder, 2026-08-15: "теперь давай тут делать что то такое красивенькое".

What is inside them is the product, cut off at the card's edge. Each door now ends in a recessed well that bleeds to the card's left, right and bottom, and the well holds the first true moment of that path, taken from the screen the door leads to and not invented here. Connect your bank shows the connection as connections.html draws it: the drawn bank mark, "Chase", "Bank connection through Plaid", the Connected chip, and the four facts under it - the last one before the cut being "Access: Read-only. Tendd cannot move your money.", which is the sentence this door's own paragraph makes and the promise the whole page rests on. Add them yourself shows the preset picker as add-subscription.html draws it: the first tiles, mark, service and "Typically $X a month", which is the paragraph's "Pick from 400+ services" shown instead of claimed.

It is a peek and not a picture, which is the whole device. The well is taller than the room the card gives it and is masked away at the bottom, so each door stands ajar: there is visibly more behind it, and what is behind it is real. A framed thumbnail says "here is a picture of the product"; a cut-off screen says "this is where you would be".

No new strings, no action, no petrol. Every word in both wells belongs to the screen it is taken from and to voice/docs/microcopy.md. Neither door is recommended, which is D2 read literally and the same reason the door inside the product carries no petrol either. And the block comment on the page has said since the landing was built that the one action of this page lives in the header, the hero and the closing block and nowhere else, so the wells are aria-hidden and take no pointer at all.

Anatomy, until 2026-09-26

• .lp-paths its own grid and not .grid: two is not "as many as fit", it is a pair, and D2 is the reason. There is no width at which one door is alone on a row while the other wraps. One column below the desktop point, two above it
• .lp-path the door: a card re-declared upward to 32 of padding, and a flex column so the well below takes whatever height is left - which is what makes both doors end their peek on the same line however the paragraphs wrap. overflow: hidden is load-bearing: the well reaches the bottom corners and would otherwise square off the card's radius
• .pdemo the peek: bleeds by exactly the card's own padding on three sides, written as the padding negated rather than as a number so the two cannot drift apart. Masked away over its last quarter, and pointer-events: none for the whole well

Limits, until 2026-09-26

The mask fades the well and not only its content, and that is deliberate. Ground and content go together, so the recessed panel dissolves back into the card - which is what "there is more behind this door" looks like without a word spent on saying so. It fades over the last quarter and not from the middle: the first cut started at 58% and put "Access: Read-only. Tendd cannot move your money." at half strength, which is the one line in the well that must stay legible right up to the cut.

Nothing in the well is a target, and one declaration says so for all of it. The tile inside is the product's real preset tile and it carries cursor: pointer and a hover from its own file - both correct where it is a button, both a lie in a picture. pointer-events: none on the well answers that once instead of repainting an atom.

One rule reaches into a hosted atom's markup, and it is the one card.css cannot give. On connections.html the source's name is an h2, and a heading has no business inside a decorative aria-hidden block, so the peek writes strong and this file sizes it. .top, .kind, the logo's 36px, the chip's margin-left: auto and the pair list are all their own files' and are not restated.

The grey changed structure and the decision is written where the rule demands. The wireframe is frozen; the founder's decision of 2026-08-15 is a comment on the section in wireframes/index.html, and _wf.css draws the same two peeks in the grey's own boxes-and-bars vocabulary. In grey the cut is plain; the fade is styling and stays in colour. Not one word of the block's copy moved.

What was rejected: making the doors clickable. The door component exists, it carries these two exact headings, and it is a link. Using it here would have added two actions to a block whose own comment has said since the landing was built that the one action of this page is repeated in the header, the hero and the closing block and nowhere else. That is a decision, not an oversight, and a redesign does not get to reverse it quietly.

Where it comes from

Drawn by design/system/components/landing-paths.css through ../system/index.css, the same entry point a product screen loads, and synced byte for byte from the product on 2026-09-30. It stands on the coloured landing, between trust and pricing. The grey wireframes/index.html is frozen at the structure before Light 2 and does not carry it: a component that arrived with a founder's decision after the grey closed, like the brand mark before it. Registered in docs/inventory.md and in _nav.js, in the organism group.