/* Venture Library page styles. Page-local, like the blog's inline <style> block.
   The card, chip, search and load-more rules below are the blog's own (VC Unfiltered page), reused so the
   library reads as the same site. Only the .lib-* rules are new. */
.bp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:980px){.bp-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.bp-grid{grid-template-columns:1fr}}
.bpost{display:flex;flex-direction:column;background:#fff;border:1.5px solid #e6e8f2;border-radius:18px;overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.bpost:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--purple) 45%,transparent);box-shadow:0 24px 55px -24px color-mix(in srgb,var(--purple) 40%,transparent)}
.bpost img{aspect-ratio:1200/630;width:100%;height:auto;object-fit:cover;display:block;background:var(--navy)}
.bp-body{padding:20px 22px 24px}
.bp-date{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--purple)}
.bpost h3{font-size:1.08rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-top:10px;line-height:1.35;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bpost p{color:var(--slate);font-size:.9rem;margin-top:8px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bpost.bp-hidden{display:none}
.bp-cats{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.bp-cat-btn{padding:11px 20px;border-radius:999px;border:1.5px solid #e2e2ef;background:#fff;font:600 .9rem/1 Inter,sans-serif;color:var(--slate);cursor:pointer;transition:all .22s}
.bp-cat-btn:hover{border-color:var(--purple);color:var(--purple)}
.bp-cat-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
.bp-meta{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.bp-cat{font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--purple);background:color-mix(in srgb,var(--purple) 9%,#fff);padding:4px 10px;border-radius:999px}
.bp-tools{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0 0 36px}
.bp-search{flex:1;min-width:260px;max-width:420px;padding:14px 22px;border-radius:999px;border:1.5px solid #e2e2ef;font:inherit;font-size:.96rem;color:var(--ink);background:#fff}
.bp-search:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px color-mix(in srgb,var(--purple) 14%,transparent)}
.bp-count{font-weight:700;font-size:.88rem;color:var(--muted)}
.bp-more{display:block;margin:44px auto 0;padding:15px 34px;border-radius:999px;border:1.5px solid #e2e2ef;background:#fff;font:700 .95rem Inter,sans-serif;color:var(--ink);cursor:pointer;transition:all .25s}
.bp-more:hover{border-color:var(--purple);color:var(--purple);transform:translateY(-2px)}
.bp-feat{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;background:#fff;border:1.5px solid #e6e8f2;border-radius:22px;padding:30px;margin-bottom:26px;transition:transform .3s,box-shadow .3s,border-color .3s}
.bp-feat:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--purple) 45%,transparent);box-shadow:0 26px 60px -26px color-mix(in srgb,var(--purple) 40%,transparent)}
@media (max-width:860px){.bp-feat{grid-template-columns:1fr}}
.bp-feat img{width:100%;height:auto;border-radius:14px;display:block}
.bp-feat h2{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-top:10px}
.bp-feat p{color:var(--slate);margin-top:12px}
.bp-empty{color:var(--slate);padding:24px 0}

/* new for the library */
.lib-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:44px;max-width:760px}
@media (max-width:620px){.lib-stats{grid-template-columns:repeat(2,1fr);gap:22px 16px}}
.lib-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.lib-hero-actions .btn-outline{color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.lib-hero-actions .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.lib-topic{display:flex;flex-direction:column;color:inherit;height:100%;padding:28px;border:1.5px solid #e6e8f2;box-shadow:none}
.lib-topic:hover{border-color:color-mix(in srgb,var(--tc) 45%,transparent);box-shadow:0 24px 50px -26px color-mix(in srgb,var(--tc) 55%,transparent)}
.lib-topic .icon-chip{width:54px;height:54px;border-radius:15px;margin-bottom:22px;color:#fff;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--tc),var(--tc2));box-shadow:0 10px 22px -10px color-mix(in srgb,var(--tc) 70%,transparent)}
.lib-topic .icon-chip svg{width:26px;height:26px;display:block}
.lib-topic .h3{font-size:1.18rem;margin-bottom:8px;color:var(--ink)}
.lib-topic p{font-size:.93rem;line-height:1.55}
.lib-topic-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:20px}
.lib-topic .n{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lib-topic .go{font-weight:700;font-size:.9rem;color:var(--tc)}
.lib-topic .go .arrow{display:inline-block;transition:transform .18s}
.lib-topic:hover .go .arrow{transform:translateX(4px)}
.lib-topic:hover .icon-chip{transform:translateY(-4px) rotate(-5deg)}
.lib-topic .icon-chip{transition:transform .35s cubic-bezier(.16,1,.3,1)}
/* one colour per topic, drawn from the site's program palettes */
.t-vc{--tc:#635bff;--tc2:#a960ee}
.t-founders{--tc:#ea580c;--tc2:#ffb23e}
.t-terms{--tc:#0e7490;--tc2:#22d3ee}
.t-funds{--tc:#b7791f;--tc2:#f3d98b}
.t-careers{--tc:#059669;--tc2:#84cc16}
.t-interviews{--tc:#db2777;--tc2:#ff5996}
.t-compare{--tc:#1d55f0;--tc2:#78bcff}
.t-glossary{--tc:#9333ea;--tc2:#f0abfc}
.lib-method p strong{display:block;color:var(--ink);font-size:1.08rem;margin-bottom:6px}
.lib-faq{max-width:820px}
.lib-crumbs{display:flex;gap:8px;list-style:none;font-size:.82rem;color:rgba(255,255,255,.7);margin-bottom:22px}
.lib-crumbs a{color:rgba(255,255,255,.85)}
.lib-crumbs li+li::before{content:"/";margin-right:8px;opacity:.6}
.cta-band .lib-prog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;text-align:left;margin:8px 0 30px}
.cta-band .lib-prog a{display:grid;gap:4px;align-content:start;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;transition:background .2s}
.cta-band .lib-prog a:hover{background:rgba(255,255,255,.14)}
.cta-band .lib-prog b{font-size:1.05rem}
.cta-band .lib-prog span{font-size:.86rem;color:rgba(255,255,255,.78);line-height:1.45}
@media (max-width:900px){.cta-band .lib-prog{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cta-band .lib-prog{grid-template-columns:1fr}}

/* ---------- Hero: the blog banner's build (theme-vcu), turned into open daylight blue ----------
   This banner used to be the /blog banner with a warmer trailing edge, and at a glance the two were
   the same picture: the same indigo-to-lilac field, the same ribbon rising to the right. It now keeps
   the blog's construction and reverses both of the things the eye reads first, its colour family and
   the direction of its sweep. The blog is indigo and orchid, a violet reading; this is azure and sky,
   a clean blue reading, which is what keeps them apart even though the silhouette is shared.
     - class="hero skewed theme-vcu theme-lib": site.js only mounts the animated aurora ribbon for themes in its
       RIBBON_OK list, and theme-vcu is on it. It takes the FIRST theme-* class on the element, so theme-vcu must
       come first, and theme-lib cannot be swapped in for it. theme-vcu ships no palette, so the ribbon reads
       --cyan/--violet/--purple/--pink from this header: recolouring the banner is a matter of those four tokens
       and needs no change to the shared script, which every other page shares.
     - .lib-veil and .lib-scrim are siblings of .gradient-bg, after it in the DOM, for the same z-index reasons
       documented in the blog's .vcu-veil / .vcu-scrim.
   The blog's own .theme-vcu rules live inline in blog.html, not in site.css, so nothing here collides with them. */
.theme-lib{
  --hero-base:#0b2f57;
  /* Aurora ribbon ramp (read by site.js): ice blue, sky, cobalt, pale azure. One
     cool hue family the whole way, which is deliberate. The canvas composites
     additively and cannot darken, so a warm stop dropped into a cool ramp does
     not read as a counterpoint, it reads as silt sitting on the band. theme-gtm
     hit that with lime and the partnering banner hit it with brass. Keep any
     warmth in the CSS field below, never in this ramp. The stops are saturated
     rather than pastel: this is the one place the banner gets its brightness,
     since the field underneath has to stay dark enough to carry white type. */
  --cyan:#cdeeff; --violet:#5cc6ff; --purple:#1a79dd; --pink:#8ad9ff; --amber:#ffffff;
}
/* Deep navy under the copy, opening to azure and daylight sky at the right. The
   blog's field is the same construction in indigo and orchid, a violet reading,
   so the two banners still share a silhouette and a weight while landing in
   different colour families. The left third stays deep on purpose: every banner
   on this site carries white nav and white type, and a pale version of this hero
   needed a heavier veil and scrim than anything else here just to hold its lead
   paragraph above 4.5:1. Brightness goes to the right, where nothing sits on it. */
.theme-lib .gradient-bg{
  background:
    radial-gradient(58% 72% at 98% 24%, #8fdcff 0%, rgba(143,220,255,.36) 42%, rgba(143,220,255,0) 74%),
    radial-gradient(72% 92% at 90% 78%, #2b8fe4 0%, rgba(43,143,228,.46) 42%, rgba(43,143,228,0) 76%),
    radial-gradient(85% 100% at 0% 58%, #062544 0%, rgba(6,37,68,.58) 44%, rgba(6,37,68,0) 78%),
    linear-gradient(102deg, #07284a 0%, #0b3d72 24%, #115a9e 48%, #1a79c6 68%, #2f9fe0 86%, #6ccdf5 100%);
}
.theme-lib .gradient-bg > span{position:absolute;display:block;pointer-events:none}
.theme-lib .blob{opacity:.14}
.theme-lib .blob-1{background:#9fe2ff}.theme-lib .blob-2{background:#63b8ff}
.theme-lib .blob-3{background:#3f8fe6}.theme-lib .blob-4{background:#c2ecff}
/* The blog banner's canvas, running the other way. The shared .hero-aurora rule
   rotates the canvas -22deg, so every banner's ribbon climbs to the right; this
   one falls to the right instead, which crosses the hero's own diagonal bottom
   edge rather than running with it. The rotation has to keep translateZ(0):
   dropping it takes the canvas off its own compositing layer and the ribbon
   stutters against the page's scroll. The mask is mirrored to match the new
   direction, so the band still fades out where it leaves the hero. */
.theme-lib .hero-aurora{opacity:.88;top:-28%;right:-18%;width:135%;height:180%;
  transform:translateZ(0) rotate(19deg);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 86%,transparent 100%)}
/* top scrim for the white nav, and a left-side veil sized to the copy column.
   The alphas are the blog's, measured there against the same construction, and
   tinted to this field's navy so they read as depth rather than as a grey panel
   laid over the colour. */
.theme-lib .lib-scrim{position:absolute;top:0;left:0;right:0;height:190px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,24,48,.54) 0%,rgba(5,24,48,.47) 34%,rgba(5,24,48,.2) 68%,rgba(5,24,48,0) 100%)}
.theme-lib .lib-veil{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(118% 135% at -8% 62%,rgba(4,26,52,.74) 0%,rgba(4,26,52,.58) 34%,rgba(4,26,52,.37) 62%,rgba(4,26,52,.19) 84%,rgba(4,26,52,0) 100%)}
/* Phones put the copy across the whole hero, so the copy column IS the banner and
   a veil shaped to a left-hand column no longer covers the text. The band is also
   proportionally larger here. A second, near-vertical wash carries the top two
   thirds, which is what holds the eyebrow and the lead above 4.5:1 and the
   headline above 3:1 at 390px. Measured on the backdrop under the glyph runs
   themselves, with the copy hidden, not on the hero as a whole. */
@media (max-width:820px){
  .theme-lib .lib-veil{background:
    linear-gradient(176deg,rgba(4,26,52,.42) 0%,rgba(4,26,52,.38) 46%,rgba(4,26,52,.22) 72%,rgba(4,26,52,0) 92%),
    radial-gradient(130% 120% at -8% 46%,rgba(4,26,52,.62) 0%,rgba(4,26,52,.5) 40%,rgba(4,26,52,.3) 70%,rgba(4,26,52,0) 100%)}
}
/* headline accent: white cooling into ice blue, the ramp's own hue family */
.theme-lib .gradient-text{background-image:linear-gradient(95deg,#ffffff,#eaf7ff 52%,#bfe6ff);
  filter:drop-shadow(0 2px 3px rgba(5,24,48,.52)) drop-shadow(0 10px 28px rgba(5,24,48,.4))}
.theme-lib .lead{color:#fff;max-width:600px}
.theme-lib .pill{color:#fff}
.theme-lib .btn-light{color:var(--navy)}


/* disclaimer (replaces the FAQ): its own tinted band with a white panel */
.lib-disclaimer-wrap{padding-top:64px;padding-bottom:64px}
.lib-disclaimer{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;background:#fff;border:1.5px solid #e6e8f2;border-radius:22px;padding:34px 38px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.lib-disclaimer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--amber),var(--pink))}
.lib-disclaimer-icon{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#f59e0b,#ff5996);box-shadow:0 10px 22px -10px rgba(245,158,11,.7)}
.lib-disclaimer-icon svg{width:26px;height:26px}
.lib-disclaimer-eyebrow{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#c2410c;margin-bottom:6px}
.lib-disclaimer-title{font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:10px}
.lib-disclaimer p{color:var(--slate);font-size:1rem;line-height:1.65;max-width:68ch}
@media (max-width:620px){.lib-disclaimer{grid-template-columns:1fr;padding:26px 22px;gap:16px}}

/* pagination (replaces "Load more") */
.lib-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:44px}
.lib-page{min-width:44px;height:44px;padding:0 14px;border-radius:999px;border:1.5px solid #e2e2ef;background:#fff;font:700 .92rem/1 Inter,sans-serif;color:var(--ink);cursor:pointer;transition:all .2s;font-variant-numeric:tabular-nums}
.lib-page:hover:not(:disabled){border-color:var(--purple);color:var(--purple)}
.lib-page.is-current{background:var(--navy);border-color:var(--navy);color:#fff}
.lib-page:disabled{opacity:.4;cursor:default}
.lib-page-step{padding:0 18px}
.lib-page-gap{color:var(--muted);font-weight:700;padding:0 4px}
@media (max-width:520px){.lib-page-step{padding:0 12px}.lib-pager{gap:6px}}


/* all-white hero copy */
.theme-lib h1,.theme-lib .lead,.theme-lib .pill{color:#fff}

/* disclaimer and closing CTA share the soft band, like the homepage; keep them apart */
.lib-disclaimer-wrap + .lib-cta{padding-top:0;border-top:0}

/* Accessibility: at these small, bold label sizes the site's own --muted and
   --purple land just under 4.5:1 on the library's light backgrounds (4.03 to
   4.44). Both are darkened along their own hue and the override is scoped to
   the library pages, so fills, large text and the rest of the site keep the
   shared tokens unchanged. */
.page-library,.page-guide{--muted:#607084}
.page-library .bp-cat,.page-guide .bp-cat,.page-library .eyebrow,.page-guide .gx-crumbs a{color:#4238ff}
.page-library .lib-topic .go{color:color-mix(in srgb,var(--tc) 82%,#000)}