/* Prime Portfolio Directory — styles
   Visual system inspired by primevp.in: warm off-white, deep black, brand orange. */

:root {
  --bg: #FAF6EF;
  --bg-2: #F1EBDF;
  --ink: #0E0E0E;
  --ink-2: #2A2A2A;
  --muted: #6B6258;
  --line: #E3DACA;
  --line-2: #D6CBB6;
  --orange: #FF5A1F;
  --orange-2: #E8480F;
  --orange-soft: #FFE9DD;
  --success: #0E8A00;
  --warn: #B45309;
  --shutdown: #6B6258;

  --font-display: "Fraunces", "Tiempos Headline", Georgia, serif;
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
}

button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ───────── Header ───────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250,246,239,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
}
.brand-mark {
  width: 36px; height: 36px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-mark svg { display: block; }
.brand-text {
  display: flex; flex-direction: column; line-height: 1;
}
.brand-text .b1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.brand-text .b2 {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.header-search {
  flex: 1;
  max-width: 560px;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px 10px 42px;
  transition: border-color .15s, background .15s;
}
.header-search:focus-within {
  border-color: var(--ink);
  background: #fff;
}
.header-search svg.search-icon {
  position: absolute;
  left: 14px;
  width: 16px; height: 16px;
  color: var(--muted);
}
.header-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.header-search .kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  transition: all .15s;
}
.btn-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-orange {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--orange);
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
}
.btn-orange:hover { background: var(--orange-2); border-color: var(--orange-2); }

/* ───────── Hero / Stats ───────── */
.hero {
  max-width: 1320px;
  margin: 0 auto;
  padding: 56px 32px 24px;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 72px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 20px;
  max-width: 950px;
}
.hero h1 em {
  font-style: italic;
  color: var(--orange);
}
.hero-sub {
  font-size: 17px;
  color: var(--muted);
  max-width: 640px;
  line-height: 1.5;
  margin: 0 0 40px;
}
/* Desktop: center the hero text — feels more balanced against the
   centered content below (stats grid, list rows). Mobile stays left-aligned
   so headlines don't break awkwardly on narrower screens. */
@media (min-width: 761px) {
  .hero { text-align: center; }
  .hero h1 { margin-left: auto; margin-right: auto; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  /* Center the search bar between brand and Ask button.
     Symmetric auto margins push it into the visual middle of the header. */
  .header-search { margin-left: auto; margin-right: auto; }
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  padding: 24px 24px 24px 0;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.stat:last-child { border-right: none; padding-right: 0; }
.stat:not(:first-child) { padding-left: 24px; }
.stat .num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 44px;
  letter-spacing: -0.03em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex: 0 0 auto;
}
.stat .num .plus { color: var(--orange); font-size: 28px; }
.stat .lbl {
  font-size: 12px;
  color: var(--muted);
  margin-top: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ───────── News ticker (seamless dual-track) ───────── */
.ticker {
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.ticker-label {
  flex-shrink: 0;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  white-space: nowrap;
}
.ticker-label .pulse {
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: ticker-pulse 1.6s ease-in-out infinite;
}
@keyframes ticker-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}
.ticker-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 150s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-row {
  display: flex;
  flex-shrink: 0;
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 14px 24px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.08);
  transition: background .15s;
}
.ticker-item:hover { background: rgba(255,90,31,0.15); }
.ticker-item .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
.ticker-item .name { font-weight: 600; }
.ticker-item .text {
  color: rgba(250,246,239,0.7);
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ───────── Filters bar ───────── */
.filters {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 32px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.filters .label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 4px;
}
.chip-select {
  position: relative;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 13px;
  color: var(--ink-2);
  transition: all .15s;
}
.chip:hover { border-color: var(--ink); }
.chip.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.chip .caret {
  width: 10px; height: 10px;
  display: inline-block;
  margin-left: 2px;
}
.chip .clear {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  font-size: 11px;
  margin-left: 2px;
}
.chip-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  min-width: 220px;
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
}
.chip-menu .opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background .1s;
}
.chip-menu .opt:hover { background: var(--bg-2); }
.chip-menu .opt.selected { background: var(--orange-soft); color: var(--orange-2); font-weight: 500;}
.chip-menu .opt .ct { font-size: 11px; color: var(--muted); }

.filters-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sort-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 13px;
  color: var(--ink-2);
}
.sort-select select {
  border: none;
  background: transparent;
  outline: none;
  cursor: pointer;
  font-size: 13px;
  padding-right: 4px;
}

/* ───────── Result count + active filters ───────── */
.result-meta {
  max-width: 1320px;
  margin: 0 auto;
  padding: 4px 32px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.result-meta strong { color: var(--ink); font-weight: 600; }
.clear-all {
  font-size: 12px;
  color: var(--orange-2);
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ───────── List ───────── */
.list {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px 80px;
}
.row {
  display: grid;
  grid-template-columns: 64px 1.5fr 0.9fr 0.9fr 0.7fr 0.6fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .15s, padding .15s;
  position: relative;
}
.row:hover {
  background: var(--bg-2);
  padding-left: 12px;
  padding-right: 12px;
  margin-left: -12px;
  margin-right: -12px;
}
.row:hover .arrow { opacity: 1; transform: translateX(0); }

.row-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.row-logo img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 8px;
}
.row-logo .mono {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.04em;
  color: #fff;
  width: 100%; height: 100%;
  display: grid; place-items: center;
}

.row-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.row-name .nm {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.row-name .qk {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.4;
  text-wrap: pretty;
  max-width: 95%;
}

.row-meta-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  min-width: 0;
}
.row-meta-block .k {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.row-meta-block .v {
  color: var(--ink-2);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.tag .swatch {
  width: 6px; height: 6px; border-radius: 50%;
}
.tag.status {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.tag.status.Active { background: rgba(14,138,0,0.12); color: #0E8A00; border-color: rgba(14,138,0,0.25); }
.tag.status.Acquired { background: rgba(122,75,255,0.12); color: #5A2DEE; border-color: rgba(122,75,255,0.25); }
.tag.status.IPO { background: var(--orange-soft); color: var(--orange-2); border-color: rgba(255,90,31,0.25); }
.tag.status.ShutDown { background: rgba(0,0,0,0.06); color: var(--muted); border-color: var(--line-2); text-decoration: line-through;}

.row-stage {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.arrow {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  opacity: 0;
  transform: translateX(-8px);
  transition: all .2s;
}

/* shutdown row dim */
.row.shutdown .row-name .nm { color: var(--muted); }
.row.shutdown .row-logo { opacity: 0.6; filter: grayscale(0.4); }

/* news halo */
.news-halo {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 28px;
  background: var(--orange);
  border-radius: 2px;
  opacity: 0;
}
.row.has-news .news-halo { opacity: 1; }

/* empty state */
.empty {
  padding: 80px 0;
  text-align: center;
  color: var(--muted);
}
.empty h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  color: var(--ink);
  margin: 0 0 8px;
}

/* ───────── Detail Drawer ───────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14,14,14,0.45);
  backdrop-filter: blur(2px);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(640px, 100vw);
  background: var(--bg);
  z-index: 101;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,0.12);
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.drawer-close {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}
.drawer-close:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.drawer-nav {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}
.drawer-nav .nav-kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 60px;
}

.detail-hero {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.detail-hero .logo {
  width: 88px; height: 88px;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.detail-hero .logo img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.detail-hero .logo .mono {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.04em;
  color: #fff;
  width: 100%; height: 100%;
  display: grid; place-items: center;
}
.detail-title {
  flex: 1;
  min-width: 0;
}
.detail-title h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
  line-height: 1.05;
}
.detail-title .domain {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--orange-2);
  font-family: var(--font-mono);
  margin-bottom: 12px;
}
.detail-title .domain:hover { text-decoration: underline; }
.detail-title .tags-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.detail-quirk {
  padding: 20px 0 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.4;
  text-wrap: balance;
}
.detail-quirk::before {
  content: "“";
  color: var(--orange);
  font-size: 36px;
  line-height: 0.7;
  margin-right: 4px;
  vertical-align: -8px;
}
.detail-quirk::after {
  content: "”";
  color: var(--orange);
  font-size: 36px;
  line-height: 0.7;
  margin-left: 4px;
  vertical-align: -14px;
}

.detail-section {
  padding-top: 24px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.detail-section:first-of-type { border-top: none; }
.detail-section h4 {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 500;
}
.detail-section p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

.news-card {
  background: var(--ink);
  color: var(--bg);
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.news-card .news-tag {
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  font-weight: 600;
  margin-top: 1px;
}

.coinv-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.coinv {
  font-size: 12px;
  padding: 5px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-2);
}

/* Founder cards */
.founders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.founder {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.founder:hover { border-color: var(--line-2); box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.02em;
}
.founder-info {
  min-width: 0;
}
.founder-info .nm {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.founder-info .role {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.founder-info .em {
  font-size: 12px;
  color: var(--orange-2);
  font-family: var(--font-mono);
  margin-top: 4px;
  display: block;
  word-break: break-all;
}
.contact-actions {
  display: flex;
  gap: 6px;
}
.ico-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-2);
  transition: all .15s;
}
.ico-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ico-btn.disabled { opacity: 0.3; pointer-events: none; }

/* Surprise me button (floating) */
.surprise-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  transition: transform .2s, background .2s;
}
.surprise-fab:hover {
  background: var(--orange);
  transform: translateY(-2px);
}
.surprise-fab .die {
  font-size: 18px;
  display: inline-block;
  transition: transform .4s;
}
.surprise-fab:hover .die { transform: rotate(360deg); }

/* Scrollbar polish */
.drawer-body::-webkit-scrollbar,
.chip-menu::-webkit-scrollbar { width: 10px; }
.drawer-body::-webkit-scrollbar-thumb,
.chip-menu::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 6px;
  border: 2px solid var(--bg);
}

/* ───────── Responsive ───────── */
/* ───────── Search-mode segmented toggle ───────── */
.search-mode {
  display: inline-flex;
  background: var(--bg-2);
  border-radius: 999px;
  padding: 3px;
  margin-right: 4px;
  flex-shrink: 0;
}
.search-mode button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: all .18s ease;
  cursor: pointer;
}
.search-mode button:hover { color: var(--ink); }
.search-mode button.on {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.search-mode button.on svg { color: var(--orange); }

/* ───────── Header right-side Ask button ───────── */
.ask-btn {
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  padding: 9px 16px;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 0 rgba(255,90,31,0.25), 0 8px 20px -10px rgba(255,90,31,0.6);
}
.ask-btn:hover { transform: translateY(-1px); }

/* ───────── AI search dropdown (anchored to search bar) ───────── */
.ai-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.06);
  z-index: 60;
  overflow: hidden;
  animation: ai-pop-in .22s cubic-bezier(.2,.9,.3,1.2);
  transform-origin: top center;
}
@keyframes ai-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-results-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2), #fff);
}
.ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}
.ai-pill::before {
  content: "✦";
  color: var(--orange);
  font-size: 11px;
}
.ai-query {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-dismiss {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s;
}
.ai-dismiss:hover { background: var(--bg-2); color: var(--ink); }

.ai-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 26px 18px;
  color: var(--muted);
  font-size: 13px;
}
.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ai-summary {
  margin: 0;
  padding: 14px 18px 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  border-bottom: 1px dashed var(--line);
}
.ai-matches {
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
}
.ai-match {
  display: grid;
  grid-template-columns: 28px 44px 1fr 22px;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: transparent;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.ai-match:hover { background: var(--bg-2); }
.ai-match:active { transform: scale(0.995); }
.ai-match .rank {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.ai-match .row-logo, .ai-match .logo {
  width: 44px; height: 44px;
  border-radius: 9px;
  background: var(--bg-2);
  display: grid; place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.ai-match .row-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.ai-match .row-logo .mono {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
}
.match-body { min-width: 0; }
.match-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.match-sector {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
  margin-left: 6px;
}
.match-why {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.match-arrow { color: var(--muted); }
.ai-match:hover .match-arrow { color: var(--orange); }

.ai-empty {
  padding: 24px 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ───────── Section head w/ action button (Founders & contact) ───────── */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.section-head h4 { margin: 0; }
.section-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all .18s ease;
}
.section-action:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -6px rgba(0,0,0,0.3);
}
.section-action svg { color: var(--orange); transition: color .15s; }
.section-action:hover svg { color: var(--orange); }

/* ───────── Intro generator ───────── */
.intro-gen {
  background: linear-gradient(180deg, var(--bg-2), #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
  animation: slide-down .25s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-8px); max-height: 0; }
  to { opacity: 1; transform: translateY(0); max-height: 800px; }
}
.intro-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.intro-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.intro-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.intro-controls {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}
.intro-controls .ctl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.intro-controls label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.intro-controls .seg {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  width: fit-content;
}
.intro-controls .seg button {
  border: none;
  background: transparent;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-transform: capitalize;
  cursor: pointer;
  transition: all .15s;
}
.intro-controls .seg button.on {
  background: var(--ink);
  color: #fff;
}
.intro-controls input[type="text"] {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.intro-controls input[type="text"]:focus { border-color: var(--ink); }
.intro-btn {
  width: 100%;
  justify-content: center;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
}
.intro-btn:disabled { opacity: 0.6; cursor: progress; }
.intro-output {
  margin-top: 14px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 12px;
  padding: 18px 18px 14px;
  position: relative;
  animation: fade-up .3s ease;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.intro-output pre {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: rgba(250,246,239,0.92);
}
.copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all .15s;
}
.copy-btn:hover { background: var(--orange); border-color: var(--orange); }

/* ───────── Detail-section heading ───────── */
.detail-section h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

/* ───────── Ask the Portfolio side panel ───────── */
.ai-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14,14,14,0.42);
  backdrop-filter: blur(2px);
  z-index: 70;
  animation: fade .22s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.ask-panel {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--bg);
  z-index: 71;
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,0.16);
  animation: slide-in-right .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes slide-in-right {
  from { transform: translateX(40px); opacity: 0.4; }
  to { transform: translateX(0); opacity: 1; }
}
.ask-head {
  padding: 20px 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ask-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.ask-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.ask-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ask-welcome p {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.suggest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.suggest {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s;
  text-align: left;
}
.suggest:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-1px);
}
.bubble {
  max-width: 92%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  animation: bubble-in .22s ease;
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.bubble.user {
  background: var(--ink);
  color: var(--bg);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.bubble.assistant {
  background: #fff;
  border: 1px solid var(--line);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.bubble-text { white-space: pre-wrap; }
.bubble.assistant .bubble-text { white-space: normal; }
.bubble-text .md-p {
  margin: 0;
}
.bubble-text .md-p + .md-p {
  margin-top: 10px;
}
.bubble-text strong {
  font-weight: 600;
  color: var(--ink-strong, var(--ink));
}
.bubble-text em {
  font-style: italic;
}
.bubble-text .md-code {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
}
.bubble-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.mini-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.mini-card:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  transform: translateY(-1px);
}
.mini-card .row-logo {
  width: 22px; height: 22px;
  border-radius: 5px;
}
.mini-card .row-logo img { padding: 2px; }
.mini-card .row-logo .mono { font-size: 11px; }
.mc-name { padding-right: 4px; }

.dots { display: inline-flex; gap: 4px; }
.dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: dot-bounce 1.2s infinite ease-in-out;
}
.dots span:nth-child(2) { animation-delay: .15s; }
.dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.ask-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.ask-input input {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ask-input input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(14,14,14,0.06);
}
.ask-send {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  border: none;
  display: grid; place-items: center;
  cursor: pointer;
  transition: all .15s;
}
.ask-send:hover:not(:disabled) { background: var(--orange-2); transform: translateX(1px); }
.ask-send:disabled { background: var(--line-2); cursor: not-allowed; }

/* ───────── Hover/animation polish — global ───────── */
.row { transition: background .18s ease, padding .2s ease, margin .2s ease; }
.chip, .ico-btn, .btn-orange, .btn-ghost, .ask-send, .copy-btn, .section-action { transition: all .18s ease; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ───────── Responsive ───────── */
@media (max-width: 1080px) {
  .row {
    grid-template-columns: 56px 1.4fr 1fr 0.8fr 0.6fr auto;
    gap: 18px;
  }
  .row .col-stage { display: none; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4), .stat:nth-child(5), .stat:nth-child(6) { border-top: 1px solid var(--line); }
  .header-search { max-width: 380px; }
  .ask-btn span { display: none; }
  .ask-btn { padding: 8px 10px; }
}
@media (max-width: 880px) {
  .row {
    grid-template-columns: 52px 1.3fr 0.8fr auto;
    gap: 14px;
  }
  .row .col-status, .row .col-funding { display: none; }
  .header-inner { padding: 12px 18px; gap: 10px; }
  .header-search { max-width: 100%; flex: 1; }
}
@media (max-width: 760px) {
  body { -webkit-text-size-adjust: 100%; }
  .header-inner { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .brand-text { display: none; }
  .brand-mark { width: 32px; height: 32px; }
  .header-search {
    order: 3;
    flex: 1 0 100%;
    max-width: none;
    padding: 8px 12px;
  }
  .search-mode button { padding: 4px 8px; font-size: 10px; }
  .search-mode button span { display: none; }
  .header-search .kbd { display: none; }
  .ask-btn { font-size: 12px; padding: 8px 10px; }
  .ask-btn span { display: none; }
  .hero { padding: 28px 16px 12px; }
  .hero h1 { font-size: 32px; line-height: 1.06; letter-spacing: -0.02em; }
  .hero-sub { font-size: 14px; }
  .filters { padding: 14px 16px 10px; gap: 6px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filters .chip { flex-shrink: 0; }
  .list { padding: 0 14px 100px; }
  .row {
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    padding: 16px 0;
  }
  .row .col-sector, .row .col-stage, .row .col-status, .row .col-founders, .row .col-funding { display: none; }
  .row-name .nm { font-size: 17px; }
  .row-name .qk { font-size: 12px; line-height: 1.35; }
  .row-meta-block .l { font-size: 10px; }
  .row-meta-block .v { font-size: 13px; }
  .row-cta { font-size: 12px; padding: 6px 10px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat .num { font-size: 28px; }
  .stat .lbl { font-size: 10px; }
  .drawer { width: 100vw; max-width: 100vw; }
  .drawer-body { padding: 18px; }
  .detail-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .detail-hero .logo-wrap { width: 64px; height: 64px; }
  .detail-hero h2 { font-size: 24px; }
  .surprise-fab { right: 14px; bottom: 14px; padding: 10px 14px; font-size: 12px; }
  .ai-results { left: 0; right: 0; border-radius: 0 0 10px 10px; }
  .intro-controls { grid-template-columns: 1fr; }
  .ask-panel { width: 100vw; max-width: 100vw; }
  .ask-head { padding: 14px 16px; }
  .ask-title { font-size: 16px; }
  .ask-sub { font-size: 11px; }
  .ask-body { padding: 14px 16px; }
  .ask-input { padding: 10px 14px; }
  .bubble { max-width: 92%; font-size: 13.5px; }
  .suggest-chips { gap: 6px; }
  .suggest-chips button { font-size: 12px; padding: 7px 10px; }
  .stats-banner { padding: 24px 16px; }
  .ticker { font-size: 12px; }
  .ticker-item { padding: 10px 16px; }
  .founder-card { padding: 14px; }
  .founder-card .name { font-size: 15px; }
  .quirk-block { font-size: 16px; }
  .news-block { padding: 14px; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 26px; }
  .hero-sub { font-size: 13px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stat { padding: 14px 10px; }
  .stat .num { font-size: 24px; }
  .row-name .qk { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ticker-item .name { font-size: 11px; }
  .ticker-item .text { font-size: 11px; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
}

/* Funding tag in drawer */
.tag.tag-funding {
  background: var(--orange-soft);
  color: var(--orange-2);
  border-color: rgba(255,90,31,0.25);
  font-weight: 600;
  letter-spacing: -0.005em;
}
/* Funding cell in row */
.row-meta-block.col-funding .v.funding-v {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.row-meta-block.col-funding .v-dim { color: var(--line-2); font-weight: 400; font-size: 18px; }
.row.shutdown .row-meta-block.col-funding .v.funding-v { color: var(--muted); }

.founder-info .prior {
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 4px;
  letter-spacing: -0.005em;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.founder-info .prior::before {
  content: "↳ ";
  color: var(--orange);
  font-style: normal;
  margin-right: 2px;
}

/* ───────── Mobile-first refinements ───────── */

/* Body scroll lock when overlays are open */
body.no-scroll { overflow: hidden; touch-action: none; }

/* Safe-area-aware header on devices with a notch */
.app-header { padding-top: env(safe-area-inset-top); }

/* Use dynamic viewport units for full-viewport panels (iOS Safari friendly) */
.drawer, .ask-panel { height: 100dvh; }
.drawer-overlay, .ai-overlay { height: 100dvh; }

/* Smoother native scroll inside long-scroll containers */
.drawer-body, .ask-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* iOS: prevent the document bouncing past the sticky header on small screens */
html, body { overscroll-behavior-y: none; }

/* Prevent horizontal scroll on the page itself */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Restore tighter mobile rules and add new ones */
@media (max-width: 760px) {
  /* Header sits flush, account for notch */
  .header-inner { padding: max(env(safe-area-inset-top), 10px) 14px 10px; }

  /* Hero spacing — tightened so it does not crowd the news ticker */
  .hero { padding: 24px 16px 8px; }
  .hero h1 { font-size: 30px; line-height: 1.07; letter-spacing: -0.02em; margin: 0 0 14px; }
  .hero-sub { font-size: 14px; line-height: 1.55; max-width: 100%; margin: 0 0 22px; }

  /* Stat grid: 2 cols, tighter cells, normalize all paddings/borders */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stat-grid .stat { padding: 18px 14px; border-right: none; flex-direction: column; align-items: flex-start; gap: 4px; }
  .stat-grid .stat .lbl { white-space: normal; overflow: visible; text-overflow: clip; margin-top: 4px; }
  .stat-grid .stat:not(:first-child) { padding-left: 14px; }
  .stat-grid .stat:nth-child(odd) { border-right: 1px solid var(--line); }
  .stat-grid .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stat-grid .stat .num {
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    flex-wrap: wrap;
  }
  .stat-grid .stat .num .plus { font-size: 18px; }
  .stat-grid .stat .lbl { font-size: 10.5px; margin-top: 4px; }

  /* News ticker: smaller, no oversize text */
  .ticker { font-size: 12px; }
  .ticker-label { padding: 6px 12px; }
  .ticker-item { padding: 8px 14px; gap: 8px; }
  .ticker-item .text { max-width: 220px; }

  /* Filters: snap-scrolling with a soft fade indicator on the right */
  .filters {
    padding: 12px 16px 10px;
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters .chip { flex-shrink: 0; scroll-snap-align: start; min-height: 36px; padding: 8px 12px; }
  .filters-right { margin-left: auto; flex-shrink: 0; padding-right: 4px; }
  .sort-select select { min-height: 36px; padding: 6px 10px; }

  /* List: more breathing room between rows on mobile, larger tap surface */
  .list { padding: 4px 14px calc(96px + env(safe-area-inset-bottom)); }
  .row {
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
  }
  .row:active { background: rgba(255,90,31,0.06); }
  .row .col-sector,
  .row .col-stage,
  .row .col-status,
  .row .col-founders,
  .row .col-funding { display: none; }
  .row-name .nm { font-size: 16.5px; line-height: 1.25; }
  .row-name .qk {
    font-size: 12.5px;
    line-height: 1.4;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .row .arrow { width: 30px; height: 30px; display: grid; place-items: center; }

  /* Drawer: full-screen sheet on mobile, with safe-area aware bottom padding */
  .drawer { width: 100vw; max-width: 100vw; }
  .drawer-head { padding: max(env(safe-area-inset-top), 14px) 16px 14px; }
  .drawer-body {
    padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
  }
  .detail-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .detail-hero .logo, .detail-hero .logo-wrap { width: 64px; height: 64px; }
  .detail-title h2 { font-size: 24px; margin: 0 0 6px; }
  .tags-row { gap: 6px; }
  .tags-row .tag { font-size: 11.5px; padding: 4px 8px; }

  /* Founders grid: stack on mobile so each card has room */
  .founders-grid { grid-template-columns: 1fr; gap: 10px; }
  .founder { padding: 12px; gap: 12px; }
  .founder .avatar { width: 38px; height: 38px; font-size: 13px; }
  .contact-actions .ico-btn { width: 34px; height: 34px; }

  /* Ask panel: full-screen sheet, sticky composer at the bottom with safe-area */
  .ask-panel { width: 100vw; max-width: 100vw; }
  .ask-head { padding: max(env(safe-area-inset-top), 14px) 16px 14px; }
  .ask-body { padding: 14px 16px calc(80px + env(safe-area-inset-bottom)); }
  .ask-input {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    position: sticky;
    bottom: 0;
    background: var(--bg);
    border-top: 1px solid var(--line);
  }
  .bubble { max-width: 92%; font-size: 13.5px; }
  .suggest-chips button { font-size: 12px; padding: 8px 11px; min-height: 36px; }

  /* Surprise FAB: respect safe-area + don't overlap sticky drawer/ask */
  .surprise-fab {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    padding: 10px 14px;
    font-size: 12px;
    min-height: 40px;
  }

  /* AI search dropdown: full-bleed inside header on mobile */
  .ai-results {
    left: 14px;
    right: 14px;
    width: auto;
    max-height: calc(100dvh - 180px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ai-match { padding: 10px 12px; gap: 10px; }
  .ai-match .match-name { font-size: 14px; }
  .ai-match .match-why { font-size: 12px; line-height: 1.4; }
}

/* Very small phones (≤ 380px) — squeeze a bit more without breaking the rhythm */
@media (max-width: 380px) {
  .hero h1 { font-size: 26px; line-height: 1.08; }
  .hero-sub { font-size: 13px; }
  .stat-grid .stat { padding: 14px 12px; }
  .stat-grid .stat .num { font-size: 22px; }
  .stat-grid .stat .num .plus { font-size: 15px; }
  .stat-grid .stat .lbl { font-size: 9.5px; }
  .row-name .nm { font-size: 15.5px; }
  .row-name .qk { font-size: 12px; }
  .ticker-item .text { max-width: 170px; }
  .ticker-item .name { font-size: 11.5px; }
  .ai-match .match-why { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .surprise-fab span { display: none; }
}

/* Tap-target floor for any interactive element on coarse pointers */
@media (pointer: coarse) {
  button, a, .chip, .ico-btn, select, input { min-height: 38px; }
  .row { min-height: 64px; }
}

/* ───────── FAB visibility helpers ───────── */
.desktop-only { display: inline-flex; }
.mobile-only { display: none; }

/* Ask-AI mobile FAB — same shape as the surprise FAB but orange-on-orange */
.ask-fab {
  position: fixed;
  z-index: 50;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  box-shadow: 0 12px 30px rgba(255,90,31,0.32), 0 2px 6px rgba(255,90,31,0.18);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.ask-fab:hover { transform: translateY(-1px); }
.ask-fab:active { transform: translateY(0); }
.ask-fab svg { color: #fff; }

@media (max-width: 760px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: inline-flex !important; }
  .ask-fab {
    display: inline-flex;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    min-height: 44px;
  }
}

/* ───────── Round 2 mobile fixes (post-Playwright audit) ───────── */

/* Hide the header Ask pill on mobile — the FAB is the single mobile entry point */
@media (max-width: 640px) {
  .header-actions .ask-btn,
  .header-actions { display: none; }
}

/* Drawer + Ask panel: respect home-indicator inset directly on the outer container */
.drawer,
.ask-panel {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Ask input: stickier, with safe-area-aware padding so the send button never sits under the home bar */
.ask-input {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* News ticker: clip the long marquee at the ticker level, not the body level */
.ticker { overflow: hidden; }

/* Header: stack to two rows on tight phones so it never spills past ~80px */
@media (max-width: 480px) {
  .header-inner {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: max(env(safe-area-inset-top), 8px) 14px 8px;
  }
  .brand { order: 1; }
  .header-search {
    order: 3;
    flex: 1 0 100%;
    max-width: none;
    margin: 0;
  }
}

/* Stat grid: 3×2 layout at ≥400px so the 6 stats line up evenly instead of 3×2 vs 2×3 */
@media (min-width: 400px) and (max-width: 760px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-grid .stat:nth-child(odd) { border-right: 1px solid var(--line); }
  .stat-grid .stat:nth-child(3n) { border-right: none; }
  .stat-grid .stat:nth-child(n+4) { border-top: 1px solid var(--line); }
}

/* ───────── Round 3: tighten logo/name spacing on mobile ───────── */
/* Desktop logo is 56×56 inside a 64px column; on mobile we shrink the column to
   44px but the logo element itself stayed 56px, which is what's been crashing
   into the name. Resize the logo box to match the column and give the row more
   breathing gap. */
@media (max-width: 760px) {
  .row {
    grid-template-columns: 48px 1fr auto;
    gap: 18px;
    padding: 16px 4px;
  }
  .row-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  .row-logo img { padding: 6px; }
  .row-logo .mono { font-size: 18px; }
  .row-name { padding-right: 4px; }
  .row-name .nm {
    gap: 8px;
    font-size: 17px;
    line-height: 1.2;
  }
  .row-name .nm .tag.status { font-size: 9.5px; padding: 2px 6px; }
  .row-name .qk {
    font-size: 13px;
    line-height: 1.45;
    margin-top: 6px;
    max-width: 100%;
  }
  /* Drawer hero logo also benefits from consistent sizing */
  .detail-hero .logo { width: 64px; height: 64px; border-radius: 14px; }
}

@media (max-width: 380px) {
  .row {
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
  }
  .row-logo { width: 44px; height: 44px; border-radius: 11px; }
  .row-logo img { padding: 5px; }
  .row-name .nm { font-size: 16px; }
}

/* ───────── Round 4: header logo + search icon spacing ───────── */

/* Search-icon overlap fix: keep the 42px left padding for the icon when the
   search bar wraps to its own row on mobile. Round-2 had stripped this. */
@media (max-width: 760px) {
  .header-search {
    padding: 10px 14px 10px 42px;
  }
}
@media (max-width: 480px) {
  .header-search {
    padding: 9px 12px 9px 38px;
  }
  .header-search svg.search-icon { left: 12px; }
}

/* Prime VP logo is a wide wordmark (PRIME + "Venture Partners" stacked).
   A 32px square container crops the right edge. Give it a wider, rectangular
   container on mobile so the full word fits, and bump it to 40px on desktop. */
.brand-mark {
  width: 44px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-2);
  padding: 4px;
  border: 1px solid var(--line);
}
.brand-mark img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 4px !important;
}

@media (max-width: 760px) {
  .brand-mark {
    width: 40px;
    height: 32px;
    padding: 3px;
  }
}
@media (max-width: 480px) {
  .brand-mark {
    width: 38px;
    height: 30px;
  }
}

/* ───────── Round 5: Ask FAB always visible, bottom-left chatbot-style ───────── */

/* Make the Ask FAB persistent on every viewport, in the bottom-left,
   smaller and more chatbot-like (Intercom/Crisp aesthetic). */
.ask-fab {
  display: inline-flex !important;
  position: fixed;
  left: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  right: auto;
  z-index: 60;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.005em;
  box-shadow: 0 10px 26px rgba(14,14,14,0.22), 0 2px 6px rgba(14,14,14,0.12);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.ask-fab:hover { transform: translateY(-1px); background: var(--orange); }
.ask-fab:active { transform: translateY(0); }
.ask-fab svg { color: var(--orange); flex-shrink: 0; }
.ask-fab:hover svg { color: #fff; }

/* On the smallest phones, collapse to icon-only so it's truly unobtrusive */
@media (max-width: 380px) {
  .ask-fab {
    padding: 12px;
    width: 44px;
    height: 44px;
    justify-content: center;
  }
  .ask-fab .ask-fab-label { display: none; }
}

/* Keep the Surprise-me FAB bottom-right but only on roomy screens */
.surprise-fab.desktop-only {
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
}

/* ───────── Round 6: scroll fix ───────── */
/* `overflow-x: hidden` on BOTH html and body breaks scroll on desktop because
   the scrolling viewport becomes ambiguous (html stops being the scrollport,
   sticky positioning breaks). Restrict to body only. */
html { overflow-x: visible !important; max-width: none !important; overscroll-behavior-y: auto !important; }
body { overflow-x: hidden; max-width: 100vw; }

/* Body scroll-lock should only block scroll when the .no-scroll class is set,
   not affect anything else. Keep it minimal. */
body.no-scroll { overflow: hidden; touch-action: none; }

/* ───────── Round 7: rebuild mobile header ───────── */

/* Override the wrap-to-2-rows behavior. Single tight row: small logo + search.
   Brand text is shown again on mobile but compact (just "Prime Portfolio"). */
@media (max-width: 760px) {
  .header-inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: max(env(safe-area-inset-top), 10px) 12px 10px;
  }
  .brand {
    flex-shrink: 0;
    gap: 8px;
    min-width: 0;
  }
  .brand-mark {
    width: 32px;
    height: 32px;
    padding: 4px;
    border-radius: 8px;
    flex-shrink: 0;
  }
  /* Show the brand text on mobile, drop the subtitle */
  .brand-text { display: flex; line-height: 1; }
  .brand-text .b1 { font-size: 14px; }
  .brand-text .b2 { display: none; }

  .header-search {
    order: initial;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    padding: 8px 10px 8px 36px;
  }
  .header-search input {
    font-size: 13.5px;
    min-width: 0;
  }
  .header-search input::placeholder {
    font-size: 13px;
  }
  .header-search svg.search-icon {
    left: 12px;
    width: 14px;
    height: 14px;
  }
}

/* On the smallest phones, hide brand text entirely so the search has room */
@media (max-width: 420px) {
  .brand-text { display: none; }
  .brand-mark {
    width: 30px;
    height: 30px;
    padding: 3px;
  }
  .header-inner { gap: 8px; padding: 10px 10px; }
  .header-search { padding: 8px 10px 8px 32px; }
  .header-search svg.search-icon { left: 10px; }
}

/* The AI/Text segmented toggle is too wide on tiny phones — collapse to icons only */
@media (max-width: 480px) {
  .search-mode {
    flex-shrink: 0;
    gap: 0;
  }
  .search-mode button {
    padding: 5px 8px;
    font-size: 10.5px;
    min-height: 30px;
  }
}

/* The hero used to start ~120px below the fixed header on mobile — pull it up */
@media (max-width: 760px) {
  .hero { padding-top: 24px; }
}

/* ───────── Round 8: real Prime VP wordmark — give it room ───────── */

/* The wordmark is ~3:1 wide. Swap the square brand-mark for a wider container
   that lets the logo actually breathe. Drop the bg/border so it sits cleanly. */
.brand-mark {
  width: auto;
  height: 36px;
  aspect-ratio: 3.1 / 1;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  flex-shrink: 0;
}
.brand-mark img {
  width: auto !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

/* Keep the brand-mark proportional on desktop and mobile */
@media (max-width: 760px) {
  .brand-mark { height: 28px; }
}
@media (max-width: 420px) {
  .brand-mark { height: 26px; }
}

/* Once the real wordmark is shown, the secondary "Prime Portfolio" text in
   .brand-text is redundant — hide it entirely so the logo speaks for itself */
.brand-text { display: none !important; }

/* Tighten brand spacing now that brand-text is gone */
.brand { gap: 0; }

/* ───────── Round 9: pull-to-refresh + FAB scroll behaviour + swipe ───────── */

/* Restore native pull-to-refresh on iOS — earlier `overscroll-behavior-y: none`
   was blocking it. Allow normal overscroll on the page itself; only the
   drawer/ask-panel still contain their scroll. */
html, body { overscroll-behavior-y: auto !important; }
.drawer-body, .ask-body { overscroll-behavior: contain; }

/* Ask FAB: auto-hide while scrolling down so it stops covering content,
   slide back in once the user pauses or scrolls up. */
.ask-fab {
  transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity .2s ease,
              background .2s ease,
              box-shadow .2s ease;
}
.ask-fab.hidden {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

/* Drawer: hint at swipe-to-dismiss + give a thick, always-visible close
   target on mobile so the X is reliable. */
.drawer-handle {
  display: none;
}
@media (max-width: 760px) {
  /* Sticky close bar at the top of the drawer body — always reachable */
  .drawer-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(250, 246, 239, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .drawer-close {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  /* Visual swipe handle hint at the very top of the drawer */
  .drawer-handle {
    display: block;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--line-2);
    opacity: 0.7;
  }
  .drawer-head { padding-top: 18px; }
}

/* Smooth transform during a swipe-to-dismiss gesture */
.drawer.swiping {
  transition: none;
}

/* ───────── Round 10: founder contact icons on mobile ───────── */

/* On mobile the icon trio was crammed into a narrow column next to the avatar
   + name + role — the SVGs ended up tiny inside 34px buttons. Stack the icons
   to a second row with full breathing room and larger tap targets. */
@media (max-width: 760px) {
  .founder {
    grid-template-columns: 44px 1fr;
    grid-template-areas:
      "avatar info"
      "actions actions";
    gap: 10px 12px;
    padding: 14px;
  }
  .founder .avatar {
    grid-area: avatar;
    width: 44px;
    height: 44px;
    font-size: 14px;
  }
  .founder-info { grid-area: info; }
  .contact-actions {
    grid-area: actions;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 10px;
    width: 100%;
  }
  .contact-actions .ico-btn {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 44px;
    border-radius: 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
  }
  .contact-actions .ico-btn:hover,
  .contact-actions .ico-btn:active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  .contact-actions .ico-btn svg {
    width: 18px;
    height: 18px;
  }
  .contact-actions .ico-btn.disabled {
    opacity: 0.45;
    background: transparent;
    border-style: dashed;
  }
}

/* Ultra-tight phones — keep the same layout, just trim padding */
@media (max-width: 380px) {
  .founder { padding: 12px; }
  .contact-actions .ico-btn { height: 42px; }
  .contact-actions { gap: 8px; }
}

/* ───────── Round 11: filter badge + ticker pause + skeletons ───────── */

/* Active filter count badge next to the "Filter" label */
.filter-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: var(--orange);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  font-family: var(--font-sans);
  letter-spacing: 0;
  vertical-align: 1px;
}

/* Brand: hint that it's tappable to scroll up when scrolled down */
.brand { cursor: pointer; }

/* News ticker: paused state styling + clearer affordance for tap-to-pause */
.ticker.paused .ticker-track {
  animation-play-state: paused;
}
.ticker .ticker-label {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ticker.paused .ticker-label .pulse {
  animation-play-state: paused;
  background: rgba(255, 255, 255, 0.4);
}

/* Skeleton primitives */
@keyframes skel-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skel-shape {
  display: inline-block;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.06) 0,
    rgba(0,0,0,0.12) 50%,
    rgba(0,0,0,0.06) 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 6px;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skel-square {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
}
.skel-line {
  height: 12px;
  border-radius: 6px;
  display: block;
  margin: 4px 0;
}
.skel-line.short { width: 60%; }

/* AI search loading block — hint above skeleton card list */
.ai-loading-block { padding: 8px 0 0; }
.ai-loading-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 12px;
  font-size: 12px;
  color: var(--muted);
}

/* Match the skeleton's rank dot shape */
.ai-match.skeleton .rank.skel-shape {
  width: 18px; height: 18px; border-radius: 50%;
}
.ai-match.skeleton {
  pointer-events: none;
}

/* AskPanel skeleton bubble */
.skeleton-bubble .bubble-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bubble-typing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  letter-spacing: 0.02em;
}

/* ───────── Round 12: filter chip → bottom sheet on mobile ───────── */

/* Make the desktop dropdown more polished too: cap width, smarter scroll. */
.chip-menu-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chip-menu .opt {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.chip-menu .opt .opt-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chip-menu .opt .opt-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--line);
  color: transparent;
  flex-shrink: 0;
  transition: all .15s;
}
.chip-menu .opt.selected .opt-check {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.chip-menu .opt-label { min-width: 0; }

/* Desktop dropdown — keep but improve sizing */
@media (min-width: 761px) {
  .chip-menu {
    min-width: 240px;
    max-width: 320px;
  }
}

/* Mobile bottom sheet */
@media (max-width: 760px) {
  .sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14,14,14,0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 200;
    animation: sheet-fade .2s ease;
  }
  @keyframes sheet-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .chip-menu.is-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: 70dvh;
    border-radius: 16px 16px 0 0;
    z-index: 201;
    padding: 0;
    box-shadow: 0 -12px 32px rgba(0,0,0,0.18);
    animation: sheet-up .25s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  @keyframes sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .chip-menu.is-sheet::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--line-2);
    z-index: 1;
  }
  .sheet-head {
    flex-shrink: 0;
    padding: 22px 18px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    background: #fff;
  }
  .sheet-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: -0.01em;
  }
  .sheet-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .sheet-clear, .sheet-done {
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    cursor: pointer;
  }
  .sheet-done {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  .chip-menu.is-sheet .chip-menu-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px 8px calc(20px + env(safe-area-inset-bottom));
    gap: 0;
  }
  .chip-menu.is-sheet .opt {
    padding: 14px 14px;
    font-size: 15px;
    min-height: 50px;
    border-radius: 12px;
  }
  .chip-menu.is-sheet .opt .ct {
    font-size: 12px;
    color: var(--muted);
  }
  .chip-menu.is-sheet .opt-check {
    width: 22px;
    height: 22px;
  }
}

/* The filters bar must not clip the dropdown on desktop either when nothing
   else is overflowing. Restore visible overflow above the mobile breakpoint. */
@media (min-width: 761px) {
  .filters {
    overflow: visible !important;
  }
}

/* ───────── Round 13: Visual polish (UX agent recommendations) ───────── */

/* 1. Wordmark — never clip on iPhone SE; cap width, add right breathing room */
.brand-mark img {
  max-width: 96px !important;
}
@media (max-width: 760px) {
  .brand-mark img { max-width: 76px !important; }
  .header-inner { gap: 10px; }
}
@media (max-width: 380px) {
  .brand-mark img { max-width: 70px !important; }
}

/* 2. Hero h1 — ease the kerning so italic doesn't fight the roman */
.hero h1 {
  letter-spacing: -0.018em;
}
@media (max-width: 760px) {
  .hero h1 { font-size: 28px; line-height: 1.05; letter-spacing: -0.012em; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 25px; line-height: 1.06; }
}

/* 3. Stat numbers — promote them to editorial centerpieces */
@media (max-width: 760px) {
  .stat-grid .stat .num {
    font-size: 32px;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .stat-grid .stat .num .plus { font-size: 22px; }
  .stat-grid .stat .lbl {
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-top: 8px;
  }
  .stat-grid .stat { padding: 20px 14px; }
  /* Drop the messy 6-cell hairlines on mobile — only top + bottom rules */
  .stat-grid .stat,
  .stat-grid .stat:nth-child(odd),
  .stat-grid .stat:nth-child(3n) {
    border-right: none;
  }
  .stat-grid .stat:nth-child(n+3) {
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 380px) {
  .stat-grid .stat .num { font-size: 28px; }
  .stat-grid .stat .num .plus { font-size: 18px; }
}

/* 4. Status pills — bump density so they're legible */
.tag.status {
  font-size: 10.5px;
  padding: 3px 9px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}
.tag.status.Active {
  background: #DCEFD3;
  color: #0B6B14;
  border: 1px solid rgba(11,107,20,0.15);
}
.tag.status.Acquired {
  background: #FFE9DD;
  color: #B23E0E;
  border: 1px solid rgba(178,62,14,0.15);
}
.tag.status.IPO {
  background: #E8E1FF;
  color: #4A2D9C;
  border: 1px solid rgba(74,45,156,0.15);
}
.tag.status.ShutDown {
  background: #EDE6DA;
  color: #6B6258;
  border: 1px solid rgba(107,98,88,0.15);
}

/* 5. Row logos — frame them properly so non-square assets don't distort */
.row-logo {
  background: #fff;
  border: 1px solid rgba(14,14,14,0.06);
  box-shadow: inset 0 0 0 1px rgba(14,14,14,0.04);
}
.row-logo img {
  border-radius: 8px !important;
  padding: 6px !important;
  background: transparent;
}

/* Smaller polish items */

/* Active filter chip — strengthen pressed state */
.chip.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 2px 8px rgba(14,14,14,0.12);
}

/* Quirk subline tight to name → give it air */
.row-name .qk { margin-top: 4px; line-height: 1.4; color: #4a4338; }

/* Founder avatars — editorial Fraunces initials */
.founder .avatar {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
}

/* Drawer hero logo — bump to 72px with subtle ring */
.detail-hero .logo {
  width: 72px;
  height: 72px;
  box-shadow: 0 0 0 1px rgba(14,14,14,0.08), 0 1px 3px rgba(14,14,14,0.06);
}

/* Bottom-sheet drag handle: bigger, more visible */
.chip-menu.is-sheet::before {
  width: 44px;
  height: 4px;
  background: rgba(14,14,14,0.22);
  top: 10px;
}
.drawer-handle {
  width: 44px;
  height: 4px;
  background: rgba(14,14,14,0.22);
}

/* Ask FAB: keep position bottom-LEFT (per user), but elevate styling */
.ask-fab {
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px 10px 14px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(14,14,14,0.18), 0 2px 6px rgba(14,14,14,0.08);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.ask-fab svg { color: var(--orange); }
.ask-fab .ask-fab-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.ask-fab:hover {
  background: var(--ink);
  color: var(--bg);
}
.ask-fab:hover svg { color: var(--orange); }

/* Disabled icon buttons in founder cards — flat low-contrast (was dashed) */
.contact-actions .ico-btn.disabled {
  background: rgba(14,14,14,0.04);
  border: 1px solid transparent;
  color: rgba(14,14,14,0.28);
  border-style: solid;
  opacity: 1;
}

/* Skeleton shimmer — better contrast on cream */
.skel-shape {
  background: linear-gradient(90deg, #EFE8DB 0%, #F6F1E6 50%, #EFE8DB 100%);
  background-size: 200px 100%;
}

/* Ticker — keep dark bar, soften the orange flood */
.ticker { background: #1A1A1A; }
.ticker-label { background: var(--orange); }
@media (max-width: 760px) {
  .ticker { font-size: 12px; }
  .ticker-item { padding: 10px 14px; }
}

/* Active chip-menu option — clearer feedback */
.chip-menu .opt:active { background: var(--orange-soft); }

/* ───────── Round 14: UX-audit hot fixes ───────── */

/* 1. iOS auto-zoom on focus — bump form-control text to 16px on mobile */
@media (max-width: 760px) {
  .header-search input,
  .header-search input::placeholder,
  .ask-input input,
  .sort-select select,
  .intro-controls input,
  .intro-controls textarea {
    font-size: 16px !important;
  }
}

/* 2. AI search dropdown — full-bleed on mobile, properly anchored */
@media (max-width: 760px) {
  .ai-results {
    position: fixed;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    top: auto;
    margin-top: 0;
    z-index: 50;
  }
}

/* 3. Filter bar sticky below header */
.filters {
  position: sticky;
  top: 0;
  z-index: 9;
  background: rgba(250,246,239,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (max-width: 760px) {
  .app-header { z-index: 30; }
  .filters {
    /* Header is variable height on mobile (~52px); stick at 0 because
       the header is also sticky and they collapse cleanly */
    top: 52px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
}

/* 4. Brand wordmark — never kiss the right edge of the header */
@media (max-width: 760px) {
  .header-inner { padding-right: 14px; }
  .brand { max-width: 45%; overflow: hidden; }
  .brand-mark img { max-width: 110px !important; }
}
@media (max-width: 380px) {
  .brand-mark img { max-width: 80px !important; }
  .brand { max-width: 38%; }
}

/* 5. Founder contact icons — icon-only pills on mobile */
@media (max-width: 760px) {
  .contact-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
  }
  .contact-actions .ico-btn {
    flex: 1;
    width: auto;
    height: 46px;
    min-height: 46px;
    border-radius: 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    padding: 0;
    overflow: hidden;
  }
  /* Strip the old text labels — pure icons only */
  .contact-actions .ico-btn::after { content: none !important; }
}

/* 6. Drawer close button — 44×44 minimum (Apple HIG) */
@media (max-width: 760px) {
  .drawer-close { width: 44px; height: 44px; }
}

/* 7. Hide desktop keyboard hint on touch */
@media (hover: none) {
  .drawer-nav, .nav-kbd { display: none; }
}

/* 8. Drawer handle — sticky pill at top, always visible while open */
.drawer-handle {
  display: block;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: rgba(14,14,14,0.22);
  z-index: 6;
  pointer-events: none;
}
@media (max-width: 760px) {
  .drawer-head { padding-top: 22px; }
}

/* 10. Ask FAB — keep label visible at every viewport */
.ask-fab .ask-fab-label { display: inline !important; }
@media (max-width: 380px) {
  .ask-fab {
    padding: 10px 14px;
    width: auto;
    height: 44px;
    min-width: 0;
    justify-content: flex-start;
  }
  .ask-fab .ask-fab-label { display: inline !important; font-size: 13px; }
}

/* 13. Filter chip row horizontal scroll on mobile */
@media (max-width: 760px) {
  .filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters > * { flex-shrink: 0; }
  .filters .label,
  .filters .filters-right { flex-shrink: 0; }
}

/* 11. Ticker — single tap should NOT change global LIVE label,
       only the tapped item gets visual feedback. Long-press OR tap on
       label pauses. */
.ticker.paused .ticker-label { background: rgba(255,90,31,0.7); }

/* Result-meta sticky enhancement */
.result-meta { background: var(--bg); }
@media (max-width: 760px) {
  .result-meta {
    position: sticky;
    top: 100px;
    z-index: 5;
    background: rgba(250,246,239,0.96);
    backdrop-filter: blur(8px);
    padding: 10px 14px;
  }
}

/* ───────── Round 15: bullet-proof filter sheet ───────── */

/* CRITICAL: never clip the dropdown via the .filters parent.
   Use an inner scroll container for the chip row instead. The .filters
   wrapper itself has overflow: visible so dropdowns can escape. */
.filters {
  overflow: visible !important;
}

/* Default: hide the overlay (desktop) */
.sheet-overlay { display: none; }
.sheet-head { display: none; }

/* Desktop dropdown — anchored, capped width, with check circles */
@media (min-width: 761px) {
  .chip-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: max-content;
    min-width: 240px;
    max-width: 320px;
    max-height: 360px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    padding: 6px;
    z-index: 50;
  }
  .chip-menu .sheet-head { display: none; }
}

/* Mobile bottom sheet — every <=760px viewport, no JS gating */
@media (max-width: 760px) {
  /* Ensure the chip dropdown is rendered as a fixed bottom sheet */
  .chip-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: 70dvh !important;
    border-radius: 16px 16px 0 0;
    z-index: 201 !important;
    padding: 0 !important;
    box-shadow: 0 -12px 32px rgba(0,0,0,0.18);
    animation: sheet-up .25s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    background: #fff;
  }
  .chip-menu::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(14,14,14,0.22);
    z-index: 1;
  }
  .sheet-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(14,14,14,0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 200;
    animation: sheet-fade .2s ease;
  }
  .sheet-head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 22px 18px 12px;
    border-bottom: 1px solid var(--line);
    background: #fff;
  }
  .sheet-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: -0.01em;
  }
  .sheet-actions { display: inline-flex; align-items: center; gap: 8px; }
  .sheet-clear, .sheet-done {
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    cursor: pointer;
  }
  .sheet-done {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  .chip-menu-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px 8px calc(20px + env(safe-area-inset-bottom));
    gap: 0;
    display: flex;
    flex-direction: column;
  }
  .chip-menu .opt {
    padding: 14px 14px;
    font-size: 15px;
    min-height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .chip-menu .opt.selected {
    background: var(--orange-soft);
    color: var(--orange-2);
    font-weight: 500;
  }
  .chip-menu .opt-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    color: transparent;
    flex-shrink: 0;
  }
  .chip-menu .opt.selected .opt-check {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
  }
  .chip-menu .opt .opt-right { display: inline-flex; align-items: center; gap: 8px; }
  .chip-menu .opt .ct { font-size: 12px; color: var(--muted); }
}

/* ───────── Round 16: Attending statuses + per-founder RSVP badges ───────── */

/* Company-level status pill — Attending green / NotAttending neutral */
.tag.status.Attending {
  background: #DCEFD3;
  color: #0B6B14;
  border: 1px solid rgba(11,107,20,0.18);
}
.tag.status.NotAttending {
  background: #EDE6DA;
  color: #6B6258;
  border: 1px solid rgba(107,98,88,0.16);
}

/* Attending count tag in drawer hero */
.tag.tag-attending {
  background: var(--orange-soft);
  color: var(--orange-2);
  border-color: rgba(255,90,31,0.25);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Per-founder RSVP badge in drawer founder cards */
.rsvp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.rsvp-badge.rsvp-dinner {
  background: #DCEFD3;
  color: #0B6B14;
  border: 1px solid rgba(11,107,20,0.2);
}
.rsvp-badge.rsvp-events_only {
  background: #FFEAD2;
  color: #8C4A00;
  border: 1px solid rgba(140,74,0,0.2);
}
.rsvp-badge.rsvp-no_rsvp {
  background: rgba(14,14,14,0.05);
  color: rgba(14,14,14,0.45);
  border: 1px solid rgba(14,14,14,0.08);
}

/* Subtle left rail on founder card hinting their RSVP state */
.founder { position: relative; }
.founder::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 2px;
}
.founder.rsvp-dinner::before { background: #0B6B14; }
.founder.rsvp-events_only::before { background: #FF8A00; }
.founder.rsvp-no_rsvp::before { background: rgba(14,14,14,0.06); }

/* ───────── Round 17: Phone icon + team attendees ───────── */

/* Phone icon — icon-only on mobile, no text label */

/* Team attendees section in drawer */
.team-attendees {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-2);
}
.team-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.team-attendee {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(14,14,14,0.025);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
  position: relative;
}
.team-attendee::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 2px;
}
.team-attendee.rsvp-dinner::before { background: #0B6B14; }
.team-attendee.rsvp-events_only::before { background: #FF8A00; }
.team-attendee .avatar.small {
  width: 36px; height: 36px;
  font-size: 13px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  color: #fff;
  font-weight: 500;
}
.team-attendee .ta-info { min-width: 0; }
.team-attendee .ta-info .nm {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.team-attendee .ta-info .em {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  word-break: break-all;
}
.team-attendee .contact-actions {
  flex-direction: row;
  gap: 6px;
}
.team-attendee .contact-actions .ico-btn {
  width: 32px; height: 32px;
  flex: 0 0 auto;
}

/* Make sure mobile contact-actions text labels include Phone */
@media (max-width: 760px) {
  .team-attendee .contact-actions {
    width: auto;
  }
  .team-attendee .contact-actions .ico-btn::after {
    display: none;
  }
}

/* ───────── Round 18: search clear + simplified attending UI ───────── */

/* Search bar clear button (× icon) — visible while there's a query */
.search-clear {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(14,14,14,0.06);
  color: var(--ink);
  margin-right: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.search-clear:hover, .search-clear:active {
  background: var(--ink);
  color: var(--bg);
}
@media (max-width: 760px) {
  .search-clear { width: 28px; height: 28px; }
}

/* Simplified RSVP badges (yes / no) */
.rsvp-badge.rsvp-yes {
  background: #DCEFD3;
  color: #0B6B14;
  border: 1px solid rgba(11,107,20,0.25);
}
.rsvp-badge.rsvp-no {
  background: rgba(14,14,14,0.05);
  color: rgba(14,14,14,0.45);
  border: 1px solid rgba(14,14,14,0.08);
}
.founder.rsvp-yes::before { background: #0B6B14; }
.founder.rsvp-no::before { background: rgba(14,14,14,0.06); }
.team-attendee.rsvp-yes::before { background: #0B6B14; }

/* ───────── Round 19: search bar legibility on mobile ───────── */

/* On mobile, the search input was getting choked by:
   - the brand wordmark sharing the same row
   - the AI / Text segmented toggle eating ~80px
   Fix: split header into TWO rows on phones (brand top, search bottom),
   shorten the placeholder, and condense the AI/Text toggle to icons. */
@media (max-width: 760px) {
  .header-inner {
    flex-wrap: wrap;
    gap: 8px;
    padding: max(env(safe-area-inset-top), 8px) 14px 8px;
  }
  .brand {
    order: 1;
    flex: 0 0 auto;
    max-width: 60%;
  }
  .header-search {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding: 10px 12px 10px 38px;
    gap: 6px;
  }
  .header-search svg.search-icon { left: 12px; }
  .header-search input {
    font-size: 16px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .header-search input::placeholder { font-size: 14px; }
  /* Compact AI / Text toggle — text only, smaller */
  .search-mode {
    flex-shrink: 0;
    gap: 0;
  }
  .search-mode button {
    padding: 6px 8px;
    font-size: 11.5px;
    min-height: 30px;
  }
  .search-mode button svg { display: none; }
}

/* Tiny phones — let the search take the full row, drop the toggle even
   tighter, hide the search-clear icon padding */
@media (max-width: 380px) {
  .header-search { padding: 9px 10px 9px 34px; }
  .header-search svg.search-icon { left: 10px; }
  .search-mode button { padding: 5px 7px; font-size: 11px; }
  .header-search input::placeholder { font-size: 13.5px; }
}

/* ───────── Round 20: prevent iOS Safari auto-shrink ───────── */

/* Force the layout to ALWAYS use the full visual viewport width.
   The earlier `body { max-width: 100vw }` could cause Safari to compute the
   page width as just the layout viewport while content (e.g. ticker track)
   has natural width far larger, triggering its auto-shrink heuristic. */
html, body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

/* News ticker: explicitly cap at 100% so its huge internal track never
   pushes the document's intrinsic width beyond the viewport. */
.ticker {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.ticker-viewport {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.ticker-track {
  width: max-content;
  flex-shrink: 0;
}

/* Filters row: same — internal scroll, never expand the page. */
.filters {
  width: 100%;
  max-width: 100%;
}

/* Defensive: any flex grid row should never propagate min-content wider than parent */
.list, .row, .stat-grid, .header-inner, .hero, .result-meta {
  max-width: 100%;
}
/* Align result-meta to the same left edge as the filter chips and the row
   list (32px padding-left). Without this override, the inherited
   `max-width: 1320px; margin: 0 auto` would push the text inwards on
   desktops wider than 1320px, leaving "45 companies" floating awkwardly. */
.result-meta {
  margin-left: 0;
  margin-right: 0;
}

/* ───────── Round 21: stop ticker track from polluting page width ───────── */
/* Even with overflow:hidden, the track's huge natural width can be picked up
   by iOS Safari's auto-shrink heuristic. Take it out of the layout flow with
   position:absolute so it never contributes to document scrollWidth. */
.ticker-viewport {
  position: relative;
  contain: layout paint;
}
.ticker-track {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  width: max-content;
  animation: ticker-scroll 150s linear infinite;
}
.ticker-viewport {
  /* Give the absolute track room to live within the visible row */
  height: 100%;
  min-height: 44px;
}
.ticker.paused .ticker-track { animation-play-state: paused; }

/* The animation keyframes still work — just override translateY presence */
@keyframes ticker-scroll {
  from { transform: translate(0, -50%); }
  to { transform: translate(-50%, -50%); }
}

/* ───────── Round 22: filters mobile scroll containment ───────── */

/* Mobile bottom sheet uses position:fixed — chip-menu escapes any parent
   overflow naturally. So we can safely contain the filter row's horizontal
   scroll on mobile and stop the page from inheriting the chip row width. */
@media (max-width: 760px) {
  .filters {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }
}

/* ───────── Round 23: backdrop-filter creates a containing block ───────── */
/* `backdrop-filter: blur(10px)` on .filters was trapping `position: fixed`
   descendants (the chip-menu bottom sheet + its overlay). The sticky filter
   bar uses solid translucent background instead. */
.filters {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--bg) !important;
}
@media (max-width: 760px) {
  .filters {
    background: rgba(250, 246, 239, 0.97) !important;
  }
}

/* Same precaution on header — backdrop-filter may also trap fixed children
   like the AI search dropdown */
.app-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--bg) !important;
}

/* ───────── Round 24: don't block touch-scroll inside open sheets ───────── */
/* `touch-action: none` on body propagates to descendants, blocking scroll
   inside the bottom-sheet's option list. Use ONLY overflow:hidden to lock
   page scroll; let descendants pan freely. */
body.no-scroll {
  overflow: hidden;
  touch-action: auto;
}
.chip-menu-list,
.drawer-body,
.ask-body {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ───────── Round 25: hide Ask FAB while any overlay sheet is open ───────── */
/* The FAB has z-index 60; sheets are 200/201. But the FAB has a transform
   (translateY) which creates its own stacking context. Hide it explicitly
   while the body is scroll-locked (i.e. a sheet/drawer is open). */
body.no-scroll .ask-fab {
  display: none !important;
}

/* ───────── Round 26: small UI fixes ───────── */

/* Sort select — match chip pill height + style so it doesn't look orphaned */
.sort-select {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 4px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-sans);
  flex-shrink: 0;
}
.sort-select select {
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--ink);
  appearance: auto;
  cursor: pointer;
}
@media (max-width: 760px) {
  .sort-select { height: 36px; min-height: 36px; }
  .sort-select select { font-size: 13px; }
}

/* AI / Text toggle — active state is now ORANGE (was ink-black) */
.search-mode {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(14,14,14,0.04);
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
}
.search-mode button {
  border: none;
  background: transparent;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .15s, color .15s;
}
.search-mode button.on {
  background: var(--orange) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(255,90,31,0.2);
}
.search-mode button.on svg { color: #fff; }
.search-mode button:not(.on) svg { color: var(--orange); }

/* ───────── Toggle-style mode switch (click anywhere flips it) ───────── */
.search-mode.toggle {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  padding: 3px;
  background: rgba(14,14,14,0.05);
  border-radius: 999px;
  flex-shrink: 0;
}
.search-mode.toggle:focus-visible { box-shadow: 0 0 0 2px rgba(255,90,31,0.4); }

/* The sliding thumb that highlights the active side */
.search-mode.toggle .toggle-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 1px 2px rgba(255,90,31,0.25), 0 1px 4px rgba(0,0,0,0.06);
  transition: transform .28s cubic-bezier(.5,.05,.2,1.2), background .2s;
  z-index: 0;
  pointer-events: none;
}
.search-mode.toggle[data-mode="keyword"] .toggle-thumb {
  transform: translateX(100%);
  background: var(--ink);
}
.search-mode.toggle[data-mode="smart"] .toggle-thumb {
  background: var(--orange);
}

.search-mode.toggle .mode-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 999px;
  transition: color .2s;
  pointer-events: none;
  white-space: nowrap;
}
.search-mode.toggle .mode-pill.on { color: #fff; }
.search-mode.toggle .mode-pill.on svg { color: #fff; }
.search-mode.toggle .mode-pill:not(.on) svg { color: var(--orange); }

/* Mobile sizing — match prior compact toggle */
@media (max-width: 760px) {
  .search-mode.toggle .mode-pill { padding: 6px 11px; font-size: 11.5px; min-height: 30px; }
  .search-mode.toggle .mode-pill svg { display: none; }
}
@media (max-width: 380px) {
  .search-mode.toggle .mode-pill { padding: 5px 9px; font-size: 11px; }
}

/* ───────── AI mode attention-getter (when Text mode is active) ───────── */
.search-mode.toggle .mode-ai { position: relative; overflow: visible; }
.search-mode.toggle .mode-ai .ai-spark {
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,90,31,0.40) 0%, rgba(255,90,31,0) 65%);
  opacity: 0;
}
.search-mode.toggle[data-mode="keyword"] .mode-ai svg {
  animation: ai-twinkle 1.8s ease-in-out infinite;
  transform-origin: center;
}
.search-mode.toggle[data-mode="keyword"] .mode-ai .ai-spark {
  animation: ai-glow 2.4s ease-in-out infinite;
}
.search-mode.toggle[data-mode="keyword"] {
  animation: ai-attract-toggle 2.4s ease-in-out infinite;
}

@keyframes ai-attract-toggle {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,31,0); }
  50%      { box-shadow: 0 0 0 4px rgba(255,90,31,0.15); }
}
@keyframes ai-glow {
  0%, 100% { opacity: 0; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.30); }
}
@keyframes ai-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg);    filter: drop-shadow(0 0 0 rgba(255,90,31,0)); }
  50%      { transform: scale(1.25) rotate(15deg); filter: drop-shadow(0 0 6px rgba(255,90,31,0.8)); }
}

@media (prefers-reduced-motion: reduce) {
  .search-mode.toggle,
  .search-mode.toggle .mode-ai svg,
  .search-mode.toggle .mode-ai .ai-spark,
  .search-mode.toggle .toggle-thumb { animation: none !important; transition: none !important; }
}

/* ───────── AI chat — markdown formatting (bullets, headings, paragraphs) ───────── */
.bubble.assistant .bubble-text { line-height: 1.55; }
.bubble.assistant .md-p { margin: 0 0 10px; }
.bubble.assistant .md-p:last-child { margin-bottom: 0; }
.bubble.assistant .md-h {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 6px;
  line-height: 1.2;
}
.bubble.assistant .md-h:first-child { margin-top: 0; }
.bubble.assistant .md-ul {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bubble.assistant .md-ul li {
  position: relative;
  padding-left: 18px;
  line-height: 1.5;
  color: var(--ink);
}
.bubble.assistant .md-ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
}
.bubble.assistant .md-ul li strong { color: var(--ink); font-weight: 600; }
.bubble.assistant .md-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(14,14,14,0.05);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Streaming cursor */
.bubble.streaming .stream-cursor {
  display: inline-block;
  margin-left: 2px;
  color: var(--orange);
  animation: stream-blink 0.95s steps(2, start) infinite;
  font-weight: 400;
}
@keyframes stream-blink { to { visibility: hidden; } }

/* Section labels above founder cards / followups */
.bubble-section-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 8px;
}

/* ───────── Founder cards inside chat ───────── */
.bubble-founders { margin-top: 6px; }
.founder-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.founder-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.founder-card:hover { border-color: var(--line-2); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.founder-card .fc-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.founder-card .fc-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 12px;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.founder-card .fc-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.founder-card .fc-name {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.founder-card .fc-role {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.founder-card .fc-actions {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.founder-card .fc-act {
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.founder-card .fc-act:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ───────── Follow-up chips ───────── */
.bubble-followups { margin-top: 14px; }
.followup-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.followup-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  transition: border-color .15s, background .15s, transform .12s;
  font-family: inherit;
}
.followup-chip:hover {
  border-color: var(--orange);
  background: #fff;
  transform: translateX(2px);
}
.followup-chip svg { color: var(--muted); flex-shrink: 0; }
.followup-chip:hover svg { color: var(--orange); }

/* AskPanel "New chat" button — pill style */
.ask-clear {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px !important;
  white-space: nowrap;
}
.ask-clear-label { white-space: nowrap; }
@media (max-width: 480px) {
  /* Hide the text label on tight phones — keep just the icon */
  .ask-clear-label { display: none; }
  .ask-clear { padding: 0 !important; width: 30px; justify-content: center; }
}

/* AskPanel header — lighter on mobile so chat content has room */
@media (max-width: 760px) {
  .ask-head { padding-top: 14px !important; padding-bottom: 10px !important; }
  .ask-head-text .ask-title { font-size: 16px !important; }
  .ask-head-text .ask-sub { font-size: 11.5px !important; }
}

/* AskPanel sizing — use 100dvh so mobile browser chrome doesn't crop the input */
.ask-panel {
  height: 100dvh;
  height: 100vh; /* fallback */
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
.ask-body { flex: 1; min-height: 0; }

/* AskPanel input — auto-grow textarea */
.ask-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.ask-input textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px; /* >= 16px keeps iOS Safari from auto-zooming on focus */
  line-height: 1.4;
  background: var(--bg-2);
  outline: none;
  max-height: 140px;
  min-height: 40px;
  overflow-y: auto;
  transition: border-color .15s, background .15s;
}
.ask-input textarea:focus { border-color: var(--ink); background: #fff; }
.ask-input textarea:disabled { opacity: 0.6; }
.ask-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: none;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .12s;
}
.ask-send:hover:not(:disabled) { background: var(--orange); }
.ask-send:active:not(:disabled) { transform: scale(0.94); }
.ask-send:disabled { background: rgba(14,14,14,0.20); cursor: not-allowed; }

/* Custom confirm modal (replaces window.confirm for "New chat") */
.confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(14,14,14,0.42);
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: confirm-fade .15s ease-out;
}
@keyframes confirm-fade { from { opacity: 0; } to { opacity: 1; } }
.confirm-card {
  width: min(380px, 100%);
  background: var(--bg);
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 22px 60px -20px rgba(0,0,0,0.35);
  animation: confirm-pop .2s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes confirm-pop {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.confirm-card h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--ink);
}
.confirm-card p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 18px;
  line-height: 1.45;
}
.confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.confirm-cancel, .confirm-confirm {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
.confirm-cancel:hover { background: rgba(14,14,14,0.05); }
.confirm-confirm {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.confirm-confirm:hover { background: var(--orange); border-color: var(--orange); }

/* Retry button on failed AI message */
.bubble-retry {
  margin-top: 10px;
}
.retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--orange);
  background: transparent;
  color: var(--orange);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.retry-btn:hover:not(:disabled) { background: rgba(255,90,31,0.08); }
.retry-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Founder card div (was a button) — keep cursor + proper hit area */
.founder-card { cursor: pointer; }
.founder-card .fc-main { cursor: pointer; }
.founder-card .fc-info {
  flex: 1 1 auto;
  min-width: 0;
}
.founder-card .fc-name,
.founder-card .fc-role {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* (Removed a stray `position: relative` override here — it was breaking the
   sticky positioning of the filter row and adding 52 px of phantom whitespace
   between the news ticker and the chips on mobile.) */

/* Smallest-width brand mark — keep readable */
@media (max-width: 380px) {
  .brand-mark { height: 28px !important; }
}

/* ───────── Founder/team avatars with LinkedIn photo overrides ───────── */
.avatar.has-photo,
.fc-avatar.has-photo {
  background: var(--bg-2) !important;
  overflow: hidden;
  padding: 0 !important;
  font-size: 0;            /* hide any stray text */
  color: transparent;
}
.avatar.has-photo img,
.fc-avatar.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.avatar.has-photo {
  border-radius: 50%;
}

/* ───────── Latest-investment "NEW" tag on featured rows ───────── */
.tag-new {
  display: inline-flex !important;
  align-items: center;
  background: var(--orange) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600;
  font-size: 10.5px !important;
  letter-spacing: 0.06em;
  padding: 3px 8px !important;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(255,90,31,0.25);
  animation: tag-new-glow 2.4s ease-in-out infinite;
}
@keyframes tag-new-glow {
  0%, 100% { box-shadow: 0 1px 2px rgba(255,90,31,0.25); }
  50%      { box-shadow: 0 1px 2px rgba(255,90,31,0.25), 0 0 0 4px rgba(255,90,31,0.15); }
}
.tag-new svg { color: #fff; }

/* ───────── Featured drawer — centered modal instead of side panel ───────── */
.drawer-overlay.featured.open {
  background: rgba(14,14,14,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.drawer.featured {
  /* Override the right-slide drawer with a centered modal */
  position: fixed !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) scale(0.92) !important;
  width: min(720px, 92vw) !important;
  max-width: 92vw !important;
  height: auto !important;
  max-height: 88vh !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.12) !important;
  border: 1px solid rgba(255,90,31,0.22) !important;
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity .22s ease-out, transform .28s cubic-bezier(.2,.9,.3,1.2) !important;
}
.drawer.featured.open {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto;
}
.drawer.featured .drawer-body {
  max-height: calc(88vh - 56px) !important;
  overflow-y: auto !important;
}
.drawer.featured .drawer-handle { display: none !important; }

/* Featured ribbon inside the drawer header */
.featured-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: linear-gradient(90deg, rgba(255,90,31,0.18), rgba(255,90,31,0.06));
  border: 1px solid rgba(255,90,31,0.30);
  color: var(--orange);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
}
.featured-ribbon svg { color: var(--orange); }

/* Mobile featured modal — go full-screen for tap targets, keep confetti */
@media (max-width: 760px) {
  .drawer.featured {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    transform: translate(0, 0) scale(0.96) !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .drawer.featured.open {
    transform: translate(0, 0) scale(1) !important;
  }
  .drawer.featured .drawer-body {
    max-height: calc(100dvh - 56px) !important;
  }
}

/* ───────── Confetti ───────── */
.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 250; /* above drawer overlay (220) but below the drawer itself (200+) */
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -32px;
  border-radius: 2px;
  animation-name: confetti-fall;
  animation-timing-function: cubic-bezier(.25,.35,.6,1);
  animation-fill-mode: forwards;
  transform-origin: center;
  will-change: transform, opacity;
}
.confetti-round { border-radius: 50%; }
.confetti-rect-tall { border-radius: 1.5px; }
@keyframes confetti-fall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg);                          opacity: 1; }
  100% { transform: translate3d(var(--drift, 0), 110vh, 0) rotate(var(--rotate, 360deg)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .confetti-layer { display: none !important; }
  .tag-new { animation: none !important; }
}

/* ───────── Bookmark column + button ───────── */
.row {
  grid-template-columns: 64px 1.5fr 0.9fr 0.9fr 0.7fr 40px !important;
}
@media (max-width: 1080px) {
  .row { grid-template-columns: 56px 1.4fr 1fr 0.8fr 40px !important; }
}
@media (max-width: 880px) {
  .row { grid-template-columns: 52px 1.3fr 0.8fr 40px !important; }
}
@media (max-width: 760px) {
  .row { grid-template-columns: 48px 1fr 40px !important; }
  .row .col-bookmark { display: flex !important; }
}
.col-bookmark {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bookmark-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 50%;
  color: rgba(14,14,14,0.45);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .12s;
  flex-shrink: 0;
}
.bookmark-btn:hover {
  color: var(--orange);
  border-color: var(--orange);
  background: rgba(255,90,31,0.06);
}
.bookmark-btn:active { transform: scale(0.92); }
.bookmark-btn.on {
  color: var(--orange);
  border-color: var(--orange);
  background: rgba(255,90,31,0.10);
  animation: bookmark-pop .25s ease-out;
}
@keyframes bookmark-pop {
  0%   { transform: scale(1); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Drawer header — group bookmark + close */
.drawer-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.drawer-bookmark { width: 36px; height: 36px; }

/* Drawer share/save button — small pill so it's distinct from the bookmark icon */
.drawer-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  font: 500 12.5px var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .12s;
}
.drawer-share:hover {
  color: var(--orange);
  border-color: var(--orange);
  background: rgba(255,90,31,0.06);
}
.drawer-share:active { transform: scale(0.96); }
.drawer-share-label { white-space: nowrap; }
@media (max-width: 480px) {
  /* On tight phones, drop the text — the upload arrow icon is universally recognized */
  .drawer-share-label { display: none; }
  .drawer-share { padding: 0; width: 36px; justify-content: center; }
}

/* ───────── Toasts ───────── */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: min(420px, calc(100% - 32px));
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.12);
  pointer-events: auto;
  animation: toast-in .22s cubic-bezier(.2,.9,.3,1.2);
  letter-spacing: -0.005em;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.toast-msg { flex: 1; min-width: 0; }
.toast-action {
  background: var(--orange);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
@media (max-width: 760px) {
  .toast-host { bottom: calc(80px + env(safe-area-inset-bottom)); /* clear FAB */ }
  .toast { font-size: 13px; }
}

/* Bookmarks filter chip */
.chip.chip-bookmarks {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip.chip-bookmarks svg { color: var(--orange); }
.chip.chip-bookmarks.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.chip.chip-bookmarks.active svg { color: #fff; }

/* Search placeholder fit on mobile — shorter copy, smaller size */
@media (max-width: 760px) {
  .header-search input::placeholder {
    font-size: 13px;
    letter-spacing: -0.01em;
  }
}

/* ───────── Round 27: remove row arrow + tighten row layout ───────── */
.row .arrow { display: none !important; }

/* Drop the trailing `auto` arrow column from the row grid on every viewport.
   Mobile already used `44px 1fr auto`; keep auto for the RSVP meta block but
   the now-invisible arrow doesn't need its own column. */
.row {
  grid-template-columns: 64px 1.5fr 0.9fr 0.9fr 0.7fr 0.6fr !important;
}
@media (max-width: 1080px) {
  .row { grid-template-columns: 56px 1.4fr 1fr 0.8fr 0.6fr !important; }
}
@media (max-width: 880px) {
  .row { grid-template-columns: 52px 1.3fr 0.8fr !important; }
}
@media (max-width: 760px) {
  .row {
    grid-template-columns: 48px 1fr auto !important;
    align-items: center;
    padding: 16px 4px;
  }
}

/* ───────── Round 28: search bar visual mode shift ───────── */

/* AI (smart) mode — orange-tinted: border, soft inner glow, magnifier
   recolored to orange spark. Cream solid background to keep it grounded. */
.header-search.mode-smart {
  border-color: rgba(255, 90, 31, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 90, 31, 0.05),
              0 1px 2px rgba(255, 90, 31, 0.06);
  background: linear-gradient(0deg, rgba(255, 234, 220, 0.45), rgba(255, 234, 220, 0.45)), var(--bg-2);
}
.header-search.mode-smart svg.search-icon {
  color: var(--orange);
}
.header-search.mode-smart input::placeholder {
  color: rgba(255, 90, 31, 0.55);
}
.header-search.mode-smart:focus-within {
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.12);
}

/* Text (keyword) mode — clean neutral, slightly cooler ink */
.header-search.mode-keyword {
  border-color: var(--line);
  background: var(--bg-2);
}
.header-search.mode-keyword svg.search-icon {
  color: var(--ink-2);
}
.header-search.mode-keyword input::placeholder {
  color: var(--muted);
}
.header-search.mode-keyword:focus-within {
  border-color: var(--ink);
  background: #fff;
}

/* Smooth transition between modes */
.header-search,
.header-search svg.search-icon,
.header-search input::placeholder {
  transition: border-color .25s ease, background .25s ease,
              box-shadow .25s ease, color .25s ease;
}

/* AskPanel header actions (Clear + close) */
.ask-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ask-clear {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.ask-clear:hover { border-color: var(--ink); color: var(--ink); background: rgba(14,14,14,0.03); }

/* ───────── Round 29: definitive brand wordmark ─────────
   Six prior rounds left conflicting max-width caps on .brand-mark img,
   shrinking the wordmark inside its container so it floated off-center.
   Reset cleanly: container is sized; img fills it; no max-width caps. */
.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
}
.brand-mark {
  width: auto !important;
  height: 38px !important;
  aspect-ratio: 1371 / 441 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.brand-mark img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  border-radius: 0 !important;
}
.brand-text { display: none !important; }

@media (max-width: 760px) {
  .brand-mark { height: 30px !important; }
  .brand { max-width: none !important; }
  /* Keep brand + search in two rows on phones (set up in Round 19),
     but make the brand row hug the left edge cleanly. */
  .header-inner { row-gap: 6px; }
}
@media (max-width: 380px) {
  .brand-mark { height: 26px !important; }
}

/* ───────── Round 30: team-attendee cards match founder cards ─────────
   Earlier rounds gave team-attendee a different (smaller, beige) layout
   that looked second-class next to the white founder cards. Mirror the
   founder card spec exactly so the only visible difference is the
   section header above. */
.team-attendees {
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px dashed var(--line-2) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
.team-head {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin-bottom: 4px !important;
}
.team-attendee {
  display: grid !important;
  grid-template-columns: 56px 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  margin-bottom: 0 !important;
  position: relative !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.team-attendee:hover {
  border-color: var(--line-2) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
}
.team-attendee::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 14px !important; bottom: 14px !important;
  width: 3px !important;
  border-radius: 2px !important;
  background: #0B6B14 !important;
}
.team-attendee .avatar.small {
  width: 56px !important;
  height: 56px !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
.team-attendee .ta-info { min-width: 0 !important; }
.team-attendee .ta-info .nm {
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 2px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.team-attendee .ta-info .role {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.35 !important;
}
.team-attendee .ta-info .em {
  font-size: 12px !important;
  color: var(--orange-2) !important;
  font-family: var(--font-mono) !important;
  margin-top: 4px !important;
  display: block !important;
  word-break: break-all !important;
}
.team-attendee .contact-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  width: auto !important;
}
.team-attendee .contact-actions .ico-btn {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 auto !important;
}

/* Mobile: match founder card mobile treatment (full-width pill row) */
@media (max-width: 760px) {
  .team-attendee {
    padding: 12px !important;
    gap: 12px !important;
    grid-template-columns: 38px 1fr !important;
    grid-template-areas: "avatar info" "actions actions" !important;
  }
  .team-attendee::before { top: 12px !important; bottom: 12px !important; }
  .team-attendee .avatar.small {
    width: 38px !important;
    height: 38px !important;
    font-size: 13px !important;
    grid-area: avatar !important;
  }
  .team-attendee .ta-info { grid-area: info !important; }
  .team-attendee .contact-actions {
    grid-area: actions !important;
    width: 100% !important;
  }
  .team-attendee .contact-actions .ico-btn {
    flex: 1 !important;
    width: auto !important;
    height: 46px !important;
    border-radius: 12px !important;
  }
  .team-attendee .contact-actions .ico-btn::after { content: none !important; display: none !important; }
}

/* ───────── Round 31: Sort-by chip matches filter chips ─────────
   The sort dropdown was using native <select> styling (heavier "A–Z" text,
   native chevron, mismatched padding) and looked orphaned next to the
   outlined filter chips. Restyle so it reads as one of them. */
.sort-select {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 7px 10px 7px 14px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: var(--bg) !important;
  color: var(--ink-2) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-family: var(--font-sans) !important;
  letter-spacing: -0.005em !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  cursor: pointer !important;
  transition: border-color .15s !important;
}
.sort-select:hover { border-color: var(--ink) !important; }
.sort-select select {
  height: auto !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 18px 0 4px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-family: inherit !important;
  color: var(--ink-2) !important;
  letter-spacing: inherit !important;
  line-height: 1 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4 L5 7 L8 4' stroke='%230E0E0E' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
}
.sort-select select::-ms-expand { display: none; }
@media (max-width: 760px) {
  .sort-select { padding: 7px 10px 7px 12px !important; }
  .sort-select select { padding-right: 16px !important; font-size: 13px !important; }
}

/* ───────── Round 32: spacing polish ─────────
   - 5th stat (Backing since 2011) was orphaned in 2-col mobile grid.
     Span 2 cols and center it so the row reads as a closing caption.
   - Bottom of page needs FAB clearance so the last row isn't covered.
   - Result-meta ("47 of 47 companies") had no top breathing room. */
@media (max-width: 760px) {
  /* 4-up row on mobile — cleaner with the Attending stat removed. */
  .stat-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
  }
  .stat-grid .stat {
    padding: 14px 6px !important;
    border-right: 1px solid var(--line) !important;
    border-top: none !important;
    display: block !important;
    text-align: left !important;
  }
  .stat-grid .stat:last-child { border-right: none !important; }
  .stat-grid .stat:not(:first-child) { padding-left: 8px !important; }
  .stat-grid .stat .num {
    font-size: 22px !important;
    letter-spacing: -0.02em !important;
    line-height: 1.05 !important;
    justify-content: flex-start !important;
  }
  .stat-grid .stat .num .plus { font-size: 14px !important; }
  .stat-grid .stat .lbl {
    font-size: 9.5px !important;
    letter-spacing: 0.06em !important;
    margin-top: 4px !important;
    line-height: 1.15 !important;
    text-align: left !important;
  }
  /* Reserve room for the persistent Ask FAB */
  body { padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important; }
  .result-meta { margin-top: 14px !important; }
}
/* Desktop: Surprise FAB also covers the last row corner — match clearance */
@media (min-width: 761px) {
  body { padding-bottom: 24px; }
}

/* ───────── Round 33: Sort chip uses ChipSingle chrome + filter overflow fade ───────── */

/* Sort chip is now a real ChipSingle — drop legacy native-select overrides
   so the .chip styles win cleanly. */
.filters-right .sort-select { all: unset; }

/* Subtle right-edge fade so users see filter chips continue past the edge */
@media (max-width: 760px) {
  .filters {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    padding-right: 24px;
  }
}

/* AI search dropdown — cap height so it never spills off short viewports */
.ai-results {
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
}
.ai-results .ai-results-list,
.ai-results .ai-list,
.ai-results > :last-child {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}