/* Landing page. Everything is sized in --cq: 1% of the design width
   (320 canvas pixels on desktop, 144 on phone) at the current pixel scale,
   so overlays stay locked to the pixel art at any window shape. */
body{background:#f1e3c6}
.stage{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;user-select:none;
  --s:4px;--cq:14px;--bd:calc(.35*var(--cq));--bd2:calc(.8*var(--cq));--bd-cta:calc(.42*var(--cq));--ex:calc(1.1*var(--cq))}
.stage.is-phone{--bd:calc(.8*var(--cq));--bd2:calc(1.6*var(--cq));--bd-cta:calc(.95*var(--cq));--ex:calc(2.2*var(--cq))}
.stage canvas.m-canvas{position:absolute;left:0;top:0}

.m-head{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:calc(1.6*var(--cq)) calc(2.2*var(--cq));z-index:5;gap:calc(2*var(--cq))}
.m-brand{position:relative;display:flex;align-items:center;flex:none}
.m-logo{width:calc(21.5*var(--cq));height:auto}
.m-name{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the coin O: grab area over the logo's first letter, and the coin while dragged */
.m-coin{position:absolute;left:0;top:0;height:100%;margin:-6px;padding:6px;box-sizing:content-box;touch-action:none}
.stage canvas.m-drag{position:absolute;z-index:7;display:none;pointer-events:none}
.stage canvas.m-drag.on{display:block}
.m-nav{display:flex;gap:calc(1.4*var(--cq));align-items:center}
.m-link{font-family:Silkscreen,monospace;font-size:calc(1.45*var(--cq));background:none;border:0;color:var(--teal);padding:calc(.5*var(--cq)) calc(.6*var(--cq));cursor:pointer;white-space:nowrap;text-decoration:none}
.m-link:hover{color:#c9347d}
.m-btn{font-family:Silkscreen,monospace;font-size:calc(1.45*var(--cq));background:var(--teal);color:var(--coin);border:0;padding:calc(.7*var(--cq)) calc(1.3*var(--cq));cursor:pointer;white-space:nowrap;
  box-shadow:0 calc(-1*var(--bd)) 0 0 var(--teal-dark),0 var(--bd) 0 0 var(--teal-dark),calc(-1*var(--bd)) 0 0 0 var(--teal-dark),var(--bd) 0 0 0 var(--teal-dark),0 var(--bd2) 0 0 var(--teal-dark)}
.m-btn:hover{background:var(--teal-2)}
.m-btn:active{transform:translateY(calc(.3*var(--cq)))}
.is-phone .m-head{padding:calc(3.5*var(--cq)) calc(4*var(--cq));gap:calc(2*var(--cq))}
.is-phone .m-logo{width:calc(46*var(--cq))}
/* phone: About Us, Pricing and Log in do not fit beside the logo, so the nav takes a second row */
.is-phone .m-head{flex-wrap:wrap;row-gap:calc(1.5*var(--cq))}
.is-phone .m-nav{gap:calc(1.5*var(--cq));width:100%;justify-content:flex-end}
.is-phone .m-link{font-size:calc(3.4*var(--cq));padding:calc(1*var(--cq))}
.is-phone .m-btn{font-size:calc(3.4*var(--cq));padding:calc(1.4*var(--cq)) calc(2.2*var(--cq))}
.short{display:none}
.is-phone .full{display:none}.is-phone .short{display:inline}

/* whiteboard headline */
.m-board{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(1*var(--cq)) calc(2*var(--cq))}
.m-board .b1{margin:0;font-size:1em;font-family:'Pixelify Sans',monospace;font-weight:700;line-height:1.05;display:flex;flex-direction:column;align-items:center}
.m-board .hl{font-size:calc(4*var(--cq));color:#1f4fa8;text-shadow:calc(.18*var(--cq)) calc(.18*var(--cq)) 0 rgba(31,79,168,.22)}
.m-board .q{font-size:calc(2.3*var(--cq));color:#2c3140;font-weight:600;margin-top:calc(.5*var(--cq))}
.m-board .gm{font-size:calc(5.2*var(--cq));color:var(--red);margin-top:calc(.2*var(--cq));padding:0 calc(.6*var(--cq));
  background:linear-gradient(transparent 58%,#ffe57a 58%,#ffe57a 90%,transparent 90%);text-shadow:calc(.22*var(--cq)) calc(.22*var(--cq)) 0 rgba(143,29,22,.25);animation:wob 1.4s steps(2) infinite}
@keyframes wob{50%{transform:rotate(-3deg) scale(1.05)}}
.m-board{transition:opacity .45s steps(4)}
.m-board.sea{opacity:0}
.m-board .b2{margin:calc(.9*var(--cq)) 0 0;font-family:'Pixelify Sans',monospace;font-weight:600;color:#2f7d3b;font-size:calc(1.5*var(--cq));line-height:1.5;min-height:1.6em;transition:opacity .25s steps(2)}
.is-phone .m-board{padding:calc(2*var(--cq)) calc(4*var(--cq))}
.is-phone .m-board .hl{font-size:calc(9.2*var(--cq))}
.is-phone .m-board .q{font-size:calc(5.4*var(--cq));margin-top:calc(1.2*var(--cq))}
.is-phone .m-board .gm{font-size:calc(11.5*var(--cq));padding:0 calc(1.4*var(--cq))}
.is-phone .m-board .b2{font-size:calc(3.8*var(--cq));margin-top:calc(2*var(--cq))}
.m-board .marker{width:calc(3.3*var(--cq))}
.is-phone .m-board .marker{width:calc(7.7*var(--cq))}

/* "See how it works": C2 Peter pink, play arrow */
.m-cta{position:absolute;z-index:5;transform:translateX(-50%);display:inline-flex;align-items:center;gap:calc(.8*var(--cq));text-decoration:none;white-space:nowrap;
  font-family:Silkscreen,monospace;font-weight:700;font-size:calc(2.1*var(--cq));padding:calc(1.2*var(--cq)) calc(2.5*var(--cq));
  background:var(--pink);color:#fff;text-shadow:calc(.2*var(--cq)) calc(.2*var(--cq)) 0 var(--plum);
  box-shadow:0 calc(-1*var(--bd-cta)) 0 0 var(--plum),0 var(--bd-cta) 0 0 var(--plum),calc(-1*var(--bd-cta)) 0 0 0 var(--plum),var(--bd-cta) 0 0 0 var(--plum),0 var(--ex) 0 0 #c9347d,0 calc(var(--ex) + var(--bd-cta)) 0 0 var(--plum);
  animation:halo 1.2s steps(2) infinite}
.m-cta:hover{filter:brightness(1.12)}
.m-cta svg{width:calc(2.2*var(--cq));height:calc(2.2*var(--cq));flex:none;overflow:visible}
@keyframes halo{50%{outline:calc(1.1*var(--cq)) solid rgba(255,95,168,.35);outline-offset:calc(.9*var(--cq))}}
.is-phone .m-cta{gap:calc(2*var(--cq));font-size:calc(5.4*var(--cq));padding:calc(3.2*var(--cq)) calc(5.4*var(--cq))}
.is-phone .m-cta svg{width:calc(5.4*var(--cq));height:calc(5.4*var(--cq))}

/* latte cup (Easter egg hit area) and the frenzy banner */
.m-mug{position:absolute;z-index:4;background:transparent;border:0;padding:0;cursor:pointer}
.m-trophy,.m-dial{position:absolute;z-index:4;background:transparent;border:0;padding:0;cursor:pointer}
.m-mug:focus-visible,.m-trophy:focus-visible,.m-dial:focus-visible{outline:calc(.3*var(--cq)) dashed var(--pink)}
/* one Easter egg at a time: the other triggers are inert while one runs; the dial only answers while Peter is on a call */
.m-mug[aria-disabled="true"],.m-trophy[aria-disabled="true"],.m-dial[aria-disabled="true"]{pointer-events:none}
.m-toast{position:absolute;z-index:6;right:3%;display:none;font-family:'Press Start 2P',monospace;font-size:calc(1.45*var(--cq));color:var(--coin);white-space:nowrap;
  text-shadow:calc(.25*var(--cq)) 0 0 var(--teal),calc(-.25*var(--cq)) 0 0 var(--teal),0 calc(.25*var(--cq)) 0 var(--teal),0 calc(-.25*var(--cq)) 0 var(--teal),calc(.45*var(--cq)) calc(.45*var(--cq)) 0 var(--teal);animation:tb .45s steps(2) infinite}
@keyframes tb{50%{translate:0 calc(-.6*var(--cq))}}
.m-toast.show{display:block}
.is-phone .m-toast{left:0;right:0;text-align:center;font-size:calc(3.6*var(--cq))}

canvas.wipe{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .m-board .gm,.m-cta,.m-toast{animation:none}
  .m-board,.m-board .b2{transition:none}
  .m-btn:active{transform:none}
}
.motion-off .m-board{transition:none}

/* legal strip: one slim line on the floor, inside the no-scroll screen. Left padding keeps it clear of the pause button. */
.m-legal{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:0 calc(1.6*var(--cq));min-height:calc(2.6*var(--cq));padding:4px 16px 4px 76px;background:rgba(8,60,54,.9);
  font:700 max(13px,calc(.95*var(--cq)))/1.3 Nunito,system-ui,sans-serif;color:#d3e6e0}
.m-legal a{color:#fff;text-decoration:underline;text-underline-offset:.15em;text-decoration-color:rgba(255,255,255,.5)}
.m-legal a:hover{color:var(--coin)}
.m-legal .copy{opacity:.85}
.is-phone .m-legal{min-height:calc(9*var(--cq));gap:0 calc(3.2*var(--cq));font-size:max(12.5px,calc(3*var(--cq)));padding-left:70px;justify-content:flex-start}
.is-phone .m-legal .copy{display:none}

/* Pixelify Sans draws its fi ligature as one glyph that reads "Ane". Placed after the font declarations above. */
.m-board .b1,.m-board .b2{font-variant-ligatures:none}