/* ==========================================================================
   LP-facing pages — track-record.html · fund-iii.html · case-studies.html
   Layers on styles.css + css/vc.css. Page-only rules; nothing here overrides
   the shared component library.
   ========================================================================== */

/* ---------- Wholesale investor notice (top of every LP page) ---------- */
.lp-notice{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px var(--pad);
  border-bottom:1px solid var(--border);
  background:rgba(250,250,249,.05);
}
.lp-notice .ico{
  flex:none;width:20px;height:20px;color:var(--to-grey-300);margin-top:2px;
}
.lp-notice .bd{min-width:0}
.lp-notice .t{
  font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--to-grey-300);
}
.lp-notice p{color:var(--muted);font-size:14px;line-height:21px;margin-top:6px;max-width:82ch}
.lp-notice p + p{margin-top:8px}
.lp-notice strong{color:var(--text);font-weight:500}
/* The same notice closing a page instead of gating it — investors.html, which
   dropped its long "Important information" section and ends on this. Only the
   seal changes: it has to face the block above it, since a border-bottom under
   the last thing on the page draws a rule that looks like it belongs to the
   footer. A little more air top and bottom, because nothing follows it. */
.lp-notice.is-end{
  border-bottom:0;border-top:1px solid var(--border);
  padding-top:28px;padding-bottom:28px;
}

/* ---------- Full disclaimer block (bottom of every LP page) ---------- */
.lp-disclaimer{padding:48px var(--pad) 56px;border-top:1px solid var(--border);background:var(--chip)}
.lp-disclaimer .t{
  font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:20px;
}
.lp-disclaimer .dl{display:flex;flex-direction:column;gap:14px;max-width:88ch}
.lp-disclaimer .dl p{color:var(--muted-2);font-size:13px;line-height:20px}
.lp-disclaimer .dl p strong{color:var(--muted);font-weight:500}
.lp-disclaimer .ent{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:11px;line-height:18px;color:var(--faint);
}

/* ---------- Display-scale numerals ---------- */
.dnum{
  font-family:var(--font-head);font-weight:700;letter-spacing:0;
  text-transform:uppercase;font-size:28px;line-height:28px;color:var(--text);
}
.dnum.lg{font-size:48px;line-height:44px}
.dnum.sm{font-size:20px;line-height:22px}
.dnum .x{font-size:.62em;color:var(--muted-2);margin-left:1px}

/* ---------- Paired fund cards ---------- */
.fund-pair{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.fund-pair .tile{gap:0}
.fund-card .hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fund-card .hd h3{font-size:20px;line-height:26px;font-weight:600}
.fund-card .vint{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted-2)}
.fund-card .fstats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px}
.fund-card .fstat .lbl{font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.fund-card .fstat .sub{color:var(--muted-2);font-size:12px;line-height:16px;margin-top:6px}
.fund-card .rest{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.fund-card .rest .li{display:flex;gap:10px;color:var(--muted);font-size:14px;line-height:21px}
.fund-card .rest .li .bt{flex:none;width:5px;height:5px;border-radius:0;background:var(--faint);margin-top:8px}
.fund-card .rest .li b{color:var(--text);font-weight:500}

/* ---------- Sortable table (MOIC) ---------- */
.lp-table{border-top:1px solid var(--border)}
.lp-table .tbl th button{display:inline-flex;align-items:center;gap:6px;color:inherit;font:inherit;
  letter-spacing:inherit;text-transform:inherit;transition:color .18s}
.lp-table .tbl th button:hover{color:var(--text)}
.lp-table .tbl th .arrow{opacity:0;transition:opacity .18s,transform .18s}
.lp-table .tbl th.sorted button{color:var(--text)}
.lp-table .tbl th.sorted .arrow{opacity:1}
.lp-table .tbl th.sorted.desc .arrow{transform:rotate(180deg)}
.lp-table .tbl td{vertical-align:middle}
.lp-table .tbl td.moic{text-align:right;white-space:nowrap;width:1%}
.lp-table .cn{display:flex;align-items:center;gap:12px;min-width:0}
.lp-table .cn .mk{width:28px;height:28px;border-radius:0;background:var(--surface);flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:12px;
  font-weight:700;text-transform:uppercase;color:var(--muted)}
.lp-table .cn .nm{font-weight:500;white-space:nowrap}
.lp-table td.mut{color:var(--muted)}
.lp-table .tfoot{padding:16px var(--pad) 0;color:var(--muted-2);font-size:12px;line-height:18px;max-width:80ch}

/* ---------- Not-disclosed marker ---------- */
.nd{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:11px;line-height:16px;color:var(--faint);white-space:nowrap;
}
.nd::before{content:"";width:14px;height:1px;background:var(--faint);flex:none}

/* ---------- Raise progress bar ---------- */
.raise{display:flex;flex-direction:column;gap:16px}
.raise .top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.raise .bar{height:10px;border-radius:0;background:var(--surface);overflow:hidden;position:relative}
.raise .bar i{display:block;height:100%;border-radius:0;background:var(--accent)}
.raise .scale{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--muted-2)}

/* ---------- Terms table ---------- */
.terms .kv .row{padding:16px 0;gap:24px;align-items:flex-start}
.terms .kv .k{flex:0 0 240px;color:var(--muted-2);font-size:14px;line-height:20px}
.terms .kv .v{flex:1;text-align:left;font-size:15px;line-height:22px}
.terms .kv .v .sub{display:block;color:var(--muted-2);font-size:13px;line-height:19px;margin-top:4px}

/* ---------- Fee & hurdle calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:0;border:1px solid var(--border);border-radius:0;overflow:hidden}
.calc .ctl{padding:28px;background:var(--chip);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:24px}
.calc .out{padding:28px;background:var(--card);min-width:0}
.calc .fl label{display:block;font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px}
.calc .fl .val{font-family:var(--font-mono);font-size:14px;color:var(--text);float:right;letter-spacing:0;text-transform:none}
.calc input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:0;background:var(--surface);outline:none}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:0;background:var(--white);cursor:pointer;border:none}
.calc input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:0;background:var(--white);cursor:pointer;border:none}
.calc input[type=number]{width:100%;background:var(--bg);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-mono);font-size:14px;line-height:20px;outline:none}
.calc input[type=number]:focus{box-shadow:inset 0 0 0 1px var(--muted-2)}
.calc .ladder{display:flex;flex-direction:column}
.calc .lr{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--hairline);font-size:14px;line-height:20px}
.calc .lr:last-child{border-bottom:none}
.calc .lr .k{color:var(--muted)}
.calc .lr .k small{display:block;color:var(--muted-2);font-size:12px;line-height:16px;margin-top:2px}
.calc .lr .n{font-family:var(--font-mono);color:var(--text);white-space:nowrap;text-align:right}
.calc .lr.neg .n{color:var(--to-grey-300)}
.calc .lr.tot{border-top:1px solid var(--border);border-bottom:none;margin-top:6px;padding-top:16px}
.calc .lr.tot .k{color:var(--text);font-weight:500}
.calc .lr.tot .n{color:var(--accent)}
.calc .res{display:flex;gap:32px;flex-wrap:wrap;margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.calc .res .b .lbl{font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.calc .assume{margin-top:20px;color:var(--muted-2);font-size:12px;line-height:18px;max-width:70ch}

/* ---------- Benefit / construction tiles ---------- */
.b-num{font-family:var(--font-head);font-weight:700;font-size:14px;line-height:20px;color:var(--faint);letter-spacing:0}

/* ---------- Contact people ---------- */
.ppl{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ppl .person{border:1px solid var(--border);border-radius:0;padding:24px;background:var(--card)}
.ppl .person .av{width:52px;height:52px;border-radius:0;background:var(--surface);display:flex;align-items:center;
  justify-content:center;font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--muted);text-transform:uppercase}
.ppl .person .av{overflow:hidden}
/* A person card can carry a portrait instead of initials. Square with a hairline,
   the same treatment as the article byline and the founder cluster. */
.ppl .person img.av{object-fit:cover;border:1px solid var(--border-2);background:none}
.ppl .person .nm{margin-top:18px;font-size:18px;line-height:24px;font-weight:600}
.ppl .person .rl{color:var(--muted-2);font-size:14px;line-height:20px;margin-top:2px}
.ppl .person .bio{color:var(--muted);font-size:14px;line-height:21px;margin-top:12px}
.ppl .person .em{margin-top:16px;font-family:var(--font-mono);font-size:13px;line-height:20px;color:var(--text);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint);display:inline-block}
.ppl .person .em:hover{text-decoration-color:var(--text)}

/* Photo-led variant. The portrait becomes a column running the full height of
   the card and sitting flush on its left edge, so the card's own padding moves
   onto .txt and the hairline that used to frame the avatar becomes the divide
   between photo and copy. A modifier, not a change to .ppl — fund-iii.html uses
   the base and keeps its 52px avatar.

   The column width and the card's min-height are one decision, not two:
   168 / 224 is 3:4, the source ratio, so the portrait fills the card exactly
   and object-fit:cover has nothing to crop. Setting the width alone is what
   made the faces look zoomed — a 192px column against the copy's natural 206px
   height is very nearly square, so cover threw away a quarter of the frame.
   Change one of the two numbers and change the other.

   An auto track will not do this job: height:100% against an indefinite row
   resolves to the intrinsic 300x400 and the card grows to 400px tall.

   These selectors must stay after the .ppl block above — several of them tie
   on specificity and win on source order alone. */
.ppl-photo .person{padding:0;display:grid;grid-template-columns:168px minmax(0,1fr);
  align-items:stretch;min-height:224px;overflow:hidden}
.ppl-photo .person img.av{width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  border:0;border-right:1px solid var(--border-2);align-self:stretch}
.ppl-photo .person .txt{padding:24px;min-width:0}
.ppl-photo .person .nm{margin-top:0}

/* ---------- Eligibility gate ---------- */
.gate{border:1px solid var(--border);border-radius:0;background:var(--card);padding:28px;max-width:760px}
.gate h3{font-size:18px;line-height:24px;font-weight:600}
.gate > p{color:var(--muted);font-size:15px;line-height:23px;margin-top:10px}
.gate .checks{display:flex;flex-direction:column;gap:2px;margin-top:22px}
.gate .ck{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--hairline);cursor:pointer}
.gate .ck:last-child{border-bottom:none}
.gate .ck input{flex:none;margin-top:3px;width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.gate .ck .tx{color:var(--muted);font-size:14px;line-height:21px}
.gate .ck .tx b{color:var(--text);font-weight:500}
.gate .verdict{margin-top:20px;padding:16px 18px;border-radius:0;background:var(--chip);border:1px solid var(--border);
  color:var(--muted);font-size:14px;line-height:21px}
.gate .verdict.ok{border-color:rgba(255,246,149,.35);background:rgba(255,246,149,.06)}
.gate .verdict.ok b{color:var(--accent);font-weight:500}
.gate .fine{margin-top:14px;color:var(--muted-2);font-size:12px;line-height:18px}

/* ==========================================================================
   Tranche timeline — cheques plotted against ownership
   ========================================================================== */
.tranche{border:1px solid var(--border);border-radius:0;background:var(--card);overflow:hidden}
.tranche .th{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 24px;border-bottom:1px solid var(--border);background:var(--chip)}
.tranche .th .t{font-size:14px;line-height:20px;font-weight:500}
.tranche .th .legend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--muted-2)}
.tranche .th .legend span{display:inline-flex;align-items:center;gap:6px}
.tranche .th .legend i{width:8px;height:8px;border-radius:0;display:inline-block}
.tranche .th .legend i.cap{background:var(--to-grey-400)}
.tranche .th .legend i.own{background:var(--accent)}

.tr-rail{position:relative;padding:32px 24px 0}
.tr-rail::before{content:"";position:absolute;left:24px;right:24px;top:60px;height:1px;background:var(--border-2)}
.tr-nodes{display:grid;gap:0;position:relative}
.tr-node{position:relative;padding:0 8px 24px;text-align:center}
.tr-node .dot{width:11px;height:11px;border-radius:0;background:var(--to-grey-400);margin:7px auto 0;
  box-shadow:0 0 0 4px var(--card);position:relative;z-index:1}
.tr-node.exit .dot{background:var(--accent)}
.tr-node.start .dot{background:var(--muted-2)}
.tr-node .when{font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--muted-2);margin-bottom:0}
.tr-node .ttl{font-size:13px;line-height:18px;font-weight:500;margin-top:14px}
.tr-node .amt{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--to-grey-400);margin-top:6px}
.tr-node .nd{margin-top:6px}
.tr-node .note{color:var(--muted-2);font-size:12px;line-height:17px;margin-top:6px}

.tr-own{padding:0 24px 24px}
.tr-own .cap{font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.tr-bars{display:grid;gap:0;height:124px;border-bottom:1px solid var(--border-2)}
.tr-bar{padding:0 10px;display:grid;grid-template-rows:24px minmax(0,1fr);height:100%}
.tr-bar .col{align-self:end;width:100%;background:linear-gradient(180deg,rgba(255,246,149,.55),rgba(255,246,149,.18));
  border-top:2px solid var(--accent);border-radius:0;min-height:2px}
.tr-bar.unk .col{height:100%;background:repeating-linear-gradient(135deg,rgba(120,113,108,.28) 0 5px,transparent 5px 10px);
  border-top:2px dashed var(--faint)}
.tr-bar .pc{align-self:start;font-family:var(--font-mono);font-size:12px;line-height:16px;text-align:center;color:var(--text)}
.tr-bar.unk .pc{color:var(--faint)}
.tr-axis{display:grid;gap:0;padding-top:10px}
.tr-axis > div{text-align:center;font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--muted-2);padding:0 6px}
.tranche .tf{padding:16px 24px;border-top:1px solid var(--border);background:var(--chip);
  color:var(--muted-2);font-size:12px;line-height:18px}

/* ---------- Revenue chart ---------- */
.chart{border:1px solid var(--border);border-radius:0;background:var(--card);overflow:hidden}
.chart .ch{padding:20px 24px;border-bottom:1px solid var(--border);background:var(--chip);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.chart .ch .t{font-size:14px;line-height:20px;font-weight:500}
.chart .ch .s{font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--muted-2)}
.chart .body{padding:24px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .cf{padding:14px 24px;border-top:1px solid var(--border);background:var(--chip);
  color:var(--muted-2);font-size:12px;line-height:18px}

/* ---------- Case study header ---------- */
.cs-head{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.cs-head .mk{width:56px;height:56px;border-radius:0;background:var(--surface);flex:none;display:flex;
  align-items:center;justify-content:center;font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--text)}
.cs-head .hd h2{font-size:32px;line-height:34px}
.cs-head .hd .sub{color:var(--muted);font-size:16px;line-height:24px;margin-top:8px;max-width:70ch}
.cs-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:32px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cs-strip > div{padding:24px 24px 24px 0;border-right:1px solid var(--border)}
.cs-strip > div:last-child{border-right:none}
.cs-strip > div + div{padding-left:24px}
/* The label over each figure is an eyebrow doing an eyebrow's job, so it takes
   the eyebrow face. It declared no font-family at all and fell through to the
   body face, which put 12px uppercase Neue Haas directly above a 38px numeral —
   near enough to the .sub caption underneath that the cell read as three lines
   of the same voice. Mono at .06em/500, matching .pg-eyebrow, separates the
   label from the number it labels. Line-height stays 16, not the eyebrow's 20:
   this sits in a bordered strip where four extra pixels per cell is height the
   row does not need. */
.cs-strip .lbl{font-family:var(--font-eyebrow);font-size:12px;line-height:16px;
  font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:10px}
/* Bigger than the base .dnum. The strip is a section's headline evidence, and
   at 28px the numerals read as caption weight against the h2 above them —
   under .dnum.lg's 48px, which is display scale for a single hero figure, not
   a row of four. .x is .62em so the suffix follows. */
.cs-strip .dnum{font-size:38px;line-height:36px}
.cs-strip .sub{color:var(--muted-2);font-size:12px;line-height:16px;margin-top:6px}

/* ---------- Inline link row ---------- */
.linkrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.linkrow .tile .ar{color:var(--muted-2);font-family:var(--font-mono);font-size:12px}
.linkrow .tile:hover .ar{color:var(--text)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .fund-pair{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr}
  .calc .ctl{border-right:none;border-bottom:1px solid var(--border)}
  .cs-strip{grid-template-columns:repeat(2,1fr)}
  .cs-strip > div:nth-child(2n){border-right:none}
  .cs-strip > div:nth-child(2n+1){padding-left:0}
  .cs-strip > div:nth-child(-n+2){border-bottom:1px solid var(--border)}
  .linkrow{grid-template-columns:1fr}
}
@media (max-width:620px){
  .ppl{grid-template-columns:1fr}
  /* Stacked, not a narrow strip. One card per row here and the copy runs to
     about 300px tall, so a side column would crop the portrait to roughly 2:5
     and blow the face up — the same fault the 192px column had, worse. Full
     width at 3:2 instead, which is a crop the source can carry. */
  .ppl-photo .person{grid-template-columns:1fr;min-height:0}
  .ppl-photo .person img.av{height:auto;aspect-ratio:3/2;object-position:50% 28%;
    border-right:0;border-bottom:1px solid var(--border-2)}
  .ppl-photo .person .txt{padding:20px}
  .fund-card .fstats{grid-template-columns:1fr}
  .cs-strip{grid-template-columns:1fr}
  .cs-strip > div{border-right:none;border-bottom:1px solid var(--border);padding:20px 0!important}
  .cs-strip > div:last-child{border-bottom:none}
  .cs-head .hd h2{font-size:26px;line-height:30px}
  .dnum.lg{font-size:36px;line-height:34px}
  .terms .kv .row{flex-direction:column;gap:6px}
  .terms .kv .k{flex:none}
  .lp-notice{padding:18px 20px}
  .lp-disclaimer{padding:36px 20px 44px}
  .tr-rail{padding:24px 16px 0}
  .tr-rail::before{display:none}
  .tr-nodes{grid-template-columns:1fr!important;gap:0}
  .tr-node{text-align:left;padding:0 0 20px 22px;border-left:1px solid var(--border-2)}
  .tr-node .dot{position:absolute;left:-6px;top:2px;margin:0}
  .tr-node .when{margin-bottom:4px}
  .tr-node .ttl{margin-top:2px}
  .tr-own{padding:0 16px 20px}
  .tranche .tf,.chart .cf{padding:14px 16px}
  /* the chart carries its own labels — let it scroll rather than shrink them to nothing */
  .chart .body{padding:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .chart .body svg{min-width:600px}
  .gate{padding:20px}
  .calc .ctl,.calc .out{padding:20px}
}

/* ---------- Tranche legend + unknown bars ---------- */
.tranche .th .legend i.unk{background:repeating-linear-gradient(135deg,rgba(120,113,108,.5) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--faint)}
.tr-bar.unk .col{height:100%}

/* ---------- MOIC table on small screens ----------
   The follow-on column reads identically in every row, so it is dropped below
   620px rather than forcing a wider sideways scroll. The footnote keeps the
   information. Remaining columns scroll inside .tbl-wrap. */
.lp-scrollhint{display:none;padding:12px var(--pad) 0;color:var(--faint);
  font-family:var(--font-mono);font-size:11px;line-height:16px}
@media (max-width:620px){
  .lp-table .tbl th:nth-child(3),.lp-table .tbl td:nth-child(3){display:none}
  .lp-table .tbl th,.lp-table .tbl td{padding-left:12px;padding-right:12px}
  .lp-table .tbl th:first-child,.lp-table .tbl td:first-child{padding-left:20px!important}
  .lp-table .tbl th:last-child,.lp-table .tbl td:last-child{padding-right:20px!important}
  .lp-table .tfoot{padding:16px 20px 0}
  .lp-scrollhint{display:block;padding:12px 20px 0}
}

/* ---------- Tranche nodes must be able to shrink ----------
   .nd is nowrap by default, which blows out the min-content width of a 1fr
   grid track and pushed the last node outside the (overflow:hidden) card at
   the 768 breakpoint. Inside a node, let it wrap and carry the dash as text. */
.tr-node,.tr-node > *,.tr-bar,.tr-axis > div{min-width:0}
.tr-node .nd{display:block;white-space:normal}
.tr-node .nd::before{content:"\2014\00a0";width:auto;height:auto;background:none}