/* =============================================================
   SeedLift — Workflows, Results, Engagement, Tools
   Styles specific to the v2 rebuild. Layered on site.css.
   ============================================================= */

/* ======================= WORKFLOWS ======================= */
.workflows-section {
  padding: 112px 0;
}
.wf-wrap {
  display: flex;
  flex-direction: column;
  gap: 96px;
  margin-top: 72px;
}
.wf {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  scroll-margin-top: 80px;
}
.wf-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.wf-reverse .wf-copy { order: 2; }
.wf-reverse .wf-vis { order: 1; }

.wf-copy { position: sticky; top: 96px; }
.wf-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.wf-num::before {
  content: "";
  display: block;
  width: 28px; height: 1px;
  background: var(--accent);
}
.wf-copy h3 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--fg-1);
  margin: 0 0 18px;
}
.wf-copy h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-hover);
  font-variation-settings: 'opsz' 48;
}
.wf-copy .wf-lead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-3);
  margin: 0 0 24px;
  max-width: 400px;
}
.wf-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 24px;
  border-top: 1px solid var(--divider);
  margin-top: 8px;
}
.wf-stack span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 4px 9px;
  border-radius: var(--radius-xs);
}

.wf-vis {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.wf-vis-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.wf-vis-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,140,90,0.18);
  flex: none;
}
.wf-vis-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: -0.005em;
}
.wf-vis-chip {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hover);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  padding: 3px 9px;
  border-radius: var(--radius-full);
}

/* ---- Workflow 1: Signal → Scoring ---- */
.wf-signal {
  display: grid;
  grid-template-columns: 1fr 36px 1fr 36px 150px;
  gap: 20px;
  align-items: stretch;
}
.sig-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sig-col-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 4px;
}
.sig-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--fg-1);
  line-height: 1.35;
}
.sig-item b { font-weight: 600; }
.sig-ico {
  width: 22px; height: 22px;
  border-radius: var(--radius-xs);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-hover);
  display: flex; align-items: center; justify-content: center;
}
.sig-ico-blue { background: #EAF2FC; border-color: #C9DCF4; color: #2F5C9E; }
.sig-ico-amber { background: #FBF3DF; border-color: #EDDDA6; color: #8A6A10; }
.sig-ico-gray { background: var(--sl-ink-50); border-color: var(--border); color: var(--fg-3); }
.sig-pts {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-hover);
  letter-spacing: -0.005em;
}
.sig-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-4);
  position: relative;
}
.sig-arrow::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  border-top: 1px dashed var(--border-strong);
}
.sig-arrow svg { position: relative; z-index: 1; background: var(--bg-panel); padding: 0 4px; }

.sig-merge {
  background: var(--bg-elevated);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sig-merge-l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.sig-merge-v {
  font-size: 12px;
  color: var(--fg-1);
  line-height: 1.35;
}
.sig-merge-v b { font-weight: 600; }

.sig-score {
  background: var(--sl-ink-900);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.sig-score-v {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  color: var(--sl-green-300);
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sig-score-v sup {
  font-size: 0.45em;
  color: #9A9A93;
  font-weight: 400;
  margin-left: 2px;
  vertical-align: top;
  top: 0.5em;
  position: relative;
}
.sig-score-l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9A9A93;
}
.sig-score-bar {
  height: 3px;
  background: #2A2A26;
  border-radius: 2px;
  overflow: hidden;
}
.sig-score-bar > span {
  display: block;
  height: 100%;
  background: var(--sl-green-300);
  width: 92%;
}
.sig-score-tier {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sl-green-300);
  padding-top: 6px;
  border-top: 1px solid #2A2A26;
}

/* ---- Workflow 1 VERTICAL layout ---- */
.wf-signal.wf-signal-vertical {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}
.sig-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sig-row-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.sig-row-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.sig-row-items-3 {
  grid-template-columns: repeat(3, 1fr);
}
.wf-signal-vertical .sig-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px;
}
.wf-signal-vertical .sig-item span:not(.sig-pts) {
  font-size: 12px;
  line-height: 1.4;
}
.wf-signal-vertical .sig-pts {
  margin-top: auto;
}
.sig-arrow-down {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-4);
  position: relative;
  height: 40px;
}
.sig-arrow-down::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px dashed var(--border-strong);
}
.sig-arrow-down svg {
  position: relative;
  z-index: 1;
  background: var(--bg-panel);
  padding: 4px 0;
}
.sig-score.sig-score-wide {
  padding: 20px 24px;
  flex-direction: row;
  text-align: left;
}
.sig-score-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.sig-score-wide .sig-score-v {
  font-size: 52px;
  flex-shrink: 0;
}
.sig-score-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sig-score-wide .sig-score-bar {
  max-width: 200px;
}

/* ---- Workflow 2: Personalized outbound (email + variable callouts) ---- */
.wf-email-wrap { position: relative; }
.wf-email {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  max-width: 560px;
  margin: 0 auto;
}
.wf-email-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--divider);
}
.wf-email-chrome .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sl-ink-200); }
.wf-email-chrome .dot:nth-child(1) { background: #D9837A; }
.wf-email-chrome .dot:nth-child(2) { background: #D9B97A; }
.wf-email-chrome .dot:nth-child(3) { background: #8DB489; }
.wf-email-chrome .fr {
  margin-left: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.wf-email-subj {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--divider);
  align-items: center;
}
.wf-email-subj .k {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-4);
}
.wf-email-subj .v {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: -0.005em;
}
.wf-email-body {
  padding: 20px 22px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-2);
}
.wf-email-body p { margin: 0 0 10px; }
.wf-email-body p:last-child { margin: 0; }
.wf-email-sig { color: var(--fg-3); font-style: italic; }

/* Data source callouts connecting to variables */
.wf-callouts {
  position: relative;
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.wf-callout {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  position: relative;
}
.wf-callout::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 20px;
  border-left: 1px dashed var(--accent-border);
}
.wf-callout-var {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-hover);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.wf-callout-src {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 6px;
}
.wf-callout-v {
  font-size: 13px;
  color: var(--fg-1);
  font-weight: 500;
}

/* ---- Workflow 3: CRM Cleanup (duplicate merge) ---- */
.wf-crm {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  gap: 24px;
  align-items: center;
}
.crm-col-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.crm-col-label .count {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  color: var(--fg-3);
}
.crm-dup-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.crm-record {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 11.5px;
  position: relative;
  transition: all var(--dur-med);
}
.crm-record.conflict { border-color: #D9B97A; background: #FDF8E8; }
.crm-record-hdr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--divider);
}
.crm-record-hdr b {
  font-size: 13px;
  color: var(--fg-1);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.crm-record-hdr .src {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.crm-field {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 8px;
  padding: 2px 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
}
.crm-field .k { color: var(--fg-4); letter-spacing: 0.06em; text-transform: uppercase; }
.crm-field .v { color: var(--fg-2); letter-spacing: -0.005em; }
.crm-field.winner .v { color: var(--accent-hover); font-weight: 600; }
.crm-field.loser .v {
  color: var(--fg-4);
  text-decoration: line-through;
  text-decoration-color: var(--fg-4);
}
.crm-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}
.crm-arrow-line {
  width: 1px;
  flex: 1;
  background: var(--border-strong);
  position: relative;
}
.crm-arrow-line::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--accent);
}
.crm-arrow-pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hover);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  padding: 4px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.crm-merged {
  background: var(--bg-elevated);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: 0 0 0 4px rgba(91,140,90,0.08);
}
.crm-merged-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--divider);
}
.crm-merged-hdr b {
  font-size: 14px;
  color: var(--fg-1);
  font-weight: 600;
}
.crm-merged-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hover);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: auto;
}
.crm-merged .crm-field .v { color: var(--fg-1); }
.crm-merged .crm-field.new .v { color: var(--accent-hover); font-weight: 600; }

/* ---- Workflow 4: Inbound qualification ---- */
.wf-inbound {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
}
.inbound-form {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.inbound-form-hdr {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 10px;
}
.inbound-form-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}
.inbound-form-field .k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.inbound-form-field .v {
  font-size: 12px;
  color: var(--fg-1);
  font-weight: 500;
  background: var(--bg-panel);
  border: 1px solid var(--divider);
  padding: 5px 8px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
}
.inbound-pipeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inbound-step {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  position: relative;
}
.inbound-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 24px; top: 100%;
  width: 1px; height: 10px;
  background: var(--border-strong);
}
.inbound-step-n {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-hover);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
}
.inbound-step-body { min-width: 0; }
.inbound-step-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-1);
  line-height: 1.3;
}
.inbound-step-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  margin-top: 2px;
  letter-spacing: -0.005em;
}
.inbound-step-meta em { font-style: normal; color: var(--accent-hover); font-weight: 500; }
.inbound-step-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.inbound-step-final {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,140,90,0.08);
}
.inbound-step-final .inbound-step-n {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.inbound-step-final .inbound-step-tag { color: var(--accent-hover); }

/* ---- Workflow 5: TAM / Event scraping ---- */
.wf-tam {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.tam-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
}
.tam-card-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--divider);
}
.tam-card-src-ico {
  width: 24px; height: 24px;
  border-radius: var(--radius-xs);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-2);
}
.tam-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-1);
}
.tam-card-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-4);
  letter-spacing: 0.04em;
}
.tam-card-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hover);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}
.tam-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 6px 0;
  font-size: 11.5px;
  color: var(--fg-2);
  border-bottom: 1px dashed var(--divider);
  font-family: var(--font-mono);
  letter-spacing: -0.005em;
}
.tam-row:last-child { border-bottom: none; }
.tam-row .co { color: var(--fg-1); font-weight: 500; }
.tam-row .meta { color: var(--fg-4); }

.tam-summary {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--sl-ink-900);
  color: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tam-sum {
  padding: 16px 18px;
  border-right: 1px solid #2A2A26;
}
.tam-sum:last-child { border-right: none; }
.tam-sum .v {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--sl-green-300);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.tam-sum .l {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8A8A82;
}

/* ======================= CLIENT RESULTS (tabbed) ======================= */
.results-section {
  padding: 112px 0;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.results-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.results-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.results-tab {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 16px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  text-align: left;
  font-family: var(--font-sans);
}
.results-tab:hover { border-color: var(--border-strong); }
.results-tab .rt-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: -0.005em;
}
.results-tab .rt-metric {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.results-tab.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(91,140,90,0.08);
}
.results-tab.active .rt-metric { color: var(--accent-hover); }

.results-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 44px;
  min-height: 420px;
  position: relative;
}
.results-content { display: none; }
.results-content.active { display: block; }

.rc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--divider);
}
.rc-client {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rc-logo { height: 28px; max-width: 180px; object-fit: contain; object-position: left center; }
/* Stacked marks need more vertical space to read at wordmark scale */
.rc-logo[src*="irisbooth"] { height: 56px; max-width: 80px; }
.rc-logo-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  line-height: 1;
}
.rc-industry {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.rc-metric {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rc-metric-v {
  font-family: var(--font-display);
  font-size: 68px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--accent-hover);
  font-variant-numeric: tabular-nums;
}
.rc-metric-v .u { font-size: 0.5em; color: var(--accent); margin-left: 2px; }
.rc-metric-l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.rc-quote {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.4;
  color: var(--fg-1);
  font-weight: 400;
  font-variation-settings: 'opsz' 36;
  margin: 0 0 24px;
  max-width: 620px;
  letter-spacing: -0.005em;
}
.rc-quote .hl { color: var(--accent-hover); font-weight: 500; }

.rc-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--divider);
  padding-top: 24px;
}
.rc-detail {
  padding-right: 20px;
  border-right: 1px solid var(--divider);
}
.rc-detail:last-child { border-right: none; padding-right: 0; }
.rc-detail .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 8px;
}
.rc-detail .v {
  font-size: 13px;
  color: var(--fg-1);
  font-weight: 500;
  line-height: 1.4;
}
.rc-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.rc-tags span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-3);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
}
.rc-byline {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: -0.005em;
}
.rc-byline b {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-1);
  font-weight: 600;
  margin-right: 8px;
}

/* ======================= ENGAGEMENT MODEL ======================= */
.engagement-section {
  padding: 112px 0;
}
.eng-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: 64px;
}
.eng-phase {
  background: var(--bg-elevated);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.eng-phase-featured { background: var(--accent-soft); }
.eng-phase-optional { background: var(--bg-panel); }
.eng-month {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eng-phase-featured .eng-month { color: var(--accent-hover); }
.eng-phase h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0 0 4px;
}
.eng-subtitle {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-hover);
  margin-bottom: 20px;
  letter-spacing: -0.005em;
}
.eng-phase-optional .eng-subtitle { color: var(--fg-3); }
.eng-list {
  list-style: none;
  padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.eng-list li {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.45;
  padding-left: 16px;
  position: relative;
}
.eng-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
}
.eng-phase-optional .eng-list li::before { background: var(--fg-4); }
.eng-deliverable {
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}
.eng-phase-featured .eng-deliverable { border-top-color: rgba(91,140,90,0.25); }
.eng-deliverable .k {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-4);
  margin-bottom: 6px;
}
.eng-deliverable .v {
  font-size: 13.5px;
  color: var(--accent-hover);
  font-weight: 600;
}
.eng-phase-optional .eng-deliverable .v { color: var(--fg-2); }
.eng-foot {
  margin-top: 28px;
  text-align: center;
  font-size: 14px;
  color: var(--fg-3);
}

/* ======================= TOOLS STACK ======================= */
.tools-section {
  padding: 112px 0;
  background: var(--sl-ink-900);
  color: #F4F4EE;
  border-top: 1px solid #2A2A26;
  border-bottom: 1px solid #2A2A26;
}
.tools-section .sec-h2 { color: #F4F4EE; }
.tools-section .sec-h2 em { color: var(--sl-green-300); }
.tools-section .sl-eyebrow { color: #8A8A82; }
.tools-section .section-sub { color: #9A9A93; }
.tools-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 32px;
}
.tool {
  background: #1A1A16;
  border: 1px solid #2A2A26;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.tool:hover {
  border-color: var(--sl-green-400);
  background: #1F1F1B;
}
.tool-ico {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  letter-spacing: -0.01em;
  flex: none;
}
.tool-body { min-width: 0; }
.tool-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #F4F4EE;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 3px;
}
.tool-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A8A82;
}

/* Tool brand colors */
.tool-ico.clay       { background: #F97316; }
.tool-ico.hubspot    { background: #FF7A59; }
.tool-ico.salesforce { background: #00A1E0; }
.tool-ico.attio      { background: #6366F1; }
.tool-ico.instantly  { background: #5865F2; }
.tool-ico.smartlead  { background: #3B82F6; }
.tool-ico.heyreach   { background: #0A66C2; }
.tool-ico.leadmagic  { background: #7C3AED; }
.tool-ico.aiark      { background: #0E0E0C; border: 1px solid #2A2A26; color: #8DB489; }
.tool-ico.deepline   { background: #0EA5E9; }
.tool-ico.default    { background: #111827; border: 1px solid #374151; }
.tool-ico.lovable    { background: #EC4899; }
.tool-ico.claude     { background: #D97757; }
.tool-ico.n8n        { background: #EA4560; }
.tool-ico.zapier     { background: #FF4A00; }
.tool-ico.make       { background: #6D00CC; }
.tool-ico.slack      { background: #4A154B; }
.tool-ico.gong       { background: #8B5CF6; }
.tool-ico.more       { background: transparent; border: 1px dashed #8A8A82; color: #9A9A93; }
.tool-ico.claudecode { background: #0E0E0C; border: 1px solid #2A2A26; color: #D97757; }

/* Tool logo wrapper (light rounded background) */
.tool-ico-wrap {
  width: 44px;
  height: 44px;
  background: #F0F0EA;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tool-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* "And more" card */
.tools-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.tools-more-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border: 1px dashed #4A4A42;
  border-radius: var(--radius-md);
  background: transparent;
}
.tools-more-ico {
  width: 40px;
  height: 40px;
  border: 1px dashed #5A5A52;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #8A8A82;
}
.tools-more-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: #F4F4EE;
  margin-bottom: 2px;
}
.tools-more-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8A8A82;
}

/* ======================= v2.1 — CENTERED HERO ======================= */
.hero-centered { padding: 120px 0 96px; }
.hero-centered-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.hero-centered-inner .eyebrow { margin-bottom: 24px; }
.hero-centered-inner h1 { margin: 0 0 24px; }
.hero-centered-inner .sub { max-width: 640px; margin: 0 0 36px; font-size: 19px; line-height: 1.5; }
.hero-centered-inner .cta-row { justify-content: center; }

/* ======================= v2.2 — HORIZONTAL WORKFLOW RAIL ======================= */
.wf-section-rail {
  padding: 96px 0 104px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.wf-section-rail .section-hd { margin-bottom: 44px; }

/* Who We Serve - white background */
.who-section {
  background: var(--bg-elevated);
  border-top: none;
  border-bottom: none;
}

.wf-rail {
  margin-top: 8px;
}

/* --- Progress rail (top) --- */
.wf-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 32px;
}
.wf-progress-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.wf-step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  min-height: 90px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  padding: 0 8px 10px;
  cursor: pointer;
  position: relative;
  opacity: 0.45;
  transition: opacity 260ms ease;
  text-align: center;
  align-items: center;
}
.wf-step:hover {
  opacity: 1;
  background: rgba(90, 124, 90, 0.08);
}
.wf-step.active {
  opacity: 1;
  background: rgba(90, 124, 90, 0.12);
  border-color: var(--sl-green-400);
}
.wf-step-n {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--fg-4);
}
.wf-step.active .wf-step-n {
  color: var(--accent);
  font-size: 15px;
}
.wf-step-t {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--fg-2);
  font-weight: 500;
  line-height: 1.2;
}
.wf-step.active .wf-step-t { color: var(--fg-1); }
.wf-step-bar {
  position: absolute;
  left: 0; right: 0; bottom: -29px;
  height: 1px;
  background: transparent;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms ease, background 240ms ease;
}
.wf-step.active .wf-step-bar {
  background: var(--accent);
  height: 2px;
  bottom: -29px;
  transform: scaleX(1);
}
.wf-progress-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding-bottom: 4px;
  white-space: nowrap;
}
.wf-progress-idx {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--fg-3);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.wf-progress-cur { color: var(--fg-1); font-weight: 600; }
.wf-progress-divider { color: var(--fg-4); margin: 0 2px; }
.wf-progress-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.wf-progress-hint-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border: 1px solid var(--divider);
  border-radius: 4px;
  font-size: 11px;
  color: var(--fg-3);
}

/* --- Scroller --- */
.wf-scroller {
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--divider) transparent;
  padding: 0 0 40px;
  margin: 0 calc(-1 * var(--site-gutter, 32px));
  padding-left: var(--site-gutter, 32px);
  padding-right: var(--site-gutter, 32px);
}
.wf-scroller:focus-visible { outline: none; }
.wf-scroller { cursor: grab; }
.wf-scroller.dragging { cursor: grabbing; user-select: none; }
.wf-scroller::-webkit-scrollbar { height: 8px; }
.wf-scroller::-webkit-scrollbar-track { background: transparent; }
.wf-scroller::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 4px; }

.wf-scroller .wf-wrap {
  display: flex;
  flex-direction: row;
  gap: 32px;
  margin-top: 0;
  padding: 8px 0;
}

/* Each workflow card */
.wf-scroller .wf {
  flex: 0 0 min(1060px, 88vw);
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  padding: 36px 40px 40px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  opacity: 0.38;
  filter: saturate(0.6);
  transition: opacity 360ms ease, filter 360ms ease, transform 360ms ease;
  transform: scale(0.985);
  transform-origin: center;
  min-height: 520px;
}
.wf-scroller .wf.is-active {
  opacity: 1;
  filter: none;
  transform: scale(1);
  box-shadow: 0 20px 60px -30px rgba(0,0,0,0.12);
}

/* Reset v1 sticky/grid overrides inside rail */
.wf-scroller .wf-copy {
  position: static;
  top: auto;
}
.wf-scroller .wf-copy h3 {
  font-size: 32px;
  line-height: 1.08;
  margin-bottom: 14px;
}
.wf-scroller .wf-copy .wf-lead {
  font-size: 15px;
  max-width: 340px;
  margin-bottom: 0;
}
.wf-scroller .wf-num { font-size: 11px; margin-bottom: 14px; }

/* Inner visual scale inside card */
.wf-scroller .wf-vis { transform-origin: top left; }
.wf-scroller .sig-card,
.wf-scroller .email-mock,
.wf-scroller .crm-card,
.wf-scroller .inb-card,
.wf-scroller .tam-card,
.wf-scroller .tam-summary { font-size: 13px; }
.wf-scroller .sig-score { font-size: 36px; }
.wf-scroller .email-body { font-size: 13px; line-height: 1.55; }
.wf-scroller .tam-sum .v { font-size: 22px; }

/* Edge fade — hint at more cards off-screen */
.wf-rail { position: relative; }
.wf-rail::before, .wf-rail::after {
  content: "";
  position: absolute;
  top: 90px; bottom: 48px;
  width: 40px;
  pointer-events: none;
  z-index: 2;
}
.wf-rail::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-app) 0%, rgba(250,249,243,0) 100%);
}
.wf-rail::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-app) 0%, rgba(250,249,243,0) 100%);
}

@media (max-width: 1060px) {
  .wf-scroller .wf {
    flex-basis: min(920px, 92vw);
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px;
    min-height: auto;
  }
  .wf-progress-hint { display: none; }
}
@media (max-width: 720px) {
  .wf-progress { grid-template-columns: 1fr; gap: 16px; }
  .wf-progress-steps { grid-template-columns: repeat(5, minmax(60px, 1fr)); overflow-x: auto; }
  .wf-step-t { font-size: 12px; }
  .wf-progress-meta { align-items: flex-start; }
}

/* ======================= v2.1 — ENGAGEMENT TIMELINE ======================= */
.engagement-timeline { padding: 104px 0 72px; }
.eng-timeline {
  list-style: none;
  padding: 0;
  margin: 64px 0 32px;
  max-width: 900px;
}
.et-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 28px;
  padding-bottom: 48px;
  position: relative;
}
.et-step-last { padding-bottom: 0; }
.et-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
}
.et-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg-1);
  position: relative;
  z-index: 2;
}
.et-dot-open {
  background: var(--bg-1);
  border: 2px solid var(--accent);
}
.et-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(to bottom, var(--accent) 0%, var(--divider) 60%);
  margin-top: 6px;
  min-height: 80px;
}
.et-body { padding-top: 2px; }
.et-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.et-month {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.et-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--accent-tint, #E8EEE4);
  color: var(--accent-hover);
}
.et-pill-build { background: var(--accent); color: #fff; }
.et-pill-handoff { background: var(--bg-2); color: var(--fg-2); border: 1px dashed var(--divider); }

/* Progressive dot + pill coloring (light to dark) */
.et-step:nth-child(1) .et-dot {
  background: var(--bg-1);
  border: 2px solid var(--sl-green-300);
}
.et-step:nth-child(1) .et-pill {
  background: var(--sl-green-100);
  color: var(--sl-green-500);
}
.et-step:nth-child(2) .et-dot {
  background: var(--sl-green-200);
}
.et-step:nth-child(2) .et-pill {
  background: var(--sl-green-200);
  color: var(--sl-green-600);
}
.et-step:nth-child(3) .et-dot {
  background: var(--sl-green-300);
}
.et-step:nth-child(3) .et-pill {
  background: var(--sl-green-400);
  color: #fff;
}
.et-step:nth-child(4) .et-dot {
  background: var(--sl-green-500);
}
.et-step:nth-child(4) .et-pill {
  background: var(--sl-green-500);
  color: #fff;
}
.et-body h3 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--fg-1);
  margin: 0 0 10px;
}
.et-body p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 0 16px;
  max-width: 640px;
}
.et-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.et-list span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--divider);
  border-radius: 4px;
  color: var(--fg-3);
  background: var(--bg-2);
}

@media (max-width: 760px) {
  .et-step { grid-template-columns: 24px 1fr; gap: 18px; }
  .et-body h3 { font-size: 22px; }
}

/* ======================= OVERRIDE v1 BITS ======================= */
/* Suppress old hero meta strip */
body.v2 .hero-meta { display: none; }

/* ======================= RESPONSIVE ======================= */
@media (max-width: 1060px) {
  .wf { grid-template-columns: 1fr; gap: 32px; }
  .wf-reverse .wf-copy { order: 1; }
  .wf-reverse .wf-vis { order: 2; }
  .wf-copy { position: static; }
  .wf-signal { grid-template-columns: 1fr; gap: 16px; }
  .wf-signal .sig-arrow { display: none; }
  .wf-crm { grid-template-columns: 1fr; }
  .wf-crm .crm-arrow { flex-direction: row; padding: 8px 0; }
  .wf-crm .crm-arrow-line { width: 100%; height: 1px; }
  .wf-inbound { grid-template-columns: 1fr; }
  .wf-tam { grid-template-columns: 1fr; }
  .tam-summary { grid-template-columns: repeat(2, 1fr); }
  .results-grid { grid-template-columns: 1fr; }
  .eng-grid { grid-template-columns: repeat(2, 1fr); }
  .tools-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .wf-copy h3 { font-size: 32px; }
  .results-panel { padding: 28px; }
  .rc-top { flex-direction: column; }
  .rc-metric { text-align: left; }
  .rc-metric-v { font-size: 56px; }
  .rc-details { grid-template-columns: 1fr; gap: 16px; }
  .rc-detail { border-right: none; padding-right: 0; padding-bottom: 16px; border-bottom: 1px solid var(--divider); }
  .rc-detail:last-child { border-bottom: none; padding-bottom: 0; }
  .eng-grid { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .wf-callouts { grid-template-columns: 1fr; }
  .wf-callout::before { display: none; }
}


/* =========================== RESULTS V3 (selector + dark card) =========================== */
.results-v3 { padding: 120px 0; }
.rv3-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 32px;
  align-items: start;
}
.rv3-tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rv3-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all var(--dur-fast);
  font-family: inherit;
}
.rv3-tab:hover { border-color: var(--border-strong); }
.rv3-tab.active {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
  background: var(--bg-elevated);
}
.rv3-tab-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.rv3-tab-metric {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast);
}
.rv3-tab.active .rv3-tab-metric {
  color: var(--accent);
  font-weight: 500;
}

/* Right: dark content card */
.rv3-card {
  background: var(--sl-ink-900);
  color: var(--sl-ink-0);
  border-radius: 16px;
  padding: 56px 56px 48px;
  min-height: 520px;
  position: relative;
  overflow: hidden;
  display: grid;
  /* Fixed rows ensure all 5 panels render at the same height regardless of content */
  align-content: start;
}
/* Keep all panels in the same grid cell so card height is locked to the tallest one */
.rv3-card > .rv3-panel { grid-column: 1; grid-row: 1; }
.rv3-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 600px 300px at 85% 10%, rgba(91,140,90,0.14), transparent 60%);
  pointer-events: none;
}
/* All panels are stacked in the same cell; we fade the inactive ones out.
   visibility:hidden keeps them reserving space (so the card sizes to the tallest),
   but prevents them from being clickable/focused. */
.rv3-panel {
  position: relative;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast);
}
.rv3-panel.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: rv3-fade 0.32s ease-out;
}
@keyframes rv3-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.rv3-metric-wrap { margin-bottom: 32px; }
.rv3-metric-v {
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--sl-green-300);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.rv3-metric-v .u {
  font-size: 0.55em;
  color: var(--sl-green-400);
  margin-left: 4px;
  letter-spacing: -0.02em;
}
.rv3-metric-l {
  font-family: var(--font-display);
  font-size: 18px;
  color: #C4CABE;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.rv3-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}
.rv3-tags span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  background: rgba(141,180,137,0.1);
  border: 1px solid rgba(141,180,137,0.22);
  color: var(--sl-green-300);
  border-radius: 100px;
}

.rv3-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.42;
  color: var(--sl-ink-0);
  font-weight: 400;
  margin: 0 0 36px;
  max-width: 620px;
  letter-spacing: -0.005em;
}

.rv3-attr {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.rv3-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sl-green-600);
  color: var(--sl-ink-0);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.rv3-attr-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--sl-ink-0);
  letter-spacing: -0.005em;
}
.rv3-attr-role {
  font-size: 13px;
  color: #8C938A;
  margin-top: 1px;
}

/* Aggregate stats bar */
.rv3-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.rv3-stat {
  padding: 0 32px;
  border-right: 1px solid var(--divider);
}
.rv3-stat:last-child { border-right: none; }
.rv3-stat-v {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--fg-1);
  font-weight: 600;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.rv3-stat-v .u {
  font-size: 0.55em;
  color: var(--accent);
  margin-left: 2px;
  font-weight: 500;
}
.rv3-stat-l {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* "See all case studies" link */
.results-footlink {
  margin-top: 40px;
  text-align: center;
}
.results-allcta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  padding: 10px 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast);
}
.results-allcta:hover { border-bottom-color: var(--accent); color: var(--accent-hover); }
.results-allcta .arr { font-family: var(--font-mono); font-weight: 400; }

@media (max-width: 900px) {
  .rv3-grid { grid-template-columns: 1fr; gap: 20px; }
  .rv3-tabs { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .rv3-tab { flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px; }
  .rv3-card { padding: 36px 28px 32px; min-height: auto; }
  .rv3-metric-v { font-size: 64px; }
  .rv3-stats { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .rv3-stat { padding: 20px; border-right: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
  .rv3-stat:nth-child(2n) { border-right: none; }
  .rv3-stat:nth-last-child(-n+2) { border-bottom: none; }
}

/* ======================= SCROLL-TRIGGERED ANIMATIONS ======================= */
/* Elements start hidden, become visible when .is-visible is added via JS */

/* Engagement Timeline */
.engagement-timeline .section-hd,
.engagement-timeline .et-step,
.engagement-timeline .eng-foot {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.engagement-timeline .et-dot {
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.engagement-timeline .et-line {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When visible - staggered reveals */
.engagement-timeline.is-visible .section-hd {
  opacity: 1;
  transform: translateY(0);
}

.engagement-timeline.is-visible .et-step:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.engagement-timeline.is-visible .et-step:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.engagement-timeline.is-visible .et-step:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.engagement-timeline.is-visible .et-step:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }

.engagement-timeline.is-visible .et-step:nth-child(1) .et-dot { transform: scale(1); transition-delay: 0.2s; }
.engagement-timeline.is-visible .et-step:nth-child(2) .et-dot { transform: scale(1); transition-delay: 0.35s; }
.engagement-timeline.is-visible .et-step:nth-child(3) .et-dot { transform: scale(1); transition-delay: 0.5s; }
.engagement-timeline.is-visible .et-step:nth-child(4) .et-dot { transform: scale(1); transition-delay: 0.65s; }

.engagement-timeline.is-visible .et-step:nth-child(1) .et-line { transform: scaleY(1); transition-delay: 0.25s; }
.engagement-timeline.is-visible .et-step:nth-child(2) .et-line { transform: scaleY(1); transition-delay: 0.4s; }
.engagement-timeline.is-visible .et-step:nth-child(3) .et-line { transform: scaleY(1); transition-delay: 0.55s; }

.engagement-timeline.is-visible .eng-foot {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

/* Workflows Section */
.wf-section-rail .section-hd {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.wf-section-rail .wf-progress {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.wf-section-rail.is-visible .section-hd,
.wf-section-rail.is-visible .wf-progress {
  opacity: 1;
  transform: translateY(0);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .engagement-timeline .section-hd,
  .engagement-timeline .et-step,
  .engagement-timeline .et-dot,
  .engagement-timeline .et-line,
  .engagement-timeline .eng-foot,
  .wf-section-rail .section-hd,
  .wf-section-rail .wf-progress {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ======================= WORKFLOW COMPONENT ANIMATIONS ======================= */

/* Shared animation card styles */
.wf-anim-card {
  background: #fff;
  border: 1px solid #e5e3dc;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* ===== SCORING ANIMATION ===== */
.scoring-anim .signals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.scoring-anim .signal-card {
  padding: 10px;
  border: 1px solid #e5e3dc;
  border-radius: 8px;
  background: #fff;
  opacity: 0;
  transform: scale(0.9) translateY(8px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scoring-anim .signal-card.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.scoring-anim .signal-card.pulse {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(74, 93, 74, 0.15);
}
.scoring-anim .signal-icon {
  font-size: 16px;
  margin-bottom: 6px;
}
.scoring-anim .signal-text {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 4px;
}
.scoring-anim .signal-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #4a5d4a;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.3s;
}
.scoring-anim .signal-card.scored .signal-score { opacity: 1; }

.scoring-anim .flow-arrow {
  text-align: center;
  padding: 8px 0;
  opacity: 0;
  transition: opacity 0.3s;
  color: #ccc;
}
.scoring-anim .flow-arrow.visible { opacity: 1; }

.scoring-anim .enrich-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.5s ease;
}
.scoring-anim .enrich-grid.visible {
  opacity: 1;
  transform: translateY(0);
}
.scoring-anim .enrich-item {
  padding: 12px;
  border: 1px solid #e5e3dc;
  border-radius: 8px;
  font-size: 12px;
}
.scoring-anim .enrich-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #9ca38c;
  margin-bottom: 5px;
}
.scoring-anim .enrich-value {
  font-weight: 700;
  font-size: 13px;
}
.scoring-anim .enrich-value strong { color: var(--green); }

.scoring-anim .score-result {
  background: #1a1a1a;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.6s ease;
}
.scoring-anim .score-result.visible {
  opacity: 1;
  transform: translateY(0);
}
.scoring-anim .score-number {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.scoring-anim .score-number span { font-size: 16px; color: #666; }
.scoring-anim .score-details { flex: 1; }
.scoring-anim .score-bar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: #999;
  margin-bottom: 6px;
}
.scoring-anim .score-bar {
  height: 6px;
  background: #333;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.scoring-anim .score-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6b8c6b, #8cb88c);
  border-radius: 3px;
  width: 0%;
  transition: width 1.2s ease;
}
.scoring-anim .score-tier {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #8cb88c;
  opacity: 0;
  transition: opacity 0.3s;
}
.scoring-anim .score-tier.visible { opacity: 1; }

/* ===== EMAIL PERSONALIZATION ANIMATION ===== */
.email-anim .email-preview {
  background: #fff;
  border: 1px solid #e5e3dc;
  border-radius: 10px;
  overflow: hidden;
}
.email-anim .email-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: #fafaf8;
  border-bottom: 1px solid #e5e3dc;
}
.email-anim .chrome-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.email-anim .chrome-dot.red { background: #ff6b6b; }
.email-anim .chrome-dot.yellow { background: #ffd93d; }
.email-anim .chrome-dot.green { background: #6bcb77; }
.email-anim .chrome-email {
  margin-left: 8px;
  font-size: 11px;
  color: #888;
}
.email-anim .email-body { padding: 16px; }
.email-anim .email-subject {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e3dc;
}
.email-anim .email-subject .label { width: 50px; font-size: 10px; }
.email-anim .email-subject-text { font-size: 13px; font-weight: 500; }
.email-anim .email-line {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s ease;
}
.email-anim .email-line.visible {
  opacity: 1;
  transform: translateY(0);
}
.email-anim .email-line.signature {
  font-style: italic;
  color: #666;
  margin-top: 16px;
}
.email-anim .var {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 1px 6px;
  background: #e8ede8;
  color: var(--green);
  border-radius: 3px;
  border: 1px solid #d0dbd0;
  transition: all 0.3s ease;
}
.email-anim .var.replaced {
  background: #4a5d4a;
  color: #fff;
  border-color: #4a5d4a;
}
.email-anim .var.flash {
  animation: varFlash 0.4s ease;
}
@keyframes varFlash {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); background: #3d4d3d; }
}
.email-anim .sources-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #e5e3dc;
}
.email-anim .source-card {
  flex: 1;
  padding: 10px;
  border: 1px solid #e5e3dc;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.5s ease;
}
.email-anim .source-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.email-anim .source-var {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--green);
  font-weight: 600;
}
.email-anim .source-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  margin: 3px 0;
}
.email-anim .source-value { font-size: 12px; font-weight: 600; }

/* ===== DEDUPE ANIMATION ===== */
.dedupe-anim {
  display: flex;
  align-items: center;
  gap: 20px;
}
.dedupe-anim .duplicates-stack {
  position: relative;
  width: 180px;
  height: 220px;
}
.dedupe-anim .dupe-card {
  position: absolute;
  width: 160px;
  background: #fff;
  border: 1px solid #e5e3dc;
  border-radius: 10px;
  padding: 12px;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.dedupe-anim .dupe-card:nth-child(1) { top: 0; left: 0; z-index: 3; }
.dedupe-anim .dupe-card:nth-child(2) { top: 75px; left: 8px; z-index: 2; }
.dedupe-anim .dupe-card:nth-child(3) { top: 150px; left: 0; z-index: 1; }
.dedupe-anim .dupe-card.merging:nth-child(1) { transform: translateX(40px) translateY(50px) scale(0.85); opacity: 0.5; }
.dedupe-anim .dupe-card.merging:nth-child(2) { transform: translateX(35px) scale(0.85); opacity: 0.5; }
.dedupe-anim .dupe-card.merging:nth-child(3) { transform: translateX(40px) translateY(-50px) scale(0.85); opacity: 0.5; }
.dedupe-anim .dupe-card.merged { opacity: 0; transform: translateX(60px) scale(0.5); }
.dedupe-anim .dupe-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.dedupe-anim .dupe-source {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  margin-bottom: 8px;
}
.dedupe-anim .dupe-row { display: flex; gap: 8px; margin-bottom: 4px; font-size: 11px; }
.dedupe-anim .dupe-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  width: 40px;
}
.dedupe-anim .dupe-value.stale { color: #bbb; text-decoration: line-through; }
.dedupe-anim .dupe-value.fresh { color: var(--green); font-weight: 600; }

.dedupe-anim .merge-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.5s ease;
}
.dedupe-anim .merge-arrow.visible { opacity: 1; transform: scale(1); }
.dedupe-anim .merge-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 5px 10px;
  background: var(--green);
  color: #fff;
  border-radius: 5px;
}
.dedupe-anim .merge-arrow svg { width: 20px; height: 20px; color: var(--green); }

.dedupe-anim .resolved-section {
  opacity: 0;
  transform: translateX(15px);
  transition: all 0.6s ease;
}
.dedupe-anim .resolved-section.visible { opacity: 1; transform: translateX(0); }
.dedupe-anim .resolved-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 10px;
}
.dedupe-anim .golden-card {
  width: 180px;
  background: #fff;
  border: 2px solid var(--green);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(74, 93, 74, 0.12);
}
.dedupe-anim .golden-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 600;
  padding: 3px 6px;
  background: #e8ede8;
  color: var(--green);
  border-radius: 3px;
  margin-left: 8px;
}
.dedupe-anim .golden-name { font-size: 16px; font-weight: 700; line-height: 1.2; }
.dedupe-anim .golden-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.4s ease;
}
.dedupe-anim .golden-row.visible { opacity: 1; transform: translateY(0); }

/* ===== INBOUND QUALIFICATION ANIMATION ===== */
.inbound-anim .inbound-flow {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.inbound-anim .inbound-stage { flex: 1; display: flex; flex-direction: column; align-items: center; }
.inbound-anim .stage-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  margin-bottom: 8px;
  text-align: center;
}
.inbound-anim .lead-card {
  width: 100%;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e3dc;
  border-radius: 10px;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.5s ease;
}
.inbound-anim .lead-card.visible { opacity: 1; transform: translateX(0); }
.inbound-anim .lead-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #e8ede8, #d0dbd0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 8px;
}
.inbound-anim .lead-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.inbound-anim .lead-company { font-size: 11px; color: #666; margin-bottom: 8px; }
.inbound-anim .lead-source {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  padding: 3px 6px;
  background: #f5f5f2;
  border-radius: 3px;
  color: #666;
}
.inbound-anim .enrich-layer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #e5e3dc;
  border-radius: 6px;
  font-size: 10px;
  margin-bottom: 6px;
  opacity: 0;
  transform: translateX(12px);
  transition: all 0.4s ease;
}
.inbound-anim .enrich-layer.visible { opacity: 1; transform: translateX(0); }
.inbound-anim .enrich-layer.added { border-color: var(--green); background: #f5faf5; }
.inbound-anim .enrich-check {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e5e3dc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  transition: all 0.3s;
}
.inbound-anim .enrich-layer.added .enrich-check { background: #4a5d4a; color: #fff; }
.inbound-anim .qual-result {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  text-align: center;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.inbound-anim .qual-result.visible { opacity: 1; transform: scale(1); }
.inbound-anim .qual-result.hot { background: linear-gradient(135deg, #4a5d4a, #3d4d3d); color: #fff; }
.inbound-anim .qual-icon { font-size: 24px; margin-bottom: 6px; }
.inbound-anim .qual-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
}
.inbound-anim .qual-action { font-size: 10px; margin-top: 6px; opacity: 0.85; }
.inbound-anim .flow-connector {
  display: flex;
  align-items: center;
  padding: 0 4px;
  opacity: 0;
  transition: opacity 0.3s;
}
.inbound-anim .flow-connector.visible { opacity: 1; }
.inbound-anim .flow-connector svg { width: 18px; height: 18px; color: #ccc; }

/* ===== TAM DISCOVERY ANIMATION ===== */
.tam-anim .tam-stages {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.tam-anim .tam-stage {
  flex: 1;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e3dc;
  border-radius: 10px;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.5s ease;
}
.tam-anim .tam-stage.visible { opacity: 1; transform: translateY(0); }
.tam-anim .tam-stage.active { border-color: var(--green); box-shadow: 0 0 0 2px rgba(74, 93, 74, 0.1); }
.tam-anim .tam-stage-icon { font-size: 20px; margin-bottom: 6px; }
.tam-anim .tam-stage-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--muted);
  margin-bottom: 3px;
}
.tam-anim .tam-stage-count { font-size: 18px; font-weight: 700; }
.tam-anim .tam-stage-count.counting { color: var(--green); }

.tam-anim .tam-funnel {
  padding: 14px;
  background: #fff;
  border: 1px solid #e5e3dc;
  border-radius: 10px;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
}
.tam-anim .tam-funnel.visible {
  opacity: 1;
  transform: translateY(0);
}
.tam-anim .tam-funnel .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: #9ca38c;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}
.tam-anim .funnel-row {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: #fafaf8;
  border-radius: 6px;
  opacity: 0;
  transform: translateX(-12px);
  transition: all 0.4s ease;
}
.tam-anim .funnel-row.visible { opacity: 1; transform: translateX(0); }
.tam-anim .funnel-row.passed { background: #f5faf5; border: 1px solid #d0dbd0; }
.tam-anim .filter-icon {
  width: 24px;
  height: 24px;
  background: #e5e3dc;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 12px;
}
.tam-anim .funnel-row.passed .filter-icon { background: #4a5d4a; color: #fff; }
.tam-anim .filter-text { flex: 1; font-size: 11px; }
.tam-anim .filter-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
}

.tam-anim .tam-result {
  background: #1a1a1a;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.6s ease;
}
.tam-anim .tam-result.visible { opacity: 1; transform: translateY(0); }
.tam-anim .tam-result-number { font-size: 32px; font-weight: 700; color: #fff; }
.tam-anim .tam-result-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: #aaa;
}
.tam-anim .tam-result-desc { font-size: 11px; color: #ddd; margin-top: 3px; }
.tam-anim .tam-export {
  padding: 10px 14px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s;
}
.tam-anim .tam-export.visible { opacity: 1; }

/* ======================= NAV SIZE OVERRIDES ======================= */
body.v2 nav {
  border-bottom: 1px solid var(--border);
}
body.v2 .nav-inner { height: 80px; }
body.v2 .nav-logo img { height: 36px; }
body.v2 .nav-links a { font-size: 16px; font-weight: 500; }
body.v2 .nav-cta .btn.primary {
  font-size: 15px;
  padding: 12px 24px;
}

/* ======================= SCROLL-TRIGGERED ANIMATIONS ======================= */

/* Generic fade-up animation for sections */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

/* Hero animation */
.hero-centered-inner .eyebrow,
.hero-centered-inner h1,
.hero-centered-inner .sub,
.hero-centered-inner .cta-row {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.7s ease forwards;
}
.hero-centered-inner .eyebrow { animation-delay: 0.1s; }
.hero-centered-inner h1 { animation-delay: 0.2s; }
.hero-centered-inner .sub { animation-delay: 0.35s; }
.hero-centered-inner .cta-row { animation-delay: 0.5s; }

@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Logo marquee fade in */
.marquee-section {
  opacity: 0;
  animation: fadeIn 0.8s ease 0.6s forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

/* Who We Serve cards */
.who-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.who-section.is-visible .who-card:nth-child(1) { 
  opacity: 1; transform: translateY(0); transition-delay: 0.1s; 
}
.who-section.is-visible .who-card:nth-child(2) { 
  opacity: 1; transform: translateY(0); transition-delay: 0.25s; 
}

/* Section headers animation */
.section-hd {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.section-hd.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ======================= CLIENT RESULTS ANIMATIONS ======================= */

/* Stats bar at bottom */
.results-stats {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.results-stats.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Individual stat counters */
.results-stats .stat-value {
  display: inline-block;
}

/* Client list stagger */
.results-clients .client-row {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.results-clients.is-visible .client-row:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0s; }
.results-clients.is-visible .client-row:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.08s; }
.results-clients.is-visible .client-row:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.16s; }
.results-clients.is-visible .client-row:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.24s; }
.results-clients.is-visible .client-row:nth-child(5) { opacity: 1; transform: translateX(0); transition-delay: 0.32s; }

/* Featured case card */
.results-featured {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.results-featured.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Featured metric */
.results-featured .feat-metric {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}
.results-featured.is-visible .feat-metric {
  opacity: 1;
  transform: translateY(0);
}

/* Featured tags */
.results-featured .feat-tags span {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.results-featured.is-visible .feat-tags span:nth-child(1) { opacity: 1; transform: scale(1); transition-delay: 0.4s; }
.results-featured.is-visible .feat-tags span:nth-child(2) { opacity: 1; transform: scale(1); transition-delay: 0.5s; }
.results-featured.is-visible .feat-tags span:nth-child(3) { opacity: 1; transform: scale(1); transition-delay: 0.6s; }
.results-featured.is-visible .feat-tags span:nth-child(4) { opacity: 1; transform: scale(1); transition-delay: 0.7s; }

/* Featured quote */
.results-featured .feat-quote {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
}
.results-featured.is-visible .feat-quote {
  opacity: 1;
  transform: translateY(0);
}

/* Featured attribution */
.results-featured .feat-attr {
  opacity: 0;
  transition: opacity 0.5s ease 0.7s;
}
.results-featured.is-visible .feat-attr {
  opacity: 1;
}

/* ======================= CLAUDE CODE SECTION ANIMATIONS ======================= */
.cc-section .cc-bullets li {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cc-section.is-visible .cc-bullets li:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.15s; }
.cc-section.is-visible .cc-bullets li:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.3s; }
.cc-section.is-visible .cc-bullets li:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.45s; }

/* ======================= CONTACT SECTION ANIMATION ======================= */
.contact-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.contact-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ======================= CLIENT RESULTS V3 ANIMATIONS (correct selectors) ======================= */

/* Tabs/client list stagger */
.rv3-tabs .rv3-tab {
  opacity: 0;
  transform: translateX(-15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.rv3-tabs.is-visible .rv3-tab:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0s; }
.rv3-tabs.is-visible .rv3-tab:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.06s; }
.rv3-tabs.is-visible .rv3-tab:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.12s; }
.rv3-tabs.is-visible .rv3-tab:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.18s; }
.rv3-tabs.is-visible .rv3-tab:nth-child(5) { opacity: 1; transform: translateX(0); transition-delay: 0.24s; }

/* Featured card */
.rv3-card {
  opacity: 0;
  transform: scale(0.98) translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.rv3-card.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Metric in card */
.rv3-card .rv3-metric-wrap {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}
.rv3-card.is-visible .rv3-metric-wrap {
  opacity: 1;
  transform: translateY(0);
}

/* Tags stagger */
.rv3-card .rv3-tags span {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.rv3-card.is-visible .rv3-tags span:nth-child(1) { opacity: 1; transform: scale(1); transition-delay: 0.3s; }
.rv3-card.is-visible .rv3-tags span:nth-child(2) { opacity: 1; transform: scale(1); transition-delay: 0.38s; }
.rv3-card.is-visible .rv3-tags span:nth-child(3) { opacity: 1; transform: scale(1); transition-delay: 0.46s; }
.rv3-card.is-visible .rv3-tags span:nth-child(4) { opacity: 1; transform: scale(1); transition-delay: 0.54s; }

/* Quote fade in */
.rv3-card .rv3-quote {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s;
}
.rv3-card.is-visible .rv3-quote {
  opacity: 1;
  transform: translateY(0);
}

/* Attribution */
.rv3-card .rv3-attr {
  opacity: 0;
  transition: opacity 0.4s ease 0.65s;
}
.rv3-card.is-visible .rv3-attr {
  opacity: 1;
}

/* Stats bar */
.rv3-stats {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.rv3-stats.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Individual stats stagger */
.rv3-stats .rv3-stat {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.rv3-stats.is-visible .rv3-stat:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.rv3-stats.is-visible .rv3-stat:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.rv3-stats.is-visible .rv3-stat:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.rv3-stats.is-visible .rv3-stat:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }

/* ======================= ADDITIONAL FIXES ======================= */

/* Claude Code pull quote - bolder */
.cc-pull strong {
  font-weight: 600;
  font-size: 20px;
  color: #F4F4EE;
}

/* See all case studies button */
.results-footlink {
  text-align: center;
  margin-top: 48px;
}
.results-allcta.btn.secondary {
  background: #fff;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  padding: 18px 40px;
  border-radius: var(--radius-full);
  position: relative;
  overflow: hidden;
  transition: all var(--dur-fast);
}
.results-allcta.btn.secondary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(90, 124, 90, 0.15), transparent);
  transition: left 0.5s ease;
}
.results-allcta.btn.secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent-hover);
  color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(90, 124, 90, 0.25);
}
.results-allcta.btn.secondary:hover::before {
  left: 100%;
}


/* Who We Serve card hover swap */
.who-grid {
  position: relative;
}
.who-card {
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.who-card:hover {
  transform: translateY(-4px);
}

/* Active card gets green highlight - controlled by JS */
.who-card.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}
.who-card.is-active .who-tag {
  color: var(--accent-hover);
  border-color: var(--accent-border);
  background: var(--bg-elevated);
}
.who-card.is-active .who-check {
  color: var(--sl-green-400);
}

/* Inactive card gets white background */
.who-card:not(.is-active) {
  background: var(--bg-elevated);
  border-color: var(--border);
}
.who-card:not(.is-active) .who-tag {
  color: var(--fg-3);
  border-color: var(--border);
  background: var(--bg-panel);
}
.who-card:not(.is-active) .who-check {
  color: var(--fg-1);
}

/* Equal height cards with bottom-aligned CTAs */
.who-grid {
  align-items: stretch;
}
.who-card {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.who-card .who-list {
  flex: 1;
}

/* CTA links styled as buttons */
.who-link {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  gap: 8px;
  padding: 12px 20px;
  background: var(--sl-green-500);
  color: #fff !important;
  font-weight: 500;
  font-size: 14px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
  margin-top: 8px;
}
.who-link:hover {
  background: var(--sl-green-600);
  transform: translateY(-2px);
}
.who-card:not(.is-active) .who-link {
  background: var(--fg-1);
}
.who-card:not(.is-active) .who-link:hover {
  background: #333;
}

/* Larger eyebrow titles */
body.v2 .sl-eyebrow,
body.v2 .marquee-label {
  font-size: 13px;
  letter-spacing: 0.14em;
  font-weight: 500;
}

/* Hero subheader styling */
body.v2 .hero-centered-inner .sub strong {
  display: block;
  margin-top: 8px;
  font-weight: 600;
}

/* Footer improvements */
body.v2 .f-lite-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
body.v2 .f-lite-brand img {
  height: 24px;
  display: block;
}
body.v2 .f-lite-tag {
  font-size: 13px;
  font-weight: 500;
  color: #E8E8E2;
  letter-spacing: 0.06em;
  border-left: 1px solid #4A4A46;
  padding-left: 16px;
  line-height: 24px;
}

/* Calendly embed in contact section */
.calendly-embed {
  background: #1a1a18;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.calendly-inline-widget {
  border-radius: var(--radius-xl);
}

/* Client testimonial avatars - enlarged +30% */
.rv3-avatar-img {
  width: 94px;
  height: 94px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.rv3-attr {
  gap: 20px;
  margin-top: 28px;
}
.rv3-attr-name {
  font-size: 22px;
  font-weight: 600;
}
.rv3-attr-role {
  font-size: 17px;
  opacity: 0.85;
}

/* Industry tag in client results */
.rv3-industry {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9DB89A;
  margin-bottom: 16px;
  opacity: 0.9;
}