@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   FindAndClose — the generated page set

   Loads AFTER styles.css and pages.css and adds only what those two do not
   already carry. Nothing here redefines a token, a button, a table primitive
   or a heading scale: if a value is not on the ladders in styles.css, the
   answer is a different step, not a new value.

   Seven components live here, and only these seven:
     .lcount   the live-count band — the number nobody can fake
     .rows     the 50 visible sample records
     .areas    the regional breakdown
     .seq      the sample outreach sequence
     .cmp      the competitor comparison wrapper (the table is pages.css .ctab)
     .shot     an annotated product screenshot with numbered callouts
     .rel      the internal link mesh
   plus .psec / .sop / .callout / .flag, which are prose furniture.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── shared section rhythm ──────────────────────────────────────────────── */
.psec, .lcount, .rows, .areas, .seq, .cmp, .shot, .illo, .faqs, .rel {
  padding-block: calc(var(--gap-sm) / 1.6);
}
.psec > .shell > h2, .lcount h2, .rows h2, .areas h2,
.seq h2, .cmp h2, .faqs h2, .rel h2 {
  font-size: var(--fs-2xl);
  letter-spacing: var(--tr-xl);
  line-height: 1.12;
  text-wrap: balance;
  max-width: 30ch;
}
.psec .lede, .rows .lede, .areas .lede, .seq .lede, .cmp .lede, .rel .lede {
  margin-top: 14px;
  max-width: 64ch;
}
.psec .prose { margin-top: 26px }

/* alternating bands, so nine sections do not read as one grey wall */
.lcount, .areas, .faqs { background: var(--bg-subdued) }
.rows, .seq, .cmp, .rel { background: #fff }

/* ── prose furniture ────────────────────────────────────────────────────── */
/* .ticks comes from styles.css with no vertical margin of its own — inside a
   run of prose it needs to breathe, or it reads as part of the paragraph
   above it. */
.prose .ticks { margin-block: 22px }
.prose .ticks li { align-items: flex-start }
.prose .ticks .ico { margin-top: 2px }

.sop {
  margin-top: 22px; padding: 0; list-style: none;
  counter-reset: sop;
  display: flex; flex-direction: column; gap: 14px;
}
.sop li {
  counter-increment: sop;
  position: relative; padding-left: 44px;
  font-size: var(--fs-md); line-height: 1.7; color: var(--slate);
}
.sop li::before {
  content: counter(sop);
  position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-700);
  font-family: var(--ff-m); font-size: var(--fs-2xs); font-weight: 600;
}
.sop li b { color: var(--ink); font-weight: 600 }

.callout {
  margin-top: 26px; padding: 20px 22px;
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: var(--r-md);
  background: var(--brand-25);
  box-shadow: inset 0 0 0 1px var(--brand-100);
}
.callout .ico { flex: none; margin-top: 2px; color: var(--brand) }
.callout p { margin-top: 0; font-size: var(--fs-sm) }
.callout p + p { margin-top: 12px }

.muted { color: var(--slate-300) }
.tnum { font-family: var(--ff-m); font-variant-numeric: tabular-nums }

.flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: var(--tr-xs);
  padding: 3px 9px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.flag--on  { background: rgba(0,178,97,.10); color: var(--green-deep) }
.flag--off { background: var(--line-soft); color: var(--slate-300) }

/* ── the live count band ────────────────────────────────────────────────── */
.lcount__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 12px;
}
.lcount__stamp {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-m); font-size: var(--fs-2xs);
  color: var(--slate-400);
}
.lcount__stamp .ico { color: var(--teal) }

.lcount__grid {
  margin-top: 30px;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-sm);
}
.lcount__stat {
  background: #fff; padding: 24px 22px;
  display: flex; flex-direction: column; gap: 4px;
}
.lcount__stat b {
  font-family: var(--ff-d, var(--ff)); font-size: var(--fs-3xl);
  font-weight: 700; letter-spacing: var(--tr-xl); line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.lcount__stat span {
  margin-top: 6px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  letter-spacing: var(--tr-sm);
}
.lcount__stat small { font-size: var(--fs-2xs); color: var(--slate-400); line-height: 1.5 }
.lcount__foot {
  margin-top: 18px; font-size: var(--fs-xs); color: var(--slate-400); max-width: 62ch;
}

/* ── record tables ──────────────────────────────────────────────────────── */
.rows__scroll {
  margin-top: 28px;
  max-height: 620px; overflow: auto;
  border-radius: var(--r-lg); background: #fff;
  box-shadow: var(--sh-sm), 0 0 0 1px rgba(10,37,64,.04);
}
.rows__scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--brand) }
.rows__t { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--fs-sm) }
.rows__t thead th {
  position: sticky; top: 0; z-index: 2;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 13px 16px; text-align: left;
  font-family: var(--ff); font-size: var(--fs-3xs); font-weight: 700;
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--slate-400);
}
.rows__t tbody th[scope="row"] {
  padding: 12px 16px; text-align: left; font-weight: 500;
  color: var(--ink); max-width: 34ch;
}
.rows__t tbody td { padding: 12px 16px; color: var(--slate); vertical-align: middle }
.rows__t tbody tr + tr th, .rows__t tbody tr + tr td { border-top: 1px solid var(--line-soft) }
.rows__t tbody tr:hover th, .rows__t tbody tr:hover td { background: var(--brand-25) }
.rows__t--tight { min-width: 560px }
.areas__foot { margin-top: 16px; font-size: var(--fs-xs); color: var(--slate-400); max-width: 66ch }

/* ── the sample sequence ────────────────────────────────────────────────── */
.seq__list { margin-top: 30px; padding: 0; list-style: none; display: grid; gap: 16px }
.seq__step {
  display: grid; grid-template-columns: 190px 1fr; gap: 0;
  border-radius: var(--r-lg); overflow: hidden;
  background: #fff; box-shadow: var(--sh-sm), 0 0 0 1px rgba(10,37,64,.04);
}
.seq__meta {
  padding: 22px; background: var(--brand-25);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  border-right: 1px solid var(--brand-50);
}
.seq__n {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-family: var(--ff-m); font-size: var(--fs-2xs); font-weight: 600;
}
.seq__when { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); letter-spacing: var(--tr-sm) }
.seq__ch {
  font-family: var(--ff-m); font-size: var(--fs-3xs);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--brand-700);
}
.seq__body { padding: 22px 24px }
.seq__subj {
  font-size: var(--fs-sm); color: var(--ink); font-weight: 600;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line-soft);
}
.seq__subj span {
  font-family: var(--ff-m); font-size: var(--fs-3xs); font-weight: 500;
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--slate-300);
  margin-right: 8px;
}
.seq__copy p { font-size: var(--fs-sm); line-height: 1.7; color: var(--slate) }
.seq__copy p + p { margin-top: 12px }
.seq__why {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  display: flex; gap: 9px; align-items: flex-start;
  font-size: var(--fs-xs); color: var(--slate-400);
}
.seq__why .ico { flex: none; margin-top: 2px; color: var(--lemon) }

/* ── comparison wrapper ─────────────────────────────────────────────────── */
.cmp .ctabwrap { margin-top: 28px }

/* The tick and cross cells each carry a `.sr` span holding the word a screen
   reader needs. `.sr` is `position:absolute` with no offsets, so without a
   positioned ancestor its containing block is the viewport — and inside a
   table that scrolls sideways it landed at x=563 on a 390px phone and gave
   the whole page a horizontal scrollbar. Making the cell the containing block
   fixes it without touching the utility every other page depends on. */
.ctab .yes, .ctab .no { position: relative }
.ctab tbody tr.is-theirs th[scope="row"], .ctab tbody tr.is-theirs td { background: var(--bg-subdued) }
.cmp__stamp {
  margin-top: 16px; display: flex; gap: 9px; align-items: flex-start;
  font-size: var(--fs-xs); color: var(--slate-400); max-width: 70ch;
}
.cmp__stamp .ico { flex: none; margin-top: 2px; color: var(--teal) }
.cmp__foot { margin-top: 14px; font-size: var(--fs-sm); color: var(--slate); max-width: 68ch }

/* ── annotated screenshot ───────────────────────────────────────────────── */
.shot__fig { margin: 0 }
.shot__frame {
  position: relative;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-subdued);
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(10,37,64,.06);
}
.shot__frame img { display: block; width: 100%; height: auto }
.shot__pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-family: var(--ff-m); font-size: var(--fs-2xs); font-weight: 700;
  box-shadow: 0 0 0 4px rgba(99,91,255,.24), var(--sh-sm);
}
.shot__keys {
  margin-top: 26px; padding: 0; list-style: none;
  counter-reset: key;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.shot__keys li {
  counter-increment: key;
  position: relative; padding-left: 40px;
  font-size: var(--fs-sm); line-height: 1.65; color: var(--slate);
}
.shot__keys li::before {
  content: counter(key);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-family: var(--ff-m); font-size: var(--fs-3xs); font-weight: 700;
}
.shot__keys li b { display: block; color: var(--ink); font-weight: 600 }
.shot figcaption, .illo figcaption {
  margin-top: 18px; font-size: var(--fs-xs); color: var(--slate-400);
  max-width: 70ch;
}

/* ── generated illustration ─────────────────────────────────────────────── */
.illo figure { margin: 0; display: flex; flex-direction: column; align-items: center }
.illo img {
  display: block; width: 100%; max-width: 900px; height: auto;
  border-radius: var(--r-lg); box-shadow: var(--sh-md);
}
.illo figcaption { text-align: center }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faqs .faqgroup { margin-top: 26px }

/* ── the internal link mesh ─────────────────────────────────────────────── */
.rel__grid {
  margin-top: 26px; padding: 0; list-style: none;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
.rel__grid a {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-radius: var(--r-md);
  background: #fff; box-shadow: var(--sh-xs), 0 0 0 1px rgba(10,37,64,.05);
  text-decoration: none; color: inherit;
  transition: box-shadow .18s var(--e), transform .18s var(--e);
}
.rel__grid a:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-sm), 0 0 0 1px var(--brand-100);
}
.rel__grid a:focus-visible { box-shadow: 0 0 0 2px var(--brand) }
.rel__grid b {
  flex: 1; font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  letter-spacing: var(--tr-sm);
}
.rel__grid span { font-family: var(--ff-m); font-size: var(--fs-3xs); color: var(--slate-300) }
.rel__grid .ico { flex: none; width: 16px; height: 16px; color: var(--brand) }

/* ── narrow screens ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .psec, .lcount, .rows, .areas, .seq, .cmp, .shot, .illo, .faqs, .rel {
    padding-block: calc(var(--gap-sm) / 2.2);
  }
  .seq__step { grid-template-columns: 1fr }
  .seq__meta {
    flex-direction: row; align-items: center; gap: 12px;
    border-right: 0; border-bottom: 1px solid var(--brand-50);
    padding: 14px 18px;
  }
  .seq__body { padding: 18px }
  .lcount__stat { padding: 20px 18px }
  .lcount__stat b { font-size: var(--fs-2xl) }
  .shot__pin { width: 24px; height: 24px; font-size: 10px }
}

@media (prefers-reduced-motion: reduce) {
  .rel__grid a { transition: none }
  .rel__grid a:hover { transform: none }
}