/* WhatBins marketing site. Ported from the Claude Design canvas "WhatBins website". */
/* Self-hosted latin subsets of the three site fonts (all SIL Open Font License). */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-stretch:100%;font-display:swap;src:url(fonts/bricolage-grotesque-97a4f0ffdec6c5dcb816849f9e88da51.woff2?vsn=d) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/caveat-700-21a75b3669b78e0d472bb617c68254e3.woff2?vsn=d) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(fonts/instrument-sans-e35fad09c70beb975a297c43c6af4e66.woff2?vsn=d) format('woff2')}
body{margin:0;background:#F3FAF0;color:#0F1A12;font-family:'Instrument Sans',system-ui,sans-serif}
a{color:#0F1A12}a:hover{color:#1F5AE6}
img{display:block;max-width:100%}
.hx,.hx-phone,.hx-notif,.hx-tap,.hx-app{animation-duration:11s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:linear}
.hx-hw{animation-name:hxhw}@keyframes hxhw{0%,1.9%{opacity:0;transform:translate(-560px,-420px) rotate(-50deg) scale(1)}2%{opacity:1;transform:translate(-560px,-420px) rotate(-50deg) scale(1);animation-timing-function:cubic-bezier(.2,1.25,.4,1)}6.0%,58%{opacity:1;transform:translate(0,0) rotate(-12deg) scale(1);animation-timing-function:cubic-bezier(.55,0,.9,.35)}61%,100%{opacity:0;transform:translate(0,40px) rotate(-12deg) scale(.4)}}
.hx-cf{animation-name:hxcf}@keyframes hxcf{0%,6.9%{opacity:0;transform:translate(640px,-40px) rotate(170deg) scale(1)}7%{opacity:1;transform:translate(640px,-40px) rotate(170deg) scale(1);animation-timing-function:cubic-bezier(.2,1.25,.4,1)}11.0%,58%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1);animation-timing-function:cubic-bezier(.55,0,.9,.35)}61%,100%{opacity:0;transform:translate(0,40px) rotate(0deg) scale(.4)}}
.hx-cl{animation-name:hxcl}@keyframes hxcl{0%,11.9%{opacity:0;transform:translate(0px,0px) rotate(-4deg) scale(1.6)}12%{opacity:1;transform:translate(0px,0px) rotate(-4deg) scale(1.6);animation-timing-function:cubic-bezier(.2,1.25,.4,1)}15.5%,58%{opacity:1;transform:translate(0,0) rotate(7deg) scale(1);animation-timing-function:cubic-bezier(.55,0,.9,.35)}61%,100%{opacity:0;transform:translate(0,40px) rotate(7deg) scale(.4)}}
.hx-pd{animation-name:hxpd}@keyframes hxpd{0%,27%{opacity:0;transform:scale(.08)}27.6%{opacity:1;transform:scale(.12);animation-timing-function:cubic-bezier(.3,.6,.3,1)}38%,58%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.55,0,.9,.35)}61%,100%{opacity:0;transform:translateY(40px) scale(.4)}}
.hx-dr{animation-name:hxdr}@keyframes hxdr{0%,26.6%{opacity:0;transform:scaleY(0)}27.2%{opacity:1;transform:scaleY(.1);animation-timing-function:cubic-bezier(.4,0,.6,1)}32%{opacity:1;transform:scaleY(1)}35%,100%{opacity:0;transform:scaleY(1.1) translateY(6px)}}
.hx-bl{animation-name:hxbl}@keyframes hxbl{0%,16.9%{opacity:0;transform:translate(-640px,250px) rotate(-1000deg) scale(1)}17%{opacity:1;transform:translate(-640px,250px) rotate(-1000deg) scale(1);animation-timing-function:cubic-bezier(.15,.9,.3,1)}27.0%,58%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1);animation-timing-function:cubic-bezier(.55,0,.9,.35)}61%,100%{opacity:0;transform:translate(0,40px) rotate(0deg) scale(.4)}}
.hx-m1{animation-name:hxm1}@keyframes hxm1{0%,25.9%{opacity:0;transform:translate(640px,200px) rotate(60deg) scale(1)}26%{opacity:1;transform:translate(640px,200px) rotate(60deg) scale(1);animation-timing-function:cubic-bezier(.2,1.25,.4,1)}29.0%,58%{opacity:1;transform:translate(0,0) rotate(14deg) scale(1);animation-timing-function:cubic-bezier(.55,0,.9,.35)}61%,100%{opacity:0;transform:translate(0,40px) rotate(14deg) scale(.4)}}
.hx-m2{animation-name:hxm2}@keyframes hxm2{0%,27.4%{opacity:0;transform:translate(-640px,-100px) rotate(-70deg) scale(1)}27.5%{opacity:1;transform:translate(-640px,-100px) rotate(-70deg) scale(1);animation-timing-function:cubic-bezier(.2,1.25,.4,1)}30.5%,58%{opacity:1;transform:translate(0,0) rotate(-18deg) scale(1);animation-timing-function:cubic-bezier(.55,0,.9,.35)}61%,100%{opacity:0;transform:translate(0,40px) rotate(-18deg) scale(.4)}}
.hx-m3{animation-name:hxm3}@keyframes hxm3{0%,28.9%{opacity:0;transform:translate(300px,-640px) rotate(30deg) scale(1)}29%{opacity:1;transform:translate(300px,-640px) rotate(30deg) scale(1);animation-timing-function:cubic-bezier(.2,1.25,.4,1)}32.0%,58%{opacity:1;transform:translate(0,0) rotate(-9deg) scale(1);animation-timing-function:cubic-bezier(.55,0,.9,.35)}61%,100%{opacity:0;transform:translate(0,40px) rotate(-9deg) scale(.4)}}
.hx-m4{animation-name:hxm4}@keyframes hxm4{0%,30.4%{opacity:0;transform:translate(-200px,640px) rotate(-40deg) scale(1)}30.5%{opacity:1;transform:translate(-200px,640px) rotate(-40deg) scale(1);animation-timing-function:cubic-bezier(.2,1.25,.4,1)}33.5%,58%{opacity:1;transform:translate(0,0) rotate(10deg) scale(1);animation-timing-function:cubic-bezier(.55,0,.9,.35)}61%,100%{opacity:0;transform:translate(0,40px) rotate(10deg) scale(.4)}}
.hx-m5{animation-name:hxm5}@keyframes hxm5{0%,31.9%{opacity:0;transform:translate(-100px,-700px) rotate(-20deg) scale(1)}32%{opacity:1;transform:translate(-100px,-700px) rotate(-20deg) scale(1);animation-timing-function:cubic-bezier(.2,1.25,.4,1)}35.0%,58%{opacity:1;transform:translate(0,0) rotate(6deg) scale(1);animation-timing-function:cubic-bezier(.55,0,.9,.35)}61%,100%{opacity:0;transform:translate(0,40px) rotate(6deg) scale(.4)}}
.hx-m6{animation-name:hxm6}@keyframes hxm6{0%,33.4%{opacity:0;transform:translate(640px,-300px) rotate(80deg) scale(1)}33.5%{opacity:1;transform:translate(640px,-300px) rotate(80deg) scale(1);animation-timing-function:cubic-bezier(.2,1.25,.4,1)}36.5%,58%{opacity:1;transform:translate(0,0) rotate(22deg) scale(1);animation-timing-function:cubic-bezier(.55,0,.9,.35)}61%,100%{opacity:0;transform:translate(0,40px) rotate(22deg) scale(.4)}}
.hx-phone{animation-name:hxPhone}@keyframes hxPhone{0%,48.5%{transform:scale(1)}49.2%{transform:scale(.95)}50.6%{transform:scale(1.06)}52.2%{transform:scale(.975)}53.6%{transform:scale(1.012)}55%,61%{transform:scale(1);animation-timing-function:ease-in-out}67%{transform:translateY(5px) scale(.985);animation-timing-function:ease-in-out}75%,100%{transform:scale(1)}}
.hx-notif{animation-name:hxNotif}@keyframes hxNotif{0%,39.9%{opacity:0;transform:translateY(-150%)}40%{opacity:1;transform:translateY(-150%);animation-timing-function:cubic-bezier(.2,1.3,.4,1)}42.5%,46.6%{opacity:1;transform:translateY(0) scale(1)}47.4%,48.4%{opacity:1;transform:scale(.96)}48.5%,100%{opacity:0;transform:scale(.96)}}
.hx-tap{animation-name:hxTap}@keyframes hxTap{0%,46.6%{opacity:0;transform:scale(.3)}47.4%{opacity:1;transform:scale(1)}48.5%,100%{opacity:0;transform:scale(1.3)}}
.hx-app{animation-name:hxApp}@keyframes hxApp{0%,48.4%{opacity:0;transform:scale(.9)}48.5%{opacity:1;transform:scale(.9);animation-timing-function:cubic-bezier(.2,1.2,.35,1)}50%,94%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.hx,.hx-phone,.hx-notif,.hx-tap,.hx-app{animation:none}}
.js-anim .rv,.js-anim .rv1,.js-anim .rv2,.js-anim .rv3,.js-anim .rv4{opacity:0;translate:0 44px;transition:opacity .7s ease,translate .9s cubic-bezier(.2,.8,.2,1)}
.js-anim .rv-side{opacity:0;translate:80px 0;transition:opacity .7s ease,translate .9s cubic-bezier(.2,.8,.2,1)}
.js-anim .rv5{opacity:0;scale:.85;translate:0 30px;transition:opacity .4s ease,scale .6s cubic-bezier(.2,1.4,.4,1),translate .6s cubic-bezier(.2,1.4,.4,1)}
.js-anim .in{opacity:1 !important;translate:0 0 !important;scale:1 !important}
.js-anim .rv2{transition-delay:.25s}.js-anim .rv3{transition-delay:.5s}.js-anim .rv4{transition-delay:.75s}.js-anim .rv5{transition-delay:1.1s}
.js-anim .rv-side:nth-child(2){transition-delay:.12s}.js-anim .rv-side:nth-child(3){transition-delay:.24s}
.wb-bar{position:sticky;top:0;z-index:30;height:0}
.wb-panel{position:absolute;left:0;right:0;top:0;height:104px;background:rgba(16,23,43,0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);border-bottom:1px solid rgba(255,255,255,0);transition:height .55s cubic-bezier(.7,0,.2,1),background .45s ease,backdrop-filter .45s ease,-webkit-backdrop-filter .45s ease,border-color .45s ease}
.nav-on .wb-panel{height:68px;background:rgba(16,23,43,0.8);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border-bottom-color:rgba(255,255,255,0.1)}
.wb-bar-in{position:relative;max-width:1280px;height:100%;margin:0 auto;box-sizing:border-box}
.wb-logo{position:absolute;top:50%;left:24px;translate:0 -50%;scale:1.7;transform-origin:0 50%;color:#0F1A12 !important;transition:scale .6s cubic-bezier(.7,0,.2,1),color .45s ease}
.nav-on .wb-logo{scale:1;color:#FFFFFF !important}
@media (max-width:759px){.wb-logo{scale:1.3}.wb-panel{height:84px}}
.wb-links{position:absolute;right:24px;top:50%;translate:0 -50%;display:flex;align-items:center;gap:28px}
.wb-links>*{opacity:0;visibility:hidden;translate:0 -12px;transition:opacity .25s ease,translate .3s ease,visibility 0s linear .3s}
.nav-on .wb-links>*{opacity:1;visibility:visible;translate:0 0;transition:opacity .4s ease,translate .55s cubic-bezier(.2,.9,.2,1),visibility 0s}
.nav-on .wb-links>:nth-child(1){transition-delay:.38s}.nav-on .wb-links>:nth-child(2){transition-delay:.45s}.nav-on .wb-links>:nth-child(3){transition-delay:.52s}.nav-on .wb-links>:nth-child(4){transition-delay:.59s}
.wb-links .wb-get{scale:.4}
.nav-on .wb-links .wb-get{scale:1;transition:opacity .3s ease .72s,translate .5s ease .72s,scale .6s cubic-bezier(.25,1.7,.45,1) .72s,visibility 0s}
.wb-links a.nav-txt:hover{opacity:.75}
@media (prefers-reduced-motion: reduce){.wb-panel,.wb-logo,.wb-links>*,.nav-on .wb-links>*,.nav-on .wb-links .wb-get{transition:none !important}}
.duo-scroll{--p:1}
.duo-3dbox{display:flex;align-items:center;justify-content:center}
.duo3d-on .duo-scale{display:none}
.duo3d-on .duo-canvas{opacity:1 !important}
@media (max-width:759px){.duo-3dbox{height:320px !important}}
.duo-wrap{position:relative;width:600px;height:600px;perspective:2400px;translate:calc((1 - var(--p)) * -150px) 0}
.duo-right{position:absolute;right:0;top:0;width:300px;height:600px;box-sizing:border-box;transform:translateZ(-1px)}
.duo-card{position:absolute;left:0;top:0;width:300px;height:600px;transform-style:preserve-3d;transform-origin:100% 50%;transform:rotateY(calc((1 - var(--p)) * 180deg))}
.duo-face{position:absolute;inset:0;box-sizing:border-box;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.duo-back{transform:rotateY(180deg)}
.duo-shade{opacity:calc((1 - var(--p)) * 0.6);pointer-events:none}
.duo-hint{opacity:calc((1 - var(--p)) * 1.4)}
@media (max-width:1240px){.duo-scale{zoom:.82}}
@media (max-width:1060px){.duo-scale{zoom:.75}}
@media (max-width:759px){.duo-scroll{height:auto !important}.duo-stage{position:relative !important;top:0 !important;height:auto !important;padding:110px 0}.duo-scale{zoom:.56}.duo-hint{display:none}}
.faq summary{list-style:none}.faq summary::-webkit-details-marker{display:none}
.faq-plus{transition:rotate .3s cubic-bezier(.2,.9,.2,1)}.faq details[open] .faq-plus{rotate:45deg}
.faq summary:focus-visible{outline:3px solid #1F5AE6;outline-offset:4px;border-radius:6px}
mark{background:#FFD23F;color:#0F1A12;padding:0 4px;border-radius:4px}
.px-a,.px-b{will-change:translate}
.hx-scaler{zoom:.94}
@media (min-width:760px){.hx-row{flex-wrap:nowrap !important}.hx-left{flex:1 1 0 !important}.hx-stage{flex:0 0 auto !important;width:min(46vw,640px)}}
@media (max-width:1390px){.hx-scaler{zoom:.88}}
@media (max-width:1240px){.hx-scaler{zoom:.78}}
@media (max-width:1100px){.hx-scaler{zoom:.7}}
@media (max-width:960px){.hx-scaler{zoom:.6}}
@media (max-width:840px){.hx-scaler{zoom:.54}}
@media (max-width:759px){.hx-stage{display:none !important}.hx-mobile{display:flex !important}.hx-deco{display:none !important}.nav-txt{display:none !important}.hx-hero{padding-top:110px !important}}
.hx-rise{animation:hxRise .9s cubic-bezier(.2,1.1,.3,1) .2s both}
@keyframes hxRise{from{translate:0 160px}to{translate:0 0}}
@media (prefers-reduced-motion: reduce){.hx-rise{animation:none}}
.floaty{animation:floaty 4.5s ease-in-out infinite}
@keyframes floaty{50%{translate:0 -12px}}
.nudge{animation:nudge 7s ease-in-out 3s infinite}
@keyframes nudge{0%,86%,100%{rotate:0deg}89%{rotate:-3deg}92%{rotate:3deg}95%{rotate:-1.5deg}}
.cta{transition:translate .2s ease, box-shadow .2s ease}.cta:hover{translate:-2px -3px}
@media (prefers-reduced-motion: reduce){.rv1,.rv2,.rv3,.rv4,.rv5,.rv,.rv-side,.px-a,.px-b,.floaty,.nudge{animation:none}.cta{transition:none}}
input,textarea{font:inherit}
input:focus,textarea:focus{outline:3px solid #1F5AE6;outline-offset:2px}
.legal h2{margin:56px 0 12px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:34px;letter-spacing:-0.025em;line-height:1.1}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 16px}
.legal ul{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.legal a{font-weight:600}