/* Investments page. Loads after style.css, experience.css and squad-pages.css.
   Colours per group: Angel Squad = yellow, Hustle Fund Scouts = violet, Pre-IPO = orange (jump links, labels and tile hovers).
   Hover effects sit inside @media (hover:hover), and the focus fill follows :focus-visible, so a tapped or clicked tile doesn't stay filled; keyboard focus always shows. */

/* Hero: ink band with the logo's two chevrons, and jump links to the three groups. */
.inv-hero{--mark-w:clamp(220px,23vw,400px);padding-bottom:clamp(48px,5vw,84px)}
.inv-hero h1,.inv-hero .sp-hero-lede,.inv-jump{position:relative;z-index:1}
/* The lede stops 48px short of the chevrons so the two never touch. */
.inv-hero .sp-hero-lede{max-width:min(610px,calc(100% - var(--mark-w) - 48px))}
.inv-nobreak{white-space:nowrap}
.inv-hero-mark{position:absolute;z-index:0;top:clamp(70px,8.4vw,136px);right:var(--gutter);width:var(--mark-w);height:auto;aspect-ratio:156/135;overflow:visible}
.inv-mark-back{color:var(--violet)}
.inv-mark-front{color:var(--yellow)}
.inv-mark-back,.inv-mark-front{animation:inv-chevron 1.3s var(--ease) both}
.inv-mark-front{animation-delay:.14s}
@keyframes inv-chevron{from{opacity:0;transform:translateX(-36px)}}

.inv-jump{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,36px);margin-top:clamp(56px,6.5vw,104px)}
.inv-jump a{display:flex;align-items:center;gap:18px;padding:22px 0 8px;border-top:2px solid var(--group);color:var(--paper);font-size:clamp(20px,1.85vw,30px);font-weight:600;line-height:1.1;letter-spacing:-.035em;transition:color .3s}
.inv-jump a>span:nth-child(2){flex:1}
.sp-hero .inv-jump .mono{display:inline;margin:0;color:var(--group)}
.inv-down{width:22px;height:22px;flex:none;transition:transform .4s var(--ease)}

/* Group sections. --rule: hairlines; --muted: descriptions; --hover: tile fill on hover. */
.inv-group{--rule:#1e1b1a33;--muted:#635c59;--hover:var(--yellow);--mark:var(--yellow)}
.inv-group--scouts{--rule:#1e1b1a40;--muted:#1e1b1ad9;--hover:var(--paper);--mark:var(--ink);background:var(--violet)}
.inv-group--preipo{--rule:#ffffff2b;--muted:#ffffffa6;--hover:var(--orange);--mark:var(--orange)}
.inv-group--scouts .sp-intro-copy p{color:#1e1b1ad9}

.inv-intro{grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:6vw;margin-bottom:56px}
.inv-intro .sp-chevron{color:var(--mark)}
.inv-intro .sp-intro-copy p{text-wrap:balance}
/* The three group headings are long sentences, so they sit a step below the shared .sp-h2 size;
   at full size they run to four or five lines (seven at 320px). "Member voices" uses .sp-h2 as is. */
.inv-h2{max-width:17em;font-size:clamp(36px,3.9vw,66px)}
.inv-stat strong{display:block;margin-bottom:12px;font-size:clamp(72px,8vw,136px);font-weight:600;line-height:.9;letter-spacing:-.07em;color:var(--ink)}

/* Company tiles: a dense grid divided by hairlines and closed by one at the bottom. The name is the link; it stretches over the whole tile. */
.inv-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.inv-co{position:relative;padding:24px 22px 30px;border-top:1px solid var(--rule)}
.js .inv-co.reveal{transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s),filter .9s var(--ease) var(--d,0s),background-color .3s,color .3s}
.inv-co h3{padding-right:30px;font-size:20px;font-weight:650;line-height:1.2;letter-spacing:-.03em}
.inv-co p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.inv-co a::after{content:'';position:absolute;inset:0}
.inv-co a:focus-visible{outline:0}
.inv-co a:focus-visible::after{outline:3px solid currentColor;outline-offset:-3px}
.inv-arrow{position:absolute;top:27px;right:20px;width:18px;height:18px;opacity:.4;transition:opacity .3s,transform .4s var(--ease)}
/* Keyed to :focus-visible, not :focus-within: a tap or click leaves focus on the link (it opens a new tab),
   and the tile shouldn't still be filled when the visitor comes back. Keyboard focus keeps the fill. */
.inv-co:has(a:focus-visible){--muted:var(--ink);background:var(--hover);color:var(--ink)}
.inv-co:has(a:focus-visible) .inv-arrow{opacity:1;transform:translate(3px,-3px)}
.inv-exited{display:inline-block;margin-left:8px;padding:3px 10px 2px;border-radius:100px;background:var(--ink);color:var(--paper);font-size:11.5px;line-height:1.5;letter-spacing:.08em;vertical-align:3px;white-space:nowrap}
.inv-group--preipo .inv-exited{background:var(--paper);color:var(--ink)}
.inv-group--preipo .inv-co:has(a:focus-visible) .inv-exited{background:var(--ink);color:var(--paper)}

@media (hover:hover){
  .inv-jump a:hover{color:var(--group)}
  .inv-jump a:hover .inv-down{transform:translateY(4px)}
  /* Tiles without a website have no link, so they don't react to the pointer. */
  .inv-co:not(.inv-co--nolink):hover{--muted:var(--ink);background:var(--hover);color:var(--ink)}
  .inv-co:not(.inv-co--nolink):hover .inv-arrow{opacity:1;transform:translate(3px,-3px)}
  .inv-group--preipo .inv-co:not(.inv-co--nolink):hover .inv-exited{background:var(--ink);color:var(--paper)}
}

/* "Load more" under each list (added by investments.js): the outline pill with a down arrow.
   On the dark Pre-IPO band the outline is paper. */
.inv-more{margin-top:40px}
.inv-group--preipo .inv-more .button.sp-outline{color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--paper)}
@media (hover:hover){
  .inv-more .button:hover span:last-child{transform:translateY(3px)}
  .inv-group--preipo .inv-more .button.sp-outline:hover{background:var(--paper);color:var(--ink)}
}

/* Member voices: the homepage's coloured cards, each with the company's logo.
   Each logo's size is set by eye in its width/height attributes, so the three read at a similar weight. */
.inv-voices{--mark:var(--red)}
.inv-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.inv-quote{justify-content:flex-start;border-color:transparent;background:var(--tint);padding:clamp(26px,2.6vw,38px)}
.inv-quote-brand{display:flex;align-items:center;height:48px}
.inv-quote blockquote{font-size:clamp(19px,1.45vw,22px);text-wrap:pretty}
.inv-quote figcaption{margin-top:auto;padding-top:22px;border-top:1px solid #1e1b1a40}
.inv-quote figcaption img{object-fit:cover;background:#ffffff80}
.inv-quote figcaption .mono{color:var(--ink);text-transform:uppercase;letter-spacing:.06em}

@media (min-width:901px){
  /* Three cards side by side: logos, quotes and captions share rows, so the caption rules line up across the cards. */
  .inv-quote{display:grid;grid-template-rows:subgrid;grid-row:span 3}
  .inv-quote figcaption{align-self:start;margin-top:0}
}
@media (min-width:1101px){
  .inv-co:nth-child(4n+2){--d:.06s}
  .inv-co:nth-child(4n+3){--d:.12s}
  .inv-co:nth-child(4n+4){--d:.18s}
  .inv-quote:nth-child(2){transition-delay:.09s}
  .inv-quote:nth-child(3){transition-delay:.18s}
}
@media (max-width:1100px){
  .inv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .inv-intro{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:5vw}
  .inv-quote{padding:24px}
}
@media (max-width:900px){
  .inv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inv-quotes{grid-template-columns:1fr}
  .inv-hero{--mark-w:clamp(150px,22vw,200px)}
}
@media (min-width:761px) and (max-width:900px){
  /* Keep the three jump labels on one line each. */
  .inv-jump a{gap:12px;font-size:19px;letter-spacing:-.04em}
  /* One card per row, laid out sideways: logo and caption on the left, the quote on the right. */
  .inv-quote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);grid-template-rows:auto 1fr;grid-template-areas:'brand quote' 'cap quote';column-gap:36px;row-gap:24px;padding:30px}
  .inv-quote-brand{grid-area:brand}
  .inv-quote blockquote{grid-area:quote}
  .inv-quote figcaption{grid-area:cap;align-self:end;margin-top:0}
}
@media (max-width:760px){
  .inv-hero-mark{display:none}
  .inv-hero .sp-hero-lede{max-width:610px}
  .inv-jump{grid-template-columns:1fr;gap:0;margin-top:48px}
  .inv-jump a{padding:18px 0;border-top-width:1px;border-top-color:#ffffff2e;font-size:22px}
  .inv-jump a:last-child{border-bottom:1px solid #ffffff2e}
  .inv-jump a .mono{min-width:22px}
  .inv-intro{grid-template-columns:1fr;gap:22px;margin-bottom:36px}
  .inv-h2{font-size:clamp(32px,8.4vw,48px)}
  .inv-stat strong{font-size:clamp(64px,19vw,96px)}
  .inv-co{padding:22px 18px 26px}
  .inv-co h3{font-size:19px}
  .inv-arrow{top:25px;right:16px}
  .inv-quotes{max-width:640px}
}
@media (max-width:560px){
  /* One column with the text on the gutter, in line with the headings; the hover and focus fill bleeds 12px either side. */
  .inv-grid{grid-template-columns:1fr}
  .inv-co{padding:17px 0 21px}
  .inv-co:has(a:focus-visible){box-shadow:-12px 0 0 var(--hover),12px 0 0 var(--hover)}
  .inv-co a::after{inset:0 -12px}
  .inv-co h3{font-size:18px}
  .inv-co p{margin-top:6px;font-size:14.5px;line-height:1.45}
  .inv-arrow{top:20px;right:0}
}
@media (max-width:560px) and (hover:hover){
  .inv-co:not(.inv-co--nolink):hover{box-shadow:-12px 0 0 var(--hover),12px 0 0 var(--hover)}
}