/* ─────────────────────────────────────────────────────────────────────
   FedSift landing page — mobile-first, zero JS, single stylesheet.

   Design system (2026-06 redesign):
   • Content sections are LEFT-aligned with a consistent heading→lede
     rhythm; only the hero, pricing, and final CTA are centered (deliberate
     focal moments).  No center-everything, no negative-margin hacks.
   • Typographic scale + an 8pt-ish spacing scale + soft layered shadows.
   • Comparison table: highlighted FedSift column, sticky first column,
     crisp ✓ / ◐ / – marks rendered from CSS, zebra rows.

   Performance contract: LCP < 1.5s, CLS < 0.05, 0 KB JS, system font stack.
   ───────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Palette — soft tech blues, WCAG AA on white. Brand blue = app #0d6efd. */
  --c-bg:        #ffffff;
  --c-ink:       #0a0f1c;   /* headings */
  --c-fg:        #1d2632;   /* body text */
  --c-muted:     #586374;
  --c-faint:     #99a2af;
  --c-line:      #e6e9ef;
  --c-line-soft: #eef1f6;
  --c-card:      #f7f9fc;
  --c-primary:       #0d6efd;
  --c-primary-hover: #0b5ed7;
  --c-primary-soft:  rgba(13,110,253,0.08);
  --c-accent:    #16b8a6;
  --c-good:      #16a34a;
  --c-warn:      #d68a0c;

  /* Spacing scale */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;  --sp-20: 5rem;   --sp-24: 6rem;

  --maxw: 1120px;
  --radius:    14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(13,18,32,0.06), 0 1px 3px rgba(13,18,32,0.05);
  --shadow-md: 0 4px 6px rgba(13,18,32,0.04), 0 10px 24px rgba(13,18,32,0.07);
  --shadow-lg: 0 24px 64px rgba(13,18,32,0.14);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: clamp(15px, 0.4vw + 14px, 17px);
  line-height: 1.6;
  color: var(--c-fg);
  background: var(--c-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

img, picture, iframe { max-width: 100%; display: block; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--c-ink); font-weight: 650; }

.skip-link {
  position: absolute; left: -10000px; top: auto; width: 1px; height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; width: auto; height: auto;
  padding: 8px 14px; background: var(--c-ink); color: #fff;
  border-radius: 6px; z-index: 999;
}

/* ── Layout ───────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: clamp(18px, 5vw, 40px);
}

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}
.brand {
  font-size: 1.2rem; font-weight: 800;
  color: var(--c-ink); letter-spacing: -0.02em;
}
.site-header nav {
  /* The gap tightens as the nav fills up. Adding the "Book a demo" pill took
     the row past the 1120px container and wrapped the header to two lines at
     EVERY desktop width (64px → 127px tall) — the container is max-width, so
     a wider monitor does not help. Measured, not guessed. */
  display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center;
}
/* --sp-3, not --sp-4: the brand lockup (2026-10-04) is ~40px wider than the
   text it replaced and the --sp-4 row wrapped again at every width >1180px. */
.site-header nav a {
  color: var(--c-muted); font-size: .92rem; font-weight: 500;
  transition: color .15s ease;
}
.site-header nav a:hover { color: var(--c-ink); text-decoration: none; }
.site-header nav a.nav-cta {
  color: #fff; background: var(--c-primary);
  padding: 8px 16px; border-radius: 999px; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.site-header nav a.nav-cta:hover { background: var(--c-primary-hover); color: #fff; }
/* Secondary "Sign in" link — quieter than the primary pill, kept visible for returning users. */
.site-header nav a.nav-signin { font-weight: 600; }

/* Between the container's 1120px ceiling and the mobile collapse the nav has
   to carry eleven items. Tighten progressively rather than let the header
   wrap to two sticky rows. (760-960px wrapped before this change too; this
   band now fits as well.) */
@media (max-width: 1180px) {
  .site-header nav { gap: var(--sp-3); }
  .site-header nav a { font-size: .88rem; }
  .site-header nav a.nav-cta { padding: 7px 13px; }
  .site-header nav a.nav-demo { padding: 6px 12px; }
}

@media (max-width: 720px) {
  .site-header nav { gap: var(--sp-4); }
  /* Collapse the section anchors on mobile, but keep both auth actions AND
     the demo link in view. `.nav-demo` has to be excluded HERE rather than
     re-shown by a later rule: this selector carries three classes, so a
     `.site-header nav a.nav-demo { display: inline-flex }` override loses on
     specificity no matter where it sits. (Caught in a 390px browser check —
     the link was invisible on phones, which is where the pitch needs it
     most.) */
  .site-header nav a:not(.nav-cta):not(.nav-signin):not(.nav-demo) { display: none; }
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600; font-size: .98rem;
  text-decoration: none; min-height: 46px; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--c-primary); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--c-primary-hover); transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--c-ink); border-color: var(--c-line); }
.btn-ghost:hover { background: var(--c-card); border-color: #d4d9e2; }
.btn-block { display: flex; width: 100%; }
.btn-lg    { padding: 16px 30px; font-size: 1.05rem; min-height: 52px; }

/* ── Hero (centered — deliberate focal moment) ────────────────────────── */
.hero {
  padding-block: clamp(var(--sp-16), 9vw, var(--sp-24));
  background:
    radial-gradient(1100px 520px at 50% -160px, rgba(13,110,253,0.08), transparent 62%),
    linear-gradient(180deg, var(--c-bg) 0%, var(--c-card) 100%);
}
.hero-inner { text-align: center; max-width: 880px; margin-inline: auto; }

/* Hero badge — leads with the differentiator (the Claude connector) before the
   headline, so it reads as the north-star capability rather than a footnote. */
.hero-badge {
  display: inline-block;
  margin: 0 0 0.85rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-primary);
  background: rgba(13, 110, 253, 0.09);
  border: 1px solid rgba(13, 110, 253, 0.22);
}
.hero h1 {
  font-size: clamp(2.1rem, 4.4vw + 1rem, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 var(--sp-5);
  color: var(--c-ink);
  max-width: 18ch; margin-inline: auto;
}
.hero .lede {
  font-size: clamp(1.08rem, 1vw + .85rem, 1.3rem);
  color: var(--c-fg);
  max-width: 60ch; margin: 0 auto var(--sp-4);
}
.hero .lede-sub {
  margin: 0 auto var(--sp-8);
  max-width: 62ch;
  color: var(--c-muted);
  font-size: 1rem;
}
.hero .cta-row {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center;
  margin-bottom: var(--sp-4);
}
.hero .hero-foot {
  color: var(--c-muted); font-size: .85rem;
  margin: var(--sp-5) auto 0;
  max-width: 56ch;
}

/* ── Section base + heading rhythm (LEFT-aligned content) ─────────────── */
main section { padding-block: clamp(var(--sp-16), 7vw, var(--sp-20)); }
main section + section { border-top: 1px solid var(--c-line-soft); }

main section h2 {
  font-size: clamp(1.7rem, 2vw + .9rem, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin: 0 0 var(--sp-3);
  max-width: 22ch;
}

/* Section intro paragraph (was .how-lede, used across sections) */
.how-lede {
  color: var(--c-muted);
  max-width: 64ch;
  margin: 0 0 var(--sp-10);
  font-size: 1.05rem;
}

/* ── Features grid ────────────────────────────────────────────────────── */
.feature-eyebrow {
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: .78rem; font-weight: 700;
  color: var(--c-primary);
  margin: var(--sp-12) 0 var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-3);
}
.feature-eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--c-line);
}
.features > .container > .feature-eyebrow:first-of-type { margin-top: 0; }

.feature-grid {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.feature {
  padding: var(--sp-6);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #d9deea;
}
.feature h3 {
  margin: 0 0 var(--sp-2);
  font-size: 1.15rem; letter-spacing: -0.01em; color: var(--c-ink);
}
.feature p { margin: 0; color: var(--c-muted); font-size: .95rem; line-height: 1.6; }

.feature-hero { border-color: var(--c-primary); box-shadow: var(--shadow-md);
  background: linear-gradient(180deg, #fff 0%, var(--c-primary-soft) 140%); }
.feature-tag {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  font-size: .68rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-primary);
  background: var(--c-primary-soft); padding: 2px var(--sp-2); border-radius: 999px;
}

/* ── Comparison ("Deeper than a search tool…") ────────────────────────── */
.compare-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-top: var(--sp-8);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  background: #fff;
}
.compare-table {
  width: 100%; border-collapse: collapse;
  min-width: 760px; font-size: 0.95rem;
}
.compare-table th, .compare-table td {
  padding: var(--sp-4) var(--sp-4);
  text-align: center;
  border-bottom: 1px solid var(--c-line-soft);
  vertical-align: middle;
}
.compare-table thead th {
  font-weight: 700; color: var(--c-muted);
  background: var(--c-card); white-space: nowrap;
  font-size: .82rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding-block: var(--sp-3);
}
/* Row labels (first column) — left-aligned, sticky on horizontal scroll */
.compare-table tbody th[scope="row"] {
  text-align: left; font-weight: 600; color: var(--c-ink);
  min-width: 260px; line-height: 1.4;
  position: sticky; left: 0; background: #fff; z-index: 1;
}
.compare-table thead th:first-child {
  text-align: left; position: sticky; left: 0; z-index: 2;
}
/* Zebra (skip the FedSift column + sticky label so tints stay clean) */
.compare-table tbody tr:nth-child(even) td:not(.is-us) { background: #fbfcfe; }

/* Highlighted FedSift column */
.compare-table .is-us { background: var(--c-primary-soft); }
.compare-table thead th.is-us {
  color: var(--c-primary); background: rgba(13,110,253,0.12);
  border-bottom: 2px solid var(--c-primary);
}
.compare-table tbody tr:hover td { background: rgba(13,110,253,0.04); }
.compare-table tbody tr:hover td.is-us { background: rgba(13,110,253,0.12); }

/* Crisp marks rendered from CSS (glyph in HTML hidden; aria-label kept) */
.compare-table td.yes, .compare-table td.part, .compare-table td.no { font-size: 0; }
.compare-table td.yes::before, .compare-table td.part::before, .compare-table td.no::before {
  font-size: 1.15rem; font-weight: 800; line-height: 1;
}
.compare-table td.yes::before        { content: "✓"; color: var(--c-good); }
.compare-table td.is-us.yes::before  { content: "✓"; color: var(--c-primary); }
.compare-table td.part::before       { content: "◐"; color: var(--c-warn); font-weight: 600; }
.compare-table td.no::before         { content: "–"; color: var(--c-faint); }

.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table .compare-foot th[scope="row"], .compare-table .compare-foot td {
  font-size: 0.85rem; color: var(--c-muted); background: var(--c-card);
}
.compare-table .compare-foot th[scope="row"] { background: var(--c-card); }
.compare-table .compare-foot .is-us { color: var(--c-ink); font-weight: 700; background: rgba(13,110,253,0.12); }
.compare-note {
  margin-top: var(--sp-4); color: var(--c-muted);
  font-size: 0.9rem; max-width: 72ch;
}

/* ── See it in action ─────────────────────────────────────────────────── */
.see-it { background: var(--c-card); }

.video-wrap {
  position: relative; aspect-ratio: 16 / 9;
  max-width: 920px; margin-inline: auto;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg); background: #000;
}
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); color: #cbd5e1; text-align: center; padding: var(--sp-6);
  background: radial-gradient(600px 300px at 50% 40%, rgba(13,110,253,0.2), transparent 70%), #0b1220;
}
.video-placeholder .play {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  font-size: 1.4rem; color: #fff; padding-left: 4px;
}
.video-placeholder-title { font-weight: 600; color: #e5e7eb; font-size: 1.05rem; }
.video-placeholder small { color: var(--c-faint); font-size: .82rem; }

/* ── Guided tour (narrated, auto-advancing showcase) ──────────────────────
   Base (JS-off) state: steps stack as a list, every screenshot shows stacked.
   .tour--ready (added by /tour.js) switches the stage to a single crossfading
   panel and reveals the autoplay progress bars + pause/play control. */
.tour { margin-top: var(--sp-10); }
.tour-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.tour-step {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--sp-3);
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp-4); position: relative; overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.tour-step:hover { border-color: #d4d9e2; }
.tour-step:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.tour-step.is-active { border-color: var(--c-primary); background: var(--c-primary-soft); box-shadow: var(--shadow-sm); }
.tour-num {
  width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center;
  font-weight: 700; font-size: .9rem; background: var(--c-card); color: var(--c-muted);
}
.tour-step.is-active .tour-num { background: var(--c-primary); color: #fff; }
.tour-title { display: block; font-weight: 650; color: var(--c-ink); }
.tour-desc { display: block; font-size: .9rem; line-height: 1.45; color: var(--c-muted); margin-top: 2px; }
.tour-progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--c-primary); transform: scaleX(0); transform-origin: left;
  display: none;
}
.tour-stage { position: relative; }
.tour-panel { margin: 0; }
.tour-panel img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.tour-panel + .tour-panel { margin-top: var(--sp-5); }  /* spacing only matters in JS-off stacked mode */
.tour-controls { display: none; margin-top: var(--sp-3); justify-content: flex-end; }
.tour-toggle {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; background: #fff; border: 1px solid var(--c-line); border-radius: 999px;
  padding: 6px 14px; color: var(--c-ink);
}
.tour-toggle:hover { border-color: var(--c-primary); color: var(--c-primary); }

@media (min-width: 860px) {
  .tour { display: grid; grid-template-columns: 38% 1fr; gap: var(--sp-6); align-items: start; }
}

/* JS-enhanced single-panel crossfade */
.tour--ready .tour-progress { display: block; }
.tour--ready .tour-controls { display: flex; }
.tour--ready .tour-stage { display: grid; grid-template-columns: 1fr; }
.tour--ready .tour-panel { grid-column: 1; grid-row: 1; opacity: 0; visibility: hidden; transition: opacity .4s ease; }
.tour--ready .tour-panel + .tour-panel { margin-top: 0; }
.tour--ready .tour-panel.is-active { opacity: 1; visibility: visible; }
.tour--ready .tour-controls { grid-column: 1; }

@media (prefers-reduced-motion: reduce) {
  .tour--ready .tour-panel { transition: none; }
  .tour-progress { display: none !important; }
}

/* ── How it works ─────────────────────────────────────────────────────── */
.how { background: var(--c-card); }

/* ── Pricing (centered focal section) ─────────────────────────────────── */
.pricing { text-align: center; }
.pricing h2 { margin-inline: auto; max-width: none; }
/* Cost-anchor: frames the price against the value of a single missed recompete. */
.price-anchor {
  margin: var(--sp-3) auto var(--sp-5); max-width: 32ch; text-align: center;
  font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--c-ink);
}
.price-anchor strong { color: var(--c-primary); }
.pricing-lede {
  margin: 0 auto var(--sp-10); max-width: 60ch; text-align: center;
}
.plan-card {
  position: relative; max-width: 480px; margin-inline: auto;
  padding: var(--sp-8); border: 1px solid var(--c-primary);
  border-radius: var(--radius); background: #fff;
  box-shadow: var(--shadow-lg); text-align: center;
}
.beta-banner {
  position: absolute; top: 0; left: 0; right: 0;
  background: linear-gradient(90deg, var(--c-primary), #5b9bff);
  color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: 0.03em;
  padding: var(--sp-2);
  border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
}
.plan-card .plan-name { margin-top: var(--sp-8); }
.plan-name {
  text-transform: uppercase; letter-spacing: 0.1em; font-size: .78rem;
  color: var(--c-primary); font-weight: 700; margin-bottom: var(--sp-3);
}
.plan-price { display: flex; justify-content: center; align-items: baseline; gap: var(--sp-1); margin-bottom: var(--sp-6); }
.plan-price .amount { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; color: var(--c-ink); }
.plan-price .period { color: var(--c-muted); font-size: 1rem; font-weight: 600; }
.price-then {
  margin: var(--sp-2) 0 var(--sp-3); font-size: .82rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--c-faint); font-weight: 600;
}
.price-options { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; margin-bottom: var(--sp-6); }
@media (max-width: 420px) { .price-options { grid-template-columns: 1fr; } }
.price-opt {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); background: var(--c-card); text-align: left;
}
.price-opt--best { border-color: var(--c-primary); background: linear-gradient(180deg, var(--c-primary-soft), transparent); }
.opt-head { display: flex; align-items: center; gap: var(--sp-2); font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); }
.opt-badge { font-size: .66rem; font-weight: 700; color: #0a7d5a;
  background: rgba(46,216,182,0.18); padding: 1px var(--sp-2); border-radius: 999px; text-transform: none; }
.opt-amount { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--c-ink); }
.opt-per { font-size: .85rem; font-weight: 600; color: var(--c-muted); }
.opt-sub { font-size: .78rem; color: var(--c-faint); }
.plan-features { list-style: none; padding: 0; margin: 0 0 var(--sp-8); text-align: left; }
.plan-features li {
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6); border-bottom: 1px solid var(--c-line-soft);
  font-size: .95rem; color: var(--c-fg); position: relative;
}
.plan-features li::before { content: "✓"; position: absolute; left: 0; top: var(--sp-2); color: var(--c-accent); font-weight: 800; }
.plan-features li:last-child { border-bottom: none; }
.plan-foot { margin: var(--sp-4) 0 0; color: var(--c-faint); font-size: .85rem; }

/* ── Three-tier plan grid (named pricing, 2026-09-03) ──────────────────────
   Replaces the single .plan-card. The old rules above are kept because
   .plan-card still carries the shared card chrome; the --tier modifier undoes
   the single-card centring and max-width so three fit side by side.

   Pro is featured with a scale + stronger border rather than a different hue:
   the tiers must read as one product with one recommended option, not three
   unrelated offers. On mobile the scale is dropped and Pro is ORDERED FIRST,
   because a stacked column reads top-down and the recommended plan should not
   be the second thing scrolled past. */
.plan-grid {
  display: grid; gap: var(--sp-6); align-items: start;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1120px; margin: 0 auto;
}
.plan-card--tier {
  max-width: none; margin-inline: 0; padding: var(--sp-7) var(--sp-6);
  border-color: var(--c-line); box-shadow: none;
  display: flex; flex-direction: column; height: 100%;
}
.plan-card--tier .plan-name { margin-top: var(--sp-4); font-size: 1rem;
  text-transform: none; letter-spacing: 0; color: var(--c-ink); font-weight: 800; }
.plan-card--tier .plan-price { margin-bottom: var(--sp-1); }
.plan-card--tier .plan-price .amount { font-size: 2.4rem; }
.plan-card--tier .plan-features { margin-bottom: var(--sp-6); }
/* Pushes the CTA to the bottom of every card so three cards of different
   feature counts still line their buttons up. */
.plan-card--tier .btn-block { margin-top: auto; }

.plan-annual { margin: 0 0 var(--sp-3); font-size: .9rem; color: var(--c-muted); }
.plan-annual strong { color: var(--c-ink); }
.plan-tagline { margin: 0 0 var(--sp-5); font-size: .92rem; color: var(--c-muted);
  min-height: 2.6em; }

.plan-card--featured {
  border: 2px solid var(--c-primary); box-shadow: var(--shadow-lg);
  transform: scale(1.04); z-index: 1;
}
.plan-flag {
  position: absolute; top: 0; left: 0; right: 0;
  background: linear-gradient(90deg, var(--c-primary), #5b9bff);
  color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: var(--sp-2);
  border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
}
.plan-flag--soon { background: var(--c-line); color: var(--c-muted); }
/* Custom Suite's flag. It must NOT reuse --soon: that pairs a grey background
   with muted text, which reads as a disabled control, and this plan is the one
   on the page you can act on today. Neutral surface, full-strength ink. */
.plan-flag--custom { background: var(--c-line); color: var(--c-ink); }
/* Starter's flag. Green rather than the primary gradient, so "Free forever"
   reads as a fact about the plan and not as a second "most popular" — one
   recommendation per deck or the eye has nowhere to land. */
.plan-flag--free { background: linear-gradient(90deg, #0f9d76, #16b8a6); }

/* Team is visibly not for sale. Muted rather than hidden: a capture team that
   needs shared seats has to know it is coming, or they conclude FedSift is
   single-player and leave. */
.plan-card--soon { opacity: .78; }
.btn-disabled {
  background: var(--c-line); color: var(--c-faint); cursor: default;
  border: 1px solid var(--c-line); pointer-events: none;
}

/* Was `.founding-banner`, carrying "$99/mo locked for life". That rate was
   retired when Pro dropped to $49, now $19 — a lock ABOVE list price reads as a
   mistake — and the slot now carries the promo end date instead. */
.promo-banner {
  margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4);
  background: rgba(22,184,166,0.10); border: 1px solid rgba(22,184,166,0.35);
  border-radius: var(--radius-sm); font-size: .86rem; color: var(--c-fg);
  text-align: left;
}
.promo-banner strong { color: #0a7d5a; display: block; }

.plan-foot--wide { max-width: 68ch; margin: var(--sp-8) auto 0; text-align: center;
  font-size: .88rem; line-height: 1.6; }

@media (max-width: 900px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 480px; }
  .plan-card--featured { transform: none; }
  .plan-card--featured { order: -1; }
  .plan-tagline { min-height: 0; }
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq details {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); margin-bottom: var(--sp-3); overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.faq details[open] { border-color: #d4dbe8; box-shadow: var(--shadow-sm); }
.faq summary {
  padding: var(--sp-5) var(--sp-6); cursor: pointer; font-weight: 650;
  font-size: 1rem; color: var(--c-ink); list-style: none; position: relative; user-select: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: var(--sp-6); top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; color: var(--c-muted); transition: transform .15s ease; line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 var(--sp-6) var(--sp-6); margin: 0; color: var(--c-muted); line-height: 1.65; max-width: 76ch; }

/* ── Final CTA (centered focal section) ───────────────────────────────── */
.cta-footer {
  text-align: center;
  background:
    radial-gradient(820px 400px at 50% 30%, rgba(13,110,253,0.09), transparent 62%),
    var(--c-card);
}
.cta-footer h2 { text-align: center; margin-inline: auto; letter-spacing: -0.02em; max-width: 20ch; }
.cta-footer p { color: var(--c-muted); max-width: 52ch; margin: 0 auto var(--sp-8); font-size: 1.05rem; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--c-line);
  padding-block: var(--sp-8); font-size: .9rem; color: var(--c-muted);
}
.footer-inner {
  display: flex; gap: var(--sp-6); flex-wrap: wrap;
  justify-content: space-between; align-items: center;
}
.site-footer nav { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.site-footer a { color: var(--c-muted); }
.site-footer a:hover { color: var(--c-ink); }
.muted { color: var(--c-faint); }

/* ── Hero workflow pipeline ────────────────────────────────────────────── */
.flow {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: var(--sp-4); margin-top: var(--sp-12);
}
.flow-step {
  position: relative;
  flex: 1 1 132px; max-width: 178px; min-width: 124px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
  padding: var(--sp-4) var(--sp-3);
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
.flow-step:not(:last-child)::after {
  content: "→"; position: absolute; right: calc(-1 * var(--sp-4) + 2px); top: 50%;
  transform: translateY(-50%); color: var(--c-faint); font-size: 1.05rem; font-weight: 700;
}
.flow-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--c-primary-soft); color: var(--c-primary); margin-bottom: 2px;
}
.flow-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flow-name { font-weight: 700; font-size: .9rem; color: var(--c-ink); }
.flow-sub  { font-size: .76rem; color: var(--c-muted); }

@media (max-width: 640px) {
  .flow { flex-direction: column; align-items: stretch; gap: var(--sp-5); max-width: 320px; margin-inline: auto; }
  .flow-step { flex-direction: row; max-width: none; text-align: left; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .flow-ico { margin-bottom: 0; }
  .flow-step:not(:last-child)::after {
    content: "↓"; right: auto; left: 50%; top: auto;
    bottom: calc(-1 * var(--sp-5) + 4px); transform: translateX(-50%);
  }
}

/* ── Stats band (dark, scannable proof) ────────────────────────────────── */
.stats { background: #0a0f1c; color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.stat { text-align: center; }
.stat-num {
  display: block; font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 800;
  letter-spacing: -0.02em; color: #fff; line-height: 1;
}
.stat-unit { font-size: .5em; font-weight: 700; color: var(--c-accent); margin-left: 3px; vertical-align: baseline; }
.stat-label { display: block; margin: var(--sp-3) auto 0; font-size: .85rem; color: #9aa6b6; line-height: 1.45; max-width: 26ch; }
@media (max-width: 720px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8) var(--sp-4); } }

/* ── Phase panels (the platform map, replaces 13 prose cards) ──────────── */
.phase-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.phase {
  padding: var(--sp-6); background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.phase:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d9deea; }
.phase-head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-line-soft);
}
.phase-head h3 { margin: 0; font-size: 1.2rem; color: var(--c-ink); letter-spacing: -0.01em; }
.phase-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
}
.phase-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.phase-find   { background: rgba(13,110,253,0.10);  color: #0d6efd; }
.phase-decide { background: rgba(22,184,166,0.14);  color: #0f9b8e; }
.phase-run    { background: rgba(214,138,12,0.14);   color: #b9760a; }
.phase-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.phase-list li {
  font-size: .88rem; color: var(--c-muted); line-height: 1.45;
  position: relative; padding-left: var(--sp-6);
}
.phase-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--c-accent); font-weight: 800; }
.phase-list strong { display: block; color: var(--c-ink); font-weight: 650; font-size: .95rem; }

/* ── Timing chart (urgency curve SVG) ──────────────────────────────────── */
.chart { margin: var(--sp-8) 0 0; max-width: 780px; }
.chart svg {
  width: 100%; height: auto; display: block; background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: var(--sp-4);
}
.chart figcaption { margin-top: var(--sp-3); font-size: .85rem; color: var(--c-muted); }

/* Closing payoff under the urgency chart — turns the timing insight into action + a CTA. */
.how-act { margin-top: var(--sp-8); max-width: 780px; }
.how-act-kicker {
  margin: 0 0 var(--sp-4); font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--c-primary);
}
.how-act-list {
  list-style: none; margin: 0 0 var(--sp-6); padding: 0;
  display: grid; gap: var(--sp-3);
}
.how-act-list li {
  position: relative; padding-left: var(--sp-6); color: var(--c-muted); line-height: 1.5;
}
.how-act-list li strong { color: var(--c-ink); font-weight: 650; }
.how-act-list li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: var(--c-primary); font-weight: 800;
}

/* ── Embedded product tour video ──────────────────────────────────────── */
.video-wrap video.tour-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0; background: #000; display: block;
}

/* ── Connect to Claude (MCP connector) ────────────────────────────────────
   Left-aligned like the other content sections.  Sits on the card tint so it
   reads as a distinct capability block between "why timing" and pricing.
   Zero JS, same variables as everything else. */
.claude { background: var(--c-card); }
.claude-kicker {
  display: inline-block; margin: 0 0 var(--sp-3);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: var(--c-primary);
  padding: 4px 10px; border-radius: 999px;
}

/* The question/answer pair. This is the section's proof: it shows the shape of
   a real interaction rather than asserting that one is possible. */
.claude-example {
  margin: var(--sp-8) 0; max-width: 780px;
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.claude-q, .claude-a { margin: 0; }
.claude-q { font-size: 1.06rem; font-weight: 600; color: var(--c-ink); line-height: 1.5; }
.claude-a { margin-top: var(--sp-5); color: var(--c-muted); line-height: 1.6; }
.claude-q-label, .claude-a-label {
  display: block; margin-bottom: var(--sp-2);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.claude-q-label { color: var(--c-primary); }
.claude-a-label { color: var(--c-faint); }

.claude-sub {
  margin: var(--sp-10) 0 var(--sp-5);
  font-size: 1.22rem; font-weight: 700; color: var(--c-ink);
}

/* Numbered setup steps. Counter is rendered from CSS so the markup stays a
   plain <ol> — screen readers and answer-engine parsers both get real
   ordered-list semantics. */
.claude-steps {
  margin: 0 0 var(--sp-8); padding: 0; max-width: 780px;
  list-style: none; counter-reset: claude-step;
  display: grid; gap: var(--sp-4);
}
.claude-steps li {
  counter-increment: claude-step;
  position: relative; padding-left: 46px;
  color: var(--c-muted); line-height: 1.6;
}
.claude-steps li::before {
  content: counter(claude-step);
  position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--c-primary-soft); color: var(--c-primary);
  font-size: .9rem; font-weight: 700;
}
.claude-steps strong { color: var(--c-ink); }
.claude-steps em { font-style: normal; font-weight: 600; color: var(--c-fg); }
.claude-steps code {
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: 6px; padding: 2px 6px;
  font-size: .88em; word-break: break-all; color: var(--c-ink);
}

/* Trust notes. Read-only + revocable are the two objections a BD lead raises
   before granting an assistant access to their pipeline, so they lead. */
.claude-notes {
  list-style: none; margin: 0 0 var(--sp-8); padding: 0; max-width: 780px;
  display: grid; gap: var(--sp-3);
}
.claude-notes li {
  position: relative; padding-left: 26px;
  color: var(--c-muted); line-height: 1.55;
}
.claude-notes li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--c-accent);
}
.claude-notes strong { color: var(--c-ink); }

/* "New" nav pill — the only nav item that advertises itself. */
.site-header nav a.nav-new { position: relative; font-weight: 600; color: var(--c-primary); }
.site-header nav a.nav-new::after {
  content: ""; position: absolute; top: 2px; right: -8px;
  width: 5px; height: 5px; border-radius: 999px; background: var(--c-primary);
}
.site-header nav a.nav-new:hover { color: var(--c-primary-hover); }

@media (max-width: 640px) {
  .claude-example { padding: var(--sp-5); }
  .claude-steps li { padding-left: 40px; }
  .claude-steps li::before { width: 26px; height: 26px; font-size: .82rem; }
}

/* ── Demo request ──────────────────────────────────────────────────────────
   The third call to action. Browse and sign-up both hand the evaluation to
   the visitor; this one offers a person, which is what a BD director
   assessing a tool for a capture team actually wants.
   Two columns on desktop (pitch | form) so the form is visible without a
   scroll — a form below the fold is a form nobody fills. */
.demo {
  padding-block: var(--sp-20);
  background: var(--c-card);
  border-block: 1px solid var(--c-line);
}
.demo-inner {
  display: grid;
  gap: var(--sp-10);
  align-items: start;
}
@media (min-width: 860px) {
  .demo-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
}
.demo-pitch h2 { margin-top: 0; letter-spacing: -0.02em; }
.demo-pitch > p { color: var(--c-muted); font-size: 1.05rem; max-width: 46ch; }
.demo-list {
  list-style: none; padding: 0; margin: var(--sp-6) 0 0;
  display: grid; gap: var(--sp-3);
}
.demo-list li {
  position: relative; padding-left: 28px;
  color: var(--c-fg); font-size: .98rem;
}
/* A CSS tick, not a glyph — an emoji here renders in the OS emoji font and
   ignores the brand colour. */
.demo-list li::before {
  content: ""; position: absolute; left: 4px; top: .45em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  transform: rotate(-45deg);
}
.demo-foot {
  margin-top: var(--sp-6); color: var(--c-muted); font-size: .92rem;
  max-width: 46ch;
}

.demo-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: var(--sp-8);
}
.demo-row { margin-bottom: var(--sp-4); }
.demo-row label {
  display: block; margin-bottom: var(--sp-2);
  font-size: .88rem; font-weight: 600; color: var(--c-ink);
}
.demo-row label span { color: var(--c-primary); }
.demo-row input,
.demo-row select,
.demo-row textarea {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px;
  font: inherit; font-size: .95rem;
  color: var(--c-fg); background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.demo-row textarea { resize: vertical; min-height: 84px; }
.demo-row input:focus,
.demo-row select:focus,
.demo-row textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.demo-row input::placeholder,
.demo-row textarea::placeholder { color: var(--c-faint); }

/* Honeypot: off-canvas rather than display:none — some bots skip hidden
   fields, and it must stay unreachable by keyboard and by screen readers. */
.demo-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.demo-legal {
  margin: var(--sp-4) 0 0;
  font-size: .82rem; color: var(--c-faint); line-height: 1.5;
}
.demo-error {
  margin: var(--sp-4) 0 0;
  padding: 10px 14px;
  font-size: .88rem;
  color: #8a1c1c;
  background: rgba(220,53,69,0.07);
  border: 1px solid rgba(220,53,69,0.2);
  border-radius: var(--radius-sm);
}
.demo-error:empty { display: none; }

.demo-done-title {
  margin: 0 0 var(--sp-2);
  font-size: 1.15rem; font-weight: 700; color: var(--c-ink);
}
.demo-done p { color: var(--c-muted); margin: 0; }
.demo-done p + p { margin-top: var(--sp-3); }

/* Nav demo link — a quiet outlined pill, distinct from the solid primary
   "Open the app" so the two CTAs do not compete. It must survive the mobile
   collapse below: a demo link hidden on a phone is the same missing path. */
.site-header nav a.nav-demo {
  font-weight: 600; color: var(--c-primary);
  border: 1px solid var(--c-line);
  padding: 7px 14px; border-radius: 999px;
}
.site-header nav a.nav-demo:hover {
  color: var(--c-primary-hover); border-color: var(--c-primary);
  background: var(--c-primary-soft);
}
/* On the narrowest phones the outlined pill plus both auth actions overflow
   and wrap the sticky header to two rows — a permanent 39px of a phone screen
   spent on chrome. Drop the pill's border and tighten the row so all three
   actions sit on one line at 390px. Measured, not assumed. */
@media (max-width: 560px) {
  .site-header nav { gap: var(--sp-2); }
  .site-header nav a { font-size: .85rem; }
  .site-header nav a.nav-demo { border: none; padding: 0; }
  .site-header nav a.nav-cta { padding: 7px 12px; }
}

/* At 360px (iPhone SE) even that overflows. Something has to go, and it is
   "Sign in": a returning user taps "Open the app" and lands signed in, or
   lands on Discovery with sign-in one tap away. Dropping "Book a demo"
   instead would remove the path this whole section exists to add, from the
   device where the page is hardest to evaluate alone. */
@media (max-width: 400px) {
  .site-header nav a.nav-signin { display: none; }
}

/* ── Market Reports ─────────────────────────────────────────────────────────
   Linked from the footer and from #reports on the home page. NOT from the
   header nav: that row is full, and a 12th link wraps it to two rows at every
   desktop width. */
.reports { background: var(--c-card); }
.report-card {
  display: block;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-8);
  margin-bottom: var(--sp-4);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.report-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.report-kicker {
  display: block;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-primary);
  font-weight: 600;
}
.report-card h3 {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.report-card p { color: var(--c-muted); margin: 0 0 var(--sp-4); max-width: 68ch; }
.report-card-sm h3 { font-size: 1.15rem; }
.report-more { font-weight: 600; color: var(--c-primary); }
.reports-all { margin-top: var(--sp-6); }
.reports-all a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .report-card { transition: none; }
  .report-card:hover { transform: none; }
}
@media (max-width: 640px) {
  .report-card { padding: var(--sp-5) var(--sp-5); }
  .report-card h3 { font-size: 1.25rem; }
}

/* ── Who it's for (three audience cards) ──────────────────────────────────── */
.hero-audience { margin-top: var(--sp-3); font-size: .95rem; color: var(--c-muted); }
.who .phase { display: flex; flex-direction: column; }
.who .phase-list { flex: 1; margin-bottom: var(--sp-6); }
.who-cta { margin-top: auto; }
.who .plan-foot { margin-top: var(--sp-6); text-align: center; }

/* ── Free, no account (public tools grid) ─────────────────────────────────── */
.free-grid {
  display: grid; gap: var(--sp-4); margin-top: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.free-tile {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5); background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); color: var(--c-fg);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.free-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #d9deea; text-decoration: none; }
.free-tile strong { color: var(--c-ink); }
.free-tile span { font-size: .86rem; color: var(--c-muted); line-height: 1.4; }

/* Locked brand lockup (tools/brand/build_brand.py) — an image, so the
   wordmark is identical on every surface whatever font a page loads. */
.brand img { display: block; height: 28px; width: auto; }