. Same trap the offer box hit with `.offer-detail > p`. */ .xi .xi-eyebrow{ display:block;margin:0 0 18px;max-width:none; font-family:var(--ui);font-size:.74rem;font-weight:600; letter-spacing:.24em;text-transform:uppercase;color:var(--accent); }.xi h2{font-size:1.9rem;line-height:1.14;margin:0 0 14px;padding-right:1.4rem; /* SENTENCE CASE, like the rest of the section headings on this page and like the reference's own. h1-h4 are uppercase site-wide in styles.css; this line is a sentence, ends in a full stop, and carries a price in the middle of itself that uppercase does nothing for. Size, weight, colour, line-height, margin and the 1.4rem the close button needs are all untouched - this is the only added declaration. */ text-transform:none} /* His .hero__headline em treatment, the same one .hero h1.long em carries: italic and in the accent. Already here, and now it has a $27 to hold. */ .xi h2 em{font-style:italic;color:var(--accent)}.xi p{font-size:1rem;line-height:1.5;color:var(--ink-soft);margin:0 0 22px;max-width:none}.xi .xi-small{ font-family:var(--ui);font-size:.72rem;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-mute);margin:16px 0 0;max-width:none; }.xi .xi-small a{color:var(--accent);text-decoration:none}.xi .xi-small a:hover{color:var(--accent-dark);text-decoration:underline}.xi-close{ position:absolute;top:14px;right:18px;background:none;border:0; font-family:var(--serif);font-size:1.8rem;line-height:1; color:var(--ink-mute);cursor:pointer; /* our floor, not his - see the note above */ display:flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:0; }.xi-close:hover{color:var(--ink)} /* NO MOBILE OVERRIDE, on purpose. Checked: his .modal__card appears in none of his six breakpoints, and his live page renders 50px 42px 36px and a 1.9rem headline at 390 exactly as it does at 1440. He does not shrink this card on a phone, so neither does this one. */ /* His modal button is btn--block: full width. A modifier on .ep-btn,the same way .ep-btn--invert is - the padding,type,arrow and hover all come from there. Scoped to .xi so it outranks .ep-btn,which is declared later in this file and would otherwise win on source order at equal specificity. */ .xi .ep-btn--block{display:flex;width:100%;justify-content:center} /* ================================================================== FAQ CASING - THE UPPERCASE WAS IN CSS, NOT IN THE MARKUP. Both strings are typed sentence case in index.html and were being transformed on the way to the screen by two separate rules: the H2 styles.css:86 h1,h2,h3,h4{...text-transform:uppercase} a GLOBAL heading rule - every heading on the page the questions landing.css .drop > summary{...text-transform:uppercase} Neither can be edited where it sits. The global one carries the other headings on the page and the summary one carries the .drop component, which is not FAQ-only. So both are overridden here, scoped to #faq and to nothing else, and only the transform is touched - family, size, weight and tracking all stay exactly as they were. THE EYEBROW IS DELIBERATELY NOT IN THIS RULE. `COMMON QUESTIONS` gets its capitals from .eyebrow's own text-transform in styles.css and stays uppercase, as asked. ================================================================== */ /* DOWN 10% FROM WHAT IT WAS, AT EVERY WIDTH, ladder preserved. The global h2 ladder is 2.15rem with a 1.75rem step under 900px, which rendered 38.70 / 31.50 / 29.75px. x0.9 gives 1.935rem and 1.575rem, so 34.83 / 28.35 / 26.78px. Stated in rem, not px, because the ask was a proportional reduction of the existing ladder rather than a match to a figure of his - this heading has no counterpart on his page. */ #faq h2{text-transform:none;font-size:1.935rem} @media (max-width:900px){#faq h2{font-size:1.575rem}} #faq .drop > summary{text-transform:none} /* THE OFFER HEADLINE, SCOPED THE SAME WAY AND FOR THE SAME REASON. `.offer-h` is typed sentence case in index.html; its capitals came from the same global styles.css:86 `h1,h2,h3,h4{...text-transform:uppercase}` rule. Scoped to #buy so it moves this heading and nothing else - the family, the 2.35rem/2.1rem/1.55rem size ladder, the weight and the .02em tracking are all left exactly where they were. */ #buy .offer-h{text-transform:none} /* And the What You Get headline, third of the same kind. Same global styles.css:86 rule, same scoped override, same nothing-else-moves. */ #whatyouget h2{text-transform:none} /* ---------- responsive ---------- */ @media (max-width:960px){.offer-h{font-size:2.1rem}.offer-grid{grid-template-columns:1fr;gap:1.8rem}.cards{grid-template-columns:repeat(2,1fr)}.howgrid{grid-template-columns:1fr;gap:1.8rem}.about,.faq{grid-template-columns:1fr;gap:2rem}.books,.tricks,.getlist{grid-template-columns:1fr;gap:1.2rem}.gi{flex-direction:column;gap:.2rem}.gi b{width:auto} } @media (max-width:820px){.hero-in{grid-template-columns:1fr;grid-template-areas:"img" "text";row-gap:1.6rem;text-align:center} /* Smaller than the desktop cap: stacked above the headline on a phone, 24rem of photo filled the screen before a word had been read. */ .hero-media{max-width:16.8rem}.hero-text{align-items:center}.hero h1{max-width:none}.best,.hero-points,p.lede,.offer-lede{margin-inline:auto} /* .best JOINS .hero-points IN STAYING LEFT-ALIGNED. .hero-in above sets text-align:center for the stacked hero, and .best inherited it. With a floated ::first-letter that is what broke the wrap: each line was centred inside its own shortened line box, so no two lines below the cap began at the same x. Measured at 390 before this rule, the six line starts read 15.59 / 67.80 / 69.45 / 17.48 / 27.58 / 23.72. Elias's .hero__sub is text-align:start at every one of his breakpoints - he never centres the hero column - and his line starts read 22 / 72.75 / 72.75 / 72.75 / 22 / 22: three lines flush to the cap, then back to the paragraph edge. The ::first-letter block itself is already his value for value (float, 8px 12px -2px 0 margin, .85 line-height, 3.4em, no text-indent on either side); alignment was the only thing left. */ .best,.hero-points{text-align:left}.btn-row{justify-content:center}.assure{align-items:center}.promise{margin-inline:auto}.aside-in{align-items:center;text-align:center}body{padding-bottom:4.6rem} } @media (max-width:620px){.cards{grid-template-columns:1fr}.tally{grid-template-columns:repeat(2,1fr)}.ty:nth-child(3){border-left:0}.ty:nth-child(n+3){border-top:1px solid #1E3145}.hs{padding:0 .4rem}.hs b{font-size:1.35rem}.hs span{font-size:.48rem;letter-spacing:.07em}.strip-in{flex-direction:column;align-items:flex-start;gap:.4rem}.closing-cta h2{font-size:1.8rem} } /* ---------- audiobook chip ---------- */ /* Outlined rather than solid so it reads as a format label and never competes with a price or a button. */ .audio-tag{ display:inline-flex;align-items:center;gap:.35em; background:transparent;color:var(--accent); border:1px solid var(--accent);border-radius:2px; font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.1em; font-size:.54rem;padding:.12rem .45rem;margin-right:.5rem;vertical-align:.12em; }.audio-tag svg{width:.95em;height:.95em;flex:none} /* ---------- graceful gaps where art is still missing ---------- */ /* Each frame holds an that deletes itself when the file is absent. :empty is no use here because the whitespace between the tags counts as a child node,so the test is "has no img" instead. A missing asset then costs a layout column rather than showing a broken box on a live page. */ .about-shot:not(:has(img)){display:none}.about:has(.about-shot:not(:has(img))){grid-template-columns:1fr} /* ---------- reviews ---------- */ /* Five cards. Flex rather than grid so the last row of two centers itself instead of hanging off to the left,which is what a three column grid does with an odd count. */ .reviews{display:flex;flex-wrap:wrap;gap:1.3rem;justify-content:center}.review{ flex:1 1 19rem;max-width:22rem; background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--sage); border-radius:4px;padding:1.4rem; box-shadow:0 1px 2px rgba(10,29,49,.04),0 6px 16px -12px rgba(10,29,49,.3); transition:transform .18s ease,box-shadow .18s ease; }.review:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(10,29,49,.06),0 14px 24px -14px rgba(10,29,49,.4)}.review-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem}.review-head b{ font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.08em; font-size:.76rem;color:var(--ink-soft); }.review h3{font-size:1.05rem;line-height:1.3;margin:0 0 .5rem;color:var(--ink)}.review p{font-size:.92rem;line-height:1.6;color:var(--ink-soft);margin:0;max-width:none} @media (max-width:620px){.review{flex:1 1 100%;max-width:none} } /* ---------- headline figure, claim basis ---------- */ .money{color:var(--free-green)}.hero h1{max-width:19ch}.claim-basis{ font-size:.78rem;line-height:1.5;color:var(--ink-mute); max-width:44ch;margin:-.6rem 0 1.3rem; } /* ---------- proof pill ---------- */ /* Faces, stars and the figure, sitting under the buy button. Wraps to two rows in the narrow offer column rather than squeezing the faces. */ /* The portrait ring is present but EMPTY, by decision: no stock photography and no generated faces, real buyers or nothing. One circle rather than the source's overlapping five - five empty circles read as broken images. .face already carries the ground, the border and the outer ring, so the empty state needs nothing except to not be mistaken for a missing image. */ @media (max-width:520px){ } /* ---------- the pot on the buttons ---------- */ /* A stockpot with the lid ajar pops out of the corner on hover and lets three wisps of steam go. Injected by landing.js so every .btn gets one without the markup repeating it. Purely decorative,hence aria-hidden. */ .btn{position:relative;overflow:visible}@media (prefers-reduced-motion:reduce){}@media (prefers-reduced-motion:reduce){} /* ---------- the arithmetic ---------- */ /* The weekly figure is the working; the annual column is the result. Keeping the working visible is the whole point of the section. */ @media (max-width:620px){ } /* ---------- masthead line above the headline ---------- HIS .hero__mark, MEASURED ON THE LIVE PAGE AT 1920 AND 390 - the two widths return identical values, so there is no responsive step and none is invented here either: display flex | align-items center | gap 16px | margin 0 0 36px --mono | 11.84px | uppercase | letter-spacing 3.7888px | line-height 1.62 first span weight 700, his accent hr flex 1, height 1px, border-top 1px solid his hairline second span weight 400, his muted THE NUMBERS ARE PX AND THAT IS DELIBERATE. His 11.84px is .74rem against a 16px root; ours is 18px, so .74rem here would render 13.32px and miss him by 1.5px. The build already writes this exact figure as px for the same reason at #ledger .eyebrow. 3.7888px / 11.84px is .32em, and that is written as an em so it tracks the size if the size ever moves. COLOURS ARE OURS, NOT HIS, and that is the same conversion the rest of this port makes: his oxblood accent #7A1F0E -> --accent, his warm taupe #786B53 -> --ink-mute, his hairline #C4B58A -> --line-strong. Both label colours are already in the contrast table against paper - --accent at 7.13 : 1 and --ink-mute at 5.17 : 1. The rule is non-text. */ .hero-mark{ /* .hero-text is a flex column at align-items:flex-start, so without this the mark shrink-wraps its own two labels and the rule between them - a flex item at flex:1 inside a box with no spare width - resolves to 0px. His .hero__copy is a block, where full width is the default. */ align-self:stretch; display:flex;align-items:center;gap:16px;margin:0 0 36px; font-family:var(--mono);font-size:11.84px;line-height:1.62; letter-spacing:.32em;text-transform:uppercase;color:var(--ink-mute); } .hero-mark span{font-weight:400} .hero-mark span:first-child{font-weight:700;color:var(--accent)} .hero-mark hr{ flex:1;height:1px;margin:0; border:0;border-top:1px solid var(--line-strong); } /* BELOW 420px THE TRACKING COMES IN, AND ONLY THE TRACKING. His two labels are 21 characters (Elias Yoder / An Almanac); ours are 34, so at his .32em they stop fitting one row before he would ever notice. Measured in our column: 390px holds one row down to .21em, 360px down to .14em. Left at .32em both labels wrap to two rows each and the rule between them - a flex:1 item with nothing left to take - resolves to 0px, which loses the one thing the line is for. .20em is under both measured limits with a little room. Size, weights, gap, colour and the rule itself are untouched, so this is his line at a shorter step, not a different line. */ @media (max-width:419.98px){ .hero-mark{letter-spacing:.20em} } /* ---------- long-form hero headline ---------- The short 19ch headline is replaced by a full-width one, laid out the way the Frank Miller hero does it. Same display face as the rest of this site; only the measure, size and case change. SIZE, LINE-HEIGHT AND TRACKING ARE HIS, READ OFF THE LIVE PAGE. Sampled at thirteen widths from 1920 down to 360, his .hero__headline is one clamp with two constants either side of it: 1920 / 1600 / 1440 57.6px lh 1.05 ls -0.022em 1200 52.8px = 4.4vw 1024 45.056px = 4.4vw 900 39.6px = 4.4vw 820 36.08px = 4.4vw 760 and below 35.2px floor -> clamp(35.2px, 4.4vw, 57.6px) caps at 1309px and floors at 800px, and lh 1.05 / ls -0.022em never move at any width. Written here as the clamp rather than as three breakpoints, which is both what he does and the shape #ledger h2 already uses on this page. The two @media steps this replaces were ours and are gone with it. WEIGHT FIRST, THEN SIZE - AND THE ORDER IS THE WHOLE POINT. His .hero__headline is Fraunces at weight 400. Ours ran Libre Baskerville at 700, and a 700 serif eats far more width per character than a 400 one, so matching his size on top of our bolder weight was never going to reproduce his line count. The weight is his now, and the size is then the largest that still breaks the way his does in the column we actually have. THE COLUMN IS NOT WIDENED. .hero-in stays 56fr / 44fr and the hero image keeps its 560px track. Our text column is 477px against his 575px, and the sizes below are measured in ours, not derived from his. THE SIZES ARE BINARY-SEARCHED IN THE LIVE COLUMN, not derived, in 0.1px steps against the real rendered line count, by tools/_h1_fit.py: 1920 and 1440 column 476.92px 38.8px is the largest holding 2 lines (38.9px breaks to 3) 390 column 358.80px his own 35.2px floor holds 3 lines so the cap moves 57.6px -> 38.8px and NOTHING ELSE IN THE CLAMP MOVES: the 35.2px floor is his, the 4.4vw slope is his, line-height 1.05 is his and letter-spacing -0.022em is his, at every width. WEIGHT 400 BOUGHT 1.8px, NOT SIX, and the reason is the face rather than the arithmetic. Measured with all four cuts force-loaded and font-synthesis off, Libre Baskerville 700 sets this headline only 2.22% wider than 400 (2660.6px against 2602.8px at 100px) - its two weights differ in colour far more than in advance width. At 700 the largest two-line size was 37.0px; at 400 it is 38.8px, which is that 2.22% and nothing more. His 57.6px would need a 740px column, and the column is not being widened. The 390 floor is his 35.2px and stays there deliberately. The largest size that still holds three lines at 390 is 40.4px - larger than the desktop cap, which would set the headline bigger on a phone than on a 1920 screen and make the clamp invalid besides (min above max). Recorded, not applied. THE FONT REQUEST MOVED WITH THE WEIGHT, not in addition to it: Libre Baskerville was requested at ital,wght@0,700;1,700 and is now 0,400;1,400. The hero headline is the only thing on the site in this face, so that is the same two files, not two more. Both are real cut faces on gstatic - the roman and a true italic - so nothing is synthesised here either. */ .hero h1.long{ font-family:"Libre Baskerville",Georgia,serif;font-weight:400; max-width:none;text-transform:none; font-size:clamp(35.2px,4.4vw,38.8px);line-height:1.05;letter-spacing:-.022em; } /* ---------- order-block ticks, structural ---------- The tick used to be an absolutely positioned ::before with the space held open by padding-left. Every mobile rule that set `padding` as a shorthand silently reset that padding-left to 0, so the disc landed on top of the first characters. It is now a real grid column: it reserves its own width and cannot overlap text at any viewport. col 1 = tick, col 2 = text, col 3 = price. No absolute positioning, no negative margins, no text-indent. The disc carries the check as a background image so the whole mark is one grid item. */ .stack li{ display:grid; /* Two columns now, not three: the per-row prices are gone. */ grid-template-columns:.85rem minmax(0,1fr); column-gap:.6rem;row-gap:.15rem; align-items:start; padding:.42rem 0; border-bottom:1px solid var(--line); font-size:.95rem;line-height:1.35; } /* THE LIVE SITE'S ARROW, NOT A GREEN TICK. theseniorflyer.com marks these rows with ▸ at .7rem in its accent. Same glyph, same size, palette A's accent - and the green tick is retired from this list so that the four benefit bullets below are the only place on the page it appears. */ .stack li::before{ content:"\25B8"; grid-column:1;grid-row:1;position:static; width:auto;height:auto;border-radius:0;background:none; color:var(--accent);font-size:.7rem;line-height:1; justify-self:end; margin-top:.42rem; /* optical: level with the first text line */ }.stack li::after{content:none} /* the old separate check mark */ .stack li > span{grid-column:2;grid-row:1;min-width:0}.stack li > em{grid-column:3;grid-row:1;justify-self:end} /* The total is not an item: no tick, text and figure only. */ .stack li.total{grid-template-columns:minmax(0,1fr) auto;padding-left:0}.stack li.total::before{content:none}.stack li.total > span{grid-column:1}.stack li.total > em{grid-column:2} /* Narrow: the price drops under the text for EVERY row, aligned to the text column so the tick column stays clear. Consistent across all rows. */ @media (max-width:560px){.stack li{grid-template-columns:1.1rem minmax(0,1fr);}.stack li > em{grid-column:2;grid-row:2;justify-self:end}.stack li.total{grid-template-columns:minmax(0,1fr)}.stack li.total > em{grid-column:1;grid-row:2;justify-self:end} } /* ---------- hero sizing, matched to the Frank build ---------- On mobile the photo fills the column instead of being capped at 16.8rem. */ @media (max-width:820px){.hero-media{width:100%;max-width:none} } /* ---------- desktop hero sizing, matched to the Frank build ---------- Her image column was 44fr but the photo was capped at 24rem, which is narrower than the column it sits in, so it never filled it. Frank's cap (25rem) sits above his column width, so his photo fills the column and the cap never binds. Same three values here: column ratio, cap, frame padding. Scoped to min-width:821px so the mobile sizing is untouched. */ @media (min-width:821px){ /* Her photo is landscape where Frank's is portrait, so matching his column ratio left it short. The image column takes 48fr and the cap sits just above it, so the photo fills the column and the cap never binds. */ .hero-in{grid-template-columns:52fr 48fr}.hero-media{max-width:28rem}.hero-frame{padding:.8rem} } /* Star row above the reviewer name, matching the sites' shared treatment. */ .review .stars{font-size:1.05rem;margin-bottom:.15rem} /* ---------- per-review star ratings ---------- Partial fills via a gradient clipped to the glyphs, so a rating between whole stars renders honestly. letter-spacing is zeroed on these so each star is exactly one fifth of the width and --pct maps 1:1 to the rating (4.5 -> 90%, 4.9 -> 98%). Aggregate pills elsewhere are untouched. */ .review .stars{ letter-spacing:0; background-image:linear-gradient(90deg,var(--accent) var(--pct,100%),#D9D0B6 var(--pct,100%)); -webkit-background-clip:text;background-clip:text; color:transparent; } /* ---------- drop-downs: FAQ and contents ---------- */ .drop{border-top:1px solid var(--line);margin:0}.drop:last-of-type{border-bottom:1px solid var(--line)}.drop > summary{list-style:none;cursor:pointer;padding:.9rem 2rem .9rem 0;position:relative; font-family:var(--ui);text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;color:var(--ink)}.drop > summary::-webkit-details-marker{display:none}.drop > summary::after{content:"";position:absolute;right:.35rem;top:1.2rem;width:.6rem;height:.6rem; border-right:2px solid var(--accent);border-bottom:2px solid var(--accent); transform:rotate(45deg);transition:transform .18s ease}.drop[open] > summary::after{transform:rotate(-135deg)}.drop-body{padding:0 0 1rem}.drop-body p{font-size:.95rem;line-height:1.5;color:var(--ink-soft);margin:0 0 .7rem;max-width:none}.drop-body h3{font-size:1rem;margin:.9rem 0 .25rem}.tag-main,.tag-free{font-family:var(--ui);text-transform:uppercase;letter-spacing:.1em;font-size:.56rem; padding:.14rem .45rem;border-radius:2px;margin-left:.4rem;vertical-align:.15em;color:#fff}.tag-main{background:var(--accent)}.tag-free{background:var(--free-green)}.origin-strip{padding:2rem 0 0}.origin-strip p{font-family:"Lora",Georgia,serif;font-size:1.02rem;line-height:1.55;color:var(--ink-soft);margin:0 0 .5rem;max-width:52ch} @media (prefers-reduced-motion:reduce){.drop > summary::after{transition:none}} /* ---------- guarantee seal ---------- An insignia, not a caption: solid shield, heavy border, no gradient, no glow, no shine. Same mark and same position on all three sites. */ .seal-badge{ display:inline-flex;align-items:center;gap:.85rem; border:3px solid var(--accent);background:var(--tile); padding:.75rem 1.15rem;border-radius:2px;max-width:31rem; }.seal-shield{width:2.5rem;height:3rem;flex:none;fill:var(--accent)}.seal-shield .tick{stroke:var(--tile)}.seal-text b{display:block;font-family:var(--ui);text-transform:uppercase;letter-spacing:.06em; font-size:.95rem;line-height:1.1;color:var(--accent)}.seal-text > span{display:block;font-size:.82rem;line-height:1.35;color:var(--ink-soft);margin-top:.22rem} @media (max-width:560px){.seal-badge{gap:.65rem;padding:.6rem .8rem}.seal-shield{width:2rem;height:2.4rem}.seal-text b{font-size:.85rem}.seal-text > span{font-size:.76rem} } /* ---------- review rating: 4.5 stars plus the number ---------- */ .rating{display:inline-flex;align-items:center;gap:.42rem}.rating .stars{display:inline-block;letter-spacing:0; background-image:linear-gradient(90deg,var(--accent) var(--pct,90%),#D9D0B6 var(--pct,90%)); -webkit-background-clip:text;background-clip:text;color:transparent}.rating-num{font-family:var(--ui);font-size:.82rem;letter-spacing:.04em;color:var(--ink)} /* ---------- guarantee seal, tightened ---------- */ .seal-badge{gap:.6rem;padding:.5rem .8rem;max-width:26rem;border-width:2px}.seal-shield{width:1.7rem;height:2rem}.seal-text b{font-size:.78rem;letter-spacing:.05em}.seal-text > span{font-size:.74rem;line-height:1.3;margin-top:.15rem} @media (max-width:560px){.seal-badge{gap:.5rem;padding:.45rem .65rem}.seal-shield{width:1.45rem;height:1.75rem}.seal-text b{font-size:.72rem}.seal-text > span{font-size:.7rem} }.guarantee-inline{padding:.55rem .7rem;gap:.6rem}.guarantee-inline h3{font-size:.82rem}.guarantee-inline p{font-size:.75rem;line-height:1.3} /* ================================================================== Round four corrections. Appended last so these win the cascade. ================================================================== */ /* 1. Decorative rules removed. The hairline that ran out to the right of every eyebrow label,and the divider rules between blocks,carried no information. White space separates the sections instead. */ .eyebrow::after,.band.ink .eyebrow::after{content:none;display:none}.eyebrow{gap:0}.buy-block{border-top:0;padding-top:0}.paybar{border-top:0} /* 2. Proof pill reduced to a compact badge: smaller faces, tighter padding, less height. Same size on all three sites. */ .rating-num{font-size:.75rem} /* 3. The lock line and the card marks are one row, on one baseline, rather than two centered blocks at different heights. */ .paybar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:.5rem .8rem;margin-top:1.6rem;padding-top:1.1rem;text-align:center}.paybar .lockline,.lockline{margin:0;max-width:none;display:inline-flex;align-items:center;gap:.3rem}.paybar .pays,.pays{margin:0;align-items:center} /* 4. The guarantee seal sits clear of the hero buttons at every width. It was flush against them, so a wrapped button clipped it. */ /* HERO PAIR ONLY. The hero text column is 477px and the two buttons at the page's 2.2rem side padding need 271 + 234 + 16 = 521px,so they wrapped to two rows at every desktop width. 1.55rem takes 11.7px off each side,which is 46.8px off the pair - 458px,inside the column with the 16px gap intact. Height is untouched (min-height stays 74px) and neither label wraps. Scoped to .top-cta: every other .btn on the page keeps 2.2rem. */ .hero .btn-row.top-cta .btn{padding-inline:1.24rem}.hero .btn-row.top-cta{margin-bottom:0}.assure,.top-assure,.hero .assure,.hero .top-assure{margin-top:1.15rem;position:static;clear:both}.seal-badge{position:static;float:none;transform:none;margin:0} @media (max-width:768px){.hero .btn-row.top-cta{margin-top:1.2rem}.assure,.top-assure,.hero .assure,.hero .top-assure{margin-top:1rem} } /* ------------------------------------------------------------------ Review card details, made unconditional. The partial-fill stars were drawn with background-clip:text over a gradient and color:transparent. When the clip does not take effect the glyphs stay transparent and the card loses its stars entirely, which is what happened. The solid color is now the base state and the gradient only replaces it where the clip is actually supported. ------------------------------------------------------------------ */ .rating{display:inline-flex;align-items:center;gap:.42rem;visibility:visible} @supports ((-webkit-background-clip:text) or (background-clip:text)){.rating .stars,.review .stars{ background-image:linear-gradient(90deg,var(--star-gold,var(--accent)) var(--pct,95%),var(--star-dim,#D9D0B6) var(--pct,95%)); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent} }.rating-num{font-size:.78rem;color:var(--ink);opacity:1;white-space:nowrap}.review .rating-num{color:var(--ink)}.review .review-head{display:flex;align-items:center;gap:.85rem}.review .review-head > div{min-width:0;display:flex;flex-direction:column;gap:.12rem}.review b{display:block;white-space:normal} /* ================================================================== One spacing scale for every section break, every page, all three sites. Sections were running 130-266px of dead space between them: band padding stacked on top of the previous block's own bottom margin, plus body/footer padding still reserving room for a sticky bar that no longer exists. ================================================================== */ :root{--sec:2.2rem;--sec-in:1.15rem} @media (max-width:768px){:root{--sec:1.4rem;--sec-in:.85rem}} /* Every section break is the same value, top and bottom. */ .band{padding-top:var(--sec);padding-bottom:var(--sec)} /* Stacked margins: the section padding is the gap, so the first and last child inside a section do not add their own on top of it. */ .band > .wrap > *:last-child,.band > *:last-child,.band > .wrap > *:last-child > *:last-child{margin-bottom:0}.band > .wrap > *:first-child,.band > *:first-child{margin-top:0} /* Inside sections: heading to body, block to block. */ .section-head{margin-bottom:var(--sec-in)}.band h2{margin-bottom:.5rem}.band .eyebrow{margin-bottom:.6rem}.offer-top{margin-bottom:var(--sec-in)}.paybar{margin-top:var(--sec-in);padding-top:var(--sec-in)}.inside-cta{margin-top:var(--sec-in)}.tally{margin-bottom:var(--sec-in)}.buy-block{margin-top:var(--sec-in);padding-top:var(--sec-in)}.assure,.top-assure,.hero .assure,.hero .top-assure{margin-top:1rem} /* Room reserved for sticky bars that are no longer on the page. */ body{padding-bottom:0}.foot{padding:1.6rem 0} /* The legal and thank-you pages do not use .band; they wrap content in main / .doc / .sec. Same scale applied there so every page on the site breaks its sections at the same distance. */ .doc,.sec,.sec-downloads{padding-top:var(--sec);padding-bottom:var(--sec)}body > main{padding-top:var(--sec);padding-bottom:var(--sec)}.doc h2,.sec h2,main > .wrap > h2{margin-top:var(--sec-in);margin-bottom:.4rem}.doc > *:first-child,.sec > *:first-child,main > .wrap > *:first-child{margin-top:0}.doc > *:last-child,.sec > *:last-child,main > .wrap > *:last-child{margin-bottom:0}.updated{margin-top:var(--sec-in)}.card{margin-bottom:var(--sec-in)} /* ================================================================== Narrow-phone fit. Nothing crosses a container edge at 430, 390 or 360: long titles wrap instead of running into the price, the card marks wrap instead of pushing off the right edge, and the three-column stats bar steps down rather than clipping. ================================================================== */ @media (max-width:480px){.card,.quote,.bump-wrap,.seal-badge,.paybar,.pay-head,.card *,.quote *,.bump-wrap *,.seal-badge *,.review *,.stack li *{overflow-wrap:anywhere} /* Product box: title wraps, price and save chip keep their own line. */ .sum-row{flex-wrap:wrap;align-items:flex-start;gap:.45rem}.sum-name{min-width:0;flex:1 1 55%}.sum-right{flex:0 0 auto;margin-left:auto;text-align:right;white-space:nowrap} /* One time offer: text stays inside the dashed border. */ .bump-wrap{overflow:hidden}.bump-wrap p,.bump-wrap h3,.bump-wrap b{max-width:100%} /* Card marks wrap onto a second row rather than off the edge. */ .paybar{flex-wrap:wrap}.pays{flex-wrap:wrap;max-width:100%;justify-content:center} /* One compact reassurance row. */ .pay-head{flex-wrap:wrap;justify-content:center;text-align:center; gap:.2rem .55rem;font-size:.7rem} /* Front page: stats bar, order rows, pill, review cards. */ .statsbar .hs{padding:0 .3rem}.statsbar .hs b{font-size:1.15rem}.statsbar .hs span{font-size:.5rem;letter-spacing:.05em}.stack li{grid-template-columns:1rem minmax(0,1fr)}.stack li > em{grid-column:2;grid-row:2;justify-self:end}.review,.review p,.review b{max-width:100%} } @media (max-width:380px){.statsbar .hs b{font-size:1rem}.statsbar .hs span{font-size:.46rem}.pay-head{font-size:.66rem;gap:.18rem .45rem}.paybar .lockline{font-size:.52rem}.pay-label{font-size:.52rem}.pay-mark svg{height:.72rem}.pay-mark{padding:.08rem .24rem} } /* ================================================================== Stats bar on a phone. The three columns were `1fr`, which floors at the min-content width of the longest value ("5 generations", "53 years"), so the third stat ran outside its cell and off the card. minmax(0,1fr) lets the cells shrink and the value wrap. ================================================================== */ @media (max-width:560px){.statsbar .hero-stats,.hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.hs{min-width:0;padding:0 .3rem;text-align:center}.hs b{font-size:1.05rem;line-height:1.1;overflow-wrap:break-word;hyphens:none;display:block}.hs span{font-size:.48rem;letter-spacing:.04em;line-height:1.25;display:block;overflow-wrap:break-word} } @media (max-width:400px){.hs b{font-size:.95rem}.hs span{font-size:.44rem}.hs{padding:0 .22rem} } /* The value now fits its cell instead of being hyphen-free broken mid-word ("generati / ons"): words stay whole and the type steps down at each width. */ @media (max-width:560px){.hs b{font-size:.92rem;overflow-wrap:normal;word-break:normal;line-height:1.15}.hs span{overflow-wrap:normal;word-break:normal} } @media (max-width:400px){.hs b{font-size:.82rem}.hs span{font-size:.42rem} } /* ================================================================== The hero guarantee goes back to a pill. It had grown into a full bordered block with a heading and a paragraph; this is the compact rounded badge it was before, sitting the same way the proof pill below it does. It is now the only guarantee on the page. ================================================================== */ .seal-badge{ display:inline-flex;align-items:center;gap:.55rem; padding:.34rem .95rem .34rem .55rem; border:1px solid var(--line);border-radius:999px; background:var(--tile);box-shadow:none;max-width:100%; align-self:flex-start}.seal-badge .seal-shield{width:1.1rem;height:1.35rem;flex:none}.seal-badge .seal-text{ display:flex;flex-wrap:wrap;align-items:baseline;gap:.05rem .4rem;min-width:0}.seal-badge b{ font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;line-height:1.3}.seal-badge .seal-text > span{ display:inline;font-size:.8rem;line-height:1.35;margin:0} @media (max-width:560px){.seal-badge{padding:.3rem .8rem .3rem .5rem;gap:.45rem}.seal-badge b{font-size:.66rem}.seal-badge .seal-text > span{font-size:.76rem} } /* The offer-block guarantee is the same pill as the hero one, sitting under "Pay once - Yours forever" and above the proof pill, centered with the rest of that column. */ .offer-seal{margin:.7rem auto 0;align-self:center}.offer-detail .offer-seal,.buy-left .offer-seal{align-self:center} @media (max-width:560px){.offer-seal{margin-top:.55rem}} /* ------------------------------------------------------------------ Offer column, tidied. - "Pay once - Yours forever" was left aligned in a centered column. - The proof pill and the guarantee pill were sized for a tight phone layout and read as small on a desktop offer block. - The support line now sits after the reviews, so it takes its own centered rule rather than hanging off the pay row. ------------------------------------------------------------------ */ .offer-detail .trustline,.trustline{ text-align:center;display:block;width:100%;margin-left:auto;margin-right:auto}.offer-seal{padding:.44rem 1.05rem .44rem .6rem;gap:.6rem}.offer-seal .seal-shield{width:1.3rem;height:1.6rem}.offer-seal b{font-size:.78rem}.offer-seal .seal-text > span{font-size:.86rem}.helpbar{text-align:center;max-width:56ch;margin:1.1rem auto 0;font-size:.88rem} @media (max-width:560px){.offer-seal b{font-size:.74rem}.offer-seal .seal-text > span{font-size:.8rem} } /* ================================================================== Matching the Frank Miller build. ================================================================== */ /* Bridge line between the h1 and the lede: reading serif,sized between the two,muted so it supports the headline rather than competing. */ .hero-sub{ font-family:"Lora",Georgia,serif;font-weight:400; font-size:1.35rem;line-height:1.45;color:#4E5A66; max-width:44ch;margin:.55rem 0 0; }.hero-sub + .best{margin-top:1.05rem} @media (max-width:900px){.hero-sub{font-size:1.2rem;max-width:none;margin-top:.5rem}} @media (max-width:560px){.hero-sub{font-size:1.1rem;line-height:1.42}.hero-sub + .best{margin-top:.9rem}} /* The savings figure is one unit and must never break across lines. */ .hero h1 .money{white-space:nowrap} /* Total value row aligned to the price column. The item rows are a three column grid (tick / name / price); the total was two columns, so its figure sat out of line with the prices above it. */ .stack li.total{ grid-template-columns:1.1rem minmax(0,1fr) auto; column-gap:.75rem;align-items:baseline; }.stack li.total > span{grid-column:1 / 3}.stack li.total > em{grid-column:3;grid-row:1;justify-self:end;white-space:nowrap}.stack li.total em s{opacity:.55;margin-right:.4rem;font-weight:400} @media (max-width:560px){.stack li.total{grid-template-columns:1rem minmax(0,1fr) auto}.stack li.total > em{grid-column:3;grid-row:1} } /* Hero photo takes the larger share of the row, as on Frank. */ @media (min-width:821px){.hero-in{grid-template-columns:46fr 54fr;column-gap:2.4rem}.hero-media{max-width:none;justify-self:stretch} } /* ================================================================== OFFER BOX - ELIAS YODER'S STRUCTURE Ported from eliasyoder.com's .single-product / .includes block: the eyebrow, headline and lede in the copy column beside the cover, a ruled price row, a labeled value list closing on a shaded "you pay today" band, a full-width button and a small-caps foot line. Every measurement below is his, unchanged - 18px price-row padding, 16px gap, 3.2rem price, .24em/.22em/.2em tracking on the three small-caps lines, 14px list padding, the 6% tint on the today band, 20px 34px on the button. Only the palette moves: his --oxblood -> --accent his --rule -> --line his --serif -> --serif (Lora, already loaded) his --mono -> --ui (Oswald, our small-caps face) ================================================================== */ /* Not .eyebrow: that class is a flex row with a rule drawn by ::after,and Elias's tag is a plain line of tracked small caps with nothing beside it. */ /* Scoped to .offer-detail: an existing `.offer-detail > p{font-size:1rem}` outranks a bare class on these four, and silently flattened all three small-caps lines and the lede to body size. */ .offer-detail .ep-tag{ display:block;font-family:var(--ui);font-size:.74rem;letter-spacing:.24em; text-transform:uppercase;color:var(--accent);font-weight:600; margin:0 0 18px;max-width:none; }.offer-detail .ep-tag::after{content:none}.offer-detail .offer-h{ font-family:var(--display);font-size:1.9rem;line-height:1.14; margin:0 0 10px;letter-spacing:.01em; }.offer-detail .ep-lede{font-size:1.06rem;color:var(--ink-soft);line-height:1.55;margin:0 0 22px;max-width:none}.ep-price-row{ display:flex;align-items:baseline;gap:16px;flex-wrap:wrap; padding:18px 0;margin-bottom:26px; border-top:1px solid var(--line);border-bottom:1px solid var(--line); }/* THE PRICE IS SET IN PX, AND THAT IS THE POINT. Elias declares .single-product__price at 3.2rem on a 16px root, so his $47 renders 51.2px at 1920, 1440 and 390 alike - his root never moves and he has no responsive step on it. Our root is 18px, dropping to 17px under 560px, so the same 3.2rem rendered 57.6px on desktop and a 2.6rem override took it to 44.2px on a phone. Neither figure was his. A rem value cannot land 51.2px at both of our roots, so this is stated in px and the 2.6rem step below is gone. Weight, style and letterspacing were already his: 500, italic on the em, and normal tracking. FAMILY IS A DELIBERATE DIVERGENCE, decided 2026-08-28. His is Fraunces with font-variation-settings "SOFT" 100, "opsz" 144; ours stays Lora because --serif is the palette A decision that governs every other serif on the page, and Fraunces would be a whole family loaded for one element. Recorded in HANDOFF. The struck price is deliberately NOT touched - his is mono, ours is not, and that was left alone on the same call. */ .ep-price{font-family:var(--serif);font-size:51.2px;font-weight:500;color:var(--ink);line-height:1}.ep-price em{font-style:italic;color:var(--accent)}.ep-strike{font-family:var(--ui);font-size:.94rem;color:var(--ink-mute);text-decoration:line-through}.offer-detail .ep-tag-inline{margin:0}.offer-detail .ep-head{ font-family:var(--ui);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase; color:var(--accent);font-weight:700;margin:28px 0 14px;max-width:none; }.ep-includes{list-style:none;padding:0;margin:0 0 24px;border-top:1px solid var(--line)}.ep-includes li{ display:flex;justify-content:space-between;align-items:flex-start;gap:18px; padding:14px 0;border-bottom:1px solid var(--line); }.ep-name{flex:1;font-family:var(--serif);font-size:.98rem;line-height:1.45;color:var(--ink);min-width:0}.ep-name b{font-weight:700;color:var(--ink)}.ep-value{ font-family:var(--ui);font-size:.9rem;color:var(--ink-mute);font-weight:500; white-space:nowrap;padding-top:2px; }.ep-includes .ep-total{padding-top:18px;padding-bottom:18px}.ep-includes .ep-total .ep-value b{color:var(--ink);font-size:1.05rem} /* His today band bleeds 14px past the list on both sides and drops its bottom rule, so the list ends on a block of color rather than a line. */ .ep-includes .ep-today{ background-color:color-mix(in srgb,var(--accent) 6%,transparent); margin:0 -14px;padding:18px 14px;border-bottom:none; } @supports not (background-color:color-mix(in srgb,red 6%,transparent)){.ep-includes .ep-today{background-color:var(--deep)} }.ep-includes .ep-today .ep-value b{ font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--accent); } /* ---------- the CTA, Elias's button ---------- Read off eliasyoder.com's stylesheet, not off a screenshot. His offer CTA is .btn.btn--ox.btn--big - NO .btn--block. That was the error: .btn--block is display:flex/width:100%/justify-content:center and it is used elsewhere on his page, not here. His offer button is an inline-flex box sized to its own label and sitting left in the copy column. Measured on his live page it is 318px wide at 1920, 1440 and 390 alike, with max-width:none and its left edge flush with the column. Composed: .btn inline-flex, align-items center, gap 10px, 16px 28px, var(--mono) .78rem / .22em / uppercase / 500, 1.5px solid border, no border-radius, white-space nowrap, transition background .25s, color .25s, transform .15s, box-shadow .25s .btn--big padding 20px 34px, font-size .84rem .btn--ox ground and border = --oxblood hover ground and border -> --oxblood-dk, translateY(-1px), box-shadow 0 8px 18px -6px rgba(oxblood,.5) ::after content "→", var(--serif), 1.1rem, letter-spacing 0, transition transform .25s hover::after translateX(4px) THERE IS NO :active RULE ANYWHERE IN HIS STYLESHEET - checked, zero matches. The press state is the hover transform releasing. Nothing was invented to fill the gap. Palette A: --oxblood -> --accent, --oxblood-dk -> --accent-dark, his --paper -> our --paper, --mono -> --ui, --serif -> --serif. The 4px radius is ours and is kept; his button is square, so this is the one line to change if you want it exact. min-height:0 matters: our own .btn carries min-height:74px, which would override his padding-derived height. */ .ep-btn-row{margin-top:0;display:block}.ep-btn{ display:inline-flex;width:auto;max-width:none;align-items:center;gap:10px; min-height:0;padding:20px 34px; /* 13.44px, NOT .84rem. His .btn--big is .84rem on a 16px root, which renders 13.44px at every width he has. Ours resolved against 18px (17px under 560) and rendered 15.12px / 14.28px, which is where the whole last-call button mismatch came from - measured at eleven widths from 360 to 1024, his 13.44 flat against our 14.28/15.12 and his 70.5px box against our 72.86/74.66. The padding either side was already px and already his. .22em tracking is left alone and now resolves to his 2.9568px on its own. THIS RULE IS SHARED by the offer CTA, the last-call button and the modal button - all three are the same port of his .btn.btn--big and all three carried the same leak, so it is fixed here rather than scoped to one of them. Decided 2026-08-28. */ font-family:var(--ui);font-size:13.44px;letter-spacing:.22em; text-transform:uppercase;font-weight:500;white-space:nowrap; border:1.5px solid var(--accent);background:var(--accent);color:var(--paper); position:relative; transition:background .25s ease,color .25s ease,transform .15s ease,box-shadow .25s ease; }.ep-btn::after{ content:"→"; /* his glyph, written literally - a CSS escape got mangled on the way in and rendered U+0011 followed by "92" */ /* 17.6px for the same reason as the label above: his .btn::after is 1.1rem on a 16px root. The arrow is the tallest thing in the line box, so it - not the label - is what was holding the box off his 70.5px. */ font-family:var(--serif);font-size:17.6px;letter-spacing:0; /* 28.512px, which is HIS RENDERED line box, not a number of ours. Neither stylesheet declares a line-height here - his arrow inherits `normal` from Fraunces and lands 28.512px, ours inherits `normal` from Lora and lands 29.04px. The arrow is the tallest thing in the button, so that 0.528px of face metrics was the whole of the residual box difference: his 70.5px against our 71.02px, at every width. Every declared value already matched; only the faces differ, and the family divergence is deliberate. Stating his rendered leading closes it. */ line-height:28.512px; transition:transform .25s ease; }.ep-btn:hover{ background:var(--accent-dark);border-color:var(--accent-dark);color:var(--paper); transform:translateY(-1px); box-shadow:0 8px 18px -6px color-mix(in srgb,var(--accent) 50%,transparent); } @supports not (box-shadow:0 0 0 color-mix(in srgb,red 50%,transparent)){.ep-btn:hover{box-shadow:0 8px 18px -6px rgba(107,74,9,.5)} }.ep-btn:hover::after{transform:translateX(4px)} @media (prefers-reduced-motion:reduce){.ep-btn,.ep-btn::after{transition:none}.ep-btn:hover{transform:none}.ep-btn:hover::after{transform:none} }.offer-detail .ep-foot{ margin:14px 0 0;font-family:var(--ui);font-size:.7rem;letter-spacing:.2em; text-transform:uppercase;color:var(--ink-mute);text-align:center;max-width:none; } /* The trust block under the button, in a fixed order: guarantee, proof, payment. The paybar used to sit outside the grid at the foot of the whole section; it belongs with the other two. */ .offer-detail .paybar{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line)} @media (max-width:900px){.offer-detail .offer-h{font-size:1.55rem}.ep-includes li{gap:12px}.offer-detail .ep-tag{letter-spacing:.18em} } /* The four benefit bullets, now in What You Get rather than the offer box. .hero-points caps itself at 36ch for the hero column; here it has the full narrow measure to work with. */ .wyg-checks{max-width:52ch;margin:1.1rem 0 0} /* The proof pill in the testimonials section, under the disclosure line and above the first card. It was in the offer box until the sixth revision set, where .offer-detail centered it; here it has to center itself. */ /* Nothing between the small-caps line and the payment row now that the guarantee box is gone,so the paybar loses the rule it used to need. */ .offer-detail .paybar{margin-top:.9rem;padding-top:0;border-top:0} /* ================================================================== THE COVER - ELIAS YODER'S PROPORTIONS His .single-product__cover-frame is width:100% with max-width:480px and 14px of padding, sitting in the first grid track; .book-cover-real fills what is left. Measured on his live page: frame image % of grid 1920 / 1440 469.2px 441.2px 39.9 / 37.5 390 320px 292px 92.5 / 84.4 Ported as the same two rules. Our first track is 516.6px against his 469.2 - our .offer-grid is 1fr 1fr where his is 0.85fr 1.15fr - so the 480px cap governs on desktop and the image renders 452px. The grid ratio was not changed: that would move the whole offer box and was not asked for. His 320px mobile cap lands in our 960px breakpoint, his own is 980px. NO PAPER MAT. His frame carries background:var(--paper) and a page shadow behind the cover. Geometry only was ported; the mat is a visual addition nobody asked for. ================================================================== */ .offer-shot{width:100%;max-width:480px;padding:14px;margin-inline:auto}.offer-shot img{width:100%;max-width:none} /* His hover, copied from his stylesheet: transition: transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease :hover transform: translateY(-6px) THERE IS NO SCALE IN IT - checked, his hover is a lift and a shadow swap and nothing else. Nothing was invented to fill the gap. The shadow is a filter, not a box-shadow, and that is deliberate: rulebook-cover.png is RGBA with fully transparent corners, so a box-shadow would draw a rectangle around empty space. drop-shadow follows the alpha. Same durations and the same easing curve either way. */ .offer-shot img{ transition:transform .45s cubic-bezier(.2,.8,.3,1),filter .4s ease; }.offer-shot img:hover{ transform:translateY(-6px); filter:drop-shadow(0 40px 70px rgba(10,29,49,.5)) drop-shadow(0 14px 24px rgba(10,29,49,.35)); } @media (prefers-reduced-motion:reduce){.offer-shot img{transition:none}.offer-shot img:hover{transform:none} } @media (max-width:960px){.offer-shot{max-width:320px} } /* ================================================================== LAST CALL Geometry, spacing and type scale are eliasyoder.com's .order block, value for value. Color is not: this takes our own footer ground so the two close the page as one dark field. ================================================================== */ .lastcall{ position:relative;overflow:hidden; /* the footer's ground exactly - no lift, no boundary */ background:var(--ink-deep); color:var(--paper); text-align:center; padding:130px 0 110px; } /* The type sits above the bloom. There is nothing to scrim any more - the ground under the headline is plain --ink-deep, so the 13.47 : 1 the wordmark and the headline measure is the real figure, not a figure that depends on a gradient landing in the right place. */ .lc-in{position:relative;z-index:2}/* 1.16rem / .24em / uppercase / 500,margin-bottom 40px. THIS IS HIS RENDERED SIZE,NOT HIS .eyebrow DECLARATION. His .eyebrow rule says .74rem with 18px below it,but the eyebrow is a
inside .order and his own `.order p{font-size:1.16rem;margin:0 auto 40px}` outranks it at 0,2,0 against 0,1,0. Measured on his live page at 1440 and 390 it renders 1.16rem with 40px below, so that is what "match his type scale exactly" means here. If you want his .eyebrow declaration instead it is .74rem and 18px - one line. THE SIZE IS NOW IN PX, 2026-08-28. 1.16rem was his DECLARATION, not his rendered size: his root is 16px so it lands 18.56px, ours is 18px (17px under 560px) so the same rem landed 20.88px on desktop and 19.72px at 390. Measured against his live .order at all three widths, his eyebrow is 18.56px flat. Stated in px for the same reason .ep-price and #ledger h2 are. The .24em tracking is left alone and now resolves to his 4.4544px on its own. .lastcall h2 already matched - 70.4 / 70.4 / 41.6 against his 70.4 / 70.4 / 41.6 - and is untouched. "In the accent" has to mean --accent-lift on a ground this dark: --accent is 1.92 : 1 here and unreadable. --accent-lift is the palette's own answer to the accent on a dark band, and lands at 8.88 : 1. */ .lc-eyebrow{ display:block;margin:0 auto 40px;max-width:none; font-family:var(--ui);font-size:18.56px;font-weight:500; letter-spacing:.24em;text-transform:uppercase; color:var(--accent-lift); }.lc-eyebrow::after{content:none}.lastcall h2{ color:var(--paper); /* his clamp(2.6rem, 5vw, 4.4rem) at a 16px root = these pixels */ font-size:clamp(41.6px,5vw,70.4px); max-width:18ch;margin:0 auto 20px; }.lc-sub{ font-size:18.56px;line-height:1.55; max-width:52ch;margin:0 auto 40px; /* cream at 82% over the ground = #CBCDC7, 9.47 : 1 */ color:rgba(244,241,233,.82); } /* THE INVERTED BUTTON. A modifier on the existing .ep-btn, not a second component: the padding, type, tracking, arrow and the whole hover animation come from there untouched. His .order .btn is paper fill / ink label / paper border, and his hover goes to the FULL oxblood, not the dark step the button uses higher up his page - so ours goes to --accent, not --accent-dark. label on fill 13.47 : 1 hover label 7.02 : 1 */ .ep-btn--invert{ background:var(--paper);color:var(--ink-deep);border-color:var(--paper); }.ep-btn--invert:hover{ background:var(--accent);color:var(--paper);border-color:var(--accent); box-shadow:0 8px 18px -6px rgba(0,0,0,.45); } /* NO MOBILE OVERRIDE HERE, on purpose. Measured on his live page at 390, his .order keeps 130px / 110px of padding and its 1.16rem paragraph unchanged - he does not shrink this block on a phone, so neither does this one. The headline is the only thing that moves, and it moves through his own clamp. */ /* The only separation between the Last Call field and the footer. His thin rule sits above his nav row; ours sits on top of the footer. Cream at 10% is the hairline this build already uses on dark grounds - the urgency strip's border-bottom is the same value at the same weight. */ .foot{border-top:1px solid rgba(244,241,233,.10)} /* ================================================================== HERO HEADLINE AND DROP CAP - ELIAS YODER'S TREATMENTS ================================================================== */ /* His .hero__headline em is `font-style:italic; color:var(--oxblood)` - the second half of the line goes italic and takes the accent, at essentially the same weight as the roman half (his roman is wght 400, his italic 380). Ours now matches that: the headline is weight 400 and so is the em, which Libre Baskerville serves at ital,wght@1,400 as a real italic cut on gstatic, not a synthesised oblique - checked. This read 700 for both while the headline itself was 700. --accent on paper is 7.13 : 1. */ .hero h1.long em{ font-style:italic; font-weight:400; color:var(--accent); } /* His .hero__sub::first-letter, value for value: font-family var(--serif) | weight 500 | italic font-size 3.4em | line-height .85 | float left margin 8px 12px -2px 0 | color his accent Ours takes --serif (Lora, which has a real 500 and a real 500 italic - both added to the font request for this) and --accent. On .best at 1.06rem the 3.4em cap renders about 65px. */ .best::first-letter{ font-family:var(--serif); font-weight:500; font-style:italic; font-size:3.4em; line-height:.85; float:left; margin:8px 12px -2px 0; color:var(--accent); } /* ================================================================== HERO BUTTONS - ELIAS'S TREATMENT His base .btn, which is what his own hero pair uses (btn / btn--ghost, no --big): uppercase, letter-spacing .22em, font-size .78rem, gap 10px, and the ::after arrow in var(--serif) at 1.1rem with letter-spacing 0. Ours takes all of that. The fills stay ours - accent and ghost - and the labels stay ours. PADDING IS NOT HIS, and it had to move again. His is 16px 28px. Ours was 1.55rem, set earlier so the pair fits the 477px hero column side by side. His tracking and the new arrow add ~16px to each button, which pushed the pair to 492px and broke that fit, so the side padding comes down to 1.24rem - the pair is 470px in a 477px column. The earlier decision stands; only the number that serves it moved. ================================================================== */ .hero .btn-row.top-cta .btn{ display:inline-flex;align-items:center;gap:10px; font-size:.78rem;letter-spacing:.22em;text-transform:uppercase; white-space:nowrap; }.hero .btn-row.top-cta .btn::after{ content:"\2192"; /* 17.6px - the third arrow on the page, converted with the other two so every arrow is one size. His base .btn::after is 1.1rem at his 16px root, so this is his rendered value too. It makes the hero pair ~4px narrower, which only adds slack to the 470-in-477px column fit noted above. */ font-family:var(--serif);font-size:17.6px;letter-spacing:0; transition:transform .25s ease; }.hero .btn-row.top-cta .btn:hover::after{transform:translateX(4px)} @media (prefers-reduced-motion:reduce){.hero .btn-row.top-cta .btn::after{transition:none}.hero .btn-row.top-cta .btn:hover::after{transform:none} } /* ================================================================== THE COVER FRAME - ELIAS'S TREATMENT His .single-product__cover-frame is a light mat, not a border: no border property at all, no radius, 14px of padding, background var(--paper) and box-shadow var(--shadow-page) = 0 22px 60px -10px of his ink at 25%. The cover inside carries border-radius 2px. On his own --paper page the mat is the same color as the ground, so it is the shadow that lifts it - and the same is true here, which is why this is a faithful port rather than a different effect. The cover's own shadow stays a filter: drop-shadow, not his box-shadow. rulebook-cover.png is RGBA with transparent corners, so a box-shadow would draw a rectangle around empty space. The hover built earlier is untouched. ================================================================== */ .offer-shot{ background:var(--paper); box-shadow:0 22px 60px -10px rgba(0,0,0,.25); }.offer-shot img{border-radius:2px} /* ================================================================== MONEY Every dollar figure on the page in one face. His $47 is .single-product__price - var(--serif), weight 500 - with its em set font-style:italic, and he uses var(--serif) at 500 for every other figure on the page too (.hero__stat-num, .book__price, .math__col figures, .math__total .num, .tier__price em, .includes__today). FONT ONLY. Family and style, nothing else: no size, no color, no weight. Every figure keeps whatever its context gives it, and the .highlight spans the figures sit inside keep their color and their 700. Our --serif is Lora, and Lora's 400 and 500 italics are both real cuts already in the font request - they were added for the drop cap. Nothing is synthesised and nothing new had to be requested. NOT .money: that class already exists in this stylesheet, inherited from the source build, and it carries color:var(--free-green). Reusing it would have turned every figure on the page green. ================================================================== */ .fig{font-family:var(--serif);font-style:italic} /* ================================================================== THE ARITHMETIC - ELIAS YODER'S TWO-COLUMN BLOCK His .math__grid / .math__col / .math__total / .math__note / .math__delta, value for value: grid two columns, gap 56px; one column and gap 48px on his mobile breakpoint h3 1.6rem, margin-bottom 28px, flex baseline, gap 16px, padding-bottom 18px, border-bottom 1px solid h3 span .7rem / .24em / uppercase, in his gold li flex space-between, baseline, padding 14px 0, border-bottom 1px DASHED, font-size 1.02rem li figure var(--serif), weight 500, 1.15rem total margin-top 24px, padding 22px 0 4px, border-top 2px solid total .lab .78rem / .22em / uppercase total .num var(--serif), 2.6rem, weight 500; the "after" column's number italic, the "before" column's not note margin-top 18px, .7rem / .1em delta max-width 760px, margin 48px auto 0, padding 22px 28px, border-left 4px solid the accent, var(--serif) 1.05rem, centered His block is light-on-dark; ours keeps its tile band, so the mapping is the one this build has used throughout: his --paper -> --ink, --paper-deep -> --ink-soft, --ink-mid -> --line-strong, --gold / --gold-soft -> --accent. His .math__delta names background:var(--paper-2), a token that is never defined anywhere in his stylesheet - so it renders transparent on his own page, and it is transparent here. The 4px bar is the whole treatment. The section container widens from .narrow to .wrap: two columns will not sit in a 680px measure. The head keeps .narrow so the reading line does not blow out with it. ================================================================== */ .ledger-head{margin-inline:0}.mx-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:2.2rem}.mx-col h3{ font-size:25.6px;color:var(--ink); margin:0 0 28px;padding-bottom:18px; /* No flex-wrap: his h3 has none, so a long title wraps inside its own flex item and the small-caps unit stays beside it on the first line. With wrap on, the unit dropped to a line of its own and made the head a step taller than it needs to be. */ display:flex;align-items:baseline;gap:16px; border-bottom:1px solid var(--line-strong); }/* "One trip, two travelers" - his .math__col h3 span, value for value: --mono (our --ui), .7rem = 11.2px rendered, .24em, uppercase. His IS uppercase, so this one keeps its caps; the head beside it does not. */ .mx-col h3 span{ font-family:var(--mono);font-size:11.2px;letter-spacing:.24em; text-transform:uppercase;color:var(--accent);font-weight:600; line-height:1.04; }.mx-col ul{list-style:none;padding:0;margin:0}.mx-col li{ display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem; padding:14px 0;border-bottom:1px dashed var(--line-strong); /* his 1.02rem at a 16px root = 16.32px rendered; 26.4384 / 16.32 = 1.62 */ font-size:16.32px;line-height:1.62;color:var(--ink-soft); }.mx-col li span:last-child{ /* his 1.15rem = 18.4px rendered; 29.808 / 18.4 = 1.62 */ font-family:var(--serif);font-weight:500;font-size:18.4px;line-height:1.62; color:var(--ink);white-space:nowrap; }.mx-total{ margin-top:24px;padding:22px 0 4px; display:flex;justify-content:space-between;align-items:baseline;gap:1rem; border-top:2px solid var(--accent); }.mx-total .lab{ /* his .math__total .lab: --mono, .78rem = 12.48px rendered, .22em, and weight 400 - it inherits his body weight, it is not bolded. Ours ran Oswald 600 at 14.04px, which read heavier and narrower than his. */ font-family:var(--mono);font-size:12.48px;letter-spacing:.22em; text-transform:uppercase;color:var(--accent);font-weight:400; line-height:1.62; }.mx-total .num{ /* his 2.6rem = 41.6px rendered, line-height 1 */ font-family:var(--serif);font-size:41.6px;line-height:1;font-weight:500; white-space:nowrap; }.mx-col--before .mx-total .num{color:var(--ink-mute)}.mx-col--after .mx-total .num{color:var(--accent);font-style:italic}/* ============================================================ HIS HEADING TREATMENT, on the four heads that were asked for. His global rule is h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.04; letter-spacing:-.022em } and NO text-transform - his heads are a serif in mixed case with the tracking pulled tight. Ours is the opposite by default: --display (Oswald), uppercase, line-height 1.12, letter-spacing +.02em. That is why these read nothing like his even when the pixel size matched - the size was right and the face, the case and the tracking were all wrong. Scoped to these heads only. The rest of the page keeps its own heading treatment; only the four that were named move. Our colours stay. Sizes are in px for the same reason everything else in this block is: they are HIS rendered sizes at his 16px root, and a rem here resolves against 18. ============================================================ */ #ledger h2, .mx-col h3, .lastcall h2{ font-family:var(--serif); font-weight:600; text-transform:none; line-height:1.04; } /* His h1..h4 run -.022em and his h3 rule pulls it back to -.015em. Split here rather than set in .mx-col h3 above: this block is later in the file, so a value there would lose to this one at equal specificity. */ #ledger h2,.lastcall h2{letter-spacing:-.022em} .mx-col h3{letter-spacing:-.015em} /* HIS .math__note, measured off his page and copied value for value. The small caps this used to run are gone: his is mixed case, and the ask was for his treatment, not a variation on it. font-size is in px on purpose, the same reason #ledger h2 is: 11.2px is his RENDERED size (.7rem at his 16px root), and .7rem here would be 12.6px against our 18. "Same size as his" means the same pixels. */ .mx-note{ margin:18px 0 11.2px;max-width:none; font-family:var(--mono);font-size:11.2px;font-weight:400;letter-spacing:.1em; text-transform:none;line-height:1.62;text-align:start; }/* HIS .math__delta, value for value. His paragraph is 400 and the figure inside it is a at 700; our line IS that strong end to end, with no trailing sentence, so it carries the 700. 16.8px, again in px: it is his rendered size (1.05rem at his 16px root). 26.04 / 16.8 = 1.55 leading, centered, 760 wide, 48 above, 22/28 padding, and the 4px left rule - all his. */ .mx-delta{ /* HIS BOX IS TWO LINES TALL AND OURS IS ONE, so his 4px rule ran 96px and ours ran 70. His second line is the trailing sentence after the , which we do not have and cannot invent - copy is final. The rule is given his length directly instead: 2 x 26.04 leading + 22 + 22 padding = 96.08. Block, not flex: flex turns the text node and the into separate anonymous items and eats the space between them, which printed "date:$3,782". It also has to stay block to sit the line at the TOP of the box, which is where his sits - his second line is the one that is invisible, not his first. */ min-height:96px;box-sizing:border-box; max-width:760px;margin:48px auto 0;padding:22px 28px; border-left:4px solid var(--accent); font-family:var(--serif);font-size:16.8px;font-weight:700;line-height:1.55; color:var(--ink);text-align:center; } /* HIS ONLY MOBILE OVERRIDE FOR THIS BLOCK, and it is the whole of it: `@media (max-width:1040px){.math__grid{grid-template-columns:1fr;gap:48px} }`. Checked across his whole stylesheet - he does not shrink the heads or the figures on a phone, so neither does this. The 1040px is his too; our container is 1080px against his 1240px, so ours would have held two columns a little longer, but the breakpoint is part of what was asked for. */ @media (max-width:1040px){.mx-grid{grid-template-columns:1fr;gap:48px} } /* ================================================================== THE ARITHMETIC ON A DARK FIELD - HIS COLOR RELATIONSHIPS His block is the one dark band in the middle of his page, and every element in it is recoloured for that ground. Measured off his live page: section #15110B his --ink, full bleed h2 / h3 / row figure --paper brightest lede / row label --paper-deep one step down eyebrow / unit / total label / "good" number --gold-soft his accent total rule --gold the accent, heavier hairlines --ink-mid note --ink-mute dimmest "bad" number #E8C5A6 its own warm, brighter than the body Mapped to ours on --ink-deep, the same token the Last Call and the footer use. One accent (teal) plus one alert red on the net line, which is his structure: brightest --paper 13.47 : 1 AAA muted body cream at 82% 9.47 : 1 AAA accent --accent-lift 8.88 : 1 AAA note cream at 68% 6.93 : 1 AA net line --signal-lift lifted to 4.75 4.75 : 1 AA hairlines cream at 16% non-text TWO OF HIS OWN VALUES WERE NOT COPIED, because they fail on his own page: his note is #786B53 on #15110B, 3.61 : 1, and his delta text is #15110B on #15110B, 1.0 : 1 - invisible. Ours are 6.93 and 4.75. The "bad" number takes --paper rather than a fourth hue: his #E8C5A6 is a warm that has no equivalent here, and the brightest tone does the same job of making the costly column's total the loudest thing in it. ================================================================== */ #ledger{background:var(--ink-deep);border-block:0;color:var(--paper)}#ledger .eyebrow{color:var(--accent-lift)}#ledger .eyebrow::after{background:rgba(244,241,233,.16)}/* His .math h2 is clamp(2.2rem, 4.6vw, 3.8rem) at a 16px root, which is clamp(35.2px, 4.6vw, 60.8px) rendered. Written in px here on purpose: the target is his RENDERED size, not his rem, and px is immune to our root being 18 to his 16. Only this section's h2 - every other h2 on the page keeps the page's 2.15rem. Line-height comes with it. His is 1.04 against our heading default of 1.12; at 60px that is a 5px difference per line and the head would otherwise sit loose against his. */ #ledger h2{ color:var(--paper); font-size:clamp(35.2px,4.6vw,60.8px); margin:0 0 18px; /* his .sec__title h2 */ } /* The eyebrow and the lede, the last two in the block that were still on our own values. His .eyebrow is --mono .74rem weight 500 at .24em; ours ran --ui (Oswald) weight 700 at .2em, which is the same "condensed and heavy against his even monospace" difference the note had. His .sec__lede is 1.15rem = 18.4px rendered. The hairline after the eyebrow is OURS and stays: his eyebrow has none, but every other eyebrow on this page does, and dropping it here only would make this section the odd one out. */ #ledger .eyebrow{ font-family:var(--mono);font-size:11.84px;font-weight:500; letter-spacing:.24em;line-height:1.62;margin:0 0 18px; } .ledger-head p:not(.eyebrow){font-size:18.4px;line-height:1.62} .ledger-head p{color:rgba(244,241,233,.82)}.mx-col h3{color:var(--paper);border-bottom-color:rgba(244,241,233,.16)}.mx-col h3 span{color:var(--accent-lift)}.mx-col li{color:rgba(244,241,233,.82);border-bottom-color:rgba(244,241,233,.16)}.mx-col li span:last-child{color:var(--paper)}.mx-total{border-top-color:var(--accent-lift)}.mx-total .lab{color:var(--accent-lift)}.mx-col--before .mx-total .num{color:var(--paper)}.mx-col--after .mx-total .num{color:var(--accent-lift)}/* HIS note grey, hue and saturation untouched, lightness raised until it clears AA on OUR ground. His #786B53 is hsl(38.9, 18.2%, 39.8%); it reads 3.61 on his near-black and only 2.91 on this teal, which is lighter. Same hue, same saturation, lightness 39.8% -> 51.4% = #9A8A6C, 4.50 : 1. It is his warm taupe, not a neutral: the cream-at-68% this replaces was a different colour family and read far brighter than his. */ .mx-note{color:#9A8A6C} /* THE NET LINE, IN THE ALERT RED - AND THIS IS A DELIBERATE DEPARTURE. The reference build ends on `.mx-delta{color:#7A1F0E}` - Elias Yoder's oxblood, literally, asked for by name. It measures 1.47 : 1 on the reference's own ledger ground and 1.82 : 1 on his; the line is effectively invisible on both pages, and the reference's own comment says so. The brief for this build asks for the net line "in alert red" AND requires every text pair to clear AA. Those two cannot both be met by the oxblood, so the line takes --signal-lift, which is the token this palette already reserves for the one urgent thing on a dark field - the countdown digits use it at the same value. On --ink-deep it measures 4.82 : 1. This is the ONE colour on the page that does not follow the reference's final state, and it is the same colour the reference's own ledger comment specifies two hundred lines above ("net line --signal-lift ... 4.75 : 1"). Geometry, box, min-height, the 4px rule and the type are all untouched. */ .mx-delta{color:var(--signal-lift);border-left-color:var(--signal-lift)}