/* FreightAvex Demo v3.6.0 - external stylesheet */

.fx-wrap,.fx-wrap *{box-sizing:border-box}
.fx-wrap{width:100%; max-width:720px; margin:0 auto; position:relative; border-radius:20px; scroll-margin-top:18px}
.fx-wrap::before{content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:0;
  background:conic-gradient(from 0deg, rgba(59,140,255,0) 0deg, rgba(59,140,255,.5) 55deg, rgba(47,217,139,.45) 120deg, rgba(59,140,255,0) 200deg, rgba(59,140,255,0) 360deg);
  filter:blur(11px); opacity:.5; animation:fxSpin 9s linear infinite}
@keyframes fxSpin{to{transform:rotate(360deg)}}

.fx-audit{
  --ink-900:#070B11; --ink-850:#0A0F17; --panel:#0F1826; --panel-2:#131F30;
  --line:#233249; --line-soft:#1A2637;
  --txt:#EEF3FB; --txt-dim:#8A97AD; --txt-faint:#5A6880;
  --blue:#3B8CFF; --blue-2:#7CC4FF; --green:#2FD98B; --amber:#FFB224; --red:#FF5C57;
  --ease:cubic-bezier(.22,.61,.36,1);
  position:relative; z-index:1; width:100%; padding:20px; overflow:hidden;
  border:1px solid var(--line); border-radius:22px; color:var(--txt);
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 160px),var(--ink-850);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.01),0 50px 100px -40px rgba(0,0,0,.85);
  font-family:"Space Grotesk",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.fx-audit::before{content:""; position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(125% 90% at 50% 0%,#000 40%,transparent 100%);
          mask-image:radial-gradient(125% 90% at 50% 0%,#000 40%,transparent 100%); pointer-events:none}
.fx-audit::after{content:""; position:absolute; top:-45%; left:-25%; width:55%; height:80%; z-index:0;
  background:radial-gradient(circle,rgba(59,140,255,.13),transparent 70%);
  animation:fxDrift 20s ease-in-out infinite alternate; pointer-events:none}
@keyframes fxDrift{from{transform:translate(0,0)}to{transform:translate(75%,35%)}}
.fx-audit>*{position:relative; z-index:2}

.fx-grain{position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fx-sheen{position:absolute; inset:0; z-index:4; overflow:hidden; border-radius:inherit; pointer-events:none}
.fx-sheen::after{content:""; position:absolute; top:-20%; left:0; width:55%; height:140%;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.08) 50%,transparent 65%);
  transform:translateX(-160%); animation:fxSweep 2.2s var(--ease) .4s 1}
@keyframes fxSweep{to{transform:translateX(320%)}}

/* HEADER */
.fx-head{display:flex; align-items:center; gap:11px; margin-bottom:16px}
.fx-logo{width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:12px;
  border:1px solid rgba(59,140,255,.45); background:linear-gradient(145deg,#1e416e,#0f223c);
  box-shadow:0 0 26px -8px rgba(59,140,255,.85), inset 0 1px 0 rgba(255,255,255,.12); animation:fxFloat 5.5s ease-in-out infinite}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
.fx-logo svg{width:22px; height:22px}.fx-logo-image{
  width:58px;
  height:42px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
}

.fx-logo-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.fx-brand{display:flex; flex-direction:column; gap:3px; min-width:0; line-height:1.05}
.fx-brand b{font-size:19px; font-weight:700; letter-spacing:-.35px}
.fx-brand span{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:8.5px; font-weight:500;
  color:var(--txt-faint); letter-spacing:1.8px; text-transform:uppercase}
.fx-head-right{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.fx-badge{display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid rgba(255,178,36,.32);
  border-radius:999px; color:var(--amber); background:rgba(255,178,36,.07);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px; font-weight:600; letter-spacing:1.1px; white-space:nowrap}
.fx-badge i{width:7px; height:7px; flex:none; border-radius:50%; background:currentColor; animation:fxPing 1.9s ease-out infinite}
@keyframes fxPing{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.fx-badge.real{color:var(--green); border-color:rgba(47,217,139,.32); background:rgba(47,217,139,.07)}
.fx-badge.busy{color:var(--blue-2); border-color:rgba(59,140,255,.35); background:rgba(59,140,255,.08)}
.fx-badge.err{color:var(--red); border-color:rgba(255,92,87,.35); background:rgba(255,92,87,.08)}
.fx-env{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:8px; letter-spacing:1.2px; color:var(--txt-faint); text-transform:uppercase}

/* TOOLS */
.fx-tools{display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-bottom:6px}
.fx-btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 15px;
  border:1px solid var(--line); border-radius:10px; cursor:pointer; color:var(--txt);
  background:linear-gradient(180deg,var(--panel),var(--panel-2)); font:600 12px/1.2 inherit; text-decoration:none;
  transition:border-color .2s, transform .12s, box-shadow .2s}
.fx-btn:hover{border-color:rgba(59,140,255,.55); box-shadow:0 6px 18px -12px rgba(59,140,255,.8)}
.fx-btn:active{transform:translateY(1px)}
.fx-btn[disabled]{opacity:.5; cursor:default; box-shadow:none; pointer-events:none}
.fx-btn.primary{color:#fff; border-color:transparent; background:linear-gradient(180deg,#2f7ff0,#1f5fd0)}
.fx-btn.ghost{color:var(--txt-dim); background:transparent}
.fx-btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.fx-srfile{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.fx-used-note{margin:0 0 16px; padding:10px 13px; border:1px solid rgba(47,217,139,.28); border-radius:11px;
  background:rgba(47,217,139,.06); color:var(--txt-dim); font-size:11.5px; line-height:1.55; display:none}
.fx-used-note.show{display:block}
.fx-used-note b{color:var(--txt)}
.fx-err-note{margin:0 0 16px; padding:10px 13px; border:1px solid rgba(255,92,87,.32); border-radius:11px;
  background:rgba(255,92,87,.07); color:var(--txt-dim); font-size:11.5px; line-height:1.55; display:none}
.fx-err-note.show{display:block}
.fx-err-note b{color:var(--txt)}
.fx-retry-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.fx-retry-row .fx-btn{padding:7px 12px;font-size:11px}
.fx-retry-row span{font-size:11px;color:var(--txt-dim)}


.fx-verify{margin:0 0 16px;padding:13px;border:1px solid var(--line-soft);border-radius:12px;background:linear-gradient(180deg,rgba(59,140,255,.06),rgba(255,255,255,.015))}
.fx-limits-note{margin:0 0 12px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.2px;color:var(--txt-faint);display:flex;align-items:center;gap:7px}
.fx-limits-note::before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:var(--blue-2);box-shadow:0 0 8px 1px rgba(124,196,255,.6)}
.fx-btn.small{padding:6px 11px;font-size:11px}
.fx-contract-files{margin:0 0 14px;padding:12px 13px;border:1px solid var(--line-soft);border-radius:12px;background:rgba(255,255,255,.015)}
.fx-contract-files-note{font-size:11px;line-height:1.45;color:var(--txt-dim);margin-bottom:10px}
.fx-contract-files-row{display:flex;flex-wrap:wrap;gap:8px}
.fx-contract-files-status{margin-top:9px;font-size:10.5px;color:var(--green)}
@media(max-width:600px){.fx-contract-files-row{flex-direction:column}.fx-contract-files-row .fx-btn{width:100%}}
.fx-verify-title{font-size:11px;font-weight:700;color:var(--txt);margin-bottom:8px}
.fx-verify-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fx-verify-row+.fx-verify-row{margin-top:8px}
.fx-verify input{min-width:220px;flex:1;padding:9px 11px;border:1px solid var(--line);border-radius:9px;color:var(--txt);background:var(--ink-900);font:500 11px/1.2 "IBM Plex Mono",ui-monospace,monospace;outline:none}
.fx-verify input:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(59,140,255,.12)}
.fx-verify input[disabled]{opacity:.55}
.fx-verify-status{margin-top:8px;color:var(--txt-dim);font-size:10.5px;line-height:1.45}
.fx-verify-status.ok{color:var(--green)}
.fx-verify-status.err{color:var(--red)}
@media(max-width:600px){.fx-verify-row{display:grid;grid-template-columns:1fr}.fx-verify input{min-width:0;width:100%}.fx-verify .fx-btn{width:100%}}

/* STEPS */
.fx-steps{display:none; flex-direction:column; gap:9px; margin-bottom:18px; padding:15px 16px;
  border:1px solid var(--line-soft); border-radius:13px; background:linear-gradient(180deg,rgba(255,255,255,.016),transparent)}
.fx-steps.show{display:flex}
.fx-step{display:flex; align-items:center; gap:11px; font-size:12.5px; color:var(--txt-faint); transition:color .3s}
.fx-step .dot{width:18px; height:18px; flex:none; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); font-size:10px; color:var(--txt-faint); transition:all .3s}
.fx-step.active{color:var(--txt)}
.fx-step.active .dot{border-color:var(--blue); color:var(--blue); box-shadow:0 0 0 0 rgba(59,140,255,.5); animation:fxDot 1.3s ease-out infinite}
@keyframes fxDot{0%{box-shadow:0 0 0 0 rgba(59,140,255,.5)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.fx-step.done{color:var(--txt-dim)}
.fx-step.done .dot{border-color:rgba(47,217,139,.5); color:var(--green); background:rgba(47,217,139,.08)}
.fx-step.fail{color:var(--red)}
.fx-step.fail .dot{border-color:rgba(255,92,87,.5); color:var(--red); background:rgba(255,92,87,.08)}
.fx-elapsed{color:var(--txt-faint); font-size:11px; font-variant-numeric:tabular-nums}

/* Confirmed real gap: with no loading indicator near the top of the
   widget, a visitor watching the top of the screen while a large file
   uploads/audits saw nothing change and could reasonably think the click
   didn't register. This sits directly under the header, is hidden by
   default, and appears only while an audit is actually running. */
.fx-top-loading{display:none; align-items:center; gap:10px; margin:0 0 14px; padding:9px 13px;
  border:1px solid rgba(59,140,255,.28); border-radius:11px; background:rgba(59,140,255,.07);
  color:var(--blue-2); font-size:12.5px; font-weight:600}
.fx-top-loading.show{display:flex}
.fx-top-loading-bar{position:relative; flex:none; width:64px; height:6px; overflow:hidden;
  border-radius:999px; background:rgba(255,255,255,.08)}
.fx-top-loading-bar i{position:absolute; top:0; left:-40%; width:40%; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--green)); animation:fxTopLoadingSlide 1.1s ease-in-out infinite}
@keyframes fxTopLoadingSlide{0%{left:-40%}100%{left:100%}}

/* "?" info buttons + shared popover -- explains the demo's less obvious
   terms (Potential Recovery, Findings, clean %, Severity) right where a
   visitor is looking, instead of assuming freight-audit vocabulary. */
.fx-k-label, .fx-ring-center span, .fx-stream-head span{display:inline-flex; align-items:center; gap:5px}
.fx-info-btn{flex:none; width:15px; height:15px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.04); color:var(--txt-faint);
  font-size:10px; font-weight:700; line-height:1; cursor:pointer; transition:all .15s}
.fx-info-btn:hover, .fx-info-btn[aria-expanded="true"]{border-color:var(--blue-2); color:var(--blue-2); background:rgba(59,140,255,.10)}
.fx-info-btn-sm{width:13px; height:13px; font-size:9px}
.fx-info-pop{position:fixed; z-index:80; max-width:260px; padding:11px 13px; border-radius:11px;
  border:1px solid rgba(59,140,255,.30); background:#0d1420; color:var(--txt-dim); font-size:12.5px; line-height:1.55;
  box-shadow:0 10px 30px rgba(0,0,0,.4)}
.fx-info-pop[hidden]{display:none}

/* KPI */
.fx-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.fx-tile{position:relative; padding:13px 12px; overflow:hidden; border:1px solid var(--line-soft); border-radius:13px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2)); transition:transform .3s var(--ease), border-color .3s, box-shadow .3s}
.fx-tile:hover{transform:translateY(-3px); border-color:rgba(59,140,255,.4); box-shadow:0 20px 44px -26px rgba(0,0,0,.95)}
.fx-tile.hot{border-color:rgba(59,140,255,.5); background:linear-gradient(180deg,rgba(59,140,255,.13),rgba(59,140,255,.03)); animation:fxHotGlow 3.6s ease-in-out infinite}
@keyframes fxHotGlow{0%,100%{box-shadow:0 0 26px -16px rgba(59,140,255,.55)}50%{box-shadow:0 0 42px -8px rgba(59,140,255,.78)}}
.fx-k-label{min-height:25px; color:var(--txt-faint); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9px; font-weight:600; letter-spacing:.9px; text-transform:uppercase}
.fx-k-value{margin-top:7px; color:var(--txt); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:26px; font-weight:600; letter-spacing:-.6px; font-variant-numeric:tabular-nums; white-space:nowrap}
.fx-tile.hot .fx-k-value{background:linear-gradient(92deg,#5aa2ff,#9fd4ff 55%,#8fffd0); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 12px rgba(59,140,255,.4))}
.fx-k-sub{margin-top:6px; color:var(--txt-dim); font-size:10px}

/* INSIGHTS */
.fx-insights{display:flex; align-items:center; gap:14px; margin-top:10px; padding:12px 14px;
  border:1px solid var(--line-soft); border-radius:15px; background:linear-gradient(180deg,var(--panel),var(--panel-2))}
.fx-ring{position:relative; width:66px; height:66px; flex:none}
.fx-ring svg{width:66px; height:66px; display:block}
.fx-ring-track{fill:none; stroke:rgba(255,255,255,.08); stroke-width:6}
.fx-ring-prog{fill:none; stroke:var(--green); stroke-width:6; stroke-linecap:round;
  transition:stroke-dashoffset 1.3s var(--ease) .3s; filter:drop-shadow(0 0 5px rgba(47,217,139,.6))}
.fx-ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px}
.fx-ring-center b{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; font-weight:600; color:var(--txt); font-variant-numeric:tabular-nums}
.fx-ring-center span{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:6px; letter-spacing:.6px; color:var(--txt-faint); text-transform:uppercase}
.fx-ins-sep{width:1px; align-self:stretch; background:linear-gradient(180deg,transparent,var(--line),transparent)}
.fx-ins-cell{display:flex; flex-direction:column; gap:5px; min-width:0}
.fx-ins-label{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:8.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--txt-faint)}
.fx-ins-val{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:18px; font-weight:600; color:var(--txt); font-variant-numeric:tabular-nums; white-space:nowrap}

/* SECTION HEAD */
.fx-section-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:26px 2px 10px}
.fx-section-head h3{margin:0; color:var(--txt-dim); font-size:10px; font-weight:600; letter-spacing:1.3px; text-transform:uppercase}
.fx-section-head span{color:var(--txt-faint); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9px}

/* CHART */
.fx-chart{position:relative; height:118px; overflow:hidden; padding:6px 4px 4px; border:1px solid var(--line-soft); border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.016),transparent)}
.fx-cbeam{position:absolute; top:0; bottom:0; width:90px; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(59,140,255,.13),transparent); animation:fxBeam 5s linear infinite}
@keyframes fxBeam{0%{transform:translateX(-90px)}100%{transform:translateX(720px)}}
.fx-chart svg{display:block; width:100%; height:100%; position:relative; z-index:1}
.fx-grid line{stroke:rgba(255,255,255,.05); stroke-dasharray:3 5}
.fx-line{fill:none; stroke:url(#fxLineGrad); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 3px 13px rgba(59,140,255,.6))}
.fx-peak circle{fill:var(--amber); filter:drop-shadow(0 0 6px rgba(255,178,36,.9)); transform-box:fill-box; transform-origin:center; animation:fxPulse 2.1s ease-in-out infinite}
@keyframes fxPulse{0%,100%{opacity:.5}50%{opacity:1}}
.fx-runner{fill:#fff; opacity:0; filter:drop-shadow(0 0 8px rgba(124,196,255,1))}

/* TABLE */
.fx-stream{position:relative; overflow:hidden; border:1px solid var(--line-soft); border-radius:14px; background:var(--panel)}
.fx-table-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
.fx-stream-head,.fx-row{display:grid; grid-template-columns:96px 1fr 1.5fr 98px 68px; gap:8px; align-items:center}
.fx-stream-head{min-width:640px; padding:9px 16px; border-bottom:1px solid var(--line-soft); color:var(--txt-faint);
  background:rgba(255,255,255,.012); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:8.5px; letter-spacing:.8px; text-transform:uppercase}
.fx-stream-head span:nth-child(4){text-align:right}
.fx-stream-head span:nth-child(5){text-align:right}
.fx-rows{position:relative; min-width:640px; max-height:none; overflow-y:visible}
/* v3.2.7: keep vertical scrolling on the page itself. The table already renders
   only a limited number of findings, so an inner scroll area adds no value and
   can trap wheel/touch scrolling after an anchor jump. */
.fx-scan{position:absolute; left:0; right:0; top:0; height:48px; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(59,140,255,.08) 60%,rgba(59,140,255,.18));
  border-bottom:1px solid rgba(59,140,255,.4); animation:fxScan 3.8s linear infinite}
@keyframes fxScan{0%{transform:translateY(-50px)}100%{transform:translateY(320px)}}
.fx-row{padding:11px 16px; border-bottom:1px solid rgba(255,255,255,.04); font-size:11.5px; animation:fxRowIn .5s var(--ease) both}
@keyframes fxRowIn{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
.fx-row.flagged{background:linear-gradient(90deg,rgba(255,178,36,.06),transparent 60%)}
.fx-row .id{color:var(--txt-dim); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px}
.fx-row .carrier{overflow:hidden; font-weight:500; white-space:nowrap; text-overflow:ellipsis}
.fx-row .finding{overflow:hidden; color:var(--txt-dim); white-space:nowrap; text-overflow:ellipsis}
.fx-row .rec{text-align:right; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; font-variant-numeric:tabular-nums; color:var(--amber)}
.fx-row .rec.zero{color:var(--txt-faint)}
.fx-sev{justify-self:end; display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:8px; font-weight:600; letter-spacing:.5px}
.fx-sev.high{color:var(--red); border:1px solid rgba(255,92,87,.3); background:rgba(255,92,87,.09)}
.fx-sev.medium{color:var(--amber); border:1px solid rgba(255,178,36,.3); background:rgba(255,178,36,.09)}
.fx-sev.low{color:var(--txt-dim); border:1px solid var(--line-soft); background:rgba(255,255,255,.04)}
.fx-empty{padding:34px 16px; text-align:center; color:var(--txt-dim); font-size:12.5px; line-height:1.6}
.fx-more-note{padding:9px 16px; color:var(--txt-faint); font-size:10.5px; text-align:center; border-top:1px solid var(--line-soft)}

/* FOOT */
.fx-foot{display:flex; align-items:center; gap:13px; margin-top:18px}
.fx-progress{flex:1; height:6px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.06)}
.fx-progress i{position:relative; display:block; width:0; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--blue),var(--green)); transition:width .25s linear}
.fx-progress i::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); animation:fxShimmer 2.6s linear infinite}
@keyframes fxShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.fx-stat{color:var(--txt-dim); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9.5px; white-space:nowrap}
.fx-stat b{color:var(--txt)}

/* MOBILE */
@media(max-width:600px){
  .fx-audit{padding:14px; border-radius:16px}
  .fx-head{gap:9px; margin-bottom:14px}
  .fx-logo{width:34px; height:34px; border-radius:9px} .fx-logo svg{width:18px; height:18px}
  .fx-brand b{font-size:15px} .fx-brand span{font-size:7.5px; letter-spacing:1.3px}
  .fx-badge{padding:5px 8px; font-size:7.5px; letter-spacing:.6px} .fx-badge i{width:5px; height:5px} .fx-env{font-size:7px}
  .fx-tools{display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:10px}
  .fx-btn{width:100%; padding:9px; font-size:10px}
  .fx-btn.primary{grid-column:1/-1}
  .fx-steps{padding:12px} .fx-step{font-size:11px} .fx-step .dot{width:16px; height:16px}
  .fx-kpis{grid-template-columns:repeat(3,1fr); gap:7px}
  .fx-tile{min-width:0; padding:11px 8px; border-radius:11px}
  .fx-k-label{min-height:24px; font-size:7px; letter-spacing:.5px}
  .fx-k-value{margin-top:4px; font-size:15px; letter-spacing:-.3px}
  .fx-k-sub{margin-top:3px; font-size:7px; line-height:1.25}
  .fx-insights{gap:11px; padding:12px; flex-wrap:wrap; justify-content:center}
  .fx-ins-sep{display:none}
  .fx-ins-val{font-size:15px} .fx-ins-label{font-size:7.5px}
  .fx-section-head{margin:18px 1px 8px} .fx-section-head h3{font-size:8px; letter-spacing:.9px} .fx-section-head span{font-size:7px}
  .fx-chart{height:112px; border-radius:11px}
  .fx-stream{border-radius:11px}
  .fx-stream-head,.fx-rows{min-width:520px}
  .fx-stream-head,.fx-row{grid-template-columns:74px 1fr 1.3fr 72px 52px}
  .fx-stream-head{padding:8px 10px; font-size:7px} .fx-row{padding:9px 10px; font-size:9px}
  .fx-row .id,.fx-row .rec{font-size:8px} .fx-sev{padding:2px 5px; font-size:6.5px}
  .fx-foot{gap:8px; margin-top:12px} .fx-stat{font-size:7.5px} .fx-progress{height:5px}
}
@media(prefers-reduced-motion:reduce){
  .fx-audit *,.fx-audit::after,.fx-wrap::before{animation:none !important; transition:none !important}
  .fx-runner{opacity:1} .fx-sheen,.fx-cbeam,.fx-scan{display:none}
}

/* DEMO label */
.fx-demo{display:inline-flex; align-items:center; gap:6px; margin-left:11px; padding:4px 10px; border-radius:7px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:8.5px; font-weight:700; letter-spacing:1.7px; text-transform:uppercase;
  color:#0A0F17; background:linear-gradient(180deg,#ffd873,#ffb224);
  box-shadow:0 3px 12px -5px rgba(255,178,36,.9), inset 0 1px 0 rgba(255,255,255,.45)}
.fx-demo::before{content:""; width:5px; height:5px; border-radius:50%; background:#0A0F17; opacity:.65}

/* how it works */
.fx-how{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:-2px 0 18px}
.fx-how .s{display:inline-flex; align-items:center; gap:8px; color:var(--txt-dim); font-size:11px}
.fx-how .n{width:17px; height:17px; flex:none; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(59,140,255,.4); color:var(--blue); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9px; font-weight:600}
.fx-how .arrow{color:var(--txt-faint); opacity:.55}

/* dual-currency KPI value */
.fx-k-value.dual{font-size:18px}

/* honest demo caption (outside the scoped card, so colors are explicit) */
.fx-caption{max-width:720px; margin:9px auto 0; padding:0 8px; text-align:center; color:#8A97AD;
  font:400 11px/1.55 "Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif}
.fx-caption b{color:#C3CEDE; font-weight:600}

@media(max-width:600px){
  .fx-head{flex-wrap:wrap; row-gap:8px}
  .fx-demo{margin-left:8px; font-size:7.5px; padding:3px 7px; letter-spacing:1.3px}
  .fx-how{gap:6px} .fx-how .s{font-size:9.5px} .fx-how .arrow{display:none}
  .fx-k-value.dual{font-size:12px}
  .fx-caption{font-size:10px}
}


/* ===== DESKTOP SCROLL-SAFE SIZING (v3.2.8) =====
   Never use CSS `zoom` here. WordPress/browser combinations can scale wheel
   deltas and make the page feel extremely slow after an anchor jump. Keep
   the demo compact with normal layout sizing instead. */
@media (min-width:601px){
  .fx-wrap{max-width:760px}
  .fx-audit{padding:24px}
  .fx-caption{max-width:760px}
}

/* The findings table may scroll sideways on narrow screens, but it must never
   become a vertical wheel/touch scroll trap. */
.fx-table-scroll{overflow-x:auto; overflow-y:hidden; overscroll-behavior-y:auto; touch-action:pan-x pan-y}
.fx-wrap,.fx-audit{overscroll-behavior:auto}


/* ---- v3.2: claim-expiration urgency banner ---- */
.fx-urgency{display:none; align-items:flex-start; gap:10px; margin:14px 0 0; padding:12px 14px;
  border:1px solid rgba(59,140,255,.34); border-radius:12px;
  background:linear-gradient(90deg,rgba(59,140,255,.11),rgba(124,196,255,.045));
  box-shadow:inset 3px 0 0 rgba(59,140,255,.72)}
.fx-urgency.show{display:flex}
.fx-urgency-mark{width:17px; height:17px; flex:none; margin-top:1px; color:var(--blue)}
.fx-urgency-mark svg{display:block; width:100%; height:100%; overflow:visible}
.fx-urgency-mark path:first-child{fill:rgba(59,140,255,.08); stroke:currentColor; stroke-width:1.5; stroke-linejoin:round}
.fx-urgency-mark path:nth-child(2){fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round}
.fx-urgency-mark circle{fill:currentColor}
.fx-urgency-text{font-size:12px; line-height:1.55; color:var(--txt-dim)}
.fx-urgency-text b{color:var(--txt)}

/* ---- v3.2: post-result "activate account" CTA ---- */
.fx-activate-cta{display:none; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:16px 0 0; padding:14px 16px; border:1px solid rgba(47,217,139,.32); border-radius:12px;
  background:linear-gradient(180deg,rgba(47,217,139,.10),rgba(59,140,255,.04))}
.fx-activate-cta.show{display:flex}
.fx-activate-cta-text{font-size:12.5px; line-height:1.5; color:var(--txt-dim); flex:1; min-width:220px}
.fx-activate-cta-text b{color:var(--txt)}
.fx-activate-cta .fx-btn{flex:none; white-space:nowrap}

/* ---- v3.2.5: successful audit information note ---- */
.fx-info-note{margin:0 0 16px; padding:10px 13px; border:1px solid rgba(59,140,255,.30); border-radius:11px;
  background:rgba(59,140,255,.07); color:var(--txt-dim); font-size:11.5px; line-height:1.55; display:none}
.fx-info-note.show{display:block}
.fx-info-note b{color:var(--txt)}

/* ---- v3.2.5: plans conversion CTA ---- */
.fx-activate-cta-copy{display:flex; flex:1; min-width:230px; flex-direction:column; gap:9px}
.fx-plan-chips{display:flex; flex-wrap:wrap; gap:7px}
.fx-plan-chip{display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(59,140,255,.34); background:rgba(59,140,255,.08); color:var(--blue-2)!important;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:8.5px; font-weight:650; letter-spacing:.35px;
  text-decoration:none!important; cursor:pointer; transition:background .16s ease,border-color .16s ease,transform .16s ease}
.fx-plan-chip:hover,.fx-plan-chip:focus-visible{background:rgba(59,140,255,.16); border-color:rgba(124,196,255,.58);
  color:#b9d8ff!important; transform:translateY(-1px); outline:none}
.fx-plan-chip:focus-visible{box-shadow:0 0 0 2px rgba(59,140,255,.28)}
@media(max-width:600px){
  .fx-activate-cta{align-items:stretch}
  .fx-activate-cta-copy{min-width:0; width:100%}
  .fx-activate-cta .fx-btn{width:100%}
}

/* v3.6.0: branded, verified-customer PDF take-away */
.fx-report{display:flex;flex-direction:column;gap:0;margin:18px 0 6px;padding:0;border:1px solid rgba(84,151,255,.46);
  border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#101e34,#0b1424 75%);
  box-shadow:0 14px 36px -24px rgba(55,123,245,.9),inset 0 1px 0 rgba(255,255,255,.09)}
.fx-report[hidden]{display:none!important}
.fx-report-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 19px 11px;
  border-bottom:1px solid rgba(130,166,223,.14)}
.fx-report-overline{display:inline-flex;align-items:center;gap:9px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-weight:700;font-size:9px;letter-spacing:1.1px;color:#a9caff}
.fx-report-overline i{width:7px;height:7px;border-radius:50%;background:#3b8cff;box-shadow:0 0 13px #3b8cff}
.fx-report-chip{flex:none;padding:5px 9px;border-radius:99px;border:1px solid rgba(99,159,255,.35);color:#8fc5ff;
  background:rgba(38,99,196,.12);font:700 8px/1.2 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.5px}
.fx-report-main{display:flex;gap:15px;justify-content:space-between;align-items:center;padding:18px 19px 12px}
.fx-report-copy{min-width:0;flex:1}
.fx-report-copy h3{padding:0;margin:0 0 6px;font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:20px;font-weight:700;line-height:1.23;letter-spacing:-.55px;color:#f0f6ff}
.fx-report-copy p{font-size:11.5px;line-height:1.6;color:#adbed4;margin:0}
.fx-report-copy strong{font-weight:600;color:#edf5ff}
.fx-report-logo-wrap{flex:none;width:115px;min-height:76px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.065);
  border-radius:10px;background:#000;overflow:hidden}
.fx-report-logo-wrap img{display:block;width:100%;height:auto;object-fit:contain}
.fx-report-recipient{margin:5px 19px 15px;padding:10px 12px;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:5px 12px;background:rgba(5,12,24,.7);border:1px solid rgba(113,161,240,.14);border-radius:9px}
.fx-report-recipient span{font:700 8px/1.5 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.7px;color:#7a97be}
.fx-report-recipient strong{font-size:11px;font-weight:600;color:#e6f1ff;overflow-wrap:anywhere}
.fx-report-actions{display:flex;flex-wrap:wrap;gap:10px;padding:0 19px}
.fx-report-actions .fx-btn{flex:1;min-width:165px;padding:12px 13px;font:700 12px/1.2 "Space Grotesk",system-ui,sans-serif;
  transition:background .2s,border-color .2s,transform .12s,box-shadow .2s}
.fx-report-actions .fx-btn span{font-size:16px;line-height:8px}
.fx-report-actions .fx-report-download{color:#fff;background:linear-gradient(180deg,#357fec,#1d55bd);border:1px solid #477fe0;
  box-shadow:0 7px 22px -12px rgba(59,140,255,.8)}
.fx-report-actions .fx-report-email{color:#dceaff;border:1px solid rgba(96,152,238,.46);background:rgba(54,108,196,.13)}
.fx-report-actions .fx-report-download:hover{background:linear-gradient(180deg,#4b91ff,#2465db)}
.fx-report-actions .fx-report-email:hover{background:rgba(54,108,196,.25)}
.fx-report-status{margin:12px 19px 0;padding:9px 11px;border-left:2px solid rgba(99,159,255,.65);
  background:rgba(17,49,92,.23);color:#a4c3e7;font-size:10.5px;line-height:1.5;overflow-wrap:anywhere}
.fx-report-status.working{border-color:#7bb7ff;color:#c5ddfc}
.fx-report-status.success{border-color:#2fd98b;color:#9ef2c8;background:rgba(47,217,139,.07)}
.fx-report-status.error{border-color:#ff7771;color:#ffc3c0;background:rgba(255,92,87,.06)}
.fx-report-fine{margin:0;padding:12px 19px 16px;color:#738aa7;font-size:9px;line-height:1.6}
@media(max-width:520px){
  .fx-report-main{align-items:flex-start}
  .fx-report-logo-wrap{width:72px;min-height:50px}
  .fx-report-copy h3{font-size:17px}
  .fx-report-actions{flex-direction:column}
  .fx-report-actions .fx-btn{width:100%;min-width:0;flex:none}
  .fx-report-recipient{align-items:flex-start;flex-direction:column}
}