/* A seekable product film. Geometry stays separate from the motion timeline. */
.hero-explainer{position:relative;background:#f4f6f8;color:#182936;scroll-margin-top:60px}
.hero-anchor{position:absolute;top:0;scroll-margin-top:60px}
.hero-sticky{position:relative;max-width:1540px;margin:auto}
.hero-desktop-scene{display:none}
.hero-chapter{padding:50px 24px 20px}
.hero-chapter-copy{max-width:560px;margin:auto;text-align:center}
.hero-product-category{display:block;font-size:13px;font-weight:700;color:#526374;margin-bottom:14px;line-height:1.5}
.product-home .hero-chapter :is(h1,h2){font-size:clamp(36px,4.4vw,66px);line-height:1.1;letter-spacing:0;text-wrap:balance;font-weight:700;margin:0 0 24px}
.hero-chapter :is(h1,h2) span{color:#60717f}
@media(min-width:801px) and (min-height:561px){
 .product-home .hero-chapter h1{font-size:clamp(36px,3.6vw,54px);line-height:1.12}
}
.hero-chapter-copy>p{font-size:16px;line-height:1.85;color:#526374;margin:0}
.hero-demo-link{margin-top:25px;border-radius:28px;min-height:46px;box-shadow:none!important;font-size:14px;padding:11px 22px;display:inline-flex;gap:12px}
.hero-scroll-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#526374;margin-top:20px}
.hero-scroll-hint .icon{width:16px;height:16px;transform:rotate(-90deg)}
.hero-mobile-scene{width:min(620px,100%);margin:20px auto 0}
.hero-controls{width:min(1240px,calc(100% - 80px));margin:auto;padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #dce3e9;font-size:12px;color:#526374}
.hero-controls nav{display:none}
.hero-controls button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
.hero-static-toggle{min-height:44px;padding:8px 0;text-decoration:underline;text-underline-offset:5px}
.hero-static-toggle[hidden]{display:none}
.hero-controls button:focus-visible{outline:3px solid #245dcc;outline-offset:5px;border-radius:4px}
.hero-example-label{font-size:12px}
.has-scroll-film{height:235svh}
.has-scroll-film .hero-sticky{height:calc(100svh - 60px);position:sticky;top:60px;min-height:560px;overflow:clip}
.has-scroll-film .hero-desktop-scene{display:block;position:absolute;left:3%;right:43%;max-width:700px;top:46%;transform:translateY(-50%)}
.has-scroll-film .hero-chapters{position:absolute;right:max(5%,30px);width:36%;top:50%;transform:translateY(-50%);height:410px}
.has-scroll-film .hero-chapter{position:absolute;inset:0;display:flex;align-items:center;padding:0;opacity:0;pointer-events:none}
.has-scroll-film .hero-chapter:first-child{opacity:1}
.has-scroll-film .hero-chapter:not([inert]) a{pointer-events:auto}
.has-scroll-film .hero-chapter-copy{width:100%;text-align:right}
.has-scroll-film .hero-scroll-hint{justify-content:flex-start}
.has-scroll-film .hero-mobile-scene{display:none}
.has-scroll-film .hero-controls{position:absolute;inset:auto 0 0}
.has-scroll-film .hero-controls nav{display:flex;gap:20px;width:390px;max-width:50%}
.hero-controls nav button{position:relative;flex:1;text-align:right;padding:15px 0;min-height:46px;white-space:nowrap}
.hero-controls nav button i{position:absolute;bottom:3px;right:0;left:0;height:2px;background:#d1dae2}
.hero-controls nav button[aria-current=step]{color:#245dcc;font-weight:700}
.hero-controls nav button i::after{content:"";position:absolute;inset:0;background:#245dcc;transform:scaleX(var(--chapter-progress,0));transform-origin:right}
.ex-stage{position:relative;aspect-ratio:1.13;container-type:inline-size;direction:rtl;font-family:'Tel Aviv',sans-serif;font-weight:400;isolation:isolate}
.ex-stage .icon{width:3.3cqw;height:3.3cqw;flex:none;vertical-align:middle}
.ex-floor{position:absolute;inset:80% 9% 7%;background:radial-gradient(ellipse,#172d401b,transparent 67%);pointer-events:none}
.ex-object{position:absolute;box-sizing:border-box}
.ex-phone{width:34cqw;height:66cqw;left:33%;top:calc(50% - 33cqw);padding:1cqw;border:1px solid #93a2b1;border-radius:5.5cqw;background:linear-gradient(115deg,#f9fcff,#b4c0cc 55%,#f0f4f8);box-shadow:3px 3px 0 -1px #889aa9,0 24px 34px -21px #223a5366;z-index:5}
.ex-phone-screen{position:relative;overflow:hidden;width:100%;height:100%;background:#fafbfd;border-radius:4.6cqw;border:1px solid #a2adba}
.ex-status{position:absolute;top:2cqw;left:2cqw;right:2cqw;display:flex;align-items:center;justify-content:space-between;direction:ltr;font-size:1.7cqw;color:#182d3e}
.ex-status i{position:absolute;width:31%;height:2.4cqw;border-radius:2cqw;background:#142432;left:34%}
.ex-status svg{width:4.6cqw;height:2cqw}
.ex-home-bar{position:absolute;bottom:1.5cqw;width:32%;height:.65cqw;background:#263b4d;border-radius:1cqw;left:34%}
.ex-chat,.ex-customer{position:absolute;inset:7cqw 2cqw 4cqw;color:#263d52}
.ex-chat header{display:flex;align-items:center;gap:1.5cqw;padding-bottom:2.5cqw;border-bottom:1px solid #e0e6ed}
.ex-avatar{display:grid;place-items:center;width:5.7cqw;height:5.7cqw;flex:none;border-radius:50%;background:#e5ecf5;color:#466082;font-size:2.8cqw;font-weight:700}
.ex-chat header strong,.ex-chat header small{display:block}
.ex-chat header strong{font-size:2.5cqw}.ex-chat header small{font-size:1.5cqw;margin-top:.6cqw;color:#596e82}
.ex-message-in,.ex-message-out{font-size:2.3cqw;line-height:1.6;padding:2.4cqw 2.1cqw;border-radius:2.2cqw;margin-top:4cqw;width:90%}
.ex-message-in{background:#e7edf4;border-bottom-right-radius:.6cqw;color:#273f55}
.ex-message-out{background:#2856a0;color:#fff;margin-right:auto;border-bottom-left-radius:.6cqw}
.ex-waiting{display:flex;gap:1cqw;align-items:center;justify-content:center;margin-top:4cqw;color:#566b7e;font-size:1.6cqw}
.ex-waiting i{width:1cqw;height:1cqw;background:#778ba0;border-radius:50%}
.ex-notes{width:47cqw;left:26.5%;top:calc(50% - 23cqw);padding:3.3cqw;border:1px solid #d7dfe7;background:#fff;border-radius:2.5cqw;box-shadow:0 23px 38px -26px #233e5266;z-index:3}
.ex-notes header{display:flex;align-items:center;gap:1cqw;font-size:2cqw;color:#40586d}.ex-notes header small{margin-right:auto;font-size:1.5cqw;color:#5a6d7e}
.ex-notes h3{font-size:3.3cqw;margin:3cqw 0 2cqw;color:#253c51}
.ex-note-row{display:flex;justify-content:space-between;gap:1cqw;padding:2.3cqw 0;border-bottom:1px solid #e0e7ed;font-size:2cqw;color:#516478}.ex-note-row span{color:#6c5b44}
.ex-note-question{display:flex;justify-content:space-between;align-items:center;margin-top:2cqw;padding:1.5cqw 2cqw;font-size:2.3cqw;background:#f3f5f8;border-radius:1.1cqw;color:#594b39}.ex-note-question b{font-size:4cqw}
.ex-search-slip{position:absolute;left:8%;right:8%;bottom:-8cqw;display:flex;justify-content:center;align-items:center;gap:1.5cqw;font-size:2cqw;background:#fefefe;border:1px solid #d6dfe8;box-shadow:0 8px 17px -11px #32496066;padding:2cqw;border-radius:1.5cqw;color:#536b80}
.ex-customer{opacity:0}
.ex-customer>header{display:flex;align-items:center;justify-content:space-between;font-size:2.4cqw;margin:1cqw 0 3cqw}.ex-customer>header>span{font-size:1.9cqw;color:#5b6c7b}
.ex-pass{color:#f5f9ff;background:linear-gradient(135deg,#3c5773,#1d334b);border:1px solid #54718d;border-radius:2.8cqw;padding:2.2cqw 2.3cqw;box-shadow:0 10px 19px -13px #182e4466}
.ex-pass-brand{display:flex;align-items:center;gap:1.2cqw;direction:ltr;font-size:2.7cqw;margin-bottom:2cqw}.ex-pass-brand svg{width:3.8cqw;height:3.8cqw}
.ex-pass>small{display:block;font-size:1.9cqw;color:#d4e0ef}
.ex-number{display:inline-grid;position:relative;overflow:hidden;line-height:1.1;font-size:8cqw;font-weight:700;font-variant-numeric:tabular-nums;margin-block:.7cqw}
.ex-number>b{grid-area:1/1;display:block;font-weight:700}.ex-nine{opacity:0}
.ex-of{display:block;font-size:1.7cqw;color:#d4e0ef;margin-bottom:1.3cqw}
.ex-units{display:flex;gap:.6cqw;direction:rtl;margin-block:1.6cqw 2cqw}.ex-units i{flex:1;height:.8cqw;border-radius:1cqw;background:#dbe8fa}
.ex-pass footer{border-top:1px solid #7a91a766;padding-top:1.4cqw;display:flex;align-items:center;gap:1cqw;font-size:1.6cqw;color:#e0eaf6}
.ex-customer-update{display:flex;align-items:center;justify-content:center;gap:.8cqw;font-size:1.7cqw;margin-top:3cqw;color:#2e6558;opacity:0}
.ex-browser-note{font-size:1.6cqw;line-height:1.8;color:#475f74;text-align:center;margin:2cqw 0!important}
.ex-business{width:50cqw;left:25%;top:calc(50% - 28cqw);padding:3cqw;border:1px solid #d2dde7;border-radius:3cqw;background:#fff;box-shadow:0 25px 38px -25px #23425c66;z-index:4;opacity:0;color:#253e54}
.ex-business>header{display:flex;align-items:center;justify-content:space-between;padding-bottom:2cqw;border-bottom:1px solid #e2e8ef}.ex-business>header>strong{font-size:3.2cqw}.ex-business>header>strong>span{color:#245dcc}.ex-business>header>span{font-size:1.5cqw;color:#63758a}
.ex-member{display:flex;gap:1.7cqw;align-items:center;padding:1.3cqw 0}.ex-member>div{flex:1}.ex-member strong,.ex-member small{display:block}.ex-member strong{font-size:2.5cqw}.ex-member small{font-size:1.8cqw;margin-top:.6cqw;color:#5d7286}.ex-active{font-size:1.5cqw;color:#386458;background:#edf5f1;padding:.7cqw 1.2cqw;border-radius:.7cqw}
.ex-business-balance{display:flex;align-items:center;justify-content:space-between;margin-bottom:2cqw}.ex-business-balance>span:first-child{font-size:2.2cqw}.ex-business-balance .ex-number{font-size:6.5cqw}
.ex-approval{position:relative;height:6cqw;border-radius:1.4cqw;overflow:visible;background:#245dcc;color:#fff;font-size:2.1cqw}.ex-approval>div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1.3cqw;border-radius:inherit}.ex-approval-after{background:#e5f1ec;color:#2f6757;opacity:0}.ex-press-ring{position:absolute;width:5cqw;height:5cqw;right:8cqw;top:.5cqw;border:1px solid #90b5ff;border-radius:50%;opacity:0}
.ex-ledger{margin-top:1.6cqw;border-radius:1cqw;padding:1cqw}.ex-ledger h4{font-size:1.8cqw;font-weight:400;display:flex;gap:1cqw;align-items:center;color:#587087;margin:0 0 1cqw}.ex-record,.ex-issued{display:flex;align-items:center;gap:1cqw;font-size:1.9cqw;padding:.9cqw 0}.ex-record{opacity:0;border-bottom:1px solid #dce5ef}.ex-record>div,.ex-issued>div{flex:1}.ex-record strong,.ex-issued strong{font-size:1.9cqw;display:block;font-weight:400}.ex-record small,.ex-issued small{font-size:1.5cqw;display:block;margin-top:.7cqw;color:#4d6379}.ex-record>b,.ex-issued>b{font-size:2.2cqw;direction:ltr}.ex-record>span{color:#326757}
.ex-phone-caption,.ex-business-caption{position:absolute;bottom:-5cqw;left:0;right:0;text-align:center;color:#536b81;font-size:2cqw;opacity:0}
.ex-connection{position:absolute;top:47%;left:32%;right:26%;height:1px;opacity:0;z-index:2}.ex-connection span{display:block;height:100%;background:#658acc;transform-origin:right}
.ex-transfer{position:absolute;left:calc(50% - 3cqw);top:calc(47% - 3cqw);width:6cqw;height:6cqw;display:grid;place-items:center;border-radius:50%;background:#245dcc;color:#fff;font-size:2.5cqw;direction:ltr;z-index:6;opacity:0}
@media(min-width:801px) and (max-width:1100px){.has-scroll-film .hero-chapters{right:4%;width:39%}.has-scroll-film .hero-desktop-scene{left:1%;right:44%}.product-home .hero-chapter :is(h1,h2){font-size:44px}.hero-chapter-copy>p{font-size:14px}}
@media(max-width:800px),(max-height:560px){
 .hero-chapter{padding:42px 24px 25px}.hero-chapter-copy{max-width:480px}.product-home .hero-chapter :is(h1,h2){font-size:clamp(32px,8.4vw,46px);margin-bottom:19px}.hero-chapter-copy>p{font-size:14px;line-height:1.8}.hero-demo-link{font-size:13px;margin-top:20px}.hero-scroll-hint{font-size:11px;margin-top:15px}
 .hero-mobile-scene{width:min(370px,100%);margin-top:22px}.hero-mobile-scene .ex-stage{height:400px;aspect-ratio:auto;overflow:visible}
 .hero-mobile-scene .ex-notes,.hero-mobile-scene .ex-connection,.hero-mobile-scene .ex-transfer,.hero-mobile-scene .ex-floor{display:none}
 .hero-mobile-scene .ex-phone{width:210px;height:380px;left:calc(50% - 105px);top:0;transform:none!important;opacity:1!important;padding:6px;border-radius:34px;container-type:inline-size}
 .hero-mobile-scene .ex-phone-screen{border-radius:29px}.hero-mobile-scene .ex-status{font-size:10px;top:12px;left:12px;right:12px}.hero-mobile-scene .ex-status i{height:14px}.hero-mobile-scene .ex-status svg{width:26px;height:12px}
 .hero-mobile-scene .ex-chat,.hero-mobile-scene .ex-customer{inset:43px 13px 25px}.hero-mobile-scene .ex-avatar{width:32px;height:32px;font-size:17px}.hero-mobile-scene .ex-chat header{gap:8px;padding-bottom:14px}.hero-mobile-scene .ex-chat header strong{font-size:14px}.hero-mobile-scene .ex-chat header small{font-size:10px;margin-top:3px}
 .hero-mobile-scene .ex-message-in,.hero-mobile-scene .ex-message-out{font-size:14px;padding:13px 12px;border-radius:13px;margin-top:23px}.hero-mobile-scene .ex-waiting{font-size:10px;margin-top:22px;gap:6px}.hero-mobile-scene .ex-waiting i{width:6px;height:6px}
 .hero-mobile-scene .ex-customer>header{font-size:14px;margin:5px 0 17px}.hero-mobile-scene .ex-customer>header>span{font-size:11px}.hero-mobile-scene .ex-pass{padding:16px 13px;border-radius:16px}.hero-mobile-scene .ex-pass-brand{font-size:15px;gap:7px;margin-bottom:20px}.hero-mobile-scene .ex-pass-brand svg{width:22px;height:22px}.hero-mobile-scene .ex-pass>small{font-size:11px}.hero-mobile-scene .ex-number{font-size:55px;margin:4px 0}.hero-mobile-scene .ex-of{font-size:10px;margin-bottom:15px}.hero-mobile-scene .ex-units{gap:3px;margin:12px 0 16px}.hero-mobile-scene .ex-units i{height:4px}.hero-mobile-scene .ex-pass footer{font-size:10px;padding-top:11px;gap:5px}.hero-mobile-scene .ex-customer-update{font-size:11px;margin-top:15px;gap:4px}.hero-mobile-scene .ex-browser-note{font-size:10px!important;margin-top:10px!important}.hero-mobile-scene .ex-home-bar{height:4px;bottom:9px}.hero-mobile-scene .ex-phone .icon{width:16px;height:16px}
 .hero-mobile-scene .ex-business{width:100%;left:0;top:14px;transform:none!important;opacity:1!important;padding:20px;border-radius:20px}.hero-mobile-scene .ex-business>header>strong{font-size:23px}.hero-mobile-scene .ex-business>header>span{font-size:10px}.hero-mobile-scene .ex-member{gap:10px;padding:17px 0}.hero-mobile-scene .ex-member strong{font-size:17px}.hero-mobile-scene .ex-member small{font-size:12px}.hero-mobile-scene .ex-active{font-size:10px;padding:4px 8px}.hero-mobile-scene .ex-business-balance>span:first-child{font-size:14px}.hero-mobile-scene .ex-business .ex-number{font-size:38px}.hero-mobile-scene .ex-approval{height:42px;font-size:14px;border-radius:8px}.hero-mobile-scene .ex-ledger{margin-top:15px;padding:10px}.hero-mobile-scene .ex-ledger h4{font-size:12px;margin-bottom:8px}.hero-mobile-scene .ex-record,.hero-mobile-scene .ex-issued{padding:8px 0;gap:7px}.hero-mobile-scene .ex-record strong,.hero-mobile-scene .ex-issued strong{font-size:13px}.hero-mobile-scene .ex-record small,.hero-mobile-scene .ex-issued small{font-size:10px;margin-top:4px}.hero-mobile-scene .ex-record>b,.hero-mobile-scene .ex-issued>b{font-size:15px}.hero-mobile-scene .ex-business .icon{width:18px;height:18px}
 .hero-mobile-scene :is(.ex-phone-caption,.ex-business-caption){display:none}
 .hero-mobile-scene [data-illustration="0"] .ex-business,.hero-mobile-scene [data-illustration="1"] .ex-business,.hero-mobile-scene [data-illustration="3"] .ex-business,.hero-mobile-scene [data-illustration="2"] .ex-phone,.hero-mobile-scene [data-illustration="4"] .ex-phone{display:none}
 .hero-controls{width:calc(100% - 48px);justify-content:center;padding:22px 0}.hero-example-label{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.hero-explainer *{scroll-behavior:auto!important}}

/* The visitor chooses the business; the story keeps one coherent example. */
.scenario-picker{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.scenario-picker button{font:inherit;font-size:13px;min-height:44px;padding:10px 18px;border:1px solid transparent;border-radius:24px;color:#465d70;background:transparent;cursor:pointer}
.scenario-picker button:hover{background:#e7edf3}
.scenario-picker button[aria-pressed=true]{background:#fff;color:#203b55;border-color:#cbd6e0;box-shadow:0 5px 12px -9px #28415866}
.scenario-picker button:focus-visible{outline:3px solid #245dcc;outline-offset:3px}
.hero-sector-picker{padding:22px 20px 0}
.has-scroll-film .hero-sector-picker{position:absolute;top:17px;left:20px;right:20px;padding:0;z-index:8}
.has-scroll-film .hero-chapters{top:53%}
.has-scroll-film .hero-desktop-scene{top:46%}
/* Cafe Pina has its own identity: warm ivory ink on deep espresso. */
.ex-stage[data-sector=cafe] .ex-pass,.showcase-pass[data-sector=cafe]{background:linear-gradient(125deg,#514033 0%,#2d241f 58%,#352920 100%);border-color:#8e7962;color:#f2e4cf;box-shadow:inset 0 1px 0 #fff1d526,0 14px 24px -18px #251a16aa}
.pina-wordmark{display:block;object-fit:contain;width:100%;height:auto}
.ex-stage[data-sector=cafe] .ex-pass-brand{direction:rtl;justify-content:flex-start;margin-bottom:1.3cqw}
.ex-pass-brand .pina-wordmark{width:19cqw;height:9cqw;object-position:right center}
.ex-stage[data-sector=cafe] .ex-pass :is(small,.ex-of,footer){color:#e4d5bf}
.ex-stage[data-sector=cafe] .ex-pass footer{border-color:#baa38255}
.ex-stage[data-sector=cafe] .ex-units i{height:auto;aspect-ratio:1;border-radius:50%;background:#ead9bd;box-shadow:inset 0 0 0 1px #fff2d640}
.showcase-pass[data-sector=cafe] .showcase-card-brand{justify-content:flex-start;margin-bottom:10px}
.showcase-pass .pina-wordmark{width:150px;height:72px;object-position:right center}
.showcase-pass[data-sector=cafe] :is(small,footer){color:#e4d5bf}
.showcase-pass[data-sector=cafe] .showcase-pass-track .is-filled{background:#ead9bd}
.ex-stage[data-sector=fashion] .ex-pass,.showcase-pass[data-sector=fashion]{background:linear-gradient(135deg,#55525e,#292631);border-color:#7d7789}
.ex-stage[data-sector=services] .ex-pass,.showcase-pass[data-sector=services]{background:linear-gradient(135deg,#356077,#213d50);border-color:#63889c}
.ex-stage[data-kind=stamps] .ex-units i{height:1.5cqw}
.showcase-switch-note{font-size:13px;color:#526374;text-align:center;margin:10px 20px 22px;line-height:1.6}
.product-showcase>.scenario-picker{padding:20px 16px 0}
.showcase-redeem{width:100%;margin-top:10px;min-height:44px}
@media(max-width:800px),(max-height:560px){.hero-sector-picker{padding:17px 14px 0}.scenario-picker{gap:4px}.scenario-picker button{padding:9px 12px;font-size:12px}.hero-sector-picker+.hero-desktop-scene+.hero-chapters .hero-chapter:first-child{padding-top:28px}.hero-mobile-scene .ex-stage[data-kind=stamps] .ex-units i{height:5px}}

@media(max-width:800px),(max-height:560px){
 .scenario-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:400px;margin-inline:auto}
 .hero-mobile-scene .ex-pass{padding:12px 13px}
 .hero-mobile-scene .ex-pass-brand{margin-bottom:14px}
 .hero-mobile-scene .ex-of{margin-bottom:8px}
 .hero-mobile-scene .ex-units{margin:9px 0 11px}
 .hero-mobile-scene .ex-customer-update{margin-top:12px}
}

@media(max-width:800px),(max-height:560px){.hero-mobile-scene .ex-browser-note{display:none}}

@media(max-width:800px),(max-height:560px){
 .hero-mobile-scene .ex-pass-brand .pina-wordmark{width:114px;height:48px}
 .hero-mobile-scene .ex-stage[data-sector=cafe] .ex-pass-brand{margin-bottom:8px}
 .hero-mobile-scene .ex-stage[data-sector=cafe] .ex-pass{padding-block:10px}
 .hero-mobile-scene .ex-stage[data-sector=cafe] .ex-pass .ex-number{font-size:48px;margin-block:2px}
 .hero-mobile-scene .ex-stage[data-sector=cafe] .ex-units i{height:auto}
 .hero-controls{flex-wrap:wrap;gap:12px 24px}
}