/* Self-hosted OFL subsets. Latin and latin-ext are separate files so a visitor
downloads only the ranges the page actually uses. Nothing loads from Google. */
@font-face{
font-family:'Bricolage Grotesque';
src:url('/fonts/BricolageGrotesque-var-latin.woff2?v=13b4ef87') format('woff2');
font-weight:200 800;font-stretch:75% 100%;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:'Bricolage Grotesque';
src:url('/fonts/BricolageGrotesque-var-latin-ext.woff2?v=1394acf5') format('woff2');
font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap;
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Instrument Sans';
src:url('/fonts/InstrumentSans-var-latin.woff2?v=72c72cc0') format('woff2');
font-weight:400 700;font-stretch:75% 100%;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:'Instrument Sans';
src:url('/fonts/InstrumentSans-var-latin-ext.woff2?v=3265280d') format('woff2');
font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap;
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'IBM Plex Mono';
src:url('/fonts/IBMPlexMono-Regular-latin.woff2?v=bb87500e') format('woff2');
font-weight:400;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:'IBM Plex Mono';
src:url('/fonts/IBMPlexMono-Regular-latin-ext.woff2?v=4af8cef5') format('woff2');
font-weight:400;font-style:normal;font-display:swap;
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'IBM Plex Mono';
src:url('/fonts/IBMPlexMono-Medium-latin.woff2?v=d32f0e07') format('woff2');
font-weight:500;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:'IBM Plex Mono';
src:url('/fonts/IBMPlexMono-Medium-latin-ext.woff2?v=3e942f42') format('woff2');
font-weight:500;font-style:normal;font-display:swap;
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* ---------------------------------------------------------------------------
One ground, one measure, one accent.
--card was #F3F5F6, which is 1.09:1 against the paper — a surface that
claimed to be a surface and wasn't. It is now dark enough to read as one,
which is what lets the money table's own column, the refusals section and
the form's handoff blocks carry weight without a border doing all the work.
Form fields keep the old lighter value under --field, because a field has
to read as somewhere you type into, which means lighter than its ground.
--ink-2 moved a shade darker with the ground: at #5A656B every quiet line
on the new card fell to 4.23:1, under AA. It is 4.57:1 there now, and no
worse anywhere else.
The measure: section heads and every structural row — lists, tables, the
rules under them — run the FULL content column, so the right edge is
declared in the same place all the way down every page. Running prose sits
at --prose inside it. That is why `p` carries the max-width; a row that
puts its prose in a grid cell instead has to name the measure itself.
--------------------------------------------------------------------------- */
:root{
--paper:#E9ECEE;
--card:#D3DADE;
--field:#F3F5F6;
--ink:#12171A;
--ink-2:#556066;
--rule:#C6CDD1;
--signal:#2334C4;
--signal-bright:#2B3FE8;
--signal-lift:#8E9BFF; /* the accent, legible on the ink ground */
--display:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
--body:'Instrument Sans',system-ui,-apple-system,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
--gut:clamp(1.25rem,4vw,3.5rem);
--rail:9rem;
--maxw:74rem;
--prose:42rem;
}
*,*::before,*::after{box-sizing:border-box}
/* The masthead is sticky, so a fragment jump has to clear it or the heading
it lands on is hidden under the bar. Measured heights: 61px at 880px and
up, 109px once the CTA and the wrapped nav share the bar, 94px below 640px
where the CTA is dropped, and 130px below ~430px where five links need two
lines. Each step is the next one up with room to spare — over-padding only
leaves a gap, under-padding loses the heading. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
@media (max-width:880px){html{scroll-padding-top:8rem}}
@media (max-width:430px){html{scroll-padding-top:9.5rem}}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--body);
font-size:clamp(1rem,0.96rem + 0.2vw,1.075rem);
line-height:1.55;
font-weight:400;
-webkit-font-smoothing:antialiased;
}
a{color:var(--signal);text-decoration:none;border-bottom:1px solid rgba(35,52,196,.32)}
a:hover{border-bottom-color:var(--signal)}
:focus-visible{outline:2px solid var(--signal-bright);outline-offset:3px}
::selection{background:var(--signal-bright);color:#fff}
/* The measure lives on the element, not on a class, so a paragraph is the
right width by default and a component has to opt out on purpose. */
p{margin:0 0 1.05rem;max-width:var(--prose)}
p:last-child{margin-bottom:0}
figure{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.visually-hidden{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* ---------- skip link ---------- */
.skip{
position:absolute;left:-9999px;top:0;z-index:100;
background:var(--ink);color:var(--paper);border:0;
font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
padding:.7rem 1rem;
}
.skip:focus{left:0}
/* ---------- masthead ---------- */
.masthead{
position:sticky;top:0;z-index:50;
background:color-mix(in srgb,var(--paper) 90%,transparent);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--rule);
}
.masthead .wrap{display:flex;align-items:center;gap:1.25rem 1.5rem;min-height:3.75rem;flex-wrap:wrap;padding-block:.6rem}
.brand{
font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.02em;
color:var(--ink);border:0;margin-right:auto;
}
/* The ampersand is the join the company is named after, so it is the one
character in the masthead that gets the accent. */
.brand span{color:var(--signal);font-weight:400}
.navlinks{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.navlinks a{
font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-2);border:0;padding-block:.35rem;
}
.navlinks a:hover{color:var(--ink)}
.navlinks a[aria-current="page"]{color:var(--ink)}
.navlinks a[aria-current="page"]::before{content:"";width:.34rem;height:.34rem;background:var(--signal);display:inline-block;margin-right:.42rem;vertical-align:.16em}
/* The rail wraps onto its own line rather than scrolling sideways. A
horizontal scroller hides links from anyone who does not think to drag it,
and the argument lives on those pages. */
@media (max-width:860px){
.navlinks{order:3;width:100%;gap:.5rem 1.15rem}
}
/* One CTA per screen. On a phone the hero's button is a thumb away, so the
masthead drops its duplicate and the sticky header stays two short rows. */
@media (max-width:640px){
.masthead .btn{display:none}
.masthead .wrap{min-height:0}
}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;
font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
padding:.6rem 1.15rem;border:1px solid var(--signal);
background:var(--signal);color:#fff;border-radius:0;
transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--sm{min-height:2.5rem;padding:.45rem .9rem;font-size:.68rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.1rem}
/* ---------- hero ---------- */
.hero{padding-block:clamp(3rem,9vh,5.5rem) clamp(2.4rem,6vh,3.4rem);border-bottom:1px solid var(--ink)}
.hero .eyebrow{margin:0 0 1.3rem;max-width:none}
@media (max-width:560px){.hero .eyebrow{letter-spacing:.08em;font-size:.66rem;text-wrap:balance;max-width:24ch}}
.herogrid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.2rem var(--gut);align-items:center}
.hero h1{
font-family:var(--display);font-weight:800;
font-size:clamp(2.7rem,8.4vw,4.15rem);
line-height:.94;letter-spacing:-.035em;margin:0;max-width:14ch;text-wrap:balance;
}
/* The link-preview card sets "one human" in signal at display scale. The page
does the same, so the accent lands somewhere you can actually see it. */
.hero h1 em{font-style:normal;color:var(--signal)}
.hero .lede{
margin:1.8rem 0 0;font-size:clamp(1.06rem,1rem + .45vw,1.28rem);line-height:1.5;
max-width:34rem;color:var(--ink-2);
}
.hero .lede strong{color:var(--ink);font-weight:600}
.hero .credential{margin:1.05rem 0 0;color:var(--ink-2);max-width:34rem}
@media (min-width:1000px){
.herogrid{grid-template-columns:minmax(0,1.1fr) minmax(21rem,.9fr);align-items:start;gap:0 var(--gut)}
.hero h1{max-width:13ch}
}
/* On a phone the manifest is the strongest thing on the page, so it comes
before the buttons rather than after two screens of prose. */
.hero .copy{order:1}
.hero .fleet{order:2}
.hero .cta-row{order:3}
@media (min-width:1000px){
.hero .copy{order:0;grid-row:1}
.hero .cta-row{order:0;grid-row:2;margin-top:2.4rem}
.hero .fleet{order:0;grid-row:1 / span 2;grid-column:2;align-self:start;margin-top:.35rem}
}
.hero .copy,.hero .cta-row{grid-column:1}
/* ---------- fleet manifest ----------
The roles are listed rather than counted, so "one human" is checkable at a
glance instead of taken on trust. */
.fleet{background:var(--ink);color:var(--paper);padding:.2rem 0 0}
.fleet__top,.fleet__foot{
display:flex;justify-content:space-between;gap:1rem;margin:0;padding:.85rem 1.2rem;max-width:none;
font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
color:rgba(233,236,238,.6);
}
.fleet__top{border-bottom:1px solid rgba(233,236,238,.16)}
.fleet__foot{border-top:1px solid rgba(233,236,238,.16);color:rgba(233,236,238,.8)}
.fleet__roles{list-style:none;margin:0;padding:0}
.fleet__roles li{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:.7rem 1.2rem;border-bottom:1px solid rgba(233,236,238,.09);
}
.fleet__roles li:last-child{border-bottom:0}
.fleet__roles li::before{
content:"";width:.42rem;height:.42rem;flex:none;order:-1;margin-right:.85rem;
box-shadow:inset 0 0 0 1px rgba(233,236,238,.45);
}
/* The human row is tinted in signal rather than in near-invisible white, so
the one row the headline is about is the one row you see first. */
.fleet__roles li.is-human{background:rgba(43,63,232,.16)}
.fleet__roles li.is-human::before{background:var(--signal-bright);box-shadow:none}
.fleet__roles b{font-weight:400;font-size:.94rem;margin-right:auto}
.fleet__roles li.is-human b{font-weight:600}
.fleet__roles span{
font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
color:rgba(233,236,238,.5);white-space:nowrap;
}
.fleet__roles li.is-human span{color:var(--paper)}
/* ---------- section scaffold ---------- */
.sec{border-bottom:1px solid var(--rule);padding-block:clamp(2.8rem,7vw,4.4rem)}
.sec > .wrap{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 var(--gut)}
/* A , so it needs the paragraph margin taken back off — the rail label
is positioned by the grid, not by leading. */
.marker{
position:sticky;top:5.25rem;align-self:start;margin:0;max-width:none;
font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
@media (max-width:880px){
.sec > .wrap{grid-template-columns:minmax(0,1fr)}
.marker{position:static;margin-bottom:1.2rem}
}
/* The rule under every heading runs the full content column, so the right
edge is declared in the same place in every section on every page. That is
why h2 carries no max-width — balance the wrap instead. */
h2{
font-family:var(--display);font-weight:700;
font-size:clamp(1.7rem,1.3rem + 1.7vw,2.6rem);
line-height:1.06;letter-spacing:-.028em;margin:0 0 1.4rem;
padding-bottom:1.2rem;border-bottom:1px solid var(--ink);text-wrap:balance;
}
.sublead{
font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--signal);margin:2.2rem 0 .9rem;max-width:none;
}
.sublead--quiet{color:var(--ink-2)}
/* ---------- first call ---------- */
.calls{list-style:none;margin:1.4rem 0 2.2rem;padding:0}
.calls li{padding:1.15rem 0;border-top:1px solid var(--rule)}
.calls li:last-child{border-bottom:1px solid var(--rule)}
.said{
font-family:var(--display);font-weight:400;
font-size:clamp(1.32rem,1.1rem + 1.5vw,2.05rem);
line-height:1.24;letter-spacing:-.02em;
margin:0;padding-left:1.1rem;border-left:3px solid var(--ink);max-width:26ch;
}
.calls .said{font-size:clamp(1.14rem,1rem + .75vw,1.5rem);max-width:32ch}
.attrib{margin:.9rem 0 2.3rem;color:var(--ink-2)}
.calls .attrib{margin:.65rem 0 0}
.verdict{list-style:none;margin:0 0 1.9rem;padding:0}
.verdict li{
display:grid;grid-template-columns:7rem 1fr;gap:.2rem 1.2rem;
padding:.85rem 0;border-top:1px solid var(--rule);
}
.verdict li:last-child{border-bottom:1px solid var(--rule)}
.verdict b{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--signal);padding-top:.22rem}
.verdict li:last-child b{color:var(--ink-2)}
.verdict p{max-width:none;margin:0}
@media (max-width:520px){.verdict li{grid-template-columns:1fr}}
/* ---------- qualifiers ----------
The row runs the full content column so its rules line up with the heading's;
a qualifier long enough to be prose wraps in a
and sits at the measure,
the same way a .systems row does. */
.qual{list-style:none;margin:0 0 1.4rem;padding:0}
.qual li{padding:.85rem 0;border-top:1px solid var(--rule);font-size:1.08rem}
.qual li:last-child{border-bottom:1px solid var(--rule)}
.qual p{margin:0}
.qual--not li{color:var(--ink-2);font-size:1rem}
/* ---------- method steps ---------- */
.steps{list-style:none;counter-reset:s;margin:1.4rem 0 0;padding:0}
.steps li{
padding:1.1rem 0;border-top:1px solid var(--rule);
display:grid;grid-template-columns:2.6rem 1fr;gap:.35rem 1rem;
}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.steps li::before{
counter-increment:s;content:"0" counter(s);grid-row:span 2;
font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--signal);padding-top:.28rem;
}
.steps b{font-weight:600}
.steps .removes{
font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-2);
}
.steps .removes i{font-style:normal;color:var(--ink-2);opacity:.7}
@media (max-width:520px){
.steps li{grid-template-columns:1fr}
.steps li::before{grid-row:auto}
}
/* ---------- commitments ---------- */
.commit{list-style:none;counter-reset:c;margin:1.4rem 0 0;padding:0}
.commit li{
padding:1.15rem 0;border-top:1px solid var(--rule);
display:grid;grid-template-columns:7rem 1fr;gap:.3rem 1.2rem;
}
.commit li:last-child{border-bottom:1px solid var(--rule)}
.commit li::before{
counter-increment:c;content:"Commitment " counter(c);grid-row:span 2;
font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--signal);padding-top:.26rem;line-height:1.4;
}
.commit b{font-weight:600}
.commit .detail{color:var(--ink-2)}
@media (max-width:640px){
.commit li{grid-template-columns:1fr}
.commit li::before{grid-row:auto}
}
/* ---------- terms ---------- */
.terms{list-style:none;counter-reset:t;margin:0;padding:0}
.terms li{padding:.95rem 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:2rem 1fr;gap:1rem}
.terms li:last-child{border-bottom:1px solid var(--rule)}
.terms li::before{counter-increment:t;content:counter(t);font-family:var(--mono);font-size:.75rem;color:var(--signal);padding-top:.18rem}
.terms b{font-weight:600}
/* These three rows put their running prose in a grid cell rather than a
,
so the measure has to be named here — the bare `p` rule cannot reach it,
and without this the text sets to ~100 characters a line while the
paragraphs beside it stop at 42rem. The cell is a grid item, so it is
blockified and max-width applies. */
.steps li > span,.commit li > span,.terms li > span{max-width:var(--prose)}
/* ---------- money table ----------
The column that carries the argument now looks like it does: its own
ground, ink down both sides, and an inverted head. */
.tablewrap{overflow-x:auto;margin:1.4rem 0 1.8rem;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:44rem;font-size:.94rem}
th,td{text-align:left;padding:.9rem;vertical-align:top;border-bottom:1px solid var(--rule)}
thead th{
font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-2);font-weight:400;border-bottom:1px solid var(--ink);
}
tbody th{
font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-2);font-weight:400;width:7.5rem;
}
.col-us{background:var(--card);border-inline:1px solid var(--ink)}
thead .col-us{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:500}
td.col-us{font-weight:600;color:var(--ink)}
tbody tr:last-child .col-us{border-bottom:1px solid var(--ink)}
@media (max-width:760px){
table{min-width:0;display:block}
thead{display:none}
tbody,tr,th,td{display:block;width:auto}
tr{border-top:1px solid var(--ink);padding:.9rem 0}
tbody th{padding:0 0 .5rem;border:0}
td{border:0;padding:.3rem 0 .3rem 8.5rem;position:relative}
td::before{
content:attr(data-col);position:absolute;left:0;top:.3rem;width:8rem;
font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
}
td.col-us{background:var(--card);border:0;border-left:3px solid var(--ink);padding-left:9rem;margin-top:.3rem}
td.col-us::before{left:.6rem;color:var(--ink)}
/* The closing rule under the column belongs to the desktop table's box.
`td.col-us{border:0}` above is (0,1,1) and cannot beat the (0,2,2)
last-child rule, which is outside any query — so it is reset here, at
matching specificity and later in the file. */
tbody tr:last-child .col-us{border-bottom:0}
}
.aside{
background:var(--card);border-left:3px solid var(--signal);
padding:1.3rem 1.4rem;
}
.aside p:first-child{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin-bottom:.7rem}
/* ---------- operating figures ----------
.figrow is the grid of numbers wherever it appears. Wrapped in a