/* /investors (assets/data/investors.mjs + data/investors.json, rendered by tools/investors-render.mjs). Layout only: type sizes come from the shared tokens (--type-*, --text-*).
   Shared parts reused: the roadmap frame (.rm-bg aurora and dot grid, .rm-shell, the sticky .rm-rail, .rm-num big gradient numbers, .rm-arcs widening rings, .diagram-frame / .rd diagram parts), .sec-head,
   .cap / .tile cards with the pointer spotlight, .framed strips, .badge, .link-arrow, .btn, the blue .connector, the .m-rise reveal and the founder portrait (founder.css).
   All motion is gated by prefers-reduced-motion (roadmap.css, system.css); nothing here moves on its own. */

/* ============ frame: one column of sections; the mini-nav hangs in the left margin on wide screens only ============ */
.iv-bg { padding-top: 0; }
.iv-sec { --hc: var(--brand-amber); --sp: 1; position: relative; isolation: isolate; display: grid; gap: var(--space-block); align-content: start; scroll-margin-top: calc(var(--header-h) + 1rem); }
.iv-sec[data-h="1"] { --hc: var(--brand-red); } .iv-sec[data-h="2"] { --hc: var(--brand-magenta); } .iv-sec[data-h="3"] { --hc: var(--brand-indigo); } .iv-sec[data-h="4"] { --hc: var(--brand-blue); }
.iv-close { --fx: 100%; --fy: 0%; --fc1: var(--framed-orange); --fc2: var(--framed-blue); }
@media (max-width: 87.99rem) {
  .iv-bg .rm-shell { grid-template-columns: minmax(0, 1fr); }
}
/* section head: the big number beside the eyebrow, title and lead */
.iv-hd { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(.9rem, 1.6vw, 1.5rem); align-items: start; }
.iv-hd .sec-head { margin-bottom: 0; gap: .5rem; }
.iv-hd .sec-head h2 { text-wrap: balance; }
.iv-hd .lede { margin: 0; max-width: 70ch; }
.iv-num { width: 4.75rem; margin-top: -.15rem; }
.iv-js .iv-sec:not(.is-on) .iv-num { opacity: .32; }
.iv-js .iv-sec.is-on .iv-num { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--hc) 55%, transparent)); }
@media (max-width: 40rem) { .iv-hd { grid-template-columns: minmax(0, 1fr); row-gap: .35rem; } .iv-num { width: 3.75rem; margin: 0; } }

/* ============ 01 hero ============ */
.iv-hero { display: grid; grid-template-columns: minmax(0, 57fr) minmax(0, 39fr); grid-template-areas: "head head" "lead lead" "copy fig" "rest rest" "cta cta"; gap: 1.5rem clamp(2rem, 3.6vw, 3.25rem); align-items: start; padding-block: calc(var(--hero-pt) - .475rem) clamp(.5rem, 1.5vw, 1.25rem); }
.iv-hero__rest { grid-area: rest; display: grid; gap: 1.5rem; justify-items: start; min-width: 0; }
.iv-hero .iv-lead { grid-area: lead; }
.iv-hero__cta { grid-area: cta; justify-self: start; }
.iv-hero__head { grid-area: head; display: grid; gap: var(--hero-gap); justify-items: start; min-width: 0; }
.iv-hero__copy { grid-area: copy; align-self: center; display: grid; gap: 1.5rem; justify-items: start; min-width: 0; }
.iv-hd--hero { align-items: center; }
.iv-hd--hero .iv-num { width: 3.5rem; margin: 0; }
.iv-hero h1 { max-width: 24ch; text-wrap: balance; }
/* the tokens have no 16-17px body or 20-22px lead, so this page sets them with clamp (rem) here only */
.iv-hero__copy p, .iv-hero__rest p { margin: 0; max-width: 65ch; text-wrap: pretty; }
.iv-hero .iv-lead { margin: 0; max-width: min(1040px, 92ch); text-wrap: pretty; }
.iv-hero__rest p { max-width: min(1040px, 88ch); }
.iv-lead { color: var(--text); font-size: clamp(1.125rem, 1.02rem + .38vw, 1.3rem); line-height: 1.45; font-weight: 500; letter-spacing: -.01em; }
.iv-p { color: var(--text-dim); font-size: clamp(1rem, .96rem + .13vw, 1.0625rem); line-height: 1.58; }
.iv-hero__rest .iv-closing { color: var(--text); font-size: clamp(1rem, .96rem + .13vw, 1.0625rem); line-height: 1.55; }
.iv-closing strong { font-weight: 600; }
.iv-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.iv-hero__fig { grid-area: fig; align-self: center; margin: 0; container-type: inline-size; min-width: 0; }
.iv-hero__fig .rd { max-width: 520px; }
@container (max-width: 430px) { .iv-hero__fig .rd--w { display: none; } .iv-hero__fig .rd--n { display: block; max-width: 340px; } }
.iv-ver rect { fill: color-mix(in srgb, var(--brand-blue) 16%, var(--surface-1)); stroke: var(--brand-blue); stroke-width: 1.5; }
.iv-ver text { font-weight: 600; }
.iv-rec rect { fill: color-mix(in srgb, var(--brand-indigo) 12%, var(--surface-1)); stroke: var(--brand-indigo); }
.iv-arc { fill: none; stroke-width: 1.4; }
@media (max-width: 63.99rem) { .iv-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "lead" "copy" "fig" "rest" "cta"; } .iv-hero__fig { max-width: 560px; width: 100%; justify-self: center; } }

/* ============ shared card grids: icon beside the title, equal heights per row, no card alone in the last row ============ */
.iv-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-head); }
.iv-c1 { grid-template-columns: minmax(0, 1fr); } .iv-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .iv-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.iv-cards > li { height: 100%; }
.iv-card > .c-ico { color: var(--brand-orange); }
.iv-cards > :nth-child(3n + 2) > .c-ico { color: var(--brand-magenta); } .iv-cards > :nth-child(3n) > .c-ico { color: var(--brand-blue); }
.iv-cards > :nth-child(3n + 2) { --m-i: 1; } .iv-cards > :nth-child(3n) { --m-i: 2; }
.iv-links { grid-row: 8; align-self: end; display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px !important; }
.iv-links .link-arrow { margin-top: 0; }
@media (max-width: 62rem) {
  .iv-cards, .iv-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-c3 { grid-template-columns: minmax(0, 1fr); }
  .iv-c1 { grid-template-columns: minmax(0, 1fr); }
  .iv-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .iv-cards > :nth-child(n) { --m-i: 0; } .iv-cards > :nth-child(even) { --m-i: 1; }
}
@media (max-width: 40rem) { .iv-cards, .iv-c2, .iv-c3, .iv-c4 { grid-template-columns: minmax(0, 1fr); } .iv-cards > :last-child:nth-child(odd) { grid-column: auto; } .iv-cards > :nth-child(n) { --m-i: 0; } }

/* ============ 03 what exists today: five counters ============ */
.iv-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-head); }
.iv-stat { height: 100%; gap: .3rem; }
.iv-stats > :nth-child(5n + 2) { --m-i: 1; } .iv-stats > :nth-child(5n + 3) { --m-i: 2; } .iv-stats > :nth-child(5n + 4) { --m-i: 3; } .iv-stats > :nth-child(5n) { --m-i: 4; }
.iv-col--built, .iv-stat h3 { margin: 0; }
.iv-cn { display: block; width: 6.25rem; height: auto; margin: 0 0 .25rem; overflow: visible; }
.iv-cn text { font-family: var(--mono); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (min-width: 80rem) { .iv-stat .link-arrow { white-space: nowrap; font-size: .8125rem; } }
@media (max-width: 79.99rem) { .iv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 48rem) { .iv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .iv-stats { grid-template-columns: minmax(0, 1fr); } }

/* ============ 04 the model: open column and intended column, the reason, the direction strip ============ */
.iv-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-head); }
.iv-col { height: 100%; gap: 14px; align-items: stretch; padding: 18px 20px; }
.iv-col__hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.iv-col__hd h3 { margin: 0; min-width: 0; }
.iv-col__hd > .c-ico { flex: none; width: 36px; height: 36px; border-radius: 9px; }
.iv-col__hd > .c-ico svg { width: 18px; height: 18px; }
.iv-col--open .iv-col__hd > .c-ico { color: var(--brand-blue); } .iv-col--built .iv-col__hd > .c-ico { color: var(--brand-orange); }
.iv-badge { margin-left: auto; padding: .1rem .6rem; font: var(--text-small); letter-spacing: .12em; text-transform: uppercase; color: var(--text); border-color: color-mix(in srgb, var(--brand-orange) 55%, var(--border)); background: color-mix(in srgb, var(--brand-orange) 12%, var(--surface-2)); }
.iv-col--built { border-style: dashed; border-color: var(--border-hover); }
.iv-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.iv-rows li { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: var(--text-body-size); line-height: 1.45; min-width: 0; }
.iv-rows .c-ico { flex: none; width: 28px; height: 28px; border-radius: 8px; }
.iv-rows .c-ico svg { width: 15px; height: 15px; }
@media (max-width: 62rem) { .iv-pair { grid-template-columns: minmax(0, 1fr); } }


/* ============ the raise (only with owner facts) and materials ============ */
.iv-summary { margin: 0; padding: 14px 16px; border-radius: var(--r-panel); color: var(--text); font: var(--text-body); line-height: 1.6; max-width: 80ch; }
.iv-group { display: grid; gap: .65rem; }
.iv-group > .eyebrow { margin: 0; }

/* ============ 06 contact ============ */
.iv-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px 16px; border-radius: var(--r-panel); }
.iv-close__go { display: flex; flex-wrap: wrap; gap: 12px; }
.iv-close__alt { align-self: center; color: var(--text); font-size: var(--text-body-size); text-decoration: underline; text-decoration-color: var(--border-hover); text-underline-offset: 3px; }
.iv-close__alt:hover { text-decoration-color: var(--brand-blue); }
.iv-close__alt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.iv-close__note { margin: 0; color: var(--text-dim); font-size: var(--text-body-size); max-width: 60ch; }