/* Product UI drawn in code: film stage, browser frame, checkout, scanner report, money flow.
   Shared by the home page and the platform pages. */

/* ---------- hero ---------- */
.hero{position:relative;padding-block:72px 96px;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(600px 380px at 92% 8%,rgba(255,91,46,.10),transparent 70%),
  radial-gradient(700px 500px at 0% 100%,rgba(31,138,90,.07),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:56px;align-items:center;position:relative}
.hero h1{margin:22px 0 24px}
.hero .lede{max-width:52ch}
.hero .row{margin-top:34px}
.hero-note{margin-top:26px;font-size:13.5px;color:var(--mute);display:flex;gap:10px;align-items:flex-start;max-width:52ch}
.hero-note svg{flex:none;width:18px;height:18px;margin-top:2px}
@media (max-width:1060px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero{padding-block:48px 72px}}

/* ---------- film ---------- */
.film{position:relative}
.film-stage{position:relative;aspect-ratio:1.18;max-width:100%;border-radius:22px;background:var(--ink);overflow:hidden;box-shadow:0 40px 80px -40px rgba(15,26,23,.55),0 0 0 1px rgba(15,26,23,.06)}
.film-stage::after{content:"";position:absolute;inset:14px;border-radius:14px;border:1.5px dashed rgba(255,91,46,.35);pointer-events:none}
.film-stage .gridbg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px}
.scene{position:absolute;inset:0;padding:38px;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.scene.active{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.scene-k{position:absolute;top:30px;left:38px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-mute)}
.scene-k b{color:var(--signal);font-weight:500}
[data-at]{transition:opacity .45s var(--ease),transform .45s var(--ease),background .3s,color .3s,border-color .3s}
.pop{opacity:0;transform:translateY(10px)}
.pop.on{opacity:1;transform:none}
.film-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.film-tabs button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:8px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding-top:2px}
.film-tabs button.active{color:var(--ink)}
.film-tabs button:focus-visible{outline:2px solid var(--signal);outline-offset:4px;border-radius:4px}
.fbar{display:block;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.fbar i{display:block;height:100%;width:0;background:var(--signal)}
.film-tabs button.active .fbar i{background:var(--ink)}

/* windows inside the film */
.win{background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);overflow:hidden}
.win-top{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#f1f3ef;border-bottom:1px solid var(--line)}
.win-top i{width:9px;height:9px;border-radius:50%;background:#d4d9d3}
.win-top .url{margin-left:10px;flex:1;background:#fff;border:1px solid var(--line);border-radius:6px;font:500 11px var(--mono);color:var(--mute);padding:5px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-body{padding:18px}

/* scene 1: application */
.appl{display:grid;gap:10px}
.appl .f{display:grid;gap:5px}
.appl .f span{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.appl .f div{border:1px solid var(--line-2);border-radius:7px;padding:9px 11px;font-size:14px;min-height:38px}
.appl .f div::after{content:"";display:inline-block;width:1px;height:14px;background:var(--ink);margin-left:1px;vertical-align:-2px;animation:blink 1s steps(1) infinite;opacity:0}
.appl .f.typing div::after{opacity:1}
@keyframes blink{50%{opacity:0}}
.appl .sub{margin-top:6px;display:flex;justify-content:space-between;align-items:center}
.appl .sub b{background:var(--ink);color:#fff;font:600 13px var(--body);padding:10px 16px;border-radius:999px}
.appl .sub b.on{background:var(--signal);color:#1a0800}

/* scene 2: scan */
.scan{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:stretch}
.site{position:relative;padding:14px;display:grid;gap:8px;align-content:start}
.site .bar1{height:10px;width:50%;background:#e6eae5;border-radius:3px}
.site .gate{border:1px solid var(--line);border-radius:8px;padding:12px;display:grid;gap:7px;text-align:center}
.site .gate b{font:700 13px var(--display)}
.site .gate span{height:8px;background:#eef1ed;border-radius:3px}
.site .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.site .tiles i{aspect-ratio:1;background:#eef1ed;border-radius:6px;position:relative}
.site .tiles i::after{content:"";position:absolute;inset:30% 38%;border-radius:3px 3px 6px 6px;background:#cfd7d0}
.beam{position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(180deg,transparent,rgba(255,91,46,.22),transparent);border-bottom:1.5px solid var(--signal);animation:beam 2.6s var(--ease) infinite;pointer-events:none}
@keyframes beam{0%{transform:translateY(-50px)}100%{transform:translateY(260px)}}
.report{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;padding:14px;display:grid;gap:8px;align-content:start;color:var(--on-dark)}
.report .sc{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--ink-3);padding-bottom:10px;margin-bottom:2px}
.report .sc b{font:800 34px/1 var(--display);letter-spacing:-.03em}
.report .sc span{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-mute)}
.report .it{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px}
.report .it .state{font-size:9.5px;padding:4px 6px;opacity:.35}
.report .it.on .state{opacity:1}
.report .it .state.pass{background:rgba(31,138,90,.22);color:#5fe0a3}

/* scene 3: checkout */
.co{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.co-l{padding:16px;display:grid;gap:10px;align-content:start;border-right:1px solid var(--line)}
.co-r{padding:16px;background:#fafbf9;display:grid;gap:8px;align-content:start}
.co .ln{display:flex;justify-content:space-between;font-size:12.5px}
.co .ln.t{font-weight:700;border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
.co .inp{border:1px solid var(--line-2);border-radius:7px;padding:8px 10px;font:500 12px var(--mono);color:var(--mute)}
.co .wallet{background:#000;color:#fff;border-radius:7px;text-align:center;font:600 12.5px var(--body);padding:9px}
.co .att{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;font-size:11px;line-height:1.4;color:var(--mute);align-items:start}
.co .att i{width:15px;height:15px;border:1.5px solid var(--line-2);border-radius:4px;margin-top:1px;position:relative;transition:background .25s,border-color .25s}
.co .att.on i{background:var(--ink);border-color:var(--ink)}
.co .att.on i::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.co .pay{background:var(--ink);color:#fff;text-align:center;border-radius:8px;padding:11px;font:600 13px var(--body)}
.co .pay.on{background:var(--pass)}
.co .bump{border:1.5px dashed var(--signal);border-radius:8px;padding:8px 10px;font-size:11.5px;display:flex;justify-content:space-between;gap:8px;background:var(--signal-soft)}

/* scene 4: flow of funds */
.flow{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1.15fr) 54px minmax(0,1fr);align-items:center}
.node{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:14px;padding:16px 14px;color:var(--on-dark);text-align:left;min-width:0}
.node .k{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:8px}
.node b{display:block;font:700 15px/1.25 var(--display);letter-spacing:-.01em}
.node small{display:block;color:var(--on-dark-mute);font-size:11.5px;margin-top:6px;line-height:1.4}
.node.mid{border:1.5px dashed var(--signal);background:rgba(255,91,46,.06)}
.wire{position:relative;height:2px;background:var(--ink-3);margin:0 4px}
.wire i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--signal);box-shadow:0 0 12px var(--signal);opacity:0}
.wire.on i{animation:packet 1.4s var(--ease) infinite}
@keyframes packet{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.ledger{margin-top:22px;display:grid;gap:6px;font:500 12px var(--mono);color:var(--on-dark-mute)}
.ledger div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--ink-3);padding-bottom:6px}
.ledger div b{color:var(--on-dark);font-weight:500}
@media (max-width:560px){
  .scene{padding:26px 18px}.scene-k{left:18px;top:20px}
  .scan{grid-template-columns:minmax(0,1fr)}.site{display:none}
  .co{grid-template-columns:minmax(0,1fr)}.co-l{display:none}
  .flow{grid-template-columns:minmax(0,1fr);gap:8px}.wire{height:22px;width:2px;margin:0 auto}.wire i{display:none}
  .film-stage{aspect-ratio:.82}
  .film-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .node small{display:none}
}

/* ---------- three parties diagram (static) ---------- */
.parties{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:stretch}
.party{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:26px;min-width:0}
.party .k{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.party h3{font-size:22px;margin-bottom:14px}
.party ul{margin:0;padding-left:18px;color:var(--mute);font-size:15px}
.party li{margin:.35em 0}
.party.us{background:transparent;border:0;padding:0}
.party.us .perimeter{background:var(--white);height:100%}
@media (max-width:900px){.parties{grid-template-columns:minmax(0,1fr)}}

/* ---------- scanner report cards (static) ---------- */
.rep{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--r-l);padding:24px;min-width:0;display:flex;flex-direction:column;gap:14px}
.rep-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--ink-3)}
.rep-h .dom{font:500 13px var(--mono);color:var(--on-dark)}
.rep-h .when{font:500 11px var(--mono);color:var(--on-dark-mute);margin-top:6px;letter-spacing:.04em}
.rep-h .score{font:800 44px/1 var(--display);letter-spacing:-.04em;color:#fff;text-align:right}
.rep-h .score small{display:block;font:500 10.5px var(--mono);letter-spacing:.1em;color:var(--on-dark-mute);margin-top:6px}
.rep .it{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;font-size:14.5px;color:var(--on-dark)}
.rep .it small{display:block;color:var(--on-dark-mute);font-size:12.5px;margin-top:2px;line-height:1.4}
.rep .state.pass{background:rgba(31,138,90,.2);color:#62e0a5}
.rep .state.warn{background:rgba(255,179,48,.16);color:#ffc35c}
.rep .state.fail{background:rgba(249,65,68,.16);color:#ff7a70}
.rep .act{margin-top:auto;padding-top:14px;border-top:1px solid var(--ink-3);font-size:13px;color:var(--on-dark-mute)}
.rep .act b{color:#fff;font-weight:600}

/* ---------- checkout mock (static, larger) ---------- */
.mock{background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:0 40px 80px -50px rgba(15,26,23,.5);overflow:hidden}
.mock .win-body{padding:0}
.mock .co{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.mock .co-l,.mock .co-r{padding:24px;gap:12px}
.mock .co .ln{font-size:14px}
.mock .co .inp{font-size:13px;padding:11px 12px}
.mock .co .att{font-size:12.5px}
.mock .co .pay,.mock .co .wallet{padding:13px;font-size:14px}
.mock h4{font:700 15px var(--display);margin:0}
@media (max-width:620px){.mock .co{grid-template-columns:minmax(0,1fr)}.mock .co-l{display:grid;border-right:0;border-bottom:1px solid var(--line)}}

/* accepted / not accepted */
.ok-no{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px){.ok-no{grid-template-columns:minmax(0,1fr)}}

/* ===== v2 quality pass (05/11) ===== */
/* soft glows behind key sections */
.glow{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.glow::before{content:"";position:absolute;inset:-10% -5% auto;height:70%;z-index:-1;pointer-events:none;background:radial-gradient(40% 50% at 20% 30%,rgba(255,91,46,.10),transparent 70%),radial-gradient(35% 45% at 80% 20%,rgba(31,138,90,.10),transparent 70%)}
.dark.glow::before{background:radial-gradient(40% 50% at 15% 40%,rgba(255,91,46,.16),transparent 70%),radial-gradient(35% 45% at 85% 10%,rgba(95,224,163,.10),transparent 70%)}
.cap{font:400 12.5px var(--body);color:var(--mute-2);text-align:center;margin-top:16px}
.dark .cap{color:var(--on-dark-mute)}

/* brand pills */
.brands{display:flex;flex-direction:column;gap:12px}
.brands .marquee-track{gap:12px}
.bp{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px;border:1px solid var(--line);border-radius:12px;background:var(--white);font:600 15px var(--display);color:var(--ink);white-space:nowrap;box-shadow:0 1px 0 rgba(15,26,23,.03)}
.bp svg{height:22px;width:auto;flex:none}
.brands-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.brands-head p{margin:0;color:var(--mute);font-size:15px}
.stripe-note{display:inline-flex;align-items:center;gap:8px;font:500 13px var(--body);color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:var(--white)}
.stripe-note b{font:700 14px var(--display);color:#635bff;letter-spacing:-.02em}
.track-rev{animation-direction:reverse}

/* merchant dashboard mock */
.dash{border:1px solid var(--line);border-radius:20px;background:var(--white);box-shadow:0 30px 80px -30px rgba(15,26,23,.25),0 2px 6px rgba(15,26,23,.04);overflow:hidden}
.dash-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);background:#fbfcfa}
.dash-top .who{display:flex;align-items:center;gap:10px;font:600 14px var(--display)}
.dash-top .who i{width:26px;height:26px;border-radius:8px;background:var(--ink);display:grid;place-items:center;color:#fff;font:700 12px var(--display);font-style:normal}
.dash-top .acct{font:500 11.5px var(--mono);color:var(--mute);letter-spacing:.04em}
.dash-body{padding:20px;display:grid;gap:14px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kpi{border:1px solid var(--line);border-radius:12px;padding:14px}
.kpi .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.kpi .v{font:800 24px var(--display);letter-spacing:-.03em;margin-top:6px}
.kpi small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.kpi.hl{background:var(--ink);border-color:var(--ink);color:#fff}.kpi.hl .k,.kpi.hl small{color:var(--on-dark-mute)}
.cadence{border:1px solid var(--line);border-radius:12px;padding:14px}
.cadence .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);display:flex;justify-content:space-between;gap:10px}
.days{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin-top:12px}
.days span{height:34px;border-radius:7px;background:var(--sage);display:grid;place-items:center;font:500 10.5px var(--mono);color:var(--mute)}
.days span.po{background:var(--signal);color:#fff;font-weight:600}
.days span.we{background:transparent;border:1px dashed var(--line-2)}
.dash-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px}
.reserve{border:1px solid var(--line);border-radius:12px;padding:14px}
.reserve .k,.score-box .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.meter{height:10px;border-radius:99px;background:var(--sage);margin:14px 0 8px;overflow:hidden;display:flex}
.meter i{display:block;height:100%;background:var(--ink)}.meter i+i{background:repeating-linear-gradient(45deg,var(--signal) 0 6px,#ff8a66 6px 12px)}
.reserve .lg{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--mute)}
.score-box{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;align-items:center;gap:14px}
.sring{--p:96;width:64px;height:64px;border-radius:50%;flex:none;background:conic-gradient(var(--pass) calc(var(--p)*1%),var(--sage) 0);display:grid;place-items:center}
.sring b{width:50px;height:50px;border-radius:50%;background:var(--white);display:grid;place-items:center;font:800 18px var(--display)}
.score-box small{display:block;color:var(--mute);font-size:12px}
.payouts{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.payouts div{display:grid;grid-template-columns:1.2fr 1fr .9fr;gap:10px;padding:10px 14px;font-size:13px;border-top:1px solid var(--line)}
.payouts div:first-child{border-top:0;background:#fbfcfa;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.payouts b{font-weight:600}.payouts .pd{color:var(--pass);font-weight:600}
@media (max-width:620px){.kpis{grid-template-columns:minmax(0,1fr)}.dash-row{grid-template-columns:minmax(0,1fr)}.days{grid-template-columns:repeat(5,minmax(0,1fr))}.days span:nth-child(n+6){display:none}.dash-top .acct{display:none}}

/* money flow (Connect) */
.mflow{display:grid;gap:18px;margin:30px 0 0;padding:0}
.mflow li{list-style:none;display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start}
.mflow .n{width:34px;height:34px;border-radius:10px;border:1px dashed var(--signal);color:var(--signal-ink);display:grid;place-items:center;font:600 13px var(--mono)}
.mflow h3{font-size:17px;margin:4px 0 2px;letter-spacing:-.01em}
.mflow p{margin:0;color:var(--mute);font-size:15px}

/* scan board (dark) */
.board{border:1px solid var(--ink-3);border-radius:20px;background:linear-gradient(180deg,var(--ink-2),#13201c);overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.board-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--ink-3)}
.board-h .dom{font:500 13px var(--mono);color:#fff}.board-h .when{font:400 11.5px var(--mono);color:var(--on-dark-mute);margin-top:3px}
.board-h .sring{--p:94;background:conic-gradient(#5fe0a3 calc(var(--p)*1%),var(--ink-3) 0)}.board-h .sring b{background:var(--ink-2);color:#fff}
.tl{display:flex;gap:8px;padding:14px 20px;border-bottom:1px solid var(--ink-3);overflow-x:auto}
.tl span{flex:none;font:500 11px var(--mono);color:var(--on-dark-mute);border:1px solid var(--ink-3);border-radius:8px;padding:6px 9px}
.tl span.ok{color:#5fe0a3;border-color:rgba(95,224,163,.35)}.tl span.now{color:#fff;background:var(--signal);border-color:var(--signal)}
.tl span.bad{color:#ffb4a0;border-color:rgba(255,91,46,.45)}
.chk{padding:6px 20px 8px}
.chk div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--ink-3);font-size:14px;color:var(--on-dark)}
.chk div:first-child{border-top:0}
.chk small{display:block;color:var(--on-dark-mute);font-size:12px;margin-top:2px}
.finding{margin:0 20px 20px;border:1px dashed rgba(255,91,46,.55);border-radius:12px;padding:14px;background:rgba(255,91,46,.06)}
.finding .k{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.finding p{margin:8px 0 0;font-size:13.5px;color:var(--on-dark)}
.finding code{font:500 12px var(--mono);background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px}
.finding s{color:#ffb4a0}

/* elsewhere vs zonipay */
.vs{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:16px 14px;align-items:stretch;margin-top:48px}
.vs .el,.vs .zp{border-radius:16px;padding:22px 24px}
.vs .el{border:1px dashed #f0b8a6;background:#fff7f4}
.vs .zp{border:1px solid #bfe2cf;background:var(--white);box-shadow:0 14px 40px -24px rgba(31,138,90,.35)}
.vs .t{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;display:flex;gap:8px;align-items:center}
.vs .el .t{color:var(--fail)}.vs .zp .t{color:var(--pass)}
.vs h3{font-size:19px;margin:10px 0 8px;letter-spacing:-.015em}
.vs .el h3{text-decoration:line-through;text-decoration-color:rgba(194,58,46,.6);color:#7d2a22}
.vs p{margin:0;color:var(--mute);font-size:15px}
.vs .ar{display:grid;place-items:center}.vs .ar span{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--white);display:grid;place-items:center;color:var(--mute)}
@media (max-width:820px){.vs{grid-template-columns:minmax(0,1fr)}.vs .ar{height:30px}.vs .ar span{transform:rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.brands .marquee-track{animation:none}}