/* ==========================================================================
hx.css -- the partners-page visual grammar, site-wide.
WHY THIS FILE EXISTS
Joe, 2026-07-31: partners.html is the look; every page should match it, and
"No more greens." Two jobs, one sheet.
The palette was never the difference. Since the 07-30 retheme every page
already draws from one token set -- lx.css's --signal-blue IS style.css's
--accent (#12508C), --n-50 IS --surface, --n-200 IS --surface-2. partners.html
is built on those same tokens. What partners does differently is WHERE the
blue lands and how a card sits on the page. So this is an override sheet, not
a re-theme, and it drives most of its reach through TOKENS -- which is how one
file reaches 24 pages across 13 hand-built namespaces (pa- lx- sx- sp- cm-
pn- sd- rm- ab- fq- ph- st- cx-) without rewriting any of them.
HOW A PAGE OPTS IN
+ to this file
The homepage additionally carries .home-pa for rules only it needs.
HARD CONSTRAINTS HELD HERE
- style.min.css, style.css, lx.css and scrolly.css are NOT edited. They are
shared, locked and partly unfingerprinted; this sheet loads after them and
overrides. Revert = drop the and the class.
- THREE :root blocks exist in style.css -- :root, [data-theme="light"] and
[data-theme="dark"]. A remap of only the first loses to the light block on
specificity. All three are restated below. (Learned the hard way 2026-07-30.)
- Every value is a token or a measured literal. Text on an accent surface uses
--accent-contrast, never #fff: in dark, --accent lifts to #7FB3E8 and white
on it is 1.9:1.
- Hover lift uses the independent `translate` property, NOT `transform`.
GSAP's scroll reveals leave an inline `transform` on revealed elements,
which beats any stylesheet `transform` -- that is why lx.css's existing
.rcard:hover lift never actually fires live. `translate` composes with
GSAP's inline transform instead of losing to it.
- No copy changes anywhere. Everything here is presentational.
========================================================================== */
/* ==========================================================================
1. NO MORE GREENS
--green / --green-soft (style.css) and --pass / --pass-bg (lx.css) are the
whole green surface of this site. They mean "pass" -- a check that held, a
control that is on, a chain with no gaps.
Retiring the colour does NOT cost the meaning, because this site already
satisfies WCAG 1.4.1: every status on it pairs its colour with a glyph
(lx.css: "status colour never travels alone"). The tick still says pass.
Green folds into --accent rather than a near-blue of its own, so there is one
blue on the site and not two that look like a mistake. Measured on the
surfaces they actually land on:
#12508C on #FFFFFF ............ 8.23:1 AAA
#12508C on #FBFAF7 (--surface) 7.94:1 AAA
#12508C on #E4EAF2 (soft chip) 6.80:1 AA large + small
========================================================================== */
:root,
:root[data-theme="light"]{
--green: #12508C; /* was #0B5236 */
--green-soft: #E4EAF2; /* was #E6F0EA */
--pass: #12508C; /* lx.css, was #0B5236 */
--pass-bg: #E4EAF2; /* lx.css, was #E6F0EA */
}
:root[data-theme="dark"]{
--green: #7FB3E8; /* was #74c9ac -- matches the dark --accent */
--green-soft: rgba(127,179,232,.16);
--pass: #7FB3E8;
--pass-bg: rgba(127,179,232,.16);
}
/* ==========================================================================
2. CARDS -- the .pa-pillar / .pa-tier treatment, site-wide
Scoped to main so the shared header's .nav-card mega-menu tiles keep their
own chrome styling from style.min.css.
Attribute substring selectors are how one rule reaches 13 namespaces at once:
ab-card, sx-card, cx-panel, pa-pillar, scope-item and their siblings all
match without this file having to know any of them.
========================================================================== */
/* The three :not() groups are load-bearing, each bought by a real defect found
while verifying this rule against the rendered pages:
:not([class*="__"]) a BEM sub-element is not a card. Without this,
sx-card__tag and nav-tile__title -- a status pill
and a line of menu text -- each got a card shadow.
:not(...plurals...) "-cards" contains "-card" and "-kpis" contains
"-kpi", so the GRID CONTAINER matched too and drew
a shadow around a row of already-shadowed cards.
:not([class*="nav-"]) the mobile nav sheet sits inside on several
pages, so scoping to main does not exclude chrome.
Kept as substring rather than exact class names so a namespace this file has
never heard of still inherits the treatment. */
/* !! Each selector below MUST stay on one line. A newline between two :not()
groups is a DESCENDANT COMBINATOR, not formatting -- when this rule was first
written pretty-printed across lines it silently became "any descendant of a
card", and every sx-card__tag and ab-card__tag on the site got a card shadow.
Do not reflow these for readability. */
.hx-page main :is([class*="-card"],[class*="-tile"],[class*="-panel"],[class*="-pillar"],[class*="-driver"],[class*="-kpi"],[class*="-box"]):not([class*="__"]):not([class*="nav-"]):not([class*="-ico"]):not([class*="-cards"]):not([class*="-tiles"]):not([class*="-panels"]):not([class*="-pillars"]):not([class*="-drivers"]):not([class*="-kpis"]):not([class*="-boxes"]){
box-shadow:var(--shadow-sm);
transition:box-shadow .45s var(--ease-out),border-color .45s var(--ease-out),translate .45s var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
.hx-page main :is([class*="-card"],[class*="-tile"],[class*="-pillar"],[class*="-kpi"]):not([class*="__"]):not([class*="nav-"]):not([class*="-ico"]):not([class*="-cards"]):not([class*="-tiles"]):not([class*="-pillars"]):not([class*="-kpis"]):hover{
translate:0 -3px;
box-shadow:var(--shadow-md);
}
}
@media(prefers-reduced-motion:reduce){
.hx-page main :is([class*="-card"],[class*="-tile"],[class*="-panel"],[class*="-pillar"],[class*="-driver"],[class*="-kpi"],[class*="-box"]):not([class*="__"]):not([class*="nav-"]):not([class*="-ico"]){transition:none}
.hx-page main :is([class*="-card"],[class*="-tile"],[class*="-pillar"],[class*="-kpi"]):not([class*="__"]):not([class*="nav-"]):not([class*="-ico"]):hover{translate:none}
}
/* ==========================================================================
2b. THE MONO EYEBROW GOES BLUE -- partners' .pa-kick, everywhere
partners labels every section with a small uppercase mono eyebrow in
--accent (.pa-kick). Every other page has exactly the same element under its
own name -- sx-num, cm-num, pn-num, sd-num, rm-num, ab-num, sc-eyebrow,
sp-eyebrow, cm-cap, pn-cap -- but painted --ink-faint. Recolouring them is
the single change that makes the other 23 pages read as partners' siblings.
It also closes a real defect. --ink-faint is #5C584F, which measures 2.96:1
on --bg: a site-wide AA failure, already on the books. --accent is 7.94:1 on
--surface. So this is an accessibility fix wearing a design change, which is
the right way round on a product that sells accessibility monitoring.
Suffix selectors, so a namespace this file has never heard of inherits it.
========================================================================== */
.hx-page main [class$="-num"],
.hx-page main [class$="-eyebrow"],
.hx-page main [class$="-kick"],
.hx-page main [class$="-kicker"],
.hx-page main [class$="-cap"]{
color:var(--accent);
}
/* ==========================================================================
3. THE CLOSING ACCENT BAND -- .pa-cta, on every page that has a closer
Each page named its own closer, so they are enumerated. A page whose closer
is not here simply keeps its existing ending; nothing breaks.
========================================================================== */
/* Two naming conventions cover the whole site: a handful of pages call their
closer "-cta", and five (about, accessibility-remediation, consent-mode-
implementation, privacy-notice-management, script-drift) call it "-close" --
a real with padding and a border-top, structurally identical to
.pa-cta. Both are listed. [class$="-close"] cannot catch the nav sheet's
__close button, which ends in "_close", not "-close"; main-scoping and the
:not([class*="__"]) guard make that doubly true. */
.hx-page main :is(.pa-cta,.sx-cta,.sp-cta,.cta-band,[class$="-cta"],[class$="-close"]):not([class*="__"]){
background:var(--accent);
position:relative;
overflow:hidden;
border-color:transparent;
}
.hx-page main :is(.pa-cta,.sx-cta,.sp-cta,.cta-band,[class$="-cta"],[class$="-close"]):not([class*="__"])::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 120% at 50% 0%, rgba(255,255,255,.10), transparent 60%);
}
/* keep real content above the sheen */
.hx-page main :is(.pa-cta,.sx-cta,.sp-cta,.cta-band,[class$="-cta"],[class$="-close"]):not([class*="__"]) > *{
position:relative;z-index:1;
}
/* --- content inversion on the band, matching .pa-cta's own rules ---------
Measured against #12508C: #FFF 8.23:1 · white .90 7.19:1 · white .78 6.18:1
· #0B2545 on a white pill 15.39:1. All clear AA at these sizes. */
.hx-page main :is([class$="-cta"],[class$="-close"],.cta-band,.sx-cta,.sp-cta):not([class*="__"]) :is(h2,h3,b,strong){
color:var(--accent-contrast);
}
.hx-page main :is([class$="-cta"],[class$="-close"],.cta-band,.sx-cta,.sp-cta):not([class*="__"]) p{
color:rgba(255,255,255,.90);
}
.hx-page main :is([class$="-cta"],[class$="-close"],.cta-band,.sx-cta,.sp-cta):not([class*="__"]) :is(small,[class*="note"],[class*="fine"]){
color:rgba(255,255,255,.78);
}
.hx-page main :is([class$="-cta"],[class$="-close"],.cta-band,.sx-cta,.sp-cta):not([class*="__"]) a:not([class*="btn"]){
color:var(--accent-contrast);text-decoration:underline;text-underline-offset:2px;
}
/* the eyebrow rule in §2b would leave a blue kicker on a blue band */
.hx-page main :is([class$="-cta"],[class$="-close"],.cta-band,.sx-cta,.sp-cta):not([class*="__"]) :is([class$="-num"],[class$="-eyebrow"],[class$="-kick"],[class$="-cap"]){
color:rgba(255,255,255,.78);
}
/* primary inverts to a light pill; ghost becomes a white outline */
.hx-page main :is([class$="-cta"],[class$="-close"],.cta-band,.sx-cta,.sp-cta):not([class*="__"]) .btn-primary{
background:var(--accent-contrast);color:var(--accent-strong);border-color:var(--accent-contrast);
}
.hx-page main :is([class$="-cta"],[class$="-close"],.cta-band,.sx-cta,.sp-cta):not([class*="__"]) .btn-ghost{
background:transparent;color:var(--accent-contrast);border-color:rgba(255,255,255,.42);
}
@media(hover:hover) and (pointer:fine){
.hx-page main :is([class$="-cta"],[class$="-close"],.cta-band,.sx-cta,.sp-cta):not([class*="__"]) .btn-primary:hover{background:var(--surface-2)}
.hx-page main :is([class$="-cta"],[class$="-close"],.cta-band,.sx-cta,.sp-cta):not([class*="__"]) .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:var(--accent-contrast)}
}
.hx-page main :is([class$="-cta"],[class$="-close"],.cta-band,.sx-cta,.sp-cta):not([class*="__"]) :focus-visible{
outline-color:var(--accent-contrast);
}
/* ==========================================================================
4. HOMEPAGE -- rules only index.html needs (.home-pa)
Direction 07 is bone/navy editorial with blue spent almost entirely on links.
These are the seven things partners does that it did not.
========================================================================== */
/* 4a. hero: blue-grey wash + the ledger rule motif from .pa-hero.
The bone scrim stays brightest dead centre because the h1 is ink-navy and
sits there; blue only enters at the lower-left and the edges. */
.home-pa .lx .hero-bg::after{
background:
radial-gradient(72% 62% at 50% 46%, rgba(247,244,239,.95), rgba(247,244,239,.74) 52%, rgba(247,244,239,.46) 78%),
radial-gradient(120% 128% at 18% 118%, rgba(247,244,239,0) 40%, rgba(18,80,140,.17) 74%, rgba(120,145,178,.58) 100%),
linear-gradient(180deg, rgba(247,244,239,.88), rgba(247,244,239,.34) 34%, rgba(247,244,239,.90));
}
.home-pa .lx .hero::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:repeating-linear-gradient(to bottom,transparent 0 43px,var(--navy-a05) 43px 44px);
-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
}
/* 4b. primary buttons go accent. The single biggest "it looks like partners"
lever: partners makes every primary action --accent, lx made them --ink-navy. */
.home-pa .lx .pill-btn{background:var(--accent);color:var(--accent-contrast)}
@media(hover:hover) and (pointer:fine){
.home-pa .lx .pill-btn:hover{background:var(--accent-strong)}
}
/* .inv is the ghost/secondary and stays light, the way .pa-hero-actions pairs.
Restated so the rule above cannot leak into it. */
.home-pa .lx .pill-btn.inv{background:var(--surface);color:var(--ink)}
@media(hover:hover) and (pointer:fine){
.home-pa .lx .pill-btn.inv:hover{background:var(--surface-2)}
}
/* 4c. section rhythm. lx shipped clamp(112px,15vw,208px), which is why the page
ran past 16,000px; partners is 76px. Meeting nearer partners without
collapsing the editorial scale the 07 headline sizes need. */
.home-pa .lx section{padding-block:clamp(84px,9vw,132px)}
/* alternating recessed bands = .pa-sec--alt */
.home-pa .lx #research,
.home-pa .lx #how-it-works,
.home-pa .lx #scope{
background:var(--surface-2);
border-block:1px solid var(--border);
}
/* the accent rule standing in for partners' .pa-kick mono eyebrow. That eyebrow
is TEXT and no copy may change here, so it becomes a rule. content:"" is a
decorative box -- nothing enters the accessibility tree. */
.home-pa .lx section > .wrap > h2::before,
.home-pa .lx .pin-left > h2::before{
content:"";display:block;width:44px;height:3px;border-radius:2px;
background:var(--accent);margin-bottom:24px;
}
/* 4d. homepage cards. .scope-grid clips, so the shadow goes on the grid, not
the items inside it. */
.home-pa .lx .tile,
.home-pa .lx .rcard,
.home-pa .lx .scope-grid,
.home-pa .lx .gate,
.home-pa .lx .slice{
box-shadow:var(--shadow-sm);
transition:box-shadow .45s var(--ease),border-color .45s var(--ease),translate .45s var(--ease);
}
/* the two document artifacts sit forward, like .pa-report and .pa-statcard */
.home-pa .lx .fall,
.home-pa .lx .rcpt{box-shadow:var(--shadow-lg)}
@media(hover:hover) and (pointer:fine){
.home-pa .lx .tile:hover,
.home-pa .lx .rcard:hover,
.home-pa .lx .gate:hover{
translate:0 -3px;
box-shadow:var(--shadow-md);
border-color:var(--blue-a30);
}
}
@media(prefers-reduced-motion:reduce){
.home-pa .lx .tile,.home-pa .lx .rcard,.home-pa .lx .scope-grid,
.home-pa .lx .gate,.home-pa .lx .slice{transition:none}
.home-pa .lx .tile:hover,.home-pa .lx .rcard:hover,.home-pa .lx .gate:hover{translate:none}
}
/* 4e. numbers in accent circles = .pa-step-n. .law is a baseline-aligned grid,
so the circle needs align-self:start or it drops below the heading it labels. */
.home-pa .lx .law .n,
.home-pa .lx .scope-item .n{
display:grid;place-items:center;
width:38px;height:38px;border-radius:999px;
background:var(--accent);color:var(--accent-contrast);
font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.02em;
}
.home-pa .lx .law .n{align-self:start;margin-top:-4px}
.home-pa .lx .scope-item .n{margin-bottom:20px}
/* 4f. the two full-bleed accent bands.
The pivot paragraph sits in exactly partners' .pa-indep slot: mid-page, one
statement, full width, accent ground. */
.home-pa .lx .lx-band{background:var(--accent);position:relative;overflow:hidden}
.home-pa .lx .lx-band::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(70% 130% at 88% 8%, rgba(255,255,255,.09), transparent 62%);
}
.home-pa .lx .lx-band > .wrap{position:relative;z-index:1}
.home-pa .lx .lx-band .scrub{color:var(--accent-contrast)}
/* the word-by-word reveal dims unlit words; GSAP drives them to 1 */
.home-pa .lx .lx-band .scrub w{opacity:.16}
.home-pa .lx .lx-band .scrub w.lit{opacity:1}
@media(prefers-reduced-motion:reduce){.home-pa .lx .lx-band .scrub w{opacity:1}}
/* the closing CTA = .pa-cta */
.home-pa .lx #cta{background:var(--accent);position:relative;overflow:hidden}
.home-pa .lx #cta::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 120% at 50% 0%, rgba(255,255,255,.10), transparent 60%);
}
.home-pa .lx #cta > .wrap{position:relative;z-index:1}
.home-pa .lx #cta h2{color:var(--accent-contrast)}
.home-pa .lx #cta > .wrap > h2::before{background:var(--accent-contrast);opacity:.7}
/* .90 white on #12508C = 7.19:1; .78 = 6.18:1. Both clear AA at these sizes. */
.home-pa .lx #cta .lede{color:rgba(255,255,255,.90)}
.home-pa .lx #cta .small{color:rgba(255,255,255,.78)}
.home-pa .lx #cta .scan{background:var(--surface);border-color:rgba(255,255,255,.42)}
.home-pa .lx #cta .scan:focus-within{border-color:var(--accent-contrast)}
/* .pa-cta .btn-primary inverts to a light pill on the band. The knob's fill is
rgba(255,255,255,.16), invisible on a light pill, so it flips to navy alpha. */
.home-pa .lx #cta .pill-btn{background:var(--accent-contrast);color:var(--accent-strong)}
.home-pa .lx #cta .pill-btn .knob{background:var(--navy-a07)}
@media(hover:hover) and (pointer:fine){
.home-pa .lx #cta .pill-btn:hover{background:var(--surface-2)}
}
.home-pa .lx #cta :focus-visible{outline-color:var(--accent-contrast)}
/* 4g. accent detail work */
.home-pa .lx .marquee span::after{opacity:.75}
.home-pa .lx .research-more{border-bottom-width:2px;border-color:var(--accent)}
.home-pa .lx #research .rcard{border-color:var(--border-strong)}
.home-pa .lx .scope-grid,
.home-pa .lx .gate{border-color:var(--border-strong)}
.home-pa .lx .nos,
.home-pa .lx .stack{border-top-color:var(--accent)}
/* ==========================================================================
5. THE PAGE TOP -- partners' .pa-hero band, on every page that has a top
Joe, 2026-07-31 (page-by-page review): "there's no consistency page to page
for the top of each of these pages. Even if it's a boring page we still
should give some love and attention to it."
partners.html is the reference. What its hero does that no other page did:
it sits on a ground (a radial wash plus faint ledger rule lines), it holds
its headline to a readable measure instead of running the full 1240px, and
it closes with a hard edge so the band reads as a band. Sections 1-4 already
unified colour, cards, eyebrows and closers; the top was the last surface
still page-by-page. This closes it.
TWO GROUPS, because they start from different padding:
A. .page-hero -- the generic top on faq, state-privacy, contact and the
five legal pages. It carries `padding:156px 0 8px` from style.css, sized
for an overlay header this site does not have: .site-header is
`position:sticky` and therefore IN FLOW, so all 156px render as an empty
band between the breadcrumb and the eyebrow. Measured at 1440x900 it
pushed the h1 below 270px on every one of those pages. Overridden here,
not in style.css, which is shared and unfingerprinted.
B. [class$="-hero"] -- the named tops (sx- ab- rm- cm- pn- ph- ap- fq-).
These already sit at `padding:2px 0 8px` inside a wrapper that supplies
its own leading, and they render correctly today, so their vertical
rhythm is left alone. They get the ground and the edge only.
.pa-hero is excluded: it owns these values and this rule is derived FROM it.
Duplicating the gradient onto it would stack two ::before layers.
NEW RESERVED SUFFIX: this file now also reserves `-hero`, alongside the five
in section 2b (-num -eyebrow -kick -kicker -cap). Naming a card `x-hero`
anywhere inside main will give it a full-bleed gradient band.
========================================================================== */
/* the shared ground. Values lifted verbatim from .pa-hero so the match is by
construction rather than by eye -- see the retheme note about hue-rotating
instead of hand-picking. */
.hx-page main :is(.page-hero,[class$="-hero"]):not(.pa-hero):not([class*="__"]){
position:relative;
overflow:hidden;
isolation:isolate;
border-bottom:1px solid var(--border);
}
/* Stops are pushed out from partners' 44/76/100. .pa-hero is ~630px tall; these
bands run 380-520px, and on a shorter box the same stops bring the closing
#a8b5c4 far enough inboard that it sits under the eyebrow and greys the whole
top-left. Moving the wash to 52/86/116% keeps the grey in the far corner at
every band height, which is where partners actually puts it. */
.hx-page main :is(.page-hero,[class$="-hero"]):not(.pa-hero):not([class*="__"])::before{
content:"";position:absolute;inset:0;z-index:-2;
background:radial-gradient(120% 128% at 18% 118%, var(--bg) 52%, var(--accent-soft) 86%, #a8b5c4 116%);
}
/* the faint ledger rule lines -- the paper-trail motif, not decoration for its
own sake. Masked top and bottom so the band fades into the page rather than
ending on a hard stripe. */
.hx-page main :is(.page-hero,[class$="-hero"]):not(.pa-hero):not([class*="__"])::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:repeating-linear-gradient(to bottom,transparent 0 43px,rgba(15,34,62,.055) 43px 44px);
-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
}
/* real content rides above both layers */
.hx-page main :is(.page-hero,[class$="-hero"]):not(.pa-hero):not([class*="__"]) > *{
position:relative;z-index:1;
}
/* --- group A only: reclaim the 156px dead band ------------------------- */
.hx-page main .page-hero{
padding:56px 0 64px;
}
/* --- group B: the named tops keep their leading, gain the closing space -- */
.hx-page main [class$="-hero"]:not(.pa-hero):not(.page-hero):not([class*="__"]){
padding-bottom:56px;
}
/* --- typography, matching .pa-hero -------------------------------------
The plain pages inherit the homepage h1 scale, which at 1440px set
"Consent that adapts to your visitor's state" across 1010px in two lines of
58px. partners holds its h1 to 16ch and 3.35rem. Matching that is most of
what makes the two pages read as siblings. 20ch rather than partners' 16ch
because these headlines are sentences, not two-clause hooks. */
.hx-page main :is(.page-hero,[class$="-hero"]):not(.pa-hero):not([class*="__"]) h1{
font-size:clamp(2.1rem,4.9vw,3.35rem);
line-height:1.12;
letter-spacing:-.032em;
font-weight:650;
max-width:20ch;
color:var(--ink);
}
/* the accent clause -- partners paints the second half of its headline in
--accent. Any page can opt in by wrapping that clause in . */
.hx-page main :is(.page-hero,[class$="-hero"]) .hx-em{
color:var(--accent);font-style:normal;
}
.hx-page main :is(.page-hero,[class$="-hero"]):not(.pa-hero):not([class*="__"]) :is(.hero-sub,.lede,.sx-lede){
font-size:1.1rem;
line-height:1.62;
max-width:56ch;
}
/* --- mobile: the ledger lines are 43px apart and read as noise under 640px,
and the band's bottom padding is too generous once the columns stack ---- */
@media(max-width:640px){
.hx-page main :is(.page-hero,[class$="-hero"]):not(.pa-hero):not([class*="__"])::after{display:none}
.hx-page main .page-hero{padding:36px 0 40px}
.hx-page main [class$="-hero"]:not(.pa-hero):not(.page-hero):not([class*="__"]){padding-bottom:36px}
}
/* ==========================================================================
6. THE LEGAL DOCUMENT LAYOUT -- .lg
Joe, 2026-07-31: the five legal pages (privacy policy, terms, DPA, BAA, risk
disclosure) were topic outlines under a "pending counsel" banner, roughly
1-4 KB of text each, set in the generic .prose column. They now carry real
operative text, and a contract someone may actually execute needs to LOOK
like one: a dated masthead, numbered clauses you can cite over the phone, and
a table of contents that survives a 40-screen scroll.
Shared rather than page-scoped because all five need exactly this and a
sixth (a future SLA, a subprocessor notice) will too. Scoped under .lg so it
cannot reach the marketing pages.
Prints. A practice's counsel will print these, and the default would have
put the sticky sidebar through the middle of page two.
========================================================================== */
/* --- masthead: the facts a reader checks before reading anything --------- */
.hx-page main .lg-meta{
display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
background:var(--border);border:1px solid var(--border);
border-radius:var(--r-md);overflow:hidden;margin:0 0 44px;
}
.hx-page main .lg-meta > div{background:var(--surface);padding:15px 18px}
.hx-page main .lg-meta dt{
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.11em;
text-transform:uppercase;color:var(--ink-faint);margin:0;
}
.hx-page main .lg-meta dd{
margin:7px 0 0;font-size:14px;line-height:1.45;color:var(--ink);font-weight:600;
}
/* --- two columns: contents rail + the document ------------------------- */
.hx-page main .lg-grid{display:grid;gap:40px;align-items:start}
@media(min-width:960px){
.hx-page main .lg-grid{grid-template-columns:232px minmax(0,1fr);gap:56px}
.hx-page main .lg-toc{position:sticky;top:96px;max-height:calc(100vh - 130px);overflow:auto}
}
.hx-page main .lg-toc__h{
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.11em;
text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px;
}
.hx-page main .lg-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.hx-page main .lg-toc a{
display:flex;gap:9px;padding:6px 9px;border-radius:7px;
font-size:13.5px;line-height:1.4;color:var(--ink-muted);text-decoration:none;
border-left:2px solid transparent;
}
.hx-page main .lg-toc a b{
font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint);
flex:0 0 auto;padding-top:1px;
}
@media(hover:hover) and (pointer:fine){
.hx-page main .lg-toc a:hover{background:var(--surface-2);color:var(--ink)}
}
.hx-page main .lg-toc a[aria-current="true"]{
border-left-color:var(--accent);color:var(--ink);font-weight:600;background:var(--surface);
}
.hx-page main .lg-toc a[aria-current="true"] b{color:var(--accent)}
/* --- the clauses -------------------------------------------------------- */
.hx-page main .lg-doc{max-width:74ch}
.hx-page main .lg-sec{
padding:0 0 40px;margin:0 0 40px;border-bottom:1px solid var(--border);
scroll-margin-top:96px;
}
.hx-page main .lg-sec:last-child{border-bottom:0;margin-bottom:0}
.hx-page main .lg-sec > h2{
display:flex;gap:12px;align-items:baseline;
font-size:clamp(1.15rem,2.9vw,1.45rem);font-weight:640;letter-spacing:-.028em;
line-height:1.25;margin:0 0 16px;color:var(--ink);
}
/* the clause number is the citable handle -- "look at section 7.2" */
.hx-page main .lg-sec > h2 > .lg-n{
font-family:var(--font-mono);font-size:.72em;font-weight:500;
color:var(--accent);flex:0 0 auto;letter-spacing:0;
}
.hx-page main .lg-sec h3{
font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--ink);
margin:26px 0 9px;
}
.hx-page main .lg-sec h3 .lg-n{font-family:var(--font-mono);font-weight:500;color:var(--accent);margin-right:8px;font-size:.92em}
.hx-page main .lg-sec p{font-size:15px;line-height:1.75;color:var(--ink-muted);margin:0 0 14px}
.hx-page main .lg-sec p:last-child{margin-bottom:0}
.hx-page main .lg-sec strong{color:var(--ink);font-weight:640}
.hx-page main .lg-sec a{color:var(--accent)}
.hx-page main .lg-sec ul,
.hx-page main .lg-sec ol{margin:0 0 16px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.hx-page main .lg-sec li{
position:relative;padding-left:22px;
font-size:15px;line-height:1.7;color:var(--ink-muted);
}
.hx-page main .lg-sec ul > li::before{
content:"";position:absolute;left:6px;top:.68em;width:5px;height:5px;
border-radius:50%;background:var(--accent);
}
.hx-page main .lg-sec ol{counter-reset:lgli}
.hx-page main .lg-sec ol > li{counter-increment:lgli}
.hx-page main .lg-sec ol > li::before{
content:"(" counter(lgli,lower-alpha) ")";position:absolute;left:0;top:0;
font-family:var(--font-mono);font-size:12px;color:var(--accent);line-height:1.9;
}
/* a defined term, so "Protected Health Information" reads as a definition */
.hx-page main .lg-sec dfn{font-style:normal;font-weight:640;color:var(--ink)}
/* the callout: what a clause means in plain words, or what it does NOT do */
.hx-page main .lg-note{
border-left:3px solid var(--accent);background:var(--surface);
padding:16px 20px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:20px 0;
}
.hx-page main .lg-note p{font-size:14px;line-height:1.65;margin:0}
.hx-page main .lg-note p + p{margin-top:10px}
.hx-page main .lg-note__k{
display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.11em;
text-transform:uppercase;color:var(--accent);margin:0 0 7px;
}
/* --- print: counsel prints these -------------------------------------- */
@media print{
.hx-page .site-header,.hx-page .site-footer,.hx-page .nav-sheet,
.hx-page .breadcrumb,.hx-page main .lg-toc,
.hx-page main :is(.page-hero,[class$="-hero"])::before,
.hx-page main :is(.page-hero,[class$="-hero"])::after{display:none !important}
.hx-page main .lg-grid{display:block}
.hx-page main .lg-doc{max-width:none}
.hx-page main .lg-sec{break-inside:avoid;border-bottom:1px solid #ccc}
.hx-page main .lg-meta{break-inside:avoid}
.hx-page main .page-hero{padding:0 0 18px !important}
}
/* ==========================================================================
7. HOMEPAGE ABOVE-THE-FOLD -- reclaim the doubled hero padding
Joe, 2026-07-31: "the top line 'One tracking pixel.' is really down too far
on the page. I'd like to see it up maybe 100 pixels or so, because right now
the Scan your site and Read what happened buttons are literally flush on the
bottom of the browser window. If my window were any smaller I worry the
experience would not be the same."
He is right, and it is measurable. At 1440x800, before this rule:
h1 top ................. 349px
CTA row bottom ......... 777px (23px of clearance)
At a 760px-tall window the CTA row ended at 783px -- below the fold, which is
the case he was worried about.
Cause: the hero pads twice. .lx .hero carries
padding-block:clamp(56px,6vw,88px) clamp(112px,15vw,208px), and .lx .hero-inner
then adds clamp(80px,12vw,150px) top AND bottom inside it. The section is
already align-content:center inside min-height:calc(100dvh - 68px), so the
inner padding buys nothing -- centring had already placed the block.
Trimming the inner padding lifts the whole group by ~94px, which is the "100
pixels or so" asked for, and leaves the section's own padding and the scrim
untouched.
Written here rather than in lx.css deliberately: lx.css is shared, partly
unfingerprinted, and was being edited by a concurrent session while this was
written. hx.css loads after it, so this wins on source order alone. Revert =
delete this block.
========================================================================== */
.home-pa .lx .hero-inner{
padding-block:clamp(24px,4vw,56px);
}