/* The teaser: the site's palette and fonts (design/landing.html), one page, mobile first. */
@font-face{font-family:"Luckiest Guy";src:url(/fonts/LuckiestGuy-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Rubik";src:url(/fonts/Rubik-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Rubik";src:url(/fonts/Rubik-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/JetBrainsMono-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
:root{color-scheme:dark;--night:#161A36;--panel:#20264D;--ink:#F4F1E6;--muted:#A9ADD3;--line:rgba(244,241,230,.16);--boom:#FFD23F;--grass:#6CC24A;--grass-2:#4C8540;--soil:#7A5234;
  --display:"Luckiest Guy","Arial Black",Impact,sans-serif;--body:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#2A3163 0%,var(--night) 60%) fixed,var(--night);color:var(--ink);font:500 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--boom);outline-offset:3px;border-radius:8px}
.wrap{max-width:1040px;margin:0 auto;padding-inline:16px}
body{min-height:100svh;display:flex;flex-direction:column}
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:920px;margin:0 auto;padding:clamp(40px,10vh,120px) 16px 24px;text-align:center}
.brand{font:clamp(52px,12vw,120px)/.95 var(--display);letter-spacing:.02em;color:var(--boom);margin:0 0 22px;text-shadow:0 6px 0 #161A36}
.tease{font:500 clamp(20px,3.4vw,30px)/1.35 var(--body);margin:0 0 26px;text-wrap:balance}
.tease em{font-style:normal;color:var(--muted)}
.kicker{display:inline-block;margin:0 0 28px;padding:7px 14px;border:2px solid var(--boom);border-radius:999px;font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--boom)}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:12px;font:700 16px/1 var(--body);text-decoration:none;border:2.5px solid #161A36;box-shadow:0 4px 0 #161A36;transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #161A36}
.btn-boom{background:var(--boom);color:#161A36}
.field{margin:0;position:relative;padding-bottom:30px;background:linear-gradient(var(--grass),var(--grass-2)) bottom/100% 46px no-repeat;border-bottom:18px solid var(--soil)}
.field::before{content:"";position:absolute;left:0;right:0;bottom:46px;height:4px;background:#161A36}
.row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(2px,1vw,14px);padding:0 8px;position:relative}
.t-sold{width:min(92px,9.6vw);height:auto;flex:none;margin-bottom:-18px}

.sold{overflow:visible}
.sold .s-all,.sold .s-arm,.sold .s-eyes,.sold .s-helmet,.sold .s-head{transform-box:view-box}
.sold .s-arm-r{transform-origin:12.75px 45.5px}
.sold .s-arm-l{transform-origin:47.25px 45.5px}
.sold .s-eyes{transform-origin:30px 31.5px}
.sold .s-helmet{transform-origin:30px 23px}
.sold .s-all{transform-origin:30px 64px}
.sold[data-idle~="all"],.sold[data-click]{cursor:pointer}
.sold.do-salute .s-arm-r{animation:s-salute 1.7s cubic-bezier(.3,.7,.3,1)}
.sold.do-wave .s-arm-l{animation:s-wave 1.6s ease-in-out}
.sold.do-blink .s-eyes{animation:s-blink .28s ease-in-out}
.sold.do-look .s-eyes{animation:s-look 1.8s ease-in-out}
.sold.do-helmet .s-helmet{animation:s-helmet 1s ease-in-out}
.sold.do-hop .s-all{animation:s-hop .9s ease-out}
.sold.do-nod .s-all{animation:s-nod .6s ease-in-out}
@keyframes s-salute{0%{transform:rotate(0) scaleY(1)}22%,72%{transform:rotate(-157deg) scaleY(1.9)}28%{transform:rotate(-161deg) scaleY(1.9)}100%{transform:rotate(0) scaleY(1)}}
@keyframes s-wave{0%{transform:rotate(0)}20%{transform:rotate(150deg)}35%{transform:rotate(172deg)}50%{transform:rotate(148deg)}65%{transform:rotate(172deg)}80%{transform:rotate(150deg)}100%{transform:rotate(0)}}
@keyframes s-blink{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.1)}}
@keyframes s-look{0%,100%{transform:translateX(0)}20%,40%{transform:translateX(-3px)}60%,80%{transform:translateX(3px)}}
@keyframes s-helmet{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-3px) rotate(-7deg)}60%{transform:translateY(-1px) rotate(4deg)}}
@keyframes s-hop{0%,100%{transform:translateY(0) scaleY(1)}15%{transform:translateY(0) scaleY(.92)}40%{transform:translateY(-6px) scaleY(1.03)}70%{transform:translateY(0) scaleY(.96)}}
@keyframes s-nod{0%,100%{transform:rotate(0)}35%{transform:rotate(-5deg)}70%{transform:rotate(3deg)}}

.sold .p-back,.sold .p-front,.sold .p-hat,.sold .p-face,.sold .p-hand,.sold .p-chest,.sold .p-over,.sold .p-glint,.sold .p-ping,.sold .p-tip{transform-box:view-box}
.sold.r-sniper .p-chest{transform-origin:13px 57px}
.sold.r-sniper.do-prop .p-chest{animation:p-aim 1.8s ease-in-out}
.sold.r-sniper.do-prop .p-glint{animation:p-glint 1.8s ease-in-out}
.sold.r-swing .p-chest{transform-origin:30px 49px}
.sold.r-swing.do-prop .p-chest{animation:p-map 1.8s ease-in-out}
.sold.r-swing.do-prop .s-eyes{animation:s-look 1.8s ease-in-out}
.sold.r-tape .p-hat{transform-origin:30px 14px}
.sold.r-tape.do-prop .p-hat{animation:p-ruffle .9s ease-in-out 2}
.sold.r-tape.do-prop .s-all{animation:p-dash 1.8s ease-in-out}
.sold.r-dip .p-back{transform-origin:47px 41px}
.sold.r-dip.do-prop .p-back{animation:p-sway 1.8s ease-in-out}
.sold.r-dip.do-prop .s-all{animation:p-drift 1.8s ease-in-out}
.sold.r-narrative .p-hand{transform-origin:48px 57px}
.sold.r-narrative.do-prop .p-hand{animation:p-tap .45s ease-in-out 3}
.sold.r-detective.do-prop .s-helmet{animation:p-tip 1.6s ease-in-out}
.sold.r-detective.do-prop .p-glint{animation:p-glint 1.3s ease-in-out .5s}
.sold.r-flush .p-hat{transform-origin:30px 14.6px}
.sold.r-flush.do-prop .p-hat{animation:p-pulse 1s ease-in-out}
.sold.r-flush.do-prop .p-front{animation:p-bob .6s ease-in-out 3}
.sold.r-rsi .p-over{transform-origin:10px 64px}
.sold.r-rsi.do-prop .p-over{animation:p-raise 1.8s ease-in-out}
.sold.r-reinforcement .p-ping{transform-origin:3.4px 7.2px}
.sold.r-reinforcement.do-prop .p-tip{animation:p-blink .45s steps(1) 4}
.sold.r-reinforcement.do-prop .p-ping{animation:p-ping 1.5s ease-out}
@keyframes p-aim{0%,100%{transform:translate(0,0) rotate(0)}25%,70%{transform:translate(1px,-9px) rotate(-10deg)}}
@keyframes p-glint{0%,40%,100%{opacity:0}50%{opacity:1}60%{opacity:0}}
@keyframes p-map{0%,100%{transform:scale(1)}30%,70%{transform:scale(1.18,1.1) translateY(-1.5px)}}
@keyframes p-ruffle{0%,100%{transform:skewX(0)}25%{transform:skewX(-12deg)}75%{transform:skewX(8deg)}}
@keyframes p-dash{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}55%{transform:translateX(2px)}}
@keyframes p-sway{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg) scale(1.06)}65%{transform:rotate(6deg)}}
@keyframes p-drift{0%,100%{transform:translateY(0)}40%{transform:translateY(-3px)}75%{transform:translateY(1px)}}
@keyframes p-tap{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes p-tip{0%,100%{transform:translateY(0) rotate(0)}30%,55%{transform:translateY(-3px) rotate(-12deg)}}
@keyframes p-pulse{0%,100%{transform:scale(1)}40%{transform:scale(1.28)}}
@keyframes p-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes p-raise{0%,100%{transform:translate(0,0) rotate(0)}30%,65%{transform:translate(3px,-5px) rotate(4deg)}80%{transform:translate(0,.8px)}}
@keyframes p-blink{0%{opacity:1}50%{opacity:.15}}
@keyframes p-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(4)}}
@media (prefers-reduced-motion:reduce){.sold,.sold *{animation:none!important}}