/* web/css/job-pages.css — the three job marketing pages (/vet, /source,
   /monitor). Self-contained ON PURPOSE (coordination agreement 2026-07-05:
   main.css is frozen for another active session). Loaded ONLY by vet.html,
   source.html, monitor.html, after /css/main.css — shared chrome (nav, footer,
   .btn pills, feedback widget) comes from main.css; everything page-specific
   lives here under a jp- prefix so nothing leaks either way.

   Source of truth for layout + copy: founder-approved comps at
   ~/Desktop/fleetfax-reviews/header-rethink/pages/{vet,source,monitor}.html.
   Architecture: centered text column ~880px, centered modules up to ~1040px.
   Tokens reference main.css :root (--text, --text-2, --text-3, --border,
   --bg-alt, --brand, --font-sans, --font-mono); comp-only colors are local. */

:root {
  --jp-near: #16181d;     /* Pro / dark-band surface (design system near-black) */
  --jp-clear: #217a3b;    /* "clear" status green */
  --jp-caution: #b45309;  /* "caution" status amber */
}

/* ---------- anchored arrivals clear the 64px sticky nav ---------- */
.jp-block[id],
.jp-band[id],
.jp-pro-card[id] { scroll-margin-top: 88px; }

/* ---------- shared type ---------- */
.jp-eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  /* brand gradient, mirrors the wordmark ramp */
  color: var(--brand);
  background: linear-gradient(100deg, #e6202b 0%, #c8102e 55%, #7a0c1c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.jp-eyebrow.jp-red { color: var(--brand); }
.jp-data { font-family: var(--font-mono); letter-spacing: -0.02em; }
.jp-flabel {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}

/* ---------- hero ---------- */
.jp-hero { text-align: center; padding: 104px 0 92px; }
.jp-hero .jp-eyebrow { display: block; margin-bottom: 20px; letter-spacing: 0.22em; }
.jp-hero h1 {
  font-family: var(--font-sans); font-size: clamp(36px, 5vw, 52px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.05; color: var(--text);
  max-width: 860px; margin: 0 auto; text-wrap: balance;
}
.jp-hero .jp-sub {
  font-size: 19px; font-weight: 400; color: var(--text-2); line-height: 1.5;
  max-width: 600px; margin: 22px auto 0;
}
.jp-cta-row { margin-top: 32px; }
/* The hero search pill (.search-form comes from main.css with margin: 0 auto —
   the homepage spaces it through its own hero layout, so on job pages it
   crowded the sub). Give it the CTA-row rhythm here, and a touch more air
   before the fine print under it. */
.jp-hero .search-form { margin-top: 36px; }
.jp-hero .jp-wl-fine { margin-top: 18px; }

/* Near-black pill for non-acquisition hero CTAs (comp .btn-primary; the site's
   red .btn-primary stays reserved for acquisition per the design system). */
.jp-btn-dark {
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; color: #fff;
  background: var(--jp-near); border: none; border-radius: 9999px; height: 44px;
  padding: 0 26px; cursor: pointer; display: inline-flex; align-items: center;
  gap: 8px; line-height: 1; text-decoration: none;
  transition: background var(--t);
}
.jp-btn-dark:hover { background: #23262e; color: #fff; }

/* ---------- sections ---------- */
.jp-block { border-top: 1px solid var(--border); padding: 92px 0; }
.jp-block .jp-eyebrow { display: block; margin-bottom: 14px; }
.jp-block h2 {
  font-family: var(--font-sans); font-size: 28px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--text); line-height: 1.15; max-width: 640px;
}
.jp-lead {
  font-size: 17px; font-weight: 400; color: var(--text-2); line-height: 1.55;
  max-width: 600px; margin-top: 14px;
}
/* centered content architecture: text column ~880 centered, modules up to ~1040 centered */
.jp-head { max-width: 880px; margin-left: auto; margin-right: auto; }
.jp-module { margin-top: 40px; }
.jp-module > * { margin-left: auto; margin-right: auto; }
/* ONE reading edge (design review 0816, MED-14). Every text rail used to
   center at its own max-width — leads at 600, captions at 760/820/940/1040,
   rank lists at 760 — which put page-level text on three or four different
   left edges down /source and /monitor. Text blocks that sit directly in a
   module now pin their LEFT edge to the 880 text rail (the same edge
   .jp-head text reads from) and keep their own max-width as a measure cap.
   Framed objects (screenshots, cards) stay centered — they are objects, not
   prose — and card internals keep their padding as the single indent step. */
.jp-module > .jp-shotcap,
.jp-module > .jp-lead,
.jp-module > .jp-rank-list,
.jp-module > .jp-verify-p {
  margin-left: max(0px, calc((100% - 880px) / 2));
  margin-right: 0;
}
.jp-max-1040 { max-width: 1040px; }
.jp-max-820 { max-width: 820px; }
/* .jp-max-940 — the product-shot measure on /vet. The report screenshots are
   captured at a 900px CSS card on a 1440px viewport and stored at 2x, so a
   ~940px display cap renders them at roughly their native layout size instead
   of blowing a 1040px column up past it. Founder call 2026-08-04: the shots
   read as full-bleed screenshots rather than illustrations beside the text.
   Kept as its own utility so /monitor and /source, which share this stylesheet
   and still use jp-max-1040, are untouched. */
.jp-max-940 { max-width: 940px; }

/* Illustrative-values note (comp footer line, carried with the modules since
   these pages wear the canonical site footer). */
.jp-illustrative {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
  text-align: center; padding: 0 0 56px; letter-spacing: 0;
}

/* ---------- generic card ---------- */
.jp-card { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; }

/* ---------- wireframe module (operating map placeholder) ---------- */
.jp-wf {
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-alt);
  position: relative; overflow: hidden;
}
.jp-wf-cap {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}

/* ---------- status chips ---------- */
.jp-chip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 9999px;
  font-size: 12.5px; font-weight: 600; padding: 5px 11px; line-height: 1;
}
.jp-chip.jp-clear { color: var(--jp-clear); background: rgba(33, 122, 59, 0.09); }
.jp-chip.jp-caution { color: var(--jp-caution); background: rgba(180, 83, 9, 0.09); }
.jp-chip.jp-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Pro tag standard (founder 8/4 eve): red pill, sentence-case "Pro" — matches
   .nav-pro and the pricing dark-card lockup. */
.jp-pro-chip {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0; color: #fff;
  background: var(--brand); border-radius: 9999px; padding: 3px 9px; line-height: 1.4;
}
.jp-pro-chip.jp-on-dark { background: var(--brand); color: #fff; }
/* Inside an eyebrow the gradient text-clip makes the chip's text transparent
   (bug first hit on /vet 8/5, page-scoped there; recurred on /source 8/6 —
   now fixed for every job page here). Reset fill and sit on the baseline. */
.jp-eyebrow .jp-pro-chip {
  text-transform: none; -webkit-text-fill-color: #fff;
  vertical-align: middle; margin-left: 6px; position: relative; top: -1px;
}

/* ---------- report card (vet) ---------- */
.jp-report-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid var(--border); gap: 16px; flex-wrap: wrap;
}
.jp-report-name { font-size: 19px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.jp-report-meta {
  margin-top: 4px; font-family: var(--font-mono); font-size: 12.5px;
  color: var(--text-2); letter-spacing: -0.02em;
}
.jp-report-grid { display: grid; grid-template-columns: 1fr 1fr; }
.jp-rfield { padding: 18px 24px; border-top: 1px solid var(--border); }
.jp-rfield:nth-child(odd) { border-right: 1px solid var(--border); }
.jp-rfield .jp-flabel { display: block; margin-bottom: 7px; }
.jp-rval { font-size: 15px; font-weight: 500; color: var(--text); line-height: 1.35; }
.jp-rval .jp-data { font-weight: 600; }
.jp-rnote { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }

/* ---------- flag rows (vet) ---------- */
.jp-flags { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.jp-flag-row { display: flex; gap: 14px; padding: 18px 22px; border-top: 1px solid var(--border); }
.jp-flag-row:first-child { border-top: none; }
.jp-flag-ic {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(180, 83, 9, 0.1);
  color: var(--jp-caution); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.jp-flag-ic svg { width: 14px; height: 14px; }
.jp-flag-title { font-size: 15px; font-weight: 600; color: var(--text); }
.jp-flag-title .jp-chip { margin-left: 6px; }
.jp-flag-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.5; margin-top: 3px; max-width: 560px; }

/* fraud-playbook rows (vet) — numbered plays reusing the flag-row shell */
.jp-play-num {
  flex: 0 0 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 1px;
}
.jp-play-answer {
  margin-top: 10px; padding: 12px 16px; max-width: 560px;
  background: var(--bg-alt); border-radius: 10px;
  font-size: 14px; line-height: 1.55; color: var(--text);
}
.jp-play-answer .jp-play-k {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); margin-right: 8px;
}
.jp-play-answer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- product shot frame (vet) ----------
   Real report screenshots sit in a framed figure, consistent with the example
   shots on free-carrier-vetting; the caption reads like the report caveat. */
.jp-shot { margin: 0 auto; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg); box-shadow: 0 14px 50px -28px rgba(0,0,0,0.4); }
.jp-shotcap { margin-left: auto; margin-right: auto; }

/* ---------- ask panel, reproduced in native HTML (vet) ----------
   Mirrors the product's right-rail ask widget 1:1 so it stays crisp at any
   density; conversation text is verbatim from a live report session. */
.jp-askui {
  max-width: 460px; margin: 0 auto; padding: 22px 24px 20px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--bg);
  box-shadow: 0 14px 50px -28px rgba(0,0,0,0.4);
}
.jp-askui-eyebrow {
  display: flex; gap: 9px; align-items: flex-start;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); line-height: 1.6;
}
.jp-askui-eyebrow svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--brand); }
.jp-askui-input {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 10px 8px 10px 16px;
  border: 1px solid var(--border); border-radius: 14px;
  font-size: 16px; color: var(--text);
}
.jp-askui-send {
  width: 44px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.jp-askui-send svg { width: 15px; height: 15px; }
.jp-askui-a { margin: 16px 0 0; font-size: 16px; line-height: 1.5; color: var(--text); }
.jp-askui-jump { margin: 12px 0 0; font-size: 14.5px; color: var(--text-3); }
.jp-askui-fine { margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-3); }
.jp-askui-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.jp-askui-chips span {
  padding: 8px 15px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--text);
}
.jp-askui-more { display: inline-block; margin-top: 14px; font-size: 14.5px; color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; }
.jp-shot img { display: block; width: 100%; height: auto; }
/* .jp-shot-wide — for screenshots whose CONTENT is a dense table rather than a
   picture. Scaled to a 390px column the BASIC-percentile shot rendered its row
   labels and numbers at ~8-9px, genuinely unreadable without pinch-zoom. On
   phones it now renders at a legible minimum width and scrolls sideways, with
   the scrollbar kept visible so the overflow announces itself (same treatment
   as the code blocks on /connect and /developers). Untouched from 641px up,
   where it already rendered fully legibly. */
@media (max-width: 640px) {
  .jp-shot-wide { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--text-3) transparent; }
  /* An explicit width, not min-width: with width:auto the image falls back to
     its full intrinsic size (1800px for the current BASIC capture), which is a
     huge scroll for no extra legibility. 680px is roughly 2x the 356px column,
     which is what makes the row labels readable. */
  .jp-shot-wide img { width: 680px; max-width: none; }
  .jp-shot-wide::-webkit-scrollbar { height: 10px; }
  .jp-shot-wide::-webkit-scrollbar-track { background: transparent; }
  .jp-shot-wide::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: 999px; border: 2px solid var(--bg); }
}
.jp-shotcap { font-size: 12.5px; color: var(--text-3); margin-top: 16px; line-height: 1.55; max-width: 760px; }
.jp-shotcap b { color: var(--text-2); font-weight: 600; }
/* A caption carrying jp-max-940 rides the same box as the shot above it, so the
   two left edges line up instead of the caption floating inset. The right
   padding holds the reading measure near the 760px this file sets above —
   .jp-shotcap's own max-width would otherwise win on specificity and re-centre
   the block. Below the breakpoint the caption just fills the column. */
.jp-shotcap.jp-max-940 { max-width: 940px; }
@media (min-width: 1000px) {
  .jp-shotcap.jp-max-940 { box-sizing: border-box; padding-right: 180px; }
}
/* Same pairing for the 820 measure. The early-warning shot on /monitor is the
   report's Authority & insurance card captured at a width where it stacks into
   one column, so both halves stay readable on a phone instead of hiding the
   insurance half behind a sideways scroll. That capture is 568 CSS px wide, so
   940 would blow it up past 1.6x and its type would tower over the section's
   own body copy; 820 keeps it near the ~1.2x the other shots render at. */
.jp-shotcap.jp-max-820 { max-width: 820px; }

/* ---------- timeline (vet) ---------- */
.jp-tl {
  display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.jp-tl-col { padding: 22px 24px 26px; }
.jp-tl-col:first-child { border-right: 1px solid var(--border); }
.jp-tl-head {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 18px;
}
.jp-tl-ev { position: relative; padding-left: 22px; padding-bottom: 20px; }
.jp-tl-ev:last-child { padding-bottom: 0; }
.jp-tl-ev::before {
  content: ""; position: absolute; left: 3px; top: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--text);
}
.jp-tl-ev.jp-lapse::before { background: var(--jp-caution); }
.jp-tl-ev::after {
  content: ""; position: absolute; left: 6.5px; top: 13px; bottom: -1px;
  width: 1px; background: var(--border);
}
.jp-tl-ev:last-child::after { display: none; }
.jp-tl-date { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--text-2); letter-spacing: -0.02em; }
.jp-tl-txt { font-size: 13.5px; color: var(--text); margin-top: 2px; line-height: 1.4; }
.jp-tl-txt.jp-caution { color: var(--jp-caution); }

/* ---------- MOTUS live-verification beat (vet) ---------- */
.jp-verify {
  margin-top: 20px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-alt); padding: 24px 26px;
}
.jp-verify-h {
  font-family: var(--font-sans); font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--text); margin: 0 0 8px; line-height: 1.3;
}
.jp-verify-p { font-size: 14px; color: var(--text-2); line-height: 1.55; margin: 0; max-width: 760px; }
.jp-verify-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--brand); text-decoration: none;
}
.jp-verify-link svg { width: 11px; height: 11px; }
.jp-verify-link:hover { color: var(--brand-hover); }

/* ---------- observed fleet mini-table (vet) ---------- */
.jp-fleet { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; max-width: 720px; }
.jp-fleet-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 22px; border-top: 1px solid var(--border); gap: 12px;
}
.jp-fleet-row:first-child { border-top: none; }
.jp-fleet-k { font-size: 14px; color: var(--text-2); }
.jp-fleet-v { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; }
.jp-fleet-note {
  padding: 14px 22px; border-top: 1px solid var(--border); background: var(--bg-alt);
  font-size: 12.5px; color: var(--text-3); line-height: 1.5;
}

/* ---------- operating map choropleth (vet) ---------- */
.jp-map { border: 1px solid var(--border); border-radius: 14px; background: var(--bg); padding: 24px 26px 18px; }
.jp-map-svg { display: block; width: 100%; height: auto; }
.jp-map-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 14px; flex-wrap: wrap;
}
.jp-map-cap { font-size: 12.5px; color: var(--text-3); }
.jp-map-legend {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3);
}
.jp-map-legend i { width: 22px; height: 9px; border-radius: 2px; display: inline-block; }
.jp-map-legend i.l0 { background: #e6e8eb; }
.jp-map-legend i.l1 { background: #c7cdd4; }
.jp-map-legend i.l2 { background: #98a1ac; }
.jp-map-legend i.l3 { background: #5f6873; }
.jp-map-legend i.l4 { background: #2b2f37; }

/* ---------- ask (vet) ---------- */
.jp-ask { max-width: 720px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.jp-ask-q { display: flex; align-items: center; gap: 10px; padding: 16px 18px; }
.jp-ask-q svg { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
.jp-ask-q .jp-qt { font-size: 14.5px; color: var(--text); font-weight: 500; }
.jp-ask-a {
  padding: 16px 18px; border-top: 1px solid var(--border); background: var(--bg-alt);
  font-size: 14px; color: var(--text-2); line-height: 1.55;
}
.jp-ask-a b { color: var(--text); font-weight: 600; }

/* ---------- dark band ---------- */
.jp-band {
  /* near-black with a quiet brand-red flare in the corners (founder 7/9) */
  background:
    radial-gradient(900px 520px at 88% 112%, rgba(200, 16, 46, 0.30), transparent 62%),
    radial-gradient(700px 420px at -6% -18%, rgba(122, 12, 28, 0.20), transparent 60%),
    var(--jp-near);
  color: #fff;
}
.jp-band > .container { padding-top: 88px; padding-bottom: 88px; }
.jp-band .jp-eyebrow { display: block; margin-bottom: 14px; color: rgba(255, 255, 255, 0.5); }
.jp-band h2 {
  font-family: var(--font-sans); font-size: 28px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15; color: #fff; max-width: 640px;
}
.jp-band .jp-lead { color: rgba(255, 255, 255, 0.62); }
.jp-band .jp-head { max-width: 880px; }
/* Founder 2026-07-16: at 1040px the pair ran wider than its copy — Bulk
   vetting wrapped two lines against Policy's three and trailed dead space.
   880px (the band's CTA column) puts both paragraphs at a measure where they
   wrap evenly and the boxes read as a matched pair. */
.jp-pro-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px;
  max-width: 880px; margin-left: auto; margin-right: auto;
}
.jp-pro-card {
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px;
  padding: 22px 24px; background: rgba(255, 255, 255, 0.03);
}
.jp-pro-card .jp-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.jp-pro-card h3 { font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.jp-pro-card p { font-size: 14px; color: rgba(255, 255, 255, 0.66); line-height: 1.55; }
.jp-band-cta { margin-top: 40px; max-width: 880px; margin-left: auto; margin-right: auto; }

/* ---------- lane search (source) ---------- */
.jp-lane-field {
  display: flex; align-items: center; gap: 14px; border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 22px; max-width: 1040px; background: var(--bg);
  flex-wrap: wrap;
}
.jp-lane-field > svg { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }
.jp-lane-field .jp-q { font-size: 16px; color: var(--text); font-weight: 500; line-height: 1.3; }
.jp-lane-field .jp-go { margin-left: auto; }
.jp-lane-field .jp-go .jp-btn-dark { height: 38px; padding: 0 20px; font-size: 13.5px; }

.jp-results {
  margin-top: 18px; max-width: 1040px; border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.jp-result-row { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.jp-result-row:first-child { border-top: none; }
.jp-result-main { flex: 1; min-width: 0; }
.jp-result-name { font-size: 15.5px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.jp-result-meta {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
  margin-top: 4px; letter-spacing: -0.02em;
}
.jp-result-chips { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; max-width: 300px; }
.jp-meta-chip {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2);
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 9999px;
  padding: 5px 10px; line-height: 1; white-space: nowrap;
}
.jp-meta-chip.jp-on { color: var(--jp-clear); background: rgba(33, 122, 59, 0.07); border-color: rgba(33, 122, 59, 0.2); }

/* ---------- ranking list (source) ---------- */
.jp-rank-list { max-width: 760px; margin-top: 8px; }
.jp-rank-item { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--border); }
.jp-rank-item:first-child { border-top: none; }
.jp-rank-n {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--brand);
  flex-shrink: 0; width: 24px; letter-spacing: -0.02em; padding-top: 1px;
}
.jp-rank-t { font-size: 15px; font-weight: 600; color: var(--text); }
.jp-rank-d { font-size: 14px; color: var(--text-2); line-height: 1.55; margin-top: 4px; max-width: 520px; }

/* ---------- statement (source, no-ads) ---------- */
.jp-statement {
  max-width: 820px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-alt); padding: 34px 36px;
}
/* Pull-quote register: larger and LIGHTER, not heavier (design review 0816,
   LOW-24) — bold at display size read as a shouted paragraph, not a set-off
   statement. Size up a step, weight down to regular; the tint card carries
   the emphasis. */
.jp-statement p {
  font-family: var(--font-sans); font-size: 24px; font-weight: 400;
  letter-spacing: -0.015em; color: var(--text); line-height: 1.45;
}

/* ---------- evidence card (source) ---------- */
.jp-ev-card { max-width: 1040px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.jp-ev-head { padding: 18px 22px; border-bottom: 1px solid var(--border); }
.jp-ev-name { font-size: 15.5px; font-weight: 600; color: var(--text); }
.jp-ev-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); margin-top: 4px; letter-spacing: -0.02em; }
.jp-ev-body { padding: 20px 22px; }
.jp-ev-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px;
}
.jp-ev-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.jp-ev-chip {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border);
  border-radius: 9999px; padding: 8px 14px 8px 11px; background: var(--bg);
}
.jp-tick {
  width: 16px; height: 16px; border-radius: 50%; background: rgba(33, 122, 59, 0.12);
  color: var(--jp-clear); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.jp-tick svg { width: 10px; height: 10px; }
.jp-ev-chip .jp-txt { font-size: 13px; font-weight: 500; color: var(--text); }

/* ---------- alerts (monitor) ---------- */
.jp-boundary { margin-top: 12px; font-size: 14px; color: var(--text-3); }
/* A boundary line that CLOSES a section (rather than sitting in its head) needs
   its own measure, or it starts flush to the container while the head above it
   is centred in 880px — the two read as belonging to different sections.
   Added 2026-08-04 with the four Pro sections, each of which ends on one. */
.jp-close { max-width: 880px; margin-left: auto; margin-right: auto; margin-top: 34px; }
/* Inline links inside the muted closing line and the rank callout were
   inheriting body colour and rendering as dead text. Same brand-red treatment
   the rest of the page gives an inline link, underlined so it reads as one. */
.jp-boundary a,
.jp-rank-callout a {
  color: var(--brand); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.jp-boundary a:hover,
.jp-rank-callout a:hover { color: var(--brand-hover); }
.jp-head h2 .jp-pro-chip { vertical-align: middle; margin-left: 8px; position: relative; top: -2px; }
.jp-alerts { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.jp-alert-card {
  display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px; background: var(--bg);
}
.jp-alert-ic {
  width: 34px; height: 34px; border-radius: 9px; background: var(--bg-alt);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--text-2);
}
.jp-alert-ic svg { width: 17px; height: 17px; }
.jp-alert-body { flex: 1; min-width: 0; }
.jp-alert-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jp-alert-top .jp-chip { margin-left: 2px; }
.jp-alert-title { font-size: 15px; font-weight: 600; color: var(--text); }
.jp-alert-meta {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-2);
  margin-top: 5px; letter-spacing: -0.02em;
}
.jp-alert-when { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); flex-shrink: 0; letter-spacing: 0; }

/* ---------- proof of vetting (monitor) ---------- */
.jp-proof-wrap { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; max-width: 900px; }
.jp-pdf-wf {
  width: 220px; height: 290px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg); padding: 22px 20px; display: flex; flex-direction: column;
  flex-shrink: 0; box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
}
.jp-pdf-mark { display: flex; align-items: center; gap: 7px; margin-bottom: 20px; }
/* PDF-thumb wordmark: brand hard rule (Geist Mono 600, -0.04em, lowercase,
   brand gradient) — same treatment as .nav-brand-text. */
.jp-pdf-word {
  font-family: var(--font-mono); font-weight: 600; font-size: 13px;
  letter-spacing: -0.04em; text-transform: lowercase;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.jp-pdf-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--brand-gradient); }
.jp-pdf-line { height: 9px; border-radius: 3px; background: var(--bg-alt); margin-bottom: 11px; }
.jp-pdf-line.jp-short { width: 55%; }
.jp-pdf-line.jp-mid { width: 78%; }
.jp-rc-title {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 9px;
}
.jp-rc-carrier { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; line-height: 1.2; }
.jp-rc-dot { font-family: var(--font-mono); font-size: 10px; color: var(--text-2); margin-top: 3px; letter-spacing: -0.02em; }
.jp-rc-rows { margin: 15px 0 0; display: flex; flex-direction: column; gap: 9px; }
.jp-rc-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.jp-rc-rows dt { font-size: 11px; color: var(--text-3); margin: 0; }
.jp-rc-rows dd {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--text); margin: 0; letter-spacing: -0.02em; text-align: right;
}
.jp-pdf-stamp {
  margin-top: auto; font-family: var(--font-mono); font-size: 9.5px;
  color: var(--text-3); letter-spacing: 0.02em; border-top: 1px solid var(--border); padding-top: 12px;
}
.jp-proof-side { flex: 1; min-width: 260px; }
.jp-proof-side .jp-lead { margin-top: 16px; }
.jp-proof-cap {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-top: 14px;
}
.jp-free-chip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 9999px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand); background: rgba(200, 16, 46, 0.08);
  padding: 5px 11px; line-height: 1;
}
.jp-proof-points { margin-top: 20px; }
.jp-proof-point { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; }
.jp-proof-point .jp-tick { width: 18px; height: 18px; margin-top: 1px; }
.jp-proof-point .jp-tick svg { width: 11px; height: 11px; }
.jp-proof-point .jp-pt { font-size: 14.5px; color: var(--text); line-height: 1.5; }

/* ---------- snapshot scrubber (monitor, on dark band) ---------- */
.jp-snap-wf {
  margin-top: 40px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
  background: rgba(255, 255, 255, 0.03); padding: 24px 26px; max-width: 820px;
  margin-left: auto; margin-right: auto;
}
.jp-snap-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 16px;
}
.jp-snap-scrub { display: flex; align-items: center; gap: 0; margin-bottom: 18px; }
.jp-snap-node { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; position: relative; }
.jp-snap-node .jp-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); z-index: 2; }
.jp-snap-node.jp-active .jp-dot { background: var(--brand); box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.25); }
.jp-snap-node .jp-rail { position: absolute; top: 5px; left: 50%; right: -50%; height: 1px; background: rgba(255, 255, 255, 0.16); z-index: 1; }
.jp-snap-node:last-child .jp-rail { display: none; }
.jp-snap-node .jp-d { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255, 255, 255, 0.5); letter-spacing: -0.02em; }
.jp-snap-node.jp-active .jp-d { color: #fff; }
.jp-snap-readout { font-size: 14px; color: rgba(255, 255, 255, 0.8); line-height: 1.55; }
.jp-snap-readout b { color: #fff; font-weight: 600; }
.jp-band h2 .jp-pro-chip { vertical-align: middle; }

/* ---------- final CTA (monitor) ---------- */
.jp-final-cta { text-align: center; padding: 104px 0 112px; border-top: 1px solid var(--border); }
.jp-final-cta h2 {
  font-family: var(--font-sans); font-size: 34px; font-weight: 600;
  letter-spacing: -0.025em; color: var(--text); max-width: 560px; margin: 0 auto; line-height: 1.1;
}
.jp-final-cta p { font-size: 17px; color: var(--text-2); max-width: 520px; margin: 16px auto 0; line-height: 1.5; }
.jp-final-cta .jp-cta-row { margin-top: 30px; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .jp-hero { padding: 72px 0 64px; }
  .jp-block { padding: 64px 0; }
  .jp-band > .container { padding-top: 64px; padding-bottom: 64px; }
  .jp-report-grid,
  .jp-tl,
  .jp-pro-cards { grid-template-columns: 1fr; }
  .jp-rfield:nth-child(odd) { border-right: none; }
  .jp-tl-col:first-child { border-right: none; border-bottom: 1px solid var(--border); }
  .jp-lane-field .jp-go { margin-left: 0; }
  /* Narrow viewports: let the name block take the full row so the activity
     chips stack beneath it instead of squeezing the carrier name. */
  .jp-result-row { align-items: flex-start; gap: 12px; }
  .jp-result-main { flex-basis: 100%; }
  .jp-result-chips { justify-content: flex-start; }
  .jp-statement { padding: 26px 24px; }
  .jp-statement p { font-size: 19px; }
}

/* ── Waitlist email capture (anon launch, 2026-07-08) ─────────────────────────
   One-field capture on the job pages' final block: Pro is not open yet, so the
   open ask is an email. Markup in vet/source/monitor; behavior in
   web/js/waitlist.js. */
.jp-waitlist .jp-wl-form { display: flex; gap: 10px; justify-content: center; max-width: 440px; margin: 26px auto 0; }
.jp-wl-input { flex: 1; min-width: 0; box-sizing: border-box; font-family: var(--font-sans); font-size: 15px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 9999px; padding: 12px 18px; transition: border-color .15s ease, box-shadow .15s ease; }
.jp-wl-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(200,16,46,.12); }
.jp-wl-input::placeholder { color: var(--text-3); }
.jp-wl-status { min-height: 18px; font-size: 13.5px; line-height: 1.5; margin: 10px auto 0; max-width: 440px; }
.jp-wl-status.error { color: var(--brand); }
.jp-wl-done { font-size: 15.5px; font-weight: 600; color: var(--text); margin: 24px auto 0; max-width: 440px; }
.jp-wl-fine { font-size: 13px; color: var(--text-3); margin: 14px auto 0; max-width: 440px; line-height: 1.55; }
/* .jp-final-cta p (0,1,1) outweighs the bare class; restate inside the band so
   the fine note keeps its size there too. */
.jp-final-cta .jp-wl-fine { font-size: 13px; color: var(--text-3); margin: 14px auto 0; max-width: 440px; }
.jp-wl-fine a { color: var(--text); font-weight: 600; text-decoration: none; }
.jp-wl-fine a:hover { color: var(--brand); }
.jp-waitlist.is-done .jp-wl-form, .jp-waitlist.is-done .jp-wl-status { display: none; }
@media (max-width: 480px) {
  .jp-waitlist .jp-wl-form { flex-direction: column; }
}

/* ── In-band waitlist (vet/source, 2026-07-08) ────────────────────────────────
   The Pro band's ask IS the waitlist, so the email capture lives inside the
   dark band instead of stacking a second CTA block under it. A hairline
   divider separates it from the pro cards; type and spacing follow the band. */
.jp-band-waitlist {
  /* attached to the Pro cards above it (founder 7/9): no divider, tight gap */
  max-width: 880px; margin: 26px auto 0; padding-top: 0;
}
.jp-band-waitlist h3 {
  font-family: var(--font-sans); font-size: 21px; font-weight: 600;
  letter-spacing: -0.015em; color: #fff; line-height: 1.2;
}
.jp-band-waitlist > p { font-size: 15px; color: rgba(255, 255, 255, 0.62); line-height: 1.55; max-width: 560px; margin-top: 10px; }
.jp-band-waitlist .jp-wl-form { justify-content: flex-start; margin: 22px 0 0; }
.jp-band-waitlist .jp-wl-input { background: #fff; border-color: transparent; padding: 11px 16px; }
/* keep the dark-band capture compact: the email pill should hug its
   placeholder, not stretch to double the button's width */
.jp-band-waitlist .jp-wl-form { max-width: 400px; }
.jp-band-waitlist .jp-wl-status { margin: 10px 0 0; color: rgba(255, 255, 255, 0.7); }
.jp-band-waitlist .jp-wl-status.error { color: #ff8794; }
.jp-band-waitlist .jp-wl-done { margin: 22px 0 0; color: #fff; }
.jp-band-waitlist .jp-wl-fine { margin: 14px 0 0; color: rgba(255, 255, 255, 0.5); max-width: 520px; }
.jp-band-waitlist .jp-wl-fine a { color: #fff; }
.jp-band-waitlist .jp-wl-fine a:hover { color: rgba(255, 255, 255, 0.75); }

/* ── Demo-data note (source results, 2026-07-08) ──────────────────────────────
   Sits directly under the example results so the fictional carriers are
   labeled where they appear, not only in the page-footer line. */
.jp-demo-note {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
  max-width: 1040px; margin-top: 12px; letter-spacing: 0;
}
.jp-demo-note.jp-on-dark-note { color: rgba(255,255,255,0.55); margin-left: auto; margin-right: auto; text-align: center; }

/* evidence row (source) — mirrors the live result-row anatomy */
.jp-ev-stat { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; min-width: 72px; }
.jp-ev-stat b { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; }
.jp-ev-stat small { font-size: 11px; color: var(--text-3); text-align: center; line-height: 1.3; }

/* proof-of-vetting export page (monitor) */
.jp-proof-page { max-width: 340px; flex-shrink: 0; }

/* no-ads comparison graphic (source) */
.jp-na-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.jp-na-col { border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; background: var(--bg); }
.jp-na-them { background: var(--bg-alt); }
.jp-na-h {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px;
}
.jp-na-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.jp-na-row:first-of-type { border-top: none; }
.jp-na-badge {
  flex-shrink: 0; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #fdf3d7; color: #7a5b00;
}
.jp-na-line { height: 8px; border-radius: 4px; background: var(--border); flex: 1; }
.jp-na-line-w45 { max-width: 45%; }
.jp-na-line-w52 { max-width: 52%; }
.jp-na-line-w60 { max-width: 60%; }
.jp-na-x, .jp-na-ck { width: 20px; height: 20px; flex-shrink: 0; margin-left: auto; }
.jp-na-x { color: var(--brand); }
.jp-na-ck { color: #217a3b; }
.jp-na-x svg, .jp-na-ck svg { width: 100%; height: 100%; }
.jp-na-cap { margin-top: 14px; font-size: 13px; color: var(--text-2); }
.jp-na-them .jp-na-cap { text-decoration: none; }
@media (max-width: 720px) { .jp-na-compare { grid-template-columns: 1fr; } }

/* evidence row polish (source) */
.jp-results .jp-result-row { padding: 22px 26px; }
.jp-ev-open {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600;
  color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; white-space: nowrap;
}

/* waitlist fine print: balanced wrap (source + monitor bands) */
.jp-wl-fine, .jp-band-waitlist p, .jp-final-cta p { text-wrap: balance; }

/* A product shot that FOLLOWS a ranking list (monitor's early-warning section)
   needs the gap the list's own rows don't provide: .jp-rank-item pads its last
   row 20px and stops, so the framed figure would otherwise sit almost flush
   against the final step. Matches the 34px .jp-close leaves below a section. */
.jp-rank-list + .jp-shot { margin-top: 34px; }
.jp-ew-compare + .jp-shot { margin-top: 34px; }

/* ---------- early-warning comparison (monitor, 2026-08-06) ----------
   Replaced the 01/02/03 step walk: two rows, one mechanism — what the
   authority record shows vs when fleetfax writes. The row label column uses
   the mono eyebrow register; the fleetfax row's label is brand red. */
.jp-ew-compare { max-width: 760px; margin-top: 8px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.jp-ew-row { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 16px; padding: 18px 22px; }
.jp-ew-row + .jp-ew-row { border-top: 1px solid var(--border); }
.jp-ew-who {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
  padding-top: 2px;
}
.jp-ew-us .jp-ew-who { color: var(--brand); }
.jp-ew-us { background: var(--bg-alt); }
.jp-ew-what { font-size: 14px; color: var(--text-2); line-height: 1.55; }
.jp-ew-what b { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  .jp-ew-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ranking integrity callout (source) — the "that is the entire list" statement,
   pulled out of the numbered criteria for its own beat. max-width MATCHES
   .jp-rank-list (760px, above): both are auto-centered children of the same
   .jp-module, so equal widths give equal left/right edges — a narrower
   640px box centered the same way drifted off the list's column and read as
   misaligned (founder screenshot, 2026-08-05). */
.jp-rank-callout {
  max-width: 760px; margin: 26px auto 0; padding: 18px 22px;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px;
  font-size: 15px; line-height: 1.55; color: var(--text-2);
}
.jp-rank-callout b { color: var(--text); }