/* ============================================================================
   PANTEREX — THE PUBLIC SHELL
   Homepage, and the reusable editorial shell every content/legal/SEO page uses.

   It shares px-optic.css: the same type scale, the same colour semantics, the
   same hairline discipline. The public promise has to look like the software the
   customer actually enters, so there is no separate "marketing" design language.

   WHAT THIS REPLACES
     The neon era — pink/cyan aurora, #e8ff7f glow ticker, glassmorphic cards,
     "Enter the Jungle", a SOLANA/EVM hero switch, and a PULSE 0-100 score that
     has no canonical owner in the codebase (getPulse() returns an observation
     COUNT). None of it survives.
   ============================================================================ */

.pxp { background: var(--nx-obsidian); color: var(--nx-bone); font-family: var(--nx-sans);
  -webkit-font-smoothing: antialiased; }
.pxp-wrap { max-width: 1440px; margin: 0 auto; padding: 0 40px; }

/* ── header ───────────────────────────────────────────────────────────────────
   Engineered, not a SaaS nav bar. The mark, the network it runs on, and one way in. */
.pxp-head { position: sticky; top: 0; z-index: 40; background: rgba(8,9,11,.86);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--o-hair); }
.pxp-head-in { display: flex; align-items: center; gap: 26px; height: 66px; }
.pxp-mark { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.pxp-mark img { display: block; height: 26px; width: auto; }
.pxp-mark b { font-family: var(--nx-sans); font-weight: 600; font-size: 15px; letter-spacing: .17em;
  color: var(--nx-bone-hi); }
.pxp-net { font-family: var(--nx-mono); font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--nx-ash); padding-left: 14px; border-left: 1px solid var(--o-hair); flex: none; }
.pxp-net i { color: var(--nx-healthy); font-style: normal; margin-left: 6px; }
.pxp-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pxp-nav a { font-size: 13px; color: var(--nx-ash-2); text-decoration: none; padding: 8px 13px;
  border-radius: 2px; transition: color .16s ease; }
.pxp-nav a:hover { color: var(--nx-bone-hi); }
.pxp-nav a:focus-visible { outline: 1px solid var(--nx-tungsten); outline-offset: -2px; }
.pxp-burger { display: none; }

/* ── HERO ─────────────────────────────────────────────────────────────────────
   ~40% message, ~60% intelligence field. The graphic has to carry enough weight
   that the product feels real before the visitor finishes reading. */
.pxh { border-bottom: 1px solid var(--o-hair); overflow: hidden; }
.pxh-in { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  align-items: center; gap: 40px; min-height: min(70vh, 660px); padding: 34px 0 38px; }
.pxh-stage { align-self: center; }
.pxh-msg { min-width: 0; }
.pxh-eyebrow { display: flex; align-items: center; gap: 11px; font-family: var(--nx-mono);
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--nx-ash-2);
  margin-bottom: 22px; }
.pxh-eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--nx-tungsten); flex: none; }
.pxh-h1 { font-family: var(--nx-sans); font-weight: 600; font-size: clamp(42px, 5.6vw, 88px);
  line-height: .95; letter-spacing: -.036em; color: var(--nx-bone-hi); margin: 0; text-wrap: balance; }
.pxh-h1 em { font-style: normal; color: var(--nx-ash-2); }
.pxh-say { font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.58; color: var(--nx-ash-2);
  margin: 24px 0 0; max-width: 46ch; }
.pxh-say b { color: var(--nx-bone); font-weight: 500; }
.pxh-acts { display: flex; align-items: center; gap: 18px; margin-top: 34px; flex-wrap: wrap; }

/* ── the trust rail: verified truths, not icons ───────────────────────────── */
.pxh-truth { display: flex; margin-top: 40px; border-top: 1px solid var(--o-hair); padding-top: 18px; }
.pxh-truth > * { padding: 0 16px; border-left: 1px solid var(--o-hair); }
.pxh-truth > *:first-child { padding-left: 0; border-left: 0; }
.pxh-truth b { display: block; font-family: var(--nx-mono); font-size: 12.5px; color: var(--nx-bone-hi);
  letter-spacing: -.01em; margin-bottom: 4px; }
.pxh-truth span { display: block; font-size: 11px; line-height: 1.4; color: var(--nx-ash); }

/* ── the stage ─────────────────────────────────────────────────────────────── */
.pxh-stage { position: relative; min-width: 0; }
.pxh-stage-in { position: relative; }
.pxh-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pxh-grid { stroke: rgba(255,255,255,.055); stroke-width: 1; }

/* Everything starts unresolved and is revealed by the sequence. The transitions are
   the motion — there is no keyframe loop anywhere in the stage. */
.pxh-node, .pxh-ev, .pxh-checks, .pxh-guard { opacity: 0; transition: opacity .6s ease; }
.pxh-trace { fill: none; stroke: var(--px-observed); stroke-width: 2; opacity: 1;
  stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.pxh-trace.pxh-inf { stroke: var(--px-inferred); stroke-dasharray: 4 4; stroke-dashoffset: 0;
  opacity: 0; transition: opacity .7s ease; }
.pxh-trace.pxh-out { stroke: var(--nx-tungsten); }

.pxh-dot { fill: var(--nx-obsidian); stroke-width: 2; }
.pxh-dot-focus { stroke: var(--nx-tungsten); fill: rgba(232,163,61,.28); }
.pxh-dot-obs   { stroke: var(--px-observed); fill: rgba(63,212,232,.30); }
.pxh-dot-inf   { stroke: var(--px-inferred); fill: rgba(155,123,240,.34); }
.pxh-ring { fill: none; stroke: var(--nx-tungsten); stroke-width: 1.25; opacity: .6;
  stroke-dasharray: 3 6; }
.pxh-hex { fill: rgba(155,123,240,.12); stroke: var(--px-inferred); stroke-width: 2; }
.pxh-box { fill: rgba(232,163,61,.13); stroke: var(--nx-tungsten); stroke-width: 1.6; }

.pxh-k { font-family: var(--nx-mono); font-size: 13px; letter-spacing: .2em; fill: var(--nx-ash-2);
  text-anchor: middle; }
.pxh-addr { font-family: var(--nx-mono); font-size: 14.5px; fill: var(--nx-bone); text-anchor: middle; }
.pxh-ev { font-family: var(--nx-mono); font-size: 15px; letter-spacing: .16em; fill: var(--px-observed);
  text-anchor: middle; }
.pxh-ev-inf { fill: var(--px-inferred); font-size: 13px; }
.pxh-auth-v { font-family: var(--nx-mono); font-size: 21px; letter-spacing: .1em;
  fill: var(--nx-tungsten); text-anchor: middle; }

/* The boundary is a BAND, not a hairline — a threshold with width reads as something
   an entry has to get through. */
.pxh-guard-band { fill: rgba(63,169,106,.045); }
.pxh-guard-l { stroke: var(--nx-healthy); stroke-width: 1; opacity: .55; stroke-dasharray: 1 6; }
.pxh-guard-k { font-family: var(--nx-mono); font-size: 17px; letter-spacing: .26em; fill: var(--nx-healthy); }
.pxh-guard-s { font-family: var(--nx-mono); font-size: 12px; letter-spacing: .17em; fill: var(--nx-ash-2); }
.pxh-chk-k { font-family: var(--nx-mono); font-size: 12px; letter-spacing: .19em; fill: var(--nx-ash); }
.pxh-chk-v { font-family: var(--nx-mono); font-size: 15.5px; fill: var(--nx-bone-hi); }

/* the sequence: each step turns the next layer on and leaves it on */
.pxh-stage[data-at="observe"]   .pxh-w1,
.pxh-stage[data-at="buy"]       .pxh-w1,
.pxh-stage[data-at="token"]     .pxh-w1,
.pxh-stage[data-at="converge"]  .pxh-w1,
.pxh-stage[data-at="guard"]     .pxh-w1,
.pxh-stage[data-at="authority"] .pxh-w1,
.pxh-stage[data-at="rest"]      .pxh-w1 { opacity: 1; }
.pxh-stage[data-at="buy"]       [data-step="buy"],
.pxh-stage[data-at="token"]     [data-step="buy"],
.pxh-stage[data-at="converge"]  [data-step="buy"],
.pxh-stage[data-at="guard"]     [data-step="buy"],
.pxh-stage[data-at="authority"] [data-step="buy"],
.pxh-stage[data-at="rest"]      [data-step="buy"] { opacity: 1; stroke-dashoffset: 0; }
.pxh-stage[data-at="token"]     [data-step="token"],
.pxh-stage[data-at="converge"]  [data-step="token"],
.pxh-stage[data-at="guard"]     [data-step="token"],
.pxh-stage[data-at="authority"] [data-step="token"],
.pxh-stage[data-at="rest"]      [data-step="token"] { opacity: 1; }
.pxh-stage[data-at="converge"]  [data-step="converge"],
.pxh-stage[data-at="guard"]     [data-step="converge"],
.pxh-stage[data-at="authority"] [data-step="converge"],
.pxh-stage[data-at="rest"]      [data-step="converge"] { opacity: 1; stroke-dashoffset: 0; }
.pxh-stage[data-at="guard"]     [data-step="guard"],
.pxh-stage[data-at="authority"] [data-step="guard"],
.pxh-stage[data-at="rest"]      [data-step="guard"] { opacity: 1; stroke-dashoffset: 0; }
.pxh-stage[data-at="authority"] [data-step="authority"],
.pxh-stage[data-at="rest"]      [data-step="authority"] { opacity: 1; stroke-dashoffset: 0; }
/* the resolved frame, used off-screen and under reduced motion */
.pxh-stage[data-resolved="1"] .pxh-node,
.pxh-stage[data-resolved="1"] .pxh-ev,
.pxh-stage[data-resolved="1"] .pxh-checks,
.pxh-stage[data-resolved="1"] .pxh-guard,
.pxh-stage[data-resolved="1"] .pxh-trace { opacity: 1; stroke-dashoffset: 0; }
.pxh-stage[data-resolved="1"] .pxh-trace.pxh-inf { opacity: .85; }

/* ── the mobile sequence ─────────────────────────────────────────────────────
   The same model, read top to bottom. Hidden on desktop, where the field is better. */
.pxh-seq { display: none; }
.pxh-seq-r { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center;
  gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--o-hair); }
.pxh-seq-r:last-child { border-bottom: 0; }
.pxh-seq-g { width: 26px; height: 26px; display: grid; place-items: center; }
.pxh-seq-g i { display: block; width: 11px; height: 11px; border: 1px solid var(--px-observed);
  border-radius: 50%; font-style: normal; }
.pxh-seq-r[data-k="token"] .pxh-seq-g i { border-color: var(--px-inferred); transform: rotate(45deg);
  border-radius: 0; }
.pxh-seq-r[data-k="guard"] .pxh-seq-g i { border-color: var(--nx-healthy); border-radius: 0;
  width: 3px; height: 22px; border-width: 0 1px; }
.pxh-seq-r[data-k="authority"] .pxh-seq-g i { border-color: var(--nx-tungsten);
  background: var(--nx-tungsten-veil); border-radius: 0; }
.pxh-seq-k { display: block; font-family: var(--nx-mono); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--nx-ash); margin-bottom: 3px; }
.pxh-seq-v { display: block; font-size: 13.5px; color: var(--nx-bone-hi); }
.pxh-seq-t { font-family: var(--nx-mono); font-size: 10.5px; color: var(--px-unknown); white-space: nowrap; }

/* the stage names itself, so it can never be mistaken for live trading */
.pxh-readout { display: flex; align-items: baseline; gap: 14px; margin-top: 10px;
  padding-top: 12px; border-top: 1px solid var(--o-hair); }
.pxh-readout-k { font-family: var(--nx-mono); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--px-unknown); flex: none; }
.pxh-readout-v { font-size: 12.5px; color: var(--nx-ash-2); min-height: 1.4em; }

/* ── STORY SECTIONS ──────────────────────────────────────────────────────────
   The homepage is one authored narrative, not a feature grid. Each section is a
   question the visitor is actually asking at that point in the page. */
.pxp-sec { border-bottom: 1px solid var(--o-hair); padding: 62px 0 58px; }
.pxp-q { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
/* The heading sat alone on the left with the lede beneath it, leaving the right half of a 1440
   viewport empty on every section. They share the row now. */
.pxp-sec-head { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: 48px; align-items: end; }
.pxp-sec-head .pxp-lede { margin-top: 0; padding-bottom: 4px; }
@media (max-width: 900px) { .pxp-sec-head { grid-template-columns: 1fr; gap: 18px; }
  .pxp-sec-head .pxp-lede { padding-bottom: 0; } }
.pxp-q-n { font-family: var(--nx-mono); font-size: 10px; letter-spacing: .2em; color: var(--px-unknown); }
.pxp-q-k { font-family: var(--nx-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--nx-ash); }
.pxp-h2 { font-family: var(--nx-sans); font-weight: 600; font-size: clamp(26px, 3vw, 40px);
  line-height: 1.06; letter-spacing: -.024em; color: var(--nx-bone-hi); margin: 0; max-width: 20ch;
  text-wrap: balance; }
.pxp-lede { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--nx-bone);
  margin: 18px 0 0; max-width: 58ch; }
.pxp-lede b { color: var(--nx-bone); font-weight: 500; }
.pxp-split { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 56px;
  align-items: start; margin-top: 40px; }
.pxp-split-r { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }

/* named systems: the vocabulary the product actually uses */
/* Not four cards — one sequence. A single rail runs through them, each carries its position, and
   the boxes are gone. The relationship between the stages is the information. */
.pxp-sys { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 38px; position: relative; }
.pxp-sys::before { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 1px;
  background: var(--o-hair-hi); }
.pxp-sys > * { padding: 26px 26px 4px 0; min-width: 0; position: relative; }
.pxp-sys > *::before { content: ''; position: absolute; top: 1px; left: 0; width: 9px; height: 9px;
  border: 1px solid var(--nx-tungsten); background: var(--nx-obsidian); }
.pxp-sys > *:nth-child(n+2)::before { border-color: var(--o-hair-hi); }
.pxp-sys-n { display: block; font-family: var(--nx-mono); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--nx-bone-hi); margin-bottom: 9px; }
.pxp-sys-d { display: block; font-size: 13px; line-height: 1.6; color: var(--nx-ash-2); max-width: 30ch; }
@media (max-width: 720px) {
  .pxp-sys { grid-template-columns: 1fr; }
  .pxp-sys::before { left: 4px; right: auto; top: 5px; bottom: 12px; width: 1px; height: auto; }
  .pxp-sys > * { padding: 4px 0 22px 26px; }
  .pxp-sys > *::before { top: 5px; }
}

/* ── pricing: code truth only ─────────────────────────────────────────────── */
.pxp-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0;
  margin-top: 36px; border: 1px solid var(--o-hair); }
.pxp-tier { padding: 26px 24px; border-left: 1px solid var(--o-hair); }
.pxp-tier:first-child { border-left: 0; }
.pxp-tier-n { font-family: var(--nx-mono); font-size: 12px; letter-spacing: .24em; color: var(--nx-bone-hi);
  text-transform: uppercase; }
.pxp-tier-f { font-family: var(--nx-mono); font-variant-numeric: tabular-nums; font-size: 38px;
  line-height: 1; letter-spacing: -.03em; color: var(--nx-bone-hi); margin: 18px 0 6px; }
.pxp-tier-u { font-family: var(--nx-mono); font-size: 10px; letter-spacing: .18em; color: var(--nx-ash);
  text-transform: uppercase; }
.pxp-tier-w { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--o-hair);
  font-size: 13px; color: var(--nx-bone); }
.pxp-tier-w span { display: block; font-size: 11.5px; color: var(--nx-ash); margin-top: 4px; }

/* ── founder note ─────────────────────────────────────────────────────────── */
.pxp-note { max-width: 62ch; }
.pxp-note p { font-size: 16px; line-height: 1.68; color: var(--nx-bone); margin: 0 0 18px; }
.pxp-note blockquote { margin: 26px 0; padding-left: 22px; border-left: 1px solid var(--nx-tungsten);
  font-size: clamp(18px, 1.8vw, 23px); line-height: 1.42; color: var(--nx-bone-hi);
  letter-spacing: -.012em; }

/* ── closing action ───────────────────────────────────────────────────────── */
.pxp-end { padding: 96px 0 104px; text-align: center; }
.pxp-end .pxp-h2 { max-width: none; margin: 0 auto; }
.pxp-end .pxh-acts { justify-content: center; }

/* ── risk strip + footer ──────────────────────────────────────────────────── */
.pxp-risk { border-top: 1px solid var(--o-hair); background: rgba(229,72,77,.035); }
.pxp-risk-in { display: flex; align-items: flex-start; gap: 16px;
  padding-top: 16px; padding-bottom: 16px; }
.pxp-risk-k { font-family: var(--nx-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--nx-danger); flex: none; padding-top: 2px; }
.pxp-risk-t { font-size: 12px; line-height: 1.6; color: var(--nx-ash-2); max-width: 100ch; }
.pxp-risk-t a { color: var(--nx-bone); }

.pxp-foot { border-top: 1px solid var(--o-hair); padding: 46px 0 40px; }
.pxp-foot-g { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 34px; }
.pxp-foot-b p { font-size: 12.5px; line-height: 1.6; color: var(--nx-ash); margin: 14px 0 0; max-width: 34ch; }
.pxp-foot h4 { font-family: var(--nx-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--px-unknown); margin: 0 0 14px; font-weight: 400; }
.pxp-foot ul { list-style: none; margin: 0; padding: 0; }
.pxp-foot li { margin-bottom: 9px; }
.pxp-foot li a { font-size: 13px; color: var(--nx-ash-2); text-decoration: none; }
.pxp-foot li a:hover { color: var(--nx-bone-hi); }
.pxp-foot-e { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 38px;
  padding-top: 20px; border-top: 1px solid var(--o-hair); font-family: var(--nx-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--px-unknown); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────────
   Mobile is a different composition. The hero becomes headline → action → a
   COMPACT sequence, because the full field at 390px is unreadable and shrinking
   it would just make it unreadable and small. */
@media (max-width: 1080px) {
  .pxh-in { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding: 44px 0 52px; }
  .pxp-split, .pxp-split-r { grid-template-columns: 1fr; gap: 34px; }
  .pxp-foot-g { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 900px) {
  /* The wide field cannot survive a phone. It is replaced — not scaled — by a compact
     vertical sequence that still answers who/what/why/when/where/how. */
  .pxh-svg { display: none; }
  .pxh-seq { display: block; }
}
/* The primary nav needs ~860px alongside the mark and the sign-in action. Hiding it only
   below 760 left the action hanging 23px past the viewport on every content page at tablet
   width. The links all remain in the footer, which is why hiding them here is safe. */
@media (max-width: 900px) {
  .pxp-nav { display: none; }
  .pxp-head-in .px-o-act { margin-left: auto; }
}
@media (max-width: 760px) {
  .pxp-wrap { padding: 0 20px; }
  .pxp-burger { display: inline-flex; margin-left: auto; }
  .pxp-sec { padding: 56px 0; }
  .pxh-truth { flex-wrap: wrap; row-gap: 16px; }
  .pxh-truth > * { flex: 1 1 46%; padding: 0 12px; }
  .pxh-truth > *:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pxh-acts { gap: 12px; }
  .pxh-acts .px-o-act { width: 100%; justify-content: center; }
  .pxp-sys > * { flex: 1 1 100%; padding: 15px 0; border-left: 0; }
  .pxp-tiers { grid-template-columns: 1fr; }
  .pxp-tier { border-left: 0; border-top: 1px solid var(--o-hair); }
  .pxp-tier:first-child { border-top: 0; }
  .pxp-risk-in { flex-direction: column; gap: 8px; }
  .pxp-end { padding: 64px 0 72px; }
}
@media (max-width: 460px) {
  .pxp-wrap { padding: 0 15px; }
  .pxh-truth > * { flex: 1 1 100%; padding-left: 0; border-left: 0; }
  .pxp-foot-g { grid-template-columns: 1fr; }
  /* At 320 the mark, the network chip and the sign-in action cannot share a row —
     the action overflowed by 17px. The network is stated in the hero eyebrow and
     again in the footer, so the chip is the one that goes. */
  .pxp-head-in { gap: 12px; height: 58px; }
  .pxp-net { display: none; }
  .pxp-mark b { font-size: 13.5px; letter-spacing: .13em; }
  .pxp-mark img { height: 22px; }
  .pxp-head-in .px-o-act { padding: 7px 11px; font-size: 12px; }
}

/* ============================================================================
   THE EDITORIAL SHELL
   One reusable treatment for every content, legal and SEO page. The point is
   that these pages are NOT individually designed: they inherit measure, rhythm
   and type from here, so a visitor moving from the homepage to a legal page
   stays inside the same product.
   ============================================================================ */
.pxc-doc { max-width: 1440px; margin: 0 auto; padding: 56px 40px 72px; }
.pxc-doc > * { max-width: 74ch; }
.pxc-doc h1 { font-family: var(--nx-sans); font-weight: 600; font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.04; letter-spacing: -.026em; color: var(--nx-bone-hi); margin: 0 0 22px;
  max-width: 22ch; text-wrap: balance; }
.pxc-doc h2 { font-family: var(--nx-sans); font-weight: 600; font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.16; letter-spacing: -.018em; color: var(--nx-bone-hi); margin: 52px 0 16px;
  padding-top: 22px; border-top: 1px solid var(--o-hair); max-width: 26ch; }
.pxc-doc h3 { font-family: var(--nx-sans); font-weight: 600; font-size: 17px; line-height: 1.3;
  color: var(--nx-bone-hi); margin: 32px 0 10px; letter-spacing: -.01em; }
.pxc-doc h4 { font-family: var(--nx-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--nx-ash); margin: 26px 0 10px; font-weight: 400; }
.pxc-doc p, .pxc-doc li { font-size: 15px; line-height: 1.72; color: var(--nx-bone); }
.pxc-doc p { margin: 0 0 17px; }
.pxc-doc ul, .pxc-doc ol { margin: 0 0 20px; padding-left: 20px; }
.pxc-doc li { margin-bottom: 8px; }
.pxc-doc li::marker { color: var(--px-unknown); }
.pxc-doc a { color: var(--nx-bone-hi); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--nx-gunmetal-2); }
.pxc-doc a:hover { text-decoration-color: var(--nx-tungsten); }
.pxc-doc strong, .pxc-doc b { color: var(--nx-bone-hi); font-weight: 500; }
.pxc-doc code { font-family: var(--nx-mono); font-size: 12.5px; color: var(--px-observed);
  background: var(--o-cell); padding: 2px 6px; border: 1px solid var(--o-hair); }
.pxc-doc hr { border: 0; border-top: 1px solid var(--o-hair); margin: 40px 0; }
.pxc-doc blockquote { margin: 26px 0; padding-left: 20px; border-left: 1px solid var(--nx-tungsten);
  color: var(--nx-bone-hi); font-size: 17px; line-height: 1.5; }
.pxc-doc table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 13.5px;
  display: block; overflow-x: auto; }
.pxc-doc th { font-family: var(--nx-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--nx-ash); text-align: left; padding: 10px 14px 9px; border-bottom: 1px solid var(--o-hair);
  font-weight: 400; white-space: nowrap; }
.pxc-doc td { padding: 11px 14px; border-bottom: 1px solid var(--o-hair); color: var(--nx-bone);
  vertical-align: top; }
.pxc-doc img { max-width: 100%; height: auto; }
/* A lede paragraph directly after the title carries more weight than body copy. */
.pxc-doc h1 + p { font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.6; color: var(--nx-ash-2);
  max-width: 60ch; }
@media (max-width: 760px) { .pxc-doc { padding: 34px 20px 52px; } }
@media (max-width: 460px) { .pxc-doc { padding: 28px 15px 44px; } }

/* On a public page the telemetry rail spans the full measure rather than clustering
   at the left edge and leaving half a wide monitor empty. */
.pxp-sec > .pxp-wrap > .px-o-tele { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pxp-sec > .pxp-wrap > .px-o-tele > * { padding-top: 2px; padding-bottom: 2px; }
@media (max-width: 720px) {
  .pxp-sec > .pxp-wrap > .px-o-tele { grid-template-columns: 1fr 1fr; }
}

/* ── the verified directory ───────────────────────────────────────────────────
   A wallet here is a discrete object a visitor will act on — open it, check it,
   decide — so it earns a bounded cell. The registration marks are the same ones
   the app uses on a subject under examination. */
.vw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 0;
  border-top: 1px solid var(--o-hair); border-left: 1px solid var(--o-hair); }
.vw-w { position: relative; padding: 22px 24px 18px; border-right: 1px solid var(--o-hair);
  border-bottom: 1px solid var(--o-hair); display: flex; flex-direction: column; gap: 13px; }
.vw-w-h { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.vw-w-n { font-size: 17px; font-weight: 500; color: var(--nx-bone-hi); letter-spacing: -.012em; }
.vw-w-h .px-o-lens { margin-left: auto; }
.vw-w-b { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--nx-ash-2); flex: 1 1 auto; }
.vw-w-t { display: flex; flex-wrap: wrap; gap: 8px; }
.vw-w-t .px-o-tag { border: 1px solid var(--o-hair); padding: 3px 8px; }
.vw-w-f { display: flex; flex-direction: column; gap: 9px; padding-top: 13px;
  border-top: 1px solid var(--o-hair); }
.vw-w-f .px-o-addr { word-break: break-all; }
.vw-w-a { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: -7px; }
@media (max-width: 760px) {
  .vw-grid { grid-template-columns: 1fr; border-left: 0; }
  .vw-w { padding: 18px 0; border-right: 0; }
}

/* ── the scorecard: forensic, not promotional ─────────────────────────────────
   A matrix so outcomes are comparable down the page, and the liquidity trace on
   a shared scale so a rug and a survivor are visibly different shapes. */
.sc-h, .sc-r { display: grid; align-items: center; gap: 18px;
  grid-template-columns: 128px 104px minmax(150px, 1fr) 118px 152px; }
.sc-h { padding: 0 0 11px; border-bottom: 1px solid var(--o-hair); }
.sc-h .px-o-tag { overflow: hidden; text-overflow: ellipsis; }
.sc-r { padding: 15px 0; border-bottom: 1px solid var(--o-hair);
  border-left: 2px solid transparent; padding-left: 14px; margin-left: -14px; }
.sc-r[data-o="rug"]  { border-left-color: rgba(229,72,77,.45); }
.sc-r[data-o="win"]  { border-left-color: rgba(63,169,106,.4); }
.sc-r[data-o="flat"] { border-left-color: var(--o-hair-hi); }
.sc-r-s { font-family: var(--nx-mono); font-size: 14px; color: var(--nx-bone-hi); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; }
.sc-r-o { font-family: var(--nx-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; }
.sc-r-w { font-family: var(--nx-mono); font-size: 11px; color: var(--nx-ash); }
.sc-r-a { display: flex; gap: 4px; justify-content: flex-end; margin-right: -7px; }
/* the liquidity trace — the midpoint mark is 1x, so shrinking and growing read differently */
.sc-tr { position: relative; display: flex; align-items: center; height: 18px;
  border: 1px solid var(--o-hair); background: var(--o-cell); min-width: 0; }
.sc-tr-f { position: absolute; inset: 0 auto 0 0; }
.sc-tr-f[data-r="up"]   { background: rgba(63,169,106,.26); border-right: 1px solid var(--nx-healthy); }
.sc-tr-f[data-r="down"] { background: rgba(229,72,77,.22);  border-right: 1px solid var(--nx-danger); }
.sc-tr-m { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: var(--o-tick); }
.sc-tr-u { position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, var(--o-hair-hi) 0 1px, transparent 1px 6px); }
.sc-tr em { position: relative; z-index: 1; margin-left: auto; margin-right: 8px; font-style: normal;
  font-family: var(--nx-mono); font-size: 10px; color: var(--nx-ash-2); white-space: nowrap; }
@media (max-width: 900px) {
  .sc-h { display: none; }
  .sc-r { grid-template-columns: 1fr auto; gap: 9px 14px; padding-left: 12px; margin-left: -12px; }
  .sc-tr { grid-column: 1 / -1; grid-row: 2; }
  .sc-r-w { grid-row: 3; }
  .sc-r-a { grid-row: 3; }
}

/* ============================================================================
   LEGACY CONTENT NORMALISATION
   The 23 content, legal and SEO pages each carry their own inline <style> from
   the previous brand era. They are NOT being individually redesigned — the
   mandate is explicit about that — so this layer normalises the handful of
   patterns they share, scoped to .pxp so nothing else can be affected.

   It loads after their inline styles (px-public.js appends these stylesheets at
   the end of <head>), so equal-specificity rules win.

   WHAT IT DELIBERATELY DOES NOT DO
     It changes no text. custody.html, terms.html, privacy.html and
     risk-disclosure.html are lawyer-signed; this gives them current typography
     and chrome and leaves every word exactly as counsel approved it.
   ============================================================================ */

/* the page's own mini top bar is replaced by the real header */
.pxp > .top, .pxp > .nav-top, .pxp > .nav:first-of-type { display: none !important; }

/* measure and rhythm */
.pxp .wrap, .pxp .page, .pxp .container, .pxp .faq-section {
  max-width: 1440px; margin: 0 auto; padding: 46px 40px 64px; }
.pxp .wrap > *, .pxp .page > *, .pxp .container > * { max-width: 74ch; }

/* gradient/pink display type becomes the current display type */
.pxp h1, .pxp h2, .pxp h3 { font-family: var(--nx-sans); color: var(--nx-bone-hi);
  letter-spacing: -.02em; -webkit-text-fill-color: currentColor; background: none; }
.pxp h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; font-weight: 600;
  text-transform: none; }
.pxp h2 { font-size: clamp(20px, 2vw, 27px); line-height: 1.16; font-weight: 600; }
.pxp h3 { font-size: 17px; line-height: 1.3; font-weight: 600; }
.pxp h1 .p, .pxp h1 span, .pxp .px-clash-text {
  color: var(--nx-ash-2) !important; -webkit-text-fill-color: var(--nx-ash-2) !important;
  background: none !important; }
.pxp .sub { font-family: var(--nx-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--nx-ash); }

/* body copy */
.pxp p, .pxp li, .pxp td { font-size: 15px; line-height: 1.72; color: var(--nx-bone); }
.pxp b, .pxp strong { color: var(--nx-bone-hi); font-weight: 500; }
.pxp a { color: var(--nx-bone-hi); text-decoration-color: var(--nx-gunmetal-2); }
.pxp a:hover { text-decoration-color: var(--nx-tungsten); }

/* cards become cells: hairline bounds, hard geometry, no coloured shells */
.pxp .card, .pxp .info-box, .pxp .green-box, .pxp .red-box, .pxp .callout,
.pxp .badge-card, .pxp .faq-item, .pxp .mode-card, .pxp .doc-section, .pxp .cta-box,
.pxp .flow-step, .pxp .quote-bar {
  background: var(--o-cell) !important; border: 1px solid var(--o-hair) !important;
  border-radius: 2px !important; box-shadow: none !important; }
/* semantic edges survive — a warning must still read as one */
.pxp .red-box, .pxp .card.red { border-left: 2px solid var(--nx-danger) !important; }
.pxp .green-box, .pxp .card.green { border-left: 2px solid var(--nx-healthy) !important; }
/* NOT ultraviolet. These blocks are custody modes and policy statements — facts a document asserts,
   not conclusions PANTEREX drew. Ultraviolet means INFERRED in this system, so painting a legal
   custody disclosure with it says the opposite of what the document says. Cyan (OBSERVED) marks the
   factual, user-owned mode; a plain rule marks the rest. */
.pxp .card.pink, .pxp .card.purple { border-left: 2px solid var(--px-observed) !important; }
.pxp .info-box, .pxp .callout { border-left: 2px solid var(--px-observed) !important; }

/* tags/badges become the mono micro-label used everywhere else */
.pxp .tag, .pxp .badge, .pxp .mode-badge, .pxp .meta {
  font-family: var(--nx-mono) !important; font-size: 9.5px !important; letter-spacing: .16em !important;
  text-transform: uppercase; background: none !important; border: 1px solid var(--o-hair) !important;
  border-radius: 1px !important; padding: 3px 8px !important; color: var(--nx-ash) !important; }
/* A custody mode is not a health reading either — emerald on the CUSTODIAL mode endorsed the
   opposite of what the copy recommends. Both mode tags read as bone; the words rank them. */
.pxp .tag.green { color: var(--nx-bone-hi) !important; }
.pxp .tag.pink, .pxp .tag.purple { color: var(--nx-bone-hi) !important; }
.pxp .tag.red { color: var(--nx-danger) !important; }

/* buttons take the graded action treatment */
.pxp .cta-btn, .pxp .nav-btn, .pxp button:not(.px-o-act) {
  background: none !important; border: 1px solid var(--nx-tungsten) !important;
  color: var(--nx-tungsten) !important; border-radius: 2px !important; box-shadow: none !important;
  font-family: var(--nx-sans) !important; font-weight: 500 !important; letter-spacing: 0 !important; }

/* section headings and open accordion questions kept the retired accent */
.pxp .faq-section-title, .pxp .faq-q, .pxp .doc-section h2, .pxp .section-title {
  color: var(--nx-bone-hi) !important; -webkit-text-fill-color: currentColor !important;
  background: none !important; }
.pxp .faq-section-title, .pxp .section-title {
  font-family: var(--nx-mono) !important; font-size: 10px !important; letter-spacing: .2em !important;
  text-transform: uppercase; color: var(--nx-ash) !important; }
.pxp .faq-item[open] .faq-q, .pxp .faq-q[aria-expanded="true"] { color: var(--nx-tungsten) !important; }
.pxp input[type="search"], .pxp input[type="text"], .pxp .search-input {
  background: var(--o-cell) !important; border: 1px solid var(--o-hair) !important;
  border-radius: 2px !important; color: var(--nx-bone-hi) !important; }

/* Legacy inline grids use fixed column widths that cannot survive a phone —
   security.html's badge grid ran 84px past a 320 viewport. Collapsed at small
   widths, and every child is allowed to shrink. */
@media (max-width: 760px) {
  .pxp .badges, .pxp .faq-grid, .pxp .flow, .pxp .checklist,
  .pxp [class*="grid"], .pxp [class*="-cols"] {
    display: block !important; }
  .pxp .badge-card, .pxp .faq-item, .pxp .flow-step { width: auto !important;
    min-width: 0 !important; margin: 0 0 12px !important; }
  .pxp .flow-arrow { display: none !important; }
  .pxp * { min-width: 0; }
  .pxp img, .pxp svg, .pxp table, .pxp pre { max-width: 100% !important; }
  .pxp pre, .pxp table { overflow-x: auto; display: block; }
}

/* the retired aurora and any glow, wherever they survive */
.pxp .aurora, .pxp .px-aurora, .pxp [class*="glow"] { display: none !important; }
.pxp * { text-shadow: none !important; }

@media (max-width: 760px) {
  .pxp .wrap, .pxp .page, .pxp .container, .pxp .faq-section { padding: 30px 20px 48px; }
}
@media (max-width: 460px) {
  .pxp .wrap, .pxp .page, .pxp .container, .pxp .faq-section { padding: 24px 15px 40px; }
}