/* Local, tactile mini-experiences; no scroll effects. */
#experience .journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border:0;counter-reset:move}
#experience .journey-step{position:relative;min-width:0;padding:20px 20px 26px!important;border:1px solid #cfc5b5;border-radius:20px;background:#f6f0e4;color:#292620;box-shadow:0 7px 0 #d8cebc,0 12px 22px #4a351210;transition:transform .25s,box-shadow .25s;overflow:hidden;text-align:left}
#experience .journey-step:hover{transform:translateY(-6px);box-shadow:0 13px 0 #d8cebc,0 20px 26px #4a351218}
#experience .journey-step:active{transform:translateY(3px);box-shadow:0 3px 0 #d8cebc}
#experience .journey-step:focus-visible{outline:3px solid var(--red);outline-offset:7px}
#experience .step-num{display:block;font:9px/1.5 monospace;letter-spacing:1.2px;padding-right:34px;color:#78654e}
#experience .step-art{height:275px;position:relative;border-radius:12px;margin:18px 0 25px;padding:23px;overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px #ffffff18}
#experience .step-art>span:first-child{font:600 clamp(34px,3.2vw,49px)/.95 var(--display);position:relative;z-index:2;letter-spacing:-.6px}
#experience .scan-art{background:radial-gradient(ellipse at 90% 0,#ff9a64,var(--red) 60%);color:#fff6e6}
#experience .scan-art:before{content:'';position:absolute;right:27px;top:90px;width:94px;height:100px;border:8px solid #fff9e9;border-radius:8px;background:repeating-conic-gradient(#30291f 0% 25%,#fff8e7 0% 50%) 0/17px 17px;box-shadow:6px 7px 0 #912c2040,0 13px 20px #912c2025;transform:rotate(10deg);transition:transform .6s,opacity .4s}
#experience .scan-art:after{content:'';position:absolute;right:18px;top:95px;width:120px;height:3px;background:#fff8e9;box-shadow:0 0 12px #fff8e9;transform:rotate(10deg);animation:exp-scan 3s ease-in-out infinite;opacity:.8}
#experience .journey-step.active .scan-art:before,#experience .journey-step.active .scan-art:after{opacity:0}
#experience .scan-link{position:absolute;bottom:38px;left:20px;right:20px;z-index:3;border-radius:8px;padding:16px;background:#fff9ec;box-shadow:0 5px 0 #a6302055;transform:rotate(-3deg)}
#experience .scan-link>span{color:var(--red)}
#experience .experience-menu{position:absolute;left:20px;right:20px;bottom:43px;z-index:3;display:grid;gap:7px;animation:exp-unpack .4s both}
#experience .experience-menu>span{padding:14px 10px;border-radius:5px;background:#fff7e8;color:#493c2d;box-shadow:0 4px 0 #ad361c40;display:flex;justify-content:space-between;gap:8px;font-size:10px}
#experience .order-art{background:#ddd4c1 url('/payon-landing/burrata-tomatoes-photo.8bf340e221.webp') center/cover;color:white}
#experience .order-art:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#29221899,transparent 65%,#29221870);z-index:0}
#experience .mini-order{position:absolute;left:17px;right:17px;bottom:39px;z-index:2;padding:14px 11px;background:#fff9eb;border-radius:7px;transform:rotate(2deg);color:#382b20;box-shadow:0 5px 0 #9e8a6955;font-size:11px}
#experience .mini-order b{border-radius:50%;min-width:28px;height:28px;display:grid;place-items:center;background:var(--red);color:white}
#experience .pay-art{background:radial-gradient(ellipse at top right,#57564a,#282c26 80%);color:#f9eedb}
#experience .mini-split{position:absolute;left:19px;right:19px;bottom:45px;gap:10px;perspective:600px}
#experience .mini-split>span{background:#fff8e8;color:#3a3429;border:0;border-top:3px solid var(--red);padding:20px 7px 25px;font:25px var(--display);box-shadow:3px 7px 0 #0003;clip-path:polygon(0 0,100% 0,100% 95%,92% 100%,84% 95%,76% 100%,68% 95%,60% 100%,52% 95%,44% 100%,36% 95%,28% 100%,20% 95%,12% 100%,0 95%);animation:exp-unpack .45s both}
#experience .mini-split>span:nth-child(2){animation-delay:.1s;transform:rotate(4deg)}
#experience .mini-split small{display:block;font:8px monospace;margin-bottom:12px;color:#8f7458}
#experience .art-caption{position:absolute;bottom:13px;left:15px;right:15px;z-index:4;font:7px/1.3 monospace;letter-spacing:.6px;text-align:center;color:inherit}
#experience .journey-step h3{font:600 30px/1.05 var(--display);margin:0 0 12px;padding-right:25px}
#experience .journey-step p{font-size:12px;line-height:1.65;margin:0;color:#786b58;max-width:245px}
#experience .step-arrow{position:absolute;right:19px;bottom:30px;width:30px;height:30px;border-radius:50%;border:1px solid #d7c8b0;display:grid;place-items:center;font-size:22px;color:var(--red)}
.exp-collected{position:absolute;right:16px;top:15px;width:25px;height:25px;border:1px solid #d5c6b0;border-radius:50%;display:grid;place-items:center;font:11px monospace;color:#a18b6c;transition:background .25s,transform .25s}
.exp-complete .exp-collected{background:var(--red);color:white;border-color:var(--red);transform:rotate(-12deg)}
.exp-playbar{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #cfc5b5;padding:17px 0;margin-bottom:22px}
.exp-playbar>span{font:11px monospace;letter-spacing:1px;color:#70634f}.exp-progress{display:flex;gap:8px;align-items:center}.exp-progress i{width:36px;height:5px;border-radius:3px;background:#d9cdbb;transition:background .3s}.exp-progress i.done{background:var(--red)}.exp-progress strong{font:10px monospace;margin-left:8px;color:var(--red)}
#experience .experience-feedback{margin-top:25px;gap:18px}#experience #experience-reset{border-radius:30px;padding:11px 18px;background:#eee5d6;border:1px solid #d3c3ac}
#experience .exp-bounce .mini-order b{animation:exp-pop .45s both}
@keyframes exp-scan{0%,100%{translate:0 0;opacity:0}20%,80%{opacity:.8}50%{translate:0 83px}}
@keyframes exp-unpack{from{opacity:0;translate:0 20px;rotate:-5deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes exp-pop{0%{scale:.5}60%{scale:1.3}100%{scale:1}}
@media(max-width:800px){#experience .journey{gap:12px}#experience .journey-step{padding:14px!important}#experience .step-art{padding:18px;height:260px}#experience .journey-step h3{font-size:25px}#experience .step-num{font-size:8px}#experience .mini-order{font-size:9px}}
@media(max-width:620px){#experience .journey{grid-template-columns:1fr}#experience .journey-step{padding:20px!important;margin:0 0 12px}#experience .step-art{height:250px}#experience .step-art>span:first-child{font-size:44px}#experience .journey-step p{max-width:85%}#experience .exp-playbar{align-items:flex-start}.exp-playbar>span{font-size:9px;line-height:1.7}.exp-progress i{width:20px}.exp-progress strong{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){#experience *,#experience *:before,#experience *:after{animation:none!important;transition:none!important}}
#experience .journey-step.active .scan-art:after{animation:none;opacity:0}
#experience .experience-menu{background:transparent;border:0;padding:0;box-shadow:none}
/* Blender-rendered branded QR plaque, including its rendered scanning light. */
#experience .scan-art:not(:has(.experience-menu))>span:first-child{font-size:31px;max-width:100px}
#experience .scan-art:before{top:60px;right:4px;width:190px;height:190px;border:0;border-radius:0;background: url('/payon-landing/payon-qr-render.webp') center/contain no-repeat;box-shadow:none;transform:rotate(3deg);filter:drop-shadow(3px 10px 6px #8c291f38)}
#experience .scan-art:after{display:none}
#experience .scan-art .scan-link{bottom:25px;left:14px;right:14px;padding:12px 14px}
#experience .scan-art .art-caption{bottom:8px;font-size:6.5px}
#experience .journey-step.active .scan-art:before{opacity:0}
@media(prefers-reduced-motion:reduce){#experience .scan-art:before{background-image:url('/payon-landing/payon-qr-render-still.webp')}}
#experience .scan-art:before{top:43px;right:0;width:180px;height:180px}
/* Editorial paper jackets: fine edges and soft contact shadows. */
#experience .journey{gap:24px;align-items:stretch}
#experience .journey-step{border:1px solid #d6cfc1;border-radius:7px;background:linear-gradient(115deg,#fffdf7 0%,#f8f4ec 55%,#f1ece2 100%);box-shadow:0 1px 0 #fff inset,0 2px 0 #e8e0d2,0 3px 0 #d4cbbc,0 9px 20px #4436210b;overflow:visible;padding:21px 19px 25px!important}
#experience .journey-step:after{content:'';position:absolute;left:13px;right:13px;bottom:-5px;height:2px;background:#f3ecdf;border:1px solid #d8cebf;border-top:0;border-radius:0 0 4px 4px;z-index:-1}
#experience .journey-step:hover{transform:translateY(-3px);box-shadow:0 1px 0 #fff inset,0 2px 0 #e8e0d2,0 3px 0 #d4cbbc,0 13px 22px #44362113}
#experience .journey-step:active{transform:translateY(1px);box-shadow:0 1px 0 #e8e0d2,0 4px 9px #44362110}
#experience .step-num{font:10px/1.5 monospace;letter-spacing:.7px;color:#83735e;border-bottom:1px solid #ddd4c5;padding:0 28px 15px 0}
#experience .step-art{border-radius:4px;margin-top:17px;margin-bottom:23px;box-shadow:inset 0 0 0 1px #3327120a}
#experience .journey-step h3{font:600 29px/1.12 var(--display);letter-spacing:-.25px;margin-bottom:10px}
#experience .journey-step p{font-size:12px;line-height:1.7;color:#827460;padding-right:9px}
#experience .step-arrow{bottom:24px;right:18px;border:0;border-radius:0;width:22px;height:22px;font-size:27px}
#experience .exp-collected{top:19px;right:19px;width:20px;height:20px;border:0;border-radius:0;color:#b09c7e;background:transparent;font-size:14px}
#experience .exp-complete .exp-collected{background:transparent;color:var(--red);transform:none}
#experience .journey-step.active{border-color:#c9bba5}
@media(max-width:800px){#experience .journey{gap:14px}#experience .journey-step{padding:17px 14px 24px!important}#experience .step-num{font-size:8px}#experience .journey-step h3{font-size:25px}}
@media(max-width:620px){#experience .journey-step{padding:21px!important}#experience .step-num{font-size:10px}#experience .journey-step h3{font-size:30px}}