/* ============================================================================
Tax Penalty Reply - the design system for all three public pages.
WO-TPR-REDESIGN-2.
WHAT CHANGED, AND WHY. Pass 1 (WO-TPR-REDESIGN) built this file from design
RULES and produced a page that was correct and still read dated. This pass was
built from REFERENCES: optimataxrelief.com (the category leader a stressed
taxpayer measures us against), turbotax.intuit.com (best in class consumer tax
trust design, whose Intuit DDMS 3.0 token file was read directly), and
lemonade.com (the consumer brand whose thesis is "our business model does not
conflict with yours", and the proof that a wholly ILLUSTRATED, photograph free
page carries financial trust at the top of the market).
The five things those references do that pass 1 did not:
1. THEY PUT A SUBJECT IN THE HERO. All three anchor the first screen on a
drawn or photographed thing, not on a text block. We have no photography
and may not hotlink any, so this page draws its own: see the "scene" rules
below and the inline SVG in the pages. Lemonade's entire hero is SVG.
2. THEY VARY THE CONTAINER PER SECTION. Pass 1 rendered nine sections as the
same white rounded card with the same hairline and the same shadow, which
is exactly what a dated template looks like. Optima runs eleven distinct
treatments in eleven sections. So does this file now: full bleed bands,
bare rule lists, a raised card, a flat panel, a document, an accordion on
rules.
3. THEY SPEND WEIGHT ON THEIR TRUST SIGNALS. Optima gives three statistics a
whole coloured band. Lemonade gives three institutional facts a whole
strip. TurboTax makes one word a link to its own substantiation and prints
a wall of disclosure. Our trust signals are better than theirs and were set
as ordinary body copy: the flat price, the refusal policy, the "you could
do this yourself for free" section, and the Commitment statement. Each one
now gets a treatment of its own.
4. THEY SET NUMBERS AS NUMBERS. "$3 Billion". "90 seconds". "4.7 out of 5".
We already own $99, $149, sixty seconds and $25,000 and had every one of
them buried inside a sentence. --fig exists for that.
5. THEY AUTHOR THE PHONE FIRST. Pass 1 was desktop first: the base rules were
the desktop layout and two max-width queries collapsed it, which makes the
phone the least designed state of a product whose reader is holding an IRS
notice in one hand. Every rule below is the phone; min-width: 640px and
min-width: 1000px upgrade it.
WHAT THIS FILE MAY NOT DO. Every class name, id and data- attribute on these
pages is load bearing: the page JS selects on them and 14 test files assert on
them by exact string. This file restyles those hooks and requires no new
markup that carries meaning. The .commitment / .wrap / .commitment-in /
.commitment-domain block in particular is generated byte for byte by
scripts/gen_commitment_block.py and pinned by
tests/acceptance/test_tpr_commitment.py, so it is styled from out here and
edited nowhere.
COLOUR IS AUTHORED IN HEX, CHOSEN ON AN OKLCH RAMP, AND MEASURED. Every text
pair in use clears 4.5:1 and every large display pair clears 3:1; the awkward
ones carry their measured ratio in a comment beside them.
========================================================================== */
/* --- The two voices ------------------------------------------------------
BOTH SELF HOSTED, NEITHER FETCHED. tests/acceptance/test_marketing_sites.py
bans fonts.googleapis.com and fonts.gstatic.com on these pages, and it is
right to: a public page that phones a third party for its type hands that
third party a log of every visitor. Both src values below are relative paths
to files Caddy serves off the same directory mount as the pages.
THE DISPLAY VOICE is Newsreader (SIL Open Font License), a variable face where
one file covers weights 400 to 700, latin subset. It stays from pass 1 and it
was the right call: all three references set their headlines in a serif or a
distinctive proprietary face, and two of the three use a newspaper lineage
serif specifically (Optima: Libre Caslon Text; Lemonade: Merriweather).
THE UI VOICE IS NEW, AND IT IS THE ONE VISIBLE CHANGE PASS 1 MOST NEEDED.
Pass 1 set the interface in the platform grotesque, which means this page
rendered in Segoe UI on Windows: the single most reliable tell of an unstyled
template. Two of the three references pair their serif with a distinctive self
hosted sans. Ours is PUBLIC SANS (SIL Open Font License, variable 400 to 700,
latin subset, 27 KB) and the choice is not arbitrary: it is the typeface of
the U.S. Web Design System. A service whose entire product is a document
addressed to a federal agency is set in the face that agency's own web estate
uses. The system stack stays as the fallback, so nothing regresses if the file
is ever missing.
font-display: swap on both, with metric-near fallbacks first, so text is
readable from the first paint. */
@font-face {
font-family: 'Newsreader';
src: url('newsreader-latin.woff2') format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Public Sans';
src: url('publicsans-latin.woff2') format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* --- Surface -------------------------------------------------------------
COOLER AND CLEANER THAN PASS 1, ON PURPOSE. Pass 1 reasoned that warm paper
reads as "document" and set the canvas to a warm off white. The verdict on
that page was that it still read dated, and the warm cast is part of why: it
is an editorial-blog signal, not an institutional one. Every reference here
runs a white or near white page and lets colour arrive as CONTAINERS
instead. TurboTax is the extreme case: its page background tokens, primary
through accent, are all #FFFFFF, and every tint on the page is a container
with a matched pale border. This palette follows that. */
--paper: #FFFFFF;
--paper-2: #F4F7FA;
--surface: #FFFFFF;
--surface-2: #FAFBFD;
--line: #E4E9EF;
--line-2: #C9D2DC;
/* Ink. A deep navy-black rather than black, so long passages of legal posture
read as considered rather than severe. ink-3 is the metadata tint and is
this dark on purpose: it measures 4.99:1 on --paper-2, which is where it is
used most, and 5.42:1 on white. The obvious value one step lighter came in
at 4.20:1 and was rejected. */
--ink: #0E1A2B;
--ink-2: #4A5766;
--ink-3: #5F6B7A;
/* Institutional navy. This is the colour that says "a real business does
this", so it owns whole REGIONS rather than appearing as an accent: the
proof band, the refusal band, the shell headers, the footer. Three full
bleed regions on the landing page and no more, which is roughly the share
of coloured scroll height Optima runs. */
--navy: #12283F;
--navy-2: #0B1B2C;
--on-navy: #B9CBE0; /* 9.07:1 on --navy */
--on-navy-hi: #FFFFFF;
/* Action. ONE decisive blue, spent only on the primary action, on links, and
on the drawn line work that belongs to us rather than to the IRS. It is
deliberately not the navy: if the button and the header are the same colour
then nothing on the page is the obvious next step. 7.59:1 on white. */
--action: #17539E;
--action-hi: #1E68C4;
--action-bg: #EEF4FC;
--action-line:#C8DCF5;
/* Semantics, on TurboTax's container model: a pale fill with a matched pale
border, never a saturated block. Relief is what the customer came for,
alarm is the notice they are holding, caution is a qualified answer. The
meanings are fixed and nothing else may borrow them. */
--relief: #0A6B45; /* 6.55:1 on white */
--relief-bg: #E7F4EE;
--relief-line: #A9D6BF;
--alarm: #A3271A; /* 7.34:1 on white */
--alarm-bg: #FCEEEB;
--alarm-line: #F0C9BF;
--caution: #7E5206; /* 6.79:1 on white */
--caution-bg: #FDF5E6;
--caution-line:#E9D4A6;
/* The wordmark's warm accent, and the one gold on the page. Lightened from
pass 1 because it sits on the action blue inside the nav button, where the
old value measured 3.58:1 against text that is not large. This one measures
4.63:1 there and 9.16:1 on the navy. */
--gold: #F0C46A;
--display: 'Newsreader', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
--sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Helvetica Neue', Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
/* --- Type ladder ---------------------------------------------------------
Rebuilt on TurboTax's three-tier model. Its ladder steps 48/40/34/28/24/20
over a body of 20/16/14/12, and every rung is legibly apart from its
neighbours. Pass 1's ladder was mushy in the middle: h2 at 2.5rem, h3 at
1.2rem and body at 1.0625rem left h3 barely larger than the paragraph under
it, so nothing between the section heading and the body had any rank at all.
clamp() carries the three tiers in one declaration. */
--t-display: clamp(2.6rem, 7.4vw, 4rem);
/* The hero's answer line, at EXACTLY 0.75 of --t-display at every width: each
of the three clamp terms is three quarters of the display term, so the ratio
holds on a phone, at the clamp's own breakpoints and at full width without a
media query. See .hero-line for the measurement that chose 0.75. */
--t-hero-sub: clamp(1.95rem, 5.55vw, 3rem);
--t-h2: clamp(1.9rem, 4.6vw, 2.8rem);
--t-h3: 1.35rem;
--t-h4: 1.12rem;
--t-sub: 1.14rem;
--t-body: 1.0625rem;
--t-small: .9375rem;
--t-micro: .8125rem;
--t-nano: .72rem;
/* The numeral display size. The two package prices are the largest thing on
the landing page after the headline, which is the single cheapest gap in the
analysis to close: Optima prints "$3 Billion", Lemonade prints "90 seconds",
and we had $99 set at roughly the size of a subheading. */
--fig: clamp(3rem, 9vw, 4.25rem);
--fig-sm: clamp(2.2rem, 6vw, 2.9rem);
/* Spacing, on a 4px base. */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
--s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
/* Radius, on TurboTax's ladder (action 4, large 8, x-large 12, full 9999).
Pass 1 sat at 6px with a soft two layer shadow, which is the Bootstrap era
midpoint: too round to read as precise and too square to read as friendly.
Both ends of the reference range read current; the middle does not. */
--r-sm: 4px;
--r: 8px;
--r-lg: 12px;
--r-xl: 16px;
--r-pill: 999px;
/* Depth, on TurboTax's four level elevation ladder at its 0.2 shadow opacity,
tinted with the ink hue. Used sparingly so that being raised still means
something: on the landing page exactly three things are raised, and each one
is a thing the reader is meant to act on. */
--shadow-1: 0 1px 4px rgba(14,26,43,.07);
--shadow-2: 0 2px 8px rgba(14,26,43,.09);
--shadow-3: 0 4px 16px rgba(14,26,43,.10);
--shadow-4: 0 6px 24px rgba(18,40,63,.14);
/* Motion, on the reference durations and curves. Never ease-in on a UI
transition: it delays the first frame, which is the moment the user is
watching most closely, so the same duration feels slower. */
--ease-out: cubic-bezier(0, 0, .25, 1);
--ease-in-out: cubic-bezier(.35, 0, .25, 1);
--t-press: 120ms;
--t: 180ms;
--t-enter: 250ms;
}
/* --- Reset and base ------------------------------------------------------ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* body is a full height flex column on ALL THREE PAGES so the Commitment
statement can take the slack and sit on the bottom edge. See the .commitment
rule near the end of this file. Flex on body is safe BECAUSE of the
*{margin:0} reset: every gap on these pages is padding, so there are no
collapsing margins for a flex context to change. */
body {
font-family: var(--sans);
font-size: var(--t-body);
line-height: 1.62;
color: var(--ink);
background: var(--paper);
min-height: 100vh;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 var(--s4); width: 100%; }
@media (min-width: 640px) { .wrap { padding: 0 var(--s6); } }
@media (min-width: 1000px) { .wrap { padding: 0 var(--s7); } }
a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* A visible, high contrast focus ring is not optional on a form that ends in a
signed IRS document. */
:focus-visible {
outline: 2.5px solid var(--action-hi);
outline-offset: 2px;
border-radius: var(--r-sm);
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.hidden { display: none; }
/* --- The drawn icon system -----------------------------------------------
ONE STROKE LANGUAGE FOR THE WHOLE SITE. Pass 1 drew its checks and crosses as
CSS pseudo-elements: a rotated box with two borders for a tick, two rotated
bars for a cross. That works, but it caps the vocabulary at two marks and the
marks cannot share a grid with anything else. Every reference runs a real icon
set instead (Optima's line art above its three steps, TurboTax's 24px
currentColor SVGs, Lemonade's drawn everything), so these pages now carry
inline SVG on a 24 unit grid at a single 1.75 stroke with round caps and
joins.
They are decoration in the accessibility sense: every icon sits beside frozen
copy that already says what it means, so each one is aria-hidden and nothing
is lost by not rendering it. */
.ic {
width: 22px;
height: 22px;
flex: none;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.ic-sm { width: 18px; height: 18px; }
.ic-lg { width: 28px; height: 28px; }
.ic-relief { color: var(--relief); }
.ic-alarm { color: var(--alarm); }
.ic-action { color: var(--action); }
/* --- Typography ---------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--display);
font-weight: 600;
line-height: 1.22;
letter-spacing: -.012em;
color: var(--ink);
text-wrap: balance;
}
h1 {
font-size: var(--t-display);
line-height: 1.08;
letter-spacing: -.022em;
}
h2 {
font-size: var(--t-h2);
line-height: 1.14;
letter-spacing: -.018em;
margin-bottom: var(--s4);
max-width: 22ch;
}
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
p { text-wrap: pretty; }
/* The lead paragraph under a section heading. Measure held inside the readable
range rather than running the full container width. */
.lead {
color: var(--ink-2);
max-width: 60ch;
font-size: var(--t-sub);
margin-bottom: var(--s6);
}
.lead strong { color: var(--ink); font-weight: 600; }
@media (min-width: 1000px) { .lead { margin-bottom: var(--s7); } }
/* The section kicker and the page eyebrow.
A floating label above a heading is normally the first thing to cut. It stays
because the copy on these pages is frozen and, on the form page, the eyebrow's
text is written by pinned JS (applyState(name,eyebrow) sets
pageStep.textContent). So it is set as a typographic lead-in that clearly
belongs to the heading block beneath it: small, tracked, tinted, and joined to
the heading by a short rule. */
.kicker, .eyebrow {
display: inline-flex;
align-items: center;
gap: var(--s2);
font-family: var(--sans);
font-size: var(--t-nano);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--action);
margin-bottom: var(--s3);
}
.kicker::before, .eyebrow::before {
content: "";
width: 20px;
height: 2px;
background: var(--action);
flex-shrink: 0;
}
/* --- Nav -----------------------------------------------------------------
Near white on a hairline rather than pass 1's tinted glass. Every reference
runs a plain, quiet, sticky bar and spends nothing on it; the only decorated
thing in the row is the call to action. */
nav {
position: sticky;
top: 0;
z-index: 40;
background: rgba(255,255,255,.88);
backdrop-filter: saturate(1.4) blur(12px);
-webkit-backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid var(--line);
}
.nav-in {
max-width: 1140px;
margin: 0 auto;
padding: var(--s3) var(--s4);
display: flex;
align-items: center;
gap: var(--s3);
}
@media (min-width: 640px) { .nav-in { padding: var(--s3) var(--s6); gap: var(--s4); } }
@media (min-width: 1000px) { .nav-in { padding: var(--s3) var(--s7); } }
/* The wordmark. Set in the display face, with the middle word carrying the
brand accent, and the seal tile given a drawn rule under its letters, which is
the mark a prepared document carries. */
.logo {
font-family: var(--display);
font-weight: 600;
font-size: 1.16rem;
letter-spacing: -.018em;
color: var(--ink);
text-decoration: none;
display: flex;
align-items: center;
gap: var(--s3);
white-space: nowrap;
}
@media (min-width: 640px) { .logo { font-size: 1.3rem; } }
.logo-mark {
position: relative;
width: 34px;
height: 34px;
border-radius: var(--r-sm);
background: var(--navy);
color: var(--on-navy-hi);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--sans);
font-size: .64rem;
font-weight: 700;
letter-spacing: .08em;
flex-shrink: 0;
padding-bottom: 5px;
}
.logo-mark::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
bottom: 9px;
height: 1.5px;
background: var(--gold);
border-radius: 1px;
}
.logo em { font-style: normal; color: var(--ink); }
.logo-accent { color: var(--alarm); }
.nav-tag {
font-size: var(--t-nano);
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--ink-3);
border-left: 1px solid var(--line-2);
padding-left: var(--s4);
display: none;
}
@media (min-width: 1000px) { .nav-tag { display: block; } }
/* A pill, which is where both Optima and Lemonade land their one call to action.
It is the only pill on the site. */
.nav-cta {
margin-left: auto;
background: var(--action);
color: #FFFFFF;
text-decoration: none;
font-weight: 600;
font-size: var(--t-small);
padding: 10px 18px;
border-radius: var(--r-pill);
white-space: nowrap;
transition: background var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.nav-accent { color: var(--gold); } /* 4.63:1 on --action */
.nav-back {
margin-left: auto;
font-size: var(--t-small);
font-weight: 600;
color: var(--action);
text-decoration: none;
white-space: nowrap;
}
/* --- Buttons -------------------------------------------------------------
A crisp 4px action radius on TurboTax's ladder, with its 2px border token and
a real minimum width, instead of pass 1's 6px pill-adjacent shape with a soft
halo under it. The primary button carries elevation 2 and nothing else on the
page at that level competes with it. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
font-family: var(--sans);
font-weight: 600;
font-size: 1rem;
line-height: 1.2;
min-width: 120px;
padding: 14px 24px;
border-radius: var(--r-sm);
border: 2px solid transparent;
text-decoration: none;
cursor: pointer;
transition: background var(--t) var(--ease-out), border-color var(--t) var(--ease-out),
box-shadow var(--t) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.btn-primary {
background: var(--action);
border-color: var(--action);
color: #FFFFFF;
box-shadow: var(--shadow-2);
}
/* Currently unused in markup: its last two instances were the hero's second
button (removed by 3) and the second package card's (removed by 3b). KEPT
deliberately, unlike the packages rules that went with that section. This is a
variant of the button system, not section furniture, and the next surface that
needs a secondary action should find it here rather than reinvent it. */
.btn-quiet {
background: var(--surface);
border-color: var(--line-2);
color: var(--navy);
}
.btn[disabled] { opacity: .5; cursor: default; }
/* Press feedback is the fastest thing on the page: the interface confirming it
heard the tap. Hover is gated so a touch tap does not latch a hover state. */
.btn:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
.btn-primary:hover { background: var(--action-hi); border-color: var(--action-hi); box-shadow: var(--shadow-3); }
.btn-quiet:hover { border-color: var(--navy); background: var(--paper-2); }
.nav-cta:hover { background: var(--action-hi); box-shadow: var(--shadow-2); }
}
/* --- Hero ----------------------------------------------------------------
Phone first and stacked, the way Lemonade's is, upgrading to Optima's
asymmetric split at 1000px with the drawn subject in the right column. */
/* WO-TPR-REDESIGN-2b. THE HERO IS A BOUNDED BAND, NOT A FADE.
Reviewed against optimataxrelief.com on desktop, pass 2 left too much empty
vertical space between the nav and the headline, and there were two causes.
The first was the background. It was a gradient that started at --paper-2 and
dissolved into the page by 58%, so the region had no bottom edge and no
identity: the tint just ran out somewhere above the fold. Optima's hero is a
BOUNDED FULL BLEED REGION, and that boundary is what makes the space inside it
read as composition rather than as emptiness. So the tint is now constant
across the whole band. Its top edge is the nav's own hairline, which the hero
begins flush against, and its bottom edge is the navy proof band immediately
below: two hard boundaries, nothing dissolving.
The second was 96px of top padding on desktop, which is dead zone, not
composition. It is now 32px, a two thirds cut, and the space above the h1
reads as band interior. THE PHONE IS DELIBERATELY UNTOUCHED at 48px top: it
was already compact, the band is the whole viewport width there, and cutting
it further would crowd the headline against the sticky nav.
The radial highlight moved with the band: it was aimed at -10% vertically,
which put its centre above the old taller region, so on the shorter band most
of it was cropped away. */
.hero {
padding: var(--s7) 0 var(--s8);
background:
radial-gradient(680px 320px at 92% 4%, rgba(23,83,158,.07), transparent 64%),
var(--paper-2);
border-bottom: 1px solid var(--line);
}
/* 3c trims the wide-layout band from 32/48 to 24/32. The left stack is centred
against a taller drawn scene, so its bottom edge sits at
(top padding) + (row height + stack height) / 2 below the nav; every pixel off
the top padding comes straight off that, and half of every pixel off the stack
does too. See the arithmetic beside .hero-line. */
@media (min-width: 1000px) { .hero { padding: var(--s5) 0 var(--s6); } }
/* THE TWO COLUMNS, AND THE HISTORY OF THIS ONE LINE.
WO-TPR-REDESIGN-2c set align-items: start at >=1000px. The reason was sound at
the time: the text column was much the taller of the two (headline, sub, three
fact rows and the action row), so centring pushed the drawn scene visibly
below the headline and the owner called it out.
WO-TPR-REDESIGN-3 removed the three fact rows and the supporting paragraph
from this column, and 3b removed nothing further but restated the type, so the
premise for that ruling no longer holds: the text stack is now headline, gap,
sub, button, micro-line, which is SHORTER than the document beside it.
Starting them together would now hang the text off the top of a taller scene.
WO-TPR-REDESIGN-3b RULING 5 SUPERSEDES 2c: the left stack is vertically
centred against the scene. Recorded rather than quietly flipped, because the
2c comment argued the opposite case and the next person deserves to know the
inputs changed, not the taste. */
.hero-grid { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 1000px) {
.hero-grid { grid-template-columns: 1fr .88fr; gap: var(--s8); align-items: center; }
}
/* The headline block reads dense the way both references set theirs: Optima runs
its h1 hard against a one line sub with no floating label between them.
WO-TPR-REDESIGN-3 removed the eyebrow from this hero entirely, which is what
2b's .hero .eyebrow override existed to tighten, so that rule is deleted
rather than left to rot. The base .kicker, .eyebrow rule stays: the eyebrow is
still used in the page-head on the intake form and the status page. */
@media (min-width: 1000px) { .hero h1 { letter-spacing: -.026em; } }
/* The one word the whole page turns on. Pass 1 coloured it and stopped there; it
now sits over a drawn swash, which is the "annotate the important thing" move
Lemonade makes with its arrows. A background image rather than a
pseudo-element, so it survives a line break correctly. */
/* WO-TPR-REDESIGN-3. The green emphasis moved off the headline and onto the
sub-line, so this selector is no longer scoped to h1. It was .hero h1 .removed
and is now .hero .removed: the treatment belongs to the WORD, wherever in the
hero the word lives, and scoping it to a tag is exactly the kind of coupling
that breaks silently the next time the copy moves. Deliberately NOT global:
nothing outside the hero should be able to pick it up by accident. */
/* 3d: COLOUR ONLY. The swash is gone.
Pass 2 drew a --relief-line bar under this word with a background-image, as
the "annotate the important thing" move Lemonade makes with its arrows. That
was defensible when the word sat inside a running headline and needed help
being noticed. It stopped being defensible once 3b made the answer its own
line at display scale: at that size the word is already the loudest thing in
the band, and a bar under it read as an underline, which on the web means a
link. Decoration that impersonates an affordance is worse than no decoration.
3d also narrows the green to the verb alone. "Remove" is the thing the reader
wants; "It." is grammar, and colouring grammar dilutes the one word that is
answering the red "Penalty?" above it. The span moved in the markup rather
than being faked with a pseudo-element, so what is emphasised is what is
marked up as emphasised.
white-space: nowrap went with the rest: it existed so "Remove It." could not
break across two lines, and the span now wraps a single word that cannot
break at all. */
.hero .removed { color: var(--relief); }
.hero-accent { color: var(--alarm); }
/* THE SUB IS THE ANSWER, SET AS THE EQUAL OF THE QUESTION (3b rulings 2 to 4).
The hero is now a question and its answer, and the owner ruled they carry the
same weight: same face, same scale, same tracking as the h1, so neither one
subordinates the other. The red Penalty in the question is answered by the
green Remove It. underneath it, which is why the emphasis colours are on those
two phrases specifically and on nothing else in this band.
THE BREAK IS HARD, NOT LUCK. "You May Qualify To / Remove It." is broken with
a in the markup, so the answer always lands on its own line. Relying on
wrap would put the break wherever the viewport happened to fall and would
split the green phrase at some widths. For the same reason there is no
text-wrap: balance here: balancing would fight the explicit break.
3c: THE SIZE AND THE GAP WERE BOTH MEASURED, NOT GUESSED.
3b set this line at the full --t-display so the question and the answer
carried equal weight. On a real desktop that wrapped to THREE lines with "To"
orphaned on the second, and the pause below the headline read as a void. Both
were arithmetic errors on my part, and here is the arithmetic that fixes them.
THE COLUMN. .wrap caps at 1140px with 48px of padding each side, so its
content is 1044px at any viewport from 1236px up, including 1280 and 1680. The
grid is 1fr .88fr with a 64px gap, so the text column is
(1044 - 64) / 1.88 = 521.28px. That is the number the line has to fit, and it
does not change between 1280 and 1680 because the wrap is already at its cap.
THE STRING. Measured off the shipped woff2 at the instance actually rendered
(wght 600, optical size matched to the pixel size), "You May Qualify To" is
9.572em at opsz 64 and 9.303em at opsz 48. At the old full display size of
64px that is 612.6px, less 18 characters of -.026em tracking (30.0px), giving
582.6px against a 521.28px column: it overflowed by 61px, which is exactly why
"To" fell to its own line and pushed "Remove It." to a third.
At 0.75 of display, 48px, it is 446.5px less 22.5px of tracking = 424.0px,
which clears the column by 97px. Even if a browser applies no optical sizing
and uses the widest instance, it is 443px and still clears. "Remove It." is
223.5px, less than half the column, so the hard break holds everywhere.
THE SAME ORPHAN HAPPENED ON THE PHONE, so the reduction is proportional rather
than gated behind a media query: at a 390px viewport the column is 358px and
the old line measured 370px, overflowing by 12px. --t-hero-sub is three
quarters of --t-display in all three clamp terms, so a 41.6px headline there
now carries a 31.2px answer measuring 278px, inside a 358px column.
THE GAP. 1em at this size is 48px, exactly half the 96px that 1.5em at the old
64px produced, which is the halving the owner ruled. */
.hero-line {
margin: 1em 0 0;
font-family: var(--display);
font-size: var(--t-hero-sub);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.022em;
color: var(--ink);
}
@media (min-width: 1000px) { .hero-line { letter-spacing: -.026em; } }
/* 3c: 48px here put the action row below the fold on a 900px-tall viewport once
the nav and the centred offset were counted. 32px, with the hero band padding
trimmed alongside it, buys back the room without collapsing the separation
between the answer and the thing you do about it. */
.hero .cta-row { margin-top: var(--s6); }
.cta-row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.cta-note { width: 100%; font-size: var(--t-micro); color: var(--ink-3); margin-top: var(--s2); }
.cta-row .btn { flex: 1 1 auto; }
@media (min-width: 640px) { .cta-row .btn { flex: 0 0 auto; min-width: 200px; } }
/* --- The premise section (WO-TPR-REDESIGN-3) -----------------------------
The paragraph and the three facts that used to sit in the middle of the hero.
Their strings are byte-identical to what they were there; only the setting
changed, because what works in a narrow column beside a drawing does not work
across a full measure.
The paragraph leads at sub scale and holds a readable measure. The three facts
were a stack on hairline rules in the hero, which is the right shape for a
narrow column and the wrong one here; across the full width they become a
three-up on the same grid the proof band and the four steps use, each on its
own top rule, so they read as three pieces of supporting evidence rather than
as a list to work through. */
.premise { padding: var(--s7) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 1000px) { .premise { padding: var(--s8) 0; } }
.premise-lead {
font-size: var(--t-sub);
color: var(--ink-2);
max-width: 68ch;
margin-bottom: var(--s6);
}
.premise-lead strong { color: var(--ink); font-weight: 600; }
.premise-facts { list-style: none; display: grid; gap: var(--s4); }
@media (min-width: 1000px) { .premise-facts { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
.premise-facts li {
display: flex;
align-items: flex-start;
gap: var(--s3);
padding: var(--s4) 0 0;
border-top: 2px solid var(--line-2);
font-size: var(--t-small);
color: var(--ink);
}
.premise-facts .ic { margin-top: 1px; }
/* --- The drawn notice scene ----------------------------------------------
THE SINGLE BIGGEST GAP PASS 1 LEFT OPEN. All three references anchor the first
screen on a subject; pass 1's right column was a tinted table. There is no
photography for this product and none may be hotlinked, so the subject is
drawn: a windowed envelope and our prepared reply behind, the notice itself in
front as a real document, and a drawn annotation arrow running from the struck
through total down to the granted result. Lemonade does exactly this with its
app sketch and its two hand drawn arrows, and Lemonade has no photographs on
that page either.
The frozen notice copy is REAL TEXT inside the drawn sheet, not part of the
drawing, so it stays selectable, translatable and readable by assistive
technology.
WO-TPR-REDESIGN-2b, AND THIS IS A DEFECT REPORT AS MUCH AS A COMMENT. Pass 2
shipped this block styling a class called .scene-back that DOES NOT EXIST in
the markup, while the two drawings that do exist, .scene-sheet and .scene-env,
had no rules at all. Unpositioned inline SVG with a viewBox and no width or
height resolves to the full width of its container at its own aspect ratio, so
instead of layering behind and in front of the notice the two drawings laid
out in normal flow as full width blocks stacked ABOVE and BELOW it: roughly
450px of unintended column height on desktop, and a large part of the empty
vertical space this pass was asked to remove. The rules below are what pass 2
meant to ship.
THE LAYERING IS THE ILLUSTRATION. The reply sheet sits behind and above at
z-index 0, the notice sits at 1, and the envelope sits at 2, IN FRONT of the
notice's lower edge, so the document reads as going into the mail rather than
as three pictures in a column. The wrap's asymmetric padding is what gives the
sheet room to show above and the envelope room to sit below; both are sized in
percentages with a pixel ceiling so the composition holds at 640, at 1000 and
at full width without a third breakpoint.
WO-TPR-REDESIGN-2c, TWO RULINGS FROM THE LIVE DESKTOP REVIEW.
THE ENVELOPE IS GONE. It was drawn in FRONT of the notice's lower edge to make
the document read as going into the mail, and on a real screen it did not read
that way: it superimposed over the caption under the figures, which is real
copy a reader needs, and so it read as an artifact rather than as an idea. A
decoration that covers text has already lost the argument, so it is removed
rather than nudged. This is done in CSS, which fully removes it with no
leftover gap because the element was absolutely positioned and therefore
contributed no height to begin with. The markup is still in index.html,
aria-hidden and now display:none; any later pass that opens that file should
delete the