@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
/* 05 / For owners: the other receipt */
.rc{--ink:#1b1a18;--paper:#f5f3ec;--red:#e54425;--mono:'IBM Plex Mono',Menlo,monospace;--rw:384px;position:relative;background:#000;color:#fff;padding:0}
.rc-scroll{position:relative;height:640vh}
.rc-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 75% at 74% 30%,rgba(255,255,255,.13),rgba(255,255,255,0) 70%),#000}
.rc-head{position:absolute;z-index:4;top:28px;left:5%;right:5%;display:flex;justify-content:space-between;gap:20px}
.rc-head .section-label{flex:1;margin:0;color:#fff}
.rc-head .section-label span:last-child{color:rgba(255,255,255,.55)}

/* blunt statements */
.rc-say{position:absolute;z-index:3;left:5%;top:50%;transform:translateY(-50%);width:min(52vw,780px)}
.rc-line-say{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;pointer-events:none}
.rc-line-say.on{pointer-events:auto}
.rc-time{display:block;font:500 15px/1 var(--mono);color:rgba(255,255,255,.5);margin-bottom:22px;overflow:hidden}
.rc-big{font:800 clamp(56px,6.6vw,118px)/.88 'Barlow Condensed',sans-serif;letter-spacing:-.015em;text-transform:uppercase;color:#fff}
.rc-big.red{color:var(--red)}
.rc-m{display:block;overflow:hidden;padding-bottom:.03em}
.rc-m>span{display:block;transform:translateY(102%);transition:transform .75s cubic-bezier(.2,.75,.1,1)}
.rc-line-say.on .rc-m>span{transform:none}
.rc-line-say.on .rc-m:nth-child(2)>span{transition-delay:.06s}
.rc-line-say.on .rc-m:nth-child(3)>span{transition-delay:.12s}
.rc-line-say.on .rc-m:nth-child(4)>span{transition-delay:.18s}
.rc-line-say:not(.on) .rc-m>span{transition-duration:.35s;transform:translateY(-102%)}
.rc-act{display:flex;align-items:center;gap:26px;margin-top:38px;flex-wrap:wrap;transition:opacity .4s .3s,visibility 0s}
.rc-line-say:not(.on) .rc-act{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.rc-cta{display:inline-flex;align-items:center;gap:40px;padding:20px 24px;border:0;background:var(--red);color:#fff;font:700 17px/1 'DM Sans',sans-serif;cursor:pointer;transition:background .2s}
.rc-cta:hover{background:#cf3a1c}
.rc-cta span{font-size:22px}
.rc-cta:focus-visible,.rc-step:focus-visible,.rc-note summary:focus-visible{outline:3px solid #8fb2ff;outline-offset:4px}
.rc-note{font:13px/1.6 'DM Sans',sans-serif;color:rgba(255,255,255,.55);max-width:360px}
.rc-note summary{cursor:pointer;list-style:none;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}
.rc-note summary::-webkit-details-marker{display:none}
.rc-note p{margin-top:8px}

/* printer + paper */
.rc-desk{position:absolute;z-index:2;right:7%;top:0;bottom:0;width:calc(var(--rw) + 90px)}
.rc-window{position:absolute;left:45px;right:45px;top:0;bottom:calc(7vh + 50px);overflow:hidden}
.rc-paper{position:absolute;left:0;right:0;bottom:0;transform:translateY(100%);transition:transform .55s cubic-bezier(.3,.6,.2,1);will-change:transform}
.rc-sheet{position:relative;padding:34px 26px 30px;background-color:var(--paper);background-size:256px 256px;color:var(--ink);font:400 13.5px/1.55 var(--mono);
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 40px 70px rgba(0,0,0,.65)}
.rc-sheet::before{content:"";position:absolute;left:0;right:0;top:-1px;height:10px;background:linear-gradient(135deg,#000 50%,transparent 50%) 0 0/12px 10px repeat-x,linear-gradient(-135deg,#000 50%,transparent 50%) 0 0/12px 10px repeat-x}
.rc-sheet::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.07),rgba(0,0,0,0) 8%,rgba(0,0,0,0) 92%,rgba(0,0,0,.08)),linear-gradient(180deg,rgba(0,0,0,0) 85%,rgba(0,0,0,.14))}
.rc-printer{position:absolute;left:0;right:0;bottom:7vh;height:96px;border-radius:14px 14px 6px 6px;background:linear-gradient(180deg,#2c2c2b 0%,#191918 22%,#0f0f0e 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 50px rgba(0,0,0,.8)}
.rc-printer::before{content:"";position:absolute;left:34px;right:34px;top:26px;height:8px;border-radius:4px;background:#000;box-shadow:inset 0 2px 3px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08)}
.rc-printer b{position:absolute;left:30px;bottom:20px;font:600 12px/1 'DM Sans',sans-serif;letter-spacing:-.02em;color:rgba(255,255,255,.35)}
.rc-printer i{position:absolute;right:30px;bottom:23px;width:7px;height:7px;border-radius:50%;background:#3a3a38;transition:background .2s,box-shadow .2s}
.rc.printing .rc-printer i{background:#ff6a3d;box-shadow:0 0 10px #ff6a3d}

/* receipt content */
.rc-r{display:flex;justify-content:space-between;align-items:baseline;gap:14px;white-space:nowrap;opacity:0}
.rc-r.out{opacity:1;animation:rc-heat .5s ease-out}
@keyframes rc-heat{from{color:#bdb9ae}to{color:var(--ink)}}
.rc-r.c{justify-content:center}
.rc-r>span:first-child{overflow:hidden;text-overflow:ellipsis}
.rc-r.h{font-weight:600;font-size:15px;letter-spacing:.06em}
.rc-r.sm{font-size:12px;color:#5d5a53}
.rc-r.big{font-weight:600;font-size:20px;letter-spacing:-.01em;margin-top:2px}
.rc-r.red,.rc-r.red .rc-v{color:var(--red)}
.rc-r.total{display:block;text-align:center;margin:6px 0 2px}
.rc-r.total strong{display:block;font:600 40px/1.05 var(--mono);letter-spacing:-.03em;color:var(--red);font-variant-numeric:tabular-nums}
.rc-r.total small{display:block;font-size:12px;color:#5d5a53}
.rc-rule{height:0;margin:10px 0;border-top:1.5px dashed rgba(27,26,24,.55);opacity:0}
.rc-rule.dbl{border-top-style:double;border-top-width:4px;border-color:rgba(27,26,24,.75)}
.rc-rule.out{opacity:1}
.rc-in{display:inline-flex;align-items:baseline;gap:6px}
.rc-v{font-weight:600;font-variant-numeric:tabular-nums;border-bottom:1.5px solid var(--ink);padding:0 2px;min-width:2ch;text-align:center}
.rc-step{width:22px;height:22px;padding:0;border:1.3px solid var(--ink);background:transparent;color:var(--ink);font:500 14px/1 var(--mono);cursor:pointer;align-self:center}
.rc-step:hover{background:var(--ink);color:var(--paper)}
.rc-flash{animation:rc-reprint .55s ease-out}
@keyframes rc-reprint{0%{color:#bdb9ae}100%{color:inherit}}
.rc-bar{display:block;width:100%;height:46px;margin:12px 0 6px;opacity:0}
.rc-bar.out{opacity:1}
.rc-cut{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:#77736b;opacity:0}
.rc-cut::after{content:"";flex:1;border-top:1.5px dashed #9a958b}
.rc-cut.out{opacity:1}
.rc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rc:not(.rc-js) .rc-scroll{height:auto}
.rc:not(.rc-js) .rc-stage{position:relative;height:auto;padding:120px 5% 80px}
.rc:not(.rc-js) .rc-paper{position:relative;transform:none}
.rc:not(.rc-js) .rc-r,.rc:not(.rc-js) .rc-rule,.rc:not(.rc-js) .rc-cut,.rc:not(.rc-js) .rc-bar{opacity:1}

/* CGI printer (WebGL) takes over; the HTML receipt stays for keyboards and screen readers */
.rc-gl{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
.rc-3d .rc-stage{background:#000}
.rc-3d .rc-desk{position:absolute;left:5%;right:auto;top:auto;bottom:24px;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.rc-3d .rc-desk:focus-within{width:auto;height:auto;clip-path:none;overflow:visible;z-index:6;bottom:24px;top:auto}
.rc-3d .rc-desk:focus-within .rc-window{position:relative;inset:auto;overflow:visible}
.rc-3d .rc-desk:focus-within .rc-paper{position:relative;transform:none}
.rc-3d .rc-desk:focus-within .rc-printer{display:none}
.rc-3d .rc-desk:focus-within .rc-r,.rc-3d .rc-desk:focus-within .rc-rule{opacity:1}
.rc-3d .rc-say{pointer-events:none}
.rc-3d .rc-say .rc-act{pointer-events:auto}
@media (max-width:860px){
  .rc{--rw:318px}
  .rc-scroll{height:680vh}
  .rc-head{top:18px;left:20px;right:20px}
  .rc-say{left:20px;right:20px;width:auto;top:62px;transform:none;height:34%}
  .rc-line-say{top:auto;bottom:0;transform:none}
  .rc-time{font-size:12px;margin-bottom:12px}
  .rc-big{font-size:clamp(40px,11.5vw,56px)}
  .rc-act{margin-top:18px;gap:14px}
  .rc-cta{padding:16px 18px;gap:24px;font-size:15px}
  .rc-note{font-size:12px;max-width:none}
  .rc-note[open]{position:absolute;left:0;right:0;top:100%;margin-top:8px;padding:12px 14px;background:#111;border:1px solid #333;z-index:5}
  .rc-stage{background:radial-gradient(90% 55% at 50% 72%,rgba(255,255,255,.13),rgba(255,255,255,0) 70%),#000}
  .rc-desk{left:50%;right:auto;margin-left:calc((var(--rw) + 40px) / -2);width:calc(var(--rw) + 40px);top:calc(62px + 34% + 14px)}
  .rc-window{left:20px;right:20px;bottom:calc(3vh + 40px)}
  .rc-printer{bottom:3vh;height:70px}
  .rc-printer::before{top:18px;left:22px;right:22px}
  .rc-printer b{bottom:14px;left:22px;font-size:11px}
  .rc-printer i{bottom:16px;right:22px}
  .rc-sheet{padding:28px 18px 24px;font-size:11.6px}
  .rc-r.h{font-size:13px}
  .rc-r.big{font-size:16px}
  .rc-r.total strong{font-size:32px}
  .rc-step{width:19px;height:19px;font-size:12px}
}

/* final beat, tear hint, sound toggle */
.rc-sub{margin-top:22px;font:400 19px/1.5 'DM Sans',sans-serif;color:rgba(255,255,255,.72);max-width:30ch}
.rc-sub b{color:#fff;font-weight:600}
.rc-hint{display:none;align-items:center;gap:16px;margin-top:30px;font:400 14px/1.4 'DM Sans',sans-serif;color:rgba(255,255,255,.6)}
.rc-3d .rc-hint{display:flex;transition:opacity .4s .3s,visibility 0s}
.rc-line-say:not(.on) .rc-hint{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.rc-3d .rc-line-say[data-i="3"] .rc-act{display:none}
.rc-tear{padding:13px 18px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:600 15px/1 'DM Sans',sans-serif;cursor:pointer;transition:background .2s,border-color .2s}
.rc-tear:hover{background:rgba(255,255,255,.08);border-color:#fff}
.rc-tear:focus-visible,.rc-sound:focus-visible{outline:3px solid #8fb2ff;outline-offset:4px}
.rc-sound{display:none;align-items:center;gap:9px;padding:9px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(0,0,0,.35);color:rgba(255,255,255,.8);font:500 12px/1 'DM Sans',sans-serif;cursor:pointer;pointer-events:auto}
.rc-3d .rc-sound{display:inline-flex}
.rc-sound i{position:relative;width:12px;height:12px;background:currentColor;clip-path:polygon(0 30%,35% 30%,75% 0,75% 100%,35% 70%,0 70%)}
.rc-sound[aria-pressed="true"]{color:#fff;border-color:rgba(255,255,255,.5)}
.rc-sound[aria-pressed="false"] i::after{content:"";position:absolute;inset:0}
.rc-head{align-items:center}
.rc-inview .paper-flight{opacity:0!important;visibility:hidden!important}
@media (hover:none){.rc-hint-t{font-size:0}.rc-hint-t::after{content:attr(data-touch);font-size:13px}}
@media (max-width:860px){.rc-sub{font-size:15px;margin-top:12px}.rc-hint{margin-top:14px}.rc-tear{padding:11px 14px;font-size:14px}.rc-sound{padding:7px 11px}}

/* keep the type legible over the scene */
.rc-3d .rc-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 30%,rgba(0,0,0,0) 52%)}
@media (max-width:860px){.rc-3d .rc-stage::before{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.92) 30%,rgba(0,0,0,.55) 44%,rgba(0,0,0,0) 56%)}}

/* tools: language, sound, a book-a-demo that is always there */
.rc-tools{display:flex;align-items:center;gap:10px;pointer-events:auto}
.rc-lang select{appearance:none;-webkit-appearance:none;padding:9px 28px 9px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-opacity='.7' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 11px center;color:rgba(255,255,255,.85);font:500 12px/1 'DM Sans',sans-serif;cursor:pointer}
[dir="rtl"] .rc-lang select{padding:9px 13px 9px 28px;background-position:left 11px center}
.rc-lang select option{color:#111}
.rc-lang select:focus-visible,.rc-mini-cta:focus-visible{outline:3px solid #8fb2ff;outline-offset:3px}
.rc-mini-cta{padding:9px 14px;border:0;border-radius:999px;background:var(--red);color:#fff;font:700 12px/1 'DM Sans',sans-serif;cursor:pointer;transition:background .2s,opacity .3s}
.rc-mini-cta:hover{background:#cf3a1c}
.rc-torn .rc-mini-cta{opacity:0;pointer-events:none}

/* instant first frame while the 3D loads, then a soft fade */
.rc-3d-pending .rc-stage{background:#000 url(/payon-landing/receipt-poster-desktop.webp) center/cover no-repeat}
.rc-3d-pending .rc-desk{visibility:hidden}
.rc-gl{opacity:0;transition:opacity .8s ease}
.rc-gl-on .rc-gl{opacity:1}

/* right-to-left: copy moves to the right, the scene to the left */
.rc[dir="rtl"] .rc-say{left:auto;right:5%}
.rc[dir="rtl"] .rc-desk{right:auto;left:7%}
.rc-3d[dir="rtl"] .rc-stage::before{background:linear-gradient(270deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 30%,rgba(0,0,0,0) 52%)}
.rc[dir="rtl"] .rc-time{direction:ltr;text-align:right}

/* type per language */
.rc:lang(ar) .rc-big{font-family:'IBM Plex Sans Arabic','Noto Naskh Arabic',sans-serif;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.3;font-size:clamp(40px,4.4vw,80px)}
.rc:lang(ur) .rc-big{font-family:'Noto Nastaliq Urdu','Noto Naskh Arabic',serif;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.9;font-size:clamp(32px,3.4vw,60px)}
.rc:lang(ur) .rc-m{padding:.12em 0 .3em}
.rc:lang(bg) .rc-big{font-family:'Oswald','Barlow Condensed',sans-serif;font-weight:700;letter-spacing:-.005em;line-height:1.04;font-size:clamp(42px,4.8vw,88px)}
.rc:lang(ar) :is(.rc-sub,.rc-hint,.rc-tear,.rc-cta,.rc-note,.rc-mini-cta,.rc-sound,.rc-head .section-label){font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0}
.rc:lang(ur) :is(.rc-sub,.rc-hint,.rc-tear,.rc-cta,.rc-note,.rc-mini-cta,.rc-sound,.rc-head .section-label){font-family:'Noto Nastaliq Urdu',serif;letter-spacing:0;line-height:2}
.rc:lang(bg) :is(.rc-sub,.rc-hint,.rc-tear,.rc-cta,.rc-note,.rc-mini-cta,.rc-sound){font-family:'IBM Plex Sans','DM Sans',sans-serif}
.rc:lang(ar) .rc-sheet{font-family:'IBM Plex Sans Arabic',sans-serif}
.rc:lang(ur) .rc-sheet{font-family:'Noto Naskh Arabic',serif}
@media (max-width:860px){
  .rc-head .section-label{display:none}
  .rc-tools{margin-inline-start:auto;gap:8px}
  .rc-sound span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rc-3d-pending .rc-stage{background-image:url(/payon-landing/receipt-poster-mobile.webp)}
  .rc[dir="rtl"] .rc-say{right:20px;left:20px}
  .rc:lang(ur) .rc-big{font-size:clamp(26px,7.4vw,36px);line-height:1.85}
  .rc:lang(ar) .rc-big{font-size:clamp(32px,9vw,44px)}
  .rc:lang(bg) .rc-big{font-size:clamp(34px,9.6vw,48px)}
}

/* only the active line block is ever visible (tall scripts overflow their masks) */
.rc-line-say{transition:visibility 0s}
.rc-line-say:not(.on){visibility:hidden;transition:visibility 0s .4s}
.rc:lang(ur) .rc-sub{font-size:18px;line-height:2.3}
@media (prefers-reduced-motion:reduce){.rc-paper,.rc-m>span{transition:none!important}.rc-r.out,.rc-flash{animation:none}}