/* About us. Grows out of the old "See how it works" video page: the same sky
   checker, title and video frame at the top, then the sections, and it ends on the floor
   of Peter's office with the landing page's legal strip. Colors are base.css tokens. */
/* The capital C from Silkscreen: Pixelify's C reads as an O, and Silkscreen's sits on the baseline at the same height
   and weight (Press Start 2P's sat high; owner's demo, 2026-10-25). */
@font-face{font-family:'Px C';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/silkscreen-400.woff2) format('woff2');unicode-range:U+0043}
@font-face{font-family:'Px C';font-style:normal;font-weight:600 900;font-display:swap;src:url(../fonts/silkscreen-700.woff2) format('woff2');unicode-range:U+0043}
/* The whole page is pixel (owner's demo board, 2026-10-26): Pixelify Sans, with the digits from Press Start 2P (Pixelify's
   5 reads as S) and the C from Silkscreen, as on Pricing. */
@font-face{font-family:'Px Digits';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/press-start-2p-400.woff2) format('woff2');unicode-range:U+0030-0039;size-adjust:72%}
:root{--pxt:'Px Digits','Px C','Pixelify Sans',monospace}
html{background:#dff5ff;scroll-behavior:smooth;scroll-padding-top:64px}
html.motion-off{scroll-behavior:auto}
body{font-family:var(--pxt);font-size:17px;line-height:1.55;color:var(--ink);background:#dff5ff}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.pxf{font-family:var(--pxt);font-variant-ligatures:none;font-weight:600;letter-spacing:.01em}
.sk{font-family:Silkscreen,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin:0 0 6px}
h1,h2{text-wrap:balance}
h2.pxf{margin:0 0 10px;font-size:clamp(28px,3.4vw,40px);line-height:1.12;color:var(--teal-dark)}

/* ---------- top bar (same buttons as the landing page) ---------- */
.top{position:relative;z-index:6}
.top,.hero,.map{background-color:#dff5ff;background-image:linear-gradient(90deg,rgba(159,214,247,.35) 50%,transparent 50%),linear-gradient(rgba(159,214,247,.35) 50%,transparent 50%);background-size:28px 28px;background-attachment:local}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:10px}
.brand{display:block;line-height:0}
.nav{display:flex;align-items:center;gap:18px}
.m-link{font-family:Silkscreen,monospace;font-size:15px;color:var(--teal);text-decoration:none;padding:6px 4px;white-space:nowrap}
.m-link:hover{color:#c9347d}
.m-btn{display:inline-block;font-family:Silkscreen,monospace;font-size:15px;background:var(--teal);color:var(--coin);text-decoration:none;padding:8px 16px;white-space:nowrap;
  box-shadow:0 -4px 0 0 var(--teal-dark),0 4px 0 0 var(--teal-dark),-4px 0 0 0 var(--teal-dark),4px 0 0 0 var(--teal-dark),0 9px 0 0 var(--teal-dark)}
.m-btn:hover{background:var(--teal-2)}
.m-btn:active{transform:translateY(3px)}
.short{display:none}

/* ---------- 1. the video ---------- */
.hero{padding:26px 0 34px;text-align:center}
.kick{margin:0 0 8px}
.vt{margin:0;font-family:Silkscreen,monospace;font-weight:700;color:#fff;font-size:clamp(56px,8.4vw,104px);letter-spacing:.05em;line-height:1.1;
  text-shadow:4px 0 0 #2aa4d8,-4px 0 0 #2aa4d8,0 4px 0 #2aa4d8,0 -4px 0 #2aa4d8,8px 8px 0 #2aa4d8,11px 11px 0 var(--teal)}
.vwrap{position:relative;width:min(100%,1000px);margin:62px auto 0}
.vwrap canvas.vpeter{position:absolute;right:-30px;top:-86px;width:120px;height:auto;z-index:2;pointer-events:none}
.parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px;margin:0;padding:0 8px}
.part{position:relative;margin:0}
.vpart{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;line-height:0}
.vpart img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#10212b;
  box-shadow:0 -6px 0 0 var(--teal),0 6px 0 0 var(--teal),-6px 0 0 0 var(--teal),6px 0 0 0 var(--teal),12px 12px 0 0 rgba(13,95,85,.35)}
.vbar{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px}
.vplay{flex:none;width:40px}
.vplay canvas{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35))}
.vpart:hover .vplay canvas,.vpart:focus-visible .vplay canvas{filter:brightness(1.12) drop-shadow(0 4px 0 rgba(0,0,0,.35))}
.vpart:active .vplay{transform:translateY(2px)}
.vsoon{font:400 10px/1 'Press Start 2P',monospace;color:var(--teal-dark);background:var(--coin);padding:7px 8px}
.vtoast{position:absolute;left:50%;top:14px;transform:translateX(-50%);font:400 11px/1.5 'Press Start 2P',monospace;color:var(--teal-dark);background:var(--coin);padding:6px 10px;white-space:nowrap;opacity:0;transition:opacity .2s steps(2);pointer-events:none}
.vtoast.on{opacity:1}
/* the Part 1 player: a native video in the poster's pixel frame, with the controls on a bar under the picture so they never cover the captions */
.vstage{margin:0 8px 56px}
.vstage[hidden]{display:none}
.vplayer{font-family:var(--pxt);background:var(--teal);outline:0;box-shadow:0 -6px 0 0 var(--teal),0 6px 0 0 var(--teal),-6px 0 0 0 var(--teal),6px 0 0 0 var(--teal),12px 12px 0 0 rgba(13,95,85,.35)}
.vscreen{position:relative;line-height:0;background:#10212b}
.vscreen video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#10212b;cursor:pointer}
.vscreen video::cue{font-family:'Pixelify Sans',monospace;font-weight:600;color:#fff;background:rgba(5,42,36,.96)}
.vbig{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;padding:0;border:0;background:var(--red);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 -4px 0 0 var(--teal-dark),0 4px 0 0 var(--teal-dark),-4px 0 0 0 var(--teal-dark),4px 0 0 0 var(--teal-dark),0 9px 0 0 var(--teal-dark)}
.vbig[hidden]{display:none}
.vbig canvas{display:block;margin-left:5px}
.vbig:hover{background:#f05a54}
.vbig:active{transform:translateY(3px)}
.vctl{padding:12px 14px 10px}
.vrow{display:flex;align-items:center;gap:6px;margin-top:4px}
.vsp{flex:1}
.vb{flex:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative}
.vb canvas{display:block}
.vb:hover{background:var(--teal-2)}
.vb:active{transform:translateY(2px)}
.vb[aria-pressed="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:3px;background:var(--coin)}
.vb[hidden],.vvol[hidden]{display:none}
.vtime{font:400 10px/1 'Press Start 2P',monospace;color:var(--coin);padding:0 8px;white-space:nowrap}
.vplayer :focus-visible{outline:3px solid var(--coin);outline-offset:2px}
.vplayer input[type=range]{-webkit-appearance:none;appearance:none;display:block;margin:0;background:transparent;cursor:pointer;--p:0%;min-width:0}
.vseek{width:100%;height:28px}
.vvol{width:84px;height:28px;flex:none}
.vplayer input[type=range]::-webkit-slider-runnable-track{height:10px;background:linear-gradient(90deg,var(--coin) var(--p),var(--teal-dark) var(--p));box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark)}
.vplayer input[type=range]::-moz-range-track{height:10px;background:linear-gradient(90deg,var(--coin) var(--p),var(--teal-dark) var(--p));box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark)}
.vplayer input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:22px;margin-top:-6px;background:#fff;border:0;border-radius:0;box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark)}
.vplayer input[type=range]::-moz-range-thumb{width:16px;height:22px;background:#fff;border:0;border-radius:0;box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark)}
.vplayer input[type=range]:hover::-webkit-slider-thumb{background:var(--coin)}
.vplayer input[type=range]:hover::-moz-range-thumb{background:var(--coin)}
.vplayer.is-fs{display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;box-shadow:none;background:#000}
.vplayer.is-fs .vscreen{flex:1;min-height:0;display:flex;align-items:center;background:#000}
.vplayer.is-fs .vscreen video{max-height:100%;height:100%;object-fit:contain}
.vplayer.is-fs .vctl{background:var(--teal)}
.vpart:hover .vsoon,.vpart:focus-visible .vsoon{background:#ffe27a}
.part figcaption{margin-top:14px;font:700 17px/1.3 var(--pxt);color:var(--teal-dark)}
.part figcaption b{display:block;margin-bottom:6px;font:400 11px 'Press Start 2P',monospace;color:var(--teal-2)}
.cd{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 14px;margin:30px auto 0}
.cd[hidden]{display:none}
.cd .cdl{font-family:Silkscreen,monospace;font-size:13px;color:var(--teal-2)}
.cd .cdn{font-family:'Press Start 2P',monospace;font-size:22px;color:var(--teal)}
.cd .cdf{font-size:13px;color:#3f6663}

/* ---------- the level map ---------- */
.map{position:sticky;top:0;z-index:5;border-bottom:4px solid var(--teal);box-shadow:0 4px 0 0 rgba(13,95,85,.18)}
.mapin{position:relative;padding-top:10px;padding-bottom:10px}
.track{position:absolute;left:24px;right:24px;top:24px;height:4px;background:repeating-linear-gradient(90deg,#9fd6f7 0 8px,transparent 8px 14px)}
.track .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--coin);box-shadow:0 0 0 1px #c98a0b}
.track .walker{position:absolute;bottom:2px;left:0;width:44px;height:auto;transform:translateX(-50%)}
.stops{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.stops li{display:flex;justify-content:center}
.stops a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--teal-dark);font:400 8px 'Press Start 2P',monospace;letter-spacing:.06em;text-transform:uppercase;padding:6px 4px 0}
.stops a i{display:block;width:14px;height:14px;background:#fff;box-shadow:0 0 0 3px var(--teal)}
.stops a.on i,.stops a.done i{background:var(--coin)}
.stops a.on{color:#c9347d}
.stops a:hover span{text-decoration:underline}
.map .now{display:none}

/* ---------- sections ---------- */
.sec{position:relative;padding:72px 0}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
html.motion-off .reveal{opacity:1;transform:none}

/* 2. mission and vision: the landing page's whiteboard */
.mv{background:#f1e3c6;background-image:repeating-linear-gradient(90deg,rgba(214,190,140,.25) 0 14px,transparent 14px 44px)}
.board{position:relative;max-width:900px;margin:0 auto;background:#fbfbf7;padding:40px 48px 54px;
  box-shadow:0 -10px 0 0 #8e959e,0 10px 0 0 #8e959e,-10px 0 0 0 #8e959e,10px 0 0 0 #8e959e,0 22px 0 0 #6f767f}
.board{text-align:center}
.board .row + .row{margin-top:34px;padding-top:30px;border-top:3px dashed #e3e3da}
.lbl{display:inline-block;margin:0 0 10px;font:700 13px Silkscreen,monospace;letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:3px 8px}
.lbl.red{background:var(--red)}
.lbl.green{background:#2f7d3b}
.say{margin:0;line-height:1.18}
.say.m{font-size:clamp(28px,3.4vw,42px);color:#1f4fa8;text-shadow:2px 2px 0 rgba(31,79,168,.18)}
.say.v{font-size:clamp(22px,2.5vw,30px);color:#2c3140}
.tray{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);display:flex;gap:16px;padding:0 10px}
.tray .mk{display:block;width:34px;height:7px;transition:transform .15s steps(2),opacity .15s steps(2)}
.tray .mk.up{transform:translateY(-10px);opacity:0}
.mk.r{background:var(--red)}.mk.b{background:#1f4fa8}.mk.k{background:#2c3140}.mk.g{background:#2f7d3b}

/* 3. the gear */
.promise{background:#dff5ff}
.gear{position:relative;max-width:760px}
.slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;max-width:760px}
.slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px 10px;background:#0b4f47;color:#e8fbf7;border:0;cursor:pointer;font:700 14px/1.2 var(--pxt);
  box-shadow:0 -4px 0 0 #083c36,0 4px 0 0 #083c36,-4px 0 0 0 #083c36,4px 0 0 0 #083c36,6px 8px 0 0 rgba(8,60,54,.3)}
.slot canvas{width:56px;height:56px}
.slot:hover{background:var(--teal-2)}
.slot[aria-selected=true]{background:var(--teal-2);color:var(--coin);box-shadow:0 -4px 0 0 var(--coin),0 4px 0 0 var(--coin),-4px 0 0 0 var(--coin),4px 0 0 0 var(--coin),0 -8px 0 0 #083c36,0 8px 0 0 #083c36,-8px 0 0 0 #083c36,8px 0 0 0 #083c36}
.gcard{display:grid;grid-template-columns:96px minmax(0,1fr);gap:22px;align-items:center;max-width:760px;margin-top:30px;background:#0b4f47;color:#e8fbf7;padding:22px 26px;min-height:150px;
  box-shadow:0 -4px 0 0 #ffd23f,0 4px 0 0 #ffd23f,-4px 0 0 0 #ffd23f,4px 0 0 0 #ffd23f,0 -8px 0 0 #083c36,0 8px 0 0 #083c36,-8px 0 0 0 #083c36,8px 0 0 0 #083c36,12px 16px 0 0 rgba(8,60,54,.35)}
.gcard .gbig{width:96px;height:96px}
.gcard h3{margin:0 0 6px;font:700 22px/1.25 var(--pxt);color:var(--coin)}
.gcard p{margin:0;font-size:17px;line-height:1.55}
.gcard p b{color:#fff}
.gcard .pop{animation:pop .3s steps(3)}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:none}}

/* 4. the rules */
.ask{background:#f1e3c6;background-image:repeating-linear-gradient(90deg,rgba(214,190,140,.25) 0 14px,transparent 14px 44px)}
.log{position:relative;max-width:820px;background:#faf6e8;padding:22px 28px 18px;
  box-shadow:0 -4px 0 0 var(--teal-dark),0 4px 0 0 var(--teal-dark),-4px 0 0 0 var(--teal-dark),4px 0 0 0 var(--teal-dark),10px 12px 0 0 rgba(8,60,54,.25)}
.loghead{display:flex;justify-content:space-between;align-items:center;border-bottom:3px dashed #e2d7b6;padding-bottom:10px;margin-bottom:6px}
.loghead .sk{margin:0;color:var(--teal-dark)}
.count{font:400 14px 'Press Start 2P',monospace;color:var(--teal)}
.count b{color:#c9347d;font-weight:400}
.rules{list-style:none;margin:0;padding:0}
.rules li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start;padding:12px 0;border-bottom:2px dotted #e2d7b6;font-size:17px}
.rules li:last-child{border-bottom:0}
.rules li b{color:var(--teal-dark)}
.tick{position:relative;display:block;width:24px;height:24px;margin-top:2px;background:#fff;box-shadow:0 0 0 3px var(--teal)}
.tick::after{content:"";position:absolute;inset:0;opacity:0;background:no-repeat center/18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23137a6b' d='M7 1h2v2H7zM6 3h2v2H6zM5 4h2v2H5zM1 4h2v2H1zM2 5h2v2H2zM3 6h3v2H3z'/%3E%3C/svg%3E")}
.rules li.on .tick{background:#e6f7ef}
.rules li.on .tick::after{opacity:1;animation:pop .3s steps(3)}
.rules li .spark{position:absolute;width:15px;height:15px;left:-4px;top:-4px;pointer-events:none}
.fine{margin:14px 0 0;font-size:14.5px;color:#4b6461}
.fine a{color:var(--teal);font-weight:800}

/* 5. shoppers */
.shop{background:#bfe8ff}
.shopin{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.line{display:flex;align-items:center;justify-content:center}
.line figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.line figure canvas{height:96px;width:auto}
.line figcaption{font:400 12px Silkscreen,monospace;letter-spacing:.08em;color:var(--teal-dark);background:#fff;padding:2px 6px}
.line .dots{flex:1;height:6px;margin:0 12px 26px;background:repeating-linear-gradient(90deg,#ffd23f 0 10px,transparent 10px 18px);position:relative;min-width:60px}
.line .dots canvas{position:absolute;left:50%;top:50%;width:28px;height:28px;transform:translate(-50%,-50%)}
.coins{list-style:none;margin:0 0 22px;padding:0}
.coins li{position:relative;padding-left:30px;margin:8px 0}
.coins li::before{content:"";position:absolute;left:0;top:.3em;width:14px;height:14px;background:var(--coin-url) center/contain no-repeat;image-rendering:pixelated}
  box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark),3px 6px 0 0 var(--teal-dark)}

/* 6. why: the money left on the table */
.why{background:#dff5ff}
.whybox{position:relative;background:var(--teal-dark);color:#e8fbf7;padding:34px 36px;
  box-shadow:0 -4px 0 0 #ffd23f,0 4px 0 0 #ffd23f,-4px 0 0 0 #ffd23f,4px 0 0 0 #ffd23f,0 -8px 0 0 #062e29,0 8px 0 0 #062e29,-8px 0 0 0 #062e29,8px 0 0 0 #062e29,12px 16px 0 0 rgba(6,46,41,.35)}
.whybox h2.pxf{color:#fff;max-width:28ch}
.no{display:inline-block;background:var(--pink);color:var(--plum);padding:0 .22em;box-shadow:.12em .12em 0 var(--plum);transform:rotate(-2deg)}
.whygrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:34px;align-items:center;margin-top:22px}
.scene{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.seg{display:inline-flex;align-self:flex-start;gap:0;box-shadow:0 0 0 3px #062e29}
.seg button{font:400 12px Silkscreen,monospace;letter-spacing:.06em;text-transform:uppercase;border:0;padding:9px 14px;background:#0b4f47;color:#bfe0d8;cursor:pointer}
.seg button[aria-checked=true]{background:var(--coin);color:var(--teal-dark)}
.stage4{width:100%;height:auto;background:#0b4f47;box-shadow:0 0 0 3px #062e29}
.meter{display:flex;align-items:center;gap:10px;margin:0;font:400 12px Silkscreen,monospace;letter-spacing:.06em;text-transform:uppercase;color:#bfe0d8}
.meter .mc{display:flex;gap:4px;flex:1;min-width:0;overflow:hidden}
.meter .mc.many{-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
.meter .mc i{flex:none}
.meter .mc i{display:block;width:16px;height:16px;background:var(--coin-url) center/contain no-repeat;image-rendering:pixelated}
.whytxt p{margin:0 0 14px;font-size:17.5px}
.whytxt p:last-child{margin:0}

/* 7. who */
.who{padding-bottom:12px;background:#f1e3c6;background-image:repeating-linear-gradient(90deg,rgba(214,190,140,.25) 0 14px,transparent 14px 44px)}
.founder{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start;margin-top:18px}
.pic{position:relative;display:flex;flex-direction:column;align-items:center}
.frame{position:relative;width:220px;aspect-ratio:1;background:#bfe8ff;display:grid;place-items:center;
  box-shadow:0 -6px 0 0 var(--teal-dark),0 6px 0 0 var(--teal-dark),-6px 0 0 0 var(--teal-dark),6px 0 0 0 var(--teal-dark),10px 14px 0 0 rgba(8,60,54,.3)}
.frame .avatar{width:150px;height:auto;opacity:.55}
.frame .ph{position:absolute;bottom:10px;font:400 8px 'Press Start 2P',monospace;color:var(--teal-dark)}
.plate{margin:22px 0 0;font:400 13px 'Press Start 2P',monospace;color:var(--coin);background:var(--teal-dark);padding:8px 12px;text-align:center}
.pet{position:absolute;right:-26px;bottom:52px;background:none;border:0;padding:0;cursor:pointer;line-height:0}
.pet canvas{width:84px;height:auto}
.note{background:#fff;padding:24px 28px;font-size:17.5px;box-shadow:0 -4px 0 0 var(--teal),0 4px 0 0 var(--teal),-4px 0 0 0 var(--teal),4px 0 0 0 var(--teal)}
.note p{margin:0 0 14px}
.note mark{background:#fff3c4;color:#6a4b00;padding:0 .2em;box-shadow:0 0 0 1px #e9c96a}
.draft{font-size:15px;color:#4b6461}
.chip{display:inline-block;font:400 8px 'Press Start 2P',monospace;color:#6a4b00;background:#fff3c4;padding:2px 6px;box-shadow:0 0 0 1px #e9c96a;margin-right:4px}
.facts{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:3px dashed #e3e3da;font-size:15.5px}
.facts li{margin:6px 0}
.facts b{color:var(--teal-dark)}

/* the end: Peter's office */
.office{position:relative}
.wall{background:#f1e3c6;background-image:repeating-linear-gradient(90deg,rgba(214,190,140,.32) 0 14px,transparent 14px 44px);padding:64px 24px 54px;display:flex;justify-content:center}
.wb{text-align:center;background:#fbfbf7;padding:32px 40px 40px;max-width:640px;width:100%;
  box-shadow:0 -10px 0 0 #8e959e,0 10px 0 0 #8e959e,-10px 0 0 0 #8e959e,10px 0 0 0 #8e959e}
.wb h2{margin:0;font-size:clamp(30px,4vw,44px);color:#1f4fa8}
.wb p{margin:8px 0 26px;color:#2f7d3b;font:600 18px var(--pxt);font-variant-ligatures:none}
.ctas{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:28px 30px}
.m-cta{display:inline-flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap;font:700 20px Silkscreen,monospace;padding:12px 22px;background:var(--pink);color:#fff;text-shadow:2px 2px 0 var(--plum);
  box-shadow:0 -5px 0 0 var(--plum),0 5px 0 0 var(--plum),-5px 0 0 0 var(--plum),5px 0 0 0 var(--plum),0 13px 0 0 #c9347d,0 18px 0 0 var(--plum)}
.m-cta:hover{filter:brightness(1.12)}
.m-cta svg{width:20px;height:20px;overflow:visible}
.ctas .m-btn{font-size:18px;padding:12px 22px}
.wains{height:40px;background:#6fa38e;background-image:linear-gradient(#5b8f7b 0 6px,transparent 6px);border-top:6px solid #4f7f6b}
.floor{position:relative;height:120px;background:#c98d4f;background-image:linear-gradient(#a8703a 0 3px,transparent 3px),linear-gradient(90deg,#a8703a 0 3px,transparent 3px);background-size:100% 30px,120px 30px;overflow:hidden}
.floor .floorpeter{position:absolute;bottom:26px;left:0;width:108px;height:auto}

/* the landing page's legal strip, with About us added */
.m-legal{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 22px;min-height:40px;padding:8px 16px 8px 76px;background:#083c36;
  font:700 14px/1.3 var(--pxt);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 a[aria-current] b{color:var(--coin)}
.m-legal .copy{opacity:.85}
.m-legal .short{display:none}
canvas.wipe{position:fixed;inset:0;width:100%;height:100%;z-index:20;pointer-events:none}

/* the pause toggle: fixed bottom-left where the side margin is free, in the top bar otherwise */
@media (max-width:1180px){
  .nav .motion-toggle{position:static;width:34px;height:34px;flex:none}
  .nav .motion-toggle canvas{width:16px;height:16px}
}

/* ---------- phone ---------- */
@media (max-width:860px){
  .shopin{grid-template-columns:minmax(0,1fr);gap:22px}
  .whygrid{grid-template-columns:minmax(0,1fr);gap:20px}
  .founder{grid-template-columns:minmax(0,1fr);gap:26px}
  .pic{justify-self:center;width:max-content;max-width:100%}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .bar{padding-top:14px}
  .brand canvas{width:150px!important;height:auto!important}
  .nav{gap:10px}
  .m-link,.m-btn{font-size:13px}
  .m-btn{padding:7px 10px}
  .top .full{display:none}.top .short{display:inline}
  .hero{padding:18px 0 26px}
  .vt{font-size:clamp(38px,12vw,56px);letter-spacing:.03em;text-shadow:3px 0 0 #2aa4d8,-3px 0 0 #2aa4d8,0 3px 0 #2aa4d8,0 -3px 0 #2aa4d8,6px 6px 0 #2aa4d8,8px 8px 0 var(--teal)}
  .board .marker{width:30px}
  .vwrap{margin-top:50px}
  .vwrap canvas.vpeter{width:76px;top:-54px;right:-6px}
  .parts{grid-template-columns:minmax(0,1fr);gap:34px;padding:0 6px}
  .vpart img{box-shadow:0 -5px 0 0 var(--teal),0 5px 0 0 var(--teal),-5px 0 0 0 var(--teal),5px 0 0 0 var(--teal),9px 9px 0 0 rgba(13,95,85,.35)}
  .vbar{gap:10px;margin-top:20px}
  .vplay{width:32px}
  .vsoon{font-size:8px;padding:5px 6px}
  .vtoast{font-size:8px;top:8px}
  .vstage{margin:0 6px 40px}
  .vplayer{box-shadow:0 -5px 0 0 var(--teal),0 5px 0 0 var(--teal),-5px 0 0 0 var(--teal),5px 0 0 0 var(--teal),9px 9px 0 0 rgba(13,95,85,.35)}
  .vbig{width:64px;height:64px;margin:-32px 0 0 -32px}
  .vctl{padding:10px 8px 8px}
  .vrow{gap:2px}
  .vrow{flex-wrap:wrap}
  .vtime{font-size:8px;padding:2px 0 4px;order:-1;flex-basis:100%;text-align:right}
  .vb{width:40px}
  .vvol{width:40px}
  .part figcaption{font-size:15px;margin-top:12px}
  .cd .cdn{font-size:16px}
  /* the map shrinks to dots plus the current section's name */
  .mapin{display:flex;align-items:center;gap:12px;padding-top:8px;padding-bottom:8px}
  .track{left:16px;right:16px;top:auto;bottom:0;height:3px}
  .track .walker{width:30px;bottom:1px}
  .stops{display:flex;gap:6px;flex:none}
  .stops a{padding:4px 2px 10px}
  .stops a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .stops a i{width:12px;height:12px}
  .map .now{display:block;margin:0 0 6px auto;font:400 8px 'Press Start 2P',monospace;letter-spacing:.06em;text-transform:uppercase;color:#c9347d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  html{scroll-padding-top:48px}
  .sec{padding:52px 0}
  .board{padding:26px 20px 40px;box-shadow:0 -6px 0 0 #8e959e,0 6px 0 0 #8e959e,-6px 0 0 0 #8e959e,6px 0 0 0 #8e959e,0 14px 0 0 #6f767f}
  .say.m{font-size:27px}.say.v{font-size:21px}
  .slots{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .slot{padding:10px 2px 8px;font-size:11px;gap:6px}
  .slot canvas{width:36px;height:36px}
  .gcard{grid-template-columns:56px minmax(0,1fr);gap:14px;padding:16px 16px;margin-top:24px}
  .gcard .gbig{width:56px;height:56px}
  .gcard h3{font-size:19px}
  .gcard p{font-size:16px}
  .log{padding:16px 16px 14px}
  .rules li{font-size:16px;gap:12px;grid-template-columns:26px minmax(0,1fr)}
  .line figure canvas{height:70px}
  .whybox{padding:24px 18px}
  .whytxt p{font-size:16px}
  .frame{width:180px}
  .frame .avatar{width:120px}
  .note{padding:18px 18px}
  .note,.whytxt p{font-size:16px}
  .wall{padding:48px 16px 40px}
  .wb{padding:24px 18px 32px}
  .ctas{flex-direction:column;gap:30px}
  .m-cta{font-size:18px}
  .floor{height:96px}
  .floor .floorpeter{width:84px;bottom:20px}
  .m-legal{justify-content:flex-start;gap:4px 16px;padding-left:70px;font-size:13px;min-height:62px}
  .m-legal .full{display:none}.m-legal .short{display:inline}
  .m-legal .copy{display:none}
}
@media (max-width:380px){
  .brand canvas{width:122px!important}
  .nav{gap:8px}
  .m-link,.top .m-btn{font-size:12px}
}
@media (max-width:380px){.vvol{display:none}}