/* Websites & online stores: one browser window that changes what it shows (website, store, website + POS). */
html body.a-web main.content .aw3{overflow:clip}
html body.a-web main.content .aw3-hero{position:relative;background:#0a0a0a;padding:clamp(100px,15vh,140px) 20px 90px;overflow:hidden;text-align:center}
html body.a-web main.content .aw3-hero>*{position:relative}
html body.a-web main.content .aw3-blob{position:absolute!important;left:50%;top:48%;width:min(900px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(128,0,32,.55),rgba(128,0,32,0) 62%);filter:blur(40px);pointer-events:none;animation:aw3b 10s ease-in-out infinite alternate}
@keyframes aw3b{to{transform:translate(-46%,-54%) scale(1.15)}}
html body.a-web main.content .aw3-mono{font:700 11px/1.4 "Space Mono",ui-monospace,monospace;letter-spacing:.14em;color:#8a8a88;display:block}
html body.a-web main.content h1.aw3-h{font-size:clamp(38px,7.2vw,104px)!important;line-height:.98!important;letter-spacing:-.045em!important;font-weight:700!important;max-width:15ch;margin:22px auto 0!important;color:#f4f4f2!important;text-align:center!important}
html body.a-web main.content p.aw3-sub{font-size:clamp(16px,1.9vw,20px)!important;line-height:1.55!important;color:#b4b4b2!important;max-width:36em;margin:20px auto 0!important;text-align:center!important;display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important}
html body.a-web main.content .aw3-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
html body.a-web main.content .aw3-cta .btn{background:#f4f4f2;color:#0a0a0a;border-color:#f4f4f2}
html body.a-web main.content .aw3-cta .btn+.btn{background:transparent;color:#f4f4f2;border-color:rgba(255,255,255,.4)}
/* stage */
html body.a-web main.content .aw3-stage{max-width:960px;margin:clamp(40px,7vw,70px) auto 0}
html body.a-web main.content .aw3-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:99px;background:#1b1b1b;border:1px solid #2c2c2c}
html body.a-web main.content .aw3-tabs button{font:600 13px/1 Inter,system-ui,sans-serif;color:#b4b4b2;background:transparent;border:0;padding:11px 18px;border-radius:99px;cursor:pointer;transition:background .25s,color .25s}
html body.a-web main.content .aw3-tabs button.on{background:#f4f4f2;color:#0a0a0a}
html body.a-web main.content .aw3-win{margin-top:22px;background:#f4f2ee;border-radius:20px;overflow:hidden;box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);transform:perspective(1400px) rotateX(5deg);transform-origin:50% 100%;transition:transform .6s}
html body.a-web main.content .aw3-win:hover{transform:perspective(1400px) rotateX(0)}
html body.a-web main.content .aw3-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#e5e1da;border-bottom:1px solid #d3cec6}
html body.a-web main.content .aw3-bar i{width:10px;height:10px;border-radius:50%;background:#bdb7ad}
html body.a-web main.content .aw3-bar i:first-child{background:#e0574f}
html body.a-web main.content .aw3-bar span{margin-left:12px;flex:1;max-width:340px;background:#fff;border-radius:99px;padding:6px 14px;font:500 12px/1 "Space Mono",ui-monospace,monospace;color:#555;text-align:left}
html body.a-web main.content .aw3-view{position:relative;height:clamp(250px,40vw,400px);text-align:left}
html body.a-web main.content .wb-scr{position:absolute;inset:0;padding:18px;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .5s,transform .5s;pointer-events:none;color:#111}
html body.a-web main.content .wb-scr.on{opacity:1;transform:none}
html body.a-web main.content .wb-nav{display:flex;align-items:center;gap:12px;margin-bottom:16px}
html body.a-web main.content .wb-nav b{width:60px;height:12px;border-radius:6px;background:#111}
html body.a-web main.content .wb-nav span{width:34px;height:7px;border-radius:4px;background:#c9c3b9}
html body.a-web main.content .wb-nav i{margin-left:auto;font:700 11px/1 Inter,sans-serif;font-style:normal;background:#800020;color:#fff;border-radius:99px;padding:8px 14px}
html body.a-web main.content .wb-nav i.bag{background:#111}
html body.a-web main.content .wb-nav em{font-style:normal;display:inline-block;background:#fff;color:#111;border-radius:50%;width:16px;height:16px;line-height:16px;text-align:center;margin-left:4px}
html body.a-web main.content .wb-scr.on .wb-nav em{animation:wbBag 4.4s infinite}
@keyframes wbBag{0%,50%{transform:scale(1)}60%{transform:scale(1.5)}70%,100%{transform:scale(1)}}
/* screen 1 */
html body.a-web main.content .wb-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:center}
html body.a-web main.content .wb-t u{display:block;height:20px;border-radius:7px;background:#111;margin-bottom:10px;width:92%}
html body.a-web main.content .wb-t u.s{height:10px;background:#bdb7ad;width:60%}
html body.a-web main.content .wb-pic{aspect-ratio:4/3;border-radius:16px;background:linear-gradient(135deg,#800020,#2a0d16);position:relative;overflow:hidden}
html body.a-web main.content .wb-pic::after{content:"";position:absolute;width:46%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.18);left:30%;top:26%}
html body.a-web main.content .wb-scr.on .wb-pic::after{animation:wbFloat 4s ease-in-out infinite alternate}
@keyframes wbFloat{to{transform:translate(22%,12%) scale(1.2)}}
html body.a-web main.content .wb-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
html body.a-web main.content .wb-row3 div{height:clamp(46px,8vw,86px);border-radius:14px;background:#e5e1da}
html body.a-web main.content .wb-scr.on .wb-row3 div{animation:wbUp .6s both}html body.a-web main.content .wb-scr.on .wb-row3 div:nth-child(2){animation-delay:.12s}html body.a-web main.content .wb-scr.on .wb-row3 div:nth-child(3){animation-delay:.24s}
@keyframes wbUp{from{opacity:0;transform:translateY(16px)}}
/* screen 2 */
html body.a-web main.content .wb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
html body.a-web main.content .wb-grid div{background:#fff;border-radius:14px;padding:8px}
html body.a-web main.content .wb-grid s{display:block;aspect-ratio:3/3.4;border-radius:10px;background:#d9d3c8;text-decoration:none}
html body.a-web main.content .wb-grid div:nth-child(2) s{background:#c9bfb0}html body.a-web main.content .wb-grid div:nth-child(3) s{background:#b9ae9d}html body.a-web main.content .wb-grid div:nth-child(5) s{background:#cfc6b8}
html body.a-web main.content .wb-grid u{display:block;height:7px;border-radius:4px;background:#111;margin:9px 0 6px;width:70%}
html body.a-web main.content .wb-grid i{display:block;height:7px;border-radius:4px;background:#800020;width:34%}
html body.a-web main.content .wb-grid div:nth-child(n+4){display:none}
html body.a-web main.content .wb-add{position:absolute;right:22px;bottom:20px;background:#111;color:#fff;font:700 12px/1 Inter,sans-serif;padding:12px 18px;border-radius:99px}
html body.a-web main.content .wb-scr.on .wb-add{animation:wbTap 4.4s infinite}
@keyframes wbTap{0%,45%{transform:none;background:#111}52%{transform:scale(.92);background:#800020}60%,100%{transform:none;background:#111}}
@media(min-width:700px){html body.a-web main.content .wb-grid div:nth-child(n+4){display:block}html body.a-web main.content .wb-grid{grid-template-columns:repeat(6,1fr)}}
/* screen 3 */
html body.a-web main.content .wb-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:100%}
html body.a-web main.content .wb-l{background:#fff;border-radius:16px;padding:14px}
html body.a-web main.content .wb-lines u{display:block;height:12px;border-radius:6px;background:#ddd7cd;margin-bottom:10px}
html body.a-web main.content .wb-lines u.s{width:55%}
html body.a-web main.content .wb-pos{background:#0a0a0a;border-radius:16px;padding:14px;position:relative;overflow:hidden;background-image:radial-gradient(#2a2a2a 1px,transparent 1.2px);background-size:14px 14px}
html body.a-web main.content .wb-bell{display:inline-block;background:#800020;color:#fff;font:700 11px/1 Inter,sans-serif;padding:8px 12px;border-radius:99px;opacity:0}
html body.a-web main.content .wb-scr.on .wb-bell{animation:wbBell 4.4s infinite}
@keyframes wbBell{0%,35%{opacity:0;transform:translateY(-10px)}45%,100%{opacity:1;transform:none}}
html body.a-web main.content .wb-tk{margin-top:12px;background:#f4f2ee;border-radius:12px;padding:12px;opacity:0}
html body.a-web main.content .wb-scr.on .wb-tk{animation:wbTk 4.4s infinite}
@keyframes wbTk{0%,38%{opacity:0;transform:translateX(40px)}50%,100%{opacity:1;transform:none}}
html body.a-web main.content .wb-tk b{font:700 14px/1 "Space Mono",monospace;display:block;margin-bottom:10px;color:#111}
html body.a-web main.content .wb-tk u{display:block;height:8px;border-radius:4px;background:#bdb7ad;margin-bottom:7px}
html body.a-web main.content .wb-tk u.s{width:50%}
/* sections */
html body.a-web main.content .aw3-sec{max-width:1180px;margin:0 auto;padding:clamp(60px,10vw,110px) 20px 0}
html body.a-web main.content .aw3-sec h2,html body.a-web main.content .aw3-sec h2{font-size:clamp(30px,5vw,64px)!important;line-height:1!important;letter-spacing:-.04em!important;font-weight:700!important;margin:14px 0 0!important;color:#f4f4f2!important;text-align:left!important;max-width:14ch}
html body.a-web main.content .aw3-sec p,html body.a-web main.content .aw3-end p{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;font-size:15.5px!important;line-height:1.65!important;color:#b4b4b2!important;text-align:left!important}
html body.a-web main.content .aw3-three{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0;margin-top:36px;border-top:1px solid #2a2a2a}
html body.a-web main.content .aw3-three article{padding:28px 26px 30px 0;border-bottom:1px solid #2a2a2a}
html body.a-web main.content .aw3-three i{font:700 11px/1 "Space Mono",monospace;font-style:normal;letter-spacing:.12em;color:#d24a63}
html body.a-web main.content .aw3-three h3{font-size:24px!important;letter-spacing:-.025em;margin:14px 0 10px!important;color:#f4f4f2!important;text-align:left!important}
html body.a-web main.content .aw3-work{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:36px}
html body.a-web main.content .aw3-job{display:block;background:#0e0e0e;border:1px solid #2a2a2a;border-radius:24px;padding:24px;color:#f4f4f2;text-decoration:none;background-image:radial-gradient(#242424 1px,transparent 1.2px);background-size:16px 16px;transition:transform .3s,border-color .3s}
html body.a-web main.content .aw3-job:hover{transform:translateY(-6px) rotate(-.6deg);border-color:#800020}
html body.a-web main.content .aw3-job span{font:700 11px/1 "Space Mono",monospace;letter-spacing:.12em;color:#8a8a88;text-transform:uppercase}
html body.a-web main.content .aw3-job b{display:block;font-size:26px;letter-spacing:-.03em;margin:16px 0 8px;line-height:1.1;color:#f4f4f2!important}
html body.a-web main.content .aw3-job em{display:inline-block;margin-top:14px;font-style:normal;font-weight:700;font-size:13px;background:#f4f4f2;color:#0a0a0a;padding:10px 16px;border-radius:99px}
html body.a-web main.content .aw3-steps{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;counter-reset:s}
html body.a-web main.content .aw3-steps li{background:#f4f2ee;border-radius:26px;padding:26px;color:#111}
html body.a-web main.content .aw3-steps li b{display:block;font:700 70px/1 Inter,sans-serif;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.2px #111;margin-bottom:14px}
html body.a-web main.content .aw3-steps li p{color:#2c2a27!important;font-size:16px!important}
html body.a-web main.content .aw3-steps strong{color:#111}
html body.a-web main.content .aw3-end{margin:clamp(70px,10vw,120px) auto 0;max-width:1180px;border-radius:36px 36px 0 0;background:#800020;padding:clamp(34px,7vw,80px) clamp(22px,5vw,64px);text-align:left}
html body.a-web main.content .aw3-end h2{font-size:clamp(28px,5vw,60px)!important;line-height:1!important;letter-spacing:-.04em!important;color:#fff!important;margin:0 0 14px!important;text-align:left!important;max-width:16ch}
html body.a-web main.content .aw3-end p{color:#f3d4db!important;max-width:34em}
html body.a-web main.content .aw3-end .btn{background:#fff;color:#800020;border-color:#fff;margin-top:14px}
@media(max-width:699px){html body.a-web main.content .wb-hero{grid-template-columns:1fr}html body.a-web main.content .wb-pic{display:none}html body.a-web main.content .wb-split{grid-template-columns:1fr}html body.a-web main.content .wb-pos{display:none}}
@media(prefers-reduced-motion:reduce){html body.a-web main.content .aw3-blob,html body.a-web main.content .wb-scr *{animation:none!important}}
