/* bls-digital.com — the Claude Design home artboards (2026-09-12), ported to the sixteen pages.
   Palette, type and layout from that design; fonts self-hosted, since the only third-party
   request this site makes is Google Tag Manager. */

@font-face{
  font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url(/assets/fonts/plus-jakarta-sans-var-latin.cd8db90c.woff2) format("woff2");
  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;
}
/* Metric-matched fallback, fontTools against the subsetted file and macOS Arial, on this site's
   own text: size-adjust matches advance width so line breaks do not move on swap. */
@font-face{
  font-family:"Jakarta Fallback"; src:local("Arial"),local("Helvetica Neue"),local("Helvetica");
  size-adjust:103.97%; ascent-override:99.84%; descent-override:21.35%; line-gap-override:0%;
}

:root{
  /* One identity across the two surfaces Benjamin actually publishes on. These are the
     LinkedIn Engine v2 tokens (linkedin-engine/context/brand-identity.md, 19 Sep 2026) — the
     same canvas, the same ink, the same single blue — so a reader who saw a post and then opens
     the site sees one company, not two. Nothing here is invented and nothing is borrowed from
     the internal ops pages: those are documents, this is the public face.

     Three blues, because one cannot pass every gate. --blue is the LinkedIn accent and only ever
     sits on ink (5.38). --blue-deep is the canvas-safe one: white on it 5.17, and it reads on the
     canvas at 4.70, so it carries links, fills and the underline. --blue-deepest is its hover
     (6.81). Computed, not eyeballed — scripts/check-contrast.py is the gate, inside --strict. */
  --ink:#0A0A0A; --navy:#0E1726; --blue:#3B82F6; --blue-deep:#2563EB; --blue-deepest:#1D4FD0;
  --white:#FFFFFF;
  --grey:#8A8A8A; --cream:#F6F4EF; --reading:#141414;
  /* tokens.md gives these two a meaning, and the site had them inverted: amber is what BINDS the
     buyer (money, term, condition), crit is what BLS REFUSES. On the navy blocks they measure
     8.36 and 6.23, both clear of the 3:1 rule gate. */
  --amber:#F59E0B; --crit:#E07B7B;
  --bg:var(--cream); --fg:var(--reading); --muted:#5C5C5C; --line:rgba(20,20,20,.14);
  --block:var(--navy); --dark-line:rgba(255,255,255,.14);
  /* --link is text on the READING surface and flips with the scheme; --fill is a button
     background and never flips, because white sits on it in both schemes. */
  --link:var(--blue-deep); --fill:var(--blue-deep); --fill-hover:var(--blue-deepest);
  --font:"Plus Jakarta Sans","Jakarta Fallback",Arial,sans-serif;
  --measure:34em; --radius:10px; --gutter:clamp(20px,5vw,72px); --maxw:1200px;
  --h1:clamp(40px,6vw,68px); --num:clamp(56px,6.6vw,96px); --pad:clamp(72px,9vw,136px);
}
@media (prefers-color-scheme:dark){
  :root{--bg:var(--ink); --fg:var(--white); --muted:var(--grey); --line:rgba(255,255,255,.14);
        --link:var(--blue)}
}

*{box-sizing:border-box; margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); font-size:17px; line-height:1.65; font-weight:400;
  color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased;
}
a{color:var(--link); text-decoration:none}
/* hover underlines instead of shifting hue: the old --blue-pressed failed on cream (4.06) and
   would fail harder on ink. An underline reads in both schemes and costs no contrast. */
a:hover{color:var(--link); text-decoration:underline; text-underline-offset:3px}
p{max-width:var(--measure); text-wrap:pretty; margin:0 0 18px}
h1,h2,h3{text-wrap:balance}
h1{font-size:var(--h1); font-weight:800; letter-spacing:-.03em; line-height:1; max-width:14ch}
h2{font-size:clamp(28px,3.6vw,38px); font-weight:700; letter-spacing:-.02em; line-height:1.15; max-width:22ch}
h3{font-size:20px; font-weight:700; letter-spacing:-.01em; line-height:1.3}
strong{font-weight:600}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter)}
.dark{background:var(--ink); color:var(--white)}
.dark p{color:var(--white)}
.dark .muted, .dark .small{color:var(--grey)}
.small{font-size:14px; line-height:1.5}
.muted{color:var(--muted)}
/* The signature, carried over from the LinkedIn assets: a short thick blue underline under one
   word of the headline, once per page. It is drawn as a background so it never moves the text and
   never breaks the line box, and it sits behind the descenders rather than cutting them. */
.mark{
  background-image:linear-gradient(var(--link),var(--link));
  background-size:100% .1em; background-position:0 96%; background-repeat:no-repeat;
  padding-bottom:.04em;
}
.dark .mark, .page-head .mark{background-image:linear-gradient(var(--blue),var(--blue))}

.eyebrow{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--link); display:block; margin:0 0 14px}
/* Anything standing on ink or navy in BOTH schemes takes the brand hue back: --link would be
   --blue-deep here in light mode and that is 3.31 on ink, 3.00 on navy. */
.page-head .eyebrow, .dark .eyebrow, .binds .eyebrow, .binds-block .eyebrow, .refuses .eyebrow{color:var(--blue)}
.dark a:not([class]), .binds a, .binds-block a, .refuses a{color:var(--blue)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:20px; top:12px; z-index:9; background:var(--fill); color:#fff; padding:10px 14px; border-radius:8px}
:focus-visible{outline:2px solid var(--link); outline-offset:3px}

/* buttons */
.cta{
  display:inline-flex; align-items:center; gap:10px; background:var(--fill); color:var(--white);
  font-weight:600; font-size:16px; line-height:1; padding:18px 26px; border-radius:var(--radius);
  min-height:48px;
}
.cta::after{content:"→"; font-weight:500}
.cta:hover{background:var(--fill-hover); color:var(--white); text-decoration:none}
.cta-row{display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin:0 0 8px}
.after{font-size:14px; line-height:1.5; color:var(--grey); margin:0}
main .after{color:var(--muted)}

/* header */
.top{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 0}
.top .brand{
  color:var(--white); font-weight:800; font-size:15px; letter-spacing:.18em; text-transform:uppercase;
  line-height:1; display:inline-flex; gap:.5em;
}
.top .brand b{font-weight:800; padding-bottom:5px; border-bottom:3px solid var(--blue)}
.top .brand span{font-weight:800}
.mainnav{display:flex; gap:32px; font-size:14px; font-weight:500}
.mainnav a{color:var(--grey)}
.mainnav a:hover, .mainnav a[aria-current]{color:var(--white)}
.lang{font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--grey)}
.lang a{color:var(--grey)} .lang a:hover{color:var(--white)}
.top-end{display:flex; align-items:center; gap:22px}
/* min-height 44: this is the primary conversion element and it was 33px on a phone. */
.nav-cta{background:var(--fill); color:var(--white); font-size:14px; font-weight:600; line-height:1; padding:11px 16px; border-radius:var(--radius); white-space:nowrap; display:inline-flex; align-items:center; min-height:44px}
.nav-cta:hover{background:var(--fill-hover); color:var(--white); text-decoration:none}
.cta-alt{font-size:14px; text-decoration:underline; text-underline-offset:3px}
.page-head .cta-alt{color:var(--grey)} .page-head .cta-alt:hover{color:var(--white)}

/* the dark zone: nav, then the page head */
.page-head{padding-top:clamp(48px,9vw,128px); padding-bottom:clamp(40px,6vw,80px); display:grid; gap:30px}
.page-head h1{margin-top:4px}
.page-head .lede{
  font-size:clamp(18px,1.5vw,22px); line-height:1.55; color:var(--grey); max-width:30em; margin:0;
}
.page-head .lede strong{color:var(--white); font-weight:600}
.page-head .cta-row{margin:0}

/* counters */
.stats{
  display:grid; grid-template-columns:1.5fr 1fr 1fr; border-top:1px solid var(--dark-line);
  list-style:none; padding:0; margin:6px 0 0;
}
.stats li{padding:36px 32px 40px; border-left:1px solid var(--dark-line)}
.stats li:first-child{border-left:0; padding-left:0}
.stats b{
  display:block; white-space:nowrap; font-size:var(--num); font-weight:800; letter-spacing:-.04em;
  line-height:.95; color:var(--white); font-variant-numeric:tabular-nums;
}
.stats b small{font-size:.4em; font-weight:600; letter-spacing:0; margin-left:.15em; color:var(--grey); vertical-align:.35em}
.stats span{display:block; margin-top:14px; font-size:15px; font-weight:500; color:var(--grey)}

/* body sections: a hairline and air before every h2 */
main h2{margin-top:var(--pad); padding-top:34px; border-top:1px solid var(--line)}
main > h2:first-child{margin-top:44px}
main p{margin-bottom:18px}
main > p + p{margin-top:0}

/* findings: the numbered list on the home page */
ul.plain{list-style:none; padding:0; margin:24px 0; display:grid}
ul.plain li{padding:28px 0; border-top:1px solid var(--line); max-width:var(--measure)}
ul.plain li:first-child{border-top:0; padding-top:4px}
ul.plain.no{counter-reset:f}
ul.plain li{position:relative; padding-left:48px}
ul.plain.no li{counter-increment:f}
ul.plain.no li::before{content:"0" counter(f); position:absolute; left:0; top:30px; font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--link)}
.dark ul.plain.no li::before, .binds ul.plain.no li::before{color:var(--blue)}
ul.plain li:first-child::before{top:6px}
ul.plain.yes li{padding-left:30px}
ul.plain.yes li::before{content:"+"; position:absolute; left:0; top:28px; color:var(--link); font-weight:700}
.dark ul.plain.yes li::before, .binds ul.plain.yes li::before{color:var(--blue)}
ul.plain.yes li:first-child::before{top:4px}
ul.plain li strong{display:block; font-size:20px; font-weight:700; letter-spacing:-.01em; line-height:1.3; margin-bottom:8px; color:var(--fg)}
.dark ul.plain li strong, .binds ul.plain li strong{color:var(--white)}
ul.plain li{color:var(--muted); max-width:var(--measure)}
.dark ul.plain li, .binds ul.plain li{border-color:var(--dark-line)}

/* doors */
.grid.two{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line);
  margin:34px 0 0; padding:0; list-style:none;
}
.rule-accent{border-bottom:1px solid var(--line); padding:40px 48px 40px 0; display:flex; flex-direction:column; gap:14px}
.rule-accent:nth-child(even){border-left:1px solid var(--line); padding-left:48px; padding-right:0}
.rule-accent h3{font-size:clamp(22px,2.2vw,30px); letter-spacing:-.025em; line-height:1.15; max-width:16ch}
.rule-accent p{color:var(--muted); flex:1; margin:0}
.rule-accent a{font-weight:600; font-size:15px}

/* the honesty block, and every other quoted block */
.binds h3:first-child, .binds-block h3:first-child, .refuses h3:first-child{margin-top:0}
.binds, .binds-block, .refuses{
  background:var(--block); color:var(--white); padding:clamp(32px,4vw,56px) clamp(24px,3vw,48px);
  border-radius:14px; margin:var(--pad) 0 0;
}
.binds p, .binds-block p, .refuses p{color:#D7D7DE; max-width:var(--measure)}
.binds strong, .binds-block strong, .refuses strong{color:var(--white)}
.binds h3, .refuses h3, .binds-block h3{color:var(--white)}
.binds, .binds-block, .terms{border-left:3px solid var(--amber)}
.refuses{border-left:3px solid var(--crit)}

/* phases, terms, cases, tables, forms */
.phases{display:grid; margin:30px 0 0}
.phase{border-top:1px solid var(--line); padding:28px 0; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,4vw,64px)}
.phase .when{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--link)}
.phase h3{margin-bottom:8px}
.phase p{color:var(--muted); margin:0}
.terms dl{margin:0}
.terms dt{font-weight:700; font-size:16px; margin:26px 0 6px; color:var(--white)}
.terms dt:first-child{margin-top:0}
.terms dd{margin:0; color:#D7D7DE; max-width:var(--measure)}
.case{border-top:1px solid var(--line); padding-top:28px; margin-top:var(--pad)}
.case h3{margin-top:24px; font-size:17px}
.window, .label{display:inline-block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--link); margin-bottom:8px}
.dark .window, .dark .label, .binds .window, .binds .label{color:var(--blue)}
.window{color:var(--muted)}
details{border-top:1px solid var(--line); padding:16px 0}
summary{cursor:pointer; font-weight:600}
details p{margin:12px 0 0; color:var(--muted)}
.tablewrap{overflow-x:auto; margin:24px 0}
table{border-collapse:collapse; width:100%; min-width:420px; font-size:15px}
th{text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); border-bottom:1px solid var(--line); padding:0 14px 10px 0}
td{border-bottom:1px solid var(--line); padding:12px 14px 12px 0}
td.num, th.num{text-align:right; padding-right:0; font-variant-numeric:tabular-nums}
.mono{font-variant-numeric:tabular-nums}
.lede{font-size:19px; color:var(--muted); max-width:30em}
form{margin:34px 0 0; max-width:620px}
.field{margin-bottom:18px}
.field label{display:block; font-weight:600; font-size:15px; margin-bottom:6px}
.field .hint{display:block; font-size:13.5px; color:var(--muted); margin-bottom:8px}
input, textarea{width:100%; padding:13px 15px; font:400 16px/1.5 var(--font); color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius)}
textarea{min-height:140px; resize:vertical}
select{width:100%; padding:13px 15px; font:400 16px/1.5 var(--font); color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius)}
.form-error{display:none; margin:34px 0 0; padding:16px 18px; border-left:3px solid var(--amber); max-width:620px}
.form-error:target{display:block}
button{background:var(--fill); color:#fff; font:600 16px/1 var(--font); padding:18px 26px; border:0; border-radius:var(--radius); cursor:pointer; min-height:48px}
button:hover{background:var(--fill-hover)}
.hp{position:absolute; left:-9999px}
/* GTM's noscript iframe: its inline style is blocked by style-src 'self', so it lives here. */
.gtm-ns{display:none; visibility:hidden}

/* footer */
footer{border-top:1px solid var(--dark-line); padding:40px 0; font-size:14px; margin-top:var(--pad)}
footer .brand-foot{font-weight:800; letter-spacing:.18em; text-transform:uppercase; font-size:13px; color:var(--white)}
footer p{color:var(--grey); max-width:none; margin:0 0 10px}
footer a{color:var(--white)}
footer a:hover{color:var(--grey)}
footer .fine{font-size:13px; color:var(--grey); padding-top:18px; border-top:1px solid var(--dark-line); margin-top:18px}

@media (max-width:1000px) and (min-width:761px){
  .phase{grid-template-columns:1fr; gap:14px}
}
@media (max-width:760px){
  ul.plain li{padding-left:34px}
  /* 44px targets: every standalone link was 15-23px tall. Inline links inside a paragraph keep
     the line box (WCAG 2.5.5 exempts text inside a sentence); these are all standalone. */
  .mainnav{gap:20px; font-size:13.5px; order:3; width:100%; padding-bottom:0}
  .mainnav a{display:inline-flex; align-items:center; min-height:44px}
  .lang a{display:inline-flex; align-items:center; min-height:44px}
  .rule-accent a, .cta-alt, .more a{display:inline-flex; align-items:center; min-height:44px}
  .top .brand{min-height:44px; align-items:center}
  footer a{display:inline-block; padding:11px 0}
  .top{flex-wrap:wrap; gap:14px; padding:22px 0}
  .top-end{gap:14px}
  .nav-cta{padding:10px 14px; font-size:13px; min-height:44px}
  .page-head{padding-top:44px; padding-bottom:40px; gap:24px}
  h1{max-width:none}
  .cta{width:100%; justify-content:center}
  .stats{grid-template-columns:1fr}
  .stats li, .stats li:first-child{border-left:0; padding:22px 0; border-top:1px solid var(--dark-line); display:flex; align-items:baseline; justify-content:space-between; gap:16px}
  .stats li:first-child{border-top:0}
  .stats b{font-size:44px; white-space:normal}
  .stats span{margin-top:0; text-align:right}
  .grid.two{grid-template-columns:1fr}
  .rule-accent, .rule-accent:nth-child(even){border-left:0; padding:30px 0}
  .phase{grid-template-columns:1fr; gap:12px}
  ul.plain.no li{grid-template-columns:34px minmax(0,1fr); gap:12px}
}

/* consent banner: shown until a choice is stored, reopened from the footer link */
.cc{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:20; max-width:760px;
  background:var(--navy); color:var(--white); border:1px solid var(--dark-line);
  border-radius:14px; padding:14px 18px; box-shadow:0 18px 50px rgba(0,0,0,.35);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
/* One row, not a stacked card: it was 151px tall on desktop and 165px on a phone, sitting over
   the fold and staying there for the whole scroll. Same words, roughly half the height. */
.cc p{color:#D7D7DE; font-size:14px; line-height:1.5; margin:0; max-width:none; flex:1 1 300px}
.cc a{color:var(--white); text-decoration:underline}
.cc-buttons{display:flex; gap:10px; margin-top:0 !important; flex:0 0 auto}
.cc button{font-size:14px; padding:10px 18px; min-height:44px}
.cc button[data-no]{background:transparent; color:var(--grey); border:1px solid var(--dark-line)}
.cc button[data-no]:hover{background:transparent; color:var(--white)}
@media (max-width:760px){
  .cc{left:12px; right:12px; bottom:12px; padding:13px 14px; gap:10px}
  .cc p{font-size:13.5px; line-height:1.45}
  .cc p{flex:1 1 100%}
  .cc-buttons{flex:1 1 100%}
  .cc button{flex:1}
}
/* Nothing is permanently unreachable behind it: the last section clears the bar's height. */
@media (max-width:760px){ footer{padding-bottom:104px} }

/* case figures: inline SVG, no script, no library, no extra request.
   The palette is chosen per scheme, not flipped, and was run through the dataviz validator:
   light #175CD3 + #B45309 on cream, dark #3B82F6 + #C87A0A on ink — all checks pass.
   Text wears the text tokens; a coloured dot beside a label carries identity, never the text.
   The tables under each figure stay: they are the data view, and the hover titles are native
   SVG <title>, so nothing here needs JavaScript or a new CSP hash. */
.fig{margin:32px 0 6px; max-width:560px}
.fig svg{display:block; width:100%; height:auto; overflow:visible}
.fig figcaption{font-size:13px; line-height:1.5; color:var(--muted); margin:12px 0 0; max-width:var(--measure)}
.fig .s1{--c:var(--link)} .fig .s2{--c:#B45309}
.fig .bar-mute{fill:var(--muted); opacity:.5}
.fig .mark{fill:none; stroke:var(--c); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.fig .dot{fill:var(--c); stroke:var(--bg); stroke-width:2}
.fig .swatch{fill:var(--c)}
.fig .bar{fill:var(--c)}
.fig .ref{stroke:var(--muted); stroke-width:1.5; stroke-dasharray:5 5; opacity:.55}
.fig text{font-family:var(--font); fill:var(--muted); font-size:13px}
.fig .axis{font-size:12px}
.fig .key{fill:var(--fg); font-size:13px; font-weight:600}
.fig .val{fill:var(--fg); font-size:15px; font-weight:700; font-variant-numeric:tabular-nums}
.dark .fig .dot, .binds .fig .dot{stroke:var(--ink)}
@media (prefers-color-scheme:dark){
  .fig .s2{--c:#C87A0A}
}
/* The viewBox scales with the column, so the in-viewBox type is stepped up on narrow screens to
   land near 13px on the actual device instead of shrinking to 8. */
@media (max-width:760px){
  .fig text{font-size:22px}
  .fig .axis{font-size:20px}
  .fig .key{font-size:22px}
  .fig .val{font-size:25px}
  .fig .dot, .fig .swatch{r:7}
  .fig .mark{stroke-width:3}
}

/* the face above the fold: the proposition is "one specialist, this one", and he was three
   clicks away. Small, square, hairline — not a floating avatar. */
.me{display:flex; align-items:center; gap:14px; margin:4px 0 0}
.me img{
  display:block; width:56px; height:56px; border-radius:3px; flex:0 0 auto;
  border:1px solid var(--dark-line);
}
.me p{margin:0; font-size:14px; line-height:1.45; color:var(--grey); max-width:30ch}
.me strong{color:var(--white); font-weight:600}

/* the one outcome under the counters: the buyer asked whether the number moves */
.outcome{
  margin:22px 0 0; padding-top:18px; border-top:1px solid var(--dark-line);
  font-size:14.5px; line-height:1.55; color:var(--grey); max-width:64ch;
}
.outcome b{color:var(--white); font-weight:600; font-variant-numeric:tabular-nums}
.outcome a{color:var(--blue)}

/* the portrait on /about */
.portrait{margin:34px 0 0; max-width:360px}
.portrait img{display:block; width:100%; height:auto; border-radius:14px}
@media (min-width:900px){ .portrait{float:right; margin:0 0 28px 48px; max-width:320px} }