/* ============================================================================
   jp-bill-scan.css — "Price X-Ray" bill/quote ingestion → comparative options
   ----------------------------------------------------------------------------
   Reusable, self-contained component styles. Everything is scoped under .jpx so
   it can be dropped into the standalone marketing page, the How-It-Works page,
   or the Patient Passport without colliding with host styles. Ships its own
   design tokens so it renders identically regardless of host CSS.
   Block: Price X-Ray v1 (2026-07-16)
   ============================================================================ */

.jpx, .jpx *{ box-sizing:border-box; }
.jpx{
  /* consumes the shared brand layer (jp-brand.css) with identical fallbacks,
     so the component renders the same with or without the layer loaded */
  --jpx-navy:var(--jp-brand-navy,#0A2D6E); --jpx-navy-d:var(--jp-brand-navy-deep,#082452); --jpx-ink:var(--jp-brand-ink,#12233F);
  --jpx-cyan:var(--jp-brand-cyan,#00C9C0); --jpx-cyan-d:var(--jp-brand-cyan-deep,#0FA79F); --jpx-cyan-lt:var(--jp-brand-cyan-tint,#E6FAF9);
  --jpx-bg:var(--jp-brand-bg,#F5F8FC); --jpx-card:var(--jp-brand-card,#FFFFFF); --jpx-line:var(--jp-brand-line,#E4EAF3); --jpx-line-2:var(--jp-brand-line-2,#CFD9E8);
  --jpx-text:var(--jp-brand-ink,#12233F); --jpx-text-2:var(--jp-brand-ink-2,#516079); --jpx-text-3:var(--jp-brand-ink-3,#8A97AC);
  --jpx-green:var(--jp-brand-green,#0E9F6E); --jpx-green-lt:var(--jp-brand-green-tint,#E7F7F0); --jpx-green-bd:var(--jp-brand-green-line,#8AE0BF);
  --jpx-amber:var(--jp-brand-amber,#C2760A); --jpx-amber-lt:var(--jp-brand-amber-tint,#FBF1DE);
  --jpx-purple:var(--jp-brand-purple,#6C5CE0); --jpx-purple-lt:var(--jp-brand-purple-tint,#EEEBFB);
  --jpx-r:var(--jp-brand-r,14px); --jpx-r-sm:var(--jp-brand-r-sm,10px); --jpx-r-lg:var(--jp-brand-r-lg,22px);
  --jpx-sh:var(--jp-brand-shadow,0 1px 3px rgba(16,42,84,.06), 0 8px 24px rgba(16,42,84,.06));
  --jpx-sh-lg:var(--jp-brand-shadow-lg,0 24px 60px rgba(10,45,110,.16));
  font-family:var(--jp-brand-font,'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif);
  color:var(--jpx-text); line-height:1.55; -webkit-font-smoothing:antialiased;
}

/* completion stamp on the handoff pane */
.jpx-stamp-row{ display:flex; justify-content:center; margin:2px 0 10px; }
.jpx-stamp{ display:inline-grid; place-items:center; width:92px; height:92px; border-radius:50%;
  border:3px double var(--jpx-green); color:var(--jpx-green); font-size:9.5px; font-weight:900;
  text-transform:uppercase; letter-spacing:.09em; text-align:center; line-height:1.5;
  transform:rotate(-9deg); animation:jpxStamp .45s cubic-bezier(.22,.8,.32,1) .25s both; }
@keyframes jpxStamp{
  0%{ opacity:0; transform:rotate(-9deg) scale(1.9); }
  55%{ opacity:1; transform:rotate(-9deg) scale(.94); }
  100%{ opacity:1; transform:rotate(-9deg) scale(1); }
}
/* animation runs for everyone (per design intent) */

/* ── mount container ─────────────────────────────────────────────────────── */
.jpx-stage{ position:relative; background:var(--jpx-card); border:1px solid var(--jpx-line);
  border-radius:var(--jpx-r-lg); box-shadow:var(--jpx-sh); overflow:hidden; }

/* ── CONSTANT FRAME (v2.3.2) ────────────────────────────────────────────────
   The instrument never changes size between steps: fixed height, header and
   footer pinned, the body scrolls internally. CTAs stay in one place for the
   whole flow. Mobile reverts to natural height. */
.jpx.jpx-fixed .jpx-stage{ display:flex; flex-direction:column; height:clamp(600px, 76vh, 780px); }
.jpx.jpx-fixed .jpx-stage-head{ flex:none; }
.jpx.jpx-fixed .jpx-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--jpx-line-2) transparent; }
.jpx.jpx-fixed .jpx-body::-webkit-scrollbar{ width:8px; }
.jpx.jpx-fixed .jpx-body::-webkit-scrollbar-thumb{ background:var(--jpx-line-2); border-radius:999px; }
.jpx.jpx-fixed .jpx-body::-webkit-scrollbar-track{ background:transparent; }
.jpx.jpx-fixed .jpx-foot{ flex:none; box-shadow:0 -8px 18px rgba(16,42,84,.05); }
@media(max-width:640px){ .jpx.jpx-fixed .jpx-stage{ height:auto; min-height:520px; } }
.jpx-stage-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 22px; border-bottom:1px solid var(--jpx-line);
  background:linear-gradient(180deg,#fff, #FAFCFE); }
.jpx-brandmark{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:15px; color:var(--jpx-navy); letter-spacing:-.01em; }
.jpx-brandmark .jpx-glyph{ width:26px;height:26px;border-radius:8px;background:var(--jpx-navy);
  display:grid;place-items:center;color:var(--jpx-cyan);font-weight:900;font-size:15px; }
.jpx-secure{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  color:var(--jpx-green); background:var(--jpx-green-lt); border:1px solid var(--jpx-green-bd);
  padding:5px 11px; border-radius:999px; }
.jpx-secure svg{ width:13px;height:13px; }

/* step dots */
.jpx-dots{ display:flex; gap:7px; align-items:center; }
.jpx-dots i{ width:8px;height:8px;border-radius:50%;background:var(--jpx-line-2);transition:.25s; display:block; }
.jpx-dots i.on{ background:var(--jpx-cyan); box-shadow:0 0 0 3px rgba(0,201,192,.15); }
.jpx-dots i.done{ background:var(--jpx-navy); }

.jpx-body{ padding:26px 26px 24px; min-height:360px; }
@media(max-width:640px){ .jpx-body{ padding:20px 16px; } .jpx-stage-head{ padding:13px 15px; } }

/* panes (JS stepper; all rendered, non-active hidden post-mount) */
.jpx-pane{ animation:jpxFade .4s ease both; }
.jpx-pane[hidden]{ display:none; }
@keyframes jpxFade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

.jpx-h{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0 0 6px; color:var(--jpx-navy); }
.jpx-sub{ font-size:14.5px; color:var(--jpx-text-2); margin:0 0 20px; max-width:56ch; }
@media(max-width:640px){ .jpx-h{ font-size:19px; } }

/* ── STEP 0 · dropzone ───────────────────────────────────────────────────── */
.jpx-drop{ border:2px dashed var(--jpx-line-2); border-radius:var(--jpx-r);
  padding:34px 22px; text-align:center; background:#FBFDFF; cursor:pointer; transition:.18s;
  position:relative; }
.jpx-drop:hover{ border-color:var(--jpx-cyan); background:var(--jpx-cyan-lt); }
.jpx-drop.drag{ border-color:var(--jpx-cyan); background:var(--jpx-cyan-lt); transform:scale(1.005); }
.jpx-drop .ico{ width:52px;height:52px;border-radius:14px;margin:0 auto 12px; display:grid;place-items:center;
  background:var(--jpx-navy); color:#fff; }
.jpx-drop .ico svg{ width:26px;height:26px; }
.jpx-drop b{ display:block; font-size:15.5px; font-weight:700; color:var(--jpx-navy); }
.jpx-drop span{ display:block; font-size:13px; color:var(--jpx-text-3); margin-top:3px; }
.jpx-or{ text-align:center; font-size:12px; color:var(--jpx-text-3); margin:16px 0 10px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.jpx-paste{ width:100%; min-height:84px; border:1px solid var(--jpx-line-2); border-radius:var(--jpx-r-sm);
  padding:12px 14px; font-family:inherit; font-size:13.5px; color:var(--jpx-text); resize:vertical; background:#fff; }
.jpx-paste:focus{ outline:none; border-color:var(--jpx-cyan); box-shadow:0 0 0 3px rgba(0,201,192,.14); }
.jpx-samples{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; align-items:center; }
.jpx-samples .lbl{ font-size:12.5px; color:var(--jpx-text-3); font-weight:600; }
.jpx-chip{ font-size:12.5px; font-weight:600; color:var(--jpx-navy); background:#fff; border:1px solid var(--jpx-line-2);
  padding:6px 12px; border-radius:999px; cursor:pointer; transition:.15s; }
.jpx-chip:hover{ border-color:var(--jpx-cyan); background:var(--jpx-cyan-lt); }
.jpx-privacy{ font-size:12px; color:var(--jpx-text-3); margin-top:16px; display:flex; align-items:flex-start; gap:7px; }
.jpx-privacy svg{ width:14px;height:14px;flex:none;margin-top:1px; color:var(--jpx-green); }

/* ── STEP 1 · redaction ──────────────────────────────────────────────────── */
.jpx-doc{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; line-height:2.05;
  background:#0C1B33; color:#DDE7F5; border-radius:var(--jpx-r); padding:18px 20px; position:relative; overflow:hidden; }
.jpx-doc .row{ white-space:pre-wrap; }
.jpx-doc .k{ color:#7FA8D9; }
.jpx-doc .keep{ color:#6FE3D2; font-weight:600; }
.jpx-red{ position:relative; border-radius:4px; padding:0 5px; color:transparent; background:#22406B; }
.jpx-red.blk{ background:#0C1B33; color:transparent; box-shadow:inset 0 0 0 1px #22406B; }
.jpx-red.blk::after{ content:''; position:absolute; inset:0; background:#0A0F1C; border-radius:4px;
  transform:scaleX(0); transform-origin:left; animation:jpxWipe .5s ease forwards; }
@keyframes jpxWipe{ to{ transform:scaleX(1);} }
.jpx-scan{ position:absolute; left:0; right:0; height:38px; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,201,192,0), rgba(0,201,192,.22), rgba(0,201,192,0));
  animation:jpxScan 1.5s ease-in-out 2; }
@keyframes jpxScan{ 0%{ top:-40px;} 100%{ top:100%; } }
.jpx-removed{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12.5px; font-weight:700;
  color:var(--jpx-green); }
.jpx-removed svg{ width:15px;height:15px; }
.jpx-removed .tags{ display:flex; gap:6px; flex-wrap:wrap; }
.jpx-removed .tags span{ background:var(--jpx-green-lt); border:1px solid var(--jpx-green-bd); color:#0A6b4d;
  font-weight:600; font-size:11.5px; padding:2px 9px; border-radius:999px; }

/* ── STEP 2 · decode ─────────────────────────────────────────────────────── */
.jpx-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:560px){ .jpx-metrics{ grid-template-columns:1fr 1fr; } }
.jpx-metric{ background:var(--jpx-bg); border-radius:var(--jpx-r); padding:15px 16px; }
.jpx-metric .lbl{ font-size:12.5px; color:var(--jpx-text-2); font-weight:600; }
.jpx-metric .val{ font-size:26px; font-weight:800; color:var(--jpx-navy); letter-spacing:-.02em; margin-top:2px; }
.jpx-metric.flag{ background:var(--jpx-amber-lt); }
.jpx-metric.flag .lbl{ color:var(--jpx-amber); }
.jpx-metric.flag .val{ color:var(--jpx-amber); }
.jpx-decode-line{ display:flex; align-items:center; gap:8px; margin-top:16px; font-size:13px; color:var(--jpx-text-2); flex-wrap:wrap; }
.jpx-code-pill{ font-family:ui-monospace,monospace; font-size:12px; font-weight:700; background:#EEF3FA; color:var(--jpx-navy);
  border:1px solid var(--jpx-line); padding:3px 9px; border-radius:6px; }
.jpx-editrow{ margin-top:16px; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--jpx-text-2); }
.jpx-editrow a{ color:var(--jpx-cyan-d); font-weight:700; cursor:pointer; text-decoration:none; }

/* ── STEP 3 · options grid ───────────────────────────────────────────────── */
.jpx-opts{ display:flex; flex-direction:column; gap:12px; }
.jpx-opt{ border:1px solid var(--jpx-line); border-radius:var(--jpx-r); padding:16px 18px; background:#fff; transition:.18s; }
.jpx-opt:hover{ border-color:var(--jpx-line-2); box-shadow:var(--jpx-sh); }
.jpx-opt.best{ border:2px solid var(--jpx-cyan); }
.jpx-opt-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.jpx-opt-name{ font-size:16px; font-weight:800; color:var(--jpx-navy); letter-spacing:-.01em; }
.jpx-opt-loc{ font-size:12.5px; color:var(--jpx-text-3); margin-top:1px; }
.jpx-badge{ display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  background:var(--jpx-cyan-lt); color:var(--jpx-cyan-d); border:1px solid var(--jpx-green-bd); padding:2px 9px; border-radius:999px; margin-left:8px; vertical-align:2px; }
.jpx-save{ text-align:right; flex:none; }
.jpx-save .amt{ font-size:22px; font-weight:900; color:var(--jpx-green); letter-spacing:-.02em; line-height:1.05; }
.jpx-save .pct{ font-size:12.5px; color:var(--jpx-green); font-weight:700; }
.jpx-axes{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
@media(max-width:560px){ .jpx-axes{ grid-template-columns:1fr 1fr; } }
.jpx-axis{ background:var(--jpx-bg); border-radius:var(--jpx-r-sm); padding:9px 11px; }
.jpx-axis .k{ display:flex; align-items:center; gap:5px; font-size:11px; color:var(--jpx-text-3); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.jpx-axis .k svg{ width:12px;height:12px; }
.jpx-axis .v{ font-size:13.5px; font-weight:700; color:var(--jpx-ink); margin-top:3px; }
.jpx-why{ display:flex; align-items:flex-start; gap:7px; margin-top:12px; font-size:13px; color:var(--jpx-text-2);
  background:var(--jpx-purple-lt); border-radius:var(--jpx-r-sm); padding:9px 12px; }
.jpx-why svg{ width:15px;height:15px;flex:none;margin-top:1px; color:var(--jpx-purple); }
.jpx-opt-cta{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }

/* ── STEP 4 · handoff / capture ──────────────────────────────────────────── */
.jpx-hand{ text-align:center; padding:6px 0 2px; }
.jpx-hand .big{ width:60px;height:60px;border-radius:18px;margin:0 auto 14px;display:grid;place-items:center;
  background:var(--jpx-navy); color:var(--jpx-cyan); }
.jpx-hand .big svg{ width:30px;height:30px; }
.jpx-recap{ background:var(--jpx-bg); border-radius:var(--jpx-r); padding:14px 16px; margin:6px 0 16px; text-align:left; }
.jpx-recap .r{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:13.5px; border-bottom:1px solid var(--jpx-line); }
.jpx-recap .r:last-child{ border-bottom:0; }
.jpx-recap .r .k{ color:var(--jpx-text-2); }
.jpx-recap .r .v{ font-weight:700; color:var(--jpx-ink); text-align:right; }
.jpx-recap .r .v.ok{ color:var(--jpx-green); }
.jpx-capture{ display:flex; gap:8px; margin:4px 0 8px; }
.jpx-capture input{ flex:1; height:44px; border:1px solid var(--jpx-line-2); border-radius:var(--jpx-r-sm);
  padding:0 14px; font-family:inherit; font-size:14px; }
.jpx-capture input:focus{ outline:none; border-color:var(--jpx-cyan); box-shadow:0 0 0 3px rgba(0,201,192,.14); }
.jpx-fineprint{ font-size:11.5px; color:var(--jpx-text-3); margin-top:8px; }

/* ── footer / controls ───────────────────────────────────────────────────── */
.jpx-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 26px; border-top:1px solid var(--jpx-line); background:#FAFCFE; }
@media(max-width:640px){ .jpx-foot{ padding:13px 15px; } }
.jpx-btn{ font-family:inherit; font-weight:700; font-size:14.5px; border-radius:var(--jpx-r-sm); padding:11px 22px;
  cursor:pointer; border:1px solid transparent; transition:.16s; display:inline-flex; align-items:center; gap:8px; }
.jpx-btn svg{ width:16px;height:16px; }
.jpx-btn.primary{ background:var(--jpx-navy); color:#fff; }
.jpx-btn.primary:hover{ background:var(--jpx-navy-d); transform:translateY(-1px); box-shadow:0 8px 20px rgba(10,45,110,.25); }
.jpx-btn.accent{ background:var(--jpx-cyan); color:#04302D; }
.jpx-btn.accent:hover{ background:var(--jpx-cyan-d); color:#fff; transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,201,192,.3); }
.jpx-btn.ghost{ background:transparent; color:var(--jpx-text-2); border-color:var(--jpx-line-2); }
.jpx-btn.ghost:hover{ border-color:var(--jpx-navy); color:var(--jpx-navy); }
.jpx-btn.link{ background:none; border:none; color:var(--jpx-text-3); padding:11px 6px; }
.jpx-btn.link:hover{ color:var(--jpx-navy); }
.jpx-btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.jpx-btn.sm{ padding:8px 15px; font-size:13px; }

/* ── overlay mode (Passport) ─────────────────────────────────────────────── */
.jpx-overlay{ position:fixed; inset:0; z-index:9000;
  background:rgba(8,20,42,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center; padding:40px 18px; overflow:auto;
  animation:jpxFade .25s ease; }
.jpx-overlay .jpx-stage{ width:100%; max-width:680px; box-shadow:var(--jpx-sh-lg); }
.jpx-x{ position:absolute; top:14px; right:16px; z-index:2; width:34px;height:34px;border-radius:50%;
  border:1px solid var(--jpx-line); background:#fff; cursor:pointer; display:grid;place-items:center; color:var(--jpx-text-2); }
.jpx-x:hover{ background:var(--jpx-bg); color:var(--jpx-navy); }

/* count-up number helper */
.jpx-count{ font-variant-numeric:tabular-nums; }

/* dark-host guard (Passport dark / Night Flight): keep the tool light-on-card
   for legibility — the component is a self-contained "instrument panel". */
@media (prefers-color-scheme: dark){
  .jpx-overlay{ background:rgba(3,8,20,.66); }
}

/* ══ v2 additions ═══════════════════════════════════════════════════════ */

/* file chip (uploaded file acknowledgement) */
.jpx-filechip{ display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  background:var(--jpx-cyan-lt); border:1px solid var(--jpx-green-bd); border-radius:999px;
  padding:7px 8px 7px 13px; font-size:13px; font-weight:700; color:var(--jpx-navy); }
.jpx-filechip svg{ width:15px;height:15px; color:var(--jpx-cyan-d); }
.jpx-filechip button{ width:22px;height:22px;border-radius:50%;border:none;background:#fff;
  display:grid;place-items:center;cursor:pointer;color:var(--jpx-text-2); }
.jpx-filechip button svg{ width:11px;height:11px; }

/* uploaded-image preview with animated redaction bars */
.jpx-imgwrap{ position:relative; border-radius:var(--jpx-r); overflow:hidden; background:#0C1B33;
  max-height:280px; display:flex; align-items:center; justify-content:center; }
.jpx-img{ width:100%; max-height:280px; object-fit:contain; display:block; opacity:.94; }
.jpx-imgbar{ position:absolute; left:6%; height:5.5%; background:#0A0F1C; border:1px solid #22406B;
  border-radius:4px; transform:scaleX(0); transform-origin:left; animation:jpxWipe .5s ease forwards; }
.jpx-imgbar.b1{ top:9%;  width:34%; animation-delay:.35s; }
.jpx-imgbar.b2{ top:17%; width:46%; animation-delay:.7s; }
.jpx-imgbar.b3{ top:25%; width:40%; animation-delay:1.05s; }
.jpx-imgtag{ position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:6px;
  background:rgba(8,20,42,.82); color:#8bf5ee; font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; }
.jpx-imgtag svg{ width:12px;height:12px; }

/* staged identifier checklist */
.jpx-checklist{ display:flex; flex-direction:column; gap:6px; margin-top:14px; }
.jpx-chk{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--jpx-text-3);
  opacity:.45; transform:translateX(-4px); transition:.3s; }
.jpx-chk .dot{ width:16px;height:16px;border-radius:50%; border:2px solid var(--jpx-line-2); flex:none;
  display:grid; place-items:center; transition:.3s; position:relative; }
.jpx-chk .t{ font-weight:700; color:var(--jpx-text-2); min-width:150px; }
.jpx-chk .st{ font-size:12px; }
.jpx-chk.on{ opacity:1; transform:none; }
.jpx-chk.on .dot{ background:var(--jpx-green); border-color:var(--jpx-green); }
.jpx-chk.on .dot::after{ content:''; width:5px;height:9px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px); }
.jpx-chk.on .st{ color:var(--jpx-green); font-weight:700; }

/* editable decode row */
.jpx-editable{ display:grid; grid-template-columns:1.4fr 1fr; gap:12px; margin-bottom:16px; }
@media(max-width:560px){ .jpx-editable{ grid-template-columns:1fr; } }
.jpx-editable .fld label{ display:block; font-size:12px; font-weight:800; color:var(--jpx-text-2);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }
.jpx-editable select, .jpx-editable .pricewrap{ width:100%; height:44px; border:1px solid var(--jpx-line-2);
  border-radius:var(--jpx-r-sm); background:#fff; font-family:inherit; font-size:14px; color:var(--jpx-ink); }
.jpx-editable select{ padding:0 12px; font-weight:700; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23516079' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px; }
.jpx-editable select:focus, .jpx-editable .pricewrap:focus-within{ outline:none; border-color:var(--jpx-cyan); box-shadow:0 0 0 3px rgba(0,201,192,.14); }
.jpx-editable .pricewrap{ display:flex; align-items:center; padding:0 12px; gap:6px; }
.jpx-editable .pricewrap span{ font-weight:800; color:var(--jpx-text-3); }
.jpx-editable .pricewrap input{ border:none; outline:none; width:100%; font-family:inherit; font-size:15px;
  font-weight:800; color:var(--jpx-navy); background:transparent; }

/* savings range bar */
.jpx-rangebar{ margin:18px 2px 4px; }
.jpx-rangebar .track{ position:relative; height:12px; border-radius:999px; background:var(--jpx-bg);
  border:1px solid var(--jpx-line); }
.jpx-rangebar .intl{ position:absolute; top:0; bottom:0; background:var(--jpx-green-lt);
  border:1px solid var(--jpx-green-bd); border-radius:999px; }
.jpx-rangebar .mark{ position:absolute; top:-7px; transform:translateX(-50%); text-align:center; }
.jpx-rangebar .mark i{ display:block; width:4px; height:26px; border-radius:3px; margin:0 auto; }
.jpx-rangebar .mark b{ display:block; font-size:10.5px; font-weight:800; margin-top:3px; white-space:nowrap; }
.jpx-rangebar .mark.median i{ background:var(--jpx-line-2); }
.jpx-rangebar .mark.median b{ color:var(--jpx-text-3); }
.jpx-rangebar .mark.you i{ background:var(--jpx-amber); }
.jpx-rangebar .mark.you b{ color:var(--jpx-amber); }
.jpx-rangebar .legend{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--jpx-text-3);
  font-weight:600; margin-top:22px; }
.jpx-rangebar .sw{ width:22px; height:10px; border-radius:999px; display:inline-block; }
.jpx-rangebar .sw.intl{ background:var(--jpx-green-lt); border:1px solid var(--jpx-green-bd); }

/* lens (re-rank) segmented control */
.jpx-lensrow{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.jpx-seg{ font-family:inherit; font-size:12.5px; font-weight:800; padding:8px 14px; border-radius:999px;
  border:1px solid var(--jpx-line-2); background:#fff; color:var(--jpx-text-2); cursor:pointer; transition:.15s; }
.jpx-seg:hover{ border-color:var(--jpx-cyan); color:var(--jpx-navy); }
.jpx-seg.on{ background:var(--jpx-navy); border-color:var(--jpx-navy); color:#fff; }

/* rank number */
.jpx-rank{ display:inline-grid; place-items:center; width:21px; height:21px; border-radius:7px;
  background:var(--jpx-bg); color:var(--jpx-text-2); font-size:12px; font-weight:900; margin-right:8px; vertical-align:1px; }
.jpx-opt.best .jpx-rank{ background:var(--jpx-cyan); color:#04302D; }

/* option meta row */
.jpx-meta-row{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:var(--jpx-text-3); font-weight:600; }

/* report download row */
.jpx-reportrow{ display:flex; align-items:center; gap:12px; margin:2px 0 14px; flex-wrap:wrap; }
.jpx-reportrow .hint{ font-size:12px; color:var(--jpx-text-3); flex:1; min-width:180px; }

/* hide "On-device" text on narrow screens (icon remains) */
@media(max-width:480px){ .jpx-secure-t{ display:none; } .jpx-secure{ padding:5px 8px; } }

/* ── THE X-RAY MACHINE (v2.3.0) ─────────────────────────────────────────────
   The bill physically enters a glowing scanner. Housing chrome → intake slot →
   film viewport (true radiograph filter on uploaded images) → staged analysis
   readouts. Animation runs for everyone (per design intent). */
.jpx-xr{ border-radius:var(--jpx-r-lg); overflow:hidden; background:linear-gradient(180deg,#0E2350,#0A1B3E);
  border:1px solid rgba(111,231,226,.22); box-shadow:0 18px 44px rgba(4,12,32,.45), 0 0 42px rgba(0,201,192,.10),
  inset 0 1px 0 rgba(255,255,255,.06); }
.jpx-xr-head{ display:flex; align-items:center; gap:9px; padding:11px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent); border-bottom:1px solid rgba(111,231,226,.14);
  font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:#8FB4E8; }
.jpx-xr-head .ttl{ color:#DCE9FB; }
.jpx-xr-head .led{ width:8px; height:8px; border-radius:50%; background:#6FE7E2;
  box-shadow:0 0 0 4px rgba(0,201,192,.18), 0 0 10px rgba(111,231,226,.9); animation:jpxLed 1.1s ease-in-out infinite; }
@keyframes jpxLed{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.jpx-xr.done .led{ animation:none; background:#34D399; box-shadow:0 0 0 4px rgba(52,211,153,.18), 0 0 10px rgba(52,211,153,.9); }
.jpx-xr-head .mode{ color:#6FE7E2; margin-left:2px; }
.jpx-xr.done .mode{ color:#34D399; }
.jpx-xr-head .unit{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:#8FB4E8; font-size:10.5px; }
.jpx-xr-head .unit svg{ width:11px; height:11px; }
/* the intake slot the document "enters" through */
.jpx-xr-slot{ position:relative; height:10px; background:#050D22; border-bottom:1px solid rgba(111,231,226,.25); }
.jpx-xr-slot i{ position:absolute; left:12%; right:12%; top:3px; height:4px; border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(111,231,226,.85),rgba(255,255,255,.9),rgba(111,231,226,.85),transparent);
  filter:blur(.5px); animation:jpxSlot 1.4s ease-in-out 2; }
@keyframes jpxSlot{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
/* film viewport */
.jpx-xr-view{ position:relative; padding:18px 18px 16px; min-height:150px; overflow:hidden;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(0,201,192,.10), transparent 55%),
    radial-gradient(rgba(140,190,255,.07) 1px, transparent 1.4px) 0 0/22px 22px,
    #071129; }
.jpx-xr-grid{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(rgba(111,231,226,.05) 1px, transparent 1px) 0 0/100% 34px; }
.jpx-xr-corner{ position:absolute; width:16px; height:16px; border:2px solid rgba(111,231,226,.55); pointer-events:none; }
.jpx-xr-corner.tl{ top:8px; left:8px; border-right:0; border-bottom:0; border-radius:4px 0 0 0; }
.jpx-xr-corner.tr{ top:8px; right:8px; border-left:0; border-bottom:0; border-radius:0 4px 0 0; }
.jpx-xr-corner.bl{ bottom:8px; left:8px; border-right:0; border-top:0; border-radius:0 0 0 4px; }
.jpx-xr-corner.br{ bottom:8px; right:8px; border-left:0; border-top:0; border-radius:0 0 4px 0; }
/* the document slides in from the slot, then "develops" into a radiograph */
.jpx-xr-docwrap{ position:relative; animation:jpxDocIn 1.05s cubic-bezier(.25,.9,.3,1) both; }
@keyframes jpxDocIn{ 0%{ transform:translateY(-115%); opacity:.4; } 60%{ opacity:1; } 100%{ transform:none; opacity:1; } }
.jpx-xr-img{ width:100%; max-height:250px; object-fit:contain; display:block; border-radius:8px;
  filter:invert(.92) hue-rotate(180deg) saturate(1.5) brightness(1.02) contrast(1.06);
  mix-blend-mode:screen; opacity:.92;
  box-shadow:0 0 34px rgba(0,201,192,.28), 0 0 6px rgba(111,231,226,.35);
  animation:jpxDevelop 1.6s ease .5s both; }
.jpx-xr-paper{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; line-height:2.1;
  color:#BFE0FF; text-shadow:0 0 10px rgba(0,201,192,.45);
  animation:jpxDevelop 1.6s ease .4s both; }
@keyframes jpxDevelop{ 0%{ filter:invert(.92) hue-rotate(180deg) saturate(1.5) brightness(1.9) contrast(.7); opacity:.5; }
  100%{ opacity:.95; } }
.jpx-xr-paper .row{ white-space:pre-wrap; }
.jpx-xr-paper .k{ color:#6E93C9; text-shadow:none; }
.jpx-xr-paper .keep{ color:#7CF3E4; font-weight:700; text-shadow:0 0 12px rgba(0,201,192,.7); }
.jpx-xr-paper .jpx-red{ background:rgba(34,64,107,.6); }
.jpx-xr-paper .jpx-red.blk{ box-shadow:inset 0 0 0 1px rgba(111,231,226,.3); }
.jpx-xr-paper .jpx-red.blk::after{ animation-delay:2.3s; }
.jpx-xr-view .jpx-imgbar{ z-index:2; }
.jpx-xr-view .jpx-imgbar.b1{ animation-delay:2.3s; } .jpx-xr-view .jpx-imgbar.b2{ animation-delay:2.65s; } .jpx-xr-view .jpx-imgbar.b3{ animation-delay:3s; }
.jpx-xr-view .jpx-scan{ animation:jpxScan 1.6s ease-in-out 3; z-index:3;
  background:linear-gradient(180deg,rgba(0,201,192,0),rgba(111,231,226,.30),rgba(0,201,192,0)); }
/* whimsy: EKG pulse running through the machine chrome */
.jpx-xr-ekg{ flex:1; min-width:40px; max-width:130px; height:18px; margin:0 6px; overflow:hidden; }
.jpx-xr-ekg polyline{ fill:none; stroke:#6FE7E2; stroke-width:1.6; stroke-linejoin:round;
  filter:drop-shadow(0 0 3px rgba(111,231,226,.8));
  stroke-dasharray:120 260; animation:jpxEkg 2.2s linear infinite; }
@keyframes jpxEkg{ to{ stroke-dashoffset:-380; } }
/* whimsy: findings ping onto the film as the beam finds them */
.jpx-xr-ping{ position:absolute; z-index:4; display:flex; align-items:center; gap:6px; opacity:0;
  transform:scale(.4); }
.jpx-xr-ping.on{ animation:jpxPing .55s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes jpxPing{ 0%{ opacity:0; transform:scale(.4);} 70%{ opacity:1; transform:scale(1.12);} 100%{ opacity:1; transform:scale(1);} }
.jpx-xr-ping .dot{ position:relative; width:22px; height:22px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:11px; font-weight:900;
  background:rgba(0,201,192,.18); border:1.5px solid rgba(111,231,226,.85); color:#7CF3E4;
  box-shadow:0 0 14px rgba(0,201,192,.5); }
.jpx-xr-ping .dot::after{ content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid rgba(111,231,226,.5); animation:jpxPingRing 1.6s ease-out infinite; }
@keyframes jpxPingRing{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(1.5); opacity:0; } }
.jpx-xr-ping .lbl{ font-family:ui-monospace,monospace; font-size:9.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:#9FE9FF; background:rgba(7,17,41,.85); border:1px solid rgba(111,231,226,.35);
  padding:3px 8px; border-radius:6px; white-space:nowrap; }
.jpx-xr-ping.warn .dot{ background:rgba(240,153,123,.16); border-color:rgba(240,153,123,.85); color:#FFC7AE;
  box-shadow:0 0 14px rgba(240,153,123,.45); }
.jpx-xr-ping.warn .dot::after{ border-color:rgba(240,153,123,.5); }
/* whimsy: photon motes drifting up through the film */
.jpx-xr-mote{ position:absolute; bottom:-10px; font-size:11px; color:rgba(111,231,226,.75); z-index:2;
  text-shadow:0 0 8px rgba(0,201,192,.8); animation:jpxMote 4.2s linear infinite; pointer-events:none; }
@keyframes jpxMote{ 0%{ transform:translateY(0); opacity:0; } 12%{ opacity:.9; } 85%{ opacity:.5; }
  100%{ transform:translateY(-190px); opacity:0; } }

/* analysis readouts — the labor illusion, typed into the machine chrome */
.jpx-xr-read{ padding:10px 16px 13px; border-top:1px solid rgba(111,231,226,.14); display:flex; flex-direction:column; gap:7px;
  background:linear-gradient(180deg,rgba(5,13,34,.5),rgba(5,13,34,.8)); }
.jpx-xr-row{ display:flex; align-items:center; gap:9px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px; color:#5F7DAB; opacity:.3; transform:translateX(-4px); transition:.35s; }
.jpx-xr-row b{ color:#9FC2ED; font-weight:700; letter-spacing:.04em; }
.jpx-xr-row .d{ color:#5F7DAB; }
.jpx-xr-row .spin{ width:13px; height:13px; flex:none; border-radius:50%; border:2px solid rgba(111,231,226,.25);
  border-top-color:#6FE7E2; animation:jpxSpin .8s linear infinite; }
@keyframes jpxSpin{ to{ transform:rotate(360deg); } }
.jpx-xr-row.on{ opacity:1; transform:none; }
.jpx-xr-row.on b{ color:#DCE9FB; }
.jpx-xr-row.on .d{ color:#7FA8D9; }
.jpx-xr-row.on .spin{ animation:none; border:none; background:#0E9F6E; position:relative; }
.jpx-xr-row.on .spin::after{ content:''; position:absolute; left:4px; top:1.5px; width:3.5px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }

/* ── THE REVEAL ──────────────────────────────────────────────────────────── */
.jpx-reveal{ position:relative; text-align:center; background:linear-gradient(160deg,#0A2D6E,#0E3877);
  border-radius:var(--jpx-r); padding:26px 20px 24px; margin-bottom:18px; overflow:hidden; }
.jpx-reveal .arc{ position:absolute; inset:auto 0 auto 0; top:8px; opacity:.9; pointer-events:none; }
.jpx-reveal .arc svg{ width:100%; max-width:340px; height:auto; display:block; margin:0 auto; }
.jpx-reveal .home{ fill:#F0997B; }
.jpx-reveal .dest{ fill:#00C9C0; opacity:0; animation:jpxDest .4s ease forwards; }
.jpx-reveal .d1{ animation-delay:.7s; } .jpx-reveal .d2{ animation-delay:1.0s; } .jpx-reveal .d3{ animation-delay:1.3s; }
@keyframes jpxDest{ to{ opacity:1; } }
.jpx-reveal .route{ fill:none; stroke:rgba(0,201,192,.55); stroke-width:1.6; stroke-dasharray:4 5;
  stroke-dashoffset:260; animation:jpxRoute 1.2s ease forwards; }
.jpx-reveal .r1{ animation-delay:.15s; } .jpx-reveal .r2{ animation-delay:.4s; } .jpx-reveal .r3{ animation-delay:.65s; }
@keyframes jpxRoute{ to{ stroke-dashoffset:0; } }
.jpx-reveal .kick{ position:relative; font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#8bf5ee; margin-top:34px; }
.jpx-reveal .amt{ position:relative; font-size:52px; font-weight:900; letter-spacing:-.03em; color:#fff; line-height:1.06;
  margin:4px 0 8px; text-shadow:0 2px 24px rgba(0,201,192,.35); }
@media(max-width:560px){ .jpx-reveal .amt{ font-size:40px; } }
.jpx-reveal .anchor{ position:relative; font-size:13.5px; color:#C6D3EA; font-weight:600; }
.jpx-reveal .anchor s{ color:#F0997B; text-decoration-thickness:2px; }
.jpx-reveal .anchor .to{ color:#8bf5ee; font-weight:700; }

/* staggered card entrance (first render only) */
.jpx-opts-stagger .jpx-opt{ animation:jpxCardIn .5s ease both; }
.jpx-opts-stagger .jpx-opt:nth-child(1){ animation-delay:1.15s; }
.jpx-opts-stagger .jpx-opt:nth-child(2){ animation-delay:1.35s; }
.jpx-opts-stagger .jpx-opt:nth-child(3){ animation-delay:1.55s; }
@keyframes jpxCardIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }

/* reduced motion: keep the meaning, drop the theater */
/* animation runs for everyone (per design intent) */


/* ══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — reduced motion (restored 2026-08-10, v2.6.0)
   v2.3.1 removed every prefers-reduced-motion gate so the experience would
   look identical on machines with Reduce Motion enabled. The cost was borne
   by users with vestibular disorders, migraine and photosensitivity — on a
   product whose readers are, by definition, dealing with a medical situation.
   This restores the protection WITHOUT the old on/off flatness: reveals land
   instantly in their final state (fill-mode forwards, single iteration), so
   nothing is ever hidden, and only the looping decorative motion stops.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
  .jpx *, .jpx *::before, .jpx *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    animation-fill-mode: forwards !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  /* purely decorative layers — remove rather than freeze mid-flight */
  .jpx .jpx-mote, .jpx .jpx-ekg, .jpx .jpx-beam,
  .jpx [class*="mote"], .jpx [class*="ekg"], .jpx [class*="beam"],
  .jpx [class*="photon"], .jpx [class*="scanline"] { display: none !important; }
  /* the instrument keeps its finished look, just without the sweep */
  .jpx .jpx-film, .jpx .jpx-viewport { opacity: 1 !important; }
}

/* ── Provenance note (2026-08-10) ──────────────────────────────────────────
   The reading half of the X-Ray is rigorous; the comparison half is still
   indicative. This note carries that distinction at the point of the claim
   rather than burying it, so the two halves of the product are consistent
   about what they know. */
.jpx-basis{margin:0 0 14px;padding:12px 15px;border-radius:12px;font-size:12.5px;line-height:1.6;
  color:var(--jpx-text-2,#c3d0e6);background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.13);border-left:3px solid rgba(0,201,192,.55)}
.jpx-basis b{color:var(--jpx-text-1,#fff);font-weight:800}
.jpx-basis a{color:#00E0D5;text-decoration:underline;text-underline-offset:2px}