:root {
  --ink: #0a0a0a;
  --ink-soft: #3f3f46;
  --paper: #f7f7f8;
  --paper-raised: #ffffff;
  --surface-muted: #f0f0f1;
  --slate: #71717a;
  --line: #e4e4e7;

  --positive: #16a34a;
  --positive-soft: #eafaf1;
  --negative: #dc2626;
  --warning: #92400e;
  --warning-soft: #fef3c7;
  --warning-border: #fde68a;

  --strategic: #0a0a0a;
  --adjacent: #52525b;
  --financial: #a1a1aa;

  /* Outreach pipeline stages — deliberately its own hues (blue/violet/
     amber-orange), not the green/red already used for feedback up/down,
     so the two controls never read as the same kind of thing. */
  --outreach-contacted: #2563eb;
  --outreach-contacted-soft: #eaf1fd;
  --outreach-responded: #7c3aed;
  --outreach-responded-soft: #f3ebfe;
  --outreach-in-talks: #c2410c;
  --outreach-in-talks-soft: #fdece1;
  --outreach-passed: #57534e;
  --outreach-passed-soft: #f2f1ef;

  /* Consolidation Radar — Signum's flagship, most-differentiated find.
     Its own gold accent, distinct from every other badge/status color on
     a buyer card (including --warning, a different amber used for
     criteria-mismatch flags) on purpose: this one is meant to catch the
     eye first. */
  --flagship-gold-text: #7c4a03;
  --flagship-gold-bg: linear-gradient(135deg, #fde68a, #f5b83d);

  --serif: 'Inter', sans-serif;
  --sans: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.topbar {
  background: var(--paper-raised);
  color: var(--ink);
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

a.wordmark:hover {
  color: var(--ink);
  opacity: 0.75;
}

.tagline {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--slate);
}

main {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* --- Project workspace sidebar (project.html only) ---
   Built as a real app-shell panel, not a floating card: fixed to the
   viewport edge, flush with the page background (no border/shadow/
   radius), full height below the topbar. Collapse uses a transform
   slide rather than animating width — width/padding transitions trigger
   layout reflow on every frame and look "not smooth"; transform doesn't. */

main.workspace-shell {
  max-width: none;
  margin: 0 0 0 260px;
  transition: margin-left 0.25s ease;
}

body.sidebar-collapsed main.workspace-shell {
  margin-left: 0;
}

.workspace-content {
  max-width: 920px;
  margin: 0 auto;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.icon-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 1rem;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

.icon-btn:hover { background: var(--surface-muted); }

.project-sidebar {
  position: fixed;
  top: var(--topbar-height, 81px);
  left: 0;
  bottom: 0;
  width: 260px;
  background: var(--paper);
  padding: 20px 16px;
  overflow-y: auto;
  transition: transform 0.25s ease;
  z-index: 20;
}

body.sidebar-collapsed .project-sidebar {
  transform: translateX(-100%);
}

.sidebar-new-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 16px;
}

.sidebar-search {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 18px;
  background: var(--paper-raised);
}

.sidebar-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 8px 10px;
}

.sidebar-project-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-project-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.88rem;
  overflow: hidden;
  transition: background 0.15s ease;
}

.sidebar-project-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-project-item:hover { background: var(--surface-muted); }

.sidebar-project-item.active {
  background: var(--paper-raised);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
}

.sidebar-project-item .avatar-circle { width: 22px; height: 22px; font-size: 0.65rem; }

.sidebar-project-empty { color: var(--slate); font-size: 0.82rem; padding: 8px 10px; }

.panel {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.03), 0 8px 24px rgba(10, 10, 10, 0.04);
}

h1 {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 8px;
}

h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.sub {
  color: var(--slate);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 60ch;
  margin: 0 0 24px;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}

/* Author styles always beat the UA stylesheet's [hidden] rule regardless
   of specificity, so `form { display: grid }` above silently breaks
   `<form hidden>` unless this is restated explicitly. */
form[hidden] {
  display: none;
}

.field-wide { grid-column: 1 / -1; }

.form-section-label {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 8px;
  margin-top: 8px;
  border-bottom: 2px solid var(--line);
}

.form-section-label:first-child { margin-top: 0; }

/* Groups the project workspace's three distinct actions (find new buyers /
   add known buyers / refresh existing scores) as tabs — one visible at a
   time, rather than three stacked, differently-weighted blocks competing
   for attention in one long scroll. */
.panel-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}

.panel-tab {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 4px;
  margin-right: 22px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
}

/* The base button{} rule further down sets a dark pill background on
   :hover and a 999px border-radius always — both need an explicit,
   equally-specific override here, or they show through as a stray
   rounded dark box the moment this tab is hovered/focused. */
.panel-tab:hover,
.panel-tab:focus,
.panel-tab:active {
  background: none;
  color: var(--ink);
}

.panel-tab:focus-visible {
  outline: 2px solid var(--line);
  outline-offset: 2px;
}

.panel-tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* A prominent, unmistakable "something is happening" indicator — the
   plain gray status text it replaced was easy to miss entirely,
   especially once the tab it belonged to was scrolled past. Sits right
   under the tab bar so it's visible regardless of which tab is open. */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin-bottom: 20px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--surface-muted);
  color: var(--ink-soft);
}

.status-indicator[hidden] { display: none; }

.status-indicator.error {
  background: #fdecec;
  color: var(--negative);
}

.status-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--ink-soft);
  flex-shrink: 0;
  animation: status-spin 0.7s linear infinite;
}

.status-indicator.error .status-spinner { display: none; }

@keyframes status-spin {
  to { transform: rotate(360deg); }
}

.feedback-confirm-panel {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin: -6px 0 16px;
}

.feedback-confirm-summary {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: var(--ink);
}

.feedback-confirm-actions {
  display: flex;
  gap: 10px;
}

label {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 6px;
}

.optional-tag {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  opacity: 0.7;
}

.field-hint {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--slate);
  margin: 6px 0 0;
  line-height: 1.4;
}

.file-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.file-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-soft);
  background: var(--surface-muted);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.file-upload-btn:hover { border-color: var(--ink); color: var(--ink); }
.file-upload-btn svg { flex-shrink: 0; }

.file-upload-status {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--slate);
}

.file-upload-status.error { color: var(--negative); }

input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  resize: vertical;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 34px;
  cursor: pointer;
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

button {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.15s ease;
}

button:hover { background: var(--ink-soft); }
button:disabled { opacity: 0.5; cursor: default; }

#submit-btn { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }

.status {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--slate);
}
.status.error { color: var(--negative); }

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.company-panel-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.results-meta {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--slate);
}

.export-buttons { display: flex; gap: 10px; }
.export-buttons button {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.export-buttons button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.legend {
  display: flex;
  gap: 18px;
  padding: 14px 0 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.legend-item {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-alert { color: var(--positive); font-weight: 600; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-strategic { background: var(--strategic); }
.dot-adjacent { background: var(--adjacent); }
.dot-financial { background: var(--financial); }

.buyer-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.buyer-row:last-child { border-bottom: none; }

.buyer-row.is-alert { background: linear-gradient(90deg, var(--positive-soft), transparent 40%); margin: 0 -12px; padding: 18px 12px; border-radius: 10px; }

.buyer-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  grid-column: 1;
}

.buyer-name .avatar-circle {
  width: 24px;
  height: 24px;
  font-size: 0.7rem;
  margin-right: 8px;
}

.buyer-name-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.buyer-name-link:hover {
  color: var(--ink-soft);
  border-bottom-color: var(--ink-soft);
}

.new-badge {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  background: var(--positive-soft);
  color: var(--positive);
  font-weight: 600;
}

.buyer-category {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
  color: white;
}
.buyer-category.Strategic { background: var(--strategic); }
.buyer-category.Adjacent { background: var(--adjacent); }
.buyer-category.Financial { background: var(--financial); color: var(--ink); }
.buyer-category.Unclassified { background: var(--slate); }

.buyer-score {
  grid-column: 3;
  grid-row: 1 / span 2;
  text-align: right;
  font-family: var(--mono);
}

.score-number { font-size: 1.8rem; font-weight: 600; }
.score-number.alert { color: var(--positive); }
.score-max { font-size: 0.85rem; color: var(--slate); }

.signal-bars {
  display: flex;
  gap: 3px;
  margin-top: 4px;
  justify-content: flex-end;
}
.signal-bars .bar {
  width: 5px;
  height: 14px;
  background: var(--line);
  border-radius: 1px;
}
.signal-bars .bar.filled { background: var(--ink); }
.signal-bars .bar.filled.alert { background: var(--positive); }

/* Real per-tier signal counts driving the score (see common.js's
   buyerRowHtml) — replaces the old abstract 3-dot "how many signals"
   indicator with an actual breakdown, since that told you nothing about
   which signals or how much each contributed. */
.score-breakdown {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.buyer-rationale {
  grid-column: 1 / span 2;
  color: var(--slate);
  font-size: 0.9rem;
  line-height: 1.55;
  margin-top: 6px;
  max-width: 62ch;
}

/* Deliberately placed ahead of .buyer-rationale in the DOM (see
   buyerRowHtml) and given real color weight, not a subtle tag — a fund
   that's explicitly ruled itself out on size is worth seeing before
   reading anything else about the match. */
.criteria-mismatch-flag {
  grid-column: 1 / span 2;
  background: #fdecec;
  color: var(--negative);
  border: 1px solid #f8c9c9;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 8px;
  max-width: 62ch;
}

/* Same placement idea as .criteria-mismatch-flag but deliberately much
   quieter — this is an FYI ("we couldn't confirm this"), not a warning
   ("this is wrong"), since an obscure real company can legitimately fail
   both entity-resolution checks through no fault of its own. */
.entity-unverified-note {
  grid-column: 1 / span 2;
  color: var(--slate);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.4;
  margin-top: 6px;
  max-width: 62ch;
}

/* Previews a contact Reach Out already found for this buyer (see
   main.py's project_find_contact) — saves a click-through just to
   learn whether anyone's been found. Positive/quiet, not a warning
   like the two notes above, so it gets the same --positive accent
   already used for score-delta/verified-badge good news elsewhere. */
.contact-found-note {
  grid-column: 1 / span 2;
  color: var(--positive);
  font-size: 0.82rem;
  line-height: 1.4;
  margin-top: 6px;
}

.contact-found-note strong { color: var(--ink); }

.contact-found-note a {
  color: inherit;
  text-decoration: underline;
}

/* The Reach Out panel's selectable contact list — one radio per
   candidate, letting the advisor pick a different person than
   whichever contact_finder's ranking put first (they may know one has
   moved on, or simply prefer someone else). */
#contact-options {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-option {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.contact-option strong {
  color: var(--ink);
}

.contact-option input[type="radio"] {
  width: auto;
  flex-shrink: 0;
}

.buyer-signals {
  grid-column: 1 / span 2;
  margin-top: 10px;
}

.signal-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 3px 10px;
  margin: 0 6px 6px 0;
  text-decoration: none;
  max-width: 480px;
  /* Full evidence text, wrapping rather than the hard single-line
     ellipsis-cut this used to have — the truncated tail (e.g. "...to
     expand AI-powered G…") was losing real information the LLM had
     already surfaced, not just hiding a redundant repeat of it. */
  white-space: normal;
  word-wrap: break-word;
  vertical-align: top;
  transition: border-color 0.15s ease, background 0.15s ease;
}

a.signal-tag:hover {
  border-color: var(--ink);
  background: var(--surface-muted);
  cursor: pointer;
}

.signal-tag-nolink {
  color: var(--slate);
  cursor: default;
}

.verified-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 8px;
  vertical-align: middle;
  text-decoration: none;
  transition: background 0.15s ease;
}

.verified-badge:hover {
  background: var(--surface-muted);
}

.consolidation-radar-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--flagship-gold-text);
  background: var(--flagship-gold-bg);
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: 8px;
  vertical-align: middle;
}

/* --- Nav bar --- */

.topnav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.navlink {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--slate);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}

.navlink:hover { color: var(--ink); background: var(--surface-muted); }

.navlink.active {
  color: var(--ink);
  background: var(--surface-muted);
}

.auth-status {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--slate);
  margin-left: 14px;
  white-space: nowrap;
}

.auth-status a {
  color: var(--ink);
  text-decoration: none;
}

.auth-status a:hover {
  text-decoration: underline;
}

/* --- Auth pages --- */

.auth-main {
  max-width: 420px;
  margin: 0 auto;
  padding: 64px 24px 80px;
}

.auth-panel h1 {
  text-align: center;
}

.auth-panel .sub {
  text-align: center;
  max-width: none;
}

.auth-switch {
  margin: 20px 0 0;
}

.auth-switch a {
  color: var(--ink);
  font-weight: 600;
}

.auth-panel #submit-btn {
  justify-self: stretch;
  text-align: center;
}

/* --- Legal pages --- */

.legal-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 40px;
}

.legal-content h1 {
  font-family: var(--serif);
  font-size: 1.8rem;
  margin: 0 0 4px;
}

.legal-content h2 {
  font-family: var(--serif);
  font-size: 1.1rem;
  margin: 32px 0 10px;
}

.legal-content p,
.legal-content li {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.65;
}

.legal-content ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.legal-content li {
  margin-bottom: 8px;
}

.legal-content strong {
  color: var(--ink);
}

.legal-content code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--surface-muted);
  padding: 1px 5px;
  border-radius: 4px;
}

.legal-placeholder {
  display: inline-block;
  color: var(--negative);
  font-family: var(--mono);
  font-size: 0.82rem;
  background: #fdecec;
  padding: 2px 8px;
  border-radius: 6px;
}

/* --- Footer (every page) --- */

.site-footer {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 24px 40px;
  display: flex;
  justify-content: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--slate);
}

.site-footer a {
  color: var(--slate);
  text-decoration: none;
}

/* The one line repeated on every single page, on purpose — see the
   "No source, no buyer" framing in README.md's "Brand DNA" section. */
.site-footer-mantra {
  font-weight: 600;
  color: var(--ink-soft);
}

.site-footer a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* --- Homepage --- */

.home-main {
  max-width: 980px;
  margin: 0 auto;
  padding: 64px 24px 80px;
  text-align: center;
}

.home-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 20px;
}

.home-title-line {
  font-family: var(--serif);
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.home-title-muted {
  color: var(--slate);
}

.home-sub {
  max-width: 56ch;
  margin: 0 auto 28px;
}

.hero-chip {
  display: inline-block;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 12px;
  font-weight: 600;
  color: var(--ink);
  vertical-align: middle;
}

/* The one-line promise behind every other feature on this page — see
   the "No source, no buyer" framing in README.md's "Brand DNA" section,
   and .site-footer-mantra which repeats it on every single page. */
.hero-mantra {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin: -16px 0 36px;
}

.btn-primary {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 13px 26px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.btn-primary:hover {
  background: var(--ink-soft);
}

.btn-small {
  padding: 8px 18px;
  font-size: 0.85rem;
}

#home-auth-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.trial-banner {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: var(--ink);
}

.trial-banner a {
  color: var(--ink);
  font-weight: 600;
}

/* Upfront notice on the actual Discover/Qualify pages (not the marketing
   homepage) — tells an anonymous visitor about the 10-buyer trial cap
   before they submit, rather than only surfacing it in the results
   afterward (that's what .trial-banner above is for). */
.trial-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  background: var(--warning-soft);
  border: 1px solid var(--warning-border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 0.9rem;
  color: var(--warning);
}

.trial-notice a {
  flex-shrink: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  text-align: left;
}

.bucket-card {
  display: block;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.03), 0 8px 24px rgba(10, 10, 10, 0.04);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.bucket-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.bucket-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--slate);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

/* Homepage-only: numbers here should read as part of the page's own
   typography, not the mono/data-label treatment the same class carries
   on the Product page's numbered workflow (kept as-is there). */
.card-grid .bucket-label {
  font-family: var(--sans);
  letter-spacing: normal;
}

.bucket-card h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 8px;
}

.bucket-card p {
  color: var(--slate);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 16px;
}

.philosophy {
  margin: 100px auto 0;
  padding-top: 64px;
  border-top: 1px solid var(--line);
  text-align: left;
}

.philosophy-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 80px;
}

.philosophy-row:last-child {
  margin-bottom: 0;
}

/* Zigzag: alternate rows swap which side the copy/example sit on —
   `order` keeps this a pure visual swap, no HTML reordering needed. */
.philosophy-row-reverse .philosophy-copy { order: 2; }
.philosophy-row-reverse .example-wrap { order: 1; }

.philosophy-lead {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

.philosophy-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
}

.philosophy-body strong {
  color: var(--ink);
  font-weight: 700;
}

.philosophy-accent {
  color: var(--positive);
  font-weight: 700;
}

.philosophy-stat {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 3px 13px;
  margin: 0 2px;
}

/* --- Homepage "sample output" mockup — reuses the real buyer-row/score/
   signal-tag classes wholesale so it can never visually drift from what the
   product actually renders; only the layout is overridden into a single,
   narrower column suited to a floating card instead of a full-width list. --- */

.example-wrap {
  position: relative;
  padding-top: 20px;
}

.example-caption {
  position: absolute;
  top: 0;
  left: 28px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(10, 10, 10, 0.18);
}

.example-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 34px 26px 24px;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.03), 0 24px 48px rgba(10, 10, 10, 0.08);
}

.example-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 16px;
}

.example-card .buyer-row {
  grid-template-columns: 1fr;
  padding: 0;
  border-bottom: none;
}

.example-card .buyer-rationale,
.example-card .buyer-signals {
  grid-column: 1;
}

.example-card .buyer-score {
  grid-column: 1;
  grid-row: auto;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  text-align: left;
  margin-top: 16px;
}

.example-card .signal-bars { justify-content: flex-start; margin-top: 0; }

.example-card .score-number,
.example-card .score-max {
  font-family: var(--sans);
}

/* The rationale's own highlighted phrase needs to pop against its muted
   body color, same contrast idea as .philosophy-body strong. */
.example-card .buyer-rationale strong {
  color: var(--ink);
}

.example-discarded {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--slate);
  font-size: 0.82rem;
  line-height: 1.5;
}

.example-discarded strong {
  color: var(--slate);
  text-decoration: line-through;
  font-weight: 600;
}

.discarded-icon {
  color: var(--negative);
  font-weight: 700;
  flex-shrink: 0;
}
.example-card .reach-out-link { margin-top: 0; margin-left: auto; }

.bucket-cta {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* Discover's card CTA reuses the hero button's exact action ("Start a
   search") — giving it the same black-pill treatment instead of a second,
   plain-text copy of it removes the redundant hero button entirely while
   keeping one clear, prominent way to start. */
.bucket-cta-primary {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: normal;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  padding: 10px 20px;
  transition: background 0.15s ease;
}

.bucket-card:hover .bucket-cta-primary {
  background: var(--ink-soft);
}

/* Qualify's CTA gets the same pill treatment as Discover's, but in the
   soft-green accent already used elsewhere (score deltas, the philosophy
   section's accent phrase) rather than a second solid-black pill — two
   identical buttons side by side would read as one action, not two. */
.bucket-cta-secondary {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--positive);
  background: var(--positive-soft);
  border-radius: 999px;
  padding: 10px 20px;
  transition: background 0.15s ease;
}

.bucket-card:hover .bucket-cta-secondary {
  background: #d3f3e1;
}

.product-heading {
  text-align: center;
  margin-bottom: 24px;
}

.section-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 8px;
}

.section-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

/* A distinct, boxed CTA rather than a plain inline text link — the
   original version blended straight into the page background and read
   as a footnote instead of a call to action. */
.learn-more-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 28px;
  margin-top: 32px;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.03), 0 8px 24px rgba(10, 10, 10, 0.04);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.learn-more-link:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.03), 0 16px 32px rgba(10, 10, 10, 0.08);
}

.learn-more-headline {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
}

.learn-more-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--slate);
}

.learn-more-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chip-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Color emoji glyphs render noticeably larger than a 13px SVG icon at
   the same font-size — shrunk here so this chip matches the others'
   footprint instead of visibly ballooning. */
.chip-icon-emoji {
  font-size: 0.78em;
}

.learn-more-chip-gold {
  background: var(--flagship-gold-bg);
  border-color: transparent;
  color: var(--flagship-gold-text);
}

/* --- Product page --- */

.product-main {
  max-width: 1040px;
}

.product-main .product-heading {
  margin-top: 56px;
}

/* Feature rows reuse .philosophy-row/.philosophy-row-reverse/.example-wrap/
   .example-card wholesale (same zigzag text+visual layout as the homepage)
   rather than defining a parallel system — one layout pattern for "text on
   one side, a real illustrative mockup on the other," used in both places.
   align-items switches from the homepage's "center" to "start": several
   feature panels have noticeably longer copy than the homepage's three
   examples, and centering a short mini-visual against a much taller text
   column left it floating in the middle of a lot of empty space — anchoring
   it near the top instead keeps it visually tied to the copy it illustrates. */
.philosophy-row.feature-panel {
  align-items: start;
}

.feature-copy .bucket-label {
  margin-bottom: 4px;
}

.feature-copy h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 10px;
}

.feature-copy p,
.feature-copy li {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.65;
}

.feature-copy ul {
  margin: 0 0 12px;
  padding-left: 0;
  list-style: none;
}

.feature-copy li {
  margin-bottom: 10px;
}

.feature-copy strong {
  color: var(--ink);
}

.mini-visual-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 14px;
}

.mini-visual-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.mini-visual-row:last-child { border-bottom: none; }

.mini-visual-row strong { color: var(--ink); }

/* Groups a .mini-visual-row with a short second line underneath it —
   used where a plain one-line list feels too sparse next to a long block
   of copy. The inner row's own border/padding is suppressed in favor of
   the block's, so the divider sits below the example line, not between
   the label and its example. */
.mini-visual-row-block {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.mini-visual-row-block:last-child { border-bottom: none; }

.mini-visual-row-block .mini-visual-row {
  border-bottom: none;
  padding: 0 0 4px;
}

.mini-visual-example {
  margin: 0 0 0 18px;
  font-size: 0.8rem;
  color: var(--slate);
}

.mini-visual-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink);
  white-space: nowrap;
}

.qualify-flow {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qualify-flow-input {
  flex: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.qualify-flow-arrow {
  font-family: var(--mono);
  color: var(--slate);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.qualify-flow-output {
  text-align: center;
}

.contact-mini-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
}

.contact-mini-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
}

.contact-mini-title {
  color: var(--slate);
  font-size: 0.85rem;
  margin-top: 2px;
}

.contact-mini-email {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink);
  margin-top: 8px;
}

.refresh-mini {
  text-align: center;
}

.refresh-mini-scores {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.refresh-mini-scores .score-max {
  font-size: 0.9rem;
}

.tier-chip {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  flex-shrink: 0;
}

.tier-chip.tier-1 { background: var(--ink); }
.tier-chip.tier-2 { background: var(--ink-soft); }
.tier-chip.tier-3 { background: var(--slate); }

/* Fully visible by default, no JS dependency — the reveal animation is a
   progressive enhancement layered on top via .will-reveal (see below),
   never a precondition for the content actually being visible. Confirmed
   by testing that IntersectionObserver's callback can silently fail to
   ever fire in some environments; a page that starts content at
   opacity:0 and relies on JS to reveal it is one dropped callback away
   from permanently invisible panels. */
.feature-panel {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 32px;
  margin-bottom: 20px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.03), 0 8px 24px rgba(10, 10, 10, 0.04);
}

/* Applied by JS only, right before the reveal observers are wired up —
   this is what actually creates the pre-animation hidden state, so a
   page with JS disabled (or one where this script errors before it
   runs) never gets past the plain, fully-visible rule above. */
.feature-panel.will-reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Fades/slides in once, the first time it scrolls into view (see the
   IntersectionObserver in product.html) — then stays visible. A
   setTimeout safety net also adds this after ~1.5s regardless, so a
   silently-failed IntersectionObserver can't leave panels stuck at
   opacity:0 forever. */
.feature-panel.will-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Toggles on/off as the panel crosses the vertical center of the
   viewport, so whichever section you're currently reading is the one
   that's visually "lit up." Purely cosmetic on top of already-visible
   content, so it's fine for this one to just silently not happen if
   the observer never fires — unlike the reveal above, nothing here
   gates base visibility. */
.feature-panel.is-active {
  border-color: var(--ink);
  box-shadow: 0 4px 16px rgba(10, 10, 10, 0.08), 0 20px 40px rgba(10, 10, 10, 0.1);
  transform: translateY(0) scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .feature-panel.will-reveal {
    opacity: 1;
    transform: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .feature-panel.is-active {
    transform: none;
  }
}

.hero-cta-final {
  display: inline-block;
  margin: 32px 0 0;
}

/* --- Monitor / watchlist --- */

.watchlist-section-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 24px 0 10px;
}

.watchlist-section-label:first-child { margin-top: 0; }

.watchlist-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  background: var(--paper-raised);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.03), 0 8px 24px rgba(10, 10, 10, 0.04);
}

.watchlist-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.watchlist-card h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 4px;
}

.source-tag {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--slate);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

.watchlist-meta {
  margin: 0;
  font-size: 0.85rem;
}

.watchlist-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.ghost-btn {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.ghost-btn:hover {
  background: var(--surface-muted);
}

.ghost-btn.danger-btn {
  color: var(--negative);
  border-color: var(--negative);
}

.ghost-btn.danger-btn:hover {
  background: #fdecec;
}

a.ghost-btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 18px;
  text-decoration: none;
  transition: background 0.15s ease;
}

/* --- Projects dashboard --- */

.projects-table {
  width: 100%;
  border-collapse: collapse;
}

.projects-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--line);
}

.projects-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.projects-table tr:last-child td {
  border-bottom: none;
}

.avatar-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.85rem;
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
}

/* The initial-letter fallback sits underneath a favicon fetched from the
   company's own site (see common.js's companyAvatarHtml) — if the image
   loads, its onload handler hides this; if it 404s, onerror removes the
   <img> instead, leaving the initial visible with no layout shift either way. */
.avatar-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.company-name-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.company-name-heading .avatar-circle {
  width: 40px;
  height: 40px;
  font-size: 1.05rem;
}

.status-badge {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  background: var(--surface-muted);
  color: var(--slate);
}

.status-badge.idle { background: var(--positive-soft); color: var(--positive); }
.status-badge.searching { background: var(--surface-muted); color: var(--ink); }
.status-badge.failed { background: #fdecec; color: var(--negative); }

.watchlist-status {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--slate);
  margin-top: 10px;
}

.watchlist-body {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* --- Score deltas (Monitor rescans) --- */

.score-delta {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  margin-top: 6px;
  text-align: right;
}

.score-delta.up { color: var(--positive); }
.score-delta.down { color: var(--negative); }
.score-delta.neutral { color: var(--slate); }

/* --- Reach out link on buyer cards --- */

.reach-out-link {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink);
  text-decoration: none;
  margin-top: 8px;
  text-align: right;
}

.reach-out-link:hover { text-decoration: underline; }

/* .reach-out-link is also used on a real <button> (the project-workspace
   variant) — the generic `button {}` rule paints those black with white
   text, and this class's own color: var(--ink) then overrides it back to
   black-on-black. Strip the button chrome so it renders as the same plain
   text link as the <a> variant. */
button.reach-out-link {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  font-weight: 400;
  width: 100%;
}

button.reach-out-link:hover { background: none; }

/* --- Per-buyer feedback (Projects only) --- */

.buyer-feedback {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.feedback-btn {
  background: none;
  color: var(--slate);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
}

.feedback-btn:hover { background: var(--surface-muted); color: var(--ink); }

.feedback-btn.feedback-up.active { background: var(--positive-soft); color: var(--positive); border-color: var(--positive-soft); }
.feedback-btn.feedback-down.active { background: #fdecec; color: var(--negative); border-color: #fdecec; }

.feedback-reason {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-raised);
}

.feedback-saved {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--positive);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.3s ease;
  opacity: 1;
}

.feedback-saved.error { color: var(--negative); }
.feedback-saved.fade-out { opacity: 0; }

/* --- Outreach pipeline status (Projects only) ---
   Lives in the buyer-name row, not near the feedback thumbs below, and
   reads as a colored status tag (dot + label) rather than a form
   control — a plain <select> here previously got mistaken for another
   feedback input. */

.outreach-pill-wrap {
  position: relative;
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

.outreach-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  border: none;
  background: var(--surface-muted);
  color: var(--slate);
}

.outreach-pill:hover { filter: brightness(0.97); }

.outreach-caret { font-size: 0.6rem; opacity: 0.7; }

.outreach-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.outreach-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  z-index: 20;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.outreach-menu[hidden] { display: none; }

.outreach-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 7px 10px;
  border-radius: 8px;
  border: none;
  background: none;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.outreach-menu-item:hover { background: var(--surface-muted); }
.outreach-menu-item.active { font-weight: 600; }

.outreach-pill.outreach-contacted, .outreach-menu-item.outreach-contacted { background: var(--outreach-contacted-soft); color: var(--outreach-contacted); }
.outreach-pill.outreach-responded, .outreach-menu-item.outreach-responded { background: var(--outreach-responded-soft); color: var(--outreach-responded); }
.outreach-pill.outreach-in_talks, .outreach-menu-item.outreach-in_talks { background: var(--outreach-in-talks-soft); color: var(--outreach-in-talks); }
.outreach-pill.outreach-passed, .outreach-menu-item.outreach-passed { background: var(--outreach-passed-soft); color: var(--outreach-passed); }
.outreach-menu-item.outreach-none { color: var(--slate); }

.verification-note {
  margin-top: 10px;
}

.verification-note .ghost-btn {
  font-size: 0.72rem;
  padding: 6px 10px;
}

#verification-list {
  margin-top: 10px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.removed-item {
  font-size: 0.85rem;
  color: var(--slate);
  padding: 4px 0;
}

.removed-item strong { color: var(--ink); }

@media (max-width: 900px) {
  .philosophy { margin-top: 64px; padding-top: 40px; }
  .philosophy-row { grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px; }
  /* Always read copy before example on mobile, regardless of the
     desktop zigzag — order:2/1 would otherwise put the example first. */
  .philosophy-row-reverse .philosophy-copy,
  .philosophy-row-reverse .example-wrap { order: initial; }
  .example-wrap { padding-top: 0; }
  .example-caption { position: static; display: inline-flex; margin-bottom: 14px; }
  /* On narrow screens the sidebar overlays content instead of pushing it —
     simpler than reflowing margin-left at every viewport size, and matches
     how a slide-out panel is expected to behave on mobile. */
  main.workspace-shell { margin-left: 0; }
  .project-sidebar { width: 85%; max-width: 300px; box-shadow: 4px 0 24px rgba(10, 10, 10, 0.12); }
}

@media (max-width: 640px) {
  form { grid-template-columns: 1fr; }
  .buyer-row { grid-template-columns: 1fr; }
  .buyer-score { grid-column: 1; grid-row: auto; text-align: left; margin-top: 8px; }
  .signal-bars { justify-content: flex-start; }
  .card-grid { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; gap: 10px; align-items: flex-start; }
  .home-title-line { font-size: 1.9rem; }
  .philosophy-lead { font-size: 1.25rem; }
  .philosophy-body { font-size: 0.92rem; }
}