/* Interactive demo. Brand tokens come from the base stylesheet in the page head. */
.pt-wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.pt-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0}
.pt-intro{padding:18px 0 8px;max-width:820px}
.pt-kicker{font-family:var(--display);font-style:italic;font-size:19px;color:var(--forest);margin-bottom:10px}
.pt-intro h1{font-size:clamp(30px,4.6vw,52px);line-height:1.06}
.pt-intro .lede{margin-top:14px;font-size:19px}
.pt-foot{padding:40px 0 48px;font-size:14px;color:var(--ink-62)}

.pt-steps{display:flex;gap:6px;overflow-x:auto;padding:18px 0 14px;position:sticky;top:0;background:var(--paper);z-index:5;border-bottom:1px solid var(--rule);scrollbar-width:none}
.pt-steps::-webkit-scrollbar{display:none}
.pt-steps button{font:inherit;font-size:14px;white-space:nowrap;border:1px solid var(--rule);background:transparent;color:var(--ink-62);border-radius:999px;padding:8px 14px;cursor:pointer;display:flex;gap:8px;align-items:center}
.pt-steps button b{font-family:var(--display);font-weight:500}
.pt-steps button.done{color:var(--ink);border-color:rgba(34,26,23,.3)}
.pt-steps button[aria-current="step"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.pt-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);grid-template-areas:"head stage" "body stage";gap:8px 56px;padding:34px 0 20px;align-items:start}
.pt-main[data-step="2"],.pt-main[data-step="3"],.pt-main[data-step="5"]{grid-template-columns:minmax(0,1fr) minmax(0,520px)}
.pt-head{grid-area:head}.pt-body{grid-area:body}
.pt-stage{grid-area:stage;position:sticky;top:84px}
.pt-count{font-size:14px;color:var(--ink-55);margin-bottom:8px}
.pt-head h2{font-size:clamp(28px,3.6vw,38px);margin-bottom:12px}
.pt-head p{font-size:18px;color:var(--ink-85);max-width:52ch}
@media (max-width:900px){
  .pt-main,.pt-main[data-step]{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "body";gap:18px;padding-top:24px}
  .pt-stage{position:static}
  .pt-main[data-step="0"] .pt-stage,.pt-main[data-step="1"] .pt-stage{position:sticky;top:62px;z-index:4;background:var(--paper);padding:6px 0 10px;border-bottom:1px solid var(--rule)}
  .pt-main[data-step="0"] .ph,.pt-main[data-step="1"] .ph{font-size:11px;max-width:300px}
  .pt-main[data-step="0"] .ph-label,.pt-main[data-step="1"] .ph-label{display:none}
}

/* form controls */
.f{margin-top:22px}
.f>label,.f>.lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:500;margin-bottom:8px}
.f output{font-family:var(--display);font-size:18px;font-weight:400}
.f input[type=text],.f input[type=number],.f select,.f textarea{width:100%;font:inherit;font-size:16px;padding:12px;border:1px solid var(--rule);border-radius:4px;background:var(--white);color:var(--ink)}
.f textarea{min-height:92px;resize:vertical;line-height:1.45}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--honey);outline-offset:1px;border-color:transparent}
.f input[type=range]{width:100%;accent-color:var(--ink)}
.f small{display:block;font-size:13px;color:var(--ink-62);margin-top:6px}
.sw{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sw button{width:36px;height:36px;border-radius:50%;border:2px solid var(--paper);outline:1px solid var(--rule);cursor:pointer;padding:0}
.sw button[aria-pressed="true"]{outline:2px solid var(--ink)}
.sw label{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-62);margin-left:6px;cursor:pointer}
.sw input[type=color]{width:36px;height:36px;border:0;padding:0;background:none;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button,.chips span{font:inherit;font-size:14px;border:1px solid var(--rule);background:transparent;border-radius:999px;padding:8px 14px;cursor:pointer;color:var(--ink-85)}
.chips span{cursor:default;background:var(--white)}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips button em{font-style:normal;font-size:11px;opacity:.7;margin-left:6px}
.desc{margin-top:12px;font-size:16px;color:var(--ink-85);max-width:54ch}
.logo-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.logo-row .mono,.logo-row img{width:48px;height:48px;border-radius:10px;object-fit:cover}
.logo-row .mono{background:var(--cbg);color:var(--cfg);font-size:18px}
.file{position:relative;overflow:hidden}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pt-nav{display:flex;gap:14px;align-items:center;margin-top:34px;padding-top:22px;border-top:1px solid var(--rule)}
.pt-nav .btn{min-width:130px}
.btn[disabled]{opacity:.4;cursor:default}
.btn-link{background:none;border:0;font:inherit;font-family:var(--display);font-style:italic;font-size:18px;color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(34,26,23,.4);cursor:pointer;padding:0}
.hint{font-family:var(--display);font-style:italic;font-size:18px;color:var(--forest);margin-top:16px}
.note-box{background:var(--white);border:1px solid var(--rule);border-radius:6px;padding:16px 18px;margin-top:20px;font-size:15px}
.note-box b{font-family:var(--display);font-weight:500;font-size:18px;display:block;margin-bottom:4px}
.row-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* phones */
.ph{background:var(--white);border:1px solid var(--rule);border-radius:2.4em;padding:.75em;font-size:15px;max-width:340px;margin:0 auto;width:100%}
.ph-screen{border-radius:1.7em;background:var(--oat);padding:.8em;min-height:24em;display:flex;flex-direction:column;gap:.7em;overflow:hidden;position:relative}
.ph-screen.plain{background:transparent;padding:0;min-height:0}
.ph-label{text-align:center;font-size:13px;color:var(--ink-62);margin-top:8px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.duo .ph{font-size:12.5px}
@media (max-width:900px){.duo{gap:8px}.duo .ph{font-size:9.6px;border-radius:2.2em}}

/* the card (em-based so it scales with the phone) */
.dc{background:var(--cbg);color:var(--cfg);border-radius:1.05em;padding:1.3em 1.3em 1.15em;position:relative}
.dc-top{display:flex;justify-content:space-between;align-items:center;gap:.6em;font-size:.82em;opacity:.95}
.dc-top .k{opacity:.85}
.dc-logo{width:2.3em;height:2.3em;border-radius:.55em;object-fit:cover;background:#fff;display:block}
.mono{display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:.55em;background:var(--cfg);color:var(--cbg);font-family:var(--display);font-weight:500;font-size:1em;letter-spacing:.02em}
.dc-biz{font-family:var(--display);font-weight:500;font-size:1.8em;line-height:1.05;margin:.75em 0 .1em;overflow-wrap:anywhere}
.dc-rew{font-family:var(--display);font-style:italic;font-size:1.05em;opacity:.92;overflow-wrap:anywhere}
.dc-face{margin-top:1.3em;min-height:4.2em}
.dc-sub{font-size:.82em;opacity:.85;margin-top:.6em}
.dc-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:1.1em;font-size:.82em;gap:.6em}
.dc-foot .l{opacity:.75}.dc-foot .v{font-family:var(--display);font-size:1.25em}
.dc-qr{width:3.4em;height:3.4em;border-radius:.4em;background:var(--cfg);flex:none;padding:.35em}
.dc-qr svg{display:block;width:100%;height:100%}
.rings{display:grid;grid-template-columns:repeat(var(--n,10),1fr);gap:.4em}
.rings i{aspect-ratio:1;border-radius:50%;border:.08em solid var(--csoft);display:block}
.rings i.on{background:var(--cfg);border-color:var(--cfg)}
.rings i.last{border-style:dashed}
.rings i.new,.cells i.new,.tl i.new{animation:pop .5s ease-out both}
.rings i.rw,.cells i.rw{background:var(--honey);border-color:var(--honey);border-style:solid}
.big{font-family:var(--display);font-size:2.5em;line-height:1}
.big small{font-family:var(--body);font-size:.34em;opacity:.8;margin-left:.5em}
.bar{height:.4em;border-radius:.2em;background:var(--csoft);margin-top:.8em;overflow:hidden}
.bar i{display:block;height:100%;background:var(--cfg);width:var(--w);transition:width .5s ease}
.bar i.h{background:var(--honey)}
.cells{display:grid;grid-template-columns:repeat(5,1fr);gap:.4em}
.cells i{display:block;aspect-ratio:1.6;border-radius:.35em;border:.08em solid var(--csoft)}
.cells i.on{background:var(--cfg);border-color:var(--cfg)}
.badge{display:inline-block;padding:.35em .8em;border-radius:99em;background:var(--honey);color:#221A17;font-weight:600;font-size:.85em}
.code{font-family:var(--display);font-size:1.3em;letter-spacing:.05em;border:.08em dashed var(--csoft);border-radius:.45em;padding:.4em .6em;text-align:center;margin-bottom:.7em;overflow-wrap:anywhere}
.tl{display:grid;grid-template-columns:repeat(var(--n,6),1fr);position:relative}
.tl:before{content:"";position:absolute;left:6%;right:6%;top:.45em;height:.06em;background:var(--csoft)}
.tl div{text-align:center;font-size:.72em;opacity:.85}
.tl i{display:block;width:.95em;height:.95em;border-radius:50%;border:.08em solid var(--csoft);margin:0 auto .35em;position:relative;background:var(--cbg);font-size:1.3em}
.tl i.on{background:var(--cfg);border-color:var(--cfg)}
.tl i.next{border-style:dashed}
.dc.ready{outline:.18em solid var(--honey);outline-offset:.15em}
.dc .ready-line{margin-top:.8em;font-size:.82em;font-weight:600;color:var(--honey)}
@keyframes pop{from{transform:scale(.4);opacity:.2}to{transform:scale(1);opacity:1}}

/* notifications */
.pu{background:var(--paper);border:1px solid var(--rule);border-radius:1em;padding:.75em .85em;display:flex;gap:.75em;align-items:center;text-align:left}
.pu.in{animation:slide .45s ease-out both}
.pu .ic{width:2.3em;height:2.3em;border-radius:.6em;background:var(--cbg,var(--forest));flex:none;display:grid;place-items:center;overflow:hidden}
.pu .ic.h{background:var(--honey)}
.pu .ic img{width:100%;height:100%;object-fit:cover;background:#fff}
.pu .ic span{font-family:var(--display);color:var(--cfg,#FBF8F3);font-size:.95em}
.pu b{display:flex;justify-content:space-between;gap:.6em;font-size:.92em;font-weight:600;color:var(--ink)}
.pu b small{font-weight:400;color:var(--ink-55);font-size:.85em}
.pu span.t{display:block;font-size:.86em;color:var(--ink-62);line-height:1.35}
@keyframes slide{from{transform:translateY(-.8em);opacity:0}to{transform:none;opacity:1}}
.lock-time{font-family:var(--display);font-size:3.6em;line-height:1;text-align:center;letter-spacing:-.02em;margin-top:.3em}
.lock-date{text-align:center;font-size:.9em;color:var(--ink-62);margin-bottom:.8em}
.lock-hint{margin:auto;font-family:var(--display);font-style:italic;color:var(--ink-55);font-size:1.05em;text-align:center}

/* join: stand, sheet, wallet */
.stand{background:var(--white);border:1px solid var(--rule);border-radius:6px;padding:1.5em 1.1em 1.2em;text-align:center;font-size:12px;position:relative;margin-top:1.4em}
.stand:after{content:"";display:block;height:.9em;margin:1.2em -1.1em -1.2em;background:var(--oat);border-top:1px solid var(--rule);border-radius:0 0 6px 6px}
.stand .mono,.stand img{margin:0 auto .8em;width:3.2em;height:3.2em;font-size:1.2em;border-radius:.7em;--cfg:var(--sbg);--cbg:var(--sfg)}
.stand img{object-fit:cover;display:block}
.stand h4{font-family:var(--display);font-weight:500;font-size:1.5em;line-height:1.1;margin:0 0 .3em}
.stand p{margin:0 auto .9em;font-size:1em;color:var(--ink-62)}
.stand .qrbig{width:9em;height:9em;margin:0 auto;padding:.5em;border:1px solid var(--rule);border-radius:.5em;background:#fff;position:relative}
.stand .qrbig svg{width:100%;height:100%;display:block}
.stand.scanning .qrbig:after{content:"";position:absolute;left:6%;right:6%;height:2px;background:var(--honey);top:10%;animation:scan 1s ease-in-out infinite alternate}
@keyframes scan{to{top:88%}}
@media (max-width:900px){.stand{font-size:9.6px}}
.home-ic{display:grid;grid-template-columns:repeat(4,1fr);gap:.9em;padding:.6em}
.home-ic i{display:block;aspect-ratio:1;border-radius:.8em;background:rgba(34,26,23,.08)}

.sheet{background:var(--paper);border-radius:1.2em;padding:.8em;margin-top:auto;animation:up .4s ease-out both;border:1px solid var(--rule)}
.sheet-bar{display:flex;justify-content:space-between;align-items:center;font-size:.9em;margin-bottom:.7em}
.sheet-bar b{font-weight:600}
.sheet-bar button{font:inherit;font-size:1em;background:none;border:0;color:var(--ink-62);cursor:pointer;padding:.2em}
.sheet-bar button.go{color:var(--ink);font-weight:600;background:var(--honey);border-radius:99em;padding:.3em .9em}
.sheet .gbtn{display:block;width:100%;margin-top:.8em;font:inherit;font-size:.95em;font-weight:500;background:var(--ink);color:var(--paper);border:0;border-radius:99em;padding:.8em;cursor:pointer}
@keyframes up{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
.w-title{font-family:var(--display);font-size:1.5em;padding:.1em .2em}
.bank{height:2.6em;border-radius:1em 1em 0 0;background:#8C8F94;color:#fff;font-size:.8em;padding:.6em 1em;margin-bottom:-1.1em;opacity:.9}
.dc.added{animation:up .5s ease-out both}
.toast{background:var(--ink);color:var(--paper);border-radius:99em;padding:.5em 1em;font-size:.85em;text-align:center;align-self:center;animation:slide .4s ease-out both}

/* staff phone */
.st-h{display:flex;justify-content:space-between;align-items:center;font-size:.85em;color:var(--ink-62)}
.st-h b{color:var(--ink);font-family:var(--display);font-weight:500;font-size:1.25em}
.vf{aspect-ratio:1;border-radius:1em;background:#2a2624;position:relative;display:grid;place-items:center;color:rgba(251,248,243,.7);font-size:.9em;overflow:hidden}
.vf:before{content:"";position:absolute;inset:14%;border:.14em solid rgba(251,248,243,.85);border-radius:.8em;clip-path:polygon(0 0,30% 0,30% 6%,70% 6%,70% 0,100% 0,100% 30%,94% 30%,94% 70%,100% 70%,100% 100%,70% 100%,70% 94%,30% 94%,30% 100%,0 100%,0 70%,6% 70%,6% 30%,0 30%)}
.vf.on:after{content:"";position:absolute;left:16%;right:16%;height:.14em;background:var(--honey);top:18%;animation:scan 1s ease-in-out infinite alternate}
.st-card{background:var(--white);border:1px solid var(--rule);border-radius:.9em;padding:.8em .9em}
.st-card b{font-family:var(--display);font-weight:500;font-size:1.2em;display:block}
.st-card span{font-size:.88em;color:var(--ink-62)}
.st-btn{font:inherit;font-size:1em;font-weight:500;border:0;border-radius:.6em;padding:.85em;background:var(--ink);color:var(--paper);cursor:pointer;width:100%}
.st-btn.sec{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.st-btn.hon{background:var(--honey);color:var(--ink)}
.st-btn[disabled]{opacity:.35;cursor:default}
.st-pts{display:grid;gap:.45em}
.st-pts button{display:flex;justify-content:space-between}
.st-undo{font:inherit;font-size:.85em;background:none;border:0;color:var(--ink-62);text-decoration:underline;cursor:pointer;align-self:center}
.log{list-style:none;margin:10px 0 0;padding:0;font-size:14px}
.log li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--rule)}
.log li span{color:var(--ink-62);white-space:nowrap}

/* reports */
.dashb{max-width:none}
.kpis .d.live{color:var(--honey);font-weight:600}
.feed{list-style:none;margin:0;padding:0;font-size:12.5px}
.feed li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid var(--rule)}
.feed li:first-child{border-top:0}
.feed span{color:var(--ink-55);white-space:nowrap}
.wk i.live{background:var(--honey)}
.roi{background:var(--white);border:1px solid var(--rule);border-radius:6px;padding:22px 24px;margin-top:26px}
.roi h3{margin-bottom:4px}
.roi .res{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.roi .res div span{display:block;font-size:13px;color:var(--ink-62)}
.roi .res div b{font-family:var(--display);font-weight:500;font-size:28px;line-height:1.15}
.roi .res div b.g{color:var(--forest)}
.roi .net{font-family:var(--display);font-style:italic;font-size:19px;color:var(--forest);margin-top:12px}

/* go live */
.sum{margin:18px 0 0;display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;font-size:16px}
.sum dt{color:var(--ink-62)}.sum dd{margin:0}
.sum dd i{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;margin-right:6px;border:1px solid var(--rule)}
.incl{margin:18px 0 0;padding-left:18px}
.incl li{margin-bottom:5px}
.pt-form{background:var(--white);border:1px solid var(--rule);border-radius:6px;padding:22px 24px;margin-top:26px}
.pt-form .f{margin-top:14px}
.pt-form .btn{width:100%;margin-top:18px}

/* ---- real-phone chrome ---- */
.ph{border:0;background:#1d1a19;padding:.45em;border-radius:2.7em}
.ph-screen{border-radius:2.3em;padding:2.6em .8em 1.5em}
.ph.and{border-radius:2.1em}.ph.and .ph-screen{border-radius:1.7em}
.ph:has(>.ph-screen.plain){background:var(--white);border:1px solid var(--rule);padding:.75em;border-radius:2.4em}
.ph-screen.plain{padding:0}
.sb{position:absolute;top:0;left:0;right:0;height:2.4em;display:flex;align-items:center;justify-content:space-between;padding:.35em 1.5em 0;font-size:.82em;font-weight:600;z-index:6;color:var(--ink)}
.sb .isl{position:absolute;left:50%;top:.62em;transform:translateX(-50%);width:5.6em;height:1.55em;border-radius:1em;background:#0c0b0b}
.sb.and .isl{width:.95em;height:.95em;top:.8em}
.sb-r{display:flex;gap:.35em;align-items:center}
.sb-r svg{height:.8em;width:auto;fill:currentColor}
.homebar{position:absolute;left:50%;bottom:.45em;transform:translateX(-50%);width:34%;height:.3em;border-radius:1em;background:var(--ink);opacity:.75;z-index:6}
.ph-screen.camv{padding:0;background:#0b0a0a}
.ph-screen.camv .sb{color:#fff}.ph-screen.camv .homebar{background:#fff}

@keyframes nudge{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

/* ---- camera viewfinder ---- */
.cam{position:relative;flex:1;min-height:27em;display:flex;flex-direction:column;overflow:hidden;color:#fff;border-radius:inherit}
.cam-scene{position:absolute;inset:-4%;display:grid;place-items:center;background:
  radial-gradient(120% 60% at 30% 0%,rgba(255,236,200,.55),transparent 60%),
  linear-gradient(180deg,#8d7763 0%,#6d5a4a 46%,#3d3029 46.5%,#2a211c 100%);
  animation:sway 5s ease-in-out infinite}
.cam-scene:before{content:"";position:absolute;inset:0;background:radial-gradient(18% 10% at 78% 22%,rgba(255,255,255,.35),transparent 70%),radial-gradient(30% 14% at 12% 30%,rgba(0,0,0,.25),transparent 70%);filter:blur(6px)}
.cam-vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45) 100%);pointer-events:none}
@keyframes sway{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(.5em,-.3em) rotate(.5deg)}50%{transform:translate(-.3em,.4em) rotate(-.4deg)}75%{transform:translate(-.5em,-.2em) rotate(.3deg)}}
.cam-scene>*{transition:filter .35s}
.cam:not(.locked) .cam-scene>*{filter:blur(1.3px)}
.cam-stand{position:relative;background:#fdfcfa;color:#221A17;border-radius:.5em;padding:1.2em 1em 1em;width:60%;text-align:center;transform:perspective(40em) rotateY(-9deg) rotateX(5deg) translateY(-1.5em);box-shadow:.8em 1.4em 1.6em rgba(0,0,0,.35)}
.cam-stand .mono,.cam-stand img{width:2.4em;height:2.4em;border-radius:.55em;margin:0 auto .5em;display:grid;place-items:center;object-fit:cover;font-size:.9em}
.cam-stand b{display:block;font-family:var(--display);font-weight:500;font-size:1em;line-height:1.1;margin-bottom:.7em}
.cam-qr{position:relative;width:72%;margin:0 auto;padding:.35em;background:#fff;border-radius:.3em}
.cam-qr svg{display:block;width:100%;height:auto}
.brk,.cam-phone .dc-qr:after{content:"";position:absolute;inset:-55%;border:.24em solid #FFD60A;border-radius:.9em;opacity:0;transition:inset .45s cubic-bezier(.2,.9,.3,1.2),opacity .25s;
  clip-path:polygon(0 0,28% 0,28% 12%,72% 12%,72% 0,100% 0,100% 28%,88% 28%,88% 72%,100% 72%,100% 100%,72% 100%,72% 88%,28% 88%,28% 100%,0 100%,0 72%,12% 72%,12% 28%,0 28%);pointer-events:none}
.cam:not(.locked) .brk,.cam:not(.locked) .cam-phone .dc-qr:after{opacity:.55;animation:hunt 1.1s ease-in-out infinite}
.cam.locked .brk{inset:-9%;opacity:1}
.cam.locked .cam-phone .dc-qr:after{inset:-24%;opacity:1;border-width:.5em}
@keyframes hunt{0%,100%{transform:translate(-6%,4%) scale(1)}50%{transform:translate(7%,-5%) scale(.92)}}
.cam-hint{position:relative;z-index:3;margin:3.4em auto 0;background:rgba(0,0,0,.45);border-radius:99em;padding:.35em .9em;font-size:.78em;transition:opacity .3s;text-align:center;max-width:86%}
.cam.locked .cam-hint{opacity:0}
.cam-pill{position:absolute;z-index:4;left:50%;top:60%;transform:translate(-50%,.8em) scale(.9);opacity:0;pointer-events:none;transition:all .35s cubic-bezier(.2,.9,.3,1.3);
  font:inherit;font-size:.82em;font-weight:600;border:0;cursor:pointer;display:flex;align-items:center;gap:.45em;white-space:nowrap;background:#FFD60A;color:#1d1a19;border-radius:99em;padding:.55em 1em}
.cam-pill svg{width:1.1em;height:1.1em;flex:none}
.cam-pill.and{background:#fff;color:#1f1f1f;border-radius:1.1em;padding:.6em .9em;text-align:left;font-weight:500;box-shadow:0 .3em 1em rgba(0,0,0,.3)}
.cam-pill.and span{display:grid;line-height:1.2}.cam-pill.and b{font-size:.85em;font-weight:400;opacity:.65}
.cam-pill.and svg{width:1.5em;height:1.5em;color:#1a73e8}
.cam.locked .cam-pill{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto;transition-delay:.25s}
.cam-ok{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);opacity:0;transition:all .3s cubic-bezier(.2,.9,.3,1.4);background:#fff;color:#1d1a19;font-weight:600;font-size:.9em;border-radius:99em;padding:.6em 1.1em;white-space:nowrap;box-shadow:0 .4em 1.2em rgba(0,0,0,.35)}
.cam.locked .cam-ok{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.35s}
.cam.locked:after{content:"";position:absolute;inset:0;background:#fff;opacity:0;animation:flash .45s ease-out;pointer-events:none;z-index:5}
@keyframes flash{0%{opacity:.35}100%{opacity:0}}
.cam-ui{position:relative;z-index:3;margin-top:auto;padding:1.5em 0 2em;background:linear-gradient(transparent,rgba(0,0,0,.6) 45%);display:grid;gap:.7em;justify-items:center}
.cam-zoom{display:flex;gap:.4em;background:rgba(0,0,0,.35);border-radius:99em;padding:.25em}
.cam-zoom span{width:2.1em;height:2.1em;border-radius:50%;display:grid;place-items:center;font-size:.68em;font-weight:600}
.cam-zoom .on{background:rgba(0,0,0,.55);color:#FFD60A}
.cam-modes{display:flex;gap:1.1em;font-size:.66em;font-weight:600;letter-spacing:.06em}
.cam-modes .on{color:#FFD60A}
.cam.and .cam-modes{letter-spacing:0;font-size:.74em;align-items:center}.cam.and .cam-modes .on{color:#1d1a19;background:#fff;border-radius:99em;padding:.15em .7em}
.cam.and .cam-zoom .on{color:#fff}
.cam-row{display:flex;align-items:center;justify-content:space-between;width:78%}
.cam-thumb{width:2.4em;height:2.4em;border-radius:.5em;background:linear-gradient(135deg,#a08a75,#4a3b31);border:.1em solid rgba(255,255,255,.7)}
.cam-shutter{width:3.7em;height:3.7em;border-radius:50%;background:#fff;box-shadow:0 0 0 .22em #0b0a0a,0 0 0 .42em #fff}
.cam-flip{width:2.4em;height:2.4em;border-radius:50%;background:rgba(255,255,255,.18)}
.cam-phone{position:relative;width:58%;background:#151312;border-radius:1.5em;padding:.35em;transform:perspective(40em) rotateY(10deg) rotateX(4deg) rotate(-4deg) translateY(-1.6em);box-shadow:-.8em 1.4em 1.8em rgba(0,0,0,.45)}
.cam-phone .isl{position:absolute;left:50%;top:.75em;transform:translateX(-50%);width:28%;height:.7em;border-radius:1em;background:#000;z-index:2}
.cam-phone-scr{background:#efeae2;border-radius:1.2em;padding:2em .45em 1.4em;font-size:.42em}
.cam-phone .dc-qr{position:relative}
.cam-phone .dc{outline:0}
.present{margin-top:auto;text-align:center;font-family:var(--display);font-style:italic;font-size:.95em;color:var(--ink-55)}
.vf{background:#1d1a19;color:rgba(251,248,243,.55);aspect-ratio:1.25}
.vf:before{display:none}.vf svg{width:34%;height:34%}
@media (prefers-reduced-motion:reduce){.cam-scene,.home-ic .camapp,.brk,.cam-phone .dc-qr:after{animation:none!important}}
.home-ic{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;flex:none}
.home-ic i{width:100%;height:auto;min-width:0}
.ph-screen:not(.plain){min-height:31em}
.cam-pill{top:65%}
.home-ic .camapp{position:relative;width:100%;height:0;padding:0 0 100%;display:block;border:0;border-radius:.8em;background:var(--ink);color:var(--paper);cursor:pointer;animation:nudge 1.8s ease-in-out infinite}
.home-ic .camapp svg{position:absolute;left:21%;top:21%;width:58%;height:58%}
.cam-pill{max-width:90%}
.cam-pill.and{white-space:normal}

.ph-screen.camv{display:flex}
.ph-screen.camv .cam{border-radius:inherit}

/* ---- every phone at real phone proportions (9:19.3 screen) ---- */
.ph{max-width:300px;font-size:13.5px}
.ph-screen:not(.plain){aspect-ratio:9/19.3;min-height:0}
.lockbtns{margin-top:auto;display:flex;justify-content:space-between;padding:0 .6em .4em}
.lockbtns i{width:3em;height:3em;border-radius:50%;background:rgba(34,26,23,.1)}
.lock-hint{margin:auto}
@media (max-width:900px){
  /* design + offer steps keep a compact sticky card on small screens: a full phone would cover the controls */
  .pt-main[data-step="0"] .ph,.pt-main[data-step="1"] .ph{background:var(--white);border:1px solid var(--rule);padding:.75em;border-radius:2.4em}
  .pt-main[data-step="0"] .ph-screen,.pt-main[data-step="1"] .ph-screen{aspect-ratio:auto;padding:0;background:transparent;border-radius:0}
  .pt-main[data-step="0"] .ph :is(.sb,.homebar,.w-title,.bank),.pt-main[data-step="1"] .ph :is(.sb,.homebar,.w-title,.bank){display:none}
}

/* notifications arrive as banners over the app, like on a real phone */
.banner-slot{position:absolute;left:.5em;right:.5em;top:2.7em;z-index:7;pointer-events:none}
.banner{animation:banner 5s ease both}
.banner .pu{border-color:rgba(34,26,23,.25)}
@keyframes banner{0%{transform:translateY(-140%);opacity:0}7%,88%{transform:none;opacity:1}100%{transform:translateY(-140%);opacity:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.toast{position:absolute;left:50%;bottom:2.6em;transform:translateX(-50%);white-space:nowrap;animation:fade .4s ease-out both;z-index:6}
.sheet{margin-top:auto}
@media (max-width:900px){.duo .ph{font-size:9px}}
@media (prefers-reduced-motion:reduce){.banner{animation:none}}
.sheet .dc{font-size:.8em}
@media (max-width:900px){.duo .sheet .dc{font-size:.74em}.duo .ph .dc{font-size:.9em}.duo .sheet{padding:.6em}}
/* mobile tap targets */
.pt-top .link{display:inline-block;padding:10px 0}
.sw button{width:40px;height:40px}
.btn-link{padding:10px 0}
.chips button em{font-size:12px}

/* shorter 9:16 screens where the content is a card or a few notifications; the join step keeps full height for the camera and the add sheet */
.ph-screen:not(.plain){aspect-ratio:9/16}
.pt-main[data-step="2"] .ph-screen:not(.plain){aspect-ratio:9/19.3}
@media (max-width:900px){.pt-main[data-step="3"] .ph-screen:not(.plain){aspect-ratio:9/17.6}}

/* the customer's phone as the staff camera sees it: a real phone held up across the counter */
.cam-phone{position:relative;width:44%;max-width:13em;background:#141211;border-radius:15%/7%;padding:2.2%;
  transform:perspective(40em) rotateY(12deg) rotateX(6deg) rotate(-5deg) translateY(-1em);
  box-shadow:-.8em 1.4em 1.8em rgba(0,0,0,.45),inset 0 0 0 .08em #3a3533}
.cam-phone:before{content:"";position:absolute;right:-.2em;top:24%;width:.2em;height:13%;background:#2c2826;border-radius:0 .2em .2em 0}
.cam-phone:after{content:"";position:absolute;left:-.2em;top:19%;width:.2em;height:8%;background:#2c2826;border-radius:.2em 0 0 .2em;box-shadow:0 2.6em 0 #2c2826}
.cam-phone-scr{position:relative;aspect-ratio:9/19.3;background:#F1ECE3;border-radius:13%/6%;overflow:hidden;font-size:.31em;
  padding:5.2em 1.1em 2.6em;display:flex;flex-direction:column;gap:.7em;box-shadow:none}
.cam-phone-scr:after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.22) 0 24%,rgba(255,255,255,0) 24.5% 100%);pointer-events:none}
.cp-sb{position:absolute;left:0;right:0;top:0;height:4.4em;display:flex;align-items:center;justify-content:space-between;padding:.9em 3em 0;font-size:1.2em;font-weight:600;color:#221A17}
.cp-isl{position:absolute;left:50%;top:1em;transform:translateX(-50%);width:30%;height:2.2em;border-radius:2em;background:#0c0b0b}
.cp-bat{width:2.2em;height:1em;border-radius:.3em;border:.15em solid #221A17;opacity:.8}
.cp-hb{position:absolute;left:50%;bottom:.9em;transform:translateX(-50%);width:34%;height:.45em;border-radius:1em;background:#221A17;opacity:.75}
.cam-phone-scr .w-title{font-size:1.5em;padding:0 .2em}
.cam-phone-scr .dc{outline:0}
.cam-phone{width:52%;padding:.3em}
/* side-by-side phones on small screens: contents scale with the phone's width, so they fit the same way they do on desktop */
@media (max-width:900px){
  .duo .ph{font-size:calc((100vw - 44px) * .0245)}
  .pt-main[data-step="3"] .ph-screen:not(.plain){aspect-ratio:9/16}
}