/* Hard to Fill - editorial white + one bold red accent.
   Pure white, black ink, one confident red used only for proof moments
   (badges, price, CTAs). Serif for headlines, system sans for body,
   system mono reserved for real data (IDs, day-counts, dates, prices). */

:root {
  --bg: #ffffff;
  --ink: #111111;
  --muted: #5a5a5a;
  --faint: #8a8a8a;
  --accent: #c41e3a;
  --accent-ink: #ffffff;
  --border: #e6e3df;
  --card-bg: #fafaf8;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --max: 880px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute only sets display:none at user-agent specificity,
   so any class setting `display` silently defeats it. Anything toggled via
   `hidden` in JS needs this or it never hides. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- header ---- */

header.site {
  border-bottom: 1px solid var(--border);
  /* Sticky so the price is always one click away on a page this long. */
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(8px);
}

/* Slightly tighter once scrolled, so the header costs less vertical space
   on the sections that matter. */
header.site.is-stuck .bar { padding-top: 12px; padding-bottom: 12px; }
header.site.is-stuck { box-shadow: 0 1px 0 var(--border), 0 6px 18px rgba(0, 0, 0, 0.04); }

header.site .bar {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

nav.site-nav { display: flex; gap: 24px; align-items: center; }
nav.site-nav a:not(.btn) { text-decoration: none; color: var(--muted); font-size: 0.95rem; }
nav.site-nav a:not(.btn):hover { color: var(--ink); }

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 20px;
  border-radius: 3px;
  text-decoration: none;
  border: 1px solid var(--ink);
  cursor: pointer;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #a91830; border-color: #a91830; }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

/* ---- hero ---- */

.hero {
  padding: 72px 0 40px;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.08;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.hero .subhead {
  color: var(--muted);
  font-size: 1.15rem;
  max-width: 46ch;
  margin: 0 0 32px;
}

.hero .cta-row { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }

.source-line {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--faint);
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---- leads table (IS the CSV deliverable) ----

   All 25 columns are shown deliberately: the breadth of the file is the
   thing being sold, so the table scrolls rather than being trimmed to a
   readable subset. The company column is pinned left so horizontal
   scrolling never leaves a reader looking at anonymous numbers. */

.table-scroll {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow-x: auto;
  margin: 8px 0 6px;
  -webkit-overflow-scrolling: touch;
}

.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

table.leads-full {
  min-width: max-content;
  font-size: 0.82rem;
}

table.leads-full th,
table.leads-full td {
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Wide free-text columns get a firmer cap so one long reason string can't
   push the other 24 columns off into the far distance. */
table.leads-full .col-why_good_lead,
table.leads-full .col-tech,
table.leads-full .col-company_functions { max-width: 210px; }
table.leads-full .col-role,
table.leads-full .col-role_key { max-width: 230px; }

table.leads-full .col-company {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  font-weight: 700;
  max-width: 165px;
  box-shadow: 1px 0 0 var(--border);
}

table.leads-full thead .col-company { z-index: 3; background: var(--card-bg); }
table.leads-full tbody tr:hover .col-company { background: #fcfbfa; }

.table-hint {
  font-size: 0.78rem;
  color: var(--faint);
  margin: 0 0 18px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.scroll-cue {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.table-wrap {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow-x: auto;
  margin: 8px 0 6px;
  -webkit-overflow-scrolling: touch;
}

table.leads {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 720px;
}

table.leads thead th {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  white-space: nowrap;
}

table.leads tbody td {
  border-bottom: 1px solid var(--border);
  padding: 11px 12px;
  vertical-align: middle;
}

table.leads tbody tr:last-child td { border-bottom: none; }
table.leads tbody tr:hover { background: #fcfbfa; }

table.leads .num { text-align: right; }
table.leads .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.cell-company { font-weight: 700; max-width: 150px; }
.cell-role { color: var(--muted); max-width: 185px; }

/* Real posted titles run long ("... (Canada Only; Designations Required)").
   Clamping an inner span keeps one verbose listing from blowing up row
   height, without breaking table cell layout. */
.clamp-1, .clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.cell-loc {
  color: var(--muted);
  font-size: 0.82rem;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-work { color: var(--muted); font-size: 0.8rem; }
.cell-score { font-weight: 700; }
.dash { color: var(--border); }

.pill-vs {
  display: inline-block;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 3px;
  padding: 1px 7px;
  font-size: 0.78rem;
  color: var(--muted);
}

.pill-repost {
  display: inline-block;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 3px;
  padding: 1px 7px;
  font-weight: 700;
  font-size: 0.78rem;
}

.row-link {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.row-link:hover { text-decoration: underline; }

.table-caption {
  font-size: 0.8rem;
  color: var(--faint);
  margin: 0 0 28px;
}

.table-scroll-hint {
  display: none;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--faint);
  margin: 4px 0 24px;
}

.freshness {
  border-left: 3px solid var(--accent);
  background: var(--card-bg);
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--muted);
  margin: 4px 0 8px;
}
.freshness strong { color: var(--ink); font-family: var(--mono); }

/* ---- warmth ---- */

.warmth-example {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--card-bg);
  padding: 16px 20px;
  margin: 20px 0 14px;
}

.warmth-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.warmth-badge {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
}
.warmth-hot { background: var(--accent); color: #fff; }
.warmth-warm { background: #f7e3e7; color: var(--accent); }
.warmth-cool, .warmth-cold { background: var(--border); color: var(--muted); }

.warmth-co { font-family: var(--mono); font-size: 0.76rem; color: var(--faint); }

.warmth-reasons { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: 0.92rem; }
.warmth-reasons li { margin-bottom: 4px; }

/* ---- home page sections ---- */

.source-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 16px;
}

.source-chip {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 16px;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.source-name { font-weight: 700; font-size: 0.92rem; }
.source-count { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }

p.small { font-size: 0.88rem; }

.pipeline-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 22px 0 0;
}

.pipeline-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 20px 46px;
  border-left: 1px solid var(--border);
  margin-left: 13px;
}

.pipeline-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }

.pipeline-steps li::before {
  content: counter(step);
  position: absolute;
  left: -13px;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pipeline-steps strong {
  display: block;
  font-size: 1.02rem;
  margin-bottom: 3px;
  line-height: 1.5;
}

.pipeline-steps span { color: var(--muted); font-size: 0.94rem; }

.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 18px;
}

.audience h3 { margin: 0 0 6px; font-size: 1rem; }
.audience p { margin: 0; font-size: 0.92rem; }

/* ---- stats strip ---- */

.stats-strip {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--muted);
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 8px 0 48px;
}

/* ---- sections / prose ---- */

section { padding: 32px 0; }

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

h3 { font-size: 1.1rem; margin: 24px 0 8px; }

p { color: var(--ink); }
p.muted, .muted { color: var(--muted); }

.legal-summary {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 28px;
  font-size: 0.95rem;
}

/* ---- pricing ---- */

.price-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 32px;
  margin: 20px 0 40px;
}

.price-card .price {
  font-family: var(--mono);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--accent);
  margin: 4px 0 20px;
}

.price-card ul { padding-left: 1.1em; margin: 0 0 24px; color: var(--muted); }
.price-card li { margin-bottom: 6px; }

.buy { display: flex; gap: 10px; flex-wrap: wrap; }
.buy input[type="email"], .buy input[type="text"] {
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  flex: 1;
  min-width: 180px;
}

/* ---- categories / cart ---- */

.category-list { margin: 24px 0; }

.category-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.category-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.category-row-main { flex: 1; display: flex; flex-direction: column; }
.category-row-label { font-weight: 700; font-size: 1.05rem; }
.category-row-count { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.category-row-price { font-family: var(--mono); font-weight: 700; color: var(--accent); font-size: 1.05rem; }

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.1rem;
  font-weight: 600;
}

/* ---- offer / pricing ---- */

.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 8px 0 44px;
  /* stretch, not start: three plans compared side by side read as three
     different-sized offers when their boxes end at different heights. */
  align-items: stretch;
}

.offer {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 24px;
  background: #fff;
  position: relative;
  /* Column flex so the cards fill the row's height and, whatever the
     bullet count, every CTA still lines up along one baseline. */
  display: flex;
  flex-direction: column;
}

/* The bullet list absorbs the slack, so the button below it stays put. */
.offer .offer-list { flex: 1 0 auto; }
.offer > form,
.offer > .offer-cta,
.offer > a.btn { margin-top: auto; }

.offer-featured {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 6px 24px rgba(196, 30, 58, 0.10);
}

.offer-flag {
  position: absolute;
  top: -11px;
  left: 20px;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px;
}

.offer-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.offer-price {
  font-family: var(--mono);
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

.offer-was {
  font-size: 1rem;
  color: var(--faint);
  text-decoration: line-through;
  margin-left: 8px;
  font-weight: 400;
}

.offer-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.offer-note { font-size: 0.9rem; margin: 10px 0 14px; }

.deadline {
  border: 1px solid var(--accent);
  background: #fff5f6;
  color: var(--accent);
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 0.9rem;
  margin-bottom: 18px;
  text-align: center;
}

.guarantee {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  margin: 0 0 40px;
  font-size: 0.95rem;
  color: var(--muted);
}
.guarantee strong { color: var(--ink); }

.offer-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.10);
}

.mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 20;
}

.mode-bar-main { display: flex; flex-direction: column; gap: 2px; }
.mode-bar-main strong { font-size: 1.15rem; font-family: var(--serif); font-weight: 600; }
.mode-bar-main .muted { font-size: 0.85rem; }

.mode-change {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
}
.mode-change:hover { border-color: var(--ink); color: var(--ink); }

.category-row.is-locked { opacity: 0.45; cursor: not-allowed; }
.category-row.is-locked:hover { border-color: var(--border); }
.bundle-mode .category-row-price { visibility: hidden; }

/* ---- full row expansion on the sample page ---- */

.full-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 28px 0 8px;
  overflow: hidden;
}

.full-row-head {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.full-row-grid {
  margin: 0;
  padding: 6px 16px 14px;
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr;
  gap: 0;
}

.full-row-grid dt {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  padding: 7px 14px 7px 0;
  border-bottom: 1px solid var(--border);
}

.full-row-grid dd {
  margin: 0;
  padding: 7px 0;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
  word-break: break-word;
}

.full-row-grid dt:last-of-type, .full-row-grid dd:last-of-type { border-bottom: none; }
.offer-list { padding-left: 1.05em; margin: 0 0 18px; color: var(--muted); font-size: 0.9rem; }
.offer-list li { margin-bottom: 5px; }
.offer-form { flex-direction: column; align-items: stretch; gap: 8px; }
.offer-cta { display: block; text-align: center; }

.upsell {
  border: 1px solid var(--accent);
  background: #fff5f6;
  border-radius: 4px;
  padding: 12px 14px;
  margin-top: 14px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.notice {
  border: 1px solid var(--accent);
  color: var(--accent);
  background: #fff5f6;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

table.admin { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.82rem; }
table.admin th, table.admin td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
table.admin th { background: var(--card-bg); }

/* ---- footer ---- */

footer.site {
  border-top: 1px solid var(--border);
  margin-top: 60px;
  padding: 28px 0 40px;
  color: var(--faint);
  font-size: 0.85rem;
}

footer.site .bar {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

footer.site a { color: var(--faint); text-decoration: none; margin-right: 16px; }
footer.site a:hover { color: var(--ink); }

/* ---- sticky cart bar ---- */

.sticky-cart {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: #fff;
  border-top: 1px solid var(--ink);
  box-shadow: 0 -6px 20px rgba(17, 17, 17, 0.08);
  padding: 14px 0;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

.sticky-cart-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sticky-cart-summary {
  font-family: var(--mono);
  font-size: 0.95rem;
}

body.has-sticky-cart {
  padding-bottom: 76px;
}

@media (max-width: 640px) {
  html, body { font-size: 16px; }

  header.site .bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  nav.site-nav { flex-wrap: wrap; gap: 12px 20px; width: 100%; }

  .hero { padding-top: 36px; }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero .subhead { font-size: 1.02rem; }
  .hero .cta-row { flex-direction: column; align-items: stretch; }
  .hero .cta-row .btn { text-align: center; }

  /* The table stays a table on mobile and scrolls horizontally -- collapsing
     it into stacked cards would hide exactly the thing being demonstrated,
     which is that this is spreadsheet-shaped data. */
  table.leads { font-size: 0.82rem; min-width: 640px; }
  table.leads thead th, table.leads tbody td { padding: 9px 10px; }
  .table-wrap { position: relative; }
  .table-scroll-hint { display: block; }

  .price-card { padding: 20px; }
  .price-card .price { font-size: 1.9rem; }

  .category-row { flex-wrap: wrap; row-gap: 4px; }
  .category-row-price { order: 3; margin-left: 32px; }
  .category-row-main { min-width: 0; }
  .category-row-label { font-size: 0.98rem; }

  .buy { flex-direction: column; align-items: stretch; }
  .buy input[type="email"], .buy input[type="text"] { min-width: 0; }

  .sticky-cart-inner { padding: 0 16px; }
  .sticky-cart-summary { font-size: 0.85rem; }
  .sticky-cart #sticky-cta { padding: 9px 14px; font-size: 0.88rem; white-space: nowrap; }

  table.admin { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---- infographics ----
   Numbers first, picture second: each figure prints its own values so the
   drawing can't flatter them. */

.figures { border-top: 1px solid var(--border); padding-top: 34px; }

.figure-lead {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  margin: 26px 0 34px;
}

.figure-stat { display: flex; flex-direction: column; gap: 8px; }

.figure-num {
  font-family: var(--mono);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.figure-cap { font-size: 0.92rem; color: var(--muted); max-width: 44ch; }

.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 30px 34px;
}

.figure { margin: 0; }

.figure figcaption {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.figure svg { display: block; max-width: 100%; height: auto; margin-bottom: 10px; }
.figure .small { margin: 0; max-width: 46ch; }

@media (max-width: 640px) {
  .figure-num { font-size: 2.1rem; }
  .figure-grid { gap: 26px; }
}

/* ---- the account book table ----
   One row per company, because that's the unit being sold. Wider cells
   than the role table: a company row carries prose (functions, example
   roles) that a job row didn't. */

table.accounts {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 860px;
}

table.accounts thead th {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 11px 13px;
  white-space: nowrap;
}

table.accounts tbody td {
  border-bottom: 1px solid var(--border);
  padding: 13px;
  vertical-align: middle;
}

table.accounts tbody tr:last-child td { border-bottom: none; }
table.accounts tbody tr:hover { background: #fcfbfa; }
table.accounts .num { text-align: right; }
table.accounts .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.accounts .strong { font-weight: 700; }

.cell-co { font-weight: 700; white-space: nowrap; }
.cell-domain { white-space: nowrap; }
.cell-domain a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--faint); }
.cell-domain a:hover { text-decoration-color: var(--accent); color: var(--accent); }
.tick { color: var(--accent); font-weight: 700; margin-left: 4px; }
.cell-fn, .cell-roles {
  color: var(--muted);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-roles { max-width: 300px; }

/* ---- the full sheet ----

   Every column of the delivered file, which is 31 of them for companies and
   26 for roles. Too wide for any screen, and deliberately so: the argument
   for the price is how much is in a row, and picking eight fields to show
   would be making that argument by assertion instead of by showing it.

   So the table keeps its natural width and scrolls, with the company name
   pinned to the left edge - horizontal scrolling must never leave a reader
   looking at a row of numbers with no idea whose they are. */

table.accounts.wide {
  min-width: max-content;
  font-size: 0.82rem;
}

table.accounts.wide td,
table.accounts.wide th { white-space: nowrap; }

.accounts .col-pin {
  position: sticky;
  left: 0;
  z-index: 2;
  /* Opaque, or the scrolling columns show through the pinned one. Matched
     to the row beneath rather than to the page, so hover still reads as one
     continuous row. */
  background: var(--bg);
  border-right: 1px solid var(--border);
}

.accounts thead .col-pin { background: var(--card-bg); z-index: 3; }
.accounts tbody tr:hover .col-pin { background: #fcfbfa; }

/* Prose columns. Clipped rather than wrapped so one long "what they do"
   cannot set the height of every row; the full text is on hover and in the
   file. */
.cell-wide {
  color: var(--muted);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-link a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--faint);
}
.cell-link a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---- proof block ---- */
.proof { border-top: 1px solid var(--border); padding-top: 34px; }
.section-head { margin-bottom: 16px; }
.section-head h2 { margin-bottom: 6px; }
.section-head p { margin: 0; }

/* ---- before / after contrast ---- */
.versus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.versus-side {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px 24px;
}

.versus-ours { border-color: var(--accent); border-width: 2px; padding: 21px 23px; }

.versus-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.versus-ours .versus-label { color: var(--accent); }

.versus ul { margin: 0; padding-left: 1.05em; }
.versus li { margin-bottom: 9px; color: var(--muted); font-size: 0.94rem; }
.versus-ours li { color: var(--ink); }
.versus li:last-child { margin-bottom: 0; }

/* ---- use cases ---- */
.use-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
  margin-top: 20px;
}

.use-case {
  border-top: 2px solid var(--ink);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
}

.use-case h3 { margin: 0 0 10px; font-size: 1.1rem; }
.use-case p { color: var(--muted); font-size: 0.94rem; margin: 0 0 12px; }

.use-figure {
  margin-top: auto !important;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--ink) !important;
  font-size: 0.9rem !important;
}
.use-figure strong {
  font-family: var(--mono);
  font-size: 1.3rem;
  color: var(--accent);
  display: block;
  margin-bottom: 2px;
}

/* ---- the single offer ---- */
.offer-single {
  display: grid;
  grid-template-columns: minmax(300px, 1.15fr) minmax(260px, 1fr);
  gap: 34px;
  align-items: start;
  margin-bottom: 46px;
}

.offer-hero { padding: 30px 32px; }
.offer-hero .offer-price { font-size: 3.1rem; }
.offer-aside h3 { font-size: 0.98rem; margin: 0 0 7px; }
.offer-aside h3:not(:first-child) { margin-top: 22px; }
.offer-aside p { font-size: 0.92rem; margin: 0; }

.centered { text-align: center; }

.notice {
  border: 1px solid var(--accent);
  background: #fff5f6;
  color: var(--accent);
  border-radius: 4px;
  padding: 12px 18px;
  font-size: 0.92rem;
  margin-bottom: 22px;
}

/* ---- what we don't do ---- */
.dont-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
  margin-top: 18px;
}
.dont-head { font-weight: 700; margin-bottom: 7px; }
.dont p { margin: 0; font-size: 0.92rem; }

/* ---- closing block ---- */
.closer {
  border-top: 1px solid var(--border);
  padding-top: 34px;
  margin-bottom: 20px;
}
.closer h2 { margin-bottom: 8px; }

@media (max-width: 820px) {
  .offer-single { grid-template-columns: 1fr; gap: 26px; }
  .offer-hero .offer-price { font-size: 2.6rem; }
}

/* ---- one-page layout ---- */

.hero-note {
  font-size: 0.86rem;
  color: var(--faint);
  margin-top: 14px;
}

.offer-section { border-top: 1px solid var(--border); padding-top: 34px; }

/* Anchored sections must not sit under the sticky header when jumped to. */
#data, #how, #pricing { scroll-margin-top: 84px; }

.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin: 26px 0 18px;
}
.how-col h3 { font-size: 1rem; margin: 0 0 10px; }
.how-col p { font-size: 0.92rem; margin: 0 0 10px; }

ul.tight { margin: 0; padding-left: 1.05em; }
ul.tight li { margin-bottom: 9px; color: var(--muted); font-size: 0.92rem; }
ul.tight li:last-child { margin-bottom: 0; }
ul.tight strong { color: var(--ink); }

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px 34px;
  margin-top: 18px;
}
.faq h3 { font-size: 1rem; margin: 0 0 7px; }
.faq p { margin: 0; font-size: 0.92rem; }

.offer-hero .offer-was {
  display: block;
  margin-left: 0;
  margin-top: 4px;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--muted);
  font-family: var(--sans);
  letter-spacing: 0;
}


/* ---- form fields ----
   Stacked label + input rather than bare placeholders: a placeholder
   disappears the moment someone types, which leaves a filled form with no
   labels on it and is the classic way to lose people at the last step. */

.field { display: block; margin-bottom: 12px; }

.field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 5px;
}

.field-opt {
  font-weight: 400;
  color: var(--faint);
  text-transform: none;
  letter-spacing: 0;
}

.field input {
  font-family: var(--sans);
  font-size: 0.98rem;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.field input::placeholder { color: var(--faint); }

.field input:hover { border-color: #bdb8b3; }

.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.12);
}

.field input:invalid:not(:placeholder-shown) { border-color: #d08a95; }

.offer-form { display: block; }
.offer-form .offer-cta { width: 100%; margin-top: 4px; padding: 13px 20px; font-size: 1rem; }

/* ---- freshness bar ----
   The answer to the first objection anyone has about a lead list, so it
   sits directly under the hero rather than in an FAQ. */

.freshness {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 15px 20px;
  margin: 0 0 40px;
  font-size: 0.93rem;
  color: var(--muted);
  background: #fdfcfc;
}

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

.fresh-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  margin-top: 6px;
  box-shadow: 0 0 0 4px rgba(196, 30, 58, 0.14);
}

/* ---- full-width prose inside the how-it-works block ---- */
.how-wide {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  margin-top: 8px;
}
.how-wide h3 { font-size: 1.05rem; margin: 0 0 10px; }
.how-wide p { max-width: 78ch; margin: 0 0 12px; }

/* Four across where the content supports it, still collapsing cleanly. */
.use-cases { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.figure-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

@media (max-width: 600px) {
  .freshness { padding: 13px 15px; font-size: 0.88rem; }
}


/* ---- What is actually filled in -------------------------------------
   The completeness figures. Bars rather than a table because the reader is
   scanning for a weak field, and a short bar is visible before any number
   is read. Every value comes from the delivered file, so this section gets
   worse on its own if the data does, which is the point of putting it on a
   sales page at all. */
.coverage { border-top: 1px solid var(--border); padding-top: 46px; }
.cov-headline {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px; align-items: start; margin-bottom: 44px;
}
.cov-hero-num {
  display: block; font-family: var(--serif); font-size: clamp(3.4rem, 8vw, 5rem);
  line-height: 0.95; color: var(--accent); letter-spacing: -0.02em;
}
.cov-hero-label {
  display: block; font-weight: 600; font-size: 1.05rem; margin-top: 6px;
}
.cov-hero p { color: var(--muted); margin-top: 12px; max-width: 46ch; }
.cov-grid { display: grid; gap: 16px; }
.cov-item-top { display: flex; justify-content: space-between; align-items: baseline; }
.cov-label { font-size: 0.94rem; }
.cov-pct { font-size: 0.92rem; color: var(--muted); }
.cov-bar {
  height: 7px; background: var(--border); border-radius: 4px;
  overflow: hidden; margin-top: 6px;
}
.cov-bar span { display: block; height: 100%; background: var(--ink); border-radius: 4px; }
.cov-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 28px; padding-top: 34px; border-top: 1px solid var(--border);
}
.cov-fact-num {
  display: block; font-family: var(--serif); font-size: 2.5rem;
  line-height: 1; color: var(--accent);
}
.cov-fact-label { display: block; font-weight: 600; margin-top: 6px; }
.cov-fact p { color: var(--muted); font-size: 0.92rem; margin-top: 6px; }
.cov-price {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: 1.02rem;
}
@media (max-width: 720px) {
  .cov-headline { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- Wordmark -------------------------------------------------------
   The mark is a vessel, open at the top and only part full: the product
   in one shape. It inherits `currentColor` so it stays legible wherever
   the header puts it, and the fill is overridden to the accent so the
   logo carries the same single-red rule as the rest of the page. */
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink);
}
.wordmark .mark { width: 21px; height: 21px; flex: none; color: var(--ink); }
.wordmark .mark-fill { fill: var(--accent); }
.wordmark span { display: inline-block; }
.wordmark:hover { text-decoration: none; }


/* ---- admin ---- */
/* The order table's send button. Plain on purpose: this page is a tool for
   one person, not a surface anyone is being sold to. */
.btn-plain {
  font: inherit;
  font-size: 0.8rem;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
.btn-plain:hover { border-color: var(--accent); color: var(--accent); }

/* Who is selling this. Quiet, but present on every page. */
.footer-legal {
  display: inline-block;
  margin-top: 6px;
  color: var(--faint);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* ---- who makes this ----
   The last thing read before the price. Narrow measure and plain type: it is
   a person talking, and it should not look like another feature panel. */
.about { border-top: 1px solid var(--border); padding-top: 34px; }
.about-body { max-width: 620px; }
.about-body p { margin-bottom: 14px; }
.about-body p:first-child { font-size: 1.05rem; }

/* What actually arrives. A buyer asked to pay for "an .xlsx" has no idea
   whether that is a dump or a working file, and the two sheets and the key
   that joins them are the product decision worth showing. */
.deliverable {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin: 0 0 22px;
  text-align: left;
  background: var(--card-bg);
}
.deliv-file {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 12px;
  word-break: break-all;
}
.deliv-sheets { display: grid; gap: 10px; }
.deliv-sheet {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
}
.deliv-tab { font-weight: 600; font-size: .92rem; }
.deliv-dims { font-size: .78rem; color: var(--accent); }
.deliv-note { font-size: .8rem; color: var(--muted); line-height: 1.45; }
.deliv-join {
  font-size: .72rem;
  color: var(--muted);
  text-align: center;
  letter-spacing: .04em;
  text-transform: uppercase;
  position: relative;
}
.deliv-join::before,
.deliv-join::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26%;
  border-top: 1px solid var(--border);
}
.deliv-join::before { left: 4%; }
.deliv-join::after { right: 4%; }
.deliv-foot {
  margin-top: 12px;
  font-size: .78rem;
  color: var(--muted);
}