:root {
  --ink:#14181F; --body:#374151; --strong:#111827; --grey:#7A8290; --date:#949CA8; --faint:#C6CBD3;
  --hair:#E4E7EB; --hair-2:#D9DEE3; --teal:#0F766E; --chip:#8FD9C4; --neon:#53D8B8; --red:#C0392B; --paper:#FFFFFF;
  --wash:rgba(15,118,110,.06); --tag-vc:#16A34A; --tag-hs:#E8503A;
  --sans:'Helvetica Neue','Segoe UI',Roboto,Helvetica,Arial,sans-serif; --mono:'JetBrains Mono',Menlo,Consolas,monospace; --frame:1240px;
  --fs-title:32px; --fs-name:18px; --fs-head:16px; --fs-body:15px; --fs-table:13px; --fs-data:12.5px;
  --fs-label:10.5px; --fs-rib:11px; --fs-eyebrow:13px; --fs-chip:9.5px; --fs-nav:13px; --fs-navsm:12px;
  /* legacy names: older selectors resolve to the system */
  --ink-2:var(--body); --ink-3:var(--grey); --rule:var(--hair); --surface:var(--wash); --accent:var(--teal);
  --panel:var(--paper); --signal:var(--neon); --signal-deep:var(--teal); --hairline:var(--hair);
  --slate:var(--grey); --font-display:var(--sans); --font-mono:var(--mono); --font-data:var(--mono);
  --fs-record:26px; --ls-0:0; --ls-1:.06em; --ls-2:.12em;
}

/* ---- base + frame: ONE width for every page ------------------------- */
body { margin:0; background:var(--paper); font-family:var(--sans); color:var(--ink); -webkit-font-smoothing:antialiased; }
.wrap { max-width:var(--frame); margin:0 auto; background:var(--paper); min-height:100vh; font-size:var(--fs-body); }
.wrap .pad { padding-left:clamp(16px, 3vw, 40px); padding-right:clamp(16px, 3vw, 40px); }
.wrap a { color:var(--teal); }
.ui-prose, .wrap .prose { max-width:72ch; }
.ui-body { font-size:var(--fs-body); font-weight:400; line-height:1.6; color:var(--body); max-width:72ch; }
.ui-lab { font-family:var(--mono); font-size:var(--fs-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey); line-height:1.35; }
.ui-data, .ui-num { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:0; }
.ui-dim, .ui-u { color:var(--grey); }
.ui-nil, .nil { color:var(--faint); }
.ui-empty { font-size:var(--fs-table); color:var(--grey); padding:11px 0; border-top:1px solid var(--hair); }

/* ---- page header: eyebrow / h1. / subhead / ribbon ------------------ */
.ui-ph { padding-top:28px; }
.ui-eyerow { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 16px; }
.ui-eye { font-family:var(--mono); font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:1px; text-transform:uppercase;
  color:var(--teal); line-height:1.4; min-width:0; overflow-wrap:anywhere; }
.ui-eye a { color:var(--date); font-weight:400; text-decoration:none; }
.ui-eye a:hover, .ui-eye a:focus-visible { color:var(--teal); }
.ui-eye .g { color:var(--date); font-weight:400; }
.ui-eye .sl { color:var(--faint); font-weight:400; padding:0 6px; }
.ui-eyerow .stamp { font-family:var(--mono); font-size:var(--fs-rib); letter-spacing:.08em; text-transform:uppercase; color:var(--grey); }
.ui-title { margin:8px 0 0 0; font-family:var(--sans); font-size:var(--fs-title); font-weight:700; letter-spacing:-.5px;
  line-height:1.2; color:var(--ink); text-wrap:balance; }
.ui-dot { color:var(--teal); }
.ui-kicker { margin-top:12px; display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; }
.ui-sub, .ui-note { margin-top:6px; font-size:var(--fs-body); font-weight:400; line-height:1.6; color:var(--grey); max-width:72ch; }
.ui-note a { text-decoration:none; }
@media (max-width:600px) { .ui-title { font-size:26px; } }

/* ---- ribbon: 2px ink rule, 1px hairline, "995 DEALS / 32 SECTORS" --- */
.ui-rib { display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; border-top:2px solid var(--ink);
  border-bottom:1px solid var(--hair); padding:10px 0; margin-top:18px; font-size:var(--fs-rib); font-weight:400;
  letter-spacing:.08em; text-transform:uppercase; color:var(--grey); }
.ui-rib b { font-family:var(--mono); font-size:var(--fs-rib); font-weight:700; letter-spacing:.02em; color:var(--ink);
  margin-right:5px; font-variant-numeric:tabular-nums; }
.ui-rib .s { color:var(--faint); padding:0 8px; }
.ui-rib .end { margin-left:auto; display:flex; gap:6px; }
.ui-rib.bare { border-top:0; margin-top:0; }

/* ---- section title: mono 16/600 caps teal, underline the word only -- */
.ui-sh { display:flex; align-items:flex-end; margin:34px 0 4px 0; scroll-margin-top:12px; }
/* THE IN-PAGE NAV'S SCROLL OFFSET (Kyle, 2026-10-11: after a jump on a phone the sticky nav covered the section
   heading): on a page with the sticky .ui-snav every in-page jump - a nav link, any #anchor, a bank page's
   #sector-<slug> - lands below the bar. The offset is the bar's height (--snav-h: 9px padding x2, the 11px mono
   link with its 2px underline, the 1px rule = ~40px) plus air; the page has no sticky site header, so nothing
   else stacks above it. A target's own scroll-margin (the .ui-sh 12px) adds to it. Browsers without :has() keep
   the section titles' own margin. */
:root { --snav-h:44px; }
html:has(.ui-snav) { scroll-padding-top:calc(var(--snav-h) + 8px); }
@supports not selector(:has(a)) { .ui-snav ~ * .ui-sh, .ui-snav ~ .ui-sh { scroll-margin-top:52px; } }
.ui-dxb { position:relative; z-index:2; background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer;
  border-bottom:1px dotted var(--grey); }
.ui-dxb:hover, .ui-dxb:focus-visible, .ui-dxb[aria-expanded=true] { color:var(--teal); border-bottom-color:var(--teal); }
.ui-dx { position:relative; z-index:2; padding:2px 0 8px 14px; }
.ui-dx[hidden] { display:none; }
.ui-dxr { display:block; font-size:var(--fs-table); line-height:1.5; color:var(--body); text-decoration:none; padding:2px 0; overflow-wrap:anywhere; }
.ui-dxr, .ui-st a.ui-dxr { color:var(--body); }
.ui-dxr .dx-d { display:inline; font-family:var(--mono); font-size:12px; color:var(--grey); }
.ui-dxr .dx-t { display:inline; font-weight:600; color:var(--ink); }
.ui-dxr .k { color:var(--grey); }
.ui-dxr:hover .dx-t, .ui-dxr:focus-visible .dx-t { color:var(--teal); text-decoration:underline; }
.ui-snav { position:sticky; top:0; z-index:30; background:var(--paper); border-bottom:1px solid var(--hair);
  display:flex; gap:4px 18px; overflow-x:auto; white-space:nowrap; scrollbar-width:none; margin:10px 0 0 0; padding:9px 0; }
.ui-snav::-webkit-scrollbar { display:none; }
.ui-snav a { flex:none; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey); text-decoration:none; padding:2px 0; border-bottom:2px solid transparent; }
.ui-snav a:hover, .ui-snav a:focus-visible, .ui-snav a.on { color:var(--teal); border-bottom-color:var(--teal); }
html:has(.ui-snav) { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.ui-snav) { scroll-behavior:auto; } }
.ui-sh > h2, .ui-sh > span { margin:0; font-family:var(--mono); font-size:var(--fs-head); font-weight:600; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--teal); padding:0 14px 8px 0; border-bottom:2px solid var(--teal); white-space:nowrap;
  line-height:1.2; }
.ui-sh > h2 a, .ui-sh > span a { color:inherit; text-decoration:none; }
.ui-sh::after { content:""; flex:1; border-bottom:1px solid var(--hair-2); }
/* THE BAND RULE (Kyle, 2026-10-07): a 1px line between a page's bands - the section titles' own line token;
   the next band's section title keeps its usual space below it */
.ui-band-rule { border:0; border-top:1px solid var(--hair-2); height:0; margin:36px 0 0 0; }
.ui-sh em { order:2; font-style:normal; font-family:var(--mono); font-size:var(--fs-rib); font-weight:400; letter-spacing:.08em;
  text-transform:uppercase; color:var(--grey); padding:0 0 9px 12px; border-bottom:1px solid var(--hair-2); white-space:nowrap; }
.ui-sh em b { color:var(--ink); font-weight:700; }
/* a phone never scrolls sideways: a long title wraps, the count stays whole */
.ui-sh > h2, .ui-sh > span { min-width:0; }
@media (max-width:520px) { .ui-sh > h2, .ui-sh > span { white-space:normal; } }
.ui-sh em a { color:var(--teal); text-decoration:none; }
.ui-sh.tight { margin-top:22px; }
/* A LINKED SECTION TITLE (Kyle, 2026-10-07): the site's chevron (.lg-x, 1.2x as in the Connections rows) after the
   word, centred on it, nudging 3px right on hover / focus-visible; no motion under prefers-reduced-motion */
.ui-sh a.ui-shl { display:inline-flex; align-items:center; gap:7px; }
.ui-sh a.ui-shl .lg-x { all:unset; flex:none; display:inline-block; font-family:var(--sans); font-size:16px; font-weight:400;
  line-height:1; color:var(--teal); transform:translateY(-1px) scale(1.2); transition:transform .12s ease; }
.ui-sh.sub a.ui-shl .lg-x { font-size:13px; }
.ui-sh a.ui-shl:hover .lg-x, .ui-sh a.ui-shl:focus-visible .lg-x { transform:translate(3px, -1px) scale(1.2); }
.ui-sh a.ui-shl:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
@media (prefers-reduced-motion: reduce) { .ui-sh a.ui-shl .lg-x { transition:none; } }
/* the SUBHEAD under a section title (Kyle, 2026-10-07): the same mono caps teal, smaller, a 1px underline */
.ui-sh.sub { margin-top:18px; }
.ui-sh.sub > h3 { margin:0; min-width:0; font-family:var(--mono); font-size:var(--fs-table); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--teal); padding:0 12px 6px 0; border-bottom:1px solid var(--teal); white-space:nowrap;
  line-height:1.2; }
.ui-sh.sub > h3 a { color:inherit; text-decoration:none; }
.ui-sh.sub em { padding-bottom:7px; }
@media (max-width:520px) { .ui-sh.sub > h3 { white-space:normal; } }
.ui-mini { font-family:var(--mono); font-size:var(--fs-rib); letter-spacing:.08em; text-transform:uppercase; color:var(--grey);
  margin:10px 0 6px 0; }
.ui-mini b { color:var(--ink); font-weight:700; margin-right:5px; font-family:var(--mono); }

/* ---- stat strip ------------------------------------------------------ */
.ui-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); border-top:2px solid var(--ink);
  border-bottom:1px solid var(--hair); margin-top:18px; }
.ui-stats > div { padding:10px 14px 11px 14px; border-left:1px solid var(--hair); min-width:0; }
.ui-stats > div:first-child { border-left:0; padding-left:0; }
.ui-stats i { display:block; font-style:normal; font-family:var(--mono); font-size:var(--fs-label); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--grey); padding-bottom:4px; line-height:1.35; }
.ui-stats > div > b { display:block; font-size:var(--fs-body); font-weight:400; color:var(--ink); line-height:1.45; overflow-wrap:anywhere; }
.ui-stats > div > b a { color:var(--teal); text-decoration:none; }
.ui-stats > div > b .ui-u, .ui-stats > div > b small { font-size:var(--fs-table); color:var(--grey); }
.ui-stats > div > b small.ui-l2 { display:block; margin-top:2px; font-size:12.5px; }
@media (max-width:600px) { .ui-stats { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ui-stats > div:nth-child(odd) { border-left:0; padding-left:0; } }
/* THE SUMMARY STRIP (Kyle, 2026-10-10): the header strip above every nav page's list - up to six tiles, the
   number large (mono 26px ink; a name 17px 600), the label small (mono caps grey), one optional grey line of
   context. One component, site_ui.summary_strip; the numbers come from metrics.py. */
.ui-sum { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); margin-top:18px; border-top:2px solid var(--ink);
  border-bottom:1px solid var(--hair-2); }
.ui-sum > div { padding:12px 14px 13px 14px; border-left:1px solid var(--hair); min-width:0; }
.ui-sum > div:first-child { border-left:0; padding-left:0; }
.ui-sum i { display:block; font-style:normal; font-family:var(--mono); font-size:var(--fs-label); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey); line-height:1.35; }
.ui-sum b { display:block; margin-top:6px; font-family:var(--mono); font-size:26px; font-weight:700; letter-spacing:-.5px; color:var(--ink);
  line-height:1.1; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-sum b.t { font-family:var(--sans); font-size:17px; font-weight:600; letter-spacing:0; line-height:1.3; margin-top:8px;
  white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ui-sum b a { color:var(--ink); text-decoration:none; }
.ui-sum b a:hover, .ui-sum b a:focus-visible { color:var(--teal); }
.ui-sum small { display:block; margin-top:4px; font-size:12.5px; color:var(--grey); line-height:1.4; overflow-wrap:anywhere; }
.ui-sum small a { color:var(--grey); text-decoration:none; }
.ui-sum small a:hover, .ui-sum small a:focus-visible { color:var(--teal); }
/* A TILE'S SHORT LIST (the mix, the top sectors): one line each - the label left, the figure right (mono) */
.ui-sum ol.ui-sumr { list-style:none; margin:7px 0 0 0; padding:0; }
.ui-sum ol.ui-sumr li { display:flex; justify-content:space-between; gap:10px; padding:3px 0; font-size:13.5px; line-height:1.35;
  color:var(--strong); border-top:1px solid var(--hair); }
.ui-sum ol.ui-sumr li:first-child { border-top:0; }
.ui-sum ol.ui-sumr li > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-sum ol.ui-sumr li > span:last-child { flex:none; font-family:var(--mono); font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.ui-sum ol.ui-sumr a { color:var(--strong); text-decoration:none; }
.ui-sum ol.ui-sumr a:hover, .ui-sum ol.ui-sumr a:focus-visible { color:var(--teal); }
/* THE SUMMARY BOXES (Banks, Kyle 2026-10-10): the strip's second row - wider boxes for a name or a short list, four a
   row, under the number tiles (no second ink rule) */
.ui-sum.ui-sumb { margin-top:0; border-top:0; }
@media (max-width:1000px) { .ui-sum { grid-auto-flow:row; grid-template-columns:repeat(3, minmax(0,1fr)); }
  .ui-sum.ui-sumb { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ui-sum > div:nth-child(3n+1) { border-left:0; padding-left:0; } .ui-sum > div:nth-child(n+4) { border-top:1px solid var(--hair); }
  .ui-sum.ui-sumb > div { border-left:1px solid var(--hair); padding-left:14px; border-top:1px solid var(--hair); }
  .ui-sum.ui-sumb > div:nth-child(odd) { border-left:0; padding-left:0; } }
@media (max-width:560px) { .ui-sum { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ui-sum > div:nth-child(3n+1) { border-left:1px solid var(--hair); padding-left:14px; }
  .ui-sum > div:nth-child(odd) { border-left:0; padding-left:0; } .ui-sum > div:nth-child(n+3) { border-top:1px solid var(--hair); }
  .ui-sum.ui-sumb { grid-template-columns:minmax(0,1fr); }
  .ui-sum.ui-sumb > div { border-left:0; padding-left:0; } }

/* ---- facts: two left-aligned columns, grey mono label, ink value ---- */
.ui-kv { margin:14px 0 0 0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 40px; }
.ui-kv > div { display:grid; grid-template-columns:132px minmax(0,1fr); gap:0 12px; align-items:baseline;
  padding:9px 0; border-top:1px solid var(--hair); }
.ui-kv dt { font-family:var(--mono); font-size:var(--fs-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey); }
.ui-kv dd { margin:0; font-size:var(--fs-body); font-weight:400; line-height:1.5; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.ui-kv dd a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hair); }
.ui-kv dd a:hover, .ui-kv dd a:focus-visible { color:var(--teal); border-color:var(--teal); }
/* the taxonomy keeps its colour in a fact (the TARGET Sector row): teal, sector 600 / subsector 400 */
.ui-kv dd a.ui-sec, .ui-kv dd a.ui-subsec { color:var(--teal); border-bottom:0; }
.ui-kv dd a.ui-sec:hover, .ui-kv dd a.ui-subsec:hover { text-decoration:underline; text-decoration-color:var(--chip); text-underline-offset:3px; }
.ui-kv.one { grid-template-columns:minmax(0,1fr); }
/* the TARGET block (2026-10-02): Sector follows Company in the markup (a phone's one column), and on the
   two-column grid it is pinned under Company in the left column; dense flow moves the next fact up beside Company */
.ui-kv.tsec { grid-auto-flow:row dense; }
.ui-kv.tsec > div:nth-child(2) { grid-column:1; }
@media (max-width:760px) { .ui-kv { grid-template-columns:minmax(0,1fr); } .ui-kv > div { grid-template-columns:110px minmax(0,1fr); } }

/* ---- row + table ----------------------------------------------------- */
.ui-row { display:block; border-top:1px solid var(--hair); padding:11px 26px 11px 0; color:var(--body); text-decoration:none; }
.ui-row .nm, .ui-tr .nm, .ui-tile .nm { font-weight:600; color:var(--strong); }
.ui-row .k, .ui-tr .k { font-weight:400; color:var(--grey); }
.ui-row .d { display:block; font-size:var(--fs-body); line-height:1.6; color:var(--body); padding-top:3px; }
.ui-row .num, .ui-tr .num { font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.ui-row .dt, .ui-tr .dt { font-family:var(--mono); font-size:12px; color:var(--grey); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ui-th { padding:10px 0 8px 0; border-bottom:1px solid var(--hair-2); }
.ui-th > span, .ui-th > button { font-family:var(--mono); font-size:var(--fs-label); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-th > button { all:unset; cursor:pointer; font-family:var(--mono); font-size:var(--fs-label); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey); white-space:nowrap; }
.ui-th > button:hover, .ui-th > button:focus-visible { color:var(--teal); }
.ui-th .r, .ui-tr .r { text-align:right; }
.ui-tr { border-top:1px solid var(--hair); font-size:var(--fs-table); font-weight:400; line-height:1.45; color:var(--body);
  text-decoration:none; min-width:0; padding:10px 26px 10px 0; }
.ui-tr > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-tr .lab { font-family:var(--mono); font-size:var(--fs-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); }
a.ui-tr { display:grid; }

/* ---- tile ------------------------------------------------------------ */
.ui-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:16px; }
.ui-grid.c2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.ui-grid.c4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.ui-tile { display:flex; flex-direction:column; gap:6px; min-width:0; background:var(--paper); border:1px solid var(--hair);
  border-radius:3px; padding:14px 30px 14px 16px; color:var(--ink); text-decoration:none; }
.ui-tile-h { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.ui-tile-h > span, .ui-tile-h > a { min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* THE ENTITY TITLE (Kyle, 2026-10-02): one style for every card title - the
   sector tiles' names, the firms page's stat-card firms - so they cannot drift */
.ui-et, .ui-et a { font-family:var(--sans); font-size:16px; font-weight:600; line-height:1.25; letter-spacing:0;
  color:var(--teal); text-decoration:none; }
.ui-tile-h b { font-weight:400; font-size:var(--fs-table); color:var(--grey); flex:none; white-space:nowrap; }
.ui-tile-h b .ui-n b, .ui-tile .ui-n b { color:var(--ink); }
.ui-tile .ui-sub { font-size:var(--fs-table); color:var(--grey); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; }
@media (max-width:900px) { .ui-grid, .ui-grid.c4 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px) { .ui-grid, .ui-grid.c2, .ui-grid.c4 { grid-template-columns:minmax(0,1fr); } }

/* ---- stat cards (firms) ---------------------------------------------- */
.ui-cards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:20px; }
.ui-card { border:1px solid var(--hair); border-radius:3px; padding:14px 16px; background:var(--paper); min-width:0; }
.ui-card .t { font-family:var(--mono); font-size:var(--fs-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); }
.ui-card .v { margin-top:8px; }
.ui-card .m { margin-top:3px; font-size:13.5px; color:var(--grey); }
.ui-card .m b { font-family:var(--mono); font-weight:600; color:var(--ink); }
.ui-card .c { margin-top:4px; font-size:var(--fs-table); color:var(--grey); }
/* THE LEAD CARD (Kyle, 2026-10-11 - research in the site's card style): the deal sheet's lead box (ledger .ds-lead) as a
   component - white, a 1px rule, the 3px teal left rule; its label the lead box's (mono caps teal); a dash list */
.ui-card.ui-lead { border-radius:0; border-left:3px solid var(--teal); padding:14px 12px 14px 16px; }
.ui-card .ui-card-l { font-family:var(--mono); font-size:var(--fs-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal); line-height:1.35; }
.ui-dash { list-style:none; margin:8px 0 0 0; padding:0; font-family:var(--sans); font-size:var(--fs-table); line-height:1.5; color:var(--body); }
.ui-dash li { position:relative; margin:3px 0 0 0; padding-left:16px; }
.ui-dash li::before { content:""; position:absolute; left:0; top:.72em; width:8px; border-top:2px solid var(--teal); }
.ui-dash b { font-family:var(--sans); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
@media (max-width:900px) { .ui-cards { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px) { .ui-cards { grid-template-columns:minmax(0,1fr); } }

/* ---- counts: the number in ink mono, the unit in grey words --------- */
.ui-n { white-space:nowrap; color:var(--grey); font-size:var(--fs-table); }
.ui-n b { font-family:var(--mono); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; margin-right:4px; }

/* ---- chip, tag, type ------------------------------------------------- */
.ui-chip { display:inline-block; font-family:var(--sans); font-size:var(--fs-chip); font-weight:400; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.2; color:var(--teal); border:1px solid var(--chip); border-radius:3px;
  padding:3px 7px 2px 7px; background:var(--paper); white-space:nowrap; text-decoration:none; vertical-align:2px; }
/* ONE HOVER FOR EVERY CHIP-LIKE CONTROL (Kyle, 2026-10-02, over the 09-30
   chip spec): hover = teal border + teal name + the wash; selected keeps the
   wash and adds a 1px inset teal ring, so it stays distinct from hover. */
a.ui-chip, .ui-tog { transition:border-color .12s ease, background-color .12s ease, color .12s ease; }
a.ui-chip:hover, a.ui-chip:focus-visible, .ui-chip.on { border-color:var(--teal); background:var(--wash); color:var(--teal); }
.ui-chip.on { box-shadow:inset 0 0 0 1px var(--teal); }
.ui-btn.ui-tog, .wrap a.ui-btn.ui-tog { background:var(--paper); color:var(--ink); border-color:var(--hair, #d9dde3); }
.ui-btn.ui-tog:hover, .ui-btn.ui-tog:focus-visible { border-color:var(--teal); color:var(--teal); background:var(--wash); }
.ui-btn.ui-tog[aria-pressed=true], .ui-btn.ui-tog.on { border-color:var(--teal); color:var(--teal); background:var(--wash);
  box-shadow:inset 0 0 0 1px var(--teal); }
@media (prefers-reduced-motion: reduce) { a.ui-chip, .ui-tog { transition:none; } }
/* the deal type: the word only, mono 10.5 600 .1em caps, grey - no dot (2026-10-02) */
.ui-type, .ui-role { font-family:var(--mono); font-size:var(--fs-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey); white-space:nowrap; line-height:1.35; }
/* THE ROW'S COLOUR IS THE TAXONOMY (Kyle, 2026-10-02): sector teal 600,
   subsector teal 400, both links; a subtle chip-green underline on row hover.
   Names are ink 600; buyer / sponsor / sell-side body grey-ink; value and
   date mono grey. Teal is for sector/subsector, links and controls only. */
.ui-sec, .ui-subsec { color:var(--teal); text-decoration:none; }
.ui-sec { font-weight:600; }
.ui-subsec { font-weight:400; }
a.ui-sec:hover, a.ui-subsec:hover, .ui-hov:hover .ui-sec, .ui-hov:hover .ui-subsec, .ui-hov.open .ui-sec, .ui-hov.open .ui-subsec {
  text-decoration:underline; text-decoration-color:var(--chip); text-underline-offset:3px; }
.ui-party { color:var(--body); font-weight:400; }
.ui-val, .ui-date { font-family:var(--mono); color:var(--grey); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ui-tag { display:inline-block; font-family:var(--sans); font-size:var(--fs-chip); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); border:1px solid var(--tag-vc); border-radius:2px; line-height:1.1;
  padding:3px 5px 2px 5px; white-space:nowrap; vertical-align:1px; background:var(--paper); }
.ui-tag.hs { border-color:var(--tag-hs); }

/* ---- button: every action -------------------------------------------- */
.ui-btn { display:inline-block; font-family:var(--sans); font-size:var(--fs-rib); font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; line-height:1.1; color:var(--ink); background:var(--paper); border:1px solid var(--ink);
  border-radius:3px; padding:7px 6px 5px 6px; text-decoration:none; cursor:pointer; white-space:nowrap; }
.ui-btn:hover, .ui-btn:focus-visible { border-color:var(--teal); color:var(--teal); }
.ui-btn[aria-pressed=true], .ui-btn.on { background:var(--ink); color:var(--paper); }
.ui-btn.ui-off, .wrap .ui-btn.ui-off { border-color:var(--rule); color:var(--ink-3); cursor:not-allowed; background:none; }
.ui-btn.ui-off:hover { border-color:var(--rule); color:var(--ink-3); }
.ui-soon { font-size:var(--fs-chip); letter-spacing:.12em; color:var(--ink-3); border:1px solid var(--rule); border-radius:2px;
  padding:0 4px; margin-left:7px; vertical-align:1px; }
.wrap a.ui-btn { color:var(--ink); }
.wrap a.ui-btn:hover, .wrap a.ui-btn:focus-visible { color:var(--teal); }
.wrap a.ui-btn.on { color:var(--paper); }
.wrap a.ui-row, .wrap a.ui-tr, .wrap a.ui-tile { color:var(--body); }
.ui-btns { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ui-more { margin-top:12px; }
.ui-cue { color:var(--teal); font-family:var(--sans); }

/* ---- THE ONE HOVER --------------------------------------------------- */
.ui-hov { position:relative; transition:background-color .12s ease, color .12s ease; }
.ui-hov:hover, .ui-hov:focus-visible, .ui-hov.open { background:var(--wash); }
.ui-hov:hover .nm, .ui-hov:focus-visible .nm, .ui-hov.open .nm { color:var(--teal); }
.ui-hov::after { content:"\203A"; position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--teal);
  font-family:var(--sans); font-size:16px; opacity:0; transition:opacity .12s ease; pointer-events:none; }
.ui-hov:hover::after, .ui-hov:focus-visible::after { opacity:1; }
.ui-hov:focus-visible { outline:2px solid var(--teal); outline-offset:-2px; }
.ui-hov:has(a.ui-go:focus-visible) { background:var(--wash); }
.ui-hov:has(a.ui-go:focus-visible)::after { opacity:1; }
.ui-hov:has(a.ui-go:focus-visible) .nm { color:var(--teal); }
/* a row's own sector / subsector links just go teal - no second, nested wash */
.ui-hov a.ui-sec:hover, .ui-hov a.ui-subsec:hover { background:none; }
/* A ROW OR TILE WITH LINKS INSIDE IT (2026-10-02): its main link (.ui-go)
   covers the whole box, the inner links (a sector, a firm) sit above it -
   one hit area, no nested anchors */
.ui-st { position:relative; }
.ui-st a.ui-go:not(.ui-et) { color:inherit; text-decoration:none; }
/* ...and the row's one hover still reaches its name (Kyle, 2026-10-07: firm names turn teal on hover - the
   .ui-hov rule above, which the inherit just now out-ranked) */
.ui-st.ui-hov:hover a.ui-go.nm, .ui-st.ui-hov.open a.ui-go.nm, .ui-st.ui-hov:has(a.ui-go:focus-visible) a.ui-go.nm { color:var(--teal); }
.ui-st a.ui-go::before { content:""; position:absolute; inset:0; z-index:0; }
.ui-st a:not(.ui-go) { position:relative; z-index:1; }
.ui-st:has(a.ui-go:focus-visible) { outline:2px solid var(--teal); outline-offset:-2px; }
.ui-st a.ui-go:focus-visible { outline:0; }
@media (prefers-reduced-motion: reduce) { .ui-hov, .ui-hov::after { transition:none; } }

/* ---- SHOW ALL (Kyle, 2026-10-05): a capped list's "Show all N <noun>" - the Connections control, shared:
   mono caps teal, the site's chevron (.lg-x) pointing down, up when open; the rows past the cap ride in the
   list (.ui-x) hidden until opened. The one hover, its right-hand cue off (the chevron is the cue). -- */
.ui-all { all:unset; box-sizing:border-box; position:relative; display:flex; align-items:center; gap:8px; width:100%; cursor:pointer;
  padding:8px 0 8px 2px; border-top:1px solid var(--hair); font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--teal); transition:background-color .12s ease; }
.wrap .ui-all .lg-x { all:unset; flex:none; display:inline-block; width:14px; text-align:center; font-family:var(--sans); font-size:16px;
  line-height:1; color:var(--teal); transform:rotate(90deg) scale(1.2); transition:transform .12s ease; }
.wrap .ui-all[aria-expanded="true"] .lg-x { transform:rotate(-90deg) scale(1.2); }
.ui-all.ui-hov::after { content:none; }
.ui-all.ui-hov:hover { background:transparent; }
@media (hover:hover) { .ui-all.ui-hov:hover { background:var(--wash); } .ui-all.ui-hov:hover .ui-al { text-decoration:underline; } }
.ui-all.ui-hov:focus-visible { background:var(--wash); outline:2px solid var(--teal); outline-offset:-2px; }
.ui-all[hidden], .ui-lst:not(.ui-open) .ui-x { display:none; }
@media (prefers-reduced-motion: reduce) { .ui-all, .wrap .ui-all .lg-x { transition:none; } }

/* ---- the brand colon: only the search prompts (and the logo image) --- */
.ui-colon { font-family:var(--mono); font-weight:700; color:var(--teal); display:inline-block; width:1ch; text-align:center; }
.ui-colon.neon { color:var(--neon); }
.ui-search .ui-colon, .ui-msearch .ui-colon,
.ui-blink { animation:ui-blink 1.1s steps(1) infinite; }
@keyframes ui-blink { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .ui-search .ui-colon, .ui-msearch .ui-colon, .ui-blink { animation:none; } }
.ui-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* the register's search field (deals, search page) */
.ui-search { display:flex; align-items:center; gap:8px; border:1px solid var(--hair-2); border-radius:3px; background:var(--paper);
  padding:0 10px; min-width:0; }
.ui-search:focus-within { border-color:var(--teal); }
.ui-search input { flex:1; min-width:0; border:0 !important; outline:0; background:transparent; padding:9px 0 !important;
  font-family:var(--sans); font-size:14px; color:var(--ink); }
.ui-search input:focus::placeholder { color:transparent; }

/* ---- the masthead: lockup | search | GET ACCESS ---------------------- */
.sitehead { background:var(--ink); display:grid; grid-template-columns:1fr minmax(0, 320px) 1fr; align-items:center; gap:14px 20px;
  padding:14px 24px; }
.sitehead .logo-home { justify-self:start; text-decoration:none; font-size:0; }
.sitehead .th-mh-r { justify-self:end; display:inline-flex; align-items:center; gap:18px; white-space:nowrap; }
/* signed out: Sign in + a small Get access button (Kyle, 2026-10-04: no Pricing link in the header) */
.sitehead .th-ga { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  color:var(--neon); border:1px solid var(--neon); border-radius:3px; padding:5px 9px; text-decoration:none; line-height:1.2; }
.sitehead .th-ga:hover, .sitehead .th-ga:focus-visible { background:var(--neon); color:var(--ink); }
@media (max-width:420px) { .sitehead .th-ga { letter-spacing:.08em; padding:4px 7px; } }
.sitehead .th-login, .sitehead .th-pricing { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:#F9FAFB; white-space:nowrap; text-decoration:none; }
.sitehead .th-login:hover, .sitehead .th-login:focus-visible, .sitehead .th-pricing:hover, .sitehead .th-pricing:focus-visible { color:var(--neon); }
@media (max-width:420px) { .sitehead .th-mh-r { gap:12px; } .sitehead .th-login, .sitehead .th-pricing { letter-spacing:.1em; } }
.sitehead .getaccess { justify-self:end; white-space:nowrap; font-family:var(--sans); font-size:var(--fs-rib); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; background:var(--neon); color:var(--ink); padding:8px 12px; border-radius:3px;
  text-decoration:none; }
.sitehead.solo { grid-template-columns:1fr auto; }
.neonrule { height:4px; background:var(--neon); font-size:0; line-height:0; }
.ui-msearch { position:relative; display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box;
  background:#1B2029; border:1px solid #3A4149; border-radius:3px; padding:7px 10px; transition:border-color .12s ease; }
.ui-msearch:focus-within { border-color:var(--neon); }
.ui-msearch input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:#F9FAFB; font-family:var(--sans);
  font-size:13.5px; padding:0; }
.ui-msearch input::placeholder { color:#8C94A1; }
.ui-msearch kbd { font-family:var(--mono); font-size:var(--fs-rib); color:#8C94A1; border:1px solid #3A4149; border-radius:3px;
  padding:1px 6px; line-height:1.3; }
/* PHONE WIDTH (2026-10-05): a bare 1fr column cannot shrink below the logo's own width, so at 390 the masthead ran
   15px past the screen and the page scrolled sideways; the logo column may shrink and the lockup shrinks with it */
@media (max-width:760px) { .sitehead { grid-template-columns:minmax(0, 1fr) auto; padding:12px 16px; }
  .sitehead .logo-home { min-width:0; max-width:100%; } .sitehead .logo-home img { max-width:100% !important; }
  .sitehead .ui-msearch { grid-column:1 / -1; grid-row:2; } }

.ui-tries { margin-top:12px; font-size:var(--fs-table); color:var(--grey); display:flex; flex-wrap:wrap; gap:6px 14px; }
.ui-tries a { color:var(--teal); text-decoration:none; font-weight:600; }

/* the results dropdown under both fields */
.ui-drop { position:absolute; left:-1px; right:-1px; top:calc(100% + 6px); background:var(--paper); border:1px solid var(--hair-2);
  border-radius:3px; box-shadow:0 8px 24px rgba(20,24,31,.12); z-index:60; padding:4px 0; text-align:left; max-height:70vh; overflow:auto; }
.ui-drop .g { font-family:var(--mono); font-size:var(--fs-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey); padding:9px 12px 4px 12px; }
.ui-drop a { display:flex; justify-content:space-between; gap:12px; padding:8px 30px 8px 12px; color:var(--ink); text-decoration:none;
  font-size:13.5px; }
.ui-drop a .nm { font-weight:600; color:var(--strong); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-drop a .k { color:var(--grey); font-size:12px; white-space:nowrap; }
.ui-drop a.act { background:var(--wash); }
.ui-drop a.act .nm { color:var(--teal); }
.ui-drop .all { border-top:1px solid var(--hair); }

/* THE DESIGN SYSTEM (Kyle, 2026-09-28): tokens and components live in
   site_ui.py and are emitted ahead of this sheet by page_shell - one type
   scale, one colour set, one set of components. This sheet holds the
   chrome and page layout only, and every value in it is a token. */
/* THE FRAME (Kyle, 2026-10-02, site overhaul): site_ui owns body, .wrap
   (one 1240px width for every page), .pad, the masthead and the neon rule.
   What stays here is the chrome site_ui does not draw: the tab row and the
   dark footer. */
a { color:var(--teal); }
.mono { font-family:var(--mono) !important; text-transform:uppercase; }
/* THE INK FOOTER: on ink, text is white; secondary text the faint grey. */
.inv .footnav { display:inline-flex; gap:18px; font-family:var(--mono); font-size:var(--fs-label); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.inv .footnav a { color:var(--paper); text-decoration:none; }
.inv .footnav a:hover { color:var(--neon); }
.inv .legal { padding-top:14px; font-size:var(--fs-label); color:var(--faint); line-height:1.7; }
.inv .legal a { color:var(--faint); }
.inv .legal a:hover { color:var(--paper); }
.inv .disclaimer { padding-top:10px; font-size:var(--fs-label); color:var(--faint); line-height:1.7; max-width:70ch; }
/* THE TAB ROW: Dashboard / Deals / Sectors / Banks / Investors / Conferences - 13px / .08em mono caps,
   grey at rest, ink + a teal underline on the page you are in. No SEARCH:
   search lives in the masthead (2026-10-02). */
.tabrow { background:var(--paper); border-bottom:1px solid var(--hair); display:flex; align-items:center; gap:0 24px;
  padding:0 clamp(16px, 3vw, 40px); overflow-x:auto; }
.tabrow a.tab { font-family:var(--mono) !important; font-size:var(--fs-nav); font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--grey); text-decoration:none; padding:12px 0 9px 0; border-bottom:2px solid transparent;
  white-space:nowrap; }
.tabrow a.tab:hover, .tabrow a.tab:focus-visible { color:var(--ink); }
.tabrow a.tab.on { color:var(--ink); border-bottom-color:var(--teal); }
@media (max-width:420px) { .tabrow { gap:0 14px; } .tabrow a.tab { font-size:var(--fs-navsm); letter-spacing:.06em; } }
/* .wordmark rules removed 2026-09-28: wordmark_block() has no callers - the masthead is the lockup image. */
@media (max-width:600px) {
  /* Header: logo on its own line, then ARCHIVE + SUBSCRIBE as one tidy
     right-aligned cluster (Kyle, 2026-08-26 round 2). */
  /* !important throughout: these elements carry INLINE styles (the markup
     is shared with email-lineage rendering), and inline always beats a
     class - the first cut of these rules silently lost that fight and the
     snapshot stayed wedged top-right (Kyle's screenshot). */
  .issuehead { font-size:var(--fs-title) !important; letter-spacing:0 !important; }
  .issuehero { display:block !important; }
  .snapacts { text-align:left !important; }

  /* THE TWO-LINE DEAL ROW ON A PHONE (Kyle, 2026-08-28, screenshot).
     The row is a two-cell table - headline left, deal type right - which
     is right on a desktop and wrong at 390px: the tag reserves a column,
     the headline is squeezed into what is left and wraps mid-name, and
     the tag floats level with the first line while the second line runs
     under it. Collapsing the cells to blocks drops the tag onto its own
     line beneath the headline, left-aligned with everything else, so the
     row reads name -> type -> description straight down. */
  td.rowcell table,
  td.rowcell table tbody { display:block !important; width:100% !important; }
  /* column-REVERSE, so the deal type lands ABOVE the headline as a
     kicker rather than between the headline and the description (Kyle,
     2026-08-28). Stacking it in source order split the one thing that
     has to read as a unit - the deal and what the company does. Above,
     it sets context before the name, which is also how the deal page's
     own chip works. */

  /* The company cards' field list: a nowrap label column plus a value
     column has no room to be two columns on a phone either. */
  table.tight td { display:block !important; width:100% !important;
      white-space:normal !important; padding-left:0 !important; }
  table.tight td:first-child { padding-bottom:0 !important; }
  table.tight td:last-child { padding-bottom:6px !important; }

  /* The deal page's own header row: kicker and date stop competing for
     one line and stack. */
  .actionbar { gap:8px !important; }

  /* The dashboard on a phone: the two groups will not hold one line at
     360px, so let them wrap and tighten the leading rather than shrink
     the type - a scoreboard that has to be squinted at is not one. */
  .dashbar { margin-top:16px !important; padding:7px 6px !important;
              line-height:1.8 !important; }

  /* THE ACTUAL SOURCE OF THE WHITE SPACE (Kyle, 2026-08-28, third look).
     The register rows were already as tight as their contents allow - the
     gap he kept seeing is the SECTOR BLOCK. On a heavy day the deals
     spread across a dozen sectors, so almost every deal arrives under its
     own heading and pays 40px of lead-in plus a hairline, and the page
     reads as mostly heading. Desktop has the width to carry that; a phone
     does not. Half the lead-in, and drop the row's own border-top on the
     first row of each group so a heading is not followed by a second
     hairline 15px later. */
  .sec { padding-top:24px !important; }
  /* ...except the first, which already has the dashboard's hairline and
     band above it (Kyle, 2026-08-29). */
  .sec.secfirst { padding-top:16px !important; }
  .wrap table td.rowcell::after { left:-16px !important; }
  .sec > .mono > .ul { padding-bottom:6px !important; }
  .sec table tr:first-child td.rowcell { border-top:0 !important;
      padding-top:9px !important; }
  td.rowcell { padding-top:12px !important; padding-bottom:12px !important; }
  td.rowcell table td[align="right"] { padding-bottom:2px !important; }
  .rowdesc { padding-top:5px !important; }
}
/* READABILITY PASS (Kyle, 2026-08-28: "the font is a little bit too light
   gray ... maybe even consider a slightly larger font now that we have more
   room", then "same with the deal pages").

   Measured rather than eyeballed. Against white:
     #7A8290  3.87:1  - 57 uses, the workhorse muted text. Under WCAG AA.
     #949CA8  2.77:1  - 15 uses, provenance and citation lines. Well under.
   Both now step one level darker, which clears 4.5:1 without turning the
   muted text into body text and flattening the hierarchy.

   SITE ONLY, and by inline-style attribute, because the register rows and
   fact blocks are rendered by build_issue for the EMAIL, where every colour
   has to be inline and where 13px on a 584px row still reads fine. Changing
   the shared renderer would move the email too; this leaves it alone.
   SUPERSEDED 2026-09-28: site_ui.site_only() strips the email's inline
   type and colour from every fragment the site reuses, and the retired
   greys are gone from the site - there is nothing left to remap. */
/* The two-line register row sets its own sizes (build_issue.register_row,
   2026-08-28) and must not be flattened, so the blanket bump now skips it.
   Everything else on the page - deal-page fact tables, people tables -
   still gets the readability notch. */
.wrap table:not(.tight) td:not(.rowcell) { font-size:var(--fs-body) !important; line-height:1.7 !important;
                  padding-top:13px !important; padding-bottom:13px !important; }
/* class="tight" opts a table OUT of that bump and lets its own inline
   values stand. Added 2026-08-28: the deal page's fact grid and the
   metric fields inside each company card were being forced to 13px of
   padding a side and 1.7 line-height no matter what they asked for, so
   a page of eight short fields could not be read without scrolling. */
/* (Removed 2026-08-28.) This used to undo the bump above for cells inside
   a register row, but "line-height:inherit !important" also threw away the
   row's OWN line-heights - the headline's 1.45, the tag's compact box -
   and replaced them with the page default. On a phone, where the tag sits
   on its own line, that surfaced as a band of white space around it (Kyle:
   "a ton of white space around the deal type ... just makes it wonky").
   The row's inner table now carries class="tight" and is skipped by the
   bump outright, so its inline values simply stand. */
/* Room between sector groups too - the complaint was the whole rhythm
   ("I don't want to look like I'm reading an Excel spreadsheet"), not the
   type alone, and tight rows under tight headers is what makes a list
   read as a table. */
.wrap table { margin-bottom:2px; }
.wrap .rowtail { color:var(--ink-3) !important; }

/* HOVER, REBUILT (Kyle, 2026-08-28: the flat tint "looks kind of legacy
   website feel ... vs modern / sleek").

   What made it read dated was not the colour, it was the SHAPE: a solid
   rectangle switching on instantly, spanning the full column, with two
   hard vertical edges where the tint stopped. That is a 2010 table row.

   Three changes, none of them louder than the old one:

     1. The tint FADES OUT to the right instead of ending in a straight
        edge, so the highlight has no boundary to notice. It reads as
        light falling across the row rather than a box drawn around it.
     2. A 2px accent rail on the left, the same mark the current deal
        already carries on its own page - so hover previews the state you
        land in.
     3. It ANIMATES. 160ms is below the threshold where a reader
        registers a delay but above the point where a change feels like a
        flicker; instant state changes are most of what makes an
        interface feel cheap.

   Plus the names deepen to full ink and the drawn colon brightens - the
   row answers in three quiet ways at once rather than one loud one.

   @media (hover:hover) so a phone never gets a stuck highlight after a
   tap. Email clients load none of this. */
.wrap table td.rowcell { position:relative; }
/* The accent rail is GONE (Kyle, 2026-08-28). It went through the gutter
   fix and the butting-against-the-text fix and still read as one element
   too many next to a wash that already says "this row". The wash and the
   drawn colon carry it; a hover does not need three signals. */
/* The row's content rides above the wash. */
.wrap td.rowcell > a.rowlink { position:relative; z-index:1; }
/* THE TERMINAL DOT'S LABEL (Kyle, 2026-08-28: "I don't see where the word
   is going to hover"). The browser's own title= tooltip was invisible in
   practice - a second of delay, OS styling, and a 6px hover target nobody
   can land on. This is ours: instant, in our type, and the hit area is
   padded out to ~20px while background-clip keeps the visible dot at 6px. */
/* THE TERMINAL DOT IS GONE (Kyle, 2026-08-29): "remove the dot colour
   coding system entirely to create a cleaner typographic-first aesthetic."
   With it went .tgdot, its hover tooltip, and the 126px of right padding
   every headline carried to keep long names from running underneath it -
   so a headline now has the full column to wrap into. The classification
   itself is untouched: deal_type still rides in the CSV and still drives
   the scoreboard's tallies. */
/* THE WASH IS ITS OWN LAYER, and it starts LEFT OF THE TEXT (Kyle,
   2026-08-28). Painted as the cell's background it could only ever begin
   at the cell's edge - the same line the first character sits on - so the
   highlight and the type started together and the eye read a block. On
   its own absolutely-positioned layer it can reach back into the gutter,
   so the light arrives before the words do.
   Radial, not linear: a linear fade still leaves a rectangle with hard
   top and bottom edges and two right-angled corners, which is what kept
   reading as "a little square" however soft the horizontal ramp got.
   z-index:-1 was WRONG and made it invisible (Kyle: "I can't see
   anything when I hover over now"): .wrap paints an opaque white
   background, and a negative z-index sends the layer behind THAT, not
   just behind the row's text. The layer sits at z-index:0 and the row's
   own anchor is lifted to 1 instead. */
/* THE DATABASE ROW (Kyle, 2026-09-16, "a premium data terminal, not a
   wacky marketing site"). The radial mint wash and the ink-deepening of
   the names are RETIRED. On hover the whole block takes one flat,
   ultra-light grey - a row selection - the cursor is a pointer, and the
   only thing that moves is the chevron at the end of the description
   (.cue, 3px to the right). No text or glyph changes colour. Still on
   its own layer so the tint reaches 12px past the text on both sides,
   like a selected row rather than a highlighted word. */
.wrap table td.rowcell::after { content:""; position:absolute;
  left:-12px; right:-12px; top:0; bottom:0; z-index:0; pointer-events:none;
  border-radius:3px; background:var(--surface);
  opacity:0; transition:opacity .16s ease; }
.wrap td.rowcell > a.rowlink { cursor:pointer; }
.wrap .cue { display:inline-block; transition:transform .2s ease; }
@media (hover:hover) {
  .wrap table tr:hover td.rowcell::after { opacity:1; }
  .wrap table tr:hover .cue { transform:translateX(3px); }
}
/* THE DEAL PAGE'S SECTOR > SUBSECTOR KICKER (Kyle, 2026-09-22: "I didn't
   realize that the sector and subsector are also clickable"). They were
   styled exactly like the dead meta text beside them, so nothing said
   they were links. Now they carry the site's link behaviour - teal on
   hover - and the chevron between them goes teal and slides the same 3px
   a register row's .cue does, so the whole kicker reacts as one control
   and the parent > child relationship is legible at rest. */
/* THE SUBSECTOR CHIPS on a sector page (Kyle, 2026-09-22). Deliberately
   identical to landing.html's .taxchip - one chip look across both
   surfaces, because they mean the same thing in both places. */
.substrip { padding-top:14px; }
.sublab { font-family:var(--mono); font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-2);
          text-transform:uppercase; color:var(--ink-3); padding-bottom:6px; }
.subnote { letter-spacing:0; text-transform:none; color:var(--ink-3); font-family:var(--sans); font-size:var(--fs-table); font-weight:400; }
.subnote a { color:var(--teal); text-decoration:none; }
/* DENSER (Kyle, 2026-09-24: "a little bit too large and clunky. Shrink
   those down, removing the white space so it feels more data-dense"):
   4px gaps, 4/6px padding, 10.5px type, a 2px volume bar.
   THE SUBSECTOR TILES (Kyle, 2026-09-24, option C): each subsector a
   green-bordered tile in a tight 2/3-column grid, its name in the data
   face in CAPS (the landing page's sector grammar), count right, and a
   volume bar along the bottom edge sized to its share of the sector's
   biggest subsector - which subsectors carry the sector reads at a glance.
   Tiles are still the click-to-filter controls for the feed below. */
.subgrid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:#D5DAE1;
            border-top:1px solid #D5DAE1; border-bottom:1px solid #D5DAE1; }
@media (min-width:860px) { .subgrid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:420px) { .subgrid { grid-template-columns:1fr; } }
.subrow { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
          position:relative; overflow:hidden; margin:0; padding:6px 10px 6px 10px;
          border:0; border-radius:0; background:var(--paper);
          color:var(--teal); text-decoration:none; cursor:pointer;
          font-size:var(--fs-table); font-weight:600; line-height:1.3;
          transition:background .16s ease, border-color .16s ease; }
/* MATRIX, TITLE CASE (Kyle, 2026-09-25): hairline grid, no boxes or
   volume bars; subsector names in the text face, title case. */
.subrow b { font-family:var(--font-data); font-size:var(--fs-data); font-weight:400; letter-spacing:0;
            font-variant-numeric:tabular-nums; color:var(--ink); flex:none; min-width:2ch; text-align:right; }
.subrow .cue { display:none; }
.subrow-off { color:var(--ink-3); }
.subrow.on { background:var(--surface); box-shadow:inset 2px 0 0 var(--teal); }
@media (hover:hover) {
  .subrow:hover { background:var(--surface); }
}
.erow.erow-hide { display:none; }   /* .erow sets display:block later in the sheet */
/* THE LIST FILTER (Kyle, 2026-09-23) - a terminal-style input: hairline
   box, mono count to the right, "/" focuses it, Esc clears it. */
.efilter { display:flex; align-items:center; gap:12px; margin:0 0 6px 0; }
.efilter .ui-search { flex:1; }
.efn { font-family:var(--font-data); font-size:var(--fs-data); color:var(--ink-3); white-space:nowrap; }
.taxo { color:var(--ink-3); text-decoration:none;
        transition:color .15s ease; }
.taxosub { letter-spacing:var(--ls-1); text-transform:none; }
/* THE CHEVRON IS LEGIBLE (Kyle, 2026-09-23: "make the chevron between
   the sector and subsector more prominent ... it's fine for it to be a
   little bit larger so you can tell the relationship"). 18px bold against
   the 9.5px chips either side - the relationship is the point. */
.taxosep { display:inline-block; color:var(--teal); font-weight:700; font-size:var(--fs-name);
           line-height:11px; vertical-align:-1px; padding:0 7px;
           transition:transform .2s ease; }
/* the kicker's chips are LINKS: mint wash + deep border on hover, like
   the landing map's chips and the sector page's subsector chips */
.kchip { margin-left:0; vertical-align:1px; text-decoration:none;
         transition:background .15s ease, border-color .15s ease; }
@media (hover:hover) {
  a.kchip:hover { background:var(--surface); border-color:var(--teal); color:var(--teal); }
}
@media (hover:hover) {
  .taxo:hover { color:var(--teal); }
  .taxo:hover + .taxosep, .taxosep:hover { transform:translateX(2px); }
}
/* THE ENTITY ROW - sector, subsector, firm and company pages (Kyle,
   2026-09-23: "hover effect here with the chevron on all the listed
   deals and entities"). The register's database-row idiom, ported: flat
   grey selection on hover, teal chevron after the name slides 3px, and
   the taxonomy marks are the SAME chip the email rows wear (bi.CHIP_*),
   not the old grey caps.
   THE SITE CHIP IS THE SYSTEM'S (2026-09-28): a Rule border, teal type
   only when the chip is itself a link - the email and landing chips keep
   bi.CHIP_*, which carry a colour the site set does not have. */
/* .erow is now site_ui's .ui-row (2026-10-02); only its date float lives here */
.erow .erow-when { float:right; margin-left:12px; }
.erow .ui-role { margin-left:6px; }
/* The hover colon is DRAWN, not typed (Kyle, 2026-08-28: "it's
   reflecting in square colons, they should be round"). Helvetica cuts its
   period and colon as RECTANGLES; Arial cuts them round. Which one a Mac
   resolves from "Helvetica,Arial,sans-serif" decides the shape, so the
   glyph was never ours to control. Two radius-50% dots - one element, one
   box-shadow - are round in every font, and being sized in em they still
   scale with whatever text they follow. */
/* The DRAWN HOVER COLON on rows (.rowdesc::after / .rowlink.nodesc::after,
   2026-08-28 -> 09-16) is RETIRED: the row's cue is now the typed teal
   chevron register_row prints on both surfaces (bi.LINK_CUE). */
/* THE TAP CUE WEARS THE MARK IT DESCRIBES (Kyle, 2026-08-29). In the
   inbox this line ends with the up-right arrow, because that is the cue
   the email's own rows carry. A PAGE has hover, so here it ends with the
   register's drawn colon instead - and unlike the rows, it is VISIBLE at
   rest, in a subdued mint, because this line is the one place the mark
   has to be seen before it is understood. Hovering the sentence takes it
   to full Signal, which is exactly what hovering a row does. Same
   geometry as .rowdesc::after, so the two read as one mark. */
/* THE COLON IS THE ONLY THING THAT MOVES (Kyle, 2026-09-11). The border
   and the letters hold perfectly still; the brand colon snaps from teal
   to full SIGNAL with a short glow. Same gesture the register rows make
   on hover, so the button belongs to the same family rather than
   inventing a second interaction. Web only - no inbox honours :hover,
   which is why the email prints the colon flat and relies on the shape. */
/* .ghostbtn .brand-colon and its :hover RETIRED 2026-09-13 (Kyle: no
   colon, no spans, no neon hover). The button is text in an outline. */

/* VERTICAL-ALIGN MUST EQUAL THE BOX-SHADOW OFFSET. The primary box is the
   TOP dot and the shadow draws the BOTTOM one, so vertical-align:N with
   shadow offset N lands the lower dot's bottom edge exactly on the text
   baseline - .tapcue has said so since 2026-08-29. Setting the shadow to
   .46em while leaving the alignment at .34em (2026-09-11) dropped the
   whole colon .12em BELOW the line, which is what Kyle saw. Change one,
   change both; check_core now asserts they match. */
/* .tapcue and its drawn colon RETIRED 2026-09-16 with the rest of the
   site's colons (the web tap-hint sentence itself left on 09-11). */
/* ON THE BASELINE (Kyle, 2026-08-29: "it should align with the words
   more, like it's part of the sentence"). vertical-align now EQUALS the
   box-shadow offset, which lands the lower dot's bottom edge on the text
   baseline and the upper dot inside the cap height - where a typeset
   colon sits. Before, the offset (0.60em) exceeded the lift (0.40em), so
   the lower dot hung into the descender and the pair read as floating
   past the words rather than punctuating them. Same fix, same reasoning
   as the landing page's .pop::after. */
/* At rest the colon is there but quiet, so a reader learns the mark
   without it shouting on every row; hovering brightens it to signal and
   tints the row (Kyle, 2026-08-28: "maybe they kind of brighten up when
   you hover over it"). This is also why the site needs NO arrow - the
   colon IS the site's affordance, and the email's arrow exists only
   because email has no hover to reveal anything. */
/* (row hover colon rule retired 2026-09-16 - see .cue above) */
/* Header search icon (Kyle, 2026-08-27): thin outline, nav grey, darkens
   to the deep teal on hover so it reads interactive. */
.nav-search svg { stroke:#7A8290; transition:stroke .15s ease; }
.nav-search:hover svg { stroke:var(--signal-deep); }
/* Crumb hover (Kyle, 2026-09-01: "a very light hover over effect").
   !important because the links carry inline colors (the old rule here
   silently lost to them and never showed). Ink text + the same faint
   mint tint the share menu uses; negative margin keeps the tint from
   shifting layout. */
.glyph { font-weight:700; line-height:0; }
.crumb { padding:3px 7px; margin:-3px -7px; border-radius:4px;
          transition:background .12s ease, color .12s ease; }
.crumb:hover { color:var(--ink) !important; background:var(--surface); }
.actbtn:hover { border-color:var(--signal-deep); color:var(--teal); }
/* Company names in the data cards link out to the company's own site.
   Underlined faintly at rest so they read as links, fully on hover. */
.colink { text-decoration:none;
  border-bottom:1px solid rgba(15,118,110,0.32);
  transition:border-color .12s ease, background .12s ease; }
.colink:hover { border-bottom-color:var(--teal); background:var(--surface); }
/* Share popover: light tint on the hovered item (Kyle, 2026-08-26). */
.tshare-menu a { border-radius:5px; }
.tshare-menu a:hover { background:var(--surface); }