/* Homepage only (v5, product-led). Loaded after site.css. White page, floating pill header, bold Manrope headlines with the
   second line in brand blue, product cards reconstructed from the real PaySec screens (same labels, no demo data), a scroll-driven
   stepper, and a navy closing band that flows into the footer. Every class is prefixed hpx- so inner pages are untouched. */

.hpx { --max: 1200px; --hpx-dots: radial-gradient(rgba(9, 99, 253, .18) 1.2px, transparent 1.3px); }
.hpx main { overflow-x: clip; }
.hpx h1, .hpx h2, .hpx h3 { font-family: var(--font-display); letter-spacing: -.025em; }
.hpx h1 span, .hpx h2 span { color: var(--blue); }

/* ------------------------------------------------------------------ floating header */
.hpx .site-header { position: sticky; top: 12px; z-index: 20; margin: 12px auto 0; width: min(var(--max), calc(100% - 32px)); border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 12px 34px -20px rgba(7, 25, 49, .4); }
.hpx .site-header .container { width: 100%; padding: 0 10px 0 22px; }
.hpx .header-row { min-height: 64px; }
.hpx .main-nav a:not(.btn) { font-weight: 600; color: var(--text); position: relative; padding-block: 6px; }
.hpx .main-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 2px; background: var(--blue); }
.hpx .main-nav .btn-dark { background: var(--navy); box-shadow: none; }
.hpx .main-nav .btn-dark:hover { background: var(--navy-2); }

/* buttons */
.hpx-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 14px 10px 14px 26px; border-radius: 999px; font: 700 16px/1 var(--font-display); text-decoration: none; background: var(--blue); color: #fff; box-shadow: 0 14px 30px -14px rgba(9, 99, 253, .8); transition: background .15s, transform .15s; }
.hpx-btn:hover { background: var(--blue-dark); }
.hpx-btn i { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: grid; place-items: center; }
.hpx-btn svg { width: 16px; height: 16px; }
.hpx-link { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/1 var(--font-body); color: var(--ink); text-decoration: none; }
.hpx-link:hover { color: var(--blue); }
.hpx-link svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ hero */
.hpx-hero { position: relative; padding: 64px 0 24px; }
.hpx-hero .container { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: 36px; align-items: center; }
.hpx-hero h1 { margin-top: 22px; font-size: clamp(40px, 5vw, 64px); font-weight: 800; line-height: 1.04; }
.hpx-hero .hpx-lead { margin-top: 20px; max-width: 54ch; font-size: 18px; line-height: 1.6; color: var(--muted); }
.hpx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.hpx-facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; color: var(--muted); }
.hpx-facts li { display: flex; align-items: center; gap: 8px; }
.hpx-facts li::before { content: ""; width: 14px; height: 8px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg) translate(2px, -2px); flex-shrink: 0; }

/* product stage: dotted field, app window, phone, floating cards */
.hpx-stage { position: relative; min-height: 580px; }
.hpx-stage::before { content: ""; position: absolute; inset: -20px -40px -20px -10px; background-image: var(--hpx-dots); background-size: 22px 22px; mask-image: radial-gradient(60% 60% at 55% 50%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(60% 60% at 55% 50%, #000 40%, transparent 100%); pointer-events: none; }
.hpx-ui { font: 400 13px/1.45 var(--font-body); color: var(--ink); }
.hpx-ui .k { color: var(--muted); }
.hpx-ui .mono { font: 500 12px/1 var(--font-data); }
.hpx-chip { display: inline-block; padding: 3px 9px; border-radius: 6px; font: 600 11.5px/1.3 var(--font-body); border: 1px solid; }
.hpx-chip-ok { color: var(--ok); border-color: #b9e2d1; background: #f2faf6; }
.hpx-chip-wait { color: var(--wait); border-color: #f1d9a6; background: #fff8ea; }
.hpx-chip-blue { color: var(--blue-dark); border-color: #bfd3fb; background: var(--blue-soft); }
.hpx-chip-muted { color: var(--muted); border-color: var(--line); background: #fff; }

.hpx-app { position: absolute; left: 0; top: 36px; width: 68%; background: #fff; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(7, 25, 49, .45), 0 2px 6px rgba(7, 25, 49, .06); overflow: hidden; }
.hpx-app-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 600 12px/1 var(--font-body); color: var(--muted); }
.hpx-app-bar b { color: var(--navy); font-weight: 800; font-family: var(--font-display); font-size: 14px; }
.hpx-app-bar b span { color: var(--blue); }
.hpx-app-bar .hpx-app-user { margin-left: auto; font-weight: 500; }
.hpx-app-body { padding: 14px 16px 16px; display: grid; gap: 10px; }
.hpx-app-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hpx-app-title b { font: 700 15px/1.2 var(--font-display); }
.hpx-kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 12.5px; }
.hpx-kv .k { color: var(--muted); }
.hpx-bar { height: 4px; border-radius: 2px; background: var(--ok); }
.hpx-ms { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--line); }
.hpx-ms li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.hpx-ms li b { font-weight: 600; }
.hpx-ms li .mono { color: var(--ink); }

.hpx-phone { position: absolute; right: -24px; bottom: 0; width: 200px; border-radius: 30px; background: #0b1626; padding: 10px; box-shadow: 0 40px 80px -30px rgba(7, 25, 49, .6); }
.hpx-phone-screen { border-radius: 22px; background: #fff; overflow: hidden; padding-bottom: 28px; }
.hpx-bank-bar { background: var(--navy); color: #fff; padding: 12px 14px 10px; font: 700 12px/1.2 var(--font-display); }
.hpx-bank-bar small { display: block; font: 400 9.5px/1.3 var(--font-body); color: var(--on-navy-muted); margin-top: 3px; }
.hpx-bank { padding: 12px 14px 14px; font-size: 11.5px; display: grid; gap: 8px; }
.hpx-bank h4 { margin: 0; font: 700 14px/1.2 var(--font-display); }
.hpx-bank .row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.hpx-bank .row span:first-child { color: var(--muted); }
.hpx-bank .code { height: 30px; border: 1.5px solid var(--ink); border-radius: 6px; width: 70%; display: flex; align-items: center; padding-left: 8px; letter-spacing: .25em; font: 600 13px/1 var(--font-data); }
.hpx-bank .go { margin-top: 2px; background: var(--blue); color: #fff; border-radius: 6px; padding: 8px; text-align: center; font-weight: 700; }

.hpx-float { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: 0 22px 44px -22px rgba(7, 25, 49, .45); font-size: 12.5px; display: grid; gap: 3px; }
.hpx-float b { font: 700 13px/1.25 var(--font-display); }
.hpx-float .mono { color: var(--ink); }
.hpx-float-1 { right: 0; top: -4px; }
.hpx-float-2 { left: 42%; bottom: -6px; }
.hpx-float-3 { left: -14px; top: 73%; }
@media (prefers-reduced-motion: no-preference) {
  .hpx-float { animation: hpx-drift 7s ease-in-out infinite; }
  .hpx-float-2 { animation-delay: -2.5s; }
  .hpx-float-3 { animation-delay: -4.5s; }
  @keyframes hpx-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
}

/* ------------------------------------------------------------------ audience strip */
.hpx-strip { padding: 36px 0 24px; }
.hpx-strip h2 { text-align: center; font: 600 14px/1.4 var(--font-body); color: var(--muted); letter-spacing: 0; }
.hpx-strip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 14px; }
.hpx-strip-row a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px 11px 14px; border-radius: 999px; background: var(--bg-soft); color: var(--ink); text-decoration: none; font: 700 14.5px/1 var(--font-display); letter-spacing: -.01em; }
.hpx-strip-row a:hover { background: var(--blue-soft); color: var(--blue-dark); }
.hpx-strip-row svg { width: 20px; height: 20px; }
.hpx-strip .status { text-align: center; }

/* ------------------------------------------------------------------ shared */
.hpx-section { padding-block: 88px; }
.hpx-soft { background: var(--bg-soft); }
.hpx-head { max-width: 760px; }
.hpx-head.center { margin-inline: auto; text-align: center; }
.hpx-eyebrow { display: inline-block; font: 600 12.5px/1 var(--font-body); color: var(--blue-dark); background: var(--blue-soft); padding: 8px 14px; border-radius: 999px; margin-bottom: 18px; }
.hpx-head h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; line-height: 1.08; }
.hpx-head p { margin-top: 16px; font-size: 18px; color: var(--muted); }

/* ------------------------------------------------------------------ the shift: statistic, then the two worlds */
.hpx-stat { text-align: center; }
.hpx-stat h2 { max-width: 26ch; margin-inline: auto; font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; line-height: 1.1; }
.hpx-stat h2 span { font-size: 1.25em; }
.hpx-stat p { margin: 16px auto 0; max-width: 56ch; font-size: 17px; color: var(--muted); }
.hpx-stat small { display: block; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.hpx-vs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; align-items: stretch; }
.hpx-vs::after { content: "vs"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 700 13px/1 var(--font-display); box-shadow: 0 0 0 6px #fff; }
.hpx-world { border-radius: 20px; border: 1px solid var(--line); background: #fff; padding: 22px 22px 24px; text-align: left; display: grid; gap: 14px; align-content: start; }
.hpx-world > b { font: 700 16px/1.3 var(--font-display); text-align: center; color: var(--muted); }
.hpx-world-paysec { background: var(--blue-soft); border-color: #bfd3fb; }
.hpx-world-paysec > b { color: var(--blue-dark); }
.hpx-chat { display: grid; gap: 8px; }
.hpx-chat span { max-width: 78%; padding: 9px 13px; border-radius: 14px; background: var(--bg-soft); font-size: 13.5px; line-height: 1.4; }
.hpx-chat span.me { justify-self: end; background: #dcf4e3; border-bottom-right-radius: 4px; }
.hpx-chat span.them { border-bottom-left-radius: 4px; }
.hpx-chat small { font-size: 11.5px; color: var(--muted); }
.hpx-world p { font-size: 14px; color: var(--muted); margin: 0; }
.hpx-record { background: #fff; border-radius: 14px; border: 1px solid #bfd3fb; padding: 14px 16px; }
.hpx-record .hpx-app-title b { font-size: 14px; }
.hpx-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; text-align: left; }
.hpx-card { border-radius: 18px; border: 1px solid var(--line); background: #fff; padding: 24px; display: grid; gap: 10px; align-content: start; }
.hpx-card .tag { justify-self: start; font: 600 12px/1 var(--font-body); color: var(--blue-dark); background: var(--blue-soft); padding: 7px 11px; border-radius: 999px; }
.hpx-card h3 { font-size: 20px; font-weight: 800; }
.hpx-card p { color: var(--muted); font-size: 15px; margin: 0; }
.hpx-card h3 a { color: inherit; text-decoration: none; }
.hpx-card h3 a:hover { color: var(--blue); }

/* ------------------------------------------------------------------ how it works: stepper with a sticky product panel */
.hpx-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 56px; }
.hpx-steps { list-style: none; margin: 0; padding: 0; position: relative; counter-reset: s; }
.hpx-steps::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
.hpx-steps li { counter-increment: s; position: relative; padding: 0 0 44px 46px; }
.hpx-steps li:last-child { padding-bottom: 0; }
.hpx-steps li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--line); transition: background .25s, border-color .25s, box-shadow .25s; }
.hpx-steps li.is-active::before { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 5px var(--blue-soft); }
.hpx-steps h3 { font-size: 22px; font-weight: 800; color: var(--muted); transition: color .25s; }
.hpx-steps h3::before { content: "0" counter(s) " "; color: var(--blue); font: 600 13px/1 var(--font-data); vertical-align: middle; margin-right: 6px; }
.hpx-steps li.is-active h3 { color: var(--ink); }
.hpx-steps p { margin-top: 8px; color: var(--muted); font-size: 15.5px; max-width: 46ch; }
.hpx-panel { position: sticky; top: 100px; border-radius: 24px; background: var(--navy); padding: 28px; min-height: 420px; overflow: hidden; }
.hpx-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 80% 0%, rgba(9, 99, 253, .55), transparent 60%); pointer-events: none; }
.hpx-panel .hpx-ui { position: relative; }
.hpx-screen { display: none; }
.hpx-screen.is-active { display: block; }
@media (prefers-reduced-motion: no-preference) { .hpx-screen.is-active { animation: hpx-in .35s ease-out; } @keyframes hpx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }
.hpx-screen .hpx-app { position: static; width: 100%; box-shadow: none; }
.hpx-panel-note { position: relative; margin-top: 16px; font-size: 13px; color: var(--on-navy-muted); text-align: center; }
.hpx-sig { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hpx-sig div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; display: grid; gap: 4px; }
.hpx-sig div b { font-weight: 600; }
.hpx-evidence { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-soft); font-size: 12.5px; }
.hpx-evidence i { width: 30px; height: 36px; border-radius: 4px; background: #fff; border: 1px solid var(--line); flex-shrink: 0; position: relative; }
.hpx-evidence i::after { content: "PDF"; position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 700 8px/1 var(--font-body); color: var(--blue-dark); }
.hpx-approve { border-left: 3px solid var(--blue); padding: 10px 12px; display: grid; gap: 8px; background: var(--bg-soft); border-radius: 0 10px 10px 0; }
.hpx-approve b { font: 700 13px/1.3 var(--font-display); }
.hpx-approve .go { background: var(--blue); color: #fff; border-radius: 6px; padding: 8px 10px; font-weight: 700; justify-self: start; font-size: 12.5px; }
.hpx-callout { margin: 48px 0 0; padding: 18px 22px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--text); font-size: 15px; }

/* ------------------------------------------------------------------ features */
.hpx-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 32px; margin-top: 52px; }
.hpx-feature { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.hpx-feature .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); margin-bottom: 6px; }
.hpx-feature .ico svg { width: 20px; height: 20px; }
.hpx-feature h3 { font-size: 19px; font-weight: 800; }
.hpx-feature p { color: var(--muted); font-size: 15px; margin: 0; }

/* ------------------------------------------------------------------ who holds the money */
.hpx-statement { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hpx-statement blockquote { margin: 0; font: 800 clamp(30px, 3.6vw, 44px)/1.1 var(--font-display); letter-spacing: -.025em; color: var(--ink); }
.hpx-statement blockquote span { color: var(--blue); }
.hpx-statement .lead { margin-top: 18px; font-size: 17px; color: var(--muted); }
.hpx-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.hpx-checks li { position: relative; padding-left: 28px; font-size: 15.5px; color: var(--text); }
.hpx-checks li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 12px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.hpx-flow { display: grid; gap: 10px; }
.hpx-flow-node { border-radius: 18px; background: #fff; border: 1px solid var(--line); padding: 20px 22px; display: grid; gap: 4px; }
.hpx-flow-node .who { font: 800 18px/1.2 var(--font-display); }
.hpx-flow-node p { margin: 0; font-size: 14.5px; color: var(--muted); }
.hpx-flow-node.is-bank { background: var(--navy); border-color: var(--navy); }
.hpx-flow-node.is-bank .who { color: #fff; }
.hpx-flow-node.is-bank p { color: var(--on-navy-muted); }
.hpx-flow-arrow { display: flex; align-items: center; gap: 10px; padding-left: 22px; font-size: 13px; color: var(--muted); }
.hpx-flow-arrow::before { content: ""; width: 2px; height: 20px; background: var(--blue); border-radius: 1px; }

/* ------------------------------------------------------------------ faq */
.hpx-faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: 48px; align-items: start; }
.hpx-faq details { border-top: 1px solid var(--line); }
.hpx-faq details:last-child { border-bottom: 1px solid var(--line); }
.hpx-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; font: 700 17px/1.35 var(--font-display); letter-spacing: -.01em; }
.hpx-faq summary::-webkit-details-marker { display: none; }
.hpx-faq summary::after { content: "+"; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-dark); display: grid; place-items: center; font: 500 18px/1 var(--font-body); flex-shrink: 0; transition: transform .15s; }
.hpx-faq details[open] summary::after { transform: rotate(45deg); }
.hpx-faq details p { margin: 0; padding: 0 0 20px; color: var(--text); font-size: 15.5px; max-width: 64ch; }

/* ------------------------------------------------------------------ navy closing band that becomes the footer */
.hpx-close { background: var(--navy); color: var(--on-navy-muted); padding: 88px 0 0; }
.hpx-close .hpx-cta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; padding-bottom: 72px; border-bottom: 1px solid var(--navy-line); }
.hpx-close h2 { color: #fff; font-size: clamp(32px, 4vw, 48px); font-weight: 800; line-height: 1.08; }
.hpx-close h2 span { color: var(--accent-on-navy); }
.hpx-close p { margin-top: 16px; font-size: 17px; color: var(--on-navy-muted); max-width: 50ch; }
.hpx-close .hpx-btn { margin-top: 26px; }
.hpx-close .hpx-record { border-color: transparent; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.hpx .site-footer { background: var(--navy); color: var(--on-navy-muted); border-top: 0; margin-top: 0; padding-top: 48px; }
.hpx .footer-grid h2 { color: #fff; }
.hpx .footer-grid a, .hpx .footer-bottom a { color: var(--on-navy-muted); }
.hpx .footer-grid a:hover, .hpx .footer-bottom a:hover { color: #fff; }
.hpx .footer-bottom { border-top-color: var(--navy-line); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1024px) {
  .hpx-hero .container { grid-template-columns: 1fr; gap: 36px; }
  .hpx-stage { min-height: 520px; max-width: 640px; margin-inline: auto; width: 100%; }
  .hpx-how { grid-template-columns: 1fr; gap: 32px; }
  .hpx-panel { position: relative; top: auto; }
  .hpx-features, .hpx-cards3 { grid-template-columns: 1fr 1fr; }
  .hpx-statement, .hpx-faq-layout, .hpx-close .hpx-cta { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .hpx .site-header { top: 8px; margin-top: 8px; width: calc(100% - 20px); }
  .hpx .site-header .container { padding: 0 8px 0 14px; }
  .hpx-hero { padding-top: 36px; }
  .hpx-hero h1 { font-size: clamp(34px, 9.5vw, 44px); }
  .hpx-stage { min-height: 0; padding-bottom: 20px; }
  .hpx-app { position: static; width: 100%; }
  .hpx-phone, .hpx-float-2, .hpx-float-3 { display: none; }
  .hpx-float-1 { right: -4px; top: -16px; }
  .hpx-stage::before { display: none; }
  .hpx-section { padding-block: 60px; }
  .hpx-vs { grid-template-columns: 1fr; }
  .hpx-vs::after { box-shadow: 0 0 0 6px var(--bg-soft); }
  .hpx-features, .hpx-cards3 { grid-template-columns: 1fr; }
  .hpx-panel { padding: 16px; min-height: 0; }
  .hpx-close { padding-top: 60px; }
}

/* Approved-copy layout: keep the illustration note outside the product stage. */
.hpx-hero .hpx-caption { display: block; margin-top: 24px; }
.hpx-caption .status { max-width: 72ch; }
.hpx-section .hpx-link { line-height: 1.4; }