*,*::before,*::after{box-sizing:border-box}
/* The Crawl Price Index — shared theme (v2).
   Loaded after each page's own <style>, so it overrides at equal specificity.
   Restyles only: no markup moves, so no page script is affected. */

:root{
  --ink:#FBFAF8;        /* page background */
  --panel:#FFFFFF;      /* cards lift OFF the page, not into it */
  --line:#D8D2C8;
  --dim:#5F5B54;        /* darker than before: secondary text must be readable */
  --fg:#14181D;
  --bright:#14181D;
  --signal:#1C5D4A;     /* ledger green — primary actions, positive states */
  --amber:#8A6A1F;      /* brass — anything carrying a caveat */
  --red:#A33A2A;
  --blue:#1D4E6F;
  --sand:#F1EDE5;       /* recessed surfaces: code, wells, table stripes */
  --serif:"Newsreader",Georgia,serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --lift:0 1px 2px rgba(20,24,29,.05), 0 4px 14px rgba(20,24,29,.05);
}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--fg);
  font-family:var(--sans);font-size:16.5px;line-height:1.65;
  font-variant-numeric:tabular-nums;
  overflow-wrap:break-word;
}
/* 1240 to match the Terminal: the marketing site was 1140 and the dashboard
   1240, so moving between them visibly changed the page width. */
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
/* reading pages: one column measure, LEFT-ALIGNED with the masthead.
   4 Sep 2026 (L-062): the 860px cap on direct children of .wrap applied only
   to the four generated pages whose content sits outside .panels (/anatomy,
   /status, /changelog, /issues), so they rendered narrower than every other
   page. One measure everywhere now: the wrap. Long-form text on those pages
   keeps its own measure via .prose-measure below, which the builders may use. */
body.prose .wrap > *{max-width:none}
.prose-measure{max-width:74ch}
body.prose .masthead .wrap > *{max-width:none}
body.prose .wrap > .panels,body.prose .wrap > .panels > *{max-width:none}
body.prose footer .wrap > *{max-width:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* ---- masthead (matches the homepage on every page) ------------------------ */
.masthead{border-bottom:1px solid var(--line);background:var(--ink)}
.masthead .wrap{display:flex;align-items:center;gap:20px;min-height:70px;flex-wrap:wrap;
  padding-top:0;padding-bottom:0}
.masthead .mark{font-family:var(--serif);font-size:21px;letter-spacing:-.01em;
  text-decoration:none;color:var(--fg);white-space:nowrap}
.masthead .mark b{color:var(--signal);font-weight:400}
.masthead nav{margin-left:auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.masthead nav a.lnk{font-size:14px;color:var(--dim);text-decoration:none}
.masthead nav a.lnk:hover{color:var(--fg)}
.masthead nav a.lnk.signin{color:var(--signal);font-weight:700}
.masthead nav a.lnk.signin:hover{color:var(--signal);text-decoration:underline;text-underline-offset:3px}
.masthead nav a.lnk[aria-current]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--signal)}


/* ---- type ----------------------------------------------------------------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;color:var(--fg)}
h1{font-weight:400;font-size:clamp(34px,5.4vw,56px);line-height:1.06;margin:.3em 0 .3em;
  letter-spacing:-.015em;text-wrap:balance;max-width:none}
h1 em,h1 i{font-style:italic;color:var(--signal);font-weight:400}
/* a section heading now carries a short accent rule, so hierarchy is visible
   before a word is read */
h2{font-size:clamp(23px,2.7vw,31px);line-height:1.22;margin:52px 0 14px;padding-top:18px;
  border-top:2px solid var(--signal);display:inline-block}
h3{font-size:19px;margin:26px 0 8px}
p{margin:0 0 16px}
.lede{font-size:clamp(17px,2vw,20px);color:var(--dim);max-width:none}
.mono{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:0}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--sand);border:1px solid var(--line);color:var(--fg)}
code{padding:2px 6px;word-break:break-word}
pre{padding:16px;overflow-x:auto;line-height:1.55;white-space:pre;max-width:100%}
.eyebrow,.k{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--signal);font-weight:600}
.note,.meta{font-family:var(--sans);font-size:13.5px;color:var(--dim);margin-top:14px}

/* ---- header / footer ------------------------------------------------------ */
header{background:var(--ink)}
header .wrap{padding-top:34px;padding-bottom:30px}
footer{border-top:1px solid var(--line);color:var(--dim);font-size:13.5px;
  padding:40px 0 56px;background:var(--ink);margin-top:56px}
footer a{color:var(--dim)}
a{color:var(--fg)}
a:hover{color:var(--signal)}
.crumb,.back{font-size:13.5px;color:var(--dim)}
.crumb a,.back{text-decoration:none;color:var(--dim)}
.crumb a:hover,.back:hover{color:var(--signal)}

/* ---- buttons -------------------------------------------------------------- */
.btn,.go,button.go{
  font-family:var(--sans);font-size:14.5px;font-weight:600;line-height:1.4;
  padding:11px 20px;border:1px solid var(--signal);background:var(--signal);
  color:#ffffff;text-decoration:none;display:inline-block;cursor:pointer;border-radius:2px;
}
.btn:hover,.go:hover,button.go:hover{background:#14483A;border-color:#14483A;color:#fff}
.ghost,.btn.ghost,button.ghost,.btn-ghost,a.btn-ghost{
  font-family:var(--sans);font-size:14.5px;font-weight:500;padding:11px 20px;
  background:#fff;color:var(--fg);border:1px solid var(--line);cursor:pointer;border-radius:2px;
}
.ghost:hover,button.ghost:hover,.btn-ghost:hover{border-color:var(--fg);background:#fff;color:var(--fg)}

/* ---- inputs --------------------------------------------------------------- */
input[type=text],input[type=email],input[type=search],select,textarea{
  font-family:var(--sans);font-size:16px;padding:12px 14px;
  background:#ffffff;color:var(--fg);border:1px solid var(--line);border-radius:2px;
  max-width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--signal);outline:none;
  box-shadow:0 0 0 3px rgba(28,93,74,.12)}

/* ---- surfaces: the main hierarchy fix ------------------------------------- */
/* cards are white and lifted; the page is tinted. Previously both were the
   same colour, so nothing read as a distinct object. */
.card,.box,.art{
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
  box-shadow:var(--lift);padding:26px;margin:22px 0;
}
.band{background:var(--sand);border:1px solid var(--line);border-radius:3px}
/* 3 Sep 2026: /status's four stat tiles rendered as a stack inside one box */
/* D33 (spec 3.2, public site): the /status stat tiles were glued edge to edge
   with a 1px divider and no gutter, and the ITEM/VALUE table was glued to the
   bottom of the band. A 12px gutter makes them read as four tiles rather than
   one striped bar; the border moves onto each tile because a divider between
   spaced tiles has nothing to divide. */
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;padding:0;background:none;border:0;overflow:visible}
.band .cell{padding:16px 18px;background:var(--sand);border:1px solid var(--line);border-radius:3px}
.band+table,.band+h2,.band+p{margin-top:20px}
table.statitems{margin-top:20px}
.band .n{font-family:var(--serif);font-size:30px;line-height:1.05;font-variant-numeric:tabular-nums}
.band .n.g{color:var(--signal)}
.band .k{font-size:12px;color:var(--dim);margin-top:4px;line-height:1.35}
.card > .k:first-child,.box > .k:first-child,.art .k{
  display:block;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line);
}
/* a card holding a warning reads as one at a glance */
.card.warn,.box.warn,.truth{border-left:3px solid var(--amber)}

/* ---- figures -------------------------------------------------------------- */
.cell .n,.stat .n,.n{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;color:var(--fg)}
.cell .n.g,.stat .n.g,.n.g{color:var(--signal)}
.cell .k,.stat .l,.l{font-family:var(--sans);font-size:12.5px;color:var(--dim);
  letter-spacing:0;text-transform:none;font-weight:400}

/* ---- tables --------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-weight:600;
  padding:0 14px 12px 0;border-bottom:2px solid var(--fg)}
td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:baseline}

/* ---- states --------------------------------------------------------------- */
.ok{color:var(--signal);font-weight:600}
.v-blocked{color:var(--signal);font-weight:600}
.v-allowed{color:var(--amber);font-weight:600}
.v-partial{color:var(--blue);font-weight:600}
.v-unlisted{color:var(--dim)}

/* ---- autocomplete --------------------------------------------------------- */
.ac-wrap{position:relative}
.ac{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);
  background:#fff;border:1px solid var(--line);border-radius:3px;box-shadow:var(--lift);
  max-height:280px;overflow-y:auto;display:none}
.ac.open{display:block}
.ac button{display:block;width:100%;text-align:left;background:none;border:0;
  padding:11px 14px;font-family:var(--sans);font-size:15px;cursor:pointer;color:var(--fg);
  border-bottom:1px solid var(--line)}
.ac button:last-child{border-bottom:0}
.ac button:hover,.ac button.sel{background:var(--sand)}
.ac .rk{color:var(--dim);font-size:12.5px;float:right}

/* ---- misc ---------------------------------------------------------------- */
ul,ol{padding-left:22px}
li{margin:7px 0}
.msg{font-size:13.5px;color:var(--dim)}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.crumb,.back{display:none}
img,svg{max-width:100%;height:auto}

/* ---- mobile: the "split lines" fix ---------------------------------------- */
@media (max-width:820px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  h1{font-size:clamp(26px,7.4vw,34px);line-height:1.15}
  h2{font-size:21px;margin-top:38px}
  .lede{font-size:16.5px}
  .card,.box,.art{padding:18px;margin:16px 0}
  header .wrap{padding-top:22px;padding-bottom:20px}
  .masthead nav{gap:14px}
  .masthead nav a.lnk{font-size:13px}
  pre{font-size:11.5px;padding:12px}
  /* Swiping a DATA table sideways is fine; doing it to prose is not. This rule
     applied to every table, so the corrections table on /status rendered as a
     single 4,341px line and the mover list on /issues truncated mid-sentence.
     Tables carrying sentences opt out with class="wraps". */
  table:not(.wraps){font-size:13.5px;display:block;overflow-x:auto;white-space:nowrap}
  table.wraps{display:table;width:100%;white-space:normal;font-size:13.5px;table-layout:fixed}
  table.wraps td,table.wraps th{white-space:normal;word-break:break-word}
  .btn,.go,.ghost,button.go,button.ghost{display:block;width:100%;text-align:center;margin:6px 0}
  .row{display:block}
  input[type=text],input[type=email],select{width:100%}
}
@media (max-width:420px){
  /* keep nav links visible and wrapping, never hidden — phone users must navigate */
  h1{font-size:25px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==========================================================================
   HOMEPAGE COMPONENTS — kept here so there is ONE design language, not two.
   ========================================================================== */

/* the observed-quote card: the signature object, so it gets the strongest frame */
.obs{background:var(--panel);border:1px solid var(--fg);border-radius:3px;
  box-shadow:var(--lift);padding:26px;margin:0}
.obs-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.obs-domain{font-family:var(--serif);font-size:20px}
.obs-body{display:flex;align-items:baseline;gap:14px;padding:22px 0 6px}
.obs-price{font-family:var(--serif);font-size:clamp(48px,6vw,74px);line-height:.9;
  letter-spacing:-.03em;color:var(--signal)}
.obs-unit{font-size:14px;color:var(--dim);line-height:1.35}
.obs-meta{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;
  display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;font-size:12.5px;color:var(--dim)}
.obs-meta b{display:block;color:var(--fg);font-weight:600;font-size:13px}

/* figure strip: white tiles on the tinted page, not invisible panels */
.fig-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;box-shadow:var(--lift)}
.fig{background:var(--panel);padding:24px 20px}
.fig .n{font-family:var(--serif);font-size:clamp(26px,3.2vw,40px);line-height:1;
  letter-spacing:-.02em;display:block;color:var(--fg)}
.fig .l{font-size:12.5px;color:var(--dim);margin-top:9px;display:block;line-height:1.45}

/* coverage bar */
.bar{display:flex;height:60px;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.s-none{background:var(--sand)}
.s-open{background:#C7C0B2}
.s-block{background:var(--signal)}
.key{margin-top:22px;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;box-shadow:var(--lift)}
.key-row{background:var(--panel);display:grid;grid-template-columns:14px 1fr auto auto;
  gap:14px;align-items:center;padding:12px 14px;font-size:14px}
.sw{width:12px;height:12px;border:1px solid rgba(0,0,0,.18)}
.key-n{font-weight:600}
.key-p{color:var(--dim);font-size:13px;min-width:52px;text-align:right}
.caveat{border-left:3px solid var(--amber);background:var(--sand);
  padding:14px 18px;margin-top:26px;font-size:14.5px;color:var(--dim);
  max-width:56ch;border-radius:0 3px 3px 0}
.caveat b{color:var(--fg);font-weight:600}

/* block-rate chart */
.rates{display:grid;gap:12px}
.rate-row{display:grid;grid-template-columns:150px 1fr 52px;gap:14px;align-items:center;font-size:14px}
.rate-track{height:12px;background:var(--sand);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.rate-fill{height:100%;background:var(--signal)}
.rate-val{text-align:right;color:var(--dim);font-size:13px}

/* signals board */
.board{width:100%;border-collapse:collapse;margin-top:30px;font-size:14.5px}
.board td.dom{font-family:var(--serif);font-size:17px}
.tag{display:inline-block;font-size:11px;letter-spacing:.1em;font-weight:600;
  padding:4px 9px;border:1px solid var(--line);border-radius:2px;white-space:nowrap}
.tag-PRICED{color:#fff;background:var(--signal);border-color:var(--signal)}
.tag-GATED{color:var(--amber);border-color:var(--amber);background:#FBF6EA}
.tag-LICENSING{color:var(--dim)}
.tag-FREE{color:var(--dim)}

/* the four claim cards — these were invisible; now white and lifted */
.claims{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;margin-top:34px;overflow:hidden;box-shadow:var(--lift)}
.claim{background:var(--panel);padding:26px 24px}
.claim h3{font-family:var(--serif);font-weight:400;font-size:19px;margin:12px 0 8px}
.claim p{margin:0;font-size:14.5px;color:var(--dim)}
.claim-obs .eyebrow{color:var(--signal)}
.claim-disc .eyebrow{color:var(--amber)}

/* pricing tiers — the middle one is now clearly the recommended one */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:3px;
  box-shadow:var(--lift);padding:30px 26px;display:flex;flex-direction:column}
.tier.featured{border:2px solid var(--signal);box-shadow:0 2px 6px rgba(28,93,74,.10),0 10px 30px rgba(28,93,74,.10)}
.tier .price{font-family:var(--serif);font-size:38px;letter-spacing:-.02em;margin:14px 0 4px}
.tier .per{font-size:13px;color:var(--dim)}
.tier ul{list-style:none;padding:0;margin:20px 0 26px;font-size:14.5px;color:var(--dim)}
.tier li{padding:9px 0;border-bottom:1px solid var(--line);margin:0}
.tier li:last-child{border-bottom:0}
.tier a{margin-top:auto;text-align:center}

/* hero */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start}
.hero h1{font-weight:300}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:60px;align-items:start}
.section{padding:64px 0;border-bottom:1px solid var(--line)}
.figures{border-bottom:1px solid var(--line);padding:44px 0}
.hero{padding:64px 0 54px;border-bottom:1px solid var(--line)}

/* footer grid */
.foot{padding:52px 0 64px;font-size:13.5px;color:var(--dim);border-top:1px solid var(--line);margin-top:0}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);
  margin:0 0 14px;font-weight:600}
.foot a{display:block;text-decoration:none;padding:4px 0;color:var(--dim)}
.foot a:hover{color:var(--signal)}
.colophon{max-width:38ch}
.foot-base{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px}

@media (max-width:900px){
  .hero-grid,.split{grid-template-columns:1fr;gap:38px}
  .fig-grid{grid-template-columns:repeat(2,1fr)}
  .claims,.tiers{grid-template-columns:1fr}
  .tiers{gap:14px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .hero{padding:40px 0 34px}
  .section{padding:44px 0}
  .obs-meta{grid-template-columns:1fr}
  .board{display:block;overflow-x:auto}
}

/* ============================================================================
   CONTENT LAYOUT SYSTEM v1 — the shared component vocabulary.
   Every page assembles from these. No page carries its own <style> block.
   See CONTENT-SYSTEM.md. Added 2026-08-18.
   ========================================================================== */

/* ---- the dateline rule: every page opens identically --------------------- */
.page-open{padding:48px 0 28px;border-bottom:1px solid var(--line);margin-bottom:0}
.page-open .eyebrow{margin-bottom:0}
.page-open h1{margin:.28em 0 .3em;font-size:clamp(30px,4.6vw,48px);line-height:1.07;max-width:none}
.page-open .lede{margin:0}

/* ---- section rhythm: identical spacing between blocks -------------------- */
.section{padding:42px 0;border-bottom:1px solid var(--line)}
.section:last-of-type{border-bottom:0}
.section > h2:first-child,.section > .lead-in:first-child{margin-top:0}
.section h2{margin:0 0 16px;font-size:clamp(23px,3vw,32px);line-height:1.15;max-width:none}
.section h3{font-size:19px;margin:22px 0 8px}
.section p{max-width:none}
.section p + p{margin-top:15px}

/* a small green label that opens a section (the section-level eyebrow) */
.lead-in{font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);font-weight:600;display:block;margin-bottom:13px}

/* ---- callout: bordered emphasis, green by default, amber for caveats ----- */
.callout{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--signal);
  border-radius:3px;box-shadow:var(--lift);padding:20px 24px;margin:22px 0;max-width:none}
.callout.warn{border-left-color:var(--amber)}
.callout > .lead-in{margin-bottom:8px}
.callout p{margin:0;max-width:none}

/* ---- q-list: question / answer rows -------------------------------------- */
.q-list{list-style:none;padding:0;margin:14px 0 0;border-top:1px solid var(--line)}
.q-list li{border-bottom:1px solid var(--line);padding:18px 0;display:block}
.q-list .q{font-family:var(--serif);font-size:19px;color:var(--fg);display:block;margin-bottom:5px}
.q-list .a{font-size:14.5px;color:var(--dim);max-width:none;display:block}
.q-list .a a{color:var(--signal)}

/* ---- entry: a dated record (changelog) ----------------------------------- */
.entry{padding:22px 0;border-bottom:1px solid var(--line)}
.entry:last-child{border-bottom:0}
.entry .d{font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--signal);font-weight:600;margin-bottom:6px}
.entry .t{font-family:var(--serif);font-size:22px;color:var(--fg);margin:0 0 10px;display:block}
.entry .body{margin:0;color:var(--dim);max-width:none}

/* ---- source: a muted citation / attribution line ------------------------- */
.source{font-size:13.5px;color:var(--dim);max-width:none}
.source a{color:var(--signal)}

/* ---- pull: a large serif statement, used sparingly ----------------------- */
.pull{font-family:var(--serif);font-weight:300;font-size:clamp(24px,3.4vw,38px);line-height:1.2;
  letter-spacing:-.01em;color:var(--fg);max-width:none;margin:0}
.pull em{font-style:italic;color:var(--signal)}

/* ---- cta-row: buttons in a row, wrapping on mobile ----------------------- */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;align-items:center}

@media (max-width:820px){
  .page-open{padding:34px 0 22px}
  .section{padding:32px 0}
  .callout{padding:16px 18px}
  .cta-row .btn,.cta-row .ghost{width:100%}
}


/* ============================================================================
   PANEL SECTION SYSTEM v2 — numbered, bordered, uniform-width blocks.
   Replaces bare .section on reading pages. Each major point is a discrete
   framed unit with a numeric index (the sequential thread) and a single
   internal measure (kills the heading-wider-than-body inconsistency).
   ========================================================================== */
.panels{counter-reset:panel;max-width:100%;margin:0;padding:34px 0 20px}
.panel{counter-increment:panel;position:relative;
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  box-shadow:var(--lift);padding:28px 30px;margin:20px 0}
/* the numbered index + eyebrow, always the same line, always present */
.panel > .ix{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:2px solid var(--signal)}
.panel > .ix::before{content:counter(panel,decimal-leading-zero);
  font-family:var(--serif);font-size:15px;color:var(--signal);font-weight:400;
  font-variant-numeric:tabular-nums;line-height:1}
.panel > .ix .lead-in{margin:0;font-size:11px;letter-spacing:.18em}
/* everything inside a panel shares ONE measure — no more halfway-then-wide */
.panel h2{border:0;padding:0;margin:0 0 14px;font-size:clamp(22px,2.6vw,29px);line-height:1.14;max-width:none}
.panel h2:only-child{margin-bottom:0}
.panel p{max-width:none;margin:0}
.panel p + p{margin-top:14px}
/* a panel whose lead statement IS the point (the old .pull, now framed) */
.panel .pull{max-width:none;font-size:clamp(23px,3vw,32px)}
.panel .pull + p{margin-top:20px}
/* q-list inside a panel sits flush, no double border at the top */
.panel .q-list{margin-top:16px;border-top:1px solid var(--line)}
.panel .source{margin-top:18px}
/* a closing panel that's just a call to action reads lighter */
.panel.close{background:var(--sand);border-style:solid;text-align:left}
.panel.close .pull{max-width:none}

@media (max-width:820px){
  .panel{padding:22px 20px;margin:14px 0}
  .panels{max-width:100%}
}


/* ============================================================================
   MOBILE — iPhone-first pass for the panel system (~390px).
   Appended last so it governs. Everything must read logically top to bottom.
   ========================================================================== */
@media (max-width:640px){
  /* tighter frame: reclaim horizontal space on a narrow screen */
  .wrap{padding:0 16px}

  /* masthead stacks: brand on top, nav wraps beneath, nothing hidden */
  .masthead .wrap{flex-wrap:wrap;gap:10px 16px;padding-top:14px;padding-bottom:14px;min-height:0}
  .masthead .mark{font-size:19px;width:100%}
  .masthead nav{margin-left:0;width:100%;gap:14px 16px;row-gap:10px}
  .masthead nav a.lnk{font-size:14px}
  .masthead nav a.ghost,.masthead nav a.btn{font-size:13.5px;padding:9px 14px}

  /* hero: smaller, no wasted vertical space, text fills width */
  .page-open{padding:26px 4px 20px}
  .page-open h1{font-size:clamp(26px,8vw,34px);line-height:1.12}
  .page-open .lede{font-size:16px;line-height:1.55}

  /* panels: near-flush to the screen edge, comfortable inner pad, clear gaps */
  .panels{padding:20px 0 8px}
  .panel{padding:22px 18px;margin:14px 0;border-radius:4px}
  .panel > .ix{margin-bottom:12px}
  .panel h2{font-size:22px;line-height:1.18;margin-bottom:12px}
  .panel p{font-size:16px;line-height:1.6}
  .panel .pull{font-size:23px;line-height:1.25}

  /* question list: question and answer stack with clear separation */
  .q-list li{padding:15px 0}
  .q-list .q{font-size:17px;line-height:1.3;margin-bottom:6px}
  .q-list .a{font-size:14.5px;line-height:1.5}

  /* closing CTA: buttons full-width, stacked, thumb-friendly */
  .panel.close{padding:22px 18px}
  .cta-row{flex-direction:column;align-items:stretch;gap:10px}
  .cta-row .btn,.cta-row .ghost{width:100%;text-align:center;padding:14px 18px;font-size:15px}

  /* source lines wrap cleanly */
  .source{font-size:13px;line-height:1.5}
}

/* very small phones */
@media (max-width:380px){
  .page-open h1{font-size:26px}
  .panel{padding:18px 15px}
  .panel h2{font-size:20px}
}


/* ============================================================================
   PANEL GRID (option B) — short panels sit two-up, long ones span full width.
   Density above the fold + readable line length + no empty gutter.
   Collapses to a single column on phones.
   ========================================================================== */
@media (min-width:900px){
  .panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
  .panels > .panel{margin:0;height:100%;min-width:0}  /* min-width:0 stops wide children blowing out the grid */
  .panels > .panel.wide,
  .panels > .panel.close{grid-column:1 / -1}   /* full-width panels */
  /* a panel that holds a long Q&A list is automatically full width */
  .panels > .panel:has(.q-list){grid-column:1 / -1}
}

/* overflow guards: nothing may force the layout wider than the screen */
.panel{overflow-wrap:break-word}
.panel svg{max-width:100%;height:auto}
.panel .calc-bars,.panel .tick{max-width:100%}

/* ---- navbar v2: name left · pages centred (active underlined) · actions right ---- */
.masthead .wrap{display:flex;align-items:center;gap:24px}
.masthead .mark{margin-right:auto}
.masthead nav.navmid{display:flex;gap:26px;align-items:center;margin:0 auto}
.masthead .navend{display:flex;gap:18px;align-items:center;margin-left:auto}
.masthead nav.navmid a.lnk.on{color:var(--fg);font-weight:600;box-shadow:inset 0 -2px 0 var(--signal)}
@media(max-width:900px){
  .masthead .wrap{flex-wrap:wrap;gap:12px}
  .masthead nav.navmid{order:3;width:100%;margin:0;gap:18px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .masthead nav.navmid a.lnk{white-space:nowrap}
  .masthead .navend{margin-left:auto;gap:12px}
}
@media(max-width:520px){
  .masthead .navend .btn{font-size:12.5px;padding:7px 12px}
}

/* ---- sign-in as a bordered box, matching the CTA's weight ---- */
.masthead .navend .btn.ghostbox{background:#fff;color:var(--fg);border:1px solid var(--line)}
.masthead .navend .btn.ghostbox:hover{border-color:var(--signal);color:var(--signal)}

/* ---- shared site footer ---- */
.sitefoot{border-top:1px solid var(--line);background:var(--sand);margin-top:56px;padding:48px 0 28px;font-family:var(--sans)}
.sitefoot .footlede{max-width:760px;margin-bottom:30px}
.sitefoot .footlede h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.4vw,36px);line-height:1.15;margin:0 0 10px;color:var(--fg)}
.sitefoot .footlede h2 em{font-style:italic;color:var(--signal)}
.sitefoot .footlede p{margin:0;color:var(--dim);font-size:14px;max-width:60ch}
.footgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:34px}
.footcard{background:#fff;border:1px solid var(--line);border-radius:4px;padding:20px;display:flex;flex-direction:column;min-width:0}
/* "Read past issues" is a navigational link, not a kicker. It was given the
   .fk kicker class and inherited 10.5px uppercase letterspaced styling —
   fine for a label, wrong for something people are meant to tap. */
.footcard .issuelink{margin:12px 0 0;font-size:14px}
.footcard .issuelink a{color:var(--signal);text-decoration:none;font-weight:500}
.footcard .issuelink a:hover{text-decoration:underline}
.footcard .fk{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);font-weight:600;margin-bottom:8px}
.footcard h3{font-family:var(--serif);font-weight:400;font-size:19px;margin:0 0 8px;color:var(--fg)}
.footcard p{font-size:13px;color:var(--dim);margin:0 0 14px;line-height:1.5;flex:1}
.footcard .btn,.footcard .btn.ghostbox{align-self:flex-start}
.footform{display:flex;gap:8px;flex-wrap:wrap}
.footform input{flex:1;min-width:150px;padding:9px 11px;border:1px solid var(--line);border-radius:2px;background:#fff;font-size:13.5px;color:var(--fg)}
.footform input:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(28,93,74,.12)}
.fmsg{font-size:12px;color:var(--dim);margin:8px 0 0;min-height:1em}
.footlinks{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:26px;border-top:1px solid var(--line)}
.footlinks div{display:flex;flex-direction:column;gap:6px;min-width:0}
.footlinks b{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin-bottom:2px}
.footlinks a{font-size:13px;color:var(--dim);text-decoration:none}
.footlinks a:hover{color:var(--signal)}
.footbase{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--dim);letter-spacing:.02em}
@media(max-width:860px){.footgrid{grid-template-columns:1fr}.footlinks{grid-template-columns:1fr 1fr}}

/* ---- cited evidence charts on /why ---- */
.evrow{display:grid;grid-template-columns:190px 1fr 92px;gap:12px;align-items:center;padding:7px 0;font-size:13.5px}
.evrow .evk{color:var(--fg);min-width:0;line-height:1.3}
.evrow .evk small{display:block;color:var(--dim);font-size:11px;margin-top:1px}
.evrow .evb{height:14px;background:var(--sand);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.evrow .evb>span{display:block;height:100%;background:var(--signal)}
.evrow .evb>span.alt{background:#8A6A1F}
.evrow .evb>span.warn{background:#A33A2A}
.evrow .evv{text-align:right;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--fg);white-space:nowrap}
.evnote{font-size:11.5px;color:var(--dim);line-height:1.55;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.evnote a{color:var(--signal)}
.evsplit{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.evcaution{background:#efe8d7;border-left:3px solid #c9a24b;padding:12px 15px;font-size:13px;color:var(--dim);margin:14px 0 0;line-height:1.55}
@media(max-width:820px){.evsplit{grid-template-columns:1fr}.evrow{grid-template-columns:130px 1fr 78px;font-size:12.5px}}

/* ---- growth: level vs composition ---- */
.gcols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:4px}
.gser{display:flex;align-items:flex-end;gap:10px;height:132px;padding:8px 0 0}
.gbar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;min-width:0}
.gbar .gv{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--fg);white-space:nowrap}
.gbar .gf{width:100%;background:var(--signal);border-radius:2px 2px 0 0;min-height:3px}
.gbar .gf.alt{background:#8A6A1F}
.gbar .gl{font-size:11.5px;color:var(--dim);white-space:nowrap}
.gcap{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}
.gdelta{font-size:12.5px;color:var(--dim);margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
@media(max-width:820px){.gcols{grid-template-columns:1fr;gap:22px}}

/* ---- the shift: dated sequence ---- */
.tlwrap{position:relative;padding-left:20px}
.tlwrap:before{content:"";position:absolute;left:4px;top:6px;bottom:10px;width:1px;background:var(--line)}
.tlrow{position:relative;padding:0 0 15px}
.tlrow:before{content:"";position:absolute;left:-20px;top:5px;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--signal)}
.tlrow.soon:before{background:var(--signal)}
.tlrow .tld{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.04em;color:var(--signal);text-transform:uppercase}
.tlrow .tlt{font-size:13.5px;color:var(--fg);line-height:1.45;margin-top:2px}
.tlrow .tlt a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.tlrow .tlt a:hover{color:var(--signal)}
.tlrow.soon .tlt{font-weight:600}
.tlnote{font-size:11.5px;color:var(--dim);line-height:1.55;margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
@media(max-width:820px){.evsplit .tlwrap{margin-top:10px}}

/* ---- two panels side by side inside the panels grid ---- */
.panels-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;grid-column:1/-1}
.panels-pair .panel{margin:0}
@media(max-width:860px){.panels-pair{grid-template-columns:1fr}}

/* ---- footer lede: full width rule + heading, and level card buttons ---- */
.sitefoot .footlede{max-width:none}
/* global h2 is inline-block with a green top border, so its rule only spans the
   text. In the footer the rule should read as a full-width section divider. */
.sitefoot .footlede h2{display:block;width:100%;border-top:2px solid var(--signal);padding-top:18px}
.sitefoot .footlede p{max-width:none}
/* The middle card reserves a line for its status message, which lifted its form
   above the other cards' buttons. Reserve nothing until there is something to say. */
.footcard .fmsg{min-height:0;margin:6px 0 0}
.footcard .fmsg:empty{margin:0}
/* pin every card's action to the same baseline */
.footcard .btn,.footcard .btn.ghostbox,.footcard .footform{margin-top:auto}

/* ---- /why "The numbers": sub-boxes + working column charts ---- */
.nbox{background:#fff;border:1px solid var(--line);border-radius:4px;padding:14px 16px 12px;margin-bottom:14px}
.nbox:last-child{margin-bottom:0}
.nbh{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);font-weight:600;padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.nbh span{display:block;font-weight:400;letter-spacing:.06em;color:var(--dim);margin-top:2px}
.nbf{font-size:11px;color:var(--dim);line-height:1.5;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.nbf a{color:var(--signal)}
.twin{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tw{min-width:0}
.twl{font-size:11.5px;color:var(--dim);line-height:1.35;margin-bottom:8px;min-height:2.7em}
/* The bar TRACK carries the definite height, so percentage fills resolve
   against it. Relying on the flex parent left the fills at min-height. */
.cser{display:flex;gap:8px;align-items:flex-end}
.cbar{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.cbar .cv{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--fg);white-space:nowrap}
.cbar .ct{display:block;width:100%;height:92px;background:var(--sand);border:1px solid var(--line);border-radius:2px;position:relative}
.cbar .ct>i{position:absolute;left:0;right:0;bottom:0;display:block;background:var(--signal);border-radius:0 0 1px 1px}
.cbar .ct>i.alt{background:#8A6A1F}
.cbar .cl{font-size:10.5px;color:var(--dim);white-space:nowrap}
.twd{margin-top:9px;font-family:ui-monospace,Menlo,monospace;font-size:14px;font-weight:600;color:var(--signal)}
.twd.alt{color:#8A6A1F}
.twd span{font-family:var(--sans);font-size:11px;font-weight:400;color:var(--dim);margin-left:5px}
@media(max-width:820px){.twin{grid-template-columns:1fr;gap:20px}.twl{min-height:0}}

/* ---- subset rows: news & publications inside the all-industries figure ---- */
.evrow.evsub{padding-top:2px;padding-bottom:9px;position:relative}
.evrow.evsub .evk{padding-left:16px;position:relative;color:var(--dim);font-size:12.5px}
/* an elbow connector, so the row reads as nested under the one above */
.evrow.evsub .evk:before{content:"";position:absolute;left:4px;top:-9px;bottom:9px;width:1px;background:var(--line)}
.evrow.evsub .evk:after{content:"";position:absolute;left:4px;top:9px;width:7px;height:1px;background:var(--line)}
.evrow.evsub .evk .subof{color:var(--dim);opacity:.75;font-style:italic;margin-right:3px}
.evrow.evsub .evv{color:var(--dim)}
.evrow.evsub .evb{height:11px}

/* ---- homepage: dashboard-flavoured preview charts ---- */
.dv{background:#fff;border:1px solid var(--line);border-radius:4px;padding:13px 15px 12px;margin-top:14px}
.dvsplit .dv{margin-top:0}
.dvh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--line)}
/* 31 Aug: the same encapsulation now wraps the crawler leaderboard, the
   suffix x rank-band board and the wire posture grid on Explore, so every cut
   names the dashboard panel it comes from and links straight to it. */
/* 1 Sep (Alex: "panel 7 is half the size of the page?"). #posture is itself a
   three-column grid, so wrapping its contents in a single .dv card made that
   card ONE of the three columns — a third-width panel. The inner
   .postgrid-in now does the column work; the container goes back to being a
   plain block. */
#posture{display:block}
.postgrid-in{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sbgrid{margin-top:2px}
.sbrow{display:grid;grid-template-columns:92px 1fr 1fr;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line)}
.sbrow:last-child{border-bottom:0}
.sbband{font-size:11.5px;font-weight:600;font-family:ui-monospace,Menlo,monospace;white-space:nowrap;color:var(--fg)}
.sblane{display:flex;flex-wrap:wrap;gap:4px}
.sbright{justify-content:flex-end}
.sbchip i{display:inline-block;font-style:normal;font-size:11px;font-family:ui-monospace,Menlo,monospace;padding:2px 7px;border-radius:3px;white-space:nowrap}
.sbnone{font-size:11px;color:var(--dim)}
@media(max-width:760px){.postgrid-in{grid-template-columns:1fr}.sbrow{grid-template-columns:1fr}.sbright{justify-content:flex-start}}
.dvh b{color:var(--fg);font-weight:600;letter-spacing:.12em}
.dvh a{color:var(--signal);text-decoration:none;white-space:nowrap;font-size:10px;letter-spacing:.08em}
.dvh a:hover{text-decoration:underline}
.dvsplit{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.dvf{font-size:11px;color:var(--dim);line-height:1.5;margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
.dvsub2{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:14px 0 6px;padding-top:11px;border-top:1px solid var(--line)}
.dvsub2:first-child{margin-top:0;padding-top:0;border-top:0}

/* label / value / bar — the dashboard ladder idiom */
.dvr{display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line)}
.dvr:last-child{border-bottom:0}
.dvr .dvk{font-size:12.5px;color:var(--fg);line-height:1.35;min-width:0}
.dvr .dvk small{display:block;font-size:11px;color:var(--dim);line-height:1.4;margin-top:1px}
.dvr .dvv{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:600;color:var(--fg);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dvr .dvt{grid-column:1/-1;height:12px;background:var(--sand);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.dvr .dvt>i{display:block;height:100%;background:var(--signal);min-width:2px}
.dvr .dvt>i.a{background:var(--amber)}
.dvr .dvt>i.b{background:var(--blue)}
.dvr .dvt>i.r{background:var(--red)}
.dvr .dvt>i.n{background:#B8B0A2}

/* nested subset row — reads as "of which" under the row above */
.dvr.dvsub .dvk{padding-left:16px;position:relative;color:var(--dim);font-size:12px}
.dvr.dvsub .dvk:before{content:"";position:absolute;left:4px;top:-11px;bottom:8px;width:1px;background:var(--line)}
.dvr.dvsub .dvk:after{content:"";position:absolute;left:4px;top:8px;width:7px;height:1px;background:var(--line)}
.dvr.dvsub .dvt{margin-left:16px}
.dvr.dvsub .dvv{font-weight:600;font-size:12.5px}

/* diverging centre-axis bar */
.dvdl{display:flex;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.dvdl b{display:block;font-family:ui-monospace,Menlo,monospace;font-size:17px;letter-spacing:0;text-transform:none;color:var(--fg);margin-top:1px}
.dvdl span.rt{text-align:right}
.dvdiv{position:relative;height:26px;margin:8px 0 2px;background:var(--sand);border:1px solid var(--line);border-radius:2px}
.dvdiv i{position:absolute;top:0;bottom:0;display:block}
.dvdiv i.l{right:50%;background:var(--blue)}
.dvdiv i.r{left:50%;background:var(--amber)}
.dvax{position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:var(--fg);opacity:.45;z-index:2}

/* stacked composition */
.dvstack{display:flex;height:26px;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--sand)}
.dvstack i{display:block;height:100%;min-width:1px}
.dvkey{display:flex;flex-wrap:wrap;gap:5px 16px;margin-top:9px;font-size:11.5px;color:var(--dim)}
.dvkey span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dvkey b{width:9px;height:9px;border-radius:2px;display:inline-block;flex:0 0 auto}
.dvkey em{font-style:normal;font-family:ui-monospace,Menlo,monospace;color:var(--fg);font-variant-numeric:tabular-nums}

/* vendor pair group */
.dvg{padding:9px 0;border-bottom:1px solid var(--line)}
.dvg:last-child{border-bottom:0}
.dvgh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;color:var(--dim);margin-bottom:6px}
.dvgh b{color:var(--fg);font-weight:600;font-size:12.5px}
.dvgh em{font-style:normal;font-family:ui-monospace,Menlo,monospace;color:var(--amber);font-weight:600}
.dvp{display:grid;grid-template-columns:106px 1fr 42px;gap:8px;align-items:center;font-size:11.5px;padding:2px 0}
.dvp .pk{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dvp .pt{height:10px;background:var(--sand);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.dvp .pt>i{display:block;height:100%;min-width:2px}
.dvp .pv{text-align:right;font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;color:var(--fg)}

/* headline readout */
.dvbig{font-family:ui-monospace,Menlo,monospace;font-size:clamp(26px,3.6vw,36px);font-weight:600;color:var(--fg);letter-spacing:-.01em;line-height:1}
.dvbigl{font-size:11.5px;color:var(--dim);margin-top:6px;line-height:1.45}
.dvpair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.dvpair .pc{background:var(--sand);border:1px solid var(--line);border-radius:2px;padding:8px 10px}
.dvpair .pc .pn{font-family:ui-monospace,Menlo,monospace;font-size:15px;font-weight:600;color:var(--fg)}
.dvpair .pc .pl{font-size:11px;color:var(--dim);line-height:1.4;margin-top:2px}
@media(max-width:860px){.dvsplit{grid-template-columns:1fr}}

/* ---- homepage preview charts: corrections ---- */
/* dvsplit cards size to their own content — a short card next to a tall one
   was stretching into a large empty box */
.dvsplit{align-items:start}
/* a subset row that is FIRST in its container branches off the chart above it,
   so its connector starts at the row edge rather than reaching up into nothing */
.dvr.dvsub:first-child .dvk:before{top:0}

/* ---- subset connector stops at the elbow ----
   Running it the full height of the row drew a bracket, and pointed at the
   next row even when that row is not a subset. */
.dvr.dvsub .dvk:before{top:-11px;height:20px;bottom:auto}
.dvr.dvsub:first-child .dvk:before{top:0;height:9px}

/* ---- three preview cards across a wide panel ---- */
.dvtri{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px;align-items:start}
.dvtri .dv{margin-top:0;min-width:0}
/* the vendor-pair label column has to give ground at a third of the width */
.dvtri .dvp{grid-template-columns:92px 1fr 40px;gap:7px}
@media(max-width:1040px){.dvtri{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.dvtri{grid-template-columns:1fr}}

/* ---- LinkedIn badge under the founder photo ---- */
.li-badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--signal);
  text-decoration:none;border:1px solid var(--line);border-radius:3px;padding:6px 12px;background:#fff}
.li-badge:hover{border-color:var(--signal);background:var(--sand)}
.li-badge svg{flex:0 0 auto}

/* ---- /why "The numbers": charts side by side under full-width prose ---- */
.nsplit{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;align-items:start}
.nsplit .nbox{margin-bottom:0}
@media(max-width:900px){.nsplit{grid-template-columns:1fr}}

/* the same figure appearing in two charts, marked so the reader can see it */
.tie{color:var(--amber);font-size:10px;vertical-align:super;margin-left:3px;letter-spacing:0}
.evrow.tied .evk,.nrow.tied .nk{font-weight:600}
.evrow.tied .evb{outline:1px solid rgba(138,106,31,.45);outline-offset:1px;border-radius:2px}
.cbar.tiedbar .ct{outline:1px solid rgba(138,106,31,.45);outline-offset:1px}

/* containment: which denominator sits inside which */
.nest-strip{margin:2px 0 8px}
.nrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;padding:4px 0;position:relative}
.nrow .nk{color:var(--fg)}
.nrow .nv{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:600;white-space:nowrap}
.nrow .nv.nu{font-weight:400;color:var(--dim);font-style:italic}
.nrow.n1{padding-left:14px}.nrow.n2{padding-left:28px}.nrow.n3{padding-left:42px}
.nrow.n1 .nk,.nrow.n2 .nk,.nrow.n3 .nk{position:relative}
.nrow.n1 .nk:before,.nrow.n2 .nk:before,.nrow.n3 .nk:before{content:"";position:absolute;left:-10px;top:-6px;bottom:8px;width:1px;background:var(--line)}
.nrow.n1 .nk:after,.nrow.n2 .nk:after,.nrow.n3 .nk:after{content:"";position:absolute;left:-10px;top:8px;width:6px;height:1px;background:var(--line)}
.nrow.n2 .nv.nu{font-size:11.5px}
.nestnote{font-size:11.5px;color:var(--dim);line-height:1.5;padding:8px 0 10px;margin-bottom:6px;border-bottom:1px solid var(--line)}

/* ---- homepage v3: the on-ramp ---- */
.exsplit{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start;margin-top:6px}
@media(max-width:900px){.exsplit{grid-template-columns:1fr;gap:24px}}

/* the mechanism, drawn rather than described */
.mech{border:1px solid var(--line);border-radius:4px;background:#fff;padding:4px 14px}
.mrow{display:grid;grid-template-columns:1fr auto 1fr auto auto;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mrow>span{min-width:0}
.mwho{font-size:12.5px;color:var(--fg);line-height:1.3}
.mwho small,.mgate small{display:block;font-size:11px;color:var(--dim);line-height:1.35;margin-top:2px}
.marr{color:var(--line);font-size:15px}
.mgate{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--dim);background:var(--sand);border:1px solid var(--line);border-radius:2px;padding:5px 8px;text-align:center;line-height:1.25}
.mgate small{font-family:var(--sans)}
.mpage{font-size:12px;color:var(--dim);white-space:nowrap}
.mrow.hi .mwho{font-weight:600}
.mrow.hi .mgate{border-color:var(--amber);color:var(--amber)}
.mechnote{font-size:11.5px;color:var(--dim);line-height:1.55;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
@media(max-width:560px){.mrow{grid-template-columns:1fr;gap:4px}.marr{display:none}.mgate{text-align:left}}

/* what else we capture */
.alsogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.alsoc{border-top:2px solid var(--signal);padding-top:10px;min-width:0}
.alsoc b{display:block;font-size:12.5px;margin-bottom:4px}
.alsoc span{font-size:12px;color:var(--dim);line-height:1.5}
@media(max-width:900px){.alsogrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.alsogrid{grid-template-columns:1fr}}

/* three figures, in words */
.twk{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
.twkc{min-width:0;border-left:2px solid var(--signal);padding-left:14px}
.twkf{font-family:var(--serif);font-size:clamp(28px,4vw,40px);line-height:1;color:var(--fg)}
.twkh{font-size:14px;color:var(--fg);margin-top:8px;line-height:1.35;font-weight:600}
.twkb{font-size:12.5px;color:var(--dim);margin-top:7px;line-height:1.55}
@media(max-width:820px){.twk{grid-template-columns:1fr;gap:18px}}

/* where next */
.nextgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.nextc{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);border-radius:4px;background:#fff;padding:16px 18px;text-decoration:none;min-width:0}
.nextc:hover{border-color:var(--signal)}
.nextc .nk{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);font-weight:600}
.nextc b{font-family:var(--serif);font-size:19px;font-weight:400;color:var(--fg)}
.nextc .nd{font-size:12.5px;color:var(--dim);line-height:1.55;flex:1}
.nextc .ng{font-size:12.5px;color:var(--signal);font-weight:600;margin-top:6px}
@media(max-width:820px){.nextgrid{grid-template-columns:1fr}}

/* the containment band spans both charts it explains */
.nestbox{margin-top:20px;margin-bottom:0}
.nestwrap{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;align-items:start}
.nestwrap .nest-strip{margin:0}
.nestwrap .nestnote{border-bottom:0;padding:0;margin:0;align-self:center}
@media(max-width:760px){.nestwrap{grid-template-columns:1fr;gap:10px}}

/* an estimate must never dress as a measurement */
.est-badge{display:inline-block;font-family:var(--sans);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--amber);border:1px solid var(--amber);border-radius:2px;padding:1px 5px;margin-right:6px;vertical-align:1px}
.nrow .nv small{display:block;font-family:var(--sans);font-size:10.5px;font-weight:400;color:var(--dim);letter-spacing:0}
.nrow .nk small{display:block;font-size:11px;color:var(--dim);font-weight:400;line-height:1.35;margin-top:1px}


/* --- classes the public pages render but theme.css never defined ---------
   Found by check-pubcss.cjs. .ctrls is lifted from app/dashboard.html so a
   button row means the same thing on both surfaces. */
.ctrls{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px;align-items:center}
.mwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:6px}
table.dt{font-size:13.5px}
table.dt th{padding:10px 12px 10px 0}
table.dt td{padding:10px 12px 10px 0}

/* ---- mobile menu ----------------------------------------------------------
   Pure CSS, no JavaScript: a hidden checkbox holds the open/closed state and
   its label is the button. The marketing site has no other interactive
   component, and a menu that cannot fail to load is worth more here than one
   that animates nicely.

   On a phone the masthead was taking about 570px before any content — the
   wordmark, two buttons, and five nav links wrapping onto their own row.

   This block lives at the END of the file and matches `.masthead nav.navmid`
   exactly. An earlier version used `.masthead nav`, which is one class less
   specific than the `.masthead nav.navmid{display:flex}` rule further down,
   so the menu rendered permanently open and the burger did nothing. Specificity
   and source order both matter here; keep this last.                        */
.navtoggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.navburger{display:none}

@media (max-width:820px){
  .masthead .wrap{min-height:56px;gap:12px}
  .navburger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;order:2;width:42px;height:42px;padding:9px;cursor:pointer;
    border:1px solid var(--line);border-radius:3px;box-sizing:border-box}
  .navburger span{display:block;height:2px;background:var(--fg);border-radius:2px;
    transition:transform .18s ease,opacity .18s ease}
  .navtoggle:checked + .navburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle:checked + .navburger span:nth-child(2){opacity:0}
  .navtoggle:checked + .navburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .navtoggle:focus-visible + .navburger{outline:2px solid var(--signal);outline-offset:2px}

  /* closed by default — these must out-specify .masthead nav.navmid above */
  .masthead nav.navmid,.masthead .navend{
    display:none;order:4;flex-basis:100%;width:100%;margin:0;
    flex-direction:column;align-items:stretch;gap:0;overflow-x:visible}
  .navtoggle:checked ~ nav.navmid,.navtoggle:checked ~ .navend{display:flex}
  .masthead nav.navmid a.lnk{
    font-size:16px;padding:13px 2px;border-top:1px solid var(--line);color:var(--fg);
    white-space:normal}
  .masthead .navend{padding:12px 0 16px;gap:8px}
  .masthead .navend .btn{width:100%;text-align:center;margin:0;font-size:14px;padding:12px}
}
@media (prefers-reduced-motion:reduce){.navburger span{transition:none}}

/* Pages with their own body font rules (check, methodology) were leaking
   line-height into the masthead, so the bar was a few px taller there and the
   nav sat visibly lower/higher across pages (Alex, 27 Aug). The masthead sets
   its own; page typography cannot move it. Appended LAST deliberately — this
   file has already had one specificity ambush (the mobile menu). */
.masthead, .masthead .wrap, .masthead .mark, .masthead nav a.lnk{line-height:1.35}
/* The actual cause of the "navbar sits higher on some pages" report: pages with
   a local body{margin:0} (check, methodology) sat at 0 while pages relying on
   this file kept the browser's default 8px body margin — the whole bar was 8px
   lower there. Measured, not guessed: mastTop 8 vs 0. One reset for everyone. */
body{margin:0}

/* D33 (spec 4.2.3): the corrections table's closing line, which turns the
   site's best content from an HTML table into a citable artefact. */
.corrline{margin-top:12px;font-size:13px;color:var(--dim)}
.corrline .mono{color:var(--fg)}
/* D34 R14 — the corrections contract, rendered. The ordering rule is stated on
   the page as well as inside /corrections.json; a published entry that was
   wrong carries a dated note in place and is never rewritten. */
.corrorder{margin:0 0 10px;font-size:13px;color:var(--dim)}
.corrorder b{color:var(--fg)}
.cid{font-size:11px;color:var(--dim);letter-spacing:.04em}
tr.cnoted td{background:rgba(180,140,40,.06)}
.cnote{margin-top:8px;padding:8px 10px;border-left:2px solid var(--amber,#B08B2E);font-size:13px;color:var(--dim)}
.cnote b{color:var(--fg)}

/* ---- /changelog: entries plus an index rail (D33, spec 3.2) --------------
   The page was a 560px column with an empty right half. The entries keep their
   measure; the freed half carries the index of dates and tags, and marks the
   entries that carry a dated note — which is the page's own rule, made
   visible. Collapses to one column below 980px, index last. */
.cl-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:40px;align-items:start}
.cl-entries{min-width:0}
.cl-rail{position:sticky;top:24px;font-family:var(--sans);font-size:12px;border-left:1px solid var(--line);padding-left:16px}
.cl-railh{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.cl-rail a{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;padding:5px 0;text-decoration:none;color:var(--dim);border-bottom:1px solid transparent}
.cl-rail a:hover{color:var(--fg)}
.cl-rail .cld{font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;color:var(--fg)}
.cl-rail .clt{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.cl-rail .cln{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);border:1px solid var(--line);border-radius:2px;padding:0 4px}
.cl-railf{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:var(--dim);line-height:1.5;font-size:11px}
@media(max-width:980px){
  .cl-layout{grid-template-columns:1fr;gap:24px}
  .cl-rail{position:static;order:2;border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:14px}
}

/* D33: /why's lead figure — the one measurement on that page that is ours,
   set apart from the third-party evidence it now sits above. */
.wy-lead{font-size:15px;line-height:1.6;color:var(--fg);max-width:74ch;margin:0 0 4px}
.wy-lead b{font-weight:600}
/* D33: /world's two suffix conventions, collapsed out of the preface. */
.w-conv{margin:0 0 14px;border:1px solid var(--line);border-radius:2px;max-width:80ch}
.w-conv>summary{cursor:pointer;padding:8px 12px;font-size:12.5px;color:var(--fg);list-style:none}
.w-conv>summary::-webkit-details-marker{display:none}
.w-conv>summary::before{content:"\25B8  ";color:var(--dim)}
.w-conv[open]>summary::before{content:"\25BE  ";color:var(--dim)}
.w-conv>p{padding:0 12px 10px;margin:0}
.w-conv[open]>p:last-child{padding-bottom:12px}