/* ==========================================================================
   VC Canada Directory, dedicated styles
   Layered on top of /css/styles.css. Reuses Fractal CSS variables.
   ========================================================================== */

/* ---------- Tokens specific to the directory ----------------------------- */
:root {
  --vc-founders: var(--accent-violet);
  --vc-founders-soft: #F3EFFE;
  --vc-founders-deep: #6D28D9;
  --vc-funds: var(--accent-green);
  --vc-funds-soft: #ECFDF5;
  --vc-funds-deep: #047857;
  --vc-blue: var(--accent-blue);
  --vc-blue-soft: #EEF3FE;
  --vc-amber: #C47A2F;
  --vc-amber-soft: #FAF1E6;
  --vc-shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.04);
  --vc-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 8px 24px rgba(10, 22, 40, 0.05);
  --vc-shadow-lg: 0 10px 40px rgba(10, 22, 40, 0.10);
  --vc-radius-sm: 8px;
  --vc-radius: 10px;
  --vc-radius-lg: 12px;
}

/* ---------- Page container override (denser than site default) ----------- */
.vc-page main { background: var(--color-white); }
.vc-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* ---------- HERO --------------------------------------------------------- */
.vc-hero { padding: 60px 0 16px; }
.vc-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}

/* Solo variant: no right-side visual. Copy stretches to a comfortable max. */
.vc-hero-solo .vc-hero-copy { max-width: 760px; }
.vc-hero-solo h1 { margin-bottom: 28px; }
.vc-hero-solo .vc-search-wrap { max-width: 640px; }

/* ---------- HERO MAP · animated Canada with VC density ------------------ */
.vc-hub {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vc-hub-svg {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
}
@media (max-width: 960px) {
  .vc-hub { display: none; }
}

/* Map intentionally has NO country outline, NO fill, NO Hudson Bay cutout.
   The hero now reads as an abstract network of Canadian VC hubs (cities,
   pulses, filaments). The geographic east-west positioning of the dots
   is enough to suggest the country without a literal silhouette. */

/* Canadian flag watermark behind everything else. Two red bars + a maple
   leaf in the center field at low opacity for a "this is Canada" cue
   without yelling. Pure decorative, hidden from a11y. */
.vc-map-flag {
  opacity: 0.06;
}
@media (prefers-reduced-motion: no-preference) {
  .vc-map-flag {
    opacity: 0;
    animation: vc-flag-in 1.2s 0.3s ease-out forwards;
  }
}
@keyframes vc-flag-in { to { opacity: 0.06; } }

/* Cities: inner <g> only gets the opacity fade, halo gets the scale pulse.
   The translate(...) stays on the outer <g> in the SVG markup, untouched
   by CSS transforms. */
.vc-map-city {
  opacity: 0;
}
.vc-map-city .vc-map-dot {
  fill: var(--vc-founders);
}
.vc-map-city .vc-map-halo {
  fill: var(--vc-founders);
  opacity: 0.18;
  transform-origin: center;
  transform-box: fill-box;
}
.vc-map-city .vc-map-label {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  fill: var(--color-navy);
  letter-spacing: -0.005em;
}
.vc-map-city .vc-map-label .vc-map-count {
  fill: var(--vc-founders-deep);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.vc-map-city .vc-map-label-bg {
  fill: var(--color-white);
  stroke: var(--color-border-soft);
  stroke-width: 1;
}

/* Each city fades in with a staggered delay, then its halo loops a calm pulse.
   Default state is opacity 0 with the entrance animation forwards; reduced-
   motion users get the same final state (opacity 1) without animation. */
@media (prefers-reduced-motion: no-preference) {
  .vc-map-city {
    animation: vc-city-in 0.7s ease-out forwards;
  }
  .vc-map-city-1 { animation-delay: 0.2s; }
  .vc-map-city-2 { animation-delay: 0.4s; }
  .vc-map-city-3 { animation-delay: 0.6s; }
  .vc-map-city-4 { animation-delay: 0.8s; }
  .vc-map-city-5 { animation-delay: 1.0s; }

  .vc-map-city .vc-map-halo {
    animation: vc-city-pulse 3.6s ease-in-out infinite;
  }
  .vc-map-city-1 .vc-map-halo { animation-delay: 1.0s; }
  .vc-map-city-2 .vc-map-halo { animation-delay: 1.4s; }
  .vc-map-city-3 .vc-map-halo { animation-delay: 0.6s; }
  .vc-map-city-4 .vc-map-halo { animation-delay: 1.2s; }
  .vc-map-city-5 .vc-map-halo { animation-delay: 1.8s; }
}
.vc-map-city { opacity: 1; }  /* fallback for non-supporting environments */
@media (prefers-reduced-motion: no-preference) {
  .vc-map-city { opacity: 0; }  /* re-hide so the animation can fade in */
}
@media (prefers-reduced-motion: reduce) {
  .vc-map-city { opacity: 1 !important; animation: none !important; }
  .vc-map-city .vc-map-halo { animation: none !important; opacity: 0.22; }
}
@keyframes vc-city-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vc-city-pulse {
  0%, 100% { opacity: 0.10; transform: scale(0.85); }
  50%      { opacity: 0.30; transform: scale(1.15); }
}

/* Connecting filaments between hubs. Always rendered, fade in via opacity. */
.vc-map-arc {
  fill: none;
  stroke: var(--vc-founders);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-opacity: 0.28;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .vc-map-arc { animation: vc-arc-in 0.6s ease-out forwards; }
  .vc-map-arc-1 { animation-delay: 1.2s; }
  .vc-map-arc-2 { animation-delay: 1.4s; }
  .vc-map-arc-3 { animation-delay: 1.6s; }
  .vc-map-arc-4 { animation-delay: 1.8s; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-map-arc { opacity: 1 !important; animation: none !important; }
}
@keyframes vc-arc-in { to { opacity: 1; } }

/* Caption strip below the map. Subtle context for what the user is seeing. */
.vc-map-caption {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: 11.5px;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.vc-map-caption .vc-map-cap-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vc-founders);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}
.vc-map-svg { contain: paint; }
.vc-hero .eyebrow {
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.vc-hero .eyebrow::before {
  display: none;
}

/* Simplified Canadian eyebrow: a small gray dot, the word "Canadian" /
   "Canadiens" in flag red, then a gray "investors list" suffix. */
.vc-hero .eyebrow-canadian {
  color: var(--color-text-muted);
}
.vc-hero .eyebrow-canadian .eyebrow-flag {
  color: #FF0000;
}
.vc-hero .eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-muted);
  display: inline-block;
  flex-shrink: 0;
}
@keyframes vc-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15); }
  50%      { box-shadow: 0 0 0 7px rgba(139, 92, 246, 0.06); }
}
.vc-hero h1 {
  font-family: var(--font-tight);
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--color-navy);
}
/* Highlight under the emphasized words. Uses a linear-gradient background
   so the band tracks the text across line breaks and any font size, with
   no risk of being clipped by the parent box. */
.vc-hero h1 .accent {
  color: var(--color-navy);
  font-weight: 600;
  padding: 0 0.06em;
  background-image: linear-gradient(
    transparent 62%,
    var(--vc-founders-soft) 62%,
    var(--vc-founders-soft) 94%,
    transparent 94%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Deck: short subhead that pays off the H1 promise.
   Sits between H1 and the stats row. */
.vc-hero .vc-hero-deck {
  margin: 14px 0 0;
  max-width: 540px;
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.vc-hero .vc-hero-deck b {
  color: var(--color-navy);
  font-weight: 500;
}
.vc-hero .lede {
  margin-top: 22px;
  max-width: 520px;
  color: var(--color-text-muted);
  font-size: 16.5px;
  line-height: 1.6;
}
.vc-hero .lede strong { color: var(--color-navy); font-weight: 500; }

.vc-search-wrap { margin-top: 28px; position: relative; max-width: 560px; }
.vc-search-wrap .vc-search-ic {
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-faint);
  width: 16px; height: 16px;
}
.vc-search-input {
  width: 100%;
  padding: 16px 140px 16px 50px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--vc-radius);
  background: var(--color-white);
  box-shadow: var(--vc-shadow-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  color: var(--color-text);
}
.vc-search-input::placeholder { color: var(--color-text-faint); }
.vc-search-input:focus {
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(10, 22, 40, 0.06);
}
.vc-qmatch-btn {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  background: var(--vc-founders);
  color: #fff;
  padding: 9px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  cursor: pointer;
  transition: background .12s;
  font-family: inherit;
}
.vc-qmatch-btn:hover { background: var(--vc-founders-deep); }
.vc-qmatch-btn svg { width: 13px; height: 13px; }

.vc-hero-trust {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  padding: 6px 14px 6px 10px;
  background: var(--color-cream);
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
}
.vc-hero-trust .pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vc-funds);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
  animation: vc-pulse2 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes vc-pulse2 {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* 4 KPIs in a single grid row. All four are short numbers, so we can let
   them breathe with larger type and an upper-cased micro label. The first
   KPI keeps the violet gradient as the brand anchor. Each item fades in
   with a staggered delay for a calm cascade on first paint. */
.vc-hero-stats {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  color: var(--color-text-faint);
  font-size: 12px;
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--color-border-soft);
}
.vc-hero-stats::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 56px; height: 1px;
  background: linear-gradient(90deg, var(--vc-founders) 0%, var(--vc-founders-deep) 100%);
}
.vc-hero-stats .stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px;
  position: relative;
  min-width: 0;
  opacity: 0;
  transform: translateY(4px);
}
@media (prefers-reduced-motion: no-preference) {
  .vc-hero-stats .stat-item {
    animation: vc-stat-in 0.5s ease-out forwards;
  }
  .vc-hero-stats .stat-item:nth-child(1) { animation-delay: 0.05s; }
  .vc-hero-stats .stat-item:nth-child(2) { animation-delay: 0.15s; }
  .vc-hero-stats .stat-item:nth-child(3) { animation-delay: 0.25s; }
  .vc-hero-stats .stat-item:nth-child(4) { animation-delay: 0.35s; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-hero-stats .stat-item { opacity: 1; transform: none; animation: none; }
}
@keyframes vc-stat-in {
  to { opacity: 1; transform: translateY(0); }
}
.vc-hero-stats .stat-item:first-child { padding-left: 0; }
.vc-hero-stats .stat-item:last-child  { padding-right: 0; }
.vc-hero-stats .stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--color-border-soft);
}
.vc-hero-stats b {
  color: var(--color-navy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  letter-spacing: -0.035em;
  font-family: var(--font-tight);
  line-height: 1;
  white-space: nowrap;
}
.vc-hero-stats .stat-item:first-child b {
  background: linear-gradient(135deg, var(--vc-founders) 0%, var(--vc-founders-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--vc-founders);
}
.vc-hero-stats .stat-item span {
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- HERO VISUAL (dashboard mockup) ------------------------------- */
.vc-hero-visual { position: relative; }
.vc-dash {
  background: var(--color-navy);
  border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgba(10, 22, 40, 0.35), 0 10px 20px rgba(10, 22, 40, 0.10);
  overflow: hidden;
  transform: rotate(-0.4deg);
  transition: transform .3s;
}
.vc-dash:hover { transform: rotate(0deg); }
.vc-dash-chrome {
  padding: 12px 16px;
  background: #070F1C;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #18263B;
}
.vc-dash-dots { display: flex; gap: 6px; }
.vc-dash-dots span { width: 10px; height: 10px; border-radius: 50%; background: #2A3A54; }
.vc-dash-dots span:nth-child(1) { background: #EC5F57; }
.vc-dash-dots span:nth-child(2) { background: #E4BF3A; }
.vc-dash-dots span:nth-child(3) { background: #3BC14A; }
.vc-dash-url {
  flex: 1;
  background: #070F1C;
  border: 1px solid #18263B;
  border-radius: 6px;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: #6B7280;
  text-align: center;
}
.vc-dash-url b { color: #CBD5E1; font-weight: 500; }
.vc-dash-body { background: #fff; padding: 20px 22px; min-height: 360px; }
.vc-dash-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-cream);
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}
.vc-dash-search svg { color: var(--color-text-faint); flex-shrink: 0; }
.vc-dash-search .cursor {
  display: inline-block;
  width: 1.5px; height: 14px;
  background: var(--vc-founders);
  margin-left: 2px;
  animation: vc-blink 1s step-end infinite;
  vertical-align: middle;
}
@keyframes vc-blink { 50% { opacity: 0; } }
.vc-dash-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; min-height: 28px; }
.vc-dash-filter {
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--color-navy);
  color: #fff;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: vc-chipIn .4s ease-out both;
}
@keyframes vc-chipIn {
  from { opacity: 0; transform: translateY(6px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.vc-dash-match-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}
.vc-dash-match-label .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vc-funds);
  animation: vc-pulse2 1.6s ease-in-out infinite;
}
.vc-dash-match-label b { color: var(--color-navy); font-weight: 600; font-size: 13px; letter-spacing: 0; text-transform: none; }
.vc-dash-cards { display: flex; flex-direction: column; gap: 10px; min-height: 148px; }
.vc-dash-card {
  padding: 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  background: var(--color-white);
  display: flex;
  gap: 12px;
  align-items: center;
  animation: vc-cardIn .55s cubic-bezier(.16, .8, .3, 1) both;
}
@keyframes vc-cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vc-dash-card .dlogo {
  width: 34px; height: 34px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
  font-family: var(--font-tight);
}
.vc-dash-card .dinfo { flex: 1; min-width: 0; }
.vc-dash-card .dname { font-size: 13px; font-weight: 600; color: var(--color-navy); }
.vc-dash-card .dmeta { font-size: 11.5px; color: var(--color-text-muted); margin-top: 1px; }
.vc-dash-card .dfit {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--vc-funds-deep);
  background: var(--vc-funds-soft);
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.vc-dash-card .dfit::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--vc-funds); }

/* ---------- FILTER BAR --------------------------------------------------- */
.vc-filters { padding: 0; }
.vc-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}
/* Reads as "Or filter by [Stage] [Sector] [Ticket] ...".
   The 'Or' framing tells the user this is an alternative to the search above,
   not a separate mandatory step. */
.vc-filter-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: 6px;
  font-weight: 600;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vc-filter-label-or {
  color: var(--color-text-faint);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.vc-chip-wrap { position: relative; flex-shrink: 0; }
.vc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-navy);
  cursor: pointer;
  font-family: inherit;
  font-weight: 450;
  transition: border-color .12s, background .12s, color .12s;
}
.vc-chip:hover { border-color: var(--color-navy); }
.vc-chip.open, .vc-chip.active {
  background: var(--color-navy);
  color: #fff;
  border-color: var(--color-navy);
}
.vc-chip .count {
  background: var(--vc-founders);
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
}
.vc-chip svg { width: 11px; height: 11px; opacity: 0.7; }
.vc-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--vc-shadow-lg);
  padding: 6px;
  z-index: 20;
  display: none;
}
.vc-dropdown.open { display: block; animation: vc-fadeIn .14s ease-out; }
@keyframes vc-fadeIn { from { opacity: 0; } to { opacity: 1; } }
.vc-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  font-weight: 450;
}
.vc-dropdown-item:hover { background: var(--color-cream-deep); }
.vc-dropdown-item input { margin: 0; accent-color: var(--vc-founders); }
.vc-clear-btn {
  font-size: 12.5px;
  color: var(--color-text-muted);
  padding: 6px 10px;
  border-radius: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}
.vc-clear-btn:hover { color: var(--vc-founders); background: var(--vc-founders-soft); }

/* ---------- BRIEFING BAR ------------------------------------------------- */
.vc-briefing {
  margin-top: 22px;
  padding: 14px 18px;
  background: var(--color-navy);
  color: #E5E7EB;
  border-radius: var(--vc-radius-lg);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.55;
}
.vc-briefing .brf-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #9CA3AF;
  font-weight: 600;
}
.vc-briefing .brf-stat { display: inline-flex; align-items: baseline; gap: 6px; }
.vc-briefing .brf-stat b {
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-tight);
}
.vc-briefing .brf-stat span { color: #9CA3AF; font-size: 12px; }
.vc-briefing .brf-sep { width: 1px; height: 14px; background: #273449; }
.vc-briefing .brf-hint { margin-left: auto; color: #9CA3AF; font-size: 12px; }
.vc-briefing .brf-hint b { color: var(--vc-funds); font-weight: 600; }

/* ---------- RESULTS ------------------------------------------------------ */
.vc-results { padding: 24px 0 80px; }
.vc-results-header {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  margin: 24px 0 18px;
  gap: 16px;
  flex-wrap: wrap;
}
.vc-results-count {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--color-navy);
  font-family: var(--font-tight);
  margin: 0;
  margin-right: auto;
}
.vc-results-count b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Sort: visually a filter-chip-cousin so the user reads it as interactive.
   Lives inline at the right end of the filter row. The auto left margin
   pushes it to the right, separating it from the active filter chips. */
.vc-sort {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 450;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.vc-sort label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}
.vc-sort-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 32px 7px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.vc-sort-pill:hover { border-color: var(--color-navy); }
.vc-sort-pill:focus-within {
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(10, 22, 40, 0.06);
}
.vc-sort-pill::after {
  content: "";
  position: absolute;
  right: 13px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--color-text-muted);
  border-bottom: 1.6px solid var(--color-text-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.vc-sort select {
  border: none;
  background: transparent;
  font: inherit;
  color: var(--color-navy);
  cursor: pointer;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  font-weight: 500;
  outline: none;
}
.vc-sort-info {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-text-faint);
  background: var(--color-white);
  font-size: 9.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  position: relative;
}
.vc-sort-info::before { content: "i"; font-style: italic; }
.vc-sort-info:hover,
.vc-sort-info:focus {
  color: var(--vc-founders);
  border-color: var(--vc-founders);
}
.vc-sort-info:hover::after,
.vc-sort-info:focus::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: -8px;
  width: 260px;
  padding: 10px 12px;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10, 22, 40, 0.12);
  z-index: 5;
  pointer-events: none;
}

/* White or near-white logos sit on a uniform dark chip (#0A1628, set inline
   by applyLogoTreatment in js/vc-directory.js) so they stay visible. */
.logo-img.logo-light { border-color: transparent; }
/* A logo that carries its own opaque background (white, black or a brand
   colour, set inline by applyLogoTreatment) fills the chip edge to edge:
   no padding ring, no border, and the rounded chip clips the square
   artwork — which removes the black/white bars seen around such logos. */
.vc-trow-logo.logo-img.logo-solid,
.vc-modal-logo.logo-img.logo-solid,
.vc-logo.logo-img.logo-solid {
  padding: 0;
  border-color: transparent;
  overflow: hidden;
}
.logo-img.logo-solid img { border-radius: inherit; }

/* ---------- Conviction sectorielle badge --------------------------------- */
.vc-qc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.vc-qc::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vc-qc.pure-play   { background: #F3ECFF; color: #6B2ABF; border-color: #E5D7FA; }
.vc-qc.tech-actif  { background: #E8F2FE; color: #1E5BAB; border-color: #D3E5FC; }
.vc-qc.generaliste { background: #FFF3D6; color: #8A5A00; border-color: #FAE1A4; }
.vc-qc.cvc         { background: #FFE4CC; color: #A04400; border-color: #F8CDA7; }

/* ---------- Empty state -------------------------------------------------- */
.vc-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
  grid-column: 1 / -1;
}
.vc-empty h3 {
  font-size: 22px;
  color: var(--color-navy);
  margin-bottom: 10px;
  font-weight: 560;
  letter-spacing: -0.015em;
  font-family: var(--font-tight);
}
.vc-empty .vc-empty-clear {
  margin-top: 18px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--vc-founders);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.vc-empty .vc-empty-clear:hover { background: var(--vc-founders-deep); }

/* ---------- Missing fund prompt ----------------------------------------- */
.vc-missing-fund {
  margin: 28px auto 0;
  display: flex;
  justify-content: center;
}
.vc-missing-fund-inner {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border: 1px dashed var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 13px;
  transition: border-color .18s, color .18s, background .18s;
}
.vc-missing-fund-inner:hover {
  border-color: var(--color-navy);
  color: var(--color-navy);
  background: var(--color-white);
}
.vc-missing-fund-inner .mf-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 560;
  color: var(--color-navy);
}
.vc-missing-fund-inner .mf-link svg { width: 12px; height: 12px; }

/* ---------- MODAL -------------------------------------------------------- */
.vc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.45);
  backdrop-filter: blur(4px);
  z-index: 80;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.vc-modal-backdrop.open { display: flex; animation: vc-fadeIn .18s ease-out; }
body.vc-modal-open {
  position: fixed; top: 0; left: 0; right: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
.vc-modal {
  background: var(--color-white);
  border-radius: 14px;
  max-width: 960px;
  width: 100%;
  box-shadow: 0 25px 60px rgba(10, 22, 40, 0.25);
  animation: vc-slideUp .24s ease-out;
  margin: auto;
  position: relative;
}
@keyframes vc-slideUp {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.vc-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  font-size: 16px;
  color: var(--color-text-muted);
  border: 0;
  cursor: pointer;
}
.vc-modal-close:hover { background: var(--color-border); color: var(--color-navy); }

.vc-modal-hero {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 36px 56px 28px 48px;
  background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-white) 100%);
  border-bottom: 1px solid var(--color-border-soft);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.vc-modal-logo {
  width: 72px; height: 72px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 24px;
  color: #fff;
  flex-shrink: 0;
  font-family: var(--font-tight);
  box-shadow: 0 1px 0 var(--color-border-soft), 0 6px 18px rgba(10, 22, 40, 0.06);
  overflow: hidden;
}
.vc-modal-title-wrap { flex: 1; min-width: 0; }
.vc-modal-hero h2 {
  font-size: 30px;
  font-weight: 560;
  letter-spacing: -0.028em;
  margin: 0 0 8px;
  line-height: 1.12;
  color: var(--color-navy);
  font-family: var(--font-tight);
}
.vc-modal-meta {
  display: flex;
  gap: 12px;
  color: var(--color-text-muted);
  font-size: 13.5px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}
.vc-modal-meta .sep { color: var(--color-border); }
.vc-modal-meta a.web {
  color: var(--vc-founders);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vc-modal-meta a.web:hover { text-decoration: underline; text-underline-offset: 3px; }
.vc-modal-pill-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.vc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--color-cream-deep);
  color: var(--color-text);
  border: 1px solid var(--color-border-soft);
}
.vc-badge.lead { background: var(--vc-founders-soft); color: var(--vc-founders-deep); border-color: transparent; }

.vc-modal-save {
  position: absolute;
  top: 22px; right: 60px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 14px;
  border-radius: 10px;
  background: var(--color-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  z-index: 2;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04), 0 10px 24px rgba(10, 22, 40, 0.15);
}
.vc-modal-save:hover { background: #0F1F3A; transform: translateY(-1px); }
.vc-modal-save svg { width: 15px; height: 15px; }
.vc-modal-save.active { background: var(--vc-founders); }
.vc-modal-save.active:hover { background: var(--vc-founders-deep); }
.vc-modal-save .lbl-saved { display: none; }
.vc-modal-save.active .lbl-save { display: none; }
.vc-modal-save.active .lbl-saved { display: inline; }

.vc-modal-body { padding: 0 48px; }
.vc-stats-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  border-bottom: 1px solid var(--color-border-soft);
  margin: 0 -48px;
  padding: 24px 48px;
}
.vc-stat {
  padding: 12px 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  background: var(--color-white);
  min-width: 0;
  transition: border-color .15s var(--vc-ease-snap), box-shadow .15s var(--vc-ease-snap);
}
.vc-stat:hover {
  border-color: var(--vc-r-violet-30);
  box-shadow: 0 1px 0 var(--vc-r-violet-8);
}
.vc-stat-label {
  display: flex;
  align-items: center;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vc-stat-val {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-family: var(--font-tight);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vc-section { padding: 26px 0; border-bottom: 1px solid var(--color-border-soft); }
.vc-section:last-child { border-bottom: 0; padding-bottom: 8px; }
.vc-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin: 0 0 12px;
  font-family: var(--font-sans);
}
.vc-section p {
  margin: 0;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
}

.vc-signals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}
.vc-signal {
  padding: 18px 20px;
  border-right: 1px solid var(--color-border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vc-signal:last-child { border-right: 0; }
.vc-signal-icon {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--color-border-soft);
  color: var(--vc-founders);
}
.vc-signal-icon svg { width: 15px; height: 15px; }
.vc-signal-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-text-muted);
  font-weight: 600;
  line-height: 1;
}
.vc-signal-val {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  font-family: var(--font-tight);
  line-height: 1.2;
  margin-top: 2px;
}
.vc-signal-sub {
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin-top: 2px;
  font-weight: 450;
}

.vc-questions { display: flex; flex-direction: column; gap: 12px; }
.vc-question {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-soft);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text);
}
.vc-question:last-child { border-bottom: 0; }
.vc-question .q-mark {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--vc-founders-soft);
  color: var(--vc-founders-deep);
  font-weight: 600;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.vc-coinvest { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-co-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border: 1px solid var(--color-border);
  background: transparent;
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-navy);
  font-weight: 500;
  transition: border-color .12s, background .12s;
}
.vc-co-chip:hover { border-color: var(--color-navy); background: transparent; }
.vc-co-chip .co-logo {
  width: 22px; height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-tight);
}

.vc-value-add-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-vtag {
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  font-size: 12.5px;
  color: var(--color-navy);
  font-weight: 500;
}

.vc-followon-box {
  padding: 14px 16px;
  border-left: 3px solid var(--vc-founders);
  background: transparent;
  border-radius: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text);
}

.vc-portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.vc-portfolio-item {
  padding: 12px 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  background: transparent;
}
.vc-portfolio-item .pname {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-navy);
  margin-bottom: 2px;
}
.vc-portfolio-item .psec { font-size: 11.5px; color: var(--color-text-muted); }

.vc-team { display: flex; flex-wrap: wrap; gap: 10px; }
.vc-partner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 9px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
}
.vc-partner .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  font-family: var(--font-tight);
}
.vc-partner .pinfo { font-size: 12.5px; }
.vc-partner .pinfo b { display: block; font-weight: 600; color: var(--color-navy); }
.vc-partner .pinfo span { color: var(--color-text-faint); font-size: 11px; font-weight: 450; }

.vc-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.vc-btn {
  padding: 11px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s, color .12s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  cursor: pointer;
}
.vc-btn-primary { background: var(--color-navy); color: #fff; }
.vc-btn-primary:hover { background: var(--vc-founders); }
.vc-btn-ghost { background: transparent; color: var(--color-navy); border-color: var(--color-border); }
.vc-btn-ghost:hover { border-color: var(--color-navy); }

.vc-verified-foot {
  margin: 24px -48px 0;
  padding: 16px 48px;
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-cream-deep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--color-text-muted);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
.vc-verified-foot .vdot { display: inline-flex; align-items: center; gap: 8px; }
.vc-verified-foot .vdot::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vc-funds);
  box-shadow: 0 0 0 3px var(--vc-funds-soft);
}
.vc-verified-foot a { color: var(--vc-founders); font-weight: 500; }
.vc-verified-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vc-verified-foot a.modal-fundpage-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--color-navy);
  color: #fff;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background .14s, transform .12s;
}
.vc-verified-foot a.modal-fundpage-link:hover { background: #050d18; transform: translateY(-1px); }

/* ---------- Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1040px) {
  .vc-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .vc-hero-visual { max-width: 540px; }
  .vc-signals { grid-template-columns: repeat(2, 1fr); }
  .vc-signal:nth-child(2) { border-right: 0; }
  .vc-signal:nth-child(1), .vc-signal:nth-child(2) {
    border-bottom: 1px solid var(--color-border-soft);
  }
}

@media (max-width: 768px) {
  .vc-container { padding: 0 20px; }
  .vc-hero { padding: 40px 0 28px; }
  .vc-hero h1 { font-size: clamp(32px, 7vw, 44px); line-height: 1.05; }
  .vc-hero .vc-hero-deck { font-size: 15px; margin-top: 12px; }

  /* Stats collapse to a 2x2 grid on mobile so each number gets enough
     breathing room. Separator lines are dropped, replaced by a subtle
     card-grid feel via gap and a single top accent rule. */
  .vc-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    padding-top: 18px;
  }
  .vc-hero-stats .stat-item {
    padding: 0;
  }
  .vc-hero-stats .stat-item:first-child { padding-left: 0; }
  .vc-hero-stats .stat-item:not(:last-child)::after { display: none; }
  .vc-hero-stats b { font-size: 22px; }

  .vc-search-input { padding: 14px 110px 14px 44px; font-size: 14.5px; }
  .vc-qmatch-btn { padding: 8px 12px; font-size: 12px; }
  .vc-qmatch-btn span { display: none; }

  /* Filter row becomes a horizontal scroll strip with soft gradient edges
     that hint at scrollability without adding visible scrollbars. */
  .vc-filters .vc-container {
    position: relative;
    padding-right: 20px;
    padding-left: 20px;
  }
  .vc-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 12px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-padding-left: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .vc-filter-row::-webkit-scrollbar { display: none; }
  .vc-filters .vc-container::before,
  .vc-filters .vc-container::after {
    content: "";
    position: absolute;
    top: 12px; bottom: 12px;
    width: 24px;
    pointer-events: none;
    z-index: 2;
  }
  .vc-filters .vc-container::before {
    left: 20px;
    background: linear-gradient(to right, var(--color-white) 30%, transparent);
  }
  .vc-filters .vc-container::after {
    right: 20px;
    background: linear-gradient(to left, var(--color-white) 30%, transparent);
  }
  .vc-filter-label { display: inline-flex; }
  .vc-filter-label-or { display: none; }
  .vc-clear-btn { margin-left: 0; }
  .vc-chip { padding: 7px 12px; font-size: 12.5px; flex-shrink: 0; }
  .vc-briefing { padding: 14px; gap: 14px; font-size: 12.5px; }
  .vc-briefing .brf-hint { width: 100%; margin-left: 0; margin-top: 4px; }

  .vc-sort-info:hover::after,
  .vc-sort-info:focus::after { width: 200px; right: 0; }

  .vc-modal-backdrop {
    padding: 0;
    align-items: stretch;
    background: var(--color-white) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .vc-modal {
    max-width: 100%;
    border-radius: 0;
    margin: 0;
    min-height: 100dvh;
    box-shadow: none;
  }
  .vc-modal-close { top: 12px; right: 12px; width: 34px; height: 34px; }
  .vc-modal-hero { flex-direction: row; align-items: flex-start; padding: 18px 56px 16px 18px; gap: 14px; }
  .vc-modal-logo { width: 52px; height: 52px; font-size: 19px; border-radius: 12px; }
  .vc-modal-hero h2 { font-size: 20px; line-height: 1.18; margin-bottom: 6px; }
  .vc-modal-meta { font-size: 12.5px; gap: 6px 10px; margin-bottom: 8px; }
  .vc-modal-save {
    position: static;
    display: flex;
    justify-content: center;
    width: auto;
    margin: 4px 18px 14px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
  }
  .vc-modal-body { padding: 0 18px; }
  .vc-stats-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 18px 0 !important;
    padding: 0 !important;
    border-bottom: 0 !important;
  }
  .vc-stat {
    padding: 14px 16px !important;
    background: var(--color-white);
    border: 1px solid var(--color-border-soft);
    border-radius: 12px;
    border-left: 1px solid var(--color-border-soft);
  }
  .vc-stat:first-child { padding-left: 16px !important; }
  .vc-signals { grid-template-columns: 1fr; }
  .vc-signal { border-right: 0 !important; border-bottom: 1px solid var(--color-border-soft); }
  .vc-signal:last-child { border-bottom: 0; }
  .vc-verified-foot { margin: 16px -18px 0; padding: 16px 18px; }
}

/* ========== Quick Match breadcrumb banner =================================
   Shown above the rails after the wizard applies. Summary + Edit + Clear. */

/* The banner-section is in the DOM at all times but the banner inside is
   hidden by default. We collapse the wrapper's padding when there is no
   visible banner so it does not introduce dead space between hero and
   filters. :has() is widely supported in modern browsers (Chrome 105+,
   Safari 15.4+, Firefox 121+). */
.qm-banner-section { padding: 0; }
.qm-banner-section:has(.qm-banner:not([hidden])) { padding: 14px 0 6px; }
.qm-banner[hidden] { display: none !important; }
.qm-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--vc-founders);
  background: var(--vc-founders-soft);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--vc-founders-deep);
  flex-wrap: wrap;
}
.qm-banner-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--color-white);
  color: var(--vc-founders);
}
.qm-banner-icon svg { width: 15px; height: 15px; }
.qm-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.45;
}
.qm-banner-text b { color: var(--color-navy); font-weight: 600; }
.qm-banner-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.qm-banner-btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--vc-founders);
  background: var(--color-white);
  color: var(--vc-founders-deep);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.qm-banner-btn:hover { background: var(--vc-founders); color: var(--color-white); }
.qm-banner-btn-clear {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-muted);
}
.qm-banner-btn-clear:hover { color: var(--color-navy); background: transparent; }

@media (max-width: 640px) {
  .qm-banner { font-size: 12.5px; gap: 8px; padding: 10px 12px; }
  .qm-banner-icon { width: 24px; height: 24px; }
  .qm-banner-actions { width: 100%; justify-content: flex-end; gap: 4px; }
}

/* ========== Co-investor chip (external, non-clickable) ====================
   Co-investors not present in the directory render as muted span, no
   pointer cursor, no hover. Avoids the silent click no-op bug. */

.vc-co-chip-external {
  background: transparent !important;
  border-color: var(--color-border-soft) !important;
  color: var(--color-text-muted) !important;
  cursor: default !important;
}
.vc-co-chip-external:hover {
  background: transparent !important;
  border-color: var(--color-border-soft) !important;
}
.vc-co-chip-external .co-logo,
.vc-co-chip .co-logo-muted {
  background: var(--color-cream-deep) !important;
  color: var(--color-text-muted) !important;
}

/* ========== Quick Match wizard ============================================
   Centered modal with stepper, single + multi select chips, live match
   count footer. Uses the same brand tokens as the rest of the page. */

.qm-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(10, 22, 40, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .18s ease;
}
.qm-overlay.open {
  display: flex;
  opacity: 1;
}
body.qm-open { overflow: hidden; }

.qm-card {
  width: 100%;
  max-width: 540px;
  background: var(--color-white);
  border-radius: 18px;
  padding: 28px 28px 22px;
  box-shadow: 0 20px 60px rgba(10, 22, 40, 0.25);
  position: relative;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
}
.qm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qm-close:hover { background: var(--color-cream-deep); color: var(--color-navy); }
.qm-close svg { width: 18px; height: 18px; }

.qm-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}
.qm-progress b { color: var(--color-navy); }
.qm-progress-count {
  color: var(--vc-founders);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
}
.qm-progress-count b { color: var(--vc-founders); }

.qm-title {
  font-family: var(--font-tight);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-navy);
  margin: 0 0 18px;
  letter-spacing: -0.015em;
}

.qm-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  overflow-y: auto;
  margin-bottom: 18px;
  padding-right: 4px;
}
.qm-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color .14s, background .14s, color .14s;
  user-select: none;
}
.qm-option:hover { border-color: var(--color-text-muted); }
.qm-option input { position: absolute; opacity: 0; pointer-events: none; }
.qm-option.active {
  border-color: var(--vc-founders);
  background: var(--vc-founders-soft);
  color: var(--vc-founders-deep);
}
.qm-option-check {
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vc-founders);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity .14s, transform .14s;
}
.qm-option-check svg { width: 14px; height: 14px; }
.qm-option.active .qm-option-check { opacity: 1; transform: scale(1); }

.qm-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--color-border-soft);
  padding-top: 16px;
}
.qm-btn {
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s, transform .12s;
  font-family: inherit;
  letter-spacing: 0.005em;
}
.qm-btn-primary {
  margin-left: auto;
  background: var(--color-navy);
  color: var(--color-white);
}
.qm-btn-primary:hover { background: var(--vc-founders); transform: translateY(-1px); }
.qm-btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.qm-btn-ghost:hover { background: var(--color-cream-deep); }
.qm-btn-link {
  background: transparent;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 3px;
  border: none;
  padding: 10px 6px;
}
.qm-btn-link:hover { color: var(--color-navy); text-decoration-color: var(--color-navy); }

@media (max-width: 540px) {
  .qm-card { padding: 22px 18px 16px; max-height: 100dvh; border-radius: 0; }
  .qm-overlay { padding: 0; align-items: stretch; }
  .qm-overlay.open { align-items: stretch; }
  .qm-title { font-size: 19px; }
  .qm-body { grid-template-columns: 1fr; }
  .qm-foot { gap: 8px; }
  .qm-btn { padding: 11px 14px; font-size: 13px; }
  .qm-btn-link { padding: 11px 4px; }
}

/* ========== Outreach Pack ================================================
   Inline section in the modal that turns the fund record into a ready-to-
   send cold email and a 1-page PDF brief. Lives between key questions and
   the contact section. */

.vc-outreach .vc-outreach-sub {
  margin: 4px 0 14px;
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.vc-outreach-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.vc-btn-outreach {
  background: var(--color-white);
  color: var(--color-navy);
  border: 1px solid var(--color-border);
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  transition: border-color .14s, background .14s, transform .12s, box-shadow .14s;
  font-family: inherit;
}
.vc-btn-outreach:hover {
  border-color: var(--vc-founders);
  background: var(--vc-founders-soft);
  color: var(--vc-founders-deep);
  transform: translateY(-1px);
  box-shadow: var(--vc-shadow-sm);
}
.vc-btn-outreach[disabled] { opacity: .55; cursor: wait; transform: none; }
.vc-btn-outreach svg { width: 16px; height: 16px; flex-shrink: 0; }

.vc-outreach-panel { margin-top: 16px; }
.vc-outreach-panel[hidden] { display: none; }
.vc-outreach-email {
  background: var(--color-cream-deep);
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vc-outreach-email-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vc-outreach-tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.vc-outreach-subject {
  font-family: var(--font-tight);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.35;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  padding: 10px 12px;
}
.vc-outreach-body {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-text);
  white-space: pre;
  overflow-wrap: normal;
}
.vc-outreach-body:focus {
  outline: none;
  border-color: var(--vc-founders);
  box-shadow: 0 0 0 3px var(--vc-founders-soft);
}
.vc-outreach-email-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.vc-outreach-email-foot .vc-btn { padding: 9px 14px; font-size: 13px; }
.vc-outreach-email-foot .vc-btn-link {
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  padding: 9px 6px;
  margin-left: auto;
  font-family: inherit;
  cursor: pointer;
  font-size: 13px;
}
.vc-outreach-email-foot .vc-btn-link:hover { color: var(--color-navy); }
.vc-outreach-email-foot .is-copied {
  background: var(--vc-funds-deep);
  border-color: var(--vc-funds-deep);
}

@media (max-width: 640px) {
  .vc-outreach-actions { flex-direction: column; align-items: stretch; }
  .vc-btn-outreach { justify-content: center; width: 100%; }
  .vc-outreach-email { padding: 12px; }
  .vc-outreach-body { min-height: 220px; font-size: 12px; }
  .vc-outreach-email-foot { gap: 6px; }
  .vc-outreach-email-foot .vc-btn { flex: 1 1 auto; justify-content: center; }
  .vc-outreach-email-foot .vc-btn-link {
    width: 100%;
    margin-left: 0;
    text-align: center;
    order: 99;
  }
}

/* ---------- 1-page PDF brief (off-screen, html2pdf renders it) ------------
   Self-contained styles. Lives inside .vc-brief-pdf. Renders cleanly at
   8.5in width with portrait Letter. */

.vc-brief-pdf {
  width: 7.5in;
  font-family: "Inter Tight", "Inter", -apple-system, system-ui, sans-serif;
  color: #0A1628;
  font-size: 11px;
  line-height: 1.5;
  background: #ffffff;
  padding: 4px;
}
.vc-brief-pdf h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.vc-brief-pdf h2 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6B7280;
  margin: 0 0 8px;
}
.vc-brief-pdf p { margin: 0 0 8px; }
.vc-brief-pdf .b-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1.5px solid #0A1628;
  margin-bottom: 18px;
}
.vc-brief-pdf .b-logo { flex-shrink: 0; }
.vc-brief-pdf .b-logo-img,
.vc-brief-pdf .b-logo-fallback {
  width: 56px; height: 56px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  object-fit: contain;
}
.vc-brief-pdf .b-logo-img { background: #fff; border: 1px solid #E5E7EB; padding: 4px; }
.vc-brief-pdf .b-tagline { font-size: 12px; color: #4B5563; margin: 0 0 4px; font-style: italic; }
.vc-brief-pdf .b-meta { font-size: 10.5px; color: #6B7280; margin: 0; }

.vc-brief-pdf .b-cols {
  display: flex;
  gap: 22px;
  margin-bottom: 18px;
}
.vc-brief-pdf .b-col-l { flex: 1.25; min-width: 0; }
.vc-brief-pdf .b-col-r { flex: 1; min-width: 0; }

.vc-brief-pdf .b-thesis {
  font-size: 11px;
  line-height: 1.55;
  color: #111827;
}
.vc-brief-pdf .b-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.vc-brief-pdf .b-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  font-size: 9.5px;
  font-weight: 500;
  color: #374151;
}
.vc-brief-pdf .b-tag-c {
  background: #F3EFFE;
  border-color: #DDD6FE;
  color: #6D28D9;
}
.vc-brief-pdf .b-sectors { font-size: 10.5px; color: #4B5563; margin-top: 6px; }

.vc-brief-pdf .b-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}
.vc-brief-pdf .b-stat {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vc-brief-pdf .b-stat span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6B7280;
  font-weight: 600;
}
.vc-brief-pdf .b-stat b {
  font-size: 12px;
  color: #0A1628;
  font-weight: 600;
}

.vc-brief-pdf .b-questions ol {
  margin: 0;
  padding-left: 16px;
}
.vc-brief-pdf .b-questions li {
  margin-bottom: 6px;
  font-size: 10.5px;
  color: #111827;
  line-height: 1.45;
}

.vc-brief-pdf .b-people {
  border-top: 1px solid #E5E7EB;
  padding-top: 14px;
  margin-bottom: 18px;
}
.vc-brief-pdf .b-people-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.vc-brief-pdf .b-person {
  flex: 1 1 30%;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.vc-brief-pdf .b-person b { font-size: 11.5px; color: #0A1628; font-weight: 600; }
.vc-brief-pdf .b-person span { font-size: 10px; color: #6B7280; }
.vc-brief-pdf .b-person .b-person-li { color: #6D28D9; word-break: break-all; }

.vc-brief-pdf .b-foot {
  border-top: 1px solid #E5E7EB;
  padding-top: 10px;
  font-size: 9.5px;
  color: #6B7280;
  text-align: center;
}

/* ==========================================================================
   Editorial deal log (Idea 4) + IC cadence (Idea 6) + Claim flow (Idea 5)
   May 2026 sprint
   ========================================================================== */
.vc-section-h-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.vc-section-h-row h3 { margin: 0; }
.vc-section-h-row .vc-section-sub {
  font-size: 11.5px;
  color: var(--color-text-muted, #6B7280);
}
.vc-section-h-row .vc-section-sub a {
  color: var(--vc-funds-deep, #0F6E56);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dotted currentColor;
}
.vc-section-h-row .vc-section-sub a:hover { border-bottom-style: solid; }

.vc-deal-log .vc-deal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vc-deal-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--color-line, #E5E7EB);
  border-radius: 10px;
  background: #fff;
  transition: border-color 120ms ease;
}
.vc-deal-row:hover { border-color: rgba(15,110,86,0.35); }
.vc-deal-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vc-deal-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text, #0A1628);
  font-variant-numeric: tabular-nums;
}
.vc-deal-role {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}
.vc-deal-role.role-lead {
  color: var(--vc-funds-deep, #0F6E56);
  background: var(--vc-funds-soft, #DBF1E8);
}
.vc-deal-role.role-participated,
.vc-deal-role.role-part {
  color: var(--color-text-muted, #6B7280);
  background: #F1F3F5;
}
.vc-deal-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.vc-deal-co {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text, #0A1628);
}
.vc-deal-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.vc-deal-source-wrap { white-space: nowrap; }
.vc-deal-source {
  font-size: 11.5px;
  color: var(--color-text-muted, #6B7280);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.vc-deal-source:hover {
  color: var(--vc-funds-deep, #0F6E56);
  border-bottom-style: solid;
}
@media (max-width: 640px) {
  .vc-deal-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .vc-deal-meta { flex-direction: row; align-items: center; }
}

/* ==========================================================================
   Unified modal footer (May 2026 redesign)
   Replaces the separate Contact + Claim sections. One primary CTA in a dark
   band, quiet utility links with brand icons, and a sober claim row.
   ========================================================================== */
.vc-modal-foot {
  padding: 28px 0 8px;
  margin-top: 2px;
  border-top: 1px solid var(--color-border-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Primary CTA — dark band with a violet glow, inverted white button. */
.vc-foot-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  padding: 20px 22px;
  border-radius: 16px;
  background:
    radial-gradient(130% 180% at 100% 0%, rgba(124,92,246,0.34) 0%, rgba(124,92,246,0) 56%),
    linear-gradient(135deg, #0A1628 0%, #16243f 100%);
  box-shadow: var(--vc-shadow);
}
.vc-foot-cta-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  flex: 1 1 240px;
}
.vc-foot-cta-copy b {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  font-family: var(--font-tight);
  letter-spacing: -0.012em;
}
.vc-foot-cta-copy span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}
.vc-foot-cta-btn {
  flex-shrink: 0;
  background: #fff;
  color: var(--color-navy);
  border-radius: 9px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.18);
  transition: background .14s, color .14s, transform .12s;
}
.vc-foot-cta-btn:hover {
  background: var(--vc-founders-soft);
  color: var(--vc-founders-deep);
  transform: translateY(-1px);
}

/* Quiet utility links — globe + real LinkedIn glyph. */
.vc-foot-links {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px;
}
.vc-foot-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background .14s, color .14s;
}
.vc-foot-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.vc-foot-link:hover { background: var(--color-cream-deep); color: var(--color-navy); }
.vc-foot-link-li:hover { color: #0A66C2; }
.vc-foot-sep {
  width: 1px;
  height: 16px;
  background: var(--color-border);
  margin: 0 2px;
}

/* Claim row — sober card, no dashed border. */
.vc-foot-claim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--color-cream-deep);
  border: 1px solid var(--color-border-soft);
}
.vc-foot-claim-text {
  margin: 0;
  flex: 1 1 260px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.vc-foot-claim-text b { color: var(--color-navy); font-weight: 600; }
.vc-foot-claim-btn {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 9px 15px;
  cursor: pointer;
  transition: border-color .14s, background .14s, color .14s;
}
.vc-foot-claim-btn:hover {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: #fff;
}

@media (max-width: 640px) {
  .vc-foot-cta { padding: 16px; }
  .vc-foot-cta-btn { width: 100%; justify-content: center; }
  .vc-foot-claim-btn { width: 100%; justify-content: center; text-align: center; }
}

/* ==========================================================================
   May 2026 audit — sidebar layout, mini cards, modal stat icons,
   search under stats, claim modal, cold email form
   ========================================================================== */

/* ---------- Search under stats ----------------------------------------- */
.vc-search-wrap.vc-search-under-stats {
  margin-top: 22px;
  max-width: 640px;
}
@media (max-width: 768px) {
  .vc-search-wrap.vc-search-under-stats { margin-top: 18px; }
}

/* ---------- Two-column board: sticky sidebar + results ----------------- */
.vc-board { padding: 0 0 80px; }
.vc-board-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 12px;
}
@media (max-width: 1023px) {
  .vc-board-grid { grid-template-columns: 1fr; gap: 16px; }
}

.vc-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 22px 22px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--vc-radius-lg, 16px);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.vc-sidebar::-webkit-scrollbar { width: 6px; }
.vc-sidebar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }

.vc-sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border-soft);
  margin-bottom: 18px;
}
.vc-sidebar-head h2 {
  font-family: var(--font-tight);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0;
  letter-spacing: -0.01em;
}
.vc-sidebar .vc-clear-btn {
  margin-left: 0;
  font-size: 11.5px;
  padding: 4px 8px;
}

.vc-filter-group {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border-soft);
}
.vc-filter-group:last-child { border-bottom: 0; }
.vc-filter-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.vc-filter-badge {
  background: var(--vc-founders, #6D28D9);
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: center;
}
.vc-filter-group.active .vc-filter-title { color: var(--color-navy); }

/* In sidebar mode, the dropdowns become flat always-visible lists. */
.vc-sidebar .vc-dropdown {
  position: static;
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  max-height: none;
  overflow: visible;
  z-index: auto;
  animation: none;
}
.vc-sidebar .vc-dropdown-item {
  padding: 6px 0;
  font-size: 12.5px;
  border-radius: 4px;
  color: var(--color-text);
  background: transparent;
}
.vc-sidebar .vc-dropdown-item:hover { background: transparent; color: var(--color-navy); }
.vc-sidebar .vc-dropdown-item input[type=checkbox] {
  appearance: none;
  width: 15px; height: 15px;
  border: 1.5px solid var(--color-border);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  background: #fff;
  transition: border-color 100ms ease, background 100ms ease;
}
.vc-sidebar .vc-dropdown-item input[type=checkbox]:hover { border-color: var(--color-text-muted); }
.vc-sidebar .vc-dropdown-item input[type=checkbox]:checked {
  background: var(--vc-founders, #6D28D9);
  border-color: var(--vc-founders, #6D28D9);
}
.vc-sidebar .vc-dropdown-item input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Results column */
.vc-board-grid .vc-results {
  padding: 0;
  min-width: 0; /* prevents grid blowout */
}
.vc-board-grid .vc-results-header {
  margin: 0 0 16px;
  justify-content: flex-end;
}

/* Mobile filter toggle button */
.vc-filter-mobile-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy);
  cursor: pointer;
  margin-bottom: 12px;
  align-self: flex-start;
}
.vc-filter-mobile-toggle:hover { border-color: var(--color-navy); }
.vc-filter-mobile-toggle svg { width: 14px; height: 14px; }
.vc-filter-mobile-count {
  background: var(--vc-founders, #6D28D9);
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1023px) {
  .vc-filter-mobile-toggle { display: inline-flex; }
  .vc-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 320px;
    max-width: 88vw;
    max-height: 100vh;
    z-index: 60;
    border-radius: 0;
    border-right: 1px solid var(--color-border);
    box-shadow: var(--vc-shadow-lg, 0 18px 40px rgba(10, 22, 40, 0.18));
    transform: translateX(-100%);
    transition: transform 220ms ease;
    padding-top: 20px;
  }
  .vc-sidebar.open { transform: translateX(0); }
  body.vc-sidebar-open { overflow: hidden; }
  body.vc-sidebar-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(10, 22, 40, 0.45);
    backdrop-filter: blur(2px);
    z-index: 55;
  }
}

/* ---------- Modal stat icons (#6) -------------------------------------- */
.vc-stat { position: relative; }
.vc-stat-icon {
  width: 14px; height: 14px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 6px;
  color: var(--color-text-muted);
}
.vc-stat-icon svg {
  width: 100%; height: 100%;
  display: block;
  stroke: currentColor;
}

/* ---------- Claim screen (#8, May 2026 full-screen takeover) -----------
   Pas un modal nested mais un écran à part entière. Z-index 100 pour être
   au-dessus du drawer (z-80). Fond blanc, contenu centré, header avec
   bouton Back. Le drawer est fermé avant ouverture, ré-ouvert au close. */
.vc-claim-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--color-white);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 180ms ease;
}
.vc-claim-overlay.open { display: flex; opacity: 1; }
.vc-claim-card {
  background: transparent;
  box-shadow: none;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 80px 32px 40px;
  position: relative;
}
.vc-claim-card h2 {
  font-family: var(--font-tight);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--color-navy);
}
.vc-claim-card .vc-claim-card-sub {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0 0 18px;
}
.vc-claim-form { display: flex; flex-direction: column; gap: 12px; }
.vc-claim-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--color-text-muted);
}
.vc-claim-form input,
.vc-claim-form textarea {
  font: inherit;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.vc-claim-form input:focus,
.vc-claim-form textarea:focus {
  outline: none;
  border-color: var(--vc-founders, #6D28D9);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.12);
}
.vc-claim-form textarea { min-height: 80px; resize: vertical; }
.vc-claim-form .vc-claim-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.vc-claim-card .vc-claim-status {
  font-size: 12px;
  margin-top: 8px;
  color: var(--color-text-muted);
  min-height: 18px;
}
.vc-claim-card .vc-claim-status.ok { color: var(--vc-funds-deep, #0F6E56); }
.vc-claim-card .vc-claim-status.err { color: #B91C1C; }
.vc-claim-card .vc-claim-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
}
.vc-claim-card .vc-claim-close:hover { background: var(--color-cream-deep, #F5F1EA); color: var(--color-navy); }

/* Topbar of the full-screen claim view. Sticky to the top of the overlay
   so the Back button stays in reach while the form scrolls. */
.vc-claim-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border-soft);
}
.vc-claim-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  padding: 8px 12px;
  margin-left: -12px;
  border-radius: 8px;
  cursor: pointer;
  transition: color .12s var(--vc-ease-snap), background .12s var(--vc-ease-snap);
}
.vc-claim-back:hover { color: var(--color-navy); background: var(--vc-r-surface-2); }
.vc-claim-back svg { width: 16px; height: 16px; flex-shrink: 0; }
.vc-claim-back:focus-visible { outline: 2px solid var(--vc-r-violet); outline-offset: 2px; }
.vc-claim-topbar-fund {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  font-family: var(--font-tight);
}

@media (max-width: 640px) {
  .vc-claim-card { padding: 28px 18px 32px; }
  .vc-claim-topbar { padding: 12px 16px; }
  .vc-claim-back span { display: none; }
  .vc-claim-back svg { width: 18px; height: 18px; }
  .vc-claim-back { padding: 10px; min-height: 44px; min-width: 44px; justify-content: center; }
  .vc-claim-card h2 { font-size: 22px; }
}
.vc-claim-card .vc-claim-close svg { width: 16px; height: 16px; stroke: currentColor; }

/* ---------- Outreach Pack form (#7) ------------------------------------ */
.vc-outreach-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  background: var(--color-cream, #FAF7F2);
}
.vc-outreach-form .vc-of-row { display: flex; flex-direction: column; gap: 4px; }
.vc-outreach-form .vc-of-row.full { grid-column: 1 / -1; }
.vc-outreach-form label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--color-text-muted);
}
.vc-outreach-form input,
.vc-outreach-form textarea,
.vc-outreach-form select {
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 8px 10px;
  background: #fff;
}
.vc-outreach-form input:focus,
.vc-outreach-form textarea:focus,
.vc-outreach-form select:focus {
  outline: none;
  border-color: var(--vc-founders, #6D28D9);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.10);
}
.vc-outreach-form textarea { min-height: 60px; resize: vertical; }
.vc-outreach-form .vc-of-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.vc-outreach-form .vc-of-hint {
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.vc-outreach-form .vc-of-polish {
  font: inherit;
  font-size: 12px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--vc-founders, #6D28D9);
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 120ms ease;
}
.vc-outreach-form .vc-of-polish:hover { background: var(--vc-founders-deep, #5B21B6); }
.vc-outreach-form .vc-of-polish:disabled { opacity: 0.55; cursor: wait; }
.vc-outreach-form .vc-of-polish svg { width: 12px; height: 12px; stroke: currentColor; }

@media (max-width: 640px) {
  .vc-outreach-form { grid-template-columns: 1fr; }
}

/* ==========================================================================
   May 2026 audit follow-up: rails removed, page bg
   ========================================================================== */
.vc-page { background: var(--color-white); }
.vc-page main { background: transparent; }

/* Filter bar sits directly on the F2F2F2 background. Soften the borders so
   the bar feels like part of the page, not a floating panel. */
.vc-filters .vc-filter-row {
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  background: transparent;
}

/* Chip dropdown gets a slightly stronger shadow on the F2F2F2 bg so it
   reads as a layer above the page. */
.vc-dropdown {
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.06), 0 12px 32px rgba(10, 22, 40, 0.12);
}

/* Modal still wants pure white inside, regardless of page bg. */
.vc-modal { background: #FFFFFF; }

/* QM banner sits on the grey, give it a white bg so it visually pops. */
.qm-banner { background: #FFFFFF; }

/* ==========================================================================
   Cold email feature redesign (May 2026 v2)
   World-class UI for the founder profile form + AI-polished email output.
   The new selectors all sit under .vc-of-* and override prior styles.
   ========================================================================== */

/* ---------- Container reset for outreach panel ----------------------------- */
.vc-outreach-panel { padding: 0; }

/* ---------- The founder profile form (card) -------------------------------- */
.vc-of-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px 22px 18px;
  background: #FFFFFF;
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04);
  margin-bottom: 18px;
  /* Reset any old inheritance from .vc-outreach-form */
  grid-template-columns: none;
}
.vc-of-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.vc-of-head-text { display: flex; flex-direction: column; gap: 2px; }
.vc-of-head h4 {
  margin: 0;
  font-family: var(--font-tight);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-navy);
  text-transform: none;
}
.vc-of-head p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.vc-of-toggle {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  background: var(--color-cream-deep, #F1EBE0);
  border: 1px solid var(--color-border-soft);
  color: var(--color-navy);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.vc-of-toggle:hover { background: var(--color-cream, #FAF7F2); border-color: var(--color-border); }

.vc-of-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.vc-of-card .vc-of-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
}
.vc-of-card .vc-of-row.full { grid-column: 1 / -1; }
.vc-of-card .vc-of-row label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--color-text-muted);
}
.vc-of-card .vc-of-row input,
.vc-of-card .vc-of-row select,
.vc-of-card .vc-of-row textarea {
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 11px 12px;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.vc-of-card .vc-of-row input::placeholder { color: var(--color-text-faint); font-weight: 400; }
.vc-of-card .vc-of-row input:focus,
.vc-of-card .vc-of-row select:focus,
.vc-of-card .vc-of-row textarea:focus {
  outline: none;
  border-color: var(--vc-founders, #6D28D9);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.10);
}

.vc-of-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid var(--color-border-soft);
  padding-top: 18px;
}
.vc-of-foot-hint {
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.vc-of-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  background: var(--color-navy, #0A1628);
  border: 0;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms, transform 140ms, box-shadow 140ms;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.10), 0 6px 14px rgba(10, 22, 40, 0.08);
}
.vc-of-cta:hover {
  background: #142540;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.10), 0 10px 22px rgba(10, 22, 40, 0.16);
}
.vc-of-cta:active { transform: translateY(0); }
.vc-of-cta:disabled { opacity: 0.55; cursor: wait; transform: none; }
.vc-of-cta svg { width: 14px; height: 14px; stroke: currentColor; flex-shrink: 0; }
.vc-of-cta .vc-of-cta-arrow { width: 13px; height: 13px; opacity: 0.7; }
/* Sparkle micro-animation on the button */
.vc-of-cta svg:first-child {
  animation: vcSparkle 3.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes vcSparkle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  45% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-12deg) scale(1.18); }
  55% { transform: rotate(0deg) scale(1); }
}

/* Collapsed mode: hide the grid and the foot-hint, leave just head with toggle */
.vc-of-card.is-collapsed { padding: 14px 18px; gap: 0; }
.vc-of-card.is-collapsed .vc-of-grid,
.vc-of-card.is-collapsed .vc-of-foot { display: none; }
.vc-of-card.is-collapsed .vc-of-head h4 { font-size: 13.5px; }
.vc-of-card.is-collapsed .vc-of-head p { display: none; }

/* ---------- The cold email card ------------------------------------------- */
.vc-of-email {
  background: #FFFFFF;
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 12px 32px rgba(10, 22, 40, 0.06);
  display: flex;
  flex-direction: column;
}

.vc-of-email-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-soft);
  background: linear-gradient(180deg, #FAFAFB 0%, #FFFFFF 100%);
}
.vc-of-email-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vc-of-email-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-cream-deep, #F1EBE0);
  color: var(--color-navy, #0A1628);
  flex-shrink: 0;
}
.vc-of-email-icon svg { width: 14px; height: 14px; stroke: currentColor; }
.vc-of-email-title {
  margin: 0;
  font-family: var(--font-tight);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: -0.005em;
  text-transform: none;
}
.vc-of-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.vc-of-pill svg { width: 11px; height: 11px; stroke: currentColor; }
.vc-of-pill.polished {
  background: var(--vc-founders-soft, #F3EFFE);
  color: var(--vc-founders-deep, #6D28D9);
}
.vc-of-pill.draft {
  background: var(--color-cream-deep, #F1EBE0);
  color: var(--color-text-muted);
}

.vc-of-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border-soft);
}
.vc-of-field:last-of-type { border-bottom: 0; }
.vc-of-field-label {
  font-size: 9.5px;
  letter-spacing: 0.13em;
  font-weight: 700;
  color: var(--color-text-faint, #9AA0A6);
}
.vc-of-subject,
.vc-of-body {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-text);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  resize: none;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.vc-of-subject {
  font-size: 14.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--color-navy);
}
.vc-of-subject:focus,
.vc-of-body:focus {
  outline: none;
  background: rgba(109, 40, 217, 0.04);
  border-radius: 4px;
}
.vc-of-body { min-height: 280px; resize: vertical; }

.vc-of-email-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: #FAFAFB;
  border-top: 1px solid var(--color-border-soft);
}
.vc-of-foot-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.vc-of-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, border-color 120ms, color 120ms, transform 120ms;
}
.vc-of-btn svg { width: 13px; height: 13px; stroke: currentColor; flex-shrink: 0; }
.vc-of-btn.primary {
  background: var(--color-navy, #0A1628);
  color: #FFFFFF;
  border-color: var(--color-navy);
}
.vc-of-btn.primary:hover { background: #142540; border-color: #142540; }
.vc-of-btn.primary.is-copied { background: var(--vc-funds-deep, #047857); border-color: var(--vc-funds-deep); }
.vc-of-btn.ghost {
  background: #FFFFFF;
  color: var(--color-navy);
  border-color: var(--color-border);
}
.vc-of-btn.ghost:hover { background: var(--color-cream-deep, #F1EBE0); border-color: var(--color-navy); }
.vc-of-btn.link {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
  padding: 8px 10px;
}
.vc-of-btn.link:hover { color: var(--color-navy); background: rgba(10, 22, 40, 0.04); }

/* ---------- Loading skeleton ---------------------------------------------- */
.vc-of-email.is-loading { padding: 0; }
.vc-of-email.is-loading .vc-of-email-head { background: #FAFAFB; }
.vc-of-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--vc-founders, #6D28D9);
  border-radius: 50%;
  animation: vcSpin 700ms linear infinite;
  display: inline-block;
}
@keyframes vcSpin { to { transform: rotate(360deg); } }
.vc-of-skeleton { padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.vc-of-skeleton .sk {
  background: linear-gradient(90deg, #F1EBE0 0%, #FAFAFB 50%, #F1EBE0 100%);
  background-size: 200% 100%;
  animation: vcShimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.vc-of-skeleton .sk-line { height: 12px; }
.vc-of-skeleton .w40 { width: 40%; }
.vc-of-skeleton .w55 { width: 55%; }
.vc-of-skeleton .w70 { width: 70%; }
.vc-of-skeleton .w85 { width: 85%; }
.vc-of-skeleton .w90 { width: 90%; }
@keyframes vcShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Mobile: stack form fields */
@media (max-width: 640px) {
  .vc-of-grid { grid-template-columns: 1fr; }
  .vc-of-foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .vc-of-cta { justify-content: center; }
  .vc-of-email-foot { flex-direction: column; align-items: stretch; }
  .vc-of-foot-actions { flex-direction: column; }
  .vc-of-btn { justify-content: center; }
}

/* ==========================================================================
   Mini Canada cartogram (May 2026 modal coverage cell)
   ========================================================================== */
.vc-signal-coverage { align-items: flex-start; }
.vc-coverage-block { display: flex; flex-direction: column; gap: 8px; }
.vc-map-canada {
  width: 172px;
  max-width: 100%;
  height: auto;
  display: block;
}
.vc-map-tile rect {
  fill: #E5E7EB;
  stroke: #FFFFFF;
  stroke-width: 1.2;
  transition: fill 140ms ease;
}
.vc-map-tile text {
  font-size: 8px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  fill: #9AA0A6;
  letter-spacing: 0.02em;
}
.vc-map-tile.on rect {
  fill: var(--vc-founders, #6D28D9);
  stroke: #FFFFFF;
}
.vc-map-tile.on text {
  fill: #FFFFFF;
}
.vc-coverage-text {
  font-size: 12.5px;
  color: var(--color-text);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ==========================================================================
   Modal as tabbed drawer (May 2026)
   Stats bar (always visible context) → tab strip → single active pane.
   ========================================================================== */
/* Stats bar above the nav. Not sticky: it acts as the "always-seen-first"
   context block. The tab strip below is the sticky element while the user
   scrolls inside a pane. */
.vc-modal-statbar { background: var(--color-white); }
.vc-modal-nav {
  position: sticky;
  top: 0;
  z-index: 4;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border-soft);
  padding: 0;
}
.vc-modal-nav-track {
  display: flex;
  gap: 4px;
  padding: 8px 48px;
  overflow-x: auto;
  scrollbar-width: none;
}
.vc-modal-nav-track::-webkit-scrollbar { display: none; }
.vc-mn-link {
  position: relative;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 9px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: color 120ms var(--vc-ease-snap), background 120ms var(--vc-ease-snap);
  letter-spacing: -0.005em;
  cursor: pointer;
}
.vc-mn-link:hover {
  color: var(--color-navy);
  background: var(--color-cream-deep, #F1EBE0);
}
.vc-mn-link.is-active {
  color: #FFFFFF;
  background: var(--color-navy, #0A1628);
  font-weight: 600;
}
.vc-mn-link:focus-visible {
  outline: 2px solid var(--vc-r-violet);
  outline-offset: 2px;
}

/* Tab panes: only the active one is visible. */
.vc-modal-tabbed .vc-modal-pane {
  display: none;
  animation: vc-pane-in .18s var(--vc-ease-snap);
}
.vc-modal-tabbed .vc-modal-pane.is-active {
  display: block;
}
@keyframes vc-pane-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .vc-modal-tabbed .vc-modal-pane { animation: none; }
}

@media (max-width: 768px) {
  .vc-modal-nav-track { padding: 8px 16px; }
  .vc-mn-link { font-size: 12px; padding: 9px 12px; }
}

/* ==========================================================================
   Compare 2 to 3 funds (May 2026)
   - Per-card "+" toggle
   - Floating bottom-right pill with count + Compare CTA
   - Side-by-side drawer overlay
   ========================================================================== */

/* Floating pill */
.vc-compare-pill {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--color-navy, #0A1628);
  color: #FFFFFF;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  z-index: 70;
  box-shadow: 0 4px 12px rgba(10, 22, 40, 0.18), 0 18px 40px rgba(10, 22, 40, 0.20);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}
.vc-compare-pill.is-visible {
  display: inline-flex;
  transform: translateY(0);
  opacity: 1;
}
.vc-compare-pill-count {
  font-size: 12.5px;
  color: #FFFFFF;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}
.vc-compare-pill-count b { color: #FFFFFF; font-weight: 600; margin-right: 2px; }
.vc-compare-pill-cta {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--vc-founders, #6D28D9);
  color: #FFFFFF;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 120ms;
}
.vc-compare-pill-cta:hover { background: var(--vc-founders-deep, #5B21B6); }
.vc-compare-pill-cta svg { width: 13px; height: 13px; stroke: currentColor; }
.vc-compare-pill-clear {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 0;
  color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.vc-compare-pill-clear:hover { background: rgba(255, 255, 255, 0.20); }
.vc-compare-pill-clear svg { width: 12px; height: 12px; stroke: currentColor; }

/* Toast (max 3 reached) */
.vc-compare-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 12px);
  background: var(--color-navy, #0A1628);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 999px;
  z-index: 90;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(10, 22, 40, 0.20);
}
.vc-compare-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Drawer overlay */
.vc-compare-overlay {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: none;
  background: rgba(10, 22, 40, 0.55);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 180ms ease;
}
.vc-compare-overlay.open {
  display: flex;
  opacity: 1;
}

.vc-compare-drawer {
  background: #FFFFFF;
  border-radius: 18px;
  max-width: 1100px;
  width: 100%;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(10, 22, 40, 0.30);
}
.vc-compare-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border-soft);
  flex-wrap: wrap;
}
.vc-compare-head h2 {
  margin: 0 0 2px;
  font-family: var(--font-tight);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-navy);
}
.vc-compare-head p {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.vc-compare-head-actions { display: flex; gap: 6px; align-items: center; }
.vc-compare-clear-btn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.vc-compare-clear-btn:hover { color: var(--color-navy); border-color: var(--color-navy); }
.vc-compare-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-cream-deep, #F1EBE0);
  color: var(--color-text-muted);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.vc-compare-close:hover { background: var(--color-border); color: var(--color-navy); }
.vc-compare-close svg { width: 14px; height: 14px; stroke: currentColor; }

.vc-compare-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
}
.vc-compare-empty {
  font-size: 14px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 60px 20px;
}
.vc-compare-grid {
  display: grid;
  gap: 16px;
}
.vc-compare-grid[data-cols="1"] { grid-template-columns: 1fr; }
.vc-compare-grid[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.vc-compare-grid[data-cols="3"] { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) {
  .vc-compare-grid[data-cols="2"],
  .vc-compare-grid[data-cols="3"] { grid-template-columns: 1fr; }
}

.vc-cmp-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vc-cmp-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.vc-cmp-card-head .vc-logo { width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0; }
.vc-cmp-card-titles { flex: 1; min-width: 0; }
.vc-cmp-card-titles h3 {
  margin: 0;
  font-family: var(--font-tight);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-navy);
  text-transform: none;
}
.vc-cmp-loc {
  font-size: 11.5px;
  color: var(--color-text-muted);
}
.vc-cmp-remove {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vc-cmp-remove:hover { background: var(--color-cream-deep, #F1EBE0); color: var(--color-navy); }
.vc-cmp-remove svg { width: 12px; height: 12px; stroke: currentColor; }

.vc-cmp-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.vc-cmp-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0 4px;
  border-top: 1px solid var(--color-border-soft);
  margin-top: 4px;
}
.vc-cmp-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 12.5px;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-border-soft);
}
.vc-cmp-row:last-child { border-bottom: 0; }
.vc-cmp-l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--color-text-muted);
}
.vc-cmp-v {
  font-size: 12.5px;
  color: var(--color-text);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.vc-cmp-v i { font-style: normal; color: var(--color-text-faint, #9AA0A6); }

.vc-cmp-foot {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.vc-cmp-foot .vc-of-btn {
  flex: 1;
  justify-content: center;
  font-size: 12px;
  padding: 8px 10px;
}

@media (max-width: 768px) {
  .vc-compare-pill { right: 16px; bottom: 16px; padding: 6px 6px 6px 12px; }
  .vc-compare-pill-count { font-size: 12px; }
  .vc-compare-pill-cta { padding: 7px 14px; font-size: 12px; }
}

/* ==========================================================================
   VC DIRECTORY REDESIGN, May 2026 (tool-first layout)
   Dense table view, detail drawer, two-column hero, mode bar, filter pills,
   attribution strip and state surfaces. Built additively on top of the
   existing card layout, which now lives behind the Cards view toggle.
   Token note: the brief proposes #6B5BD6 violet; we reuse the existing
   Fractal founders token (--vc-founders) to avoid introducing a new violet.
   ========================================================================== */
:root {
  --vc-r-violet: var(--vc-founders);
  --vc-r-violet-deep: var(--vc-founders-deep);
  --vc-r-violet-8: rgba(139, 92, 246, 0.08);
  --vc-r-violet-12: rgba(139, 92, 246, 0.12);
  --vc-r-violet-30: rgba(139, 92, 246, 0.30);
  --vc-r-green-deep: #0F6E56;
  --vc-r-green-10: rgba(15, 110, 86, 0.10);
  --vc-r-amber-10: rgba(196, 122, 47, 0.12);
  --vc-r-amber-deep: #9A5B1E;
  --vc-r-blue-10: rgba(47, 111, 235, 0.10);
  --vc-r-blue-deep: #1E4FB0;
  --vc-r-surface-2: #F4F2EC;
  --vc-r-row: 56px;
  --vc-ease-snap: cubic-bezier(0.32, 0.72, 0, 1);
  --vc-ease-drawer: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- HERO, two columns, no stat cards ---------------------------- */
.vc-hero-ctas {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.vc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--vc-radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s var(--vc-ease-snap), border-color .15s var(--vc-ease-snap), transform .15s var(--vc-ease-snap);
}
.vc-cta-primary {
  background: var(--vc-r-violet);
  color: #fff;
  border: 1px solid var(--vc-r-violet);
}
.vc-cta-primary:hover { background: var(--vc-r-violet-deep); border-color: var(--vc-r-violet-deep); }
.vc-cta-primary svg { width: 15px; height: 15px; }
.vc-cta-secondary {
  background: transparent;
  color: var(--color-navy);
  border: 1px solid var(--color-border);
}
.vc-cta-secondary:hover { border-color: var(--color-navy); }
.vc-cta:focus-visible { outline: 2px solid var(--vc-r-violet); outline-offset: 2px; }
.vc-cta-secondary b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- MODE BAR (search, count, sort) ----------------------------- */
.vc-modebar { padding: 8px 0 0; }
.vc-modebar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--color-border-soft);
}
.vc-modebar-search {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 360px;
}
.vc-modebar-search .vc-search-ic {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--color-text-faint);
  pointer-events: none;
}
.vc-modebar-search .vc-search-input {
  width: 100%;
  height: 36px;
  padding: 0 38px 0 33px;
  border: 1px solid var(--color-border);
  border-radius: var(--vc-radius-sm);
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-white);
}
.vc-modebar-search .vc-search-input:focus {
  outline: none;
  border-color: var(--vc-r-violet);
  box-shadow: 0 0 0 3px var(--vc-r-violet-8);
}
/* Search dropdown (Cmd+K style, opens on focus). Position is anchored to
   the .vc-modebar-search wrapper which is position: relative. */
.vc-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--vc-radius);
  box-shadow: 0 12px 28px rgba(10, 22, 40, 0.10), 0 2px 6px rgba(10, 22, 40, 0.06);
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px 0;
  animation: vc-sd-in .14s var(--vc-ease-snap);
}
@keyframes vc-sd-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .vc-search-dropdown { animation: none; }
}
.vc-sd-section { padding: 6px 4px; }
.vc-sd-section + .vc-sd-section { border-top: 1px solid var(--color-border-soft); }
.vc-sd-h {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--color-text-faint);
  padding: 4px 10px;
}
.vc-sd-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  font-family: var(--font-sans);
  transition: background .12s var(--vc-ease-snap);
}
.vc-sd-row:hover, .vc-sd-row:focus-visible {
  background: var(--vc-r-surface-2);
  outline: none;
}
.vc-sd-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-navy);
  letter-spacing: -0.005em;
}
.vc-sd-meta {
  font-size: 11.5px;
  color: var(--color-text-muted);
}
.vc-sd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 10px 4px;
}
.vc-sd-chip {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--vc-r-surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s var(--vc-ease-snap), color .12s var(--vc-ease-snap);
}
.vc-sd-chip:hover {
  background: var(--vc-r-violet-8);
  color: var(--vc-r-violet-deep);
}
.vc-sd-chip.is-on {
  background: var(--vc-r-violet-12);
  color: var(--vc-r-violet-deep);
  border-color: var(--vc-r-violet-30);
}

/* Keyboard hint badge, Linear pattern. Hidden via JS once the input has
   focus or contains a query so it never collides with live text. */
.vc-search-kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--vc-r-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
.vc-modebar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.vc-count-pill {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--vc-r-surface-2);
  padding: 4px 11px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.vc-count-pill b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-navy);
}

/* ---------- DENSE TABLE -------------------------------------------------- */
/* Accessible-only text (e.g. the action column header). Visually hidden,
   still announced by screen readers. */
.vc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.vc-table-wrap { margin-top: 4px; }
.vc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}
.vc-table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.vc-table thead th.is-sortable { cursor: pointer; user-select: none; }
.vc-table thead th.is-sortable:hover { color: var(--color-text-muted); }
.vc-th-sortcaret { display: inline-block; width: 9px; height: 9px; margin-left: 3px; vertical-align: -1px; opacity: 0; transition: opacity .12s; }
.vc-table thead th.is-sortable:hover .vc-th-sortcaret,
.vc-table thead th.is-sorted .vc-th-sortcaret { opacity: 0.7; }
.vc-th-fund     { width: 28%; }
.vc-th-type     { width: 13%; }
.vc-th-stage    { width: 19%; }
.vc-th-ticket   { width: 20%; }
.vc-th-lastdeal { width: 14%; }
.vc-th-act      { width: 6%; }

.vc-trow {
  height: var(--vc-r-row);
  cursor: pointer;
  background: var(--color-white);
  transition: background .15s ease-out;
}
.vc-trow td {
  border-bottom: 1px solid var(--color-border-soft);
  padding: 8px 12px;
  vertical-align: middle;
  font-size: 13px;
  color: var(--color-text);
}
.vc-trow:hover { background: var(--vc-r-surface-2); }
.vc-trow.is-selected { background: var(--vc-r-violet-8); }
.vc-trow:focus-visible { outline: 2px solid var(--vc-r-violet); outline-offset: -2px; }
.vc-trow:focus { outline: 2px solid var(--vc-r-violet); outline-offset: -2px; }

/* ---- Province filter tier separators -------------------------------- */
/* Shown only when a Province filter is active: a labelled band splits the
   results into funds HQ'd in the province (first) and funds that only
   cover it from elsewhere. */
.vc-tier-sep td {
  padding: 18px 12px 7px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border-soft);
}
.vc-tier-sep:first-child td { padding-top: 6px; }
.vc-tier-sep-label {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.vc-tier-sep td .vc-tier-sep-label { margin-right: 9px; }
.vc-tier-sep-count {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-faint);
}
.vc-count-tier { color: var(--color-text-faint); }

/* Entry point to the Palmarès (rankings) page, in the results modebar. */
.vc-palmares-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 140ms ease-out;
}
.vc-palmares-link:hover { color: var(--color-navy); }
.vc-palmares-link svg { width: 14px; height: 14px; flex-shrink: 0; }

.vc-td-fund { display: flex; align-items: center; gap: 10px; }
.vc-trow-logo {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: var(--vc-radius-sm);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  overflow: hidden;
}
.vc-trow-logo.logo-img {
  background: var(--color-white);
  border: 0.5px solid var(--color-border-soft);
  padding: 2px;
}
.vc-trow-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.vc-trow-id { min-width: 0; }
.vc-trow-name {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-navy);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vc-trow-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-faint);
  margin-top: 1px;
}
.vc-td-type { white-space: nowrap; }
.vc-td-stage { color: var(--color-text-muted); font-size: 12.5px; white-space: nowrap; }
.vc-td-ticket { white-space: nowrap; }
.vc-td-lastdeal { white-space: nowrap; }
.vc-td-act { text-align: right; }
.vc-td-act svg { width: 15px; height: 15px; color: var(--color-text-faint); }
.vc-trow:hover .vc-td-act svg { color: var(--vc-r-violet); }

/* Type badges, Linear pattern: neutral chassis + a 6px colored dot.
   The color carries categorical meaning without saturating the table. */
.vc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 2px 8px 2px 7px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  background: var(--vc-r-surface-2);
  color: var(--color-navy);
}
.vc-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-text-faint);
}
.vc-badge-generalist .vc-badge-dot { background: var(--color-text-faint); }
.vc-badge-pureplay   .vc-badge-dot { background: var(--vc-r-violet); }
.vc-badge-cvc        .vc-badge-dot { background: var(--vc-r-green-deep); }
.vc-badge-angel      .vc-badge-dot { background: var(--vc-r-amber-deep); }
.vc-badge-public     .vc-badge-dot { background: var(--vc-r-blue-deep); }

/* Search match highlight, applied to name/meta when a query is active. */
.vc-hl {
  background: var(--vc-r-violet-12);
  color: var(--vc-r-violet-deep);
  padding: 0 1px;
  border-radius: 2px;
  font-weight: inherit;
}

/* Last-deal pill, semantic colour by recency. */
.vc-ld {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.vc-ld-fresh   { background: var(--vc-r-green-10); color: var(--vc-r-green-deep); }
.vc-ld-warm    { background: var(--vc-r-surface-2); color: var(--color-text-muted); }
.vc-ld-cold    { background: var(--vc-r-amber-10); color: var(--vc-r-amber-deep); }
.vc-ld-unknown { background: transparent; color: var(--color-text-faint); padding-left: 0; padding-right: 0; }

/* ticket bars */
.vc-tbar { display: inline-flex; gap: 2px; vertical-align: middle; }
.vc-tbar i {
  display: block;
  width: 5px; height: 12px;
  border-radius: 1px;
  background: var(--vc-r-surface-2);
}
.vc-tbar i.is-on { background: var(--vc-r-violet); }
.vc-tnum { font-size: 11px; color: var(--color-text-faint); margin-left: 7px; vertical-align: middle; }
.vc-tunknown { font-size: 12px; color: var(--color-text-faint); }

/* will-lead cell */
.vc-lead-yes {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500;
  color: var(--vc-r-green-deep);
  background: var(--vc-r-green-10);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.vc-lead-yes svg { width: 11px; height: 11px; }
.vc-lead-no { color: var(--color-text-faint); font-size: 13px; }

/* ---------- DETAIL DRAWER (modal restyled to a right-side panel) -------- */
.vc-modal-backdrop {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0;
}
.vc-modal-backdrop.open { animation: vc-fadeIn .2s ease-out; }
.vc-modal {
  width: min(560px, 100vw);
  max-width: none;
  min-height: 100vh;
  margin: 0;
  border-radius: 0;
  border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 24px rgba(10, 22, 40, 0.10), -2px 0 8px rgba(10, 22, 40, 0.08);
  animation: vc-slideInRight .3s var(--vc-ease-drawer);
}
@keyframes vc-slideInRight {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ---------- FILTER PILLS BAR -------------------------------------------- */
.vc-pillbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0;
}
.vc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-family: var(--font-sans);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s var(--vc-ease-snap), border-color .15s var(--vc-ease-snap);
}
.vc-pill-add {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-weight: 400;
}
.vc-pill-add:hover { border-color: var(--color-text-muted); }
.vc-pill-active {
  background: var(--vc-r-violet-8);
  border: 1px solid var(--vc-r-violet-30);
  color: var(--vc-r-violet-deep);
  font-weight: 500;
}
.vc-pill-x, .vc-pill-plus { display: inline-flex; opacity: 0.6; }
.vc-pill-x:hover { opacity: 1; }
.vc-pill svg { width: 12px; height: 12px; }
.vc-pill-clear {
  background: transparent;
  border: none;
  color: var(--vc-r-violet-deep);
  font-weight: 500;
}
.vc-pill-clear:hover { text-decoration: underline; }
.vc-pill-pop {
  position: relative;
}
.vc-pill-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 190px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--vc-radius);
  box-shadow: var(--vc-shadow-lg);
  padding: 6px;
  display: none;
  max-height: 320px;
  overflow-y: auto;
}
.vc-pill-pop.is-open .vc-pill-menu { display: block; }
.vc-pill-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
}
.vc-pill-opt:hover { background: var(--vc-r-surface-2); }
.vc-pill-opt input { accent-color: var(--vc-r-violet); }

/* ---------- STATE SURFACES (empty, loading, error) ---------------------- */
.vc-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--color-text-muted);
}
.vc-state svg { width: 44px; height: 44px; color: var(--color-text-faint); margin-bottom: 14px; }
.vc-state h3 { font-size: 16px; font-weight: 500; color: var(--color-navy); margin: 0 0 6px; }
.vc-state p { font-size: 13px; margin: 0 0 16px; }
.vc-state-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--vc-radius-sm);
  background: var(--color-white);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy);
  cursor: pointer;
}
.vc-state-btn:hover { border-color: var(--color-navy); }
.vc-skel-row {
  height: var(--vc-r-row);
  border-bottom: 1px solid var(--color-border-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}
.vc-skel-box {
  background: linear-gradient(90deg, var(--vc-r-surface-2) 0%, #ECE9E1 50%, var(--vc-r-surface-2) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: vc-shimmer 1.5s linear infinite;
}
@keyframes vc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- ATTRIBUTION STRIP ------------------------------------------- */
.vc-attribution {
  background: var(--color-cream);
  border-top: 1px solid var(--color-border-soft);
}
.vc-attribution-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  flex-wrap: wrap;
}
.vc-attribution-lead { font-size: 12px; font-weight: 500; color: var(--color-navy); margin: 0 0 4px; }
.vc-attribution-body { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; margin: 0; max-width: 620px; }
.vc-attribution-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--vc-r-violet-deep);
  text-decoration: none;
  white-space: nowrap;
}
.vc-attribution-link:hover { text-decoration: underline; }

/* ---------- RESPONSIVE --------------------------------------------------- */
@media (max-width: 640px) {
  .vc-modal { width: 100vw; }
  .vc-modal-backdrop { background: rgba(10, 22, 40, 0.5); }
  .vc-hero-ctas { flex-direction: column; }
  .vc-hero-ctas .vc-cta { width: 100%; justify-content: center; }
  .vc-modebar-right { width: 100%; justify-content: space-between; margin-left: 0; }
  .vc-modebar-search { max-width: none; }
  .vc-attribution-inner { padding: 20px 0; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .vc-modal { width: 60vw; }
  .vc-tbar { display: none; }
  /* At tablet width the table is tight; hide the Last deal column to
     preserve scannability of the primary fields. */
  .vc-th-lastdeal, .vc-td-lastdeal { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-modal, .vc-modal-backdrop.open { animation: none; }
  .vc-skel-box { animation: none; }
  .vc-hub-hit .vc-map-dot { transition: none; }
}

/* ---------- INTERACTIVE HUB MAP ----------------------------------------- */
.vc-hub-hit { cursor: pointer; }
.vc-hub-hit .vc-map-dot {
  transition: transform .15s var(--vc-ease-snap);
  transform-box: fill-box;
  transform-origin: center;
}
.vc-hub-hit:hover .vc-map-dot { transform: scale(1.22); }
.vc-hub-hit:focus { outline: none; }
.vc-hub-hit:focus-visible .vc-map-dot,
.vc-hub-hit:focus .vc-map-dot { stroke: var(--vc-r-violet-deep); stroke-width: 3; }
.vc-hub-hit.is-active .vc-map-dot { stroke: var(--vc-r-violet-deep); stroke-width: 2.5; }

/* ===== Pre-hydration guard (deep-linked visits) ======================== */
/* When the page is opened with filter params or a fund hash, the SSR table
   is not what the visitor asked for. The inline script in vc-canada.html
   adds .vc-ssr-pending to <html>; we hide the stale table and show a
   loader until vc-directory.js paints the real result. */
.vc-ssr-pending #vcTableWrap { display: none; }
.vc-results-loader { display: none; }
.vc-ssr-pending .vc-results-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52vh;
}
.vc-results-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: var(--vc-r-violet-deep);
  animation: vc-ssr-spin 0.7s linear infinite;
}
@keyframes vc-ssr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .vc-results-spinner { animation: none; }
}

/* ===== Hero KPIs: fund count + data freshness as proper stat blocks ===
   Vasco / Stripe pattern: the number is the visual anchor, the label is
   the caption below. Two blocks separated by a thin divider. */
.vc-hero-kpis {
  display: flex;
  align-items: stretch;
  gap: 20px;
  margin: 18px 0 0;
}
.vc-hero-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.vc-hero-kpi b {
  font-family: var(--font-tight);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-navy);
  font-variant-numeric: tabular-nums;
}
.vc-hero-kpi span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.vc-hero-kpi-sep {
  width: 1px;
  align-self: stretch;
  background: var(--color-border-soft);
}

/* Legacy hero-stat selectors kept as a no-op safety net for cached HTML. */
.vc-hero-stat { display: none; }

/* ==========================================================================
   Drawer scroll one-page (May 2026 redesign).
   Atomic quick-stats strip + clean section spacing. Tabs removed.
   ========================================================================== */

/* Atomic quick-stats: Stage | Ticket | Lead | Activity. Inline strip with
   hairline dividers, label-above-value. */
.vc-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  margin: 0 -48px;
  padding: 16px 48px;
  background: var(--color-white);
}
.vc-qs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 16px;
  border-left: 1px solid var(--color-border-soft);
  min-width: 0;
}
.vc-qs:first-child {
  border-left: 0;
  padding-left: 0;
}
.vc-qs-k {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.vc-qs-v {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-navy);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-tight);
}

/* Co-investors inline under thesis. One line, prefix muted. */
.vc-co-inline {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text);
}
.vc-co-inline-k {
  color: var(--color-text-muted);
  font-weight: 500;
  margin-right: 4px;
}

/* Drawer scroll body. Sections stack vertically with consistent rhythm. */
.vc-modal-scroll .vc-section {
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border-soft);
}
.vc-modal-scroll .vc-section:last-of-type {
  border-bottom: 0;
}
.vc-modal-scroll .vc-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin: 0 0 14px;
  font-family: var(--font-sans);
}

/* Hide tabs strip entirely (kept in HTML for safety net via missing
   selector match). Show all panes simultaneously (no more tabbed display). */
.vc-modal-nav { display: none !important; }
.vc-modal-tabbed .vc-modal-pane,
.vc-modal-pane { display: block !important; animation: none !important; }
.vc-modal-statbar { background: var(--color-white); }

/* Mobile drawer scroll: tighter horizontal rhythm. */
@media (max-width: 640px) {
  .vc-quick-stats {
    margin: 0 -18px;
    padding: 14px 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 0;
  }
  .vc-qs { padding: 0 14px; }
  .vc-qs:nth-child(odd) { border-left: 0; padding-left: 0; }
  .vc-qs:nth-child(2) { border-left: 1px solid var(--color-border-soft); }
  .vc-qs-v { font-size: 14px; }
  .vc-modal-scroll .vc-section { padding: 22px 0; }
  .vc-modal-scroll .vc-section h3 { margin-bottom: 12px; font-size: 10.5px; }
  .vc-co-inline { font-size: 13px; margin-top: 14px; }
}

/* ==========================================================================
   RESPONSIVE OVERHAUL (May 2026, post-redesign sweep)
   Single canonical block, placed at the end of the file so it overrides any
   earlier rule. Ordered tablet -> phone for cascade clarity. Touches only
   what was actually broken under audit: cards grid, KPIs scale, drawer
   width, modebar row stacking, pillbar scrolling, touch targets.
   ========================================================================== */

/* ---- Global: never let the page scroll horizontally on any viewport.
       Applied to body only (not html), because Safari iOS has a long-standing
       bug where overflow-x: hidden on <html> breaks position: sticky on any
       descendant (the .nav header in particular). overflow-x: clip would be
       cleaner but Safari < 16 does not support it. */
body { overflow-x: hidden; }
.vc-page main { overflow-x: hidden; }

/* ---- iPad landscape and below (<=1199px) ----------------------------- */
@media (max-width: 1199px) {
  .vc-container { padding: 0 24px; }
}

/* ---- iPad portrait and below (<=1024px) ------------------------------ */
@media (max-width: 1024px) {
  /* Drawer: 60vw left a useless slice of page behind. Cap at 560px AND
     don't go above 80vw so the founder still sees context. */
  .vc-modal { width: min(560px, 80vw) !important; }
  /* Modebar: stop competing for space. Search takes a full row, the right
     cluster (palmares + count + sort) wraps to row 2. */
  .vc-modebar-search { max-width: none; flex: 1 1 100%; }
  .vc-modebar-right {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
    gap: 10px;
  }
  /* Hero KPIs slightly smaller so they don't dominate. */
  .vc-hero-kpi b { font-size: 26px; }
  /* Stats row in drawer: ensure 2-col stays clean. */
  .vc-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* ---- Large mobile and small tablet (<=768px) ------------------------- */
@media (max-width: 768px) {
  .vc-container { padding: 0 18px; }
  /* Hero: tighter vertical rhythm. */
  .vc-hero { padding: 36px 0 16px; }
  .vc-hero-kpis { gap: 16px; margin-top: 14px; }
  .vc-hero-kpi b { font-size: 24px; }
  .vc-hero-kpi span { font-size: 10.5px; }
  /* Drawer takes the whole viewport on phones-and-up. */
  .vc-modal { width: 100vw !important; max-width: 100vw !important; }
  .vc-modal-backdrop { padding: 0; }
  .vc-modal-body { padding: 0 18px; }
  /* Filter pillbar mobile. We keep flex-wrap (overflow-x auto clips the
     popover menu on iOS Safari). To reduce vertical footprint: tighter
     padding, pills smaller, sticky under the modebar so it stays in
     reach while the user scrolls the fund list. */
  .vc-filters {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-white);
    border-bottom: 0.5px solid var(--color-border-soft);
  }
  .vc-pillbar {
    flex-wrap: wrap;
    overflow: visible;
    padding: 8px 0;
    gap: 6px;
  }
  .vc-pill { padding: 6px 12px; font-size: 12px; }
  /* Modebar-right cluster gets its own row at this width. */
  .vc-modebar-right { width: 100%; justify-content: space-between; gap: 10px; }
  .vc-palmares-link { font-size: 12.5px; }
  /* Search dropdown: smaller max-height so the keyboard does not cover it
     on iOS Safari, and tighter padding. */
  .vc-search-dropdown { max-height: 62vh; }
  /* Tab strip padding follows the new container padding. */
  .vc-modal-nav-track { padding: 8px 18px; }
}

/* ---- Phone (<=640px) ------------------------------------------------- */
@media (max-width: 640px) {
  /* MOBILE TABLE (June 2026: the table is the only view).
     The table collapses into a Linear-style dense row list: logo + name +
     city on the left, ticket range on the right, chevron. Type, stage and
     last-deal columns are sacrificed on phone for scan density; all of it
     lives one tap away in the drawer. */
  .vc-table { table-layout: fixed; }
  .vc-table thead { display: none; }
  .vc-th-type, .vc-td-type,
  .vc-th-stage, .vc-td-stage,
  .vc-th-lastdeal, .vc-td-lastdeal { display: none; }
  .vc-table-wrap {
    background: var(--color-white);
    border-top: 0.5px solid var(--color-border-soft);
  }
  .vc-trow { height: auto; }
  .vc-trow td {
    padding: 16px 0 16px 16px;
    border-bottom: 0.5px solid var(--color-border-soft);
  }
  .vc-trow-logo { width: 36px; height: 36px; border-radius: 8px; }
  .vc-td-fund { gap: 12px; }
  .vc-trow-name { font-size: 14.5px; }
  .vc-trow-meta { font-size: 11.5px; }
  /* Ticket: hide the four bars, keep the number as a clean right-aligned
     column down the list. tabular-nums keeps digits monospaced. */
  .vc-td-ticket { width: 92px; text-align: right; }
  .vc-tbar { display: none; }
  .vc-tnum {
    margin-left: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-navy);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .vc-td-act { width: 34px; padding-right: 14px; }
  .vc-td-act svg { width: 13px; height: 13px; }
  /* Modebar-right: wrap to 2 rows on phone. Palmares link + count pill on
     row 1, sort on row 2. justify-content space-between would overflow
     because sort + count + palmares + gaps > 360px on 393px viewport. */
  .vc-modebar-right { flex-wrap: wrap; justify-content: flex-start; gap: 8px 10px; }
  .vc-sort { margin-left: auto; }
  .vc-sort label { display: none; }
  /* Sort dropdown styled to MATCH the filter pills (same size, same chip
     look) so the modebar reads as one consistent control row instead of
     a white bordered button competing for attention. */
  .vc-sort-pill {
    background: var(--vc-r-surface-2);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0 28px 0 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    box-shadow: none;
  }
  .vc-sort-pill::after {
    right: 11px;
    width: 7px; height: 7px;
    border-right-width: 1.4px;
    border-bottom-width: 1.4px;
  }
  .vc-sort select {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-navy);
  }
  .vc-palmares-link { font-size: 12px; }
  /* iOS Safari zooms when an input has font-size < 16px and you tap it.
     Force every interactive text field, textarea, and select to 16px on
     phones so the viewport never jumps. The visual difference vs 13.5px
     is small, the bug it prevents is loud. */
  .vc-search-input,
  .vc-claim-form input,
  .vc-claim-form textarea,
  .vc-of-card .vc-of-row input,
  .vc-of-card .vc-of-row select,
  .vc-of-card .vc-of-row textarea,
  .vc-sort select,
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  textarea,
  select { font-size: 16px !important; }
  /* Founder outreach form: stack to 1 column. The 2-col grid produced
     inputs ~140px wide which is awkward for an email or full-name field. */
  .vc-of-grid { grid-template-columns: 1fr; gap: 12px; }
  .vc-of-card { padding: 18px 16px 16px; }
  .vc-of-head { gap: 10px; }
  .vc-of-head h4 { font-size: 15px; }
  /* Claim modal padding tighter on phone to maximize content. */
  .vc-claim-overlay { padding: 16px; }
  .vc-claim-card { padding: 22px 20px 18px; }
  .vc-claim-card h2 { font-size: 19px; }
  /* QM wizard buttons honest 44px tap targets. */
  .qm-btn { min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; }
  .qm-btn-link { min-height: 44px; padding: 0 6px; display: inline-flex; align-items: center; }
  /* Hero: even tighter. KPIs gain a small divider on the left of the
     second block since the central vertical sep is too thin on mobile. */
  .vc-hero { padding: 28px 0 12px; }
  .vc-hero-kpis { gap: 0; }
  .vc-hero-kpi-sep { display: none; }
  .vc-hero-kpi { padding-right: 16px; }
  .vc-hero-kpi + .vc-hero-kpi {
    padding-right: 0; padding-left: 16px;
    border-left: 1px solid var(--color-border-soft);
  }
  .vc-hero-kpi b { font-size: 22px; }
  /* Hero compact on phone. One primary CTA only (Find my matches). The
     secondary "Browse all 122 funds" is redundant when the list sits 1
     scroll below. h1 line-height tighter to gain vertical room. */
  .vc-hero { padding: 26px 0 14px; }
  .vc-hero h1 { line-height: 1.06; margin-bottom: 10px; }
  .vc-hero .vc-hero-deck { margin-top: 10px; font-size: 14px; }
  .vc-hero-ctas { margin-top: 18px; gap: 0; }
  .vc-hero-ctas .vc-cta-secondary { display: none; }
  /* Touch targets: Apple HIG strict 44px minimum on every tappable element.
     We use min-height + flex/inline-flex centring so the visual padding
     stays the same but the hit area is honest. */
  .vc-sd-row    { padding: 10px 12px; min-height: 44px; }
  .vc-sd-chip   { padding: 0 14px;    min-height: 44px; display: inline-flex; align-items: center; font-size: 12.5px; }
  .vc-pill      { padding: 0 14px;    min-height: 44px; display: inline-flex; align-items: center; }
  .vc-count-pill{ padding: 0 12px;    min-height: 32px; display: inline-flex; align-items: center; }
  /* Tab strip in drawer: tighter horizontally because tabs sit in a 100vw
     drawer, but still 44px tall for finger taps. */
  .vc-modal-nav-track { padding: 6px 14px; gap: 4px; }
  .vc-mn-link { padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; }
  /* Drawer stats row: switch to 2-col cards already (matches earlier
     mobile override at 1728), make sure values do not clip. */
  .vc-stats-row { padding: 0 !important; margin: 16px 0 !important; }
  .vc-stat-val { font-size: 18px; }
  /* Search input: shrink the right padding now that the kbd badge is hidden,
     otherwise it leaves a 38px dead zone on the right of the typed text. */
  .vc-modebar-search .vc-search-input { padding: 0 12px 0 33px; }
  /* The kbd badge is desktop-only signage; hide it on touch devices. */
  .vc-search-kbd { display: none !important; }
  /* Attribution strip: stack on phones. */
  .vc-attribution-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---- Very narrow phone, iPhone SE 1st gen (<=380px) ------------------ */
@media (max-width: 380px) {
  .vc-container { padding: 0 14px; }
  .vc-hero h1 { font-size: clamp(24px, 8.5vw, 30px); line-height: 1.08; }
  .vc-hero .vc-hero-deck { font-size: 14px; }
  .vc-hero-kpi b { font-size: 20px; }
  .vc-hero-kpi span { font-size: 10px; }
  .vc-modal-hero h2 { font-size: 18px; }
  .vc-mn-link { padding: 7px 10px; font-size: 11.5px; }
  .vc-stat-val { font-size: 16px; }
  .vc-trow td { padding: 14px 0 14px 14px; }
  .vc-td-act { padding-right: 12px; }
}