/* Peptide Corpus — partner portal page layer
==================================================================================================
WHAT THIS IS. The page layer for the seven partner screens, in the same role that web/site.css
plays for the landing page and web/doc.css plays for the 800 generated pages: the design system
in design/ supplies the tokens and the primitives, and this file supplies the arrangements that
only these screens need.
NOTHING HERE IS A NEW COLOUR. Every value resolves through a semantic token from
design/tokens/colors.css, so both themes hold with no [data-theme="dark"] branch in this file.
No token was added; nothing in design/ was edited.
── The pt- prefix, and why every class carries it ────────────────────────────────────────────
Three of these screens are www pages and therefore already have doc.css: /partners, and the two
states of the demo frame. Those use the real .wrap / .doc / .card / .btn / .site-head /
.site-foot from doc.css, exactly as the demo does today — copying rather than reinventing, per
the brief. The other four are portal-host pages with no doc.css at all, and are self-contained
the way app/signin.html is.
So this file must be ADDITIVE on one host and SELF-SUFFICIENT on the other, which it can only be
if it never redefines a name doc.css owns. Hence pt-. In particular .pt-btn is a second button
class and that is deliberate, not an oversight: it is the button for the portal host, drawn from
the same tokens as doc.css's .btn so the two are indistinguishable on screen. If the portal ends
up sharing doc.css after all, delete .pt-btn and use .btn — do not leave both live on one page.
── Not defined here, on purpose ──────────────────────────────────────────────────────────────
Every .pc-* class. The demo's rank cards, its rail, its sortbar and its ledger belong to
web/doc.css and are in use. The demo frame links doc.css and inherits them untouched; this file
frames the demo and does not reach inside it.
================================================================================================== */
/* ── The two lockups ──────────────────────────────────────────────────────────────────────────
BOTH ARE THE SAME MARK PLUS HTML TEXT, and that is deliberate rather than lazy.
`brand/peptide-corpus-logo-*.svg` is the canonical lockup and the right file for a PNG export,
an email or a slide. In a page it is the wrong tool: it is a fixed two-colour artwork, so it
needs one file per theme and it cannot inherit --accent. The header already solved this — the
mark is inline SVG taking `fill: var(--accent)`, the words are real text — so the wordmark
themes, scales with the type ramp, and stays selectable and searchable.
PerfectCart gets the identical treatment. It does NOT get a mark of its own: one geometry
across the family is the point, and the previous logos/perfectcart.png was a raster with a dark
background baked in, which read as a dark tile dropped onto a light page. */
.pt-lockup { display: inline-flex; align-items: center; gap: var(--space-3); }
.pt-lockup .brand-mark { width: 34px; height: 34px; flex: none; }
.pt-lockup .mark-bg { fill: var(--accent); }
.pt-lockup .mark-tri {
fill: none; stroke: var(--on-accent); stroke-width: 8;
stroke-linejoin: round; stroke-linecap: round;
}
.pt-lockup-words { display: grid; gap: 1px; }
.pt-lockup-name {
font-size: var(--text-xl); font-weight: var(--weight-extrabold);
letter-spacing: var(--tracking-tight); line-height: 1.05; color: var(--text);
}
.pt-lockup-name b { color: var(--accent-text, var(--accent)); font-weight: var(--weight-extrabold); }
/* The endorsement line. --text-subtle would fail contrast on --bg and colors.css reserves it for
decoration, so this takes --text-muted and earns its quietness from size and tracking instead. */
.pt-lockup-by {
font-size: var(--text-2xs); font-weight: var(--weight-extrabold);
letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
}
.pt-lockup-lg .brand-mark { width: 44px; height: 44px; }
.pt-lockup-lg .pt-lockup-name { font-size: var(--text-2xl); }
/* ── Shared primitives for the portal host ────────────────────────────────────────────────────
The portal has no doc.css, so it needs its own wrap, button and card. Same tokens, same shapes
and the same radii as the public side; a partner moving between the two should not be able to
tell which host drew the page. */
.pt-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 36px); }
.pt-narrow { max-width: 880px; }
/* doc.css's .sr-only and .skip, under pt- names because the portal host does not load doc.css.
The three www screens use the doc.css originals; only the portal screens use these. */
.pt-sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pt-skip {
position: absolute; left: var(--space-3); top: -60px; z-index: 100;
padding: var(--space-3) var(--space-4);
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.pt-skip:focus { top: var(--space-3); }
.pt-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
min-height: var(--control-h-lg); padding: 0 var(--space-5);
border: 1px solid transparent; border-radius: var(--radius-sm);
font-family: inherit; font-size: var(--text-base); font-weight: var(--weight-bold);
cursor: pointer; text-align: center;
transition: background var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.pt-btn:hover { text-decoration: none; }
.pt-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pt-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.pt-btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.pt-btn-secondary:hover { border-color: var(--accent); color: var(--accent-text, var(--accent)); }
.pt-btn-sm { min-height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.pt-btn-block { width: 100%; }
.pt-btn[disabled] { opacity: .6; cursor: not-allowed; }
.pt-link {
color: var(--accent-text, var(--accent)); font-weight: var(--weight-semibold);
text-decoration: underline; text-underline-offset: 2px;
}
/* "Forgot your password?" is a button, not a link — it sends the reset mail from this page rather
than navigating. It has to LOOK like a link, so the button chrome comes off explicitly. */
button.pt-link {
padding: 0; border: 0; background: none; font: inherit;
font-size: var(--text-xs); cursor: pointer;
}
button.pt-link[disabled] { opacity: .6; cursor: not-allowed; }
/* A stated absence, which on this product is a value and not an empty cell. Dashed, and never
mistaken for a filled field — see rule 7 in AGENTS.md.
IT IS NO LONGER QUIET, AND "quiet" IS WHAT THIS COMMENT USED TO SAY. --text-muted was not a
contrast bug — it is #5f6b7d, measured in colors.css at 5.05:1 on --bg and 5.40:1 on --surface,
comfortably past the 4.5:1 AA floor. It was a philosophy bug. The dashed outline is what says
"absent"; once it has said it, the colour does not need to whisper it a second time. Set fainter
than the values beside it, a named absence reads as the hedge this product exists to refuse —
"No dimensions scored" is a FINDING, and it was being drawn as an apology for one. So it sits on
--text, the same weight as a filled field, and the border alone carries the difference. */
.pt-absent {
display: inline-flex; align-items: center;
padding: 2px var(--space-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-pill);
font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text);
}
/* yes / no in the comparison table.
NEITHER IS A HUE, and both of the obvious choices were measured and rejected:
--success on --bg 3.29:1 green "yes". Under the 4.5:1 AA floor in LIGHT mode, and there is
no --success-text the way there is a --warning-text.
--text-subtle 3.44:1 grey "no". Also under it, and colors.css says outright that
--text-subtle is decoration only and meaningful small print
belongs on --text-muted. A cell in a pricing table is meaningful.
So the pair is weight and tone instead: "yes" at full strength, "no" one step back. The words
carry the meaning on their own, the partner column is already tinted by the rule below, and the
table survives forced colours and anyone who cannot separate hues. */
/* A MARK, WITH THE WORD STILL THERE FOR ANYTHING THAT IS NOT LOOKING. Eleven rows of the words
"yes" and "no" is eleven rows a reader has to actually read; a tick and a cross are scanned in
one pass down the column, which is the only reason this table exists. The word stays in the
cell as .pt-sr-only text, so a screen reader hears "yes" and not the name of a glyph — and a
mark drawn with a mask has no alt text to lose. */
.pt-yes::after, .pt-no::after {
content: ""; display: inline-block; width: 16px; height: 16px;
vertical-align: -.18em; background: currentColor;
mask: var(--pt-mark) center / contain no-repeat;
-webkit-mask: var(--pt-mark) center / contain no-repeat;
}
.pt-yes { color: var(--accent-text, var(--accent)); font-weight: var(--weight-bold);
--pt-mark: url('data:image/svg+xml,'); }
.pt-no { color: var(--text-subtle); font-weight: var(--weight-regular); --pt-mark: var(--ico-x); }
/* ==================================================================================================
PUBLIC PAGE — /partners
Additive over doc.css. Only the pieces that page needs and no other page has.
================================================================================================== */
/* The two hero buttons. A row on desktop, a stack on a phone, and the stack is full width so the
invite-code door is not a 40%-wide target at 360px. */
.pt-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 var(--space-4); }
@media (max-width: 420px) {
.pt-cta-row { display: grid; }
.pt-cta-row > .btn, .pt-cta-row > .pt-btn { width: 100%; }
}
/* The price, stated once as a band rather than buried in a paragraph. Three figures, three cells,
so a vendor scanning for "what does this cost" finds it in one pass. */
.pt-price {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-3); margin: var(--space-8) 0;
padding: var(--space-5); background: var(--surface);
border: 1px solid var(--border); border-left: 3px solid var(--accent);
border-radius: var(--radius-md);
}
.pt-price div { min-width: 0; }
.pt-price b {
display: block; font-family: var(--font-mono); font-size: var(--text-2xl);
font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight);
font-variant-numeric: tabular-nums;
}
.pt-price span { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }
/* THE SECOND OFFER, SET APART FROM THE FIRST RATHER THAN RUNNING ON FROM IT. Two price bands in
one section read as a single price carrying seven figures unless something separates them, and
the two are bought separately — PerfectCart sends a basket, the white label puts the partner's
name on the app. The rule and the inset do that work.
The nested .pt-price is deliberately the same band, and .pt-price-5 lowers ONE number rather
than restating the component. It carries five cells — a setup fee, a monthly minimum and three
seat rates — and the 150px floor fits only four of them at this width: 722px of card content
less 40px of padding is 682px, and five 150px tracks with four 12px gaps want 798px. So the
fifth wrapped onto a row of its own, which reads as an afterthought bolted to a settled price
rather than as the third member of a set. Measured, not guessed.
118px is the floor because it is the largest round number that fits five and cannot fit six:
floor((682 + 12) / (118 + 12)) = 5, and six would want 768px. The cells then share the row at
126.8px each, which is why the labels below are bare rates — "per Pro seat beyond the minimum"
does not fit in 126px and said the same four words three times over. The mechanic moved to
.pt-wl-note, where it is stated once. */
.pt-wl {
margin-top: var(--space-8); padding-top: var(--space-6);
border-top: 1px solid var(--border);
}
/* TWO OFFERS LIVE IN HERE, NOT ONE, and each needs the rule-and-inset the region as a whole gets.
`.pt-wl` carries the affiliate app and then the white label — one is added to PerfectCart and
replaces its two figures, the other is bought on its own — so three price bands now stack in one
section. Two of them abutting reads as a single price carrying nine figures, which is the exact
thing the border above was added to stop. The separator is on the SECOND offer and every one
after it (`+`), never on the first, which already sits under `.pt-wl`'s own rule.
`> h3` became `.pt-offer > h3` when the offers gained their wrapper. Left as it was it would have
matched nothing, so the second heading would have kept its top margin and the first would have
lost the zero — a dead rule and a misaligned heading from one unchanged line. */
.pt-wl .pt-offer + .pt-offer {
margin-top: var(--space-8); padding-top: var(--space-6);
border-top: 1px solid var(--border);
}
.pt-wl .pt-offer > h3 { margin-top: 0; }
.pt-wl .pt-price { margin-block: var(--space-5); }
/* FIVE CELLS BREAK 2-THEN-3, NOT 4-THEN-1, AND THAT IS THE WHOLE REASON THIS RULE EXISTS.
auto-fit steps 5, 4, 3, 2, 1 as the band narrows, so at a tablet width it put four cells on one
row and left "$8 per Ultra seat" alone underneath — measured at 768px, where the band is 580px
inside and the 150px floor fits four. A lone trailing cell reads as an afterthought bolted onto a
settled price rather than as the third member of a set.
The five are 2 + 3: two fixed costs, then three seat rates. Spanning a 6-column grid 3/3/2/2/2 is
what puts that grouping on screen at the width where a single row stops fitting. Above 820px all
five share one row and the spans are handed back.
min-width steps rather than max-width, matching .pt-stack and .pt-pipe below. */
/* FOUR CELLS BREAK 3-THEN-1 ON THEIR OWN, WHICH IS THE SAME DEFECT .pt-price-5 BELOW WAS WRITTEN
FOR, ONE CELL SMALLER. Measured on the compiled demo at a 736px viewport: the band's content box
is 632px, and four 150px tracks with three 12px gaps want 636. Four pixels short, so auto-fit
steps to three and drops "$2 back to you" onto a row of its own — a lone trailing cell reading as
an afterthought bolted to a settled price, and this is the cell a partner is least likely to
expect, because it is the one figure on the screen that we pay them.
The four are 2 + 2: two costs, then two rates. 2x2 is what that grouping looks like at any width
where one row does not fit, and it never leaves one cell alone. Above 900px all four share a row.
min-width steps rather than max-width, matching .pt-price-5 and .pt-stack below. */
.pt-price-4 { grid-template-columns: 1fr; }
@media (min-width: 560px) {
.pt-price-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
.pt-price-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pt-price-5 { grid-template-columns: 1fr; }
@media (min-width: 560px) {
.pt-price-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pt-price-5 > :nth-child(-n + 2) { grid-column: span 3; }
.pt-price-5 > :nth-child(n + 3) { grid-column: span 2; }
}
/* THE RESET REPEATS THE :nth-child SELECTORS INSTEAD OF SAYING `> *`, AND THAT IS SPECIFICITY
RATHER THAN STYLE. `.pt-price-5 > *` is (0,1,0) and the two rules above it are (0,2,0), so the
universal one loses no matter how late it comes — the cells kept `span 3`/`span 2` against a
five-track grid, overflowed into implicit rows, and laid out 1 + 2 + 2 with cells 402px wide in a
722px band. The computed `grid-template-columns` read `126px x5` the whole time, which is why
this has to be caught by measuring where the cells actually ARE and not by reading the track
list off the container. */
@media (min-width: 820px) {
.pt-price-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pt-price-5 > :nth-child(-n + 2),
.pt-price-5 > :nth-child(n + 3) { grid-column: auto; }
}
.pt-wl-note { font-size: var(--text-sm); color: var(--text-muted); }
/* `.pt-shot` IS A BREAKOUT AND THIS IS THE ONE PLACE IT MUST NOT BREAK OUT. On /partners it is a
direct child of the prose column and is meant to widen past it to min(1160px, viewport): that is
the whole component. Here it sits inside .pt-demoend, which is a padded bordered card 788px wide
on a desktop viewport — so the unscoped rule renders the figure 1075px wide and pushes it 144px
through the card's own border on BOTH sides. Measured, not guessed. The image fills the card's
content width instead, which is what a figure inside a card should do anyway. */
.pt-wl .pt-shot { width: 100%; margin-inline: 0; }
/* Listed vs Partner. Two narrow value columns and one wide label column, fixed rather than
auto, so "yes"/"no" line up as columns instead of drifting with the label above them. */
.pt-compare { table-layout: fixed; min-width: 460px; }
.pt-compare th:first-child, .pt-compare td:first-child { width: auto; }
.pt-compare th:not(:first-child), .pt-compare td:not(:first-child) { width: 92px; text-align: center; }
.pt-compare tbody th { font-weight: var(--weight-medium); }
/* The partner column is the one being sold; a tint marks it without adding a colour. */
.pt-compare th:last-child, .pt-compare td:last-child { background: var(--selected-tint); }
/* Row labels WRAP. doc.css sets `white-space: nowrap` on every `.doc th`, which is right for the
two column heads and wrong for the eleven row heads under them: "Buyer age-confirmed and agreed
to your terms" cannot fit 276px on one line, so it ran under the tick beside it. */
.pt-compare tbody th { white-space: normal; }
/* BOTH COLUMNS, OR THE TABLE ARGUES ONE SIDE. The 460px floor put the Partner column — the one
being sold — to start at x=387 on a 375px screen, off the edge, reachable only by a sideways
drag nothing signalled. A reader saw a list of features and one column of ticks, which reads as
"listed already does this". Narrow value columns cost a few pixels of tick; a column the reader
never finds costs the comparison. */
@media (max-width: 560px) {
.pt-compare { min-width: 0; }
/* 74px is measured, not chosen: "Partner" sets its own column, and doc.css keeps a column head on
one line, so the floor is that word (62px) plus the padding either side. Declaring anything
narrower under `table-layout: fixed` does not narrow the table — the head overflows and the
scroller gets it back as a sideways drag, which is the bug this rule is here to remove. */
.pt-compare th:not(:first-child), .pt-compare td:not(:first-child) { width: 74px; padding-inline: 5px; }
.pt-compare tbody th { padding-inline: 8px; }
}
/* The four ways to connect. Each is a card with a number, a claim, and — the point of the
section — what it PROVES, which is a different field from what it costs you. */
.pt-shapes { display: grid; gap: var(--space-3); margin: var(--space-5) 0; }
/* min-width: 0 because these are grid items. Without it a grid item is at least its min-content
wide, and the nowrap tag on card three pushed the whole COLUMN — and therefore all four cards —
14px past the viewport at 360. */
.pt-shape {
min-width: 0;
padding: var(--space-5); background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius-md);
}
/* Wraps, so the "where most partners will sit" tag drops under the heading on a phone instead of
sitting beside it and widening the card. */
.pt-shape > h3 {
display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-bold);
}
.pt-shape > h3 > i {
flex: none; font-style: normal; font-family: var(--font-mono);
font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
/* The glyph sits on a flex row set to align-items: baseline, and a box with no text in it has no
useful baseline — it would hang below the numeral. Centred against the heading instead. */
.pt-shape > h3 > .pt-glyph { align-self: center; }
.pt-shape p { margin: 0 0 var(--space-3); max-width: 62ch; }
/* Label left, value right, on a grid rather than a run of sentences — "You do" and "Proves" are
the two comparable facts across all four shapes and they have to line up to be compared. */
.pt-shape dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; }
.pt-shape dt {
font-size: var(--text-xs); font-weight: var(--weight-extrabold);
text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted);
padding-top: 2px;
}
.pt-shape dd { margin: 0; font-size: var(--text-base); line-height: var(--leading-relaxed); }
@media (max-width: 520px) {
.pt-shape dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-1) 0; }
.pt-shape dd { margin-bottom: var(--space-3); }
.pt-shape dd:last-child { margin-bottom: 0; }
}
/* Where most partners will sit. One card marked, for the same reason only the winner's total goes
green on a rank card: a mark every card carries is decoration. */
.pt-shape.is-common { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.pt-shape-tag {
display: inline-flex; align-items: center; margin-left: auto;
padding: 3px var(--space-2); border-radius: var(--radius-pill);
background: var(--accent); color: var(--on-accent);
font-size: var(--text-2xs); font-weight: var(--weight-extrabold);
text-transform: uppercase; letter-spacing: var(--tracking-caps); white-space: nowrap;
}
/* ── What sits behind the basket ──────────────────────────────────────────────────────────────
A card grid, because the argument here is BREADTH — six things a competitor's directory does not
have — and breadth reads as a grid and does not read as a paragraph. Three across on a wide
screen, two on a tablet, one on a phone.
THE STATUS PILL IS THE LOAD-BEARING PART. docs/pro-launch-plan.md exists because a card once
sold eight features of which one existed. Everything on this grid is live; everything not live
is in the dimmed list below it, labelled, in the same treatment site.css uses for .plan-soon.
If you add a card here, it ships today or it goes in the list. */
/* BREAKS OUT OF THE PROSE COLUMN, the same way and by the same arithmetic as .pc-shell in doc.css.
`.wrap.doc` is 860px because that is a comfortable measure for sentences; eight cards inside it
give three columns and a lone orphan on row three. At the full 1160 they land four and four. */
/* ONE, TWO OR FOUR COLUMNS, NEVER THREE, and that is the whole reason this is not auto-fit.
There are eight cards. auto-fit picked three at around 1024px and left a two-card orphan row
with a hole in it. Every count here divides eight, so the grid is always complete: 4+4, 2+2+2+2,
or a single column. If a ninth card is ever added, this rule has to be revisited — that is the
cost of pinning the counts, and it is worth it. */
.pt-stack {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: var(--space-3); margin: var(--space-6) 0;
width: min(1160px, calc(100vw - 2 * clamp(18px, 4vw, 36px)));
margin-inline: calc((100% - min(1160px, 100vw - 2 * clamp(18px, 4vw, 36px))) / 2);
}
@media (min-width: 620px) { .pt-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .pt-stack { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Flex column, not grid, so the status pill can be pushed to the bottom with margin-top: auto.
Grid items stretch to the tallest in the row, so the pills then sit on one baseline across the
row instead of floating at whatever height each card's prose happens to end. */
/* SAME BREAKOUT ARITHMETIC AS .pt-stack, copied deliberately rather than shared. The figure sits
directly under the eight cards and any difference between the two widths reads as a mistake at
the one edge a reader's eye is already following down the page. If the grid's width changes,
this changes with it.
The frame is what keeps a 16:9 recording from looking like a hole in the page: same surface,
same border and same radius as a card, so it belongs to the row above it rather than floating. */
.pt-shot {
margin: var(--space-6) 0;
width: min(1160px, calc(100vw - 2 * clamp(18px, 4vw, 36px)));
margin-inline: calc((100% - min(1160px, 100vw - 2 * clamp(18px, 4vw, 36px))) / 2);
}
/* NO BORDER AND NO PANEL, because the recording is a cut-out rather than a rectangle. A frame
drawn round it outlines the 16:9 box the laptop does not fill, and the machine then reads as
floating inside an empty rectangle instead of sitting on the page. The transparency is what
makes the figure belong to the page; a border takes that straight back. */
.pt-shot img {
display: block; width: 100%; height: auto;
}
/* Reads as a sentence about the picture, not as a second caption bar: the measure is held to the
prose column even though the image above it is not, because a caption running the full 1160 is a
line nobody finishes. */
.pt-shot figcaption {
max-width: 62ch; margin: var(--space-3) auto 0;
font-size: 14px; line-height: 1.5; color: var(--text-muted); text-align: center;
}
/* ── The white label, teased under the handoff recording ───────────────────────────────────────
A POINTER, NOT A PANEL. The offer itself is #white-label further down the page, with the
mechanics and the "you read none of it" promise; this only says the product exists, at the one
spot on the page where a reader has just watched PerfectCart work and a second offer can be
raised without interrupting the first. If it ever grows into the argument, the argument is then
in two places on one page and one of them goes stale — which is the whole reason the gated
screens' copy became a module.
QUIETER THAN .pt-price ON PURPOSE, and the accent rule is the only thing they share. This sits
directly beneath the recording that carries the primary pitch; a box with the weight of the
price band would sell the second product over the first, three sections before the first one
has made its case.
A HANGING INDENT, NOT A GRID. .pt-soon li carries the long version of this note: the rows are
`Lead. rest…`, an element plus a bare text node, and a grid container makes EVERY child a
grid item — the anonymous text run included — so the sentence after the lead drops into the
marker column and renders one word per line. text-indent keeps the row in normal inline flow and
does not care how many elements the markup uses. `.pt-need` on this same page is the grid form
and has that trap live; every list authored into it needs its single wrapping span. This one
does not, and that is the reason to reach for this shape rather than that one. */
.pt-tease {
margin: var(--space-8) 0; padding: var(--space-5) var(--space-6);
background: var(--surface); border: 1px solid var(--border);
border-left: 3px solid var(--accent); border-radius: var(--radius-md);
}
/* ── The mockup, in the width the measure was already refusing ──────────────────────────────────
The copy is capped at 62ch and this card runs the full prose column, so about a third of the box
was empty at desktop. The picture goes there rather than below, which costs no height at all on
the widths that have the room and stacks on the widths that do not.
THE COPY IS WRAPPED IN ONE ELEMENT BECAUSE THIS IS A GRID. Every child of a grid container is an
item; five loose children would take five columns. That is the same rule the note above gives for
`.pt-tease-list li` from the other direction — there it is the anonymous text run inside a row,
here it is the rows themselves. `.pt-tease-body`, and the h3 rule below is on it rather than on
`.pt-tease`, because a direct-child selector stops matching the moment a wrapper appears and the
only symptom is a heading quietly getting its margin back.
THE PICTURE COLUMN IS A SHARE, NOT A WIDTH, AND THAT WAS MEASURED RATHER THAN GUESSED. Pinned at
320px it held its size while the text collapsed around it: at a 721px viewport the copy had 267px
and the mockup 320, so the picture was WIDER than the argument it illustrates, at the one width
where the argument is hardest to read — four lines for the first beat. A share keeps the desktop
proportion (390/326 in a 788px card, which is where it was drawn) and takes the squeeze with the
text instead of passing it on.
240px IS A LEGIBILITY FLOOR, NOT A TASTE ONE. The whole point of the picture is that the reader
makes out the placeholder wordmark in the sidebar; narrower than that it stops reading as
lettering, and a purple shape on an app screenshot is then reasonably taken for OUR mark on OUR
app — the one thing this section exists to say it is not. The share does not reach it above this
breakpoint, so the floor is a guard on the prose column narrowing later rather than something
live today. Below 720px it stacks rather than shrinking past it. */
@media (min-width: 720px) {
.pt-tease {
display: grid; align-items: center; gap: var(--space-6);
grid-template-columns: minmax(0, 1fr) minmax(240px, 44%);
}
}
.pt-tease-body { min-width: 0; }
.pt-tease-figure { margin: var(--space-5) 0 0; }
@media (min-width: 720px) { .pt-tease-figure { margin: 0; } }
/* No frame and no panel, for the reason .pt-shot gives: the machine is a cut-out on transparency
rather than a rectangle, so a border drawn round it outlines the 16:9 box the laptop does not
fill. */
.pt-tease-figure img { display: block; width: 100%; height: auto; }
.pt-tease-figure figcaption {
margin-top: var(--space-2); font-size: var(--text-xs); line-height: 1.45;
color: var(--text-subtle); text-align: center;
}
.pt-tease-kicker {
margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-extrabold);
text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted);
}
.pt-tease-body > h3 { margin: 0; }
.pt-tease-sub {
margin: var(--space-1) 0 var(--space-4); max-width: 62ch;
font-size: var(--text-sm); color: var(--text-muted);
}
.pt-tease-list { display: block; margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.pt-tease-list li {
margin-bottom: var(--space-2); padding-left: 26px; text-indent: -26px; max-width: 62ch;
line-height: var(--leading-relaxed); color: var(--text-muted);
}
.pt-tease-list li:last-child { margin-bottom: 0; }
.pt-tease-list li b { font-weight: var(--weight-semibold); color: var(--text); }
/* The same tick .pt-yes draws, at the same weight, because two check marks of different builds on
one page reads as two designers. It is a mask, so it takes the accent by paint and has no alt
text to lose — the lead sentence beside it carries the meaning on its own. */
.pt-tease-list li::before {
content: ""; display: inline-block; width: 26px; height: 14px;
text-indent: 0; vertical-align: -.12em; background: var(--accent);
--pt-tick: url('data:image/svg+xml,');
mask: var(--pt-tick) left center / 14px 14px no-repeat;
-webkit-mask: var(--pt-tick) left center / 14px 14px no-repeat;
}
.pt-stackcard {
min-width: 0; padding: var(--space-5);
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
display: flex; flex-direction: column; gap: var(--space-3);
}
/* The glyph. A tinted square rather than a bare icon: at 16px on a white card an outline icon
reads as a smudge, and the square gives it a ground without adding a colour. */
.pt-stackcard-ico {
width: 34px; height: 34px; flex: none; display: grid; place-items: center;
border-radius: var(--radius-sm);
background: var(--accent-soft); border: 1px solid var(--accent-soft-border); color: var(--accent-text, var(--accent));
}
.pt-stackcard-ico::before {
content: ""; width: 17px; height: 17px; background: currentColor;
mask: var(--pt-ico) center / contain no-repeat;
-webkit-mask: var(--pt-ico) center / contain no-repeat;
}
/* An inline