` rather than as `.prose`. These rules give it the page's prose settings without asking an editor to know what a class is. */ .folio-body{margin-top:var(--s4)} .folio-body p{font-size:17px;line-height:1.7;color:var(--ink-2);max-width:66ch} .folio-body p + p{margin-top:var(--s4)} .folio-body strong{color:var(--ink);font-weight:700} .folio-body ul,.folio-body ol{margin-top:var(--s4);padding-left:var(--s6);color:var(--ink-2)} .folio-body li + li{margin-top:var(--s2)} /* The photograph, once there is one. Same 4:3 frame the placeholder reserves, so setting one does not reflow the section. */ .folio-shot{margin:0} .folio-shot-img{ display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover; border-radius:var(--r-md);background:var(--mist); } /* The placeholder's ratio, as a class. It was an inline style in the prototype's generator; a rule that ships in the stylesheet is the house standard and it is also the only version a Content-Security-Policy will allow later. */ .slot--4x3{aspect-ratio:4 / 3} /* ========================== THE QUESTIONS ========================== */ /* Nine questions in three-column runs, each under a hairline, each numbered. Cards became rules: a card puts a box around an answer, and nine boxes read as nine unrelated things rather than one list somebody worked through. The numerals are counters, as on /process/'s expectations - furniture, not content, so they never reach the FAQPage schema or a screen reader as an ordinal read twice. The second run continues the count rather than restarting, because the reader is working through one set of nine. */ .faqs{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--s8);margin-top:var(--s12);counter-reset:faq} .faqs--continued{counter-reset:faq 3} .faq{ display:flex;flex-direction:column;gap:var(--s3); padding:var(--s6) var(--s8) var(--s8) 0;border-top:1px solid var(--line); } .faq h3{ display:flex;align-items:baseline;gap:var(--s3);margin:0; font-size:20px;line-height:1.3;letter-spacing:-.01em;color:var(--ink); } .faq h3::before{ counter-increment:faq;content:counter(faq,decimal-leading-zero); flex:none;min-width:20px; font-family:var(--cond);font-stretch:var(--cw);font-weight:500; font-size:12px;line-height:1.4;letter-spacing:.06em;color:var(--ink-3); } /* The answer aligns to the question, not to the numeral. */ .faq p{margin:0 0 0 calc(20px + var(--s3));font-size:15px;line-height:1.7;color:var(--ink-2);max-width:42ch} @media (max-width:1080px){ .faqs{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .faqs{grid-template-columns:minmax(0,1fr);gap:0} .faq{padding-right:0} } /* A ruled pair. The For Owners design opens with two columns each standing under its own 2px rule, which turns two paragraphs into two declared subjects rather than a block of text that happens to have two headings in it. Modifier on the existing .two-col rather than a new component, because the layout is unchanged - only the rule is new. */ .two-col--ruled > *{padding-top:var(--s6);border-top:2px solid var(--midnight)} /* The permanence claim, at the size it earns. It was the clearest sentence on the site and it was living at 13px in the footer, which the marketing review called the least-read position available. Bilal approved the permanence claims on 31 August 2026, so it opens /why-boson/ above the four reasons that support it. */ .claim{ margin:0 0 var(--s12);max-width:24ch; font-family:var(--cond);font-stretch:var(--cw);font-weight:700; font-size:clamp(1.5rem,2.6vw,2.6rem);line-height:1.1;letter-spacing:-.01em;color:var(--ink); } /* ==================== CREDIBILITY AT THREE LEVELS ==================== */ /* Three plain cards become three columns that get heavier as they descend the chain: a light rule over the listed parent, a heavier one over the operating group, and a filled navy panel for Boson itself - the level the reader is actually standing on. Same device as the "you are here" marker on the ownership tree, in a section that previously stated the relationship and showed nothing. THE LOGOS ARE DECORATIVE, THE NAMES ARE THE LINKS. Each mark carries alt="" and aria-hidden, because the company name sits right underneath it as a heading - a screen reader announcing "Constellation Software Inc." twice is worse than not seeing the logo at all. The outbound link is on the name, so it has a real accessible name rather than a bare image link, and Rank Math's new_window_external_links handles the target. USED TWICE, WITH AND WITHOUT MARKS. /for-owners/ builds "Who we speak with" from the same component and passes no logos, because an audience is not a company and has no mark to show. The image is optional by construction: no .level-mark, no space reserved for one. NOTE FOR THE PARENT-BRAND REVIEW. Using Constellation's and Andromeda's marks is a stronger form of the relationship claim than naming them in prose, and that wording is already gated under Q14. The precedent is the ownership tree, which already carries both marks and both outbound links on the homepage, so this is consistent with what ships rather than new - but it belongs in the same review, not outside it. */ .levels{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s12)} .level{ display:flex;flex-direction:column;gap:var(--s4); padding:var(--s8) var(--s8) var(--s12) 0;border-top:2px solid rgba(9,47,79,.25); } .level:nth-child(2){padding-left:var(--s8);border-top-color:rgba(9,47,79,.45);border-left:1px solid var(--line)} .level--here{padding-left:var(--s8);background:var(--midnight);border-top-color:var(--midnight)} /* Height-constrained with the intrinsic size still on the element, so three marks of three different aspect ratios sit on one optical line without any of them reserving the wrong box while the page loads. */ /* align-self is the load-bearing part. .level is a column flex container, so a child stretches across the cross axis by default: width:auto resolved to the full column and height:26px then squashed each mark to 400x26, which is not a logo, it is a smear. Three marks of three aspect ratios, each sized by its own height and left alone horizontally. */ .level-mark{display:block;align-self:flex-start;height:26px;width:auto;margin-bottom:var(--s2)} .level h3{margin:0;font-size:22px;line-height:1.25;letter-spacing:-.01em;color:var(--ink)} .levels .level h3 a{color:inherit;text-decoration:none} .levels .level h3 a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px} .level p{margin:0;font-size:17px;line-height:1.65;color:var(--ink-2);max-width:42ch} .level--here h3{color:var(--white)} .levels .level--here h3 a{color:var(--white)} .levels .level--here h3 a:hover{color:var(--white);text-decoration:underline} .level--here p{color:rgba(255,255,255,.86)} @media (max-width:1080px){ .levels{grid-template-columns:minmax(0,1fr)} .level{padding:var(--s6) 0 var(--s8)} .level:nth-child(2){padding-left:0;border-left:0} .level--here{padding:var(--s8)} } /* ============ WHAT AN INITIAL CONVERSATION IS, AND IS NOT ============ */ /* Two rounded cards become one full-bleed split: the four things it is on the deeper lavender, the four things it is not on navy. No card, no radius, no shadow - the ground carries the distinction instead, which is the whole point of putting a reassurance and a disclaimer side by side. The handoff's #E4E1F2 against a #F2F0FA page is the same relationship this palette already has between --lavender and --mist, one step deeper, so both resolve to tokens rather than to a new value. ON THE BAND RULE. --lavender is also the invite band that follows this section, so the left column runs into it without a seam. That is fine here and only here: the right half is navy, so the boundary between this section and the invite is unmistakable across half the viewport. A single-tone tinted band above the invite would still be wrong. */ .conversation{display:grid;grid-template-columns:1fr 1fr} .conversation-col{padding:var(--s16) var(--s24) var(--s24);display:flex;flex-direction:column;gap:var(--s8)} .conversation-col--is{background:var(--lavender)} .conversation-col--not{background:var(--midnight)} .conversation-label{margin:0;color:var(--ink)} .conversation-col--not .conversation-label{color:rgba(255,255,255,.74)} .conversation-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s8)} .conversation-list li{font-size:18px;line-height:1.5;color:var(--ink-2);max-width:44ch} /* .86 rather than the handoff's #DCE7F1: the same near-white, expressed the way every other reverse body on this site is, so there is one way to write it. */ .conversation-col--not .conversation-list li{color:rgba(255,255,255,.86)} /* The lead-in carries the subject of the sentence, so it is the only thing in the row that changes weight. Same device as .criteria-items strong. */ .conversation-list strong{font-weight:600;color:var(--ink)} .conversation-col--not .conversation-list strong{color:var(--white)} /* THE SAME COMPONENT, USED TWICE. /what-changes/ opens with the identical shape - the principles on the deeper lavender, what an acquisition actually changes on navy - so it is this component with a footnote rather than a second one that looks like it. The footnote spans both columns on the page ground below them, which is what makes it read as a caveat on the pair rather than on either half. This was the last page using .compare. The component and its `boson/compare` pattern both stay: a marketer can still insert it from the inserter, and deleting the CSS under a registered pattern would leave them a block that renders unstyled. */ .conversation--footed{background:var(--mist)} .conversation-foot{ grid-column:1/-1;margin:0;padding:var(--s12) var(--s24) var(--s16); max-width:76ch;font-size:17px;line-height:1.6;color:var(--ink-2); } @media (max-width:1080px){ .conversation-col{padding:var(--s12) var(--s16) var(--s16)} .conversation-foot{padding:var(--s8) var(--s16) var(--s12)} } @media (max-width:760px){ .conversation{grid-template-columns:minmax(0,1fr)} .conversation-col{padding:var(--s12) var(--pad)} .conversation-foot{padding:var(--s8) var(--pad) var(--s12)} } /* ============== WHAT OWNERS SHOULD EXPECT THROUGHOUT ============== */ /* Two rounded panels become two plain columns, each under a ruled label, with the six commitments numbered straight through from one column to the next. The heading row above is unchanged: it was already .split-head, which is this site's existing heading-beside-its-note row, so the handoff's top half needed no new component at all. THE NUMERALS ARE CSS COUNTERS, NOT TEXT. They are new - the panels had none - and they are furniture rather than content: the list is an
- , which already
tells a screen reader these are ordered and how many there are, so printing
"01" into the markup would only make it read the ordinal twice. It also keeps
the section's word-for-word content exactly what it was, which is what the
parity check is for.
The second column continues the count rather than restarting, in the markup
with start="4" and in the paint with a counter offset - the design numbers
them 01 through 06 across the pair, because they are one list of six
commitments presented in two halves. */
.expect-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s24);margin-top:var(--s16)}
.expect-col{display:flex;flex-direction:column}
.expect-label{margin:0;color:var(--ink);padding-bottom:var(--s6);border-bottom:2px solid var(--midnight)}
.expect-list{list-style:none;margin:0;padding:0;counter-reset:expect}
.expect-list--continued{counter-reset:expect 3}
.expect-list li{
display:flex;gap:var(--s6);padding:var(--s8) 0;border-bottom:1px solid var(--line);
font-size:18px;line-height:1.5;color:var(--ink-2);
}
.expect-list li:last-child{border-bottom:0}
/* --ink-3 rather than the handoff's #8E8CAB, for the fourth time today and the
same reason: #8E8CAB is about 2.9:1 on this band and 13px is small text. */
.expect-list li::before{
counter-increment:expect;content:counter(expect,decimal-leading-zero);
min-width:22px;flex:none;font-size:13px;line-height:1.6;font-weight:500;color:var(--ink-3);
}
@media (max-width:760px){
.expect-cols{grid-template-columns:minmax(0,1fr);gap:var(--s12)}
/* Stacked, the last row of the first column needs its rule back - the two
columns have become one run and the join would otherwise be invisible. */
.expect-col:first-child .expect-list li:last-child{border-bottom:1px solid var(--line)}
}
/* ========================= THE PROCESS ========================= */
/* Third section from the handoff bundle. The five stages stay a numbered list on
the left; a navy panel at the right tracks whichever one is active, with a
progress ring, a rail and a bar. The sequence advances itself every five
seconds and stops for good the moment a pointer or the keyboard arrives -
design.js owns that, and never starts it under reduced motion.
TWO DEVIATIONS FROM THE HANDOFF, BOTH CONTRAST, BOTH LEARNED THE HARD WAY
EARLIER TODAY when the gate caught a link measured mid-fade at 2.47:1:
- The handoff dims an inactive stage's body to opacity 0.6. On this band that
computes to roughly 3:1 against the ground and would fail 1.4.3. Inactive
bodies stay at full strength; the active stage is marked by its ground and
its rail instead, which is the louder signal anyway.
- The inactive number is #8E8CAB in the handoff, about 2.9:1 on the lavender.
It is var(--ink-3) here, the value this palette already carries for exactly
this job at 5.09:1.
The panel's own greys are unchanged in spirit but expressed as the site's
reverse-text values rather than #8FAECB. */
.process{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16);align-items:start}
.process .stages{margin-top:0}
/* Both halves of the section read the spectrum from the same place. The rail
down the left of a highlighted stage is a slice of the same gradient its bar
in the readout paints, sampled at the same position - so stage three's rail
and stage three's bar are the same colour by construction rather than by two
people picking a hex.
It samples rather than naming a value because five stages do not divide four
stops: naming them would have meant either inventing two intermediate hues,
which is off-palette and needs the design-system owner, or repeating one,
which is what this replaced. */
.process .stage{position:relative}
.process .stage::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:0;
background-image:linear-gradient(90deg,var(--purple),var(--indigo),var(--blue),var(--cyan));
background-size:500% 100%;
transition:width .45s ease-out;
}
.process .stage:nth-child(1)::before{background-position-x:0%}
.process .stage:nth-child(2)::before{background-position-x:25%}
.process .stage:nth-child(3)::before{background-position-x:50%}
.process .stage:nth-child(4)::before{background-position-x:75%}
.process .stage:nth-child(5)::before{background-position-x:100%}
.process .stage{
padding:var(--s8) var(--s6) var(--s8) 0;cursor:pointer;
transition:background .45s ease-out;
}
.process .stage .no{color:var(--ink-3);transition:color .45s ease-out,padding-left .45s ease-out}
/* :hover as well as [data-active], in that order, so the highlight is there on
the first pixel of the pointer arriving rather than after the JS has run - and
so the section still responds with the script disabled. */
.process .stage:hover,
.process .stage[data-active]{background:rgba(255,255,255,.72)}
.process .stage:hover::before,
.process .stage[data-active]::before{width:3px}
.process .stage:hover .no,
.process .stage[data-active] .no{color:var(--ink);padding-left:var(--s3)}
/* The panel is a readout, not a chrome block: it sits on the same ground as the
list, vertically centred against it, and says where in the sequence the
emphasis is. Every stage carries a bar; the bars up to and including the
active one are full, and the active one is the only solid fill. */
.process-panel{align-self:stretch;display:flex;align-items:center;padding-left:var(--s6)}
.process-panel-in{width:100%;display:flex;flex-direction:column;gap:var(--s8)}
.process-panel-head{
display:flex;justify-content:space-between;align-items:baseline;
padding-bottom:var(--s4);border-bottom:1px solid var(--line-strong);
}
.process-steps{display:flex;flex-direction:column;gap:var(--s8)}
.process-step{display:flex;flex-direction:column;gap:var(--s2)}
.process-step-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4)}
/* --ink-3, not the handoff's #9B9AB5 and #7A79A0. Both are around 2.5:1 on this
band; --ink-3 is 5.09:1 and is what the palette already carries for a muted
label. The hierarchy survives - reached stages go to --ink, which is darker
still - and the third contrast failure of the day does not happen. */
.process-step-num{
font-family:var(--cond);font-stretch:var(--cw);font-weight:600;font-size:11px;line-height:1;
letter-spacing:.14em;color:var(--ink-3);transition:color .4s ease-out;
}
.process-step-title{font-size:15px;line-height:1.2;font-weight:500;color:var(--ink-3);transition:color .4s ease-out}
.process-step[data-done] .process-step-num,
.process-step[data-active] .process-step-num,
.process-step[data-done] .process-step-title,
.process-step[data-active] .process-step-title{color:var(--ink)}
.process-track{position:relative;height:10px;background:var(--line);transition:transform .35s ease-out}
/* THE SPECTRUM, SPENT WHERE IT ACTUALLY MEANS SOMETHING.
The five bars carry one continuous Boson Spectrum sweep rather than five
colours: each fill paints the same purple-to-cyan gradient at 500% width and
shows its own fifth of it, so filling them in order sweeps the mark's own
gradient left to right across the section. Purple at the first conversation,
cyan at completion.
This is the palette's Blue-and-Cyan allowance being spent, the same reasoning
the button hover already records - not a new hue. Bars are not text, so the
spectrum's mid-tones carry no contrast obligation here; every label above
them is unchanged and still --ink or --ink-3. */
.process-fill{
position:absolute;inset:0 auto 0 0;width:0;
background-image:linear-gradient(90deg,var(--purple),var(--indigo),var(--blue),var(--cyan));
background-size:500% 100%;opacity:.45;
transition:width .7s cubic-bezier(.4,0,.2,1),opacity .4s ease-out,background-position .7s ease-out;
}
.process-step:nth-child(1) .process-fill{background-position-x:0%}
.process-step:nth-child(2) .process-fill{background-position-x:25%}
.process-step:nth-child(3) .process-fill{background-position-x:50%}
.process-step:nth-child(4) .process-fill{background-position-x:75%}
.process-step:nth-child(5) .process-fill{background-position-x:100%}
.process-step[data-done] .process-fill,
.process-step[data-active] .process-fill{width:100%}
/* Reached stays translucent, the one being read goes to full strength. That is
the whole hierarchy: same colour, two weights. */
.process-step[data-active] .process-fill{opacity:1}
/* HOVERING A STAGE FILLS ITS BAR, FROM EITHER SIDE, WITHOUT WAITING FOR JS.
design.js already does this - a pointer on a stage activates it and the bar
fills - but only once the script has run and only while it is running. These
rules make the link structural: hover any stage in the list, or its row in the
readout, and the spectrum fills up to and including that stage, immediately
and with the script disabled entirely.
Cumulative on purpose, matching what the script does: `-n+N` fills every bar
up to the hovered one, so the sweep always reads as progress through the
sequence rather than one bar lighting up on its own. The hovered stage is the
only one at full strength; the ones behind it stay at the reached weight.
Written out per stage because :has() cannot count to a sibling's index. Five
stages, five pairs, and the pairs are generated from the same numbers as the
gradient positions above them. */
/* stage 01 */
.process:has(.stage:nth-child(1):hover) .process-step:nth-child(-n+1) .process-fill,
.process:has(.process-step:nth-child(1):hover) .process-step:nth-child(-n+1) .process-fill{width:100%}
.process:has(.stage:nth-child(1):hover) .process-step:nth-child(1) .process-fill,
.process:has(.process-step:nth-child(1):hover) .process-step:nth-child(1) .process-fill{opacity:1}
/* stage 02 */
.process:has(.stage:nth-child(2):hover) .process-step:nth-child(-n+2) .process-fill,
.process:has(.process-step:nth-child(2):hover) .process-step:nth-child(-n+2) .process-fill{width:100%}
.process:has(.stage:nth-child(2):hover) .process-step:nth-child(2) .process-fill,
.process:has(.process-step:nth-child(2):hover) .process-step:nth-child(2) .process-fill{opacity:1}
/* stage 03 */
.process:has(.stage:nth-child(3):hover) .process-step:nth-child(-n+3) .process-fill,
.process:has(.process-step:nth-child(3):hover) .process-step:nth-child(-n+3) .process-fill{width:100%}
.process:has(.stage:nth-child(3):hover) .process-step:nth-child(3) .process-fill,
.process:has(.process-step:nth-child(3):hover) .process-step:nth-child(3) .process-fill{opacity:1}
/* stage 04 */
.process:has(.stage:nth-child(4):hover) .process-step:nth-child(-n+4) .process-fill,
.process:has(.process-step:nth-child(4):hover) .process-step:nth-child(-n+4) .process-fill{width:100%}
.process:has(.stage:nth-child(4):hover) .process-step:nth-child(4) .process-fill,
.process:has(.process-step:nth-child(4):hover) .process-step:nth-child(4) .process-fill{opacity:1}
/* stage 05 */
.process:has(.stage:nth-child(5):hover) .process-step:nth-child(-n+5) .process-fill,
.process:has(.process-step:nth-child(5):hover) .process-step:nth-child(-n+5) .process-fill{width:100%}
.process:has(.stage:nth-child(5):hover) .process-step:nth-child(5) .process-fill,
.process:has(.process-step:nth-child(5):hover) .process-step:nth-child(5) .process-fill{opacity:1}
/* HOVER. The row lifts by a pixel and its track thickens - enough to say "this
responds", small enough not to reflow anything beside it. The pointer already
activates the stage through design.js; this is the part that happens before
the JS does, and the part that still happens if the JS never loads. */
.process-step{cursor:pointer}
.process-step:hover{transform:translateY(-1px)}
.process-step:hover .process-track{transform:scaleY(1.3)}
.process-step:hover .process-fill{opacity:1}
.process-step:hover .process-step-num,
.process-step:hover .process-step-title{color:var(--ink)}
.process-hint{margin:0;font-size:12px;line-height:1.5;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){
.process .stage,
.process .stage::before,
.process .stage .no,
.process-step-num,
.process-step-title,
.process-track,
.process-fill{transition:none}
/* The lift is the only thing here that moves geometry. Under reduce it does
not, and the colour change alone carries the hover. */
.process-step:hover{transform:none}
.process-step:hover .process-track{transform:none}
}
@media (max-width:1080px){
/* The panel stops tracking and becomes a header for the list below it. There
is nothing to be sticky against once the two are stacked. */
.process{grid-template-columns:minmax(0,1fr);gap:var(--s12)}
.process-panel{order:-1;padding-left:0}
.process .stage{padding-left:0}
}
/* ====================== WHAT IS DOCUMENTED ====================== */
/* Second section from the same handoff: heading against its intro at the top, a
three-by-three field of hairline-separated cells, the closing statement below.
It replaces a two-column layout whose right half was a Section / What it
settles table.
WHY A dl AND NOT THE HANDOFF'S SPANS. This morning I argued these belonged in
a table because `th scope="row"` is what makes a screen reader read "Your
email address: the route we use to answer you" as one pair, and that a card
grid would look better and announce worse. The handoff asks for the card grid.
A description list settles it: dt/dd carries the pairing semantics a table
gave, in a structure that lays out as a grid natively. That reasoning stands
for the other three .table sections, which are unchanged.
The table's Section / What it settles column headers are gone, because the new
layout has no columns to head. That is the one content difference and it shows
up in the parity diff as two removed strings.
The cells are white, not the handoff's #F2F0FA. The hairline grid is drawn by
a 1px gap over a painted parent, so cells have to match the band they sit on -
and this band is white rather than tinted because the lavender invite band
follows it, and two tinted bands do not touch on this site. */
.documented-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16);align-items:start}
.documented-intro{display:flex;flex-direction:column;gap:var(--s6)}
.documented-grid{
margin:var(--s16) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.documented-cell{background:var(--white);padding:var(--s8);display:flex;flex-direction:column;gap:var(--s3)}
/* Flush to the column edges: the outer cells lose their outer padding so the
type lines up with everything else in the wrap. */
.documented-cell:nth-child(3n+1){padding-left:0}
.documented-cell:nth-child(3n){padding-right:0}
/* Was dt/dd until 2026-08-31. The description list carried better pairing
semantics, but core blocks have no dt/dd, so those eighteen sentences could
only ever live in a locked HTML block a marketer cannot edit. Heading plus
paragraph is the accessible, editable equivalent and the pairing is still
programmatic through the heading structure. Recorded in
docs/implementation-log.md - it is a real trade, not an oversight. */
.documented-cell h3{margin:0;color:var(--ink-3)}
.documented-cell p{margin:0;font-size:17px;line-height:1.5;color:var(--ink-2)}
.documented-pull{margin-top:var(--s16);max-width:38ch}
@media (max-width:1080px){
.documented-head{grid-template-columns:minmax(0,1fr);gap:var(--s8)}
.documented-grid{grid-template-columns:repeat(2,1fr)}
.documented-cell:nth-child(3n+1),
.documented-cell:nth-child(3n){padding-left:var(--s8);padding-right:var(--s8)}
.documented-cell:nth-child(2n+1){padding-left:0}
.documented-cell:nth-child(2n){padding-right:0}
}
@media (max-width:600px){
.documented-grid{grid-template-columns:minmax(0,1fr)}
.documented-cell,
.documented-cell:nth-child(2n+1),
.documented-cell:nth-child(2n){padding:var(--s6) 0}
}
/* ================== WHAT WE TYPICALLY LOOK FOR ================== */
/* An editorial split, from the design handoff in the "Website section design
options" project (option 1c): a solid navy title panel running the full height
at the left, the criteria in two labelled row groups at the right, separated by
a hairline. It replaces a rounded white card split down the middle - the
.compare component, which stays because /what-changes/ still uses it.
MAPPED, NOT COPIED. The handoff carries its own palette and a Google-hosted
Archivo pair; this site already has both, so every value below resolves to an
existing token. The handoff's README asks for exactly that. Where the two
disagree:
handoff here why
#12385C navy var(--midnight) #092f4f the site's navy
#F2F0FA ground var(--mist) which is Boson Lavender #f3eff8
#41566E body var(--ink-2)
#7A79A0 label var(--ink-3)
rgba(18,56,92,.16) var(--line)
20px item body 18px the site's scale has 17 and 18,
not 20. Flagged to design.
12px/.14em label .lettering the site's one label role, at
11.5px/.11em. One label style,
not two.
1200/900px 1080/760px this site's breakpoints.
The group labels are h3, not the handoff's span. They read identically and the
heading outline survives - two h3s under the h2 is what /for-owners/ had
before this change and what the a11y gate checks. */
.criteria{display:grid;grid-template-columns:440px 1fr;background:var(--mist)}
.criteria-panel{
background:var(--midnight);padding:var(--s24) var(--s16);
display:flex;flex-direction:column;justify-content:space-between;gap:var(--s16);
}
.criteria-h{color:var(--white);max-width:14ch}
.criteria-note{
margin:0;font-size:16px;line-height:1.65;color:rgba(255,255,255,.74);
border-top:1px solid rgba(255,255,255,.22);padding-top:var(--s8);max-width:46ch;
}
.criteria-body{padding:var(--s24);display:flex;flex-direction:column;gap:var(--s16)}
.criteria-group{display:grid;grid-template-columns:170px 1fr;gap:var(--s8);align-items:start}
/* padding-top optically aligns the label with the first line of body text. */
.criteria-label{margin:0;padding-top:var(--s2);color:var(--ink-3)}
.criteria-items{display:flex;flex-direction:column;gap:var(--s6);max-width:62ch}
.criteria-items p{margin:0;font-size:18px;line-height:1.5;color:var(--ink-2)}
.criteria-items strong{font-weight:600;color:var(--ink)}
.criteria-rule{height:1px;background:var(--line)}
@media (max-width:1080px){
.criteria{grid-template-columns:340px 1fr}
.criteria-panel{padding:var(--s16) var(--s8)}
.criteria-body{padding:var(--s16) var(--s12)}
}
@media (max-width:760px){
/* Stacked: the panel is a full-width header over the list it introduces. */
.criteria{grid-template-columns:minmax(0,1fr)}
.criteria-panel{padding:var(--s12) var(--pad);gap:var(--s8)}
.criteria-body{padding:var(--s12) var(--pad);gap:var(--s12)}
.criteria-group{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.criteria-label{padding-top:0}
}
/* ========================= SPACING UTILITIES ========================= */
/* The bodies carried inline `style="margin-top:var(--s6)"` in 28 places, which
CLAUDE.md forbids and which a marketer editing in the block editor cannot
see. Three classes, on the spacing scale, replace all of them. */
.mt-s6{margin-top:var(--s6)}
.mt-s8{margin-top:var(--s8)}
.mt-s12{margin-top:var(--s12)}
/* ==================== EVIDENCE FROM THE WIDER GROUP ====================
The interview cards, the executive-journey cards and the source lists added
from Hira Zainab's 13 August 2026 email. Mapped in
docs/decisions/014-wider-group-evidence.md.
NO PORTRAIT IS CLEARED YET, so every face is `.face--ph`: the same circle at
the same size, carrying initials. The dimensions are the real ones, so
dropping a photograph in later cannot reflow the section around it. */
.face--ph{
display:grid;place-items:center;
font-family:var(--cond);font-stretch:var(--cw);font-weight:700;
letter-spacing:.04em;
}
/* On the Midnight ground of the quote section. */
/* On the pale band. */
.jrn-card .face--ph{background:var(--lavender);color:var(--ink-2)}
/* --------------------------------- the executive journeys, on the pale band */
.jrn{
display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8);
margin-top:var(--s12);
}
.jrn-card{
display:flex;flex-direction:column;
border-top:1px solid var(--line);padding-top:var(--s6);
}
.jrn-card .face{width:88px;flex:0 0 88px;font-size:24px;margin-bottom:var(--s4)}
.jrn-nm{
font-family:var(--cond);font-stretch:var(--cw);font-weight:700;
font-size:21px;color:var(--ink);
}
.jrn-rl{margin-top:var(--s2);font-size:15px;line-height:1.5;color:var(--ink-2)}
.jrn-note{margin-top:var(--s3);font-size:16px;line-height:1.6;color:var(--ink-2)}
/* Pushed to the bottom so three cards of unequal prose still line their links
up on one row. */
.jrn-links{margin-top:auto;padding-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s2)}
.jrn-foot{margin-top:var(--s12)}
.jrn-qualifier{
margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid var(--line);
font-size:14.5px;line-height:1.55;max-width:78ch;
}
/* --------------------------------- the source lists */
.evidence{margin-top:var(--s6)}
.ev-list{margin-top:var(--s4);list-style:none;padding:0;display:grid;gap:var(--s4)}
.ev-list li{
display:flex;flex-direction:column;gap:2px;
border-top:1px solid var(--line);padding-top:var(--s3);
}
.ev-link{
/* Not a `.tertiary` pill. These are references inside body copy, and eleven
buttons down one page would read as navigation rather than as sources. */
font-size:16px;line-height:1.5;font-weight:600;color:var(--accent);
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em;
}
.ev-link:hover{color:var(--accent-hi)}
.ev-src{font-size:14px;line-height:1.45}
/* Boson Blue fails AA on the pale band; this is the ground's own link colour. */
.section--mist .ev-link{color:var(--link-on-mist)}
@media (max-width:1080px){
.watch,
.jrn{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
.watch,
.jrn{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
.jrn-links{margin-top:var(--s4)}
}
/* ================= READ NEXT — handoff option 3a =================
Imported from Claude Design project 21b9100d, `design_handoff_read_next_nav`,
31 August 2026. The handoff is marked high fidelity, so its colours, type,
spacing, radii and motion are reproduced rather than approximated.
TOKEN MAPPING. The handoff says to prefer the codebase's own tokens and use
its values to pick the nearest match, so three of its colours resolve to
tokens already here and the rest become `--nx-*`:
handoff #4a3fa6 card-2 fill -> var(--indigo) #5051a3 (delta 3/17/3)
handoff #eeecf7 page ground -> var(--lavender) #efeaf6 (delta 1/0/1)
handoff #fdfdff on-card text -> var(--white) #fff
handoff 22px mobile radius -> var(--r-lg) 22px (exact)
handoff 16px / 32px spacing -> var(--s4) / var(--s8) (exact)
WHERE THE SCALES DISAGREE, THE HANDOFF WINS AND IT IS RECORDED. Its internal
spacing runs 6/10/14/18/22/26/28/30 and Boson's scale is 4/8/12/16/24/32, so
the card's own padding and gaps are literals from the handoff. That is a
deliberate departure from "tokens come from the design system, not from
taste" and it needs design-system sign-off; it is not a slip.
================================================================ */
.nx{
/* TWO OF THE HANDOFF'S OWN COLOURS FAIL WCAG 2.2 AA AND ARE CHANGED HERE.
Measured with axe against the rendered page, not by eye:
section label #6b6795 on #efeaf6 -> 4.16:1 needs 4.5 now #656090 (4.9:1)
eyebrow card 2 #c0b8ee on #5051a3 -> 3.75:1 needs 4.5 now #d8d3f6 (4.6:1)
Both are 11-12px, so they are normal text and the threshold is 4.5, not 3.0.
The handoff's accessibility note checks the descriptions and the white
titles and says they clear 4.5 - which they do - but it does not check the
eyebrows or the section label, and those are the two that fail. Card 1's
eyebrow (#9aa2d4 on #23306b) passes at 4.98 and is untouched.
Reported back rather than absorbed silently: the handoff should carry the
corrected values, because the next implementation of it will hit the same
wall. CLAUDE.md makes zero axe violations at AA a hard gate, so this was
never a judgement call. */
--nx-navy:#23306b; /* handoff card-1 fill; no near token exists */
--nx-eyebrow-navy:#9aa2d4;
--nx-eyebrow-indigo:#d8d3f6; /* handoff #c0b8ee fails AA - see note */
--nx-desc-navy:#c3c8e6;
--nx-desc-indigo:#d5d0f3;
--nx-rail-navy:#7f8ad4;
--nx-rail-indigo:#d5d0f3;
--nx-label:#656090; /* handoff #6b6795 fails AA - see note */
--nx-lift:220ms cubic-bezier(.2,.7,.3,1);
--nx-tint:200ms ease;
background:var(--lavender);
padding-top:var(--s16);padding-bottom:var(--s16);
}
.nx .wrap{display:flex;flex-direction:column;gap:18px}
/* Section label. A real h2 rather than a