@font-face{font-family:Anton;src:url(/f/anton.woff2) format("woff2");font-display:swap}
:root{--ink:#0a0a0a;--lime:#96ff0a;--red:#ff3b30;--mute:#595959;--line:#e3e3e3;--r:8px;--pad:clamp(20px,5vw,64px)}
*{box-sizing:border-box;margin:0}
html{background:#fff;color:var(--ink);font:400 18px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"Noto Sans Arabic","Noto Sans Devanagari",sans-serif;-webkit-text-size-adjust:100%}
body{min-height:100svh;display:flex;flex-direction:column}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
img,svg{display:block;max-width:100%}
.d,h1,.word{font-family:Anton,"Arial Narrow","Avenir Next Condensed",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em}
[lang=ar] .d,[lang=ar] h1,[lang=ar] .word,[lang=hi] .d,[lang=hi] h1,[lang=hi] .word{font-family:inherit;font-weight:800;text-transform:none;letter-spacing:0}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--pad)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 22px/1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em}
.brand img{width:44px;height:auto}
.pill{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:10px 16px;border-radius:var(--r)}
.pill:hover{background:#2b2b2b}

/* store buttons */
.stores{display:flex;flex-wrap:wrap;gap:10px}
.store{display:flex;flex-direction:column;justify-content:center;min-width:168px;min-height:56px;padding:8px 20px;background:var(--ink);color:#fff;text-decoration:none;border-radius:var(--r);line-height:1.15}
.store small{font-size:12px;color:#d0d0d0}
.store b{font-size:20px;font-weight:700}
.store:hover{background:#2b2b2b}

/* home: one screen */
.home{flex:1;display:grid;gap:28px;align-content:center;padding:8px var(--pad) 36px}
.home h1{font-size:clamp(46px,13vw,176px);line-height:.94}
.home .sub{margin-top:18px;font-size:clamp(17px,2vw,21px);color:var(--mute);max-width:30em}
.home .stores{margin-top:26px}
@media(min-width:900px){
 .home{grid-template-columns:minmax(0,1.4fr) minmax(360px,.6fr);align-items:center;gap:clamp(32px,6vw,96px);padding-bottom:56px}
 .home h1{font-size:clamp(72px,min(8.2vw,150px),150px)}
}

/* the reveal demo */
.demo{width:min(100%,420px);justify-self:center}
.card{position:relative;background:var(--lime);border:3px solid var(--ink);border-radius:24px;padding:22px 20px 20px;display:flex;flex-direction:column;gap:16px}
.eyes{width:92%;margin:0 auto;height:auto;overflow:visible}
.eyes .ball{fill:#fff;transition:fill .15s}
.eyes .pl,.eyes .pr{transform:translate(var(--px,0),var(--py,0)) scale(var(--ps,1));transform-box:fill-box;transform-origin:center;transition:transform .2s ease-out}
.eyes.sly .ball{fill:var(--red)}
.slot{position:relative;height:112px;overflow:hidden;border:3px solid var(--ink);border-radius:14px;background:#fff}
.face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px 12px}
.face small{font-size:13px;color:var(--mute);font-weight:600}
.face .word{font-size:clamp(34px,10vw,48px);line-height:1.05}
.face.imp{background:var(--ink);color:var(--red)}
.face.imp small{color:#e8e8e8}
.face.imp .word{font-size:clamp(28px,8vw,38px)}
.turn{margin-top:14px;font-size:15px;color:var(--mute);min-height:1.5em;text-align:center}
.next{display:block;margin:10px auto 0;min-width:70%;background:var(--ink);color:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:12px 18px;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer}
.next:hover{background:#2a2a2a}
.next:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* inner pages */
.band{background:var(--lime);padding:clamp(28px,5vw,64px) var(--pad);position:relative;overflow:visible;margin-bottom:clamp(48px,8vw,96px)}
.band .in{max-width:1100px;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center}
.band h1{font-size:clamp(40px,7.5vw,104px);line-height:.96;max-width:12em;text-wrap:balance}
.band .lede{font-size:clamp(17px,2vw,21px);max-width:34em;font-weight:500}
.band .sticker{position:absolute;inset-inline-end:var(--pad);bottom:calc(-1 * clamp(24px,4vw,48px));width:clamp(110px,16vw,220px);transform:rotate(-5deg)}
.band .in{padding-inline-end:clamp(0px,16vw,240px)}
.read{max-width:calc(44rem + 2 * var(--pad));margin:0;padding:0 var(--pad) 40px;width:100%}
.read h2{font-size:clamp(22px,3vw,28px);margin:44px 0 10px;line-height:1.2}
.read h3{font-size:19px;margin:28px 0 6px}
.read p,.read li{margin:0 0 14px}
.read ul,.read ol{padding-inline-start:1.3em;margin:0 0 14px}
.read code{background:#f1f1f1;border-radius:4px;padding:1px 6px;font-size:.92em}
.read a{text-decoration-thickness:2px;text-underline-offset:3px}
.read table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:16px}
.read th,.read td{text-align:start;padding:8px 10px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.read th{color:var(--mute);font-weight:600}
.wl-head{display:flex;justify-content:space-between;color:var(--mute);font-size:14px;font-weight:600;padding:8px 0;border-bottom:2px solid var(--ink)}
.wl{list-style:none;padding:0!important;margin:0 0 24px!important}
.wl li{display:flex;justify-content:space-between;gap:16px;margin:0;padding:8px 0;border-bottom:1px solid var(--line);font-size:16px}
.wl li span{color:var(--mute);text-align:end}
.wide{max-width:calc(60rem + 2 * var(--pad))}
.getbar{max-width:calc(44rem + 2 * var(--pad));margin:8px 0 56px;padding:0 var(--pad);width:100%}
.try{max-width:calc(44rem + 2 * var(--pad));margin:8px 0 24px;padding:0 var(--pad);width:100%}
.try .demo{margin:0}

footer{margin-top:auto;border-top:1px solid var(--line);padding:24px var(--pad) 32px;font-size:15px;display:grid;gap:10px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 22px}
footer a{color:var(--mute);text-decoration:none}footer a:hover{color:var(--ink);text-decoration:underline}
.note{color:var(--mute);font-size:15px;margin-top:14px}
.words{list-style:none;padding:0;margin:20px 0;display:flex;flex-wrap:wrap;gap:8px}
.words li{border:2px solid var(--ink);border-radius:6px;padding:4px 12px;font-weight:600}

@media(min-width:900px){
 .wl{columns:2;column-gap:40px}.wl li{break-inside:avoid}
 .wl-head{display:none}
}
@media(max-width:520px){.band .in{padding-inline-end:0}.band .sticker{width:92px}.band{padding-bottom:44px}.store{flex:1 1 140px;min-width:0}}
@media(prefers-reduced-motion:reduce){.eyes .ball,.eyes .pl,.eyes .pr{transition:none}}

@media(max-width:520px){.home{gap:20px}.home .sub{margin-top:12px;font-size:16px}.home .stores{margin-top:18px}.card{padding:18px 16px 16px}}
[lang=hi] .home h1,[lang=ar] .home h1,[lang=hi] .band h1,[lang=ar] .band h1{line-height:1.25}
@media(min-width:900px){[lang=hi] .home h1,[lang=ar] .home h1{font-size:clamp(56px,6.4vw,110px)}}
@media(max-width:899px){[lang=hi] .home h1,[lang=ar] .home h1{font-size:clamp(40px,10vw,80px)}}
.read table{display:block;overflow-x:auto;max-width:100%}
.read th,.read td{white-space:nowrap}
.pill{white-space:nowrap}
@media(max-width:520px){.band{padding-bottom:72px}.band .sticker{bottom:-30px}}
@media(max-width:380px){.brand{font-size:18px;gap:8px}.brand img{width:34px}.pill{font-size:14px;padding:9px 12px}.top{gap:8px}}
@media(max-width:380px){.home h1{font-size:11.4vw}.store{flex:1 1 120px;padding:8px 14px;min-width:0}.store b{font-size:18px}.home .sub{font-size:15px}}