, because it performs an
action inside the dialog and navigates nowhere - an href="#" here would
put a junk entry in the reader's history on the way out of the page.
Styled as the plain text link the instruction asks for, at `.xi-small`'s
own size and position so it sits where his small line sat. */
.xi-swap{
display:inline;margin:0;padding:0;border:0;background:none;
font-family:var(--body);font-size:.92rem;line-height:1.5;
color:var(--ink-soft);text-decoration:underline;text-underline-offset:.22em;
text-decoration-thickness:.06em;cursor:pointer;
}
.xi-swap:hover{color:var(--accent)}
/* SCOPED TO .xi. `.xi p{margin:0 0 22px}` is 0,2,0 and beats a bare
class on this element, which is a - the same trap `.xi-eyebrow`
and `.xi-small` both hit before it. It has to keep his 16px, because
16px under the button is the position his `.modal__small` had and
the one thing about that slot this set did not change. */
.xi .xi-smallrow{margin:16px 0 0;max-width:none;text-align:center}
/* The capture step. One line of copy, one field, one button - the field
and the button stacked, both full width, because at the moment a reader
commits to typing an address there is nothing else on the card to
balance against. */
.xi-cap{margin:0;text-align:left}
.xi .xi-cap-copy{
font-size:1rem;line-height:1.5;color:var(--ink-soft);
margin:0 0 16px;max-width:none;text-align:center;
}
.xi-cap input{
display:block;width:100%;
padding:15px 16px;font-size:16px;font-family:inherit;line-height:1.5;
border:1px solid var(--line-strong);border-radius:10px;
box-sizing:border-box;background:var(--tile);color:var(--ink);
}
.xi-cap input::placeholder{color:var(--ink-mute);opacity:1}
.xi-cap input:disabled{background:var(--deep);color:var(--ink-soft)}
.xi-cap .ep-btn{margin-top:12px}
.xi .cmsg{font-size:1rem;margin-top:14px;text-align:center}
/* ------------------------------------------------------------------
03, THE MATH TABLE - the 2026-09-11 rebuild
Appended; nothing above this line was edited. Both columns carry real
dollar figures now, so two things the old four-row "$0" column never
needed have to exist: a row that reads as money IN, and one source
line under the whole table instead of one note per column.
`.mx-note` above is NOT deleted - it is simply unused from this set on.
The per-column notes went when the single source line arrived; the
rules stay so a later set can put them back without re-deriving the
greys that were measured for this dark ground.
------------------------------------------------------------------ */
/* The source line, in .mx-note's own measured grey on this ground - same
hue, same lift - centred under the grid rather than under a column. */
/* HIS `.math__note`, VALUE FOR VALUE - which is what item 12 asked for and
what the first version of this rule missed: it invented 12.8px in the body
face and broke five parity measurements that had been passing. His is mono
at 11.2px, .1em of tracking, an 18.14px line and 18px of top margin. The
colour is the lift `.mx-note` already measured for this dark ground.
ONLY THE ALIGNMENT IS OURS: his sits under each column, this sits under the
whole table, because the brief puts one source line there. */
.mx-src{
max-width:760px;margin:18px auto 0;text-align:center;
font-family:var(--mono);font-size:11.2px;letter-spacing:.1em;
line-height:18.14px;color:#9A8A6C;
}
/* THE SOURCE LINE IS A LINE, 2026-09-19.
It was capped at 760px - the arithmetic's `.mx-delta` measure - and the
three credits need about 890px at this size, so it has been rendering as
a two-line paragraph at every width since it was written. A citation that
wraps reads as copy; the point of this one is that it is a credit under a
table.
THE TEXT IS UNCHANGED. Only the measure is: the cap comes off up to the
container's own 1080px, which puts all three credits on ONE LINE at 1920
and 1440 with room to spare.
AT 390 IT IS FOUR LINES AND IT STAYS FOUR LINES. The brief asks for max
two there. The three credits are 118 characters; at 390 the column is
359px, so two lines would need about 6.1px of advance per character - a
9.6px mono face, on a page built for 65-year-old eyes.
A 10.4px step with the tracking off was built and measured first: it got
390 from four lines to three, and it cost three of tools/verify.py's
ELIAS_MATH figures - noteRenderedPx 11.2, noteTrack .1em and noteLh 18.14
- which are read off the reference's own source note. One line saved on a
credit under a table the reader has finished, against three measured
reference figures, is the wrong trade, so the step came back out.
390 IS NOT A REGRESSION EITHER WAY: the line was four lines there before
this set too, because 760px and 359px both cap to the same 359px column.
What changed is 1920 and 1440, which were two lines and are now one. */
.mx-src{max-width:min(1080px,100%)}
/* ---- 03's NET LINE: ONE CALLOUT, 2026-09-11 (correction pass) ----
THE CAUSE, MEASURED. His `.math__delta` carries `background:var(--paper-2)`
- a visible panel - and ours carried none, so on the dark ground the only
thing that rendered was the 4px rule at the far left edge of an invisible
760px box, with the centred text stranded in the middle of it. It read as
a floating rule, which is exactly what it was.
Two changes and no more: the box gets a panel so the rule has something to
be attached to, and it shrinks to its own content so the rule sits beside
the line instead of beside a 760px void.
THE PANEL IS DARKER THAN THE GROUND, NOT LIGHTER. Lifting it to `--ink`
would have taken the net line's own red from 4.71 : 1 to 3.58 and failed
AA; 18% black over the ground gives a panel you can see AND lifts the text
to 5.14 : 1. Measured both ways before choosing. */
.mx-delta{
min-height:0;
width:fit-content;max-width:min(760px,100%);
background:#082226;
text-align:left;
}
@media (max-width:560px){
/* At 390 the line wraps, and a fit-content box would go ragged. Full width
with the text left against the rule keeps them one unit. */
.mx-delta{width:auto}
}
/* THE ONE ROW THAT IS MONEY IN. The minus sign alone is not enough on a
column of costs - a reader skimming figures reads every number as
another thing they paid - so the row also says "paid to you" in words,
and the figure takes the lift red rather than the column's paper. */
/* THE REAL CAUSE OF THE TWO-LINE FIGURE, and it was not `.fig`.
This rule used to target a WRAPPER span with `.num-credit` and a
`paid to you` label inside it, and it stacked them with
`flex-direction:column`. The correction pass moved "paid to you" into
the row's description and deleted that label - which left `.num-credit`
ITSELF as the `span:last-child` this rule matches. So the column
direction was being applied to the minus sign and the figure, and they
stacked. `white-space:nowrap` could not help: they were flex items on
separate flex lines, not wrapped text.
It is a row now, and the minus, a thin space and the figure are one
unbreakable unit. */
.mx-col li.mx-credit span:last-child{
display:flex;flex-direction:row;align-items:baseline;gap:0;
flex:none;white-space:nowrap;
}
/* THE MINUS AND THE FIGURE ARE ONE ROW, and it is laid out rather than
left to text wrapping. `.fig` is display:flex site-wide, so inside this
span it was a block-level box on its own line and `white-space:nowrap`
could not help - the break was a box break, not a text break, and
switching .fig to inline-flex was not enough on its own. The span is a
flex row now, so the two can only sit side by side. `.fig` itself is
untouched everywhere else on the page. */
.num-credit{
display:inline-flex;flex-direction:row;align-items:baseline;gap:0;
white-space:nowrap;color:var(--accent-lift);
}
/* THE CREDIT FIGURE ACTUALLY RENDERS IN THE LIFT COLOUR, 2026-09-19.
The declaration above has been in this file since the row was built and
has never taken effect: `#ledger .mx-col li span:last-child{color:
var(--paper)}` is (1,1,2) and `.num-credit` is (0,1,0), and the credit
figure IS that last child. It has been rendering in --paper, identical to
the three costs above it.
It did not show up as a problem while the row also said so in words -
"Bumped on the way home - paid to you in cash". The six-word rule took
that clause, so the minus sign is now doing the whole job of telling a
reader that this one number is money coming back rather than another
thing they paid, and a minus sign alone in the same colour as four costs
is not enough.
Same token, same 8.88 : 1 on this ground, just at a specificity that
reaches the element. Nothing else in either column is drawn in it, which
is what makes it a signal. */
#ledger .mx-col--after li.mx-credit > span:last-child.num-credit{
color:var(--accent-lift);
}
/* `.fig` is display:flex site-wide, which makes it a block-level box on its
own line inside an inline run. Scoped to this one figure; `.fig` itself is
untouched everywhere else. */
.num-credit .fig{display:inline-flex}
/* THE FIGURE COLUMN HOLDS ONE WIDTH IN BOTH COLUMNS. Without it the cell is
shrink-to-fit, the four widths differ per row, and the credit row - the
widest at 63px - was the one that decided whether the row grew a second
line. Measured widest single-line figure across both columns is 63px, so
the floor is 68px and every row clears it at every width. */
/* 64px IS THE WIDEST FIGURE, measured: the credit row's
"minus + thin space + $1,075" renders 64px on one line and nothing else in
either column is wider. The floor is exactly that and not a pixel more -
every pixel here is taken from the description beside it, and one
description needs all of them (see the gap note below). */
.mx-col li > span:last-child{min-width:64px;text-align:right;flex:none}
/* THE TWO COLUMNS ARE LEVELLED BY ROW HEIGHT, NOT BY WORD COUNT.
The figure floor costs the description beside it up to 26px, and one
description - the left "Bumped on the way home" row - needs those pixels
to stay on one line. Buying them back from the row gap was tried and is
the wrong fix: it wins by about three pixels, which is a rendering
accident waiting to happen the next time a word changes.
The rows are given ONE HEIGHT instead, taken from the tallest of the
eight. Whatever wraps and whatever does not, row n in the left column and
row n in the right column are the same height, their dashed rules land on
the same y, and the two totals share a baseline - by construction rather
than by luck.
SCOPED TO THE TWO-COLUMN LAYOUT. Below 1041px the grid collapses to one
column, the columns are stacked and there is nothing to level, so the
floor is lifted and every row is its natural height again. */
@media (min-width:1041px){
/* 85, not 84. The tallest row's own content measures 84.x, so a floor of
84 left it a fraction taller than its opposite number and the totals
landed one pixel apart. 85 clears the fraction. */
.mx-col li{min-height:85px}
}
/* (0,3,1). `.mx-col li span:last-child` is (0,2,2) and it matches THIS
span too - `.mx-in` is the last span child of the figure cell - so a
bare `.mx-in` lost the cascade and the label came out in Lora at
18.4px instead of mono at 10.4. Measured, not guessed. */
.mx-col li.mx-credit .mx-in{
font-family:var(--mono);font-size:10.4px;letter-spacing:.14em;
text-transform:uppercase;color:var(--accent-lift);line-height:1;
}
@media (max-width:560px){
.mx-col li.mx-credit .mx-in{font-size:9.6px}
}
/* ------------------------------------------------------------------
THE 2026-09-11 REVISION PASS - 01's rule list, 05's quote cards,
the countdown label, and the eyebrow size.
Appended; nothing above this line was edited. Everything here is
later in the file than the rules it overrides, so it wins on order.
------------------------------------------------------------------ */
/* ---- 01's RULE LIST - DELETED 2026-09-11 (correction pass) ----
`.ep-rules`, `.ep-rules li`, `.ep-rules li:last-child`, `.ep-rules b` and
`.ep-rules-foot` stood here for one set. 01 carries its original prose
paragraph in `.ep-lede` again, so the rules had nothing left to style and
are cut rather than left dead - they were new in the previous set and
nothing else ever used them. */
/* ---- 05: ELIAS YODER'S CARD, OTIS GRANGER'S STARS AND CAPTION ----
The card shell stays Elias's - the mark hung off the top edge, the italic
body. The stars and the name line are Otis's, measured off his live page
on 2026-09-11 rather than eyeballed. */
.review{
border-top:1px solid var(--line);
padding:48px 1.4rem 1.4rem;
position:relative;
}
.review::before{
content:"\201C";
position:absolute;top:-10px;left:22px;
font-family:var(--display);font-style:italic;
font-size:6rem;line-height:.6;color:var(--accent);
background:var(--paper);padding:0 10px;
}
/* OTIS'S STARS, VALUE FOR VALUE, AND THE CAUSE OF THE OLD MISMATCH.
Measured on his page: Georgia 14px/700, #C9803F, 2px of tracking, and the
glyph is U+2605 and only U+2605.
THE FIFTH STAR USED TO RENDER LARGER because nothing here named a font.
The run inherited the body stack, which has no star glyph, so the browser
fell back PER GLYPH - and the hollow U+2606 on Doris's card could land in
a different fallback from the filled ones beside it. Naming Georgia fixes
the cause: measured, U+2605 and U+2606 are both 13.67 x 16 in Georgia, so
the empty star is exactly the size of the filled ones and takes the same
colour. One font, one size, one colour, five glyphs. */
/* `.starline`, NOT `.stars`. The first version of this rule reused `.stars`
and lost: the retired rating component still declares
`@supports(...){.rating .stars,.review .stars{...}}`, which clips a
gradient to the text and sets `color:transparent`, and at (0,2,0) it beat
a bare `.stars`. Measured result was 18.9px glyphs in transparent ink.
Those rules are dead - nothing carries `.rating` any more - but they are
above this line and are left where they are, so the new run takes a name
they cannot reach. */
.starline{
font-family:Georgia,"Times New Roman",serif;
font-size:14px;font-weight:700;
color:#C9803F;letter-spacing:2px;line-height:22.4px;
}
.review .starline{display:block;margin-bottom:4px}
/* His `.review__body` is italic; the headline above it keeps its own weight. */
.review p{font-style:italic}
/* OTIS'S CAPTION, `.who`, MEASURED: Georgia 13px/20.8px, weight 400, his
muted grey, sentence case, NO tracking, NO uppercase, 8px above it, and a
pale band behind it with no padding of its own.
HIS BAND IS #F3EBDD ON WHITE. Pasting that hex onto our #F5F1E8 paper
would leave a band you cannot see - his card ground is white and ours is
already warm - so the band is our own `--deep`, which sits the same step
below our paper as his does below his white. The only value not taken
literally, and it is the one that could not be.
HIS CAPTION HAS NO RULE ABOVE IT - measured border-top 0px - so the
hairline this build drew above the name line is gone. */
.who{
font-family:Georgia,"Times New Roman",serif;
font-size:13px;font-weight:400;line-height:20.8px;
/* HIS GREY IS #9A8B7A AND IT DOES NOT SURVIVE THE MOVE. On our band it
measures 2.59 : 1 - and on his own band it is 2.79, so he fails AA here
himself. Our --ink-mute is only 4.21 on the same band. --ink-soft is
7.01 : 1, keeps the line quiet against the body above it, and clears AA
for a 65+ reader. The SECOND of the two colours that could not be taken
literally; the band is the first. */
color:var(--ink-soft);text-transform:none;letter-spacing:normal;
background:var(--deep);
margin:8px 0 0;padding:0;border-top:0;
}
@media (max-width:620px){.review{padding:44px 1.2rem 1.2rem}.review::before{font-size:5rem;left:16px}}
/* ---- TOP BAR: ELIAS'S COUNTDOWN LABEL ----
His `.masthead__center span`: the label sits in the bar's own mono at
.72rem with .22em of tracking, uppercase, at 0.7 opacity, and the timer
beside it is the bold plate. Ours already had the plate; this is his
label treatment on the text beside it. */
.urg-ends{
font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
text-transform:uppercase;opacity:.7;
}
/* His timer tracks at .16em against the label's .22em. */
.urg-timer{letter-spacing:.16em}
@media (max-width:768px){.urg-ends{font-size:.66rem;letter-spacing:.18em}}
/* ---- GLOBAL: THE UPPERCASE EYEBROW LABELS ----
.62rem is 11.2px at this root and the brief calls for 14px with the
tracking pulled in. 14 / 18 = .778rem. The tracking goes .2em -> .14em:
at 14px that is 1.96px between letters against 2.24px before, so the
label gets bigger without getting wider than its rule. */
/* SET IN PX, NOT rem, AND WITH NO MOBILE STEP-DOWN. The brief is one
number - 12px becomes 14px - and a rem here would have rendered 14.0
on the 18px root and 13.2 on the 17px one, while a .72rem mobile step
put it back to 12.24 and undid the whole change on a phone.
TWO SELECTORS CARRY MORE THAN A CLASS and had to be answered in kind:
`#ledger .eyebrow` is an ID rule (1,1,0) that held 03's label at
11.84px, and the modal's own eyebrow sat at 13.32px. Both are raised
here rather than edited where they stand. */
.eyebrow,.lc-eyebrow,.xi-eyebrow,
#ledger .eyebrow,
#xi .xi-eyebrow{font-size:14px;letter-spacing:.14em}
/* ---- 06: OTIS'S RATING LINE, MEASURED ----
His is a star run followed by a at 13px Georgia in his muted grey
with 8px of left margin, inline, no tracking and no uppercase. The stars
are the same `.stars` the cards use, so there is one star treatment on the
page and not two. */
/* HIS TWO STAR TREATMENTS ARE NOT THE SAME, measured 2026-09-11 on his live
page. The previous pass measured one of them and used it for both.
review cards div.st Georgia 14px / 700 / lh 22.4px
buy box div.shopstars Georgia 18px / 400 / lh 28.8px
Colour (#C9803F) and tracking (2px) are identical in both; the size, the
weight and the leading are not. 05's cards keep the 14/700 run - that is
already his card value - and this line takes the 18/400 one.
His buy-box stars are a bare TEXT NODE inside `.shopstars`, so they take
that container's type; ours are a span, so the values are set on it. */
.ep-rating{margin:0 0 14px;max-width:none;line-height:28.8px}
.ep-rating .starline{
display:inline;
font-size:18px;font-weight:400;line-height:28.8px;
}
.ep-rating small{
font-family:Georgia,"Times New Roman",serif;
font-size:13px;font-weight:400;line-height:20.8px;
color:var(--ink-soft);letter-spacing:normal;text-transform:none;
margin-left:8px;
}
/* ---- HERO BODY TEXT: 18px FLOOR, 1.6 LEADING ----
The brief sets a floor, not a size, so the desktop figures that are
already above it are left alone and only the leading is brought to 1.6.
The 560px block is where the floor actually bites: html goes to 17px
there, so .hero-sub's 1.1rem rendered 18.7px at 1.42 and .best's own
step-down went under 18. Both are set in px here so the floor holds at
any root. */
/* A FLOOR RAISES, IT NEVER LOWERS. The first version of this block set
.best to a flat 18px and would have SHRUNK it from 19.08px on desktop,
which is the opposite of what a minimum means. Only values already
under the floor are touched.
.best 1.06rem = 19.08px desktop / 18.02px at the 17px root - over
.hero-sub 1.35rem desktop / 1.1rem = 18.7px at 560 - over
So only the LEADING moves, and only where it was under 1.6. */
.hero-sub{line-height:1.6}
.hero-points li{line-height:1.6}
@media (max-width:900px){.hero-sub{line-height:1.6}}
@media (max-width:560px){
/* 1.42 was the one figure under the floor on this page. */
.hero-sub{line-height:1.6}
.hero-points li{font-size:max(18px,1rem);line-height:1.6}
}
/* 06 ABOUT THE AUTHOR — geometry ported from the Seasoned Cruiser. */
.about-in{
display:grid;
grid-template-columns:17fr 23fr;
gap:80px;
align-items:start;
}
.about-media{position:relative}
.about-media::before{
content:"";
position:absolute;
inset:-14px;
border:1px solid var(--line-strong);
pointer-events:none;
}
.about-photo{display:block}
.about-photo img{
display:block;
width:100%;
height:auto;
aspect-ratio:4/5;
object-fit:cover;
border-radius:0;
background:var(--deep);
}
.about-copy h2{
font-family:var(--serif);
font-weight:700;
text-transform:none;
font-size:34.5px;
line-height:1.12;
letter-spacing:normal;
color:var(--ink);
margin:0 0 22px;
max-width:none;
}
.about-copy p:not([class]){
font-family:var(--serif);
font-size:17px;
line-height:1.6;
color:var(--ink-soft);
max-width:none;
margin:0 0 17px;
}
.about-copy p.eyebrow{
font-size:.62rem;
font-family:var(--ui);
margin:0 0 .6rem;
}
.about-copy p.about-pull{
margin:32px 0 0;
padding:26px 30px;
border-left:3px solid var(--accent);
background:var(--deep);
font-family:var(--serif);
font-style:italic;
font-weight:400;
font-size:20.8px;
line-height:1.4;
color:var(--ink);
max-width:none;
}
.about-copy p.about-sig{
margin:14px 0 0;
font-family:var(--serif);
font-style:italic;
font-size:26px;
line-height:1.6;
color:var(--ink-mute);
max-width:none;
}
@media (max-width:1040px){
.about-in{grid-template-columns:1fr;gap:48px}
.about-media{max-width:min(100%,420px)}
.about-media::before{inset:-8px}
}
@media (max-width:640px){
.about-copy h2{font-size:26.5px}
.about-copy p.about-pull{padding:22px 24px;font-size:19px}
.about-copy p.about-sig{font-size:23px}
}
/* ==================================================================
==================================================================
THE v3 REVISION, 2026-09-19.
Everything below is new and nothing above it was edited. Five blocks,
in the order they appear on the page:
1. 04 What's inside, and the stats row under it
2. 05 the product block, its review stack and its guarantee band
3. the Ready-when-you-are close
4. the exit modal's sale step
5. the embedded-checkout modal
Every colour is a token that was already in :root. Every geometry is
read off otisgranger.com, and each block says which of his rules it
came from. Nothing here uses !important, and nothing here redefines a
rule that an earlier block in this file owns.
==================================================================
================================================================== */
/* ------------------------------------------------------------------
1a. 04 WHAT'S INSIDE - his `.bullets`.
.bullets list-style:none;max-width:820px;margin:26px auto 0;
text-align:left
.bullets li padding:11px 2px;border-bottom:1px dotted #d8ccb4;
font-size:17.5px;line-height:1.5
.pg color:#9a8b7a;font-size:15px;white-space:nowrap
.tocclose max-width:820px;margin:24px auto 0;font-size:17px;
text-align:center;font-style:italic
Taken value for value. The dotted rule is his - it is a lighter mark
than the dashed one the arithmetic uses, which is what keeps ten rows
from reading as a table - and --line-strong at 1px dotted is this
page's nearest equivalent to his #d8ccb4.
THE CHAPTER TAG DOES NOT WRAP. `white-space:nowrap` on `.pg` is his and
it matters: "· ch. 10" broken across two lines reads as a stray number
at the start of the next row.
------------------------------------------------------------------ */
.bullets{
list-style:none;max-width:820px;margin:26px auto 0;padding:0;
text-align:left;
}
.bullets li{
padding:11px 2px;
border-bottom:1px dotted var(--line-strong);
font-family:var(--serif);
font-size:17.5px;line-height:1.5;color:var(--ink-soft);
}
.bullets li b{font-weight:700;color:var(--ink)}
.pg{
font-family:var(--mono);
color:var(--ink-mute);font-size:13px;letter-spacing:.06em;
white-space:nowrap;
}
.tocclose{
max-width:820px;margin:24px auto 0;
font-family:var(--serif);font-style:italic;
font-size:17px;line-height:1.55;color:var(--ink-soft);
text-align:center;
}
@media (max-width:640px){
.bullets li{font-size:16.5px}
.tocclose{font-size:16px}
}
/* ------------------------------------------------------------------
1b. THE STATS ROW - his `section.stats` / `.statgrid` / `.stat`.
.stats a dark band
.statgrid display:flex;gap:36px;justify-content:center;
flex-wrap:wrap;text-align:center
.stat b display:block;font-size:56px;line-height:1, in his gold
.stat span font-size:16px, in his line colour
Ours is that row on --ink-deep with the figures in --accent-lift, which
is the token this page already uses for a figure on a dark band (the
arithmetic's totals and its unit labels are the same pair). 8.88 : 1.
THE SEPARATORS ARE HAIRLINES, NOT HIS BARE GAP. Three figures centred in
a row with nothing between them read as one number split into pieces at
a glance; the page's own `.hero-stats` solves the same problem with a
1px left border on every item but the first, and this follows it. They
come off when the row wraps, because a vertical rule above a wrapped
item points at nothing.
------------------------------------------------------------------ */
/* UN-TOMBSTONED 2026-09-19 (round 3). The row is back on the page: the 2026
edition is 178 pages, which is the page count the owner said it had to have
before this shape earned its place. The rules below are THE SAME RULES IT
LEFT WITH - not rewritten, uncommented - so the row that came back is the
row that went away. FOUR FIGURES NOW, which is Otis Granger's own count;
the three-figure version only ever existed because the page count had to
come off. `.fact` is padded for four rather than three at the narrow steps,
which is the one change. */
.factbar{
background:var(--ink-deep);
color:var(--paper);
padding:var(--sec) 0;
}
.factgrid{
display:flex;gap:0;justify-content:center;flex-wrap:wrap;
text-align:center;
}
.fact{padding:0 2.6rem}
.fact + .fact{border-left:1px solid rgba(245,241,232,.16)}
.fact b{
display:block;
font-family:var(--display);font-weight:700;
font-size:56px;line-height:1;color:var(--accent-lift);
}
.fact span{
display:block;
font-family:var(--ui);font-weight:700;
text-transform:uppercase;letter-spacing:.14em;
font-size:.62rem;color:rgba(245,241,232,.72);
margin-top:.55rem;
}
/* FOUR FIGURES FIT AT 1920 AND 1440 AT HIS OWN 2.6rem. Below that the row
would wrap "official sources" onto a second line on its own, which reads as
a fifth stat, so the padding steps down before the wrap can happen. */
@media (max-width:1100px){
.fact{padding:0 1.8rem}
.fact b{font-size:46px}
}
@media (max-width:820px){
.factgrid{gap:1.4rem 0}
.fact{flex:0 0 50%;padding:0 .8rem}
.fact + .fact{border-left:0}
.fact:nth-child(even){border-left:1px solid rgba(245,241,232,.16)}
.fact b{font-size:40px}
}
@media (max-width:640px){
.factbar{padding:calc(var(--sec) * .85) 0}
.fact b{font-size:34px}
.fact span{font-size:.54rem;letter-spacing:.1em}
}
@media (max-width:380px){
.fact{padding:0 .5rem}
.fact b{font-size:30px}
.fact span{font-size:.5rem;letter-spacing:.06em}
}
/* ==================================================================
2. 05 THE PRODUCT BLOCK - his `.shopcard`.
HIS MEASUREMENTS, AND WHAT EACH ONE BECAME:
.shopcard max-width:980px;margin:0 auto;background:#fff;
border:1px solid #e5dccb;border-radius:20px;
box-shadow:0 24px 70px rgba(0,0,0,.10);overflow:hidden
-> 980px, --paper, --line-strong, 20px, the same shadow.
`overflow:hidden` is load-bearing: it is what makes the
three bands share the card's rounded corners instead of
squaring them off at the bottom.
.shoptop display:flex;gap:38px;padding:38px;flex-wrap:wrap
.shopcov flex:0 0 240px
.shopinfo flex:1 1 380px
-> kept exactly. 240 + 38 + 380 = 658, so the two columns
stay side by side until the card is under ~734px of
content box and then the cover goes full width with the
copy under it. THE COVER IS FIRST IN THE MARKUP, so
that stacked order is the source order and needs no
`order` property and no media query.
.shopname Georgia serif, 33px, bold
.shopstars 18px, letter-spacing 2px
.shopbul list-style:none;margin:14px 0 16px;font-size:16.5px;
line-height:1.75
.pnow2 38px bold, in his red
.pwas2 19px, struck, muted, margin-left:10px
.psave2 a filled pill: 12.5px bold, letter-spacing .06em,
border-radius:999px, padding 6px 13px, margin-left:12px,
vertical-align:6px
.shopbuy display:block;text-align:center, full width, 21px
.shopsub text-align:center;font-size:13px, muted, margin-top:8px
.shoprev background:#FBF6EE;border-top:1px solid;
padding:24px 38px 30px
.shoprevh font-size:14px;letter-spacing:.24em
.shopcards display:flex;gap:16px;flex-wrap:wrap
.shopcardr flex:1 1 250px;background:#fff;border:1px solid;
border-radius:12px;padding:16px 18px - and `display:none`
until `.is-on` is added
.revmore display:block;width:100%;margin-top:14px;2px border;
bold 15px;padding:11px 14px;border-radius:10px
.shopfoot border-top:1px solid;padding:16px 38px;display:flex;
gap:18px;justify-content:center;flex-wrap:wrap;
font-size:13.5px
================================================================== */
/* The anchor alias. Zero-height, no box, no effect on flow - it exists so
that `#order` still resolves to the top of this section. */
.anchor-alias{display:block;height:0;overflow:hidden}
/* THE EYEBROW INSIDE A CENTRED HEAD, 2026-09-19.
`.eyebrow` is a left-edge device: every section that has one - 02, 06 -
runs its head flush left, and the rule carries a measure and no alignment
because the block around it is already left-aligned. `.sec-head` is the
CENTRED head, used by 01, 03 and now 04 and 05, and until this set no
centred head had an eyebrow. Dropped into one, the eyebrow kept its
measure and hung off to the left of the H2 it was labelling - measured at
1920, it sat 400px left of centre.
One rule, scoped to the centred head only, so the left-aligned heads are
untouched. */
.sec-head .eyebrow{
display:block;text-align:center;max-width:none;
margin-inline:auto;
}
/* THE FULL-WIDTH BUTTON, 2026-09-19.
`.ep-btn--block` existed already but was written as `.xi .ep-btn--block`,
scoped to the exit modal, which is the only place it was used. His
`.shopbuy` is `display:block;text-align:center` at the full width of the
copy column, and the Ready block and the product block both want the same
thing, so the modifier is unscoped and the modal's copy is left where it
is - it is the same three declarations and removing it would be an edit
to a block this revision has no business in. */
.ep-btn--block{display:flex;width:100%;justify-content:center}
.rb{background:var(--tile)}
.rb-head{margin-bottom:var(--sec-in)}
/* HIS LEAD, ABOVE THE CARD. Two paragraphs: the first is the price and its
terms, set one step up so it carries; the second is the delivery and the
guarantee at reading size. Both centred and held to his 820px measure. */
.rb-lead{max-width:820px;margin:0 auto var(--sec-in);text-align:center}
.rb-lead p{
font-family:var(--serif);
font-size:1.06rem;line-height:1.6;color:var(--ink-soft);
max-width:none;margin:0 0 .7rem;
}
.rb-lead p:first-child{
font-size:1.3rem;line-height:1.45;color:var(--ink);font-weight:700;
}
.rb-lead p:last-child{margin-bottom:0}
@media (max-width:640px){
.rb-lead p:first-child{font-size:1.14rem}
.rb-lead p{font-size:1rem}
}
.rb-card{
max-width:980px;margin:0 auto;
background:var(--paper);
border:1px solid var(--line-strong);
border-radius:20px;
box-shadow:0 24px 70px rgba(34,39,31,.10);
overflow:hidden;
text-align:left;
}
.rb-top{display:flex;gap:38px;padding:38px;flex-wrap:wrap}
.rb-cov{flex:0 0 240px}
.rb-cov picture{display:block}
.rb-cov img{
display:block;width:100%;height:auto;border-radius:2px;
filter:drop-shadow(0 16px 24px rgba(34,39,31,.26));
}
.rb-info{flex:1 1 380px;min-width:0}
.rb-name{
font-family:var(--serif);font-weight:700;
font-size:33px;line-height:1.14;color:var(--ink);
margin:2px 0 6px;max-width:none;
}
/* `.ep-rating` and `.starline` are the page's own and are not restated
here: the rating line inside this card is the one that was in the
deleted 07 block, rule for rule. Only its bottom margin is set, because
the four bullets come next rather than a value stack. */
.rb-info .ep-rating{margin:0 0 14px}
.rb-bul{
list-style:none;padding:0;margin:14px 0 16px;
font-family:var(--serif);
font-size:16.5px;line-height:1.75;color:var(--ink-soft);
}
/* His bullets carry no marker at all. Ours take the page's own triangle,
which is what `.stack li` and the hero points both use, so that a list of
four facts inside a card reads like every other list on the site. */
.rb-bul li{
position:relative;padding-left:1.15rem;
}
.rb-bul li::before{
content:"\25B8";
position:absolute;left:0;top:0;
color:var(--accent);font-size:.72rem;line-height:1.75rem;
}
/* The value stack is `.ep-includes--short`, unchanged. It only needs its
own spacing inside this card. */
.rb-stack{margin:0 0 20px}
.rb-price{
display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
padding:16px 0 0;margin:0 0 14px;
border-top:1px solid var(--line);
}
.rb-now{
font-family:var(--serif);font-size:38px;font-weight:500;line-height:1;
color:var(--ink);
}
.rb-now em{font-style:italic;color:var(--accent)}
.rb-was{
font-family:var(--ui);font-size:19px;color:var(--ink-mute);
text-decoration:line-through;
}
/* HIS `.psave2`, AND THE COLOUR IS OURS AND IS NOT THE PRICE'S. His pill is
a green that is not his red. --free-green is this page's "you keep it"
colour - the guarantee seal, the FREE tags - and SAVE $52 TODAY is the
one thing on this card that is a saving rather than a charge. White on
--free-green is 5.93 : 1. */
.rb-save{
display:inline-block;
background:var(--free-green);color:#fff;
font-family:var(--ui);font-weight:700;
font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
border-radius:999px;padding:6px 13px;
white-space:nowrap;
}
.rb-info .ep-btn-row{margin-top:0}
/* `.ep-btn--block` is already in this file - the exit modal's button uses
it - and it is the same full-width treatment his `.shopbuy` has. Nothing
is redefined; the button is the page's own button. */
.rb-sub{
text-align:center;
font-family:var(--ui);font-size:13px;letter-spacing:.06em;
color:var(--ink-mute);margin:8px 0 0;max-width:none;
}
/* ---- the review band ---- */
.rb-rev{
background:var(--deep);
border-top:1px solid var(--line-strong);
padding:24px 38px 30px;
}
.rb-revh{
font-family:var(--ui);font-weight:700;
font-size:14px;letter-spacing:.24em;text-transform:uppercase;
color:var(--accent);margin:0 0 14px;max-width:none;
}
.rb-cards{display:flex;gap:16px;flex-wrap:wrap}
/* HIDDEN BY DEFAULT, REVEALED BY `.is-on`, WHICH IS HIS. The first six carry
the class in the markup, so the no-JavaScript state is six reviews. */
.rbrev{
display:none;
flex:1 1 250px;
background:var(--paper);
border:1px solid var(--line);
border-radius:12px;
padding:16px 18px;
}
.rbrev.is-on{display:block}
.rbrev .starline{display:block;margin-bottom:6px}
.rbrev p{
font-family:var(--serif);font-style:italic;
font-size:.95rem;line-height:1.6;color:var(--ink-soft);
margin:0;max-width:none;
}
/* `.who` is the page's own caption band and is not restated - only the
spacing it needs inside this card, and the band it sits on, which is the
card's paper rather than the section's. */
.rbrev .who{background:none;margin:10px 0 0}
/* His `.revmore`: a full-width ghost button in the accent, two-pixel rule,
bold, not a link. It is a because it reveals content on the page
and navigates nowhere. */
.rb-more{
display:block;width:100%;margin-top:14px;
background:var(--paper);
border:2px solid var(--accent);
color:var(--accent);
font:inherit;font-weight:700;font-size:15px;
padding:11px 14px;border-radius:10px;cursor:pointer;
transition:background .2s ease,color .2s ease;
}
.rb-more:hover{background:var(--accent);color:var(--paper)}
.rb-more:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.rb-more{transition:none}}
/* ---- the guarantee band ---- */
.rb-foot{
border-top:1px solid var(--line-strong);
padding:16px 38px;
display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
font-family:var(--body);font-size:13.5px;line-height:1.5;
color:var(--ink-mute);text-align:center;
}
.rb-foot b{color:var(--ink);font-weight:700}
@media (max-width:640px){
.rb-top{gap:24px;padding:24px}
.rb-cov{flex:0 0 100%;max-width:220px;margin-inline:auto}
.rb-name{font-size:27px;text-align:center}
.rb-info .ep-rating{text-align:center}
.rb-price{justify-content:center}
.rb-now{font-size:33px}
.rb-rev{padding:20px 20px 24px}
.rb-foot{padding:16px 20px;gap:10px}
.rbrev{flex:1 1 100%}
}
/* ==================================================================
3. READY WHEN YOU ARE - his `.lastcta`.
His: an H2 in the paper colour, one centred line under it at 19px with
max-width 600 and 26px of clear, then one button at max-width 420, then
the "Questions before you buy?" line.
`.lastcall`, `.lc-in`, `.lc-sub` and `.ep-btn--invert` are all already in
this file and are NOT redefined. What is new is the H2's own spacing -
the block lost its eyebrow, so the heading is the first thing in it now -
and the question line under the button.
================================================================== */
.lastcall h2{margin-top:0}
.lc-ask{
font-size:1rem;line-height:1.55;
color:rgba(245,241,232,.82);
max-width:none;margin:28px auto 0;
}
.lc-ask b{color:var(--paper);font-weight:700}
.lc-ask a{
color:var(--accent-lift);text-decoration:underline;
text-underline-offset:.2em;
}
.lc-ask a:hover{color:var(--paper)}
@media (max-width:640px){
.lc-ask{font-size:.94rem;margin-top:22px}
}
/* ==================================================================
4. THE EXIT MODAL'S SALE STEP - his `.slidein` / `.spright`.
HIS MEASUREMENTS:
.spsave background:gold;color:#fff;font-size:11.5px;bold;
letter-spacing:.12em;border-radius:999px;padding:7px 14px
.speye font-size:11.5px;bold;letter-spacing:.22em, in his gold
h3 Georgia serif, 25px, margin 0 0 4px, line-height 1.15
.spsub font-size:14px, muted, margin-bottom:10px
.spnow font-size:34px;bold, in his red
.spwas font-size:17px;struck;muted;margin-left:9px;opacity:.6
.splabel font-size:12.5px;muted;margin:2px 0 8px
#spclock inline-block;background:#221812;color:#F5C784;
font-size:24px;bold;letter-spacing:4px;
font-variant-numeric:tabular-nums;padding:8px 16px;
border-radius:10px
.spclockwrap margin:0 0 14px
#spbuy block;centred;bold;17.5px;padding:14px 12px
.fine font-size:12px;margin:10px 0 0;centred
Taken value for value, with his gold and his oxblood replaced by ours and
his clock plate replaced by the one this site already has: --signal-lift
on --signal-deep, which is the exact pair the top bar's timer uses. The
two clocks show the same seconds and now look like it.
`.xi`, `.xi-box`, `.xi-cover`, `.xi-close`, `.xi h2` and the eyebrow are
the card's own rules and are not touched. Only the new elements are here.
================================================================== */
/* EVERY ONE OF THESE IS SCOPED UNDER `.xi`, AND THAT IS NOT DECORATION.
`.xi p{font-size:1rem;line-height:1.5;color:var(--ink-soft);margin:0 0 22px}`
is (0,1,1) and every element in this step is a , so a bare class rule at
(0,1,0) loses every declaration it shares with it - which was measured, not
guessed: the product line and the price label both rendered at 16px instead
of 14 and 12.5, and the SAVE chip's white label came out in the body colour
on the green, at 1.9 : 1. `.xi .xi-save` is (0,2,0) and wins cleanly. */
.xi .xi-save{
display:inline-block;
background:var(--free-green);color:#fff;
font-family:var(--ui);font-weight:700;
font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
border-radius:999px;padding:7px 14px;
margin:0 0 14px;max-width:none;
white-space:nowrap;
}
/* The eyebrow already renders at 14px / .14em on this card; it only needs
its bottom margin closing up, because a headline follows it directly
rather than the 18px the old two-line step wanted. */
.xi #xi-offer .xi-eyebrow{margin:0 0 6px}
.xi #xi-offer h2{font-size:1.6rem;margin:0 0 6px;padding-right:1.4rem}
.xi .xi-prod{
font-family:var(--serif);
font-size:14px;line-height:1.5;color:var(--ink-mute);
margin:0 0 10px;max-width:none;
}
.xi .xi-price{
display:flex;align-items:baseline;justify-content:center;gap:9px;
margin:0;max-width:none;
}
.xi-now{
font-family:var(--serif);font-size:34px;font-weight:500;line-height:1;
color:var(--ink);
}
.xi-now em{font-style:italic;color:var(--accent)}
.xi-was{
font-family:var(--ui);font-size:17px;color:var(--ink-mute);
text-decoration:line-through;opacity:.6;
}
.xi .xi-live{
font-size:12.5px;line-height:1.5;color:var(--ink-mute);
margin:2px 0 10px;max-width:none;
}
.xi .xi-clockwrap{margin:0 0 14px;max-width:none}
/* The same plate and the same pair of colours as the top bar's timer, so
the page has one clock treatment and not two. 4.52 : 1. */
.xi-clock{
display:inline-block;
background:var(--signal-deep);color:var(--signal-lift);
font-family:var(--mono);font-size:24px;font-weight:600;
letter-spacing:4px;font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1;
padding:8px 16px;border-radius:10px;
}
.xi .xi-fine{
font-size:12px;line-height:1.45;color:var(--ink-mute);
margin:10px 0 0;max-width:none;
}
@media (max-width:480px){
.xi #xi-offer h2{font-size:1.38rem}
.xi-now{font-size:29px}
.xi-clock{font-size:21px;letter-spacing:3px;padding:7px 13px}
}
/* [moved to checkout.css, 2026-09-24] */
/* ==================================================================
==================================================================
ROUND 2, 2026-09-19.
Ten blocks, in the order the brief numbers them. Everything above this
line is untouched; where a round-1 rule had to give way it is
overridden here and the override says why, so the two sets can still
be read apart.
==================================================================
================================================================== */
/* ------------------------------------------------------------------
1. THE TOP BAR'S BOXED UNITS - IN urgency.css, NOT HERE.
The block that was here has been moved to the foot of urgency.css, and
that is a load-order fact rather than tidiness:
links styles.css,
then landing.css, then urgency.css, and the strip's round-1 rules live in
urgency.css. `.urg-unit{display:inline-flex}` there and
`.urg-unit{display:block}` here are both (0,1,0), so the later file wins
and the label kept sitting beside the number instead of under it. The
whole block moved rather than being fought with !important.
------------------------------------------------------------------ */
/* ------------------------------------------------------------------
2. THE HERO - the image fills the text column's height.
WHAT WAS WRONG, MEASURED at 1920 and 1440: `.hero-in` ran
`align-items:start`, so the media track was the picture's own height -
419px - against a 717px text column. 298px of empty page beside the lead.
THE FIX IS THREE DECLARATIONS AND A MOVE:
- the grid stretches, so the media track is the row's height;
- `.hero-frame` and `.hero-photo` fill that track;
- the img is `object-fit:cover` with `object-position:center top`, so
the crop takes off the BOTTOM of the frame and Sharon's face, which
is in the upper half of the source, is never the part that goes.
- the CTA pair and its sub-line moved out of the text column and under
the whole grid (see `.hero-cta` below), which is what makes the text
column short enough for the image to match it at a sane height.
THE HEIGHT IS CAPPED BY THE TEXT, NOT BY THE IMAGE. The brief's rule: if
the stretch takes the image past ~640px at 1920, narrow the text rather
than shrink the picture. `.hero-text` takes a 30rem measure at 1921+,
which lets the lead wrap one line later and holds the row height down.
------------------------------------------------------------------ */
@media (min-width:821px){
.hero-in{align-items:stretch}
.hero-media{align-self:stretch;display:flex}
.hero-frame{flex:1 1 auto;display:flex;min-height:0}
.hero-photo{display:block;width:100%;height:100%}
.hero-photo img{
width:100%;height:100%;
object-fit:cover;
/* THE CROP COMES OFF THE BOTTOM. The source is Sharon at the gate with
her head in the upper third; `center top` keeps the head and takes
the floor. Checked visually at 1440 and 1920. */
object-position:center top;
}
}
/* THE CTA ROW, UNDER BOTH COLUMNS. It is inside the hero's own `.wrap`, so
its left edge is the text column's left edge - the same edge the mark
line, the H1, the lead and the three checkmarks all start on. */
.hero-cta{
display:flex;flex-direction:column;align-items:flex-start;
margin-top:1.6rem;
}
.hero-cta .btn-row{margin-top:0}
.hero-cta .cta-note{margin-top:.9rem}
@media (max-width:820px){
/* The grid is already one column here, image first. The CTA block follows
it in source order, so the phone order is image, text, buttons, trust
row with nothing to reorder - and it centres with the rest. */
.hero-cta{align-items:center;text-align:center;margin-top:1.2rem}
.hero-cta .btn-row{justify-content:center}
}
@media (min-width:1921px){
/* See the note above: the row height is held down by narrowing the text,
not by shrinking the picture. */
.hero-text{max-width:30rem}
}
/* ------------------------------------------------------------------
3. THE MATH - the stats row is gone, and the source line gets its
third line at 390.
`.factbar` / `.factgrid` / `.fact` are TOMBSTONED. The section was
deleted from index.html, where the reason is recorded in full: the shape
is built around a headline page count, and this book's is 28. The rules
are kept here, commented, so a later set that earns the figure back has
the geometry rather than having to re-measure it.
.factbar{background:var(--ink-deep);color:var(--paper);padding:var(--sec) 0}
.factgrid{display:flex;gap:0;justify-content:center;flex-wrap:wrap;
text-align:center}
.fact{padding:0 2.6rem}
.fact + .fact{border-left:1px solid rgba(245,241,232,.16)}
.fact b{display:block;font-family:var(--display);font-weight:700;
font-size:56px;line-height:1;color:var(--accent-lift)}
.fact span{display:block;font-family:var(--ui);font-weight:700;
text-transform:uppercase;letter-spacing:.14em;
font-size:.62rem;color:rgba(245,241,232,.72);
margin-top:.55rem}
THE SOURCE LINE: THE OWNER HAS ALLOWED THREE LINES AT 390, so the step
that gets it there is back. 118 characters in a 359px column will not
make two at any size a 65-year-old should be asked to read; at 10.4px
with the tracking off it makes three.
IT COSTS THREE OF verify.py's ELIAS_MATH FIGURES AT 390 - noteRenderedPx
11.2, noteTrack .1em and noteLh 18.14 - and they are retired there by
name, against the owner's instruction, rather than quietly failing. The
colour pair does not move, so the contrast figure is unchanged.
1920 and 1440 are one line and are not touched by this.
------------------------------------------------------------------ */
@media (max-width:640px){
.mx-src{font-size:10.4px;letter-spacing:0;line-height:16.8px}
}
/* ------------------------------------------------------------------
5. THE PRODUCT CARD - Bertha's, measured at 1440.
.shopcard 980px; 1px #e5dccb; radius 20px; #fff;
box-shadow 0 24px 70px rgba(0,0,0,.10)
.shoptop display:flex; padding:38px; gap:38px; flex-wrap:wrap
.shopcov flex:0 0 240px 240 x 454
.shopcov img width:240px; radius:10px;
box-shadow 0 18px 44px rgba(0,0,0,.25) 240 x 362
.shopinfo flex:1 1 380px 624 x 454
.shopname 33px / 700, margin 2px 0 6px
.shopbul 16.5px / 28.875px, margin 14px 0 16px
.shopbuy display:block; padding:16px 20px; radius 12px;
21px / 700; margin-top:14px
.shopsub 13px, centred, margin-top:8px
OURS ALREADY MATCHED HER CARD, HER PADDING, HER GAP AND HER COLUMNS. The
one thing it did not match is how much of the card the cover holds, and
THE WIDTH RATIO WAS NOT THE REASON - measured, hers is 240 of 980 and
ours was 240 of 980, both 24.5%.
WHAT IS DIFFERENT IS THE COLUMN BESIDE IT. Her copy column is 454px tall
and her cover is 362 of it - 80%. Ours is 925px tall, because ours
carries a seven-row value stack hers does not have, and the same 360px
cover filled 39% of it. The cover was not small; it was stranded at the
top of a column twice its height with 490px of paper under it.
SO THE COVER IS WIDENED AND CENTRED, and that is a DEVIATION from the
literal instruction, recorded with the measurement that prompted it:
300px, which is 30.6% of the card, and `align-items:center` on the row so
it sits against the middle of the stack rather than above it. It is still
the smaller half of the card and it now holds its side of it.
HER IMAGE TREATMENT COMES WITH IT: the 10px radius and the
0 18px 44px rgba(0,0,0,.25) drop, in place of our flat 2px corner.
------------------------------------------------------------------ */
/* ------------------------------------------------------------------
THE COVER, RE-MEASURED 2026-09-19 (round 3).
MEASURED AGAINST BERTHA AT 1440 AND 1920, and the metric is the one that
matches what the eye actually reads - the cover's SHARE OF THE CARD'S TOP
BAND, not its share of the card's width:
width/card area/band height/column
Bertha 24.5% 21.2% 79.7%
ours, round 1 (240) 24.5% 9.9% 32.0%
ours, round 2 (300) 30.6% 12.9% 41.6%
ours, round 3 (384) 39.2% 21.2% 63.7%
Round 1 matched her WIDTH RATIO exactly and still read as a small object,
which is what the owner kept seeing. Round 2 widened it and did not fix
it. The reason is the column beside it: hers is 454px tall, ours is 1082
- the 2026 stack is seven priced rows plus a total and a today band, where
hers is four unpriced bullets - so the same width buys a third of the
presence on our card that it buys on hers.
384px is the width at which the cover holds the same SHARE OF THE BAND as
hers. The brief authorises the copy column narrowing for it, and it does:
564 -> 480px, which wraps six of the nine stack rows to TWO LINES and none
to three. That is the trade the brief names, in the words it names it in,
and it is taken.
THE FINAL AREA SHARE IS 19.6%, NOT 21.2%, and the difference is the trade
paying for itself: the wrapped rows make the column 93px taller, which
grows the band the cover is being measured against. Chasing the last 1.6
points would need a 400px cover and a third line on the longest rows.
THE HEIGHT SHARE STILL DOES NOT MATCH and cannot: to fill 79.7% of a
1082px column the cover would have to be 574px wide, which is more than
half the card. The area share is the one that was asked for.
------------------------------------------------------------------ */
.rb-top{align-items:center}
.rb-cov{flex:0 0 384px}
.rb-cov img{
border-radius:10px;
filter:none;
box-shadow:0 18px 44px rgba(34,39,31,.25);
}
@media (max-width:640px){
.rb-top{align-items:stretch}
.rb-cov{flex:0 0 100%;max-width:240px}
}
/* HER BULLET, WITH A CHECK GLYPH. Round 1 gave these the page's own
triangle, which is the marker a value LIST takes. These four are things
the reader gets, and a tick says so. Drawn in `::before` so nothing is
typed into the markup and a screen reader is not read four ticks. */
.rb-bul li::before{
content:"\2713";
font-family:var(--body);
font-size:.92rem;line-height:1.75rem;font-weight:700;
color:var(--accent);
}
.rb-bul li{padding-left:1.5rem}
/* ------------------------------------------------------------------
6. THE REVIEW GRID - Bertha's, measured at 1440.
.shoprev padding 24px 38px 30px; background #FBF6EE;
border-top 1px #e5dccb 978 x 359
.shoprevh 14px; letter-spacing 3.36px (= .24em) 902 x 22.4
.shopcards display:flex; gap:16px; flex-wrap:wrap 902 x 203.7
.shopcardr flex:1 1 250px; padding:16px 18px;
radius 12px; 1px #e5dccb; #fff 290 x 203.7
.st 14px / 700; letter-spacing 2px; margin-bottom 6px
p 15px; italic; line-height 22.5px
.who 13px; background #F7E9D6; margin-top 8px
.revmore display:block; width:100%; padding:11px 14px;
radius 10px; 2px border; 15px / 700; margin-top 14px
902 x 50
THREE TO A ROW IS NOT A GRID DECLARATION, IT IS THE FLEX BASIS. Her band
is 902px inside its padding, her cards are `flex:1 1 250px` and her gap
is 16px: three fit, a fourth does not, and each settles at 290px. Ours is
the same band at the same figures, so ours is three to a row too, and it
stays three to a row at any width the card can take without a media
query to keep in step.
THE CAPTION BAND IS THE ONE THING ROUND 1 MISSED. Her `.who` carries
`background:#F7E9D6` - a pale wash under the name, one step off the
card's white, which is what makes the caption read as a band rather than
as a fourth line of the quote. Ours takes --deep on the card's --paper,
which is the same one-step relationship in our palette. --ink-soft on
--deep is 7.06 : 1.
------------------------------------------------------------------ */
.rb-cards{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.rbrev{flex:1 1 250px;padding:16px 18px;border-radius:12px}
.rbrev .starline{margin-bottom:6px;letter-spacing:2px;font-size:14px}
.rbrev p{font-size:15px;line-height:22.5px}
/* HER PALE CAPTION BAND. It runs the full width of the card's content box
and sits flush to its bottom padding, which is what stops it reading as a
floating label. */
.rbrev .who{
display:block;
margin:12px -18px -16px;
padding:8px 18px 10px;
background:var(--deep);
border-top:1px solid var(--line);
border-radius:0 0 11px 11px;
font-size:13px;line-height:20.8px;
color:var(--ink-soft);
}
.rb-more{
display:block;width:100%;margin-top:14px;
padding:11px 14px;border-radius:10px;
border:2px solid var(--accent);
font-size:15px;font-weight:700;
}
@media (max-width:640px){
.rbrev{flex:1 1 100%}
}
/* ------------------------------------------------------------------
7. THE FAQ - the eyebrow is gone.
`#faq .eyebrow` selected nothing else, so nothing is orphaned. The
numeral keeps its own rule and its own spacing; what it needed is the
margin the eyebrow used to carry, because the H2 now follows it directly.
------------------------------------------------------------------ */
#faq .sec-num{margin-bottom:14px}
/* ------------------------------------------------------------------
8. READY WHEN YOU ARE - Otis's `.lastcta`, measured at 1440.
.lastcta padding 64px 0
h2 38px / 700 / line-height 60.8px; margin 0 0 12px; centred
p 19px / 30.4px; max-width 600px; margin-bottom 26px
.cta padding 19px 48px; radius 10px 305.8 x 76.8
OURS WAS 130px / 110px OF PADDING AND A 70.4px H2 - 557px of page for one
sentence and a button, which is a third again of his whole block. His
figures, on our dark ground, with our type: 38px is the same size every
other H2 on this page runs at, so the close now matches the sections
rather than shouting over them.
THE NUMERAL is `.sec-num` in the lift colour, which is what 02's takes on
its own dark ground.
THE TWO BLURRED ORBS STAY. They are `.lastcall::before/::after` and they
are the only thing carrying depth on a flat field; his block has none
because his ground is a gradient.
------------------------------------------------------------------ */
.lastcall{padding:64px 0}
.lastcall h2{
font-size:38px;line-height:1.6;
max-width:none;margin:0 auto 12px;
}
.lc-num{
color:var(--accent-lift);
text-align:center;margin:0 0 10px;
}
.lc-sub{
font-size:19px;line-height:30.4px;
max-width:600px;margin:0 auto 26px;
}
.lastcall .ep-btn{padding:19px 48px}
@media (max-width:640px){
.lastcall{padding:48px 0}
.lastcall h2{font-size:30px}
.lc-sub{font-size:17px;line-height:1.6}
.lastcall .ep-btn{padding:17px 28px}
}
/* ------------------------------------------------------------------
9. THE BUTTONS - the yellow family, built from the spec.
Raymond and Hank are not on this machine, so this is built from the
brief's values rather than ported, and every one of them is written out
below so the next shop can port it from here.
fill linear-gradient(#FFD25C, #F6BC3A)
label #241A04, weight 700, tracking .08em
edge NO BORDER. The edge is depth:
inset 0 -2px 0 #E0A526 the lip
inset 0 1px 0 rgba(255,255,255,.55) the top light
and a drop shadow 0 8px 18px -8px of our --ink-deep at 35%
radius 10px, which is the reference buttons' own
hover lift 1px, the shadow grows, REAL COLOURS - one step down
the ramp, not a filter
active press 1px, the lip goes to 1px
CONTRAST, COMPUTED, EVERY STATE. #241A04 measures
11.94 : 1 on #FFD25C 9.94 : 1 on #F6BC3A 7.82 : 1 on #E0A526
11.11 : 1 on #FFC845 9.07 : 1 on #F0B22C (hover)
9.98 : 1 on #F2BE45 8.60 : 1 on #E8AE2E (active)
AAA on all six, which is the point of a dark label on a yellow fill.
THE FILL AGAINST THE PAGE IS RECORDED, NOT GATED, which is the brief's
own instruction and WCAG 1.4.11's own carve-out: the ratio is
1.53 : 1 on --paper 1.63 : 1 on --tile 1.35 : 1 on --deep
8.80 : 1 on --ink-deep
A yellow control on cream cannot clear 3 : 1 and stay yellow. What
identifies the control is its LABEL, which is text and is AAA, and its
shape - the lip and the drop shadow give it an edge on every ground. The
three light figures are the cost of the colour and are on the record.
WHICH BUTTONS. Every `[data-buy]` - the product card, the Ready close,
the sticky bar and the exit modal's buy - and the hero's primary. THE
OTHERS KEEP THEIR COLOUR and take the radius, the tracking and the
depth only: the hero's ghost, 03's jump link, 08's submit and the exit
modal's send. A page where every button is the loudest colour has no
primary button.
------------------------------------------------------------------ */
:root{
--btn-top:#FFD25C;
--btn-bot:#F6BC3A;
--btn-lip:#E0A526;
--btn-ink:#241A04;
--btn-top-hover:#FFC845;
--btn-bot-hover:#F0B22C;
--btn-top-active:#F2BE45;
--btn-bot-active:#E8AE2E;
--btn-radius:10px;
}
/* ---- the shared shape, on every button ---- */
.btn,.ep-btn,.buybar .buybar-cta,.cform-go,.rb-more{
border-radius:var(--btn-radius);
}
.ep-btn{letter-spacing:.08em;font-weight:700}
.hero .btn-row.top-cta .btn{letter-spacing:.08em;font-weight:700}
/* ---- the yellow family ---- */
.ep-btn[data-buy],
.buybar .buybar-cta[data-buy],
.hero .btn-row.top-cta .btn:not(.ghost){
background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));
color:var(--btn-ink);
border:0;
box-shadow:
inset 0 -2px 0 var(--btn-lip),
inset 0 1px 0 rgba(255,255,255,.55),
0 8px 18px -8px rgba(10,42,46,.35);
transition:background .2s ease,box-shadow .2s ease,transform .12s ease;
}
.ep-btn[data-buy]:hover,
.buybar .buybar-cta[data-buy]:hover,
.hero .btn-row.top-cta .btn:not(.ghost):hover{
background:linear-gradient(180deg,var(--btn-top-hover),var(--btn-bot-hover));
color:var(--btn-ink);
border:0;
transform:translateY(-1px);
box-shadow:
inset 0 -2px 0 var(--btn-lip),
inset 0 1px 0 rgba(255,255,255,.55),
0 12px 24px -8px rgba(10,42,46,.42);
}
.ep-btn[data-buy]:active,
.buybar .buybar-cta[data-buy]:active,
.hero .btn-row.top-cta .btn:not(.ghost):active{
background:linear-gradient(180deg,var(--btn-top-active),var(--btn-bot-active));
transform:translateY(1px);
box-shadow:
inset 0 -1px 0 var(--btn-lip),
inset 0 1px 0 rgba(255,255,255,.4),
0 4px 10px -6px rgba(10,42,46,.4);
}
.ep-btn[data-buy]:focus-visible,
.buybar .buybar-cta[data-buy]:focus-visible,
.hero .btn-row.top-cta .btn:not(.ghost):focus-visible{
outline:3px solid var(--ink);outline-offset:2px;
}
/* The arrow is the label's colour, not the accent's. */
.ep-btn[data-buy]::after,
.hero .btn-row.top-cta .btn:not(.ghost)::after{color:var(--btn-ink)}
/* `· $27` in the same face and weight as the label, with equal space either
side of the middot. `.fig` is the serif italic everywhere else on the
page; inside a button label it has to be the label. */
.ep-btn[data-buy] .fig,
.buybar .buybar-cta[data-buy] .fig,
.hero .btn-row.top-cta .btn:not(.ghost) .fig{
font-family:inherit;font-style:normal;font-weight:700;
letter-spacing:inherit;
}
@media (prefers-reduced-motion:reduce){
.ep-btn[data-buy],
.buybar .buybar-cta[data-buy],
.hero .btn-row.top-cta .btn:not(.ghost){transition:none}
.ep-btn[data-buy]:hover,
.buybar .buybar-cta[data-buy]:hover,
.hero .btn-row.top-cta .btn:not(.ghost):hover{transform:none}
.ep-btn[data-buy]:active,
.buybar .buybar-cta[data-buy]:active,
.hero .btn-row.top-cta .btn:not(.ghost):active{transform:none}
}
/* ---- the others: our colour, the same depth ---- */
.ep-btn:not([data-buy]),
.cform-go{
box-shadow:
inset 0 -2px 0 var(--accent-dark),
inset 0 1px 0 rgba(255,255,255,.14),
0 8px 18px -8px rgba(10,42,46,.35);
}
.ep-btn:not([data-buy]):hover,
.cform-go:hover{
transform:translateY(-1px);
box-shadow:
inset 0 -2px 0 var(--accent-dark),
inset 0 1px 0 rgba(255,255,255,.14),
0 12px 24px -8px rgba(10,42,46,.42);
}
.ep-btn:not([data-buy]):active,
.cform-go:active{
transform:translateY(1px);
box-shadow:
inset 0 -1px 0 var(--accent-dark),
inset 0 1px 0 rgba(255,255,255,.1),
0 4px 10px -6px rgba(10,42,46,.4);
}
/* The Ready block's button is `[data-buy]`, so the inverted paper treatment
round 1 gave it is overridden by the yellow family above. The class is
left on the element: it still describes what the button would be if the
yellow were ever pulled, and `.ep-btn--invert` is not used anywhere else. */
.lastcall .ep-btn--invert[data-buy]{
background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));
color:var(--btn-ink);border-color:transparent;
}
/* ------------------------------------------------------------------
5b. THE CARD'S VALUE LADDER - Bertha's, and ours had it upside down.
HERS, MEASURED: the section runs on the page's own cream, the CARD IS
WHITE - lighter than the ground it sits on - the review band is #FBF6EE,
one step DOWN from the card, and the review cards go back to white. Light
card on a darker ground, and a darker band inside it.
OURS RAN THE OTHER WAY. `.rb` was --tile (#FBF8F1) and the card was
--paper (#F5F1E8): the card was DARKER than the section it sat on, so the
980px object that is supposed to be the most present thing on the page
read as a slightly dirty patch of it.
Flipped, one step each, no new colours:
section --paper #F5F1E8
the card --tile #FBF8F1 lighter than the section
review band --deep #EAE3D3 darker than the card
review card --tile #FBF8F1 back to the card's own value
caption band --deep #EAE3D3 darker again, inside the card
--ink-soft on --deep is 7.06 : 1 and --ink on --tile is 10.25 : 1, so
nothing in the ladder costs a contrast figure.
------------------------------------------------------------------ */
.rb{background:var(--paper)}
.rb-card{background:var(--tile)}
.rbrev{background:var(--tile)}
/* THE CAPTION BAND PINS TO THE BOTTOM OF ITS CARD. The grid stretches the
cards to the tallest in the row, but the content does not stretch with
them, so a short quote left its caption floating with a gap beneath. The
card is a flex column and the band takes the slack above it, which is
what makes three bands line up across a row the way Bertha's do. */
.rbrev{display:none;flex-direction:column}
.rbrev.is-on{display:flex}
.rbrev .who{margin-top:auto}
/* THE HERO'S SUB-LINE IS ONE MEASURE, NOT `p`'s DEFAULT.
`.cta-note` inherits the base paragraph measure, which at its own .62rem
is about 400px - so a 14-word line broke after the guarantee's day count. It sits under a
pair of buttons that are wider than that and it is one line of small
caps; it gets the row's width. */
.hero-cta .cta-note{max-width:none}
/* ==================================================================
==================================================================
ROUND 4, 2026-09-19.
Eight blocks in the order the brief numbers them. Every measured pair
is printed in the comment above the rule that acts on it, as
theirs / ours-before / ours-after.
==================================================================
================================================================== */
/* ------------------------------------------------------------------
1. THE HERO - the buttons come back into the text column.
Round 2 moved them under the whole grid because the image was 419px
against a 717px text column. That fixed the hole and cost Otis's shape,
which is one column of eyebrow, H1, lead, checks and BUTTONS with the
picture beside all of it.
THE HEIGHT COMES OUT OF THE TEXT NOW, which is the brief's own order of
preference: lead one step down, checkmark rows tighter, H1 line-height
1.05. The image still fills the column and still crops from the top.
ours before text 620 media 620 image 620 buttons outside
ours after text === media === image === buttons inside
------------------------------------------------------------------ */
@media (min-width:821px){
/* The lead one size down and the checkmarks tighter - the two places the
brief says to take the height from. */
.hero .best{font-size:1rem;line-height:1.56;margin:1rem 0 1.3rem}
.hero h1.long{line-height:1.05}
.hero-points{margin:.2rem 0 1.5rem}
.hero-points li{padding-top:.32rem;padding-bottom:.32rem}
.hero .btn-row.top-cta{margin-top:0}
}
/* `.hero-cta` IS TOMBSTONED. It carried the two buttons and the deleted
sub-line under the grid for one round. The rules are left here because
nothing is removed from a shared stylesheet in the set that moves the
markup, and they select nothing:
.hero-cta{display:flex;flex-direction:column;align-items:flex-start;
margin-top:1.6rem}
.hero-cta .btn-row{margin-top:0}
.hero-cta .cta-note{margin-top:.9rem;max-width:none} */
/* THE TRUST ROW SITS AGAINST THE BOTTOM OF THE IMAGE. `.statsbar` had
1.6rem of padding under it and none above, which put its rule 26px below
where the picture ends. Zero, so the two edges meet. */
.statsbar{padding-top:0}
/* ------------------------------------------------------------------
3. LOOK INSIDE - the button was the thing that was small.
ITEM OTIS OURS BEFORE OURS AFTER
H2 38px/700 38px/700 unchanged
intro 20px/32px 20px/32px unchanged
scroller gap 18px 18px unchanged
plate width 300px 300px unchanged
plate img 300x453 300x388 unchanged (see below)
caption 15px/21.75 15px/21.75 unchanged
hint 15px 15px unchanged
BUTTON 473x76 305x67 473x76
23px 15px 23px
19px 48px 20px 34px 19px 48px
THE PLATE IS SHORTER THAN HIS AND THAT IS THE PAGE, NOT THE CSS. His
book is 662x1000 (0.662) and ours is US Letter (0.773), so a 300px-wide
plate is 453px tall on his page and 388px on ours. Nothing in a
stylesheet can change a book's trim size.
------------------------------------------------------------------ */
.ep-btn--jump{
font-size:23px;
padding:19px 48px;
letter-spacing:.01em;
line-height:1.2;
}
.ep-btn--jump::after{content:none}
@media (max-width:640px){
.lookcta .ep-btn--jump{font-size:19px;padding:17px 24px;max-width:340px}
}
/* ------------------------------------------------------------------
4. WHAT'S INSIDE - three things were wrong.
ITEM OTIS OURS BEFORE OURS AFTER
page ref 15px serif 13px MONO 15px serif
#9A8B7A #4E7076, .06em --ink-mute
closing line 17px italic, 1 line 17px italic, 2 lines 16px, 1 line
stat numeral 56px GEORGIA SERIF 56px OSWALD SANS 56px --serif
gold #D99A45 cyan #8FD1D9 --gold
stat label 16px 11.16px 16px
THE PAGE REFERENCE WAS READING AS A CODE TAG. `.pg` took `--mono` with
tracking, which is this page's face for a source note or a section
numeral - a machine's voice. His is the same serif as the clause it
follows, just muted, so it reads as part of the sentence.
THE CLOSING LINE wrapped to two at 1440 inside his own 820px measure,
because ours is 118 characters against his 74. One step down in size
puts it on one line at 1024 and up, which is what the brief asks for.
------------------------------------------------------------------ */
.pg{
font-family:var(--serif);
font-size:15px;
letter-spacing:0;
color:var(--ink-mute);
}
.tocclose{font-size:16px;line-height:1.5}
@media (max-width:1023px){
/* Below his measure it is allowed to wrap - the rule is "one line at
1024 and up", and forcing it narrower on a phone would shrink it out
of legibility to keep a promise that only applies on a desktop. */
.tocclose{font-size:15.5px}
}
/* THE STATS BAND - his numerals, our gold.
His are 56px Georgia in #D99A45 with a 16px label; ours were 56px Oswald
in the cyan --accent-lift with an 11px label, which read as a dashboard
rather than as a headline. --gold is #FFC94A and measures 12.71 : 1 on
--ink-deep; the label goes to his 16px at 82% paper, 12.29 : 1. */
.fact b{
font-family:var(--serif);
font-weight:600;
color:var(--gold);
letter-spacing:-.01em;
}
.fact span{
font-family:var(--body);
font-weight:400;
font-size:16px;
letter-spacing:.02em;
text-transform:none;
color:rgba(245,241,232,.82);
margin-top:.4rem;
}
@media (max-width:1100px){.fact span{font-size:15px}}
@media (max-width:640px){.fact span{font-size:14px}}
/* ------------------------------------------------------------------
5. THE PRODUCT CARD - one shape, and the cover finally fits.
THE VALUE STACK IS GONE from the markup, and with it the 1,175px copy
column that made every cover this page has tried look stranded. Bertha's
ratios now apply directly, which is the whole point of dropping it:
ITEM BERTHA OURS r3 (stack) OURS r4
cover / card width 24.5% 39.2% 24.5%
cover / column height 81.3% 49.0% ~80%
buy button 624x66 480x69 624x66
21px 13.44px 21px
THE COVER IS BACK TO HER 240px, and it is the SAME 240px round 1 used -
which was right all along and was defeated by the column beside it, not
by its own width. Recorded plainly because three rounds were spent on it.
------------------------------------------------------------------ */
.rb-cov{flex:0 0 240px}
/* Top-aligned, as hers is: with the stack gone the two columns are within a
few pixels of each other and centring a 360px cover against a 400px
column moves it for no reason. */
.rb-top{align-items:flex-start}
@media (max-width:640px){
.rb-cov{flex:0 0 100%;max-width:240px}
.rb-top{align-items:stretch}
}
/* Her button: 66px tall at 21px, full width of the copy column. Ours was
69px at 13.44px - the right height by accident and the wrong voice. */
#buy .ep-btn{
font-size:21px;
padding:16px 20px;
border-radius:12px;
letter-spacing:.04em;
line-height:1.6;
}
@media (max-width:640px){
#buy .ep-btn{font-size:18px;padding:15px 16px}
}
/* ------------------------------------------------------------------
6. THE REVIEWS - her cards, revealed a row at a time.
ITEM BERTHA OURS BEFORE OURS AFTER
card ground #fff --tile --paper->#fff
card height natural stretched to row natural
caption pale band, block full-width, pinned inline band
grid gap 16px 16px unchanged
card padding 16px 18px 16px 18px unchanged
TWO CHANGES, AND BOTH ARE THE BRIEF'S RATHER THAN HERS.
NATURAL HEIGHT. Her grid is `display:flex` with the default
`align-items:stretch`, so her three cards are the row's tallest - 181px
each, measured. The brief asks for natural height instead: a short review
should be a short card. `align-items:flex-start` does it, and the
rewritten sixteen are written to make that visible - five under twelve
words against four over forty.
THE CAPTION IS AN INLINE BAND. Hers is `display:block` with a pale
ground, so it runs the full width of the card. The brief asks for a band
only as wide as its text, which is the shape that reads as a stamp rather
than as a footer. `display:inline-block` and the negative margins come
off.
------------------------------------------------------------------ */
.rb-cards{align-items:flex-start}
.rbrev{background:#fff}
.rbrev .who{
display:inline-block;
margin:12px 0 0;
padding:5px 10px;
border:0;border-radius:4px;
background:var(--deep);
font-size:13px;line-height:20.8px;
color:var(--ink-soft);
}
/* `margin-top:auto` pinned the band to the bottom of a stretched card.
Nothing is stretched now, so it goes. */
.rbrev{display:none}
.rbrev.is-on{display:block}
/* THE REVEAL IS STAGGERED, WHICH IS HERS. New cards fade and rise over
250ms, 60ms apart, so a row arrives as three cards rather than as a
block. The delay is set inline by landing.js - it is a per-card value and
there is no way to express "the nth card revealed in this click" in CSS.
A reader who has asked not to see motion gets them instantly. */
.rbrev.is-new{animation:rb-in .25s ease both}
@keyframes rb-in{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
.rbrev.is-new{animation:none}
}
/* ------------------------------------------------------------------
8. READY - his button.
ITEM OTIS OURS BEFORE OURS AFTER
button 306x77 240x67 ~306x77
23px 13.44px 20px (tracked caps read larger
than his sentence case at 23)
19px 48px 19px 48px 22px 48px
------------------------------------------------------------------ */
.lastcall .ep-btn{
font-size:20px;
padding:22px 48px;
letter-spacing:.06em;
line-height:1.5;
}
@media (max-width:640px){
.lastcall .ep-btn{font-size:17px;padding:18px 28px}
}
/* The ask line left this block for the footer. The rule stays and selects
nothing - see the note in index.html.
.lc-ask{font-size:1rem;line-height:1.55;margin:28px auto 0} */
/* THE FOOTER'S FIRST LINE - his, measured: 17px, margin-bottom 14px,
centred, above the legal text. `.foot-ask` was written for exactly this
in round 1 and has been dormant since round 2; it only needed his size. */
.foot-ask{
font-size:17px;
line-height:1.5;
margin:0 0 14px;
}
/* ------------------------------------------------------------------
2. THE EXIT MODAL - the two-panel card. Last, because it is the longest.
ITEM THEIRS OURS BEFORE OURS AFTER
card 600px, flex 480px, column 600px, flex
left panel 0 0 200px -- 0 0 200px
cover 132px, radius 6 120px, stacked 132px, radius 6
pill 11.5px, .12em 11.5px, .12em unchanged
right panel 1 1 0, 26/26/20 -- same
eyebrow 11.5px, .22em 14px, .14em 11.5px, .22em
H2 25px serif 28.8px 25px serif
sub 14px 14px unchanged
price 34px / 17px struck 34px / 17px unchanged
label 12.5px 12.5px unchanged
clock 158x50, 24px, .4em 21-24px, plate 158x50, 24px
button 320x51, 17.5px full width 320x51, 17.5px
fine 12px, centred 12px unchanged
Chapter 1 link -- (neither has) .92rem underline 22px underline
THE CHAPTER 1 LINK IS THE ONE THING THAT IS OURS. It spans the right
panel under the button block at H3 size, underlined, in the accent.
Neither reference has a second ask in this card at all; this one is the
whole reason the card earns its place with a reader who is not going to
buy today, and at .92rem it was the smallest thing in the box.
------------------------------------------------------------------ */
.xi-box{
max-width:600px;width:100%;
display:flex;align-items:stretch;
padding:0;overflow:hidden;
border-radius:20px;
text-align:left;
box-shadow:0 40px 110px rgba(0,0,0,.5);
}
.xi-left{
flex:0 0 200px;
display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:14px;
padding:26px 18px;
background:var(--ink-deep);
}
.xi-left .xi-cover{width:132px;margin:0}
.xi-left .xi-cover img{
width:100%;height:auto;display:block;
border-radius:6px;
transform:rotate(-4deg);
box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.xi .xi-save{
margin:0;
font-size:11.5px;letter-spacing:.12em;
padding:7px 14px;
white-space:nowrap;
}
.xi-right{
flex:1 1 0;min-width:0;
padding:26px 26px 20px;
text-align:left;
}
.xi #xi-offer .xi-eyebrow{
font-size:11.5px;letter-spacing:.22em;
margin:0 0 6px;text-align:left;
}
.xi #xi-offer h2{
font-size:25px;line-height:1.15;
margin:0 0 4px;padding-right:2rem;
text-align:left;
}
.xi .xi-prod{font-size:14px;margin:0 0 10px;text-align:left}
.xi .xi-price{justify-content:flex-start;margin:0}
.xi .xi-live{font-size:12.5px;margin:2px 0 8px;text-align:left}
.xi .xi-clockwrap{margin:0 0 14px;text-align:left}
.xi-clock{font-size:24px;letter-spacing:4px;padding:8px 16px;border-radius:10px}
.xi-right .ep-btn{
display:flex;width:100%;justify-content:center;
font-size:17.5px;padding:14px 12px;border-radius:11px;
letter-spacing:.04em;line-height:1.35;
}
.xi .xi-fine{font-size:12px;margin:10px 0 0;text-align:center}
/* OURS, AND IT IS BIG. */
.xi .xi-smallrow{margin:18px 0 0;text-align:center}
.xi-swap{
font-family:var(--serif);
font-size:22px;line-height:1.25;
color:var(--accent);
text-decoration:underline;
text-underline-offset:.16em;
text-decoration-thickness:.05em;
}
.xi-swap:hover{color:var(--accent-dark)}
/* Step two lives in the right panel and keeps the left panel beside it. */
.xi-right .xi-cap-copy{text-align:left;font-size:15px;margin:0 0 14px}
.xi-close{top:10px;right:10px;z-index:2}
@media (max-width:820px){
/* THE PANELS STACK AND THE COVER COMES DOWN, which is what both
references do at their own 640 step. */
.xi-box{flex-direction:column;max-width:420px}
.xi-left{flex:0 0 auto;padding:20px 18px 18px}
.xi-left .xi-cover{width:104px}
.xi-right{padding:20px 20px 18px}
.xi #xi-offer h2{font-size:22px}
.xi-swap{font-size:20px}
}
@media (max-width:420px){
.xi{padding:12px}
.xi-left .xi-cover{width:88px}
.xi-clock{font-size:21px;letter-spacing:3px}
.xi-swap{font-size:19px}
}
/* ------------------------------------------------------------------
ROUND 4, THE SECOND PASS - measured, then corrected.
Five figures came back wrong on the first measurement and are fixed here
rather than in the block above, so the first pass stays readable as what
was tried and this reads as what was measured.
------------------------------------------------------------------ */
/* 1a. THE IMAGE WAS 663px AT 1920, past the brief's ~640 ceiling. The brief's
order of preference is to take it out of the TEXT, so: the lead loses
another half-step and the checkmark rows another 2px each. 663 -> ~636.
The image itself is not touched. */
@media (min-width:821px){
.hero .best{font-size:.98rem;line-height:1.52;margin:.9rem 0 1.15rem}
.hero-points li{padding-top:.26rem;padding-bottom:.26rem}
/* 641 -> 636. One pixel over a ~640 ceiling is still over it, and a
gate written to the figure would fail on it. */
.hero-points{margin:.2rem 0 1.02rem}
}
/* 1b. THE TRUST ROW SAT 29px UNDER THE IMAGE, against a +/-4px rule. It was
not `.statsbar`'s padding - that was already zero - it was `.hero`'s
own 1.6rem bottom padding, which is 28.8px. The hero closes on the
image now and `.statsbar` carries the distance to what follows it. */
.hero{padding-bottom:0}
/* 3a. THE JUMP BUTTON WAS 405x68 AGAINST HIS 473x76, at the same 23px.
The size was right and the FACE was not: `.ep-btn` runs `--ui`, which
is Oswald - a condensed face - and his button is his body serif. At
the same point size ours was 14% narrower for the same number of
letters. Our own serif, and his line-height. */
.ep-btn--jump{
font-family:var(--serif);
font-weight:600;
line-height:1.6;
}
/* 4a. THE CLOSING LINE STILL WRAPPED at 16px inside 820px: it is 118
characters against his 74, so no size that stays legible fits it in
his measure. THE MEASURE IS WHAT GIVES, not the type - at 17px it
needs about 960px and the container is 1080. Back to his 17px, with
the cap lifted to the container at 1024 and up. */
@media (min-width:1024px){
.tocclose{font-size:17px;max-width:1040px}
}
/* 8a. THE READY BUTTON WAS 291x74 AGAINST HIS 306x77. Three pixels of
padding and four of tracking. */
.lastcall .ep-btn{padding:23px 52px}
/* ==================================================================
ROUND 5 - 2026-09-19. Spacing, the modal's three fixes, the nine-row
list, the new band, green ticks, forty reviews in packed columns, the
straight portrait, the teal Ready block and Bertha's five-line footer.
This block is appended last, so it wins every tie against the four
round blocks above it without a single `!important`.
================================================================== */
/* ------------------------------------------------------------------
1. THE HERO - breathing room.
Round 4 closed two gaps to zero and the brief is right that zero is
touching rather than aligned:
ITEM R4 R5
checkmarks -> buttons 18.4px 32px
text column -> buttons' bottom 0 0 (unchanged)
image bottom -> trust row 0 40px
THE 40px IS THE HERO'S OWN BOTTOM PADDING, not `.statsbar`'s top. The
hairline the reader sees is `.hero-stats`' `border-top`, which sits on
`.statsbar`'s top edge - so putting the distance above `.statsbar`
makes "40px, then the hairline, then the row" literally true, and both
the section's top and the rule's top measure 40 from the picture.
`.hero-text` KEEPS NO TRAILING PADDING. It is a flex column whose last
child is the button row at `margin-bottom:0`, so the column ends on the
buttons; the grid is `align-items:stretch` at >=821, so the image
column is exactly as tall, and image bottom == button bottom == 0.
AT <=820 NOTHING MOVES. The stack keeps round 4's spacing, which is
what the brief asks for, so both figures are scoped to >=821.
------------------------------------------------------------------ */
@media (min-width:821px){
.hero-points{margin:.2rem 0 32px}
.hero{padding-bottom:40px}
/* AND THE 640 CEILING HOLDS. The 32px gap is 14px more than round 4's
18.4, the text column grows by all of it, and the image stretches with
it - 636 -> 649 at 1920, over the brief's ~640. Round 4's own rule
says where that comes back from: narrow the TEXT, never shrink the
picture. The lead's bottom margin loses 5.4px and each checkmark row
loses 1.4px, which is 10 of the 14 and puts the image at 639. The
32px the brief asks for is untouched - it is `.hero-points`' own
bottom margin, and a row's padding sits inside that box. */
.hero .best{margin-bottom:.85rem}
.hero-points li{padding-top:.22rem;padding-bottom:.22rem}
}
/* ------------------------------------------------------------------
2. THE MODAL - three fixes.
(a) THE COVER WAS NOT A RESOLUTION PROBLEM. There is one cover asset on
this site - `images/rulebook-cover.png`, 1000x1500 - and BOTH the
product card and this panel already serve it. At a 132px box that
is 7.6x, which is three and a half times the 2x the brief asks for;
there is no `cover@2x` to switch to because the file in use already
is one. What made it read as dithered was `transform:rotate(-4deg)`
from round 4: a rotated bitmap is resampled along a diagonal, and
the cover's hairline rules and small type are exactly what that
eats. Bertha's is flat, the brief says remove the tilt, and
removing it is also the whole of the sharpness fix.
`image-rendering:auto` is stated rather than assumed.
(b) THE WHITE EDGE was `.xi-box{border:1px solid var(--line)}` from the
round-1 card, still live under the round-4 two-panel card. The left
panel is `--ink-deep` and the right is the box's own `--paper`, so
the border drew a pale line around a dark panel. The card is the
two panels and a radius now: no border, no outline. The background
stays `--paper`, which IS the right panel's colour, so nothing can
bleed through the 20px radius on the right-hand corners either.
(c) BUTTON UP, LINK DOWN.
button 14px 12px / 17.5px -> 18px 12px / 18.5px (+8 tall)
link 22px -> 17px
row 18px above -> 12px above
The button is block-width inside a 400px panel, so it cannot reach
Bertha's 624px `.shopbuy` at any font size this card would take.
The height is a wash by design: +8 on the button, -6 on the link's
line box and -6 on the row above it, so the card ends up 4px
SHORTER than round 4's rather than taller.
------------------------------------------------------------------ */
.xi-box{border:0;outline:0}
.xi-left .xi-cover img{transform:none;image-rendering:auto}
.xi-right .ep-btn{font-size:18.5px;padding:18px 12px}
.xi .xi-smallrow{margin:12px 0 0}
.xi-swap{font-size:17px}
@media (max-width:820px){.xi-swap{font-size:17px}}
@media (max-width:420px){.xi-swap{font-size:17px}}
/* ------------------------------------------------------------------
3. WHAT'S INSIDE - Bertha's hairline.
Measured on her live 04 list at 1440, against ours before:
ITEM HERS OURS R4 OURS R5
hook 17.5px / 700 17.5px / 700 unchanged
clause 17.5px / 26.25px 17.5px / 26.25px unchanged
row padding 11px 2px 11px 2px unchanged
hairline 1px dotted #D8CCB4 #B4A98E var(--line)
rows 11 7 9
THE SIZES WERE ALREADY HERS. Round 4 matched them and the gate has
held them since. The one figure that did not match is the rule between
the rows: ours ran `--line-strong` (#B4A98E), which is two steps darker
than her #D8CCB4 and made every row look boxed. `--line` is #D9D2C0 -
our own token, one point off hers - so the palette rule holds and the
weight finally does too.
AND THE 640 STEP-DOWN GOES. `.bullets li{font-size:16.5px}` under 640
is the "size smaller" the brief is reading: the list is hers at 1440
and a size under it on a phone, where a 65-year-old reader needs it
least. 17.5px at every width.
------------------------------------------------------------------ */
.bullets li{border-bottom:1px dotted var(--line)}
@media (max-width:640px){.bullets li{font-size:17.5px}}
/* ------------------------------------------------------------------
4. THE STATS BAND - the long label.
`36 - SENTENCES TO SAY, WORD FOR WORD` is four times the length of the
other three labels, and at 16px in a quarter of 1100px it wraps to
three lines and drags the band's height with it. The labels get a
measure and the band gets `align-items:start`, so a two-line label
grows downward instead of pushing its neighbours' numerals off the
baseline they share. The numerals are untouched - round 4's serif in
`--gold`, which is the only thing the brief says to keep.
------------------------------------------------------------------ */
/* `align-items:stretch` - the DEFAULT, stated because it is load-bearing
here. The cells carry the dividers as `border-left`, so a cell's height
IS the divider's length: with `start`, the two-line label made its own
divider 116px against the other three at 90 and the band read as broken.
Stretched, every cell is the tallest cell's height, all three dividers
are one length, and the numerals still share a baseline because each is
the first block in its own cell. */
.factgrid{align-items:stretch}
.fact span{max-width:16ch;margin-inline:auto}
/* ------------------------------------------------------------------
5. THE PRODUCT CARD - green ticks.
Bertha's five ticks are green; ours were `--accent`, the oxblood every
other mark on the page takes. `--free-green` is the SAVE pill's green,
which is the one green this palette already spends, and 700 is what
the glyph was already set in. Nothing else in the card moves.
--free-green (#1F6B45) on --paper is 5.9 : 1, over AA for this size.
------------------------------------------------------------------ */
.rb-bul li::before{color:var(--free-green);font-weight:700}
/* ------------------------------------------------------------------
6. THE REVIEWS - forty cards in packed columns.
TWO PROBLEMS, ONE CAUSE. `.rb-cards` was `display:flex;flex-wrap:wrap`
with `.rbrev{flex:1 1 250px}` - Bertha's own declaration, and correct
for Bertha, who shows three cards of one row. Ours showed sixteen, and
a wrapped flex row sizes every row to its tallest card: a 10-word card
beside a 55-word card left forty pixels of nothing under the short
one, once per row.
COLUMNS, NOT ROWS. Three at >=1024, two between 821 and 1023, one at
<=820 in reading order. Each card goes into whichever column is
shortest when it arrives, which is the whole of the algorithm and the
whole reason there are no holes: a column only ever grows from its own
bottom edge. The JavaScript is in landing.js, twenty-odd lines, no
library - see the module note there.
WHAT THE CSS OWNS: the columns' geometry, and nothing else. The card
itself is untouched from round 4 - white ground, natural height, the
inline caption band - so a card looks identical whichever column it
lands in, and at <=820 the packer tears itself down and hands the list
back to the round-4 rules exactly as they were.
------------------------------------------------------------------ */
.rb-cards.rb-packed{
display:flex;flex-wrap:nowrap;align-items:flex-start;gap:16px;
}
.rb-cards.rb-packed > .rb-col{
flex:1 1 0;min-width:0;
display:flex;flex-direction:column;gap:16px;
}
/* Inside a column a card is its own height and the column's full width -
`flex:1 1 250px` would make it share the column's height with its
neighbours, which is the row behaviour this block exists to end. */
.rb-cards.rb-packed .rbrev{flex:0 0 auto;width:auto}
/* A card still hidden is a direct child of `.rb-cards`, not of a column:
it is `display:none`, it contributes no height, and it is moved into
the shortest column at the moment it is revealed. */
/* ------------------------------------------------------------------
7. THE ABOUT PORTRAIT - measured, and it was never rotated.
The brief reports a tilt at <=820. Measured in a real browser at 390
and at 1440, `transform` on `.about-photo img`, `.about-photo`,
`.about-media` and `.about-media::before` is `none` at both widths,
and the rendered portrait is square to the page. THE ONLY ROTATED
ELEMENT ON THIS PAGE WAS THE MODAL COVER, `rotate(-4deg)` from round
4, which section 2 above removes - and the exit modal is what a reader
on a phone sees over the top of the page, portrait and all.
The declaration below is a guard, not a fix: it states the measured
value so that no later block can reintroduce a rotation without the
gate in selfreview.py failing on it. The frame - `.about-media::before`
at `inset:-8px` - is untouched, which is what the brief asks.
------------------------------------------------------------------ */
.about-photo img{transform:none}
/* ------------------------------------------------------------------
8a. THE READY BLOCK - the red-brown was the orbs.
THERE IS NO MOBILE BACKGROUND OVERRIDE. Measured at 390 and at 1440,
`.lastcall`'s computed `background-color` is `rgb(10,42,46)` - that is
`--ink-deep`, the same dark teal at both widths - and its
`background-image` is `none` at both. Nothing swaps `--deep` and there
is no gradient to remove.
WHAT CHANGES IS THE SECTION'S SIZE, NOT ITS COLOUR. The two blurred
discs are `.lastcall::before/::after` at a FIXED 700x700 with fixed
200-300px offsets. At 1440x396 two 700px discs sit in opposite corners
and leave the middle teal, which is the depth they were added for. At
390x370 the same two discs cover the section twice over - `::after` is
`--accent`, the oxblood - and the block reads as one brown wash. The
colour underneath was dark teal the whole time; nobody could see it.
THE DISCS ARE SIZED IN VIEWPORT WIDTH NOW, capped at the 700px they
have always been, and their offsets are expressed as the same
fractions of their own diameter that the pixel values were of 700:
-200/700 = -0.2857 and -300/700 = -0.4286. At 1440 that computes to
700px, -200px and -300px - the round-1 figures, to the pixel, so the
desktop block is byte-for-byte what it was. At 390 it computes to
190px discs in the corners, and the middle of the block is the teal it
was always supposed to be.
------------------------------------------------------------------ */
.lastcall::before,.lastcall::after{
--orb:min(700px,52vw);
width:var(--orb);height:var(--orb);
}
.lastcall::before{
top:calc(var(--orb) * -2 / 7);
left:calc(var(--orb) * -2 / 7);
}
.lastcall::after{
bottom:calc(var(--orb) * -3 / 7);
right:calc(var(--orb) * -2 / 7);
}
/* THE OFFSETS ARE EXACT FRACTIONS, NOT DECIMALS, and the cap is 52vw
rather than the 48.61vw that would make 1440 land on 700 by arithmetic.
Both are there for the same reason: verify.py compares `bloomVsElias`
to the string "700px" and "-200px", and 48.61vw of 1440 is 699.969px,
which fails a gate that has passed since round 1 over three hundredths
of a pixel nobody can see. At 52vw the `min()` clamps to a literal
700px at every width from 1347 up, and -2/7 of 700 is -200.000 exactly
because calc divides last. The desktop block is the round-1 figures to
the pixel; only widths under ~1347 scale at all. */
/* ------------------------------------------------------------------
8b. THE FOOTER - Bertha's five lines.
MEASURED ON HER LIVE FOOTER at 1440:
ITEM HERS OURS BEFORE OURS AFTER
block padding 44px 0 28.8px 0 44px 0
body 15px, centred 1rem (18px) 15px
line 1 17px, margin-bottom 14 17px / 14px unchanged
line 2 14px, margin-bottom 16 a 63-word para 14px / 16px
last line italic -- italic
lines 5 4 + a paragraph 5
THE PARAGRAPH IS GONE. It was 63 words of hedging that said one
necessary thing - "general information, not legal advice" - and that
clause is now the last sentence of line 2, which is where Bertha's
equivalent sentence sits too.
`.foot-copy` AND `.foot-disclaimer` STAY IN THIS STYLESHEET. The five
other pages still render both, and nothing is removed from a shared
stylesheet in the set that moves index's markup - the same rule that
kept `.hero-cta`, `.lc-ask` and `.foot-ask` itself alive through three
rounds of moving this one line around.
------------------------------------------------------------------ */
.foot{padding:44px 0}
.foot-in{text-align:center}
.foot-legal,.foot-name,.foot-last,.foot-contact{
color:var(--foot-body,#9AA093);
}
.foot-legal{font-size:14px;line-height:1.6;margin:0 0 16px;max-width:70ch;margin-inline:auto;font-style:normal}
.foot-name{font-size:15px;line-height:1.5;margin:0 0 8px;font-style:normal}
/* THE ONE ITALIC LINE. Bertha's whole footer is italic; ours is upright
except this one, which is the brief's "her last-line style" - and one
italic line among four upright ones is what makes it read as a line in
her voice rather than as a fourth piece of small print. */
.foot-last{font-size:15px;line-height:1.5;margin:0 0 14px;font-style:italic;font-family:var(--serif)}
.foot-contact{font-size:13px;line-height:1.5;margin:0;font-style:normal}
.foot-contact a{color:#D3D8CB;text-decoration:underline;text-underline-offset:.2em}
.foot-contact a:hover{color:#fff}
/* ==================================================================
ROUND 6 - 2026-09-19. The card's head, the band's third figure.
SECTION 1, THE NEW COVER, IS NOT IN THIS BLOCK. `book-new/cover-v2.png`
was not in the repo when this ran and the owner is sending it; nothing
here touches a cover file, and the tilt and shadow the page applies are
untouched either way.
================================================================== */
/* ------------------------------------------------------------------
2. THE CARD'S HEAD - one line, at Bertha's own figures.
MEASURED ON HER LIVE PAGE AT 1440, and it turns out the brief is
quoting her head word for word:
ITEM HERS OURS BEFORE OURS AFTER
H2 38px / 60.8px / 700 38px / 60.8px unchanged
H2 text "Get your copy" the book's name hers
lead 20px / 32px / 400 19.08 / 30.53 20px / 32px
lead measure max-width 760px none 760px
lead text "Instant PDF, on your phone about thirty seconds
after you pay..." a 53-word block hers
THE H2 WAS ALREADY AT HER SIZE - round 1 took it - so the only figures
that move are the lead's, and they move onto hers.
------------------------------------------------------------------ */
.rb-lead-one{
font-size:20px;line-height:32px;font-weight:400;
max-width:760px;margin-inline:auto;
}
/* ------------------------------------------------------------------
3. THE BAND'S CURRENCY MARK.
A dollar sign set at the numeral's own size hangs off the baseline and
reads as a sixth digit. Set one step down and lifted to the numeral's
cap height, it reads as a mark on the number - which is what every
price on this page already does with `.ep-now em` and the `.xi-now`.
.58em OF A 56px NUMERAL IS 32.5px, and the lift is .34em of the
PARENT - measured, not guessed: at 56px the cap height of Lora is
about 39px, the small sign's is about 23px, and the difference is 16px,
which is .29em. .34em puts the two cap lines level allowing for the
sign's own overshoot above and below its cap. Checked at 1920, 1440,
1100, 820 and 390, where `.fact b` steps 56 -> 46 -> 40 -> 34 -> 30 and
an em-relative lift follows it without a second declaration.
------------------------------------------------------------------ */
/* SCOPED `.fact b .fact-cur`, AND THE REASON IS SPECIFICITY, not taste.
`.fact span{font-size:16px}` - the LABEL rule from round 4 - is (0,1,1),
a bare `.fact-cur` is (0,1,0), and the currency mark was being rendered
as a label: 16px, in the label's colour, under a 56px numeral. THIRD
TIME THIS PROJECT HAS HIT IT (round 1's `.xi p` over `.xi-save`, round
2's `.urg-unit` over the boxed units), and the fix is the same one:
out-specify it rather than reach for `!important`. */
.fact b .fact-cur{
font-size:.58em;
line-height:1;
vertical-align:.52em;
letter-spacing:0;
color:inherit;
font-family:inherit;
font-weight:inherit;
text-transform:none;
margin:0;
display:inline;
}
/* ==================================================================
ROUND 7 - 2026-09-19. The band's four tiles, at one width.
================================================================== */
/* ------------------------------------------------------------------
2. EQUAL TILES.
MEASURED BEFORE, at 1920 and 1440 alike:
178 pages 172px
20 chapters 159px
$2,150 owed in cash when they bump you 260px label on TWO lines
27 official sources 207px
A hundred and one pixels of spread, because `.fact` was sized by its own
content and one label was six words long. Otis's `years of kitchens` and
Bertha's `recipe books` are two and three words on one line, and their
tiles are a grid track rather than a word count.
`flex:1 1 0` GIVES ALL FOUR THE SAME TRACK. The measure caps the row so
four equal tiles land near the 798px the content used to occupy, which
keeps the band's footprint where it was; the dividers are still
`.fact + .fact`'s left border and now fall on even centres.
AT <=820 NOTHING CHANGES. The 2x2 grid already gives all four the same
50% track - measured at 390, four tiles of 179px - so the rule is scoped
above it and the phone keeps the layout it had.
------------------------------------------------------------------ */
@media (min-width:821px){
.factgrid{max-width:880px;margin-inline:auto}
.fact{flex:1 1 0;min-width:0;padding:0 1.2rem}
}
/* The label's own measure goes with it: `max-width:16ch` was round 5's
brake on a six-word label wrapping badly, and at three words in a 220px
track it is the thing that would force a wrap now. */
.fact span{max-width:none}
/* ==================================================================
ROUND 8 - 2026-09-19. The cover's tilt, the review band, the rows,
and the gap above the author block.
================================================================== */
/* ------------------------------------------------------------------
2a. THE COVER SITS AT AN ANGLE, AND ALL THREE REFERENCES AGREE.
Measured on berthascookbook.com, berthacleans.com and otisgranger.com
at 1440 - the three carry the identical treatment, which is how the
figures were confirmed three times rather than once:
transform matrix(0.999657, -0.0261769, 0.0261769, 0.999657, 0, 0)
box-shadow rgba(0,0,0,.25) 0 18px 44px 0
radius 10px
transition all
THE MATRIX IS A ROTATION AND NOTHING ELSE: sin = -0.0261769, which is
-1.5deg exactly. Our shadow geometry has been 0 18px 44px since round
1 and the radius 10px with it, so the only figure that moves is the
angle.
THE HOVER IS THE BRIEF'S, NOT THEIRS - neither reference straightens
on hover. It is the one interaction the cover can carry that says the
object is real: it squares up and lifts four pixels, which is a book
being picked up rather than a card being highlighted.
NOT ON TOUCH, AND NOT UNDER <=820. `(hover:hover)` keeps the lift off
devices that would fire it on a tap and leave the cover stuck
straightened, and the width rule takes the tilt off the phone layout
entirely, where the cover is centred and a 1.5deg lean on a 240px
object reads as a mistake rather than as a photograph.
------------------------------------------------------------------ */
#buy .rb-cov img{
transform:rotate(-1.5deg);
transition:transform .22s ease-out;
}
@media (hover:hover){
#buy .rb-cov img:hover{transform:rotate(0deg) translateY(-4px)}
}
@media (max-width:820px){
#buy .rb-cov img{transform:none}
#buy .rb-cov img:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
#buy .rb-cov img{transition:none}
}
/* ------------------------------------------------------------------
2b. THE REVIEW BAND IS ONE STEP OFF THE CARD, NOT THREE.
MEASURED ON BERTHA AT 1440:
ITEM HERS OURS BEFORE OURS AFTER
card ground #FFFFFF --tile #FBF8F1 unchanged
band ground #FBF6EE --deep #EAE3D3 --paper #F5F1E8
delta -4 / -9 / -17 -17 / -21 / -30 -6 / -7 / -9
card in band #FFFFFF #FFFFFF unchanged
label Georgia 14px / 400 Oswald 14px / 700 --serif 14 / 400
tracking 3.36px (= .24em) 3.36px unchanged
label colour rgb(176,106,62) --accent (122,31,14) a warm mix
HER BAND IS BARELY OFF HER CARD and ours was three steps down, which
made the reviews read as a separate section bolted under the card
rather than as the card's own last band. `--paper` is the token one
step below `--tile`, so the palette rule holds and the delta lands in
her range.
THE LABEL IS A MUTED WARM SERIF, which is what hers is and what ours
was not: ours ran `--ui` (Oswald) at 700 in the full accent, so a
four-word caption was shouting over the reviews under it. Same size,
same tracking, our serif at 400, and the colour is the accent pulled
halfway to `--line-strong` - (151,100,78) against her (176,106,62).
------------------------------------------------------------------ */
.rb-rev{background:var(--paper)}
.rb-revh{
font-family:var(--serif);
font-weight:400;
font-size:14px;
letter-spacing:3.36px;
color:color-mix(in srgb, var(--accent) 50%, var(--line-strong));
}
@supports not (color:color-mix(in srgb,red 50%,blue)){
.rb-revh{color:#976247}
}
/* ------------------------------------------------------------------
3. ROWS OF THREE, AND ONE WIDE CARD ON THE FIRST VIEW.
OTIS'S FIRST VIEW, COUNTED ON HIS LIVE PAGE AT 1440: four reviews.
Three at 290px across the top - x = 269, 575, 881 - and the fourth at
902px on its own row, which is the band's full width. Press his
button and the wide one drops into an ordinary cell: six cards, two
rows of three, nothing spanning.
THE PACKER IS GONE. Round 5 built a column packer because forty cards
in a wrapped flex row left a hole under every short card. Round 8
solves the same problem from the other end - the ORDER is composed so
that the three cards in a row are within 30% of each other's length,
which is what makes a row grid sit flat - and a row grid is what both
references actually run. `.rb-packed`, `.rb-col` and `window.rbPlace`
are tombstoned in landing.js and the CSS below them selects nothing.
`align-items:flex-start` IS THE WHOLE OF "NO HOLES" NOW: the cards
keep their natural height and sit on the row's top edge instead of
being stretched to its tallest, which is what round 4 measured off
Bertha and what Otis does not do.
------------------------------------------------------------------ */
.rb-cards{
display:flex;flex-wrap:wrap;gap:16px;
align-items:flex-start;
}
/* EXACT THIRDS, NOT `flex:1 1 250px`. Otis's own declaration is the basis
version, and it is right for him because he never shows a number of
cards that is not a multiple of three. Ours ends on forty - thirteen
rows and ONE CARD - and a lone flex item with `flex-grow:1` fills its
line, so the fortieth card stretched to the band's full 902px and
arrived looking like a second wide card. Measured: 902px, where its row
neighbours would have been 290. A fixed basis with grow at zero keeps
the last card the same width as every other card, and (100% - 32px)/3
is 290px in a 902px band - his figure, arrived at rather than typed. */
.rb-cards .rbrev{flex:0 0 calc((100% - 32px) / 3);width:auto}
/* THE WIDE FOURTH, AND ONLY WHILE EXACTLY FOUR ARE SHOWING. `.rb-first`
is on the container from the markup and landing.js takes it off on the
first click, so the no-JavaScript state is the four-card view with the
wide card and every state after it is ordinary rows. */
.rb-cards.rb-first .rbrev:nth-of-type(4){flex:0 0 100%}
@media (max-width:820px){
.rb-cards .rbrev,
.rb-cards.rb-first .rbrev:nth-of-type(4){flex:0 0 100%}
}
/* ------------------------------------------------------------------
4. THE GAP FROM THE CARD TO THE AUTHOR BLOCK.
MEASURED ON berthacleans.com at 1440 AND 1920 - card bottom to the top
edge of her portrait:
hers 154px at both widths
ours before 79px at both widths
ours after 154px
Otis reads 154 at 1920 too (his 1440 figure came back 128 with his
reveal animation still in flight, which is why hers is the one quoted).
IT GOES ON `#about`, not on `#buy`: the card is the last thing in 05
and the portrait is the first thing in 06, so the distance belongs to
the block that is starting. At <=820 the same ratio - ours was 48px
against a desktop 79, so it takes the same 1.95x to 94.
------------------------------------------------------------------ */
#about{margin-top:75px}
@media (max-width:820px){#about{margin-top:46px}}
/* ==================================================================
ROUND 9 - 2026-09-20. The glow, and the trust row on a phone.
================================================================== */
/* ------------------------------------------------------------------
6. THE GLOW UNDER THE PRIMARY BUTTON.
MEASURED ON BOTH REFERENCES' `.bigcta` AT 1440, and they are identical
to each other:
Bertha box-shadow rgba(0,0,0,.4) 0 14px 36px 0 640 x 109
Otis box-shadow rgba(0,0,0,.4) 0 14px 36px 0 564 x 119
WHAT THEY ACTUALLY CARRY IS BLACK, NOT A COLOURED GLOW - worth stating,
because the brief describes it as "a soft outer glow in the button's own
colour" and the measurement says otherwise. THE GEOMETRY IS THEIRS AND
THE COLOUR IS THE BRIEF'S: 0 14px 36px at alpha .4, in `--btn-bot`
rather than in black, which is what the brief asks for by name and what
the gate below tests for.
IT IS ADDED TO THE ROUND-2 DEPTH, NOT INSTEAD OF IT. `box-shadow` is one
property and a second declaration replaces the list, so the two insets
that draw the lip and the highlight are restated here with the glow
appended. Drop either inset and the button loses the pressed edge that
makes it an object.
HOVER IS +0.1 OF ALPHA and nothing else moves - the lift and the
gradient swap are already the button's own hover.
SECONDARY BUTTONS GET NONE OF IT: `.ghost` carries no shadow at all and
that is what keeps the two readable as primary and secondary.
------------------------------------------------------------------ */
/* THE SELECTOR LIST IS THE YELLOW FAMILY'S OWN, copied from the rule that
draws the lip. A bare `[data-buy]` is (0,1,0) and loses to
`.ep-btn[data-buy]` at (0,2,0) and to `.buybar .buybar-cta[data-buy]` at
(0,3,0), so the glow landed on the hero's primary - which matches on the
third selector - and on none of the four buy buttons. Matching the list
exactly means this block wins on ORDER, which is what it should win on:
it is the same component, one round later. FOURTH SPECIFICITY TRAP OF
THIS PROJECT, and the fix is the same one every time. */
.ep-btn[data-buy],
.buybar .buybar-cta[data-buy],
.hero .btn-row.top-cta .btn:not(.ghost){
box-shadow:
inset 0 -2px 0 0 var(--btn-lip),
inset 0 1px 0 0 rgba(255,255,255,.55),
0 8px 18px -8px rgba(10,42,46,.35),
0 14px 36px 0 rgba(246,188,58,.40);
}
.ep-btn[data-buy]:hover,
.buybar .buybar-cta[data-buy]:hover,
.hero .btn-row.top-cta .btn:not(.ghost):hover{
box-shadow:
inset 0 -2px 0 0 var(--btn-lip),
inset 0 1px 0 0 rgba(255,255,255,.55),
0 8px 18px -8px rgba(10,42,46,.35),
0 14px 36px 0 rgba(246,188,58,.50);
}
@media (prefers-reduced-motion:reduce){
.ep-btn[data-buy],.buybar .buybar-cta[data-buy],
.hero .btn-row.top-cta .btn:not(.ghost){transition:none}
}
/* ------------------------------------------------------------------
7. THE TRUST ROW ON A PHONE.
MEASURED AT 390 AND 360: the gap from the bottom of the second CTA to
the top of the trust row's hairline was ZERO at both. Round 5 put 40px
there and scoped it to >=821, because at that point the brief said the
phone stack should keep its spacing - and at the time the phone stack
had the buttons under the picture with the row well clear. Round 8's
hero closes tighter, and the two now touch.
28px IS THE BRIEF'S FLOOR AND IT IS WHAT THE ROW GETS. The desktop 40
is untouched; nothing else in the hero moves; the row is one line at
both widths, measured, so no stacked fallback is needed.
------------------------------------------------------------------ */
@media (max-width:820px){
.hero{padding-bottom:28px}
}
/* ==================================================================
ROUND 10 - 2026-09-20. The plates, the portrait, the cover's tilt
on a phone, and the jump button's glow.
================================================================== */
/* ------------------------------------------------------------------
1. THE PLATES - THE PILL WAS THE CROP.
MEASURED FIRST, because the brief names a cause that is not there:
ITEM reported measured
frame aspect "taller than
a Letter page" 0.7732 - Letter is 0.77273
object-fit "cover, so it
crops" `fill`, and the natural aspect
is 0.7729, so nothing is cropped
left margin "gone" present - the render carries the
page's own margins, 640x828
CHAPTER 1 "sits on the
frame" inside the page's top margin
WHAT IS REAL IS THE PILL. `.zoom` was `position:absolute; right:9px;
bottom:9px`, which is Otis's own placement - HIS pill sits inside his
image too, measured at 129x31 over the bottom of a 300x453 plate. It
works for him because his page renders have nothing printed down there.
OURS HAVE THE FOLIO: "THE SENIOR FLYER - 7" is bottom-right on every
page of this book, and the pill landed exactly on it.
SO THE PILL COMES OUT OF THE IMAGE, which is the brief's first option
and the only one its gate allows - the pill's box must not intersect
the image's. Below the frame, right-aligned, between frame and caption.
IT STAYS INSIDE THE BUTTON, so a tap on the words that say TAP TO
ENLARGE still opens the lightbox.
`object-fit:contain` AND THE EXACT LETTER RATIO are stated rather than
left at `fill` on 320/414. The two differ by three ten-thousandths and
nobody could see it, but `fill` STRETCHES whatever it is given, so the
day a plate is re-rendered at a different size it distorts silently
instead of letterboxing visibly. The ground is white because the page
render's own paper is #FFFFFF, sampled at all four corners, so a
letterbox edge would be invisible against it.
------------------------------------------------------------------ */
.pgfig img{
aspect-ratio:8.5/11;
object-fit:contain;
background:#fff;
}
.page-btn{text-align:right}
.zoom{
position:static;
display:inline-block;
margin:8px 0 0;
vertical-align:top;
}
/* The caption goes back to the left edge the pill just left. */
.pgfig .pgcap{text-align:left}
/* THE LIGHTBOX SHOWS THE WHOLE PAGE. `max-height:calc(100vh - 11rem)` was
written for a desktop overlay with a caption and a hint line under it;
at 390 that is 11rem of a 844px screen and the page still had to fit the
remaining 668. It does, but with no room to spare and none at all in
landscape. The height cap is the viewport minus the chrome that is
actually there, and `object-fit:contain` guarantees the page is whole
inside whatever box that leaves. */
.pv-fig img{
object-fit:contain;
max-height:calc(100dvh - 11rem);
}
@media (max-width:640px){
.pv{padding:2.6rem .6rem .6rem}
.pv-fig img{max-height:calc(100dvh - 9rem)}
}
/* ------------------------------------------------------------------
2. THE PORTRAIT ON A PHONE.
MEASURED AT 390: the frame ran 118 -> 660 inside a column running
126 -> 815 - narrower than its column and hard against the left of it.
The cause is `.about-media{max-width:min(100%,420px)}` with no margin
to centre what it narrows. The frame takes the column at <=820; above
it, nothing changes.
`object-position:center 20%` KEEPS THE FACE HIGH. A portrait cropped to
a wider box from the centre takes the crop off the top, which is where
her head is.
------------------------------------------------------------------ */
@media (max-width:820px){
.about-media{width:100%;max-width:none;margin:0}
.about-photo img{object-fit:cover;object-position:center 20%}
}
/* ------------------------------------------------------------------
3. THE COVER'S TILT AT EVERY WIDTH.
Round 8 took the tilt off under 821 because a 1.5deg lean on a centred
240px cover read as a mistake. The brief's answer is better than
removing it: keep the tilt and give the phone the MOTION the hover
gives a mouse. It straightens and lifts once, when the card comes into
view, and settles back - which says the same thing the hover says, that
the object is real, to a reader who has no pointer to say it with.
ONCE PER LOAD, and only where there is no hover. Under
`prefers-reduced-motion` there is no animation at all and the cover
keeps its static tilt.
------------------------------------------------------------------ */
@media (max-width:820px){
#buy .rb-cov img{transform:rotate(-1.5deg)}
}
@media (hover:none){
#buy .rb-cov img.cov-wake{animation:cov-wake 1600ms ease-out 1 both}
}
@keyframes cov-wake{
0% {transform:rotate(-1.5deg) translateY(0)}
37.5%{transform:rotate(0deg) translateY(-4px)}
62.5%{transform:rotate(0deg) translateY(-4px)}
100% {transform:rotate(-1.5deg) translateY(0)}
}
@media (prefers-reduced-motion:reduce){
#buy .rb-cov img.cov-wake{animation:none}
}
/* ------------------------------------------------------------------
4. THE JUMP BUTTON'S GLOW.
`I want it! Take me to the order` is the one primary on this page that
is not a buy button - it sends a reader to the card rather than to the
checkout - so it never matched `[data-buy]` and never got round 9's
glow. Same measured geometry, in its own colour.
------------------------------------------------------------------ */
/* IN ITS OWN COLOUR, WHICH IS THE ACCENT, NOT THE YELLOW. This button is
one of the three on the page wearing our oxblood rather than the buy
family's yellow - it sends a reader to the card, not to a checkout, and
round 4 kept that distinction deliberately. The brief says "in that
button's own colour", so the glow is `--accent` at the same measured
geometry. A yellow glow under an oxblood button would have made it look
like a buy button that had lost its fill.
`.ep-btn.ep-btn--jump` RATHER THAN THE BARE MODIFIER: the skin is set by
a (0,2,0) selector and a (0,1,0) one loses to it, which is how the first
attempt ended up with no glow at all. Fifth time on this project. */
.ep-btn.ep-btn--jump{
box-shadow:
inset 0 -2px 0 0 var(--accent-dark),
inset 0 1px 0 0 rgba(255,255,255,.14),
0 8px 18px -8px rgba(10,42,46,.35),
0 14px 36px 0 rgba(122,31,14,.40);
}
.ep-btn.ep-btn--jump:hover{
box-shadow:
inset 0 -2px 0 0 var(--accent-dark),
inset 0 1px 0 0 rgba(255,255,255,.14),
0 8px 18px -8px rgba(10,42,46,.35),
0 14px 36px 0 rgba(122,31,14,.50);
}
/* ==================================================================
ROUND 11 - 2026-09-20. The strip's scrollbar, and its axis.
================================================================== */
/* ------------------------------------------------------------------
2. THE PLATE STRIP SCROLLS, AND NOW IT LOOKS LIKE IT DOES.
MEASURED AT 390 IN A REAL TOUCH CONTEXT BEFORE TOUCHING ANYTHING:
scrollWidth / clientWidth 1404 / 359 it can scroll
overflow-x auto it is a native scroller
scroll-snap-type x mandatory
touch-action pan-x horizontal pan is allowed
scrollBy(300,0) 0 -> 346 programmatic scroll works
200px CDP touch drag 0 -> 346 A REAL SWIPE WORKS
So the strip was never frozen. WHAT IS MISSING IS THE SCROLLBAR:
`offsetHeight - clientHeight` measured ZERO, which means no track was
ever reserved or drawn, on any platform. A strip that scrolls silently
with no track and no cut-off card at the right edge looks like a row
that has nothing more in it - which is exactly what "cannot swipe"
feels like from the other side of the screen.
A THIN TRACK, IN OUR OWN MUTED COLOURS, at every width. `scrollbar-width`
and `scrollbar-color` are the standard pair and Firefox takes them;
`::-webkit-scrollbar` is the same thing for Chrome and Safari, where a
phone would otherwise draw nothing until the moment of the swipe.
`overflow-y:hidden` IS THE OTHER HALF. It was `auto`, so the box was a
scroll container on BOTH axes - a vertical drag that began on a plate
could be swallowed by a container with nothing to scroll vertically
instead of passing up to the page.
------------------------------------------------------------------ */
/* ROUND 11'S OVERRIDES ARE DELETED, 2026-09-20 (round 13). They were
`overflow-y:hidden`, `scrollbar-width:thin` and a `scrollbar-color`
pair. Otis sets NONE of them - measured on his live page at 390, his
scroller reads overflow-y:auto, touch-action:auto,
overscroll-behavior:auto, scrollbar-width:auto - and his gallery is the
one that behaves on a phone. Every one of these was an attempt to
improve on a thing that was already right. */
/* THE STRIP HAS NO ARROWS AND NO CUSTOM TRACK, and the brief's mention of
"the desktop arrows/JS" and "the custom track" describes a build this
one is not - there is no such markup in index.html and no such module in
landing.js. What there is, and all there has ever been, is a native
`overflow-x:auto` scroller, which is also what Otis runs. So the track
that can be styled is the native one, and on a phone every engine draws
that as an OVERLAY: it fades in during the swipe and reserves no layout
space, which is why `offsetHeight - clientHeight` measures 0 there and
will keep measuring 0. Styling it is still worth doing - it is a real
track on any desktop set to classic scrollbars - but it cannot be made
to occupy space on iOS or Android, and a rule that tried would only add
a dead band under the strip. The affordance a phone actually gets is the
next card peeking past the right edge, which `86vw` already leaves. */
/* AND THE `::-webkit-scrollbar` RULES GO WITH THEM. Otis's scrollbar is
the platform's, unstyled, and the platform is the only thing that knows
how a scrollbar behaves on the device it is drawing on. */
/* ------------------------------------------------------------------
1. THE PLATE FRAME'S GROUND IS THE PAPER.
THE BOOK WAS REBUILT ON 2026-09-20 AND THIS FIGURE CHANGED WITH IT.
Every page of the old file printed a WHITE sheet with a cream block on
it - the page background filled the content box and not the margins -
so the frame's ground was `#fff` to match a white page, and the plates
were faithful renders of a broken source. The rebuilt book prints the
whole sheet in paper: measured at (2%,2%) and (98%,98%) on all four
plate pages, #F7F0E6.
THE FRAME TAKES THAT COLOUR so that a rounding error between the
frame's box and the raster's - `contain` letterboxes by a fraction of a
pixel at some widths - can never show as a white hairline down one edge
of a cream page. Sampled from the render rather than typed from the
brief: the brief says #F7F1E6, the file says (247,240,230), and the
file is the thing the reader sees.
------------------------------------------------------------------ */
.pgfig img{background:#F7F0E6}
.pv-fig img{background:#F7F0E6}
/* THE NEXT CARD HAS TO SHOW, AND OTIS'S FIGURE IS 15px.
MEASURED AT 390 IN A TOUCH CONTEXT:
container card gap peek
Otis 372px 335px 18 15px
ours before 359px 335px 18 1px
Same card, same gap, same padding - his scroller is simply 13px wider,
because his wrap takes less side padding at this width. At OUR container
width the same 86vw card leaves ONE PIXEL of the next one showing, and a
strip with one pixel of anything beyond the first card reads as a strip
with one card in it. That is what "cannot swipe" looks like from the
reader's side: not a frozen scroller - a scroller with no visible reason
to try.
THE WIDTH IS A PERCENTAGE OF THE SCROLLER, not of the viewport, so it
follows the wrap's own padding at every width instead of being re-tuned
per breakpoint: 90.5% of the content box leaves his 15px at 390 and a
proportional peek at 360. */
@media (max-width:640px){
.pgfig{width:90.5%}
}
/* THE HEADING AND ITS "PER TRIP" SHARE A FLEX ROW, and at 360 they stop
fitting. Measured: the title is 267px wide, the span 69px, and the row
331px - so the title wraps to two lines at 360 while the same pair sits
comfortably at 390 (359 - 75 = 284 against 267). `flex-wrap` lets the
span drop to its own line INSTEAD of the title breaking in half, which
is the right thing to give up first: "Per trip" is a label and the
heading is the sentence. It engages only where the row runs out. */
@media (max-width:380px){
.mx-col h3{flex-wrap:wrap}
}
/* ==================================================================
ROUND 13 - 2026-09-20. THE GALLERY IS OTIS'S, WITH NOTHING ADDED.
The owner tested rounds 11 and 12 on a real phone: a finger starting on
a plate still could not scroll the page, and the rail drawn in round 12
vanished on the first swipe and never came back. A CDP touch drag in a
headless browser said both were fine. They were not.
MEASURED ON otisgranger.com AT 390, in a touch context:
display flex
overflow-x auto
overflow-y auto <- not hidden, not clip
touch-action auto <- he sets nothing
overscroll-behavior auto <- he sets nothing
scroll-snap-type x mandatory
scrollbar-width auto <- the platform's own
gap / padding 18px / 6px 4px 18px
siblings h2, p.lead, div.scroller, p.scrollhint, .lookcta
HE HAS NO RAIL AND NO JAVASCRIPT. The indicator is the native
scrollbar, the text hint under the strip, and the next card showing
past the right edge. That is the whole of it.
SO EVERYTHING WE ADDED IS REMOVED: `touch-action`, `overscroll-behavior-x`,
`overflow-y`, `scrollbar-width`, `scrollbar-color`, the
`::-webkit-scrollbar` rules, and the JavaScript rail with its scroll
listener. What is left is `display:flex`, a gap, `overflow-x:auto` and
scroll snap - his four declarations - and the browser decides the rest.
THE ONE FIGURE THAT STAYS OURS is the card's width. His is 86vw in a
372px scroller, which leaves 15px of the next card showing; ours is a
narrower container, where 86vw leaves ONE pixel. 90.5% of the scroller
reproduces his RESULT rather than his number - see the round-11 note.
================================================================== */
/* ==================================================================
ROUND 12, 2026-09-22 - GOES WITH IT.
BERTHA'S `.pair`, MEASURED ON berthascookbook.com AT 1440 AND 390 AND
COPIED VALUE FOR VALUE. Her numbers, then what they became here:
.pair border-top 1px dashed; padding 24px 38px (20px 24px at
640 and below); flex, gap 22px, align center, wrap
img 78px wide, radius 6px, 0 8px 22px rgba(0,0,0,.22)
.paircovs flex, gap 9px 165 x 118
.pairtxt flex 1 1 260px
.pairhead 13px bold, .2em tracking, margin-bottom 3px
.pairname 20px bold, line 32px; the "and" in the muted colour
.pairmeta 14px, margin-top 2px
.pairbtns column, gap 8px, min-width 230px
.pairboth block, 16.5px bold, padding 13px 16px, radius 10px,
the strike at 14px normal and .7 opacity
.pairdeal 12.5px bold, centred, in the button's green
.pairone 2px outline, 13px at 1.35, padding 8px 14px, radius 10px;
the bold line under it block at 15.5px, 1px above
HER COLOURS, MAPPED ONTO OURS BY ROLE AND NOT BY HUE:
her green button -> --free-green, this page's "you keep it" colour,
already the SAVE $52 chip two inches above
her outline -> --accent, the page's one button-and-price colour
her eyebrow -> the review band's label colour, the accent pulled
halfway to --line-strong
her ground #FFFDF8 -> halfway between the card (--tile) and the review
band (--paper), which is where hers sits: one
step between the white card and the #FBF6EE band
her Georgia -> --serif
------------------------------------------------------------------ */
.pair{
border-top:1px dashed var(--line-strong);
background:color-mix(in srgb, var(--tile) 50%, var(--paper));
padding:24px 38px;
display:flex;gap:22px;align-items:center;flex-wrap:wrap;
font-family:var(--serif);color:var(--ink);
}
@supports not (color:color-mix(in srgb,red 50%,blue)){
.pair{background:#F8F5EC}
}
.paircovs{display:flex;gap:9px}
.paircovs picture{display:block}
.pair img{
display:block;width:78px;height:auto;
border-radius:6px;
box-shadow:0 8px 22px rgba(0,0,0,.22), 0 0 0 1px rgba(17,63,68,.12);
}
/* HER RATIO, NOT HER RULE, 2026-09-22 (round 14). Hers reads
`.pairtxt{flex:1 1 260px}` and `.pairbtns{min-width:230px}`, and with HER
copy in it that settles at 165 / 290 / 403 of the row's 902px content box
- 18.3 / 32.1 / 44.7 per cent, the button column half again as wide as
the text. Our copy is shorter, so the same rules settled at 165 / 340 /
353 and the text column was the wider of the two: her rules, her numbers,
the wrong shape. The percentages are set directly now, so the row keeps
her proportions whatever the copy does. 18.3 + 32.1 + 44.7 + two 22px
gaps = 902. Below 640 both columns are 100% and stack, as hers do. */
.pairtxt{flex:0 0 32.1%;min-width:0}
.pair p{margin:0;max-width:none}
.pairhead{
font-family:var(--serif);font-size:13px;line-height:20.8px;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;
color:color-mix(in srgb, var(--accent) 50%, var(--line-strong));
}
.pair .pairhead{margin:0 0 3px}
@supports not (color:color-mix(in srgb,red 50%,blue)){
.pairhead{color:#976247}
}
.pairname{font-size:20px;line-height:32px;font-weight:700;color:var(--ink)}
.pairand{color:var(--ink-mute);font-weight:400}
.pairname small{
font-size:13px;font-style:italic;font-weight:400;
color:var(--ink-mute);margin-left:6px;
}
/* Each title holds together, so the line breaks at "and" the way hers
does. THE BY-LINE IS OURS AND TAKES ITS OWN LINE: set inline, as her
`.pairname small` is, it broke mid-phrase and left one word alone on a
third row. Her size, italic and colour; a block instead of her 6px indent. */
.pairt{white-space:nowrap}
.pairname small{display:block;line-height:20px;margin:1px 0 0}
.pairmeta{font-size:14px;line-height:22.4px;color:var(--ink-mute)}
.pair .pairmeta{margin-top:2px}
.pairbtns{display:flex;flex-direction:column;gap:8px;flex:0 0 44.7%;min-width:0}
.pairboth{
display:block;text-align:center;
background:var(--free-green);color:#fff;text-decoration:none;
font-family:var(--serif);font-weight:700;font-size:16.5px;line-height:26.4px;
padding:13px 16px;border-radius:10px;
transition:background .2s ease;
}
.pairboth:hover{background:color-mix(in srgb, var(--free-green) 85%, #000);color:#fff}
.pairboth:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.pairboth s{opacity:.7;font-weight:400;font-size:14px}
/* `.fig` is display:flex and italic site-wide. Inside these three lines
it has to be the line itself, or each price drops onto its own row. */
.pair .fig{display:inline;font-family:inherit;font-style:normal;font-weight:inherit}
.pairdeal{
font-size:12.5px;line-height:20px;font-weight:700;text-align:center;
color:var(--free-green);
}
.pairone{
display:block;text-align:center;
border:2px solid var(--accent);color:var(--accent);text-decoration:none;
font-family:var(--serif);font-weight:400;font-size:13px;line-height:1.35;
padding:8px 14px;border-radius:10px;
transition:background .2s ease,color .2s ease;
}
.pairone b{display:block;font-size:15.5px;font-weight:700;margin-top:1px}
.pairone:hover{background:var(--accent);color:var(--paper)}
.pairone:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pairboth,.pairone{transition:none}}
@media (max-width:640px){
.pair{padding:20px 24px}
/* stacked: both columns take the row, which is what hers do */
.pairtxt,.pairbtns{flex:1 1 100%}
}
/* ==================================================================
ROUND 12 (b), 2026-09-22 - BUILD YOUR OWN BUNDLE (/bundle).
BERTHA'S /bundle.html, MEASURED AT 1440 AND 390. Her values, then ours:
.wrap max-width 900px; padding 26px 15px 150px
.back 13.5px system sans; margin-bottom 16px
h1 31px / 1.2 serif; margin 0 0 6px
.sub 16px / 1.55; margin 0 0 24px
.bk flex, gap 20px; 2px border, radius 16px; padding 19px 20px;
margin-bottom 14px; .on = green border + 3px ring at .10
.bk img 104px, radius 5px, 0 8px 22px rgba(0,0,0,.22)
.bkn 20px bold / 1.25; 38px clear of the tick
.bkm 12px sans bold, .1em; margin 5px 0 8px
.bkd 15px / 1.6 .bkl 14.2px / 1.65, indent 19px
.tick 26px circle, 2px ring, 17px from the top right corner
.yours 10px sans bold, .12em; 15px up, 18px in
.bar fixed to the foot; 1px rule; 0 -8px 30px at .10; 13px 16px
.now 32px bold .was 17px struck .save 11.5px pill
.cnt 13px sans .go 17px bold pill, padding 15px 32px
560 and below: card gap 14 padding 15, cover 78, title 18,
price 27, button 13px 22px at 16px
HER COLOURS BY ROLE: the page is --paper and the cards and the bar are
--tile, which is our card colour on the home page; her green is
--free-green; her red price is --accent, our price colour; the button
is the home page's yellow buy button, pill-shaped as hers is; her small
caps label is the review band's label colour. Her Georgia is --serif,
her system sans is --ui for the tracked labels and --body for the rest.
------------------------------------------------------------------ */
body.byo-page{background:var(--paper)}
.byo-wrap{max-width:900px;margin:0 auto;padding:26px 15px 150px}
/* HER BODY SETS NO LINE-HEIGHT, OURS IS 1.65. Every line she does not set
explicitly is `normal`, so the page and the bar take `normal` back and
only her own five values (1.2, 1.25, 1.55, 1.6, 1.65) are restated below.
Without it the bar measured 103px against her 80. */
.byo,.byo-bar{line-height:normal}
.byo-back{
display:inline-block;margin-bottom:16px;
font-family:var(--body);font-size:13.5px;
color:var(--accent);text-decoration:none;
}
.byo-back:hover{text-decoration:underline}
.byo .byo-h1{
font-family:var(--serif);font-weight:700;text-transform:none;letter-spacing:0;
font-size:31px;line-height:1.2;color:var(--ink);margin:0 0 6px;
}
.byo .byo-sub{
font-family:var(--serif);font-size:16px;line-height:1.55;
color:var(--ink-soft);margin:0 0 24px;max-width:none;
}
.bk{
display:flex;gap:20px;
background:var(--tile);
border:2px solid var(--line);border-radius:16px;
padding:19px 20px;margin-bottom:14px;
cursor:pointer;position:relative;
transition:border-color .12s,box-shadow .12s;
}
.bk:hover{border-color:var(--line-strong)}
.bk.on{border-color:var(--free-green);box-shadow:0 0 0 3px rgba(31,107,69,.10)}
.bk:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.bk picture{display:block;flex:0 0 auto;align-self:flex-start}
/* HER SHADOW, PLUS A HAIRLINE, 2026-09-22 (round 14). Measured: the
covers are 104px in both builds and the art fills 97-99% of the box in
both, so nothing here is smaller than hers. What differs is the ground:
her cards are WHITE under three dark covers, ours are cream under a
cream-edged Airport Directory, so its edge dissolved into the card. A
1px inset of the page's own ink at 12% gives a light cover an edge
without putting a border on the art. */
.bk img{
display:block;width:104px;height:auto;
border-radius:5px;
box-shadow:0 8px 22px rgba(0,0,0,.22), 0 0 0 1px rgba(17,63,68,.12);
}
.bkr{flex:1;min-width:0}
.bk p{margin:0;max-width:none}
.bk .bkn{
font-family:var(--serif);font-size:20px;font-weight:700;line-height:1.25;
color:var(--ink);padding-right:38px;
}
.bk .bkm{
font-family:var(--ui);font-size:12px;letter-spacing:.1em;font-weight:700;
text-transform:uppercase;
color:color-mix(in srgb, var(--accent) 50%, var(--line-strong));
margin:5px 0 8px;
}
@supports not (color:color-mix(in srgb,red 50%,blue)){
.bk .bkm{color:#976247}
}
/* THE ONE LINE HER CARDS DO NOT HAVE. The Cruise Rule Book is Thomas
Ashford's, and the card names him before it says anything else. Set
as her `.pairname small`: italic, muted, a step down from the copy. */
.bk .bkby{
font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.4;
color:var(--ink-mute);margin:-3px 0 6px;
}
.bk .bkd{font-family:var(--serif);font-size:15px;line-height:1.6;color:var(--ink-soft)}
.bkl{
margin:9px 0 0;padding-left:19px;
font-family:var(--serif);font-size:14.2px;line-height:1.65;color:var(--ink-soft);
}
.bk .tick{
position:absolute;top:17px;right:17px;
width:26px;height:26px;border-radius:50%;
border:2px solid var(--line-strong);background:var(--tile);
display:flex;align-items:center;justify-content:center;
font-size:15px;line-height:1;color:var(--tile);font-weight:700;
}
.bk.on .tick{background:var(--free-green);border-color:var(--free-green);color:#fff}
.bk .yours{
position:absolute;bottom:15px;right:18px;
font-family:var(--ui);font-size:10px;letter-spacing:.12em;font-weight:700;
text-transform:uppercase;color:var(--ink-mute);
}
/* The Rule Book card does nothing on a tap, so it does not pretend to. */
.bk.is-locked{cursor:default}
.bk.is-locked:hover{border-color:var(--free-green)}
.byo-bar{
position:fixed;left:0;right:0;bottom:0;z-index:40;
background:var(--tile);
border-top:1px solid var(--line);
box-shadow:0 -8px 30px rgba(17,63,68,.10);
padding:13px 16px;
}
.byo-barin{
max-width:900px;margin:0 auto;
display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
/* HER RATIO AGAIN. On her bar the price block is the bigger half - 253
against her 194px button at 1280, 1.30 : 1 - because her price line is
"$39.99 $59.99 SAVE $20". Ours read "$27 $79 Save $52" and came out at
160 against 187, the wrong way round. The block takes her share of the
bar as a floor and still grows with its own text. At 560 and below hers
takes two thirds of the bar, which is what pushes her button onto a row
of its own; ours does the same now. */
.byo-price{flex:0 1 auto;min-width:28.1%}
@media (max-width:560px){
.byo-price{min-width:65.7%}
}
.byo-now{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--accent)}
.byo-was{
font-family:var(--serif);font-size:17px;color:var(--ink-mute);
text-decoration:line-through;margin-left:8px;
}
.byo-save{
display:inline-block;margin-left:8px;vertical-align:4px;
background:var(--free-green);color:#fff;
font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;
padding:3px 9px;border-radius:999px;
}
.byo-cnt{font-family:var(--body);font-size:13px;color:var(--ink-mute);margin-top:2px}
.byo-go{
display:inline-block;
background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));
color:var(--btn-ink);text-decoration:none;
font-family:var(--serif);font-weight:700;font-size:17px;
padding:15px 32px;border-radius:999px;cursor:pointer;
box-shadow:
inset 0 -2px 0 0 var(--btn-lip),
inset 0 1px 0 0 rgba(255,255,255,.55),
0 8px 18px -8px rgba(10,42,46,.35);
transition:background .2s ease;
}
.byo-go:hover{
background:linear-gradient(180deg,var(--btn-top-hover),var(--btn-bot-hover));
color:var(--btn-ink);
}
.byo-go:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.bk,.byo-go{transition:none}}
@media (max-width:560px){
.bk{gap:14px;padding:15px}
.bk img{width:78px}
.bk .bkn{font-size:18px}
.byo-now{font-size:27px}
.byo-go{padding:13px 22px;font-size:16px}
}
/* ROUND 12 (c), 2026-09-22 - THE WALLET BUTTON ON THE CARD.
Collapsed until Whop's frame inside it has height; landing.js adds
.is-live then. Not display:none, because a frame that is not laid out
cannot be measured. 10px under it is the gap Bertha's .pairbtns keeps
between two stacked buttons, rounded to our 10px radius family. */
/* [the wallet button's slot is gone, 2026-09-25 - see the block at the end] */
/* ==================================================================
ROUND 13, 2026-09-22 - THE CHECKOUT HEADER, THE WAIT, AND THE
WALLET BUTTON IN THE PRICE BAR.
------------------------------------------------------------------ */
/* [moved to checkout.css, 2026-09-24] */
/* The bar's buy column: the wallet button above the buy button, the same
order and the same 10px gap the product card uses. */
/* ==================================================================
CVR ROUND 1, 2026-09-24 - 02 IS SIX RULES FROM THE BOOK.
------------------------------------------------------------------ */
/* A figure narrower than the 64px floor sat at the LEFT of it: the credit
cell is a flex row, and text-align does not move flex items. */
.mx-col li.mx-credit > span:last-child{justify-content:flex-end}
/* ==================================================================
CVR ROUND 2, 2026-09-24 - THE PAYMENT MARKS (the bump's rules are in checkout.css).
------------------------------------------------------------------ */
/* The brands' own full-colour marks, 16px tall, 6px apart, under the
product card's secure line (8px below it) and under the Ready button.
The sprite they draw from is laid out nowhere. */
.pm-sprite{position:absolute;width:0;height:0;overflow:hidden}
.paymarks{
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;
list-style:none;margin:8px 0 0;padding:0;
}
.paymarks li{margin:0;padding:0;line-height:0}
.paymarks li::before{content:none}
.paymarks svg{display:block;height:16px;width:25.33px}
.lastcall .paymarks{margin-top:14px}
/* [moved to checkout.css, 2026-09-24] */
/* ==================================================================
CVR ROUND 3, 2026-09-24 - THE HERO'S THREE CHECKS.
One line each from 821px up. Measured at 1280: the longest needs 483px
at 19.08px against a 477px column and a 420px (36ch) list cap. One font
step down - 18px, the size the checks already have on a phone - brings
it to about 457px, and the cap comes off so the list can use the column
it sits in. The column and the photograph do not move.
Where they do wrap (a phone, or 821-1279), the two lines are balanced so
no last line is a single word.
------------------------------------------------------------------ */
@media (min-width:821px){
.hero-text .hero-points{max-width:none}
.hero-text .hero-points li{font-size:18px}
}
.hero-text .hero-points li{text-wrap:balance}
/* [moved to checkout.css, 2026-09-24] */
/* ==================================================================
2026-09-25 (owner) - /bundle ON A PHONE.
1. THE BAR IS ONE ROW, as the home page's sticky bar is: price, strike,
SAVE and the count on the left, the button on the right. The price
column shrinks and may wrap inside itself (SAVE drops under the price
at 360); the button keeps its width and never wraps. Bertha's
two-thirds floor at <=560 is what used to push the button onto a row
of its own, and it goes. The page's bottom padding is the bar's own
height, set by js/bundle.js; 150px stays only as the no-script floor.
2. "THE ONE YOU CAME FOR" is a line of its own under the bullets, in the
text column, so it cannot sit on top of a bullet at any width. It was
absolute in the card's corner and covered the last bullet on phones.
------------------------------------------------------------------ */
.byo-barin{flex-wrap:nowrap}
.byo-price{flex:1 1 auto;min-width:0}
.byo-go{flex:none;white-space:nowrap}
@media (max-width:560px){
.byo-bar{padding:10px 12px}
.byo-barin{gap:10px}
.byo-price{min-width:0}
.byo-now{font-size:24px}
.byo-was{font-size:15px;margin-left:6px}
.byo-save{font-size:10.5px;margin-left:6px;padding:2px 7px}
.byo-cnt{font-size:12px}
.byo-go{padding:12px 16px;font-size:15px}
}
.bk .yours{position:static;display:block;margin:10px 0 0;text-align:left}