/* ==========================================================================
   Fund component library.
   Layers on top of styles.css — uses its tokens and type scale.
   Interior pages sit in the page box from styles.css: one column, one --pad
   inset, and the two vertical rules run the whole height of the page.
   ========================================================================== */

/* ---------- Interior page shell ----------
   The shell used to be 96px dotted rail | column | rail inside the frame, which
   put a second border and a second inset between the frame edge and the body
   copy — four different left edges on one page once the nav and footer were
   counted. The page box in styles.css is now the only edge, so the shell is a
   single column and the rails are off, and they stay off — the dot rails belong
   OUTSIDE the frame, in the gutters, and styles.css draws them there. Switching
   these back on puts dots inside the vertical rules and pushes body copy 96px
   off the wordmark's edge. Don't. */
.shell{display:grid;grid-template-columns:minmax(0,1fr)}
.shell-rail{display:none}
.shell-col{min-width:0}

/* ---------- Page hero ---------- */
.pg-hero{padding:56px var(--pad) 48px;border-bottom:1px solid var(--border)}
.pg-eyebrow{font-family:var(--font-eyebrow);font-size:12px;line-height:20px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:20px}
.pg-hero h1{font-size:40px;line-height:40px;letter-spacing:0}
.pg-hero .lead{color:var(--muted);font-size:20px;line-height:28px;margin-top:20px;max-width:64ch}
.pg-hero .actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}

.sec{padding:56px var(--pad);border-bottom:1px solid var(--border)}
.sec:last-child{border-bottom:none}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.sec-head h2{font-size:32px;line-height:34px}
.sec-head .aside{color:var(--muted-2);font-size:14px;line-height:20px}
.sec-sub{color:var(--muted);font-size:16px;line-height:24px;max-width:70ch;margin-top:-16px;margin-bottom:32px}

/* ---------- Eyebrow / label ---------- */
.label{font-size:14px;line-height:20px;color:var(--muted-2);margin-bottom:24px}
.mono{font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:.02em}

/* ---------- Badges ---------- */
.badge-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:0;
  font-size:12px;line-height:16px;font-weight:500;background:var(--surface);color:var(--text);white-space:nowrap}
.badge-pill.ghost{background:transparent;border:1px solid var(--border-2);color:var(--muted)}
.badge-pill.green{background:rgba(255,246,149,.10);color:var(--accent)}
/* Legacy names: .green is the emphasis pill, .blue the neutral one. One hue. */
.badge-pill.blue{background:rgba(250,250,249,.05);color:var(--muted);border-color:var(--border-2)}
.badge-pill.amber{background:rgba(250,250,249,.14);color:var(--to-grey-300)}
.badge-pill.red{background:rgba(255,246,149,.14);color:var(--accent)}
.badge-pill .dot{width:6px;height:6px;border-radius:0;background:currentColor}

/* ---------- Filter pills ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.filter{height:36px;display:inline-flex;align-items:center;padding:8px 16px;border-radius:0;
  background:var(--chip);color:var(--muted);font-size:14px;line-height:20px;font-weight:500;
  border:1px solid transparent;transition:background .18s,color .18s,border-color .18s}
.filter:hover{color:var(--text);border-color:var(--border-2)}
.filter.on{background:var(--white);color:var(--surface)}

/* ---------- Search field ---------- */
.search{display:flex;align-items:center;gap:8px;width:320px;max-width:100%;height:40px;
  padding:0 12px;border-radius:0;background:var(--chip);border:1px solid var(--border);margin-bottom:24px}
.search svg{width:16px;height:16px;color:var(--muted-2);flex:none}
.search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--font-body);font-size:14px}
.search input::placeholder{color:var(--muted-2)}

/* ---------- Card grids (rule-separated, like the live site) ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr)}
.ruled > *{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:32px}
.ruled.grid-3 > *:nth-child(3n),.ruled.grid-4 > *:nth-child(4n),.ruled.grid-2 > *:nth-child(2n){border-right:none}

/* ---------- Company card ---------- */
.co-card{display:flex;flex-direction:column;gap:0;transition:background .2s}
.co-card:hover{background:rgba(250,250,249,.02)}
.co-logo{width:56px;height:56px;border-radius:0;background:var(--surface);display:flex;align-items:center;
  justify-content:center;font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--text);
  text-transform:uppercase;flex:none;overflow:hidden}
.co-logo img{width:32px;height:32px;object-fit:contain}
.co-card h3{font-size:18px;line-height:24px;font-weight:600;margin-top:24px}
.co-meta{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted-2);margin-top:4px;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.co-meta .sep{opacity:.5}
.co-card p{color:var(--muted);font-size:16px;line-height:24px;margin-top:12px}
.co-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}

/* ---------- Person card ---------- */
.person{display:flex;flex-direction:column}
/* Square, on no ground, inside a one-pixel hairline. Nothing here is round. */
.person img,.person .ph{width:100%;aspect-ratio:1;object-fit:cover;border-radius:0;
  background:none;border:1px solid rgba(250,250,249,.22)}
.person .ph{display:flex;align-items:center;justify-content:center;color:#3a342e}
.person .nm{font-size:16px;line-height:24px;margin-top:16px}
.person .rl{color:var(--muted-2);font-size:14px;line-height:20px;margin-top:2px}
.person .bio{color:var(--muted);font-size:14px;line-height:20px;margin-top:10px}
.person .links{display:flex;gap:10px;margin-top:12px}
.person .links a{color:var(--muted-2);font-size:12px;line-height:16px;transition:color .18s}
.person .links a:hover{color:var(--text)}

/* ---------- Metric tiles ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.metric .num{font-family:var(--font-head);font-weight:700;font-size:48px;line-height:1.04;
  letter-spacing:0;text-transform:uppercase}
.metric .lbl{color:var(--muted);font-size:16px;line-height:24px;margin-top:10px}
.metric .note{color:var(--muted-2);font-size:12px;line-height:16px;margin-top:6px}

/* ---------- Key/value spec list ---------- */
.kv{display:flex;flex-direction:column}
.kv .row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--hairline);font-size:14px;line-height:20px}
.kv .row:last-child{border-bottom:none}
.kv .k{color:var(--muted-2)}
.kv .v{color:var(--text);text-align:right}

/* ---------- Data table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.tbl th{text-align:left;font-weight:500;color:var(--muted-2);padding:12px 16px;border-bottom:1px solid var(--border);
  font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--hairline);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:rgba(250,250,249,.02)}
.tbl .num{font-family:var(--font-mono);text-align:right;white-space:nowrap}
.tbl-wrap{overflow-x:auto}

/* ---------- Numbered process steps ---------- */
.steps-list{display:flex;flex-direction:column}
.step-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:24px;
  padding:32px 0 32px 20px;border-bottom:1px solid var(--border)}
.step-row:last-child{border-bottom:none}
.step-row .idx{font-family:var(--font-head);font-weight:700;font-size:32px;line-height:32px;color:var(--faint)}
.step-row h3{font-size:18px;line-height:24px;font-weight:600}
.step-row p{color:var(--muted);font-size:16px;line-height:24px;margin-top:10px;max-width:70ch}
.step-row .meta{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Timeline ---------- */
.tl{display:flex;flex-direction:column;position:relative;padding-left:24px}
.tl::before{content:"";position:absolute;left:3px;top:6px;bottom:6px;width:1px;background:var(--border-2)}
.tl-item{position:relative;padding:0 0 32px}
.tl-item::before{content:"";position:absolute;left:-24px;top:6px;width:7px;height:7px;border-radius:0;
  background:var(--muted-2);box-shadow:0 0 0 3px var(--bg)}
.tl-item.on::before{background:var(--accent)}
.tl-item .when{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted-2)}
.tl-item h4{font-size:16px;line-height:24px;font-weight:600;margin-top:4px}
.tl-item p{color:var(--muted);font-size:14px;line-height:20px;margin-top:6px;max-width:70ch}

/* ---------- Repo / agent / memo cards ---------- */
.tile{border:1px solid var(--border);border-radius:0;padding:24px;background:var(--card);
  display:flex;flex-direction:column;gap:12px;transition:border-color .2s,background .2s}
.tile:hover{border-color:var(--border-2);background:#191512}
.tile .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tile h3{font-size:16px;line-height:24px;font-weight:600}
.tile p{color:var(--muted);font-size:14px;line-height:20px}
.tile .foot{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:8px;
  font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted-2)}
.tile .foot .lang{display:inline-flex;align-items:center;gap:6px}
.tile .foot .lang .dot{width:8px;height:8px;border-radius:0}
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile-grid.two{grid-template-columns:repeat(2,1fr)}

/* ---------- Callout ---------- */
.callout{border:1px solid var(--border-2);border-left:2px solid var(--accent);border-radius:0;
  padding:20px 24px;background:var(--card);margin:24px 0}
.callout h4{font-size:16px;line-height:24px;font-weight:600;margin-bottom:6px}
.callout p{color:var(--muted);font-size:15px;line-height:23px}

/* ---------- Quote ---------- */
.quote{border-top:1px solid var(--border);padding-top:32px;margin-top:8px}
.quote blockquote{font-size:20px;line-height:28px;max-width:60ch}
.quote .by{display:flex;align-items:center;gap:12px;margin-top:20px}
.quote .by img{width:36px;height:36px;border-radius:0;object-fit:cover}
.quote .by .nm{font-size:14px;line-height:20px}
.quote .by .rl{color:var(--muted-2);font-size:12px;line-height:16px}

/* ---------- Prose (long form) ---------- */
.prose{max-width:720px}
.prose > * + *{margin-top:20px}
.prose h2{font-size:24px;line-height:30px;font-weight:600;margin-top:40px}
.prose h3{font-size:18px;line-height:24px;font-weight:600;margin-top:32px}
.prose p,.prose li{color:var(--muted);font-size:16px;line-height:26px}
.prose strong{color:var(--text);font-weight:600}
.prose ul,.prose ol{padding-left:20px;display:flex;flex-direction:column;gap:8px}
.prose li{padding-left:4px}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint)}
.prose a:hover{text-decoration-color:var(--text)}
.prose code{font-family:var(--font-mono);font-size:13px;background:var(--surface);padding:2px 6px;border-radius:0;color:var(--text)}
.prose pre{background:var(--chip);border:1px solid var(--border);border-radius:0;padding:16px 20px;overflow-x:auto}
.prose pre code{background:none;padding:0;font-size:12.5px;line-height:20px;display:block;white-space:pre}
.prose hr{border:none;border-top:1px solid var(--border);margin:32px 0}
.prose blockquote{border-left:2px solid var(--border-2);padding-left:20px;color:var(--muted)}

/* ---------- Table of contents ---------- */
.toc{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}
.toc .t{font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.toc a{display:block;color:var(--muted);font-size:14px;line-height:20px;padding:5px 0;transition:color .18s}
.toc a:hover,.toc a.on{color:var(--text)}

/* ---------- Split layout (body + sidebar) ---------- */
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0}
.split > *{min-width:0}
.split > *{padding:40px}
.split > * + *{border-left:1px solid var(--border)}
.split.rev{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}

/* ---------- Logo wall ---------- */
.logo-wall{display:grid;grid-template-columns:repeat(5,1fr)}
.logo-wall > div{aspect-ratio:2.2;display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);color:var(--muted);
  font-size:15px;font-weight:600;gap:8px}
.logo-wall > div:nth-child(5n){border-right:none}
/* size the marks — without this an SVG renders at its intrinsic width and
   blows the cell out (was 352px each). */
.logo-wall img,.logo-wall svg{width:24px;height:24px;object-fit:contain;flex:none}

/* ---------- Forms ---------- */
.form{display:flex;flex-direction:column;gap:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;line-height:20px;font-weight:500;color:var(--muted)}
.field label .opt{color:var(--muted-2);font-weight:400;float:right}
.field input,.field textarea,.field select{
  background:var(--chip);border:none;box-shadow:inset 0 0 0 1px var(--border-2);border-radius:0;
  padding:10px 12px;color:var(--text);font-family:var(--font-body);font-size:14px;line-height:20px;outline:none;
  transition:box-shadow .18s}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:inset 0 0 0 1px var(--muted-2)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field textarea{min-height:116px;resize:vertical}
.field .hint{font-size:12px;line-height:16px;color:var(--muted-2)}
.form-note{color:var(--muted-2);font-size:12px;line-height:18px}

/* ---------- Accordion ---------- */
.acc-item{border-bottom:1px solid var(--border)}
.acc-item:first-child{border-top:1px solid var(--border)}
.acc-q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;text-align:left;
  padding:20px 0;font-size:16px;line-height:24px;font-weight:600;color:var(--text)}
.acc-q .ico{flex:none;width:18px;height:18px;position:relative}
.acc-q .ico::before,.acc-q .ico::after{content:"";position:absolute;background:var(--muted);border-radius:0;transition:transform .25s,opacity .25s}
.acc-q .ico::before{top:8px;left:1px;width:16px;height:2px}
.acc-q .ico::after{left:8px;top:1px;width:2px;height:16px}
.acc-item.open .acc-q .ico::after{transform:rotate(90deg);opacity:0}
.acc-a{max-height:0;overflow:hidden;transition:max-height .35s}
.acc-a p{color:var(--muted);font-size:15px;line-height:24px;padding:0 40px 20px 0;max-width:72ch}

/* ---------- CTA band ---------- */
.cta-band{padding:96px var(--pad);text-align:center;border-top:1px solid var(--border)}
.cta-band h2{font-family:var(--font-head);font-weight:700;font-size:48px;line-height:44px;
  letter-spacing:0;text-transform:uppercase;margin-bottom:16px}
.cta-band p{color:var(--muted);font-size:16px;line-height:24px;max-width:56ch;margin:0 auto 28px}
.cta-band .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}


/* ---------- Empty state ---------- */
.empty{padding:64px 0;text-align:center;color:var(--muted-2);font-size:14px;line-height:20px}

/* ---------- Load more ---------- */
.load-more{width:100%;height:80px;display:flex;align-items:center;justify-content:center;
  border-top:1px solid var(--border);font-family:var(--font-mono);font-size:14px;line-height:20px;
  font-weight:500;color:var(--muted);letter-spacing:.06em;transition:color .18s}
.load-more:hover{color:var(--text)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .ruled.grid-3 > *:nth-child(3n),.ruled.grid-4 > *:nth-child(4n){border-right:1px solid var(--border)}
  .ruled.grid-3 > *:nth-child(2n),.ruled.grid-4 > *:nth-child(2n){border-right:none}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .split,.split.rev{grid-template-columns:minmax(0,1fr)}
  .split > *{padding-left:0;padding-right:0}
  .split > * + *{border-left:none;border-top:1px solid var(--border)}
  .tile-grid,.tile-grid.two{grid-template-columns:repeat(2,1fr)}
  .logo-wall{grid-template-columns:repeat(3,1fr)}
  .logo-wall > div:nth-child(5n){border-right:1px solid var(--hairline)}
  .logo-wall > div:nth-child(3n){border-right:none}
  .toc{position:static}
  .pg-hero h1{font-size:32px;line-height:34px}
}
@media (max-width:620px){
  .grid-2,.grid-3,.grid-4,.metrics,.tile-grid,.tile-grid.two{grid-template-columns:1fr}
  .ruled > *{border-right:none!important;padding:24px}
  .logo-wall{grid-template-columns:repeat(2,1fr)}
  .logo-wall > div:nth-child(3n){border-right:1px solid var(--hairline)}
  .logo-wall > div:nth-child(2n){border-right:none}
  .form-row{grid-template-columns:1fr}
  .step-row{grid-template-columns:40px minmax(0,1fr);gap:16px;padding-left:12px}
  .cta-band h2{font-size:32px;line-height:32px}
  .search{width:100%}
}

/* ---------- Founder assistant trigger (UI not implemented) ---------- */
.ask-trigger{display:inline-flex;align-items:center;gap:8px;height:40px;padding:10px 16px;border-radius:0;
  background:var(--surface);color:var(--text);font-size:14px;line-height:20px;font-weight:500;
  border:1px solid var(--border-2);transition:background .18s,border-color .18s;cursor:pointer}
.ask-trigger:hover{background:#262220;border-color:var(--muted-2)}
.ask-trigger .spark{width:16px;height:16px;flex:none;color:var(--accent)}
.ask-trigger.block{width:100%;justify-content:flex-start;height:auto;padding:14px 16px;color:var(--muted-2)}
.ask-trigger.sm{height:32px;padding:6px 12px;font-size:13px}
.ask-bar{display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px;border-radius:0;
  background:var(--chip);border:1px solid var(--border-2);color:var(--muted-2);font-size:14px;cursor:pointer;
  transition:border-color .18s}
.ask-bar:hover{border-color:var(--muted-2)}
.ask-bar .kbd{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--faint);
  border:1px solid var(--border-2);border-radius:0;padding:2px 6px}

/* ==========================================================================
   Corner brackets — 6x6 marks that fade in on hover.
   Matches the original: four L-shaped corners at opacity 0 until hover.
   Add class `brackets` (main.js injects the four spans).
   ========================================================================== */
.brackets{position:relative}
.brackets > .bk{
  position:absolute;width:6px;height:6px;opacity:0;pointer-events:none;
  transition:opacity .22s ease;border-style:solid;border-width:0;
  border-color:var(--muted);z-index:2;
}
.brackets > .bk-tl{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.brackets > .bk-tr{top:-1px;right:-1px;border-top-width:1px;border-right-width:1px}
.brackets > .bk-bl{bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px}
.brackets > .bk-br{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}
.brackets:hover > .bk,.brackets:focus-visible > .bk,.brackets.on > .bk{opacity:1}
@media (prefers-reduced-motion:reduce){ .brackets > .bk{transition:none} }


/* Merged sections — a page absorbed into a larger one keeps a visible seam */
@media (max-width:768px){ }