@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-ext-italic.woff2) format('woff2');
  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: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-italic.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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin.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;
}
@font-face {
  font-family: 'Overused Grotesk';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/overused-grotesk.woff2) format('woff2');
}

/* =================================================================
   Almondo
   Green is an accent. It is never body text.
   Two families only: JetBrains Mono for structure, Overused Grotesk
   for reading. No third-party requests.
   ================================================================= */

:root{
  --bg:        #0A0D0B;
  --bg-2:      #0F1512;
  --bg-3:      #131A16;
  --fg:        #D3DCD2;
  --fg-strong: #EDF3EB;
  --fg-dim:    #8A968B;
  --green:     #6FE39B;
  --green-mid: #58B57C;
  --green-dim: #3E7A57;
  --rule:      #1E2A22;
  --rule-2:    #2A3B31;
  --amber:     #D9A94A;

  --sans: 'Overused Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --rail: 13.5rem;
  --measure: 36rem;
  --max: 76rem;
}

*,*::before,*::after{ box-sizing:border-box; }
/* .form sets display:grid, which would otherwise beat the UA rule for the
   hidden attribute and leave hidden forms on screen. */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--green); color:var(--bg); }
a{ color:inherit; }
img{ max-width:100%; height:auto; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:1px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
p{ margin:0 0 1.1em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--green); color:var(--bg); padding:.7rem 1.1rem;
  font-family:var(--mono); font-size:.8rem; text-decoration:none;
}
.skip:focus{ left:0; }

/* --- micro-typography -------------------------------------------- */
.label{
  font-family:var(--mono); font-size:.78rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim);
}
h1,h2,h3,h4{ font-family:var(--mono); font-weight:500; margin:0; color:var(--fg-strong); }

.sechead{ display:flex; align-items:center; gap:.9rem; padding-bottom:1.9rem; }
.sechead .n{ font-family:var(--mono); font-size:.84rem; color:var(--green); letter-spacing:.1em; }
.sechead .t{
  font-family:var(--mono); font-size:.84rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-dim); white-space:nowrap;
}
.sechead .line{ flex:1; height:1px; background:var(--rule-2); }

/* --- header ------------------------------------------------------ */
.site-header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
@supports not (backdrop-filter:blur(1px)){ .site-header{ background:var(--bg); } }
.bar{ display:flex; align-items:center; gap:1.75rem; padding-block:.85rem; }
.mark{
  font-family:var(--mono); font-size:1.05rem; font-weight:600;
  letter-spacing:-.02em; color:var(--fg-strong);
  text-decoration:none; margin-right:auto; white-space:nowrap;
}
.mark .dot{ color:var(--green); }
.site-nav{ display:flex; gap:1.4rem; align-items:center; }
.site-nav a{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.04em;
  color:var(--fg-dim); text-decoration:none; white-space:nowrap;
}
.site-nav a:hover, .site-nav a[aria-current="page"]{ color:var(--fg-strong); }
/* The CTA sits outside .site-nav so it stays pinned next to the wordmark
   when the nav links become a scrollable row on small screens. */
.bar .cta{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.04em;
  text-decoration:none; white-space:nowrap;
  color:var(--green); border:1px solid var(--green-dim);
  padding:.45rem .8rem; border-radius:2px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.bar .cta:hover{ background:var(--green); color:var(--bg); border-color:var(--green); }

@media (max-width:760px){
  .bar{ flex-wrap:wrap; gap:.65rem 1rem; padding-block:.7rem .6rem; }
  .site-nav{
    order:3; width:100%; gap:1.1rem;
    overflow-x:auto; padding-bottom:.15rem;
    scrollbar-width:none;
  }
  .site-nav::-webkit-scrollbar{ display:none; }
  .bar .cta{ padding:.35rem .65rem; font-size:.76rem; }
}

/* --- sections ---------------------------------------------------- */
section{ border-bottom:1px solid var(--rule); }
/* anchor jumps must clear the sticky header */
section[id]{ scroll-margin-top:4.5rem; }
.pad{ padding-block:clamp(2.75rem,6vw,4.5rem); }
.grid{ display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:0 3rem; }
/* minmax(0,1fr), not 1fr: a bare 1fr lets the grid item size to its
   content and overflow the viewport. */
@media (max-width:880px){ .grid{ grid-template-columns:minmax(0,1fr); } }
.rail{
  font-family:var(--mono); font-size:.78rem; line-height:1.9;
  color:var(--fg-dim); letter-spacing:.04em;
}
/* items never break internally; the line only wraps at a separator */
.rail .i{ white-space:nowrap; }
.rail b{ display:block; color:var(--green); font-weight:500; margin-bottom:.15rem; }
@media (max-width:880px){ .rail{ display:none; } }

/* --- hero -------------------------------------------------------- */
.hero{ padding-block:clamp(3.25rem,8vw,6rem) clamp(2.75rem,6vw,4rem); }
.prompt{
  font-family:var(--mono); font-size:.86rem; color:var(--fg-dim);
  letter-spacing:.02em; margin-bottom:1.6rem;
}
.prompt .u{ color:var(--green); }
.caret{
  display:inline-block; width:.55em; height:1.05em; background:var(--green);
  vertical-align:-.18em; margin-left:.15em;
  animation:blink 1.15s steps(1,end) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .caret{ animation:none; } }
/* keep the prompt on one line on small phones */
@media (max-width:480px){ .prompt{ font-size:.78rem; } }

.hero h1{
  font-size:clamp(1.95rem,4.6vw,3.35rem);
  line-height:1.12; letter-spacing:-.035em;
  max-width:20ch; margin:0 0 1.5rem; text-wrap:balance;
}
.hero .lede{
  font-size:clamp(1.1rem,1.9vw,1.32rem); line-height:1.6;
  color:var(--fg); max-width:var(--measure);
}
.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem; margin-top:2.25rem; }
.btn{
  font-family:var(--mono); font-size:.84rem; font-weight:500;
  letter-spacing:.06em; text-decoration:none;
  background:var(--green); color:var(--bg);
  padding:.8rem 1.35rem; border-radius:2px; border:1px solid var(--green);
  transition:background .15s ease, border-color .15s ease;
}
.btn:hover{ background:var(--fg-strong); border-color:var(--fg-strong); }
.btn-ghost{
  font-family:var(--mono); font-size:.84rem; letter-spacing:.04em;
  color:var(--fg-dim); text-decoration:none;
  border:1px solid var(--rule-2); padding:.8rem 1.35rem; border-radius:2px;
  transition:color .15s ease, border-color .15s ease;
}
.btn-ghost:hover{ color:var(--fg-strong); border-color:var(--green-dim); }

.strip{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2.5rem; }
.strip span{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-dim); border:1px solid var(--rule-2); padding:.4rem .75rem; border-radius:2px;
}

/* --- stats ------------------------------------------------------- */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--rule-2); border-radius:3px; background:var(--bg-2);
  overflow:hidden;
}
@media (max-width:720px){ .stats{ grid-template-columns:1fr; } }
.stat{ padding:1.5rem 1.6rem; border-left:1px solid var(--rule-2); }
.stat:first-child{ border-left:0; }
@media (max-width:720px){
  .stat{ border-left:0; border-top:1px solid var(--rule-2); }
  .stat:first-child{ border-top:0; }
}
.stat .num{
  display:block; font-family:var(--mono); font-weight:500;
  font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.05;
  letter-spacing:-.04em; color:var(--green);
  font-variant-numeric:tabular-nums; margin-bottom:.55rem;
}
.stat .desc{ font-size:1.08rem; line-height:1.5; color:var(--fg); max-width:24ch; }
.stats-note{
  font-family:var(--mono); font-size:.82rem; line-height:1.75;
  color:var(--fg-dim); margin-top:1.2rem; max-width:56rem;
}
.stats-note a{ color:var(--green-mid); }

/* --- key line ---------------------------------------------------- */
.key{
  font-family:var(--mono); font-size:clamp(1.15rem,2.2vw,1.5rem);
  line-height:1.35; letter-spacing:-.02em; color:var(--fg-strong);
  max-width:26ch; margin:0 0 1.5rem;
}

.note{ font-size:.95rem; color:var(--fg-dim); margin-top:1.4rem; }

/* --- evidence ---------------------------------------------------- */
.evidence{ border-left:2px solid var(--green-dim); padding-left:1.5rem; }

/* --- form -------------------------------------------------------- */
.request{ background:var(--bg-2); border-bottom:0; }
.request h2{ font-size:clamp(1.4rem,2.8vw,1.9rem); line-height:1.25; letter-spacing:-.03em; margin-bottom:1rem; }
.form{ margin-top:2rem; max-width:38rem; display:grid; gap:1.35rem; }
.row{ display:grid; gap:1.35rem; grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .row{ grid-template-columns:1fr; } }
.field{ display:block; }
.field > span, .checkset legend > span{
  display:block; font-family:var(--mono); font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:.5rem;
}
.field input, .field textarea, .field select{
  width:100%; background:var(--bg); border:1px solid var(--rule-2); border-radius:2px;
  color:var(--fg-strong); font-family:var(--mono); font-size:.94rem;
  padding:.7rem .8rem;
}
.field textarea{ resize:vertical; min-height:5.5rem; line-height:1.6; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:0; border-color:var(--green-dim); box-shadow:0 0 0 1px var(--green-dim); }
.field input:user-invalid, .field textarea:user-invalid{ border-color:#B4553F; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.submit{
  justify-self:start; font-family:var(--mono); font-size:.84rem; font-weight:500;
  letter-spacing:.06em; background:var(--green); color:var(--bg);
  border:1px solid var(--green); padding:.85rem 1.4rem; border-radius:2px; cursor:pointer;
}
.submit:hover{ background:var(--fg-strong); border-color:var(--fg-strong); }
.submit[disabled]{ opacity:.55; cursor:progress; }
.fineprint{ font-family:var(--mono); font-size:.8rem; line-height:1.75; color:var(--fg-dim); max-width:34rem; }
.formstatus{
  font-family:var(--mono); font-size:.86rem; line-height:1.7;
  padding:.9rem 1.05rem; border-radius:2px; margin:0;
  border:1px solid var(--rule-2); background:var(--bg-3); max-width:38rem;
}
.formstatus:empty{ display:none; }
.formstatus.ok{ border-color:var(--green-dim); color:var(--fg-strong); }
.formstatus.err{ border-color:#7A3A2C; color:#E8A392; }

/* --- footer ------------------------------------------------------ */
.site-footer{ padding:2.25rem 0 3rem; }
.footrow{ display:flex; flex-wrap:wrap; gap:1.25rem 1.5rem; align-items:center; }
.footrow .label{ margin-right:auto; }
.footrow a{ font-family:var(--mono); font-size:.8rem; color:var(--fg-dim); text-decoration:none; }
.footrow a:hover{ color:var(--green); }

/* =================================================================
   Writing index + article
   ================================================================= */

.page-head{ padding-block:clamp(3rem,7vw,5rem) clamp(1.75rem,4vw,2.5rem); }
.page-head h1{
  font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.15;
  letter-spacing:-.035em; margin:.9rem 0 1rem; max-width:24ch; text-wrap:balance;
}
.page-head p{ color:var(--fg-dim); max-width:var(--measure); }

.postlist{ list-style:none; margin:0; padding:0; }
.postlist li{ border-top:1px solid var(--rule); }
.postlist li:last-child{ border-bottom:1px solid var(--rule); }
.postlist a{ display:block; text-decoration:none; padding:1.7rem 0; }
.postlist .meta{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-mid); display:block; margin-bottom:.6rem;
}
.postlist h2{ font-size:clamp(1.15rem,2.4vw,1.45rem); line-height:1.3; letter-spacing:-.025em; margin-bottom:.55rem; max-width:34ch; text-wrap:balance; }
.postlist a:hover h2{ color:var(--green); }
.postlist p{ color:var(--fg-dim); font-size:1rem; margin:0; }

/* --- article ----------------------------------------------------- */
.article-wrap{
  display:grid; grid-template-columns:minmax(0,1fr) 15rem; gap:0 4rem;
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter); align-items:start;
}
@media (max-width:1000px){ .article-wrap{ grid-template-columns:1fr; gap:0; } }

.article-head{ padding:clamp(2.75rem,7vw,4.5rem) 0 2rem; border-bottom:1px solid var(--rule); }
.article-head .kicker{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-mid);
}
.article-head h1{
  font-size:clamp(1.65rem,3.7vw,2.6rem); line-height:1.14;
  letter-spacing:-.038em; margin:1rem 0 1.2rem; max-width:24ch; text-wrap:balance;
}
.article-head .standfirst{
  font-size:clamp(1.05rem,1.8vw,1.2rem); line-height:1.6;
  color:var(--fg-dim); max-width:38rem;
}
.article-head .byline{
  font-family:var(--mono); font-size:.82rem; color:var(--fg-dim);
  margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.5rem 1.2rem;
}

.prose{ padding:2.75rem 0 3.5rem; font-size:1.06rem; line-height:1.8; max-width:38rem; }
.prose > *{ max-width:38rem; }
.prose p{ margin:0 0 1.4em; }
.prose h2{
  font-size:1.3rem; line-height:1.3; letter-spacing:-.025em;
  margin:3rem 0 1.1rem; scroll-margin-top:6rem;
}
.prose h2::before{ content:'## '; color:var(--green-dim); }
.prose h3{ font-size:1.06rem; margin:2.1rem 0 .8rem; letter-spacing:-.02em; scroll-margin-top:6rem; }
.prose h3::before{ content:'### '; color:var(--green-dim); }
.prose a{
  color:var(--green); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:var(--green-dim);
}
.prose a:hover{ text-decoration-color:var(--green); }
.prose strong{ color:var(--fg-strong); font-weight:600; }
.prose em{ color:var(--fg); }
.prose ol{ margin:0 0 1.4em; padding-left:1.4rem; }
.prose li{ margin-bottom:.7em; }
.prose ul{ list-style:none; padding-left:0; margin:0 0 1.4em; }
.prose ul > li{ position:relative; padding-left:1.5rem; }
.prose ul > li::before{
  content:'-'; position:absolute; left:.2rem; color:var(--green); font-family:var(--mono);
}
.prose ul ul{ margin:.7em 0 0; }
.prose blockquote{
  margin:1.8em 0; padding:.2rem 0 .2rem 1.4rem;
  border-left:2px solid var(--green-dim); color:var(--fg-dim);
}
.prose code{
  font-family:var(--mono); font-size:.88em;
  background:var(--bg-2); border:1px solid var(--rule-2);
  padding:.1rem .35rem; border-radius:2px; color:var(--fg-strong);
}
.prose hr{ border:0; border-top:1px solid var(--rule); margin:2.75rem 0; }
.prose .callout{
  border:1px solid var(--rule-2); background:var(--bg-2);
  border-radius:3px; padding:1.1rem 1.3rem; margin:1.8em 0;
  font-size:.98rem; color:var(--fg-dim);
}
.prose .callout p:last-child{ margin-bottom:0; }

.toc{ position:sticky; top:6rem; padding:2.75rem 0 0; }
.toc .label{ display:block; margin-bottom:.9rem; }
.toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--rule); }
.toc a{
  display:block; text-decoration:none; color:var(--fg-dim);
  font-size:.88rem; line-height:1.45; padding:.48rem 0 .48rem 1rem;
  border-left:1px solid transparent; margin-left:-1px;
}
.toc a:hover{ color:var(--fg-strong); border-left-color:var(--green-dim); }
@media (max-width:1000px){ .toc{ display:none; } }

.toc-mobile{ margin:2rem 0 0; border:1px solid var(--rule-2); border-radius:3px; background:var(--bg-2); }
.toc-mobile summary{
  cursor:pointer; padding:.85rem 1.1rem; font-family:var(--mono);
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim);
}
.toc-mobile summary::marker{ color:var(--green); }
.toc-mobile ol{ list-style:none; margin:0; padding:0 1.1rem 1rem; }
.toc-mobile a{ display:block; padding:.4rem 0; font-size:.92rem; color:var(--fg); text-decoration:none; }
@media (min-width:1001px){ .toc-mobile{ display:none; } }

.article-foot{ border-top:1px solid var(--rule); padding:2.25rem 0 0; margin-top:1rem; max-width:38rem; }
.article-foot .label{ display:block; margin-bottom:.9rem; }
.article-foot p{ color:var(--fg-dim); font-size:1rem; }

/* --- centered utility page ---------------------------------------- */
.center-page{
  min-height:68vh; display:flex; flex-direction:column;
  justify-content:center; padding-block:4rem;
}
.center-page h1{
  font-size:clamp(1.5rem,3.2vw,2.2rem); letter-spacing:-.035em;
  line-height:1.2; margin:1rem 0 1.2rem; max-width:22ch;
}

/* --- small utilities (kept so no inline style attribute is needed,
       which lets the Content-Security-Policy stay strict) ------------ */
.pb-page{ padding-bottom:4rem; }
.mt-md{ margin-top:1.2rem; }
.mt-lg{ margin-top:2rem; }
.inline-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* =================================================================
   Form: checkbox group
   ================================================================= */
fieldset.checkset{ border:0; margin:0; padding:0; min-inline-size:0; }
fieldset.checkset legend{ padding:0; }
.checkgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem 1rem; }
@media (max-width:520px){ .checkgrid{ grid-template-columns:1fr; } }
.checkgrid label{
  display:flex; align-items:center; gap:.6rem; cursor:pointer;
  font-family:var(--mono); font-size:.9rem; color:var(--fg);
  border:1px solid var(--rule-2); border-radius:2px; padding:.6rem .75rem;
  transition:border-color .15s ease;
}
.checkgrid label:hover{ border-color:var(--green-dim); }
.checkgrid input{
  appearance:none; width:.95rem; height:.95rem; flex:none;
  border:1px solid var(--rule-2); border-radius:2px; background:var(--bg);
  display:grid; place-content:center; cursor:pointer;
}
.checkgrid input::before{
  content:''; width:.5rem; height:.5rem; transform:scale(0);
  background:var(--green); border-radius:1px; transition:transform .1s ease;
}
.checkgrid input:checked{ border-color:var(--green-dim); }
.checkgrid input:checked::before{ transform:scale(1); }
.checkgrid label:has(input:checked){ border-color:var(--green-dim); }
.form.followup{ margin-top:1.5rem; }

/* =================================================================
   Article figures
   Categorical hues validated for dark mode (OKLCH L in band, chroma
   floor, CVD separation deutan 15.7 / tritan 12.4, contrast >= 3:1).
   Both segments are direct-labeled, so identity is never color alone.
   ================================================================= */
.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.fig{
  margin:2.4em 0; padding:1.4rem 1.5rem 1.3rem;
  border:1px solid var(--rule-2); border-radius:3px; background:var(--bg-2);
  max-width:38rem;
}
.fig-head{
  font-family:var(--mono); font-size:.82rem; line-height:1.6;
  color:var(--fg-dim); margin-bottom:1.2rem;
}
.fig-n{ color:var(--green); margin-right:.5rem; }
/* .prose p outspecifies a bare .fig-foot, so scope it to the figure. */
.fig .fig-foot{
  font-family:var(--mono); font-size:.8rem; line-height:1.6;
  color:var(--fg-dim); margin:1.5rem 0 0; max-width:none;
}

.fig-legend{ display:flex; flex-wrap:wrap; gap:1.1rem; margin-bottom:1rem; }
.legend-key{
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.78rem; color:var(--fg-dim);
}
.legend-key::before{ content:''; width:.7rem; height:.7rem; border-radius:2px; }
.k-valid::before{ background:#3CA76B; }
.k-fp::before{ background:#9B7FD4; }

.bars{ display:grid; gap:1.05rem; }
.bar-row{ display:grid; gap:.4rem; }
.bar-label{ font-family:var(--mono); font-size:.86rem; color:var(--fg-strong); }
.bar-track{
  display:flex; gap:2px; height:1.5rem; width:100%;
  background:var(--bg-3); border-radius:2px; overflow:hidden;
}
.seg{ display:block; height:100%; min-width:4px; }
.seg-valid{ background:#3CA76B; }
.seg-fp{ background:#9B7FD4; }
.seg-a-valid{ width:0.6%; }
.seg-a-fp{ width:99.4%; }
.seg-b-valid{ width:100%; }
.bar-note{ font-family:var(--mono); font-size:.8rem; color:var(--fg-dim); }

.fig-scroll{ overflow-x:auto; }
table.matrix{ border-collapse:collapse; width:100%; font-size:.9rem; }
table.matrix th, table.matrix td{
  text-align:left; vertical-align:top; padding:.6rem .8rem .6rem 0;
  border-top:1px solid var(--rule);
}
table.matrix thead th{
  border-top:0; font-family:var(--mono); font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--green-mid);
  padding-bottom:.7rem;
}
table.matrix tbody th{
  font-family:var(--sans); font-weight:400; color:var(--fg);
  padding-right:1.2rem; min-width:11rem;
}
table.matrix td{ font-family:var(--mono); font-size:.85rem; color:var(--fg-dim); }
table.matrix td.no{ color:#C9A0F0; }
table.matrix td.na{ color:var(--rule-2); }

.pullquote{
  margin:2.4em 0; padding:0 0 0 1.4rem;
  border-left:2px solid var(--green-dim);
  max-width:38rem;
}
.pullquote p{
  font-family:var(--mono); font-size:1.05rem; line-height:1.5;
  letter-spacing:-.02em; color:var(--fg-strong); margin:0;
}

/* =================================================================
   Section surfaces
   The hero, the stats band and the form read well because they sit
   on a surface. These give the middle of the page the same footing
   instead of leaving it as loose text on the page background.
   ================================================================= */

/* 01 - the deliverable, as one object with divided rows */
ul.panel-list{
  list-style:none; margin:2rem 0 0; padding:0;
  border:1px solid var(--rule-2); border-radius:3px; background:var(--bg-2);
  max-width:var(--measure);
}
ul.panel-list li{ padding:1.25rem 1.4rem; border-top:1px solid var(--rule-2); }
ul.panel-list li:first-child{ border-top:0; }
ul.panel-list b{
  display:flex; align-items:baseline; gap:.6rem;
  font-family:var(--mono); font-weight:500; font-size:1.06rem;
  color:var(--fg-strong); margin-bottom:.35rem;
}
ul.panel-list b::before{
  content:''; width:.42rem; height:.42rem; flex:none;
  background:var(--green); border-radius:1px;
}
ul.panel-list p{ margin:0; font-size:1.02rem; color:var(--fg-dim); max-width:none; }

/* 02 - the process, as a pipeline rather than a list */
ol.pipeline{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 2.6rem;
}
ol.pipeline li{
  position:relative;
  border:1px solid var(--rule-2); border-radius:3px; background:var(--bg-2);
  padding:1.25rem 1.3rem 1.35rem;
}
ol.pipeline li::after{
  content:'->'; position:absolute; right:-1.85rem; top:50%;
  transform:translateY(-50%);
  font-family:var(--mono); font-size:.8rem; color:var(--green-dim);
}
ol.pipeline li:last-child::after{ content:none; }
ol.pipeline .n{
  display:block; font-family:var(--mono); font-size:.8rem;
  letter-spacing:.16em; color:var(--green); margin-bottom:.75rem;
}
ol.pipeline b{
  display:block; font-family:var(--mono); font-weight:500; font-size:1.06rem;
  color:var(--fg-strong); margin-bottom:.35rem;
}
ol.pipeline p{ margin:0; font-size:1.02rem; line-height:1.6; color:var(--fg-dim); max-width:none; }
@media (max-width:880px){
  ol.pipeline{ grid-template-columns:1fr; gap:1rem; }
  ol.pipeline li::after{ content:none; }
}

/* 03 - coverage, as tiles that echo the hero chips */
.chaingrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.75rem; margin:0; max-width:48rem; }
.chaingrid > div{
  border:1px solid var(--rule-2); border-radius:3px; background:var(--bg-2);
  padding:1.05rem 1.1rem;
}
.chaingrid dt{
  font-family:var(--mono); font-weight:500; font-size:1.15rem;
  color:var(--green); letter-spacing:-.01em; margin-bottom:.35rem;
}
.chaingrid dd{ margin:0; font-family:var(--mono); font-size:.86rem; line-height:1.55; color:var(--fg-dim); }

/* 04 - the benchmark criteria, scannable */
ul.criteria{
  list-style:none; margin:1.25rem 0 1.35rem; padding:0; max-width:var(--measure);
  border-left:1px solid var(--rule-2);
}
ul.criteria li{
  position:relative; padding:.45rem 0 .45rem 1.5rem;
  font-size:1.04rem; color:var(--fg);
}
ul.criteria li::before{
  content:''; position:absolute; left:-1px; top:1.05rem;
  width:.75rem; height:1px; background:var(--green-dim);
}

/* 05 - bio lead */
.bio-lead{ font-size:1.18rem; line-height:1.55; color:var(--fg); margin-bottom:1.4rem; }
.bio-lead .brand{
  font-family:var(--mono); font-weight:500;
  font-size:1.5em; letter-spacing:-.03em; color:var(--fg-strong);
}
.bio-lead strong{ color:var(--fg-strong); font-weight:700; }

/* LinkedIn button, using the real mark rather than a text link */
.btn-linkedin{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.84rem; letter-spacing:.04em;
  color:var(--fg); text-decoration:none;
  border:1px solid var(--rule-2); border-radius:2px;
  padding:.65rem 1.1rem .65rem .85rem;
  transition:border-color .15s ease, color .15s ease;
}
.btn-linkedin svg{ flex:none; border-radius:3px; }
.btn-linkedin:hover{ color:var(--fg-strong); border-color:#0A66C2; }