@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Yellowtail&display=swap');
/* Revolution Print — motion concept layer. Illustrations by Travis Price. */
.mo-ill{display:block;width:100%;height:100%;fill:currentColor;overflow:visible}
.mo-bar{position:fixed;left:14px;bottom:14px;z-index:90;display:flex;align-items:center;gap:10px;background:#2C2240;color:#fff;border-radius:999px;padding:6px 6px 6px 14px;font-size:13px;font-weight:700;box-shadow:0 10px 30px -8px rgba(44,34,64,.5);line-height:1}
.mo-bar i{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:mo-ping 2.2s infinite}
.mo-bar a{background:rgba(255,255,255,.14);color:#fff;text-decoration:none;border-radius:999px;padding:7px 11px}
.mo-bar a:hover{background:rgba(255,255,255,.24)}
@keyframes mo-ping{0%{box-shadow:0 0 0 0 rgba(194,219,111,.7)}70%,100%{box-shadow:0 0 0 8px rgba(194,219,111,0)}}
.mo-replay{position:absolute;right:12px;bottom:12px;z-index:6;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:7px 12px;font:inherit;font-size:12.5px;font-weight:700;line-height:1;background:color-mix(in srgb,currentColor 14%,transparent);color:inherit;cursor:pointer}
.mo-replay:hover{background:color-mix(in srgb,currentColor 24%,transparent)}
.mo-replay svg{width:13px;height:13px}
.mo-replay:focus-visible,.mo-dots button:focus-visible,.mo-fchips button:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.mo-cap{position:absolute;left:14px;top:12px;z-index:5;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.7}

/* hero panels replace the photo frame */
.phero .ph.mo-ph{transform:rotate(1.6deg);background:var(--pu-50)}
.mo-stage{position:relative;aspect-ratio:4/3.2;overflow:hidden;color:var(--pu);background:var(--pu-50)}

/* ---------- home hero: Revo walks in (rigged) ---------- */
.stack.mo-hero{--rig-bg:#F8F5FC}
.mo-hstage{position:absolute;left:3%;right:1%;top:4%;bottom:2%;border-radius:40px;overflow:hidden;background:var(--rig-bg);border:1px solid var(--line);color:var(--pu)}
.mo-floor{position:absolute;left:0;right:0;bottom:9%;height:2px;background:color-mix(in srgb,var(--pu) 18%,transparent)}
.mo-rig{position:absolute;right:8%;bottom:9%;height:80%;aspect-ratio:249/500}
.mo-rig>svg{display:block;width:100%;height:100%;overflow:visible;fill:currentColor}
.mo-rigsvg{width:100%;height:100%;display:block;overflow:visible}.mo-rigsvg .r-bk{fill:var(--rig-bg)}.mo-rigsvg .r-dust circle{fill:none;stroke:var(--pu,#6b4fa0);stroke-width:2}
.mo-say{position:absolute;left:4%;top:7%;width:41%;aspect-ratio:350/193;color:var(--pu-dk);container-type:inline-size;transform-origin:92% 80%;opacity:0;transform:scale(0)}
.mo-say>svg{position:absolute;inset:0;width:100%;height:100%;fill:currentColor}
.mo-say-t{position:absolute;left:7%;right:11%;top:13%;bottom:16%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:.95;transform:rotate(-4deg)}
.mo-say-t b{font-family:"Permanent Marker",Inter,sans-serif;font-weight:400;font-size:10.5cqw;letter-spacing:.02em;text-transform:uppercase;color:var(--pu-dk)}
.mo-say-t i{font-family:Yellowtail,cursive;font-style:normal;font-size:15cqw;color:var(--pu);margin-top:1cqw;white-space:nowrap}
.mo-said .mo-say{animation:mo-pop .55s cubic-bezier(.3,1.6,.5,1) both}
.mo-hstage .mo-replay{z-index:8;top:12px;bottom:auto}
@keyframes mo-pop{0%{transform:scale(0) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes mo-bump{50%{transform:translateY(-6px)}}
.mo-ph404{--rig-bg:var(--pu-50)}
.mo-ph404 .mo-hstage{position:relative;inset:auto;aspect-ratio:4/3.2;border:0;border-radius:0}
.mo-404 .mo-rig{right:9%;height:82%}
.mo-404 .mo-say{width:44%;left:5%;top:9%}

/* ---------- Log in button ---------- */
.login{position:relative;overflow:hidden;isolation:isolate}
.login::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--pu-dk),var(--pu));transform:scaleX(0);transform-origin:0 50%;transition:transform .38s cubic-bezier(.65,0,.25,1)}
.login:hover,.login:focus-visible{background:#fff;color:#fff;border-color:var(--pu-dk);transition:color .18s .16s,border-color .2s}
.login:hover::before,.login:focus-visible::before{transform:scaleX(1)}
.login svg circle,.login svg path{transform-box:fill-box;transform-origin:50% 100%}
.login:hover svg circle,.login:focus-visible svg circle{animation:mo-nod .7s .08s cubic-bezier(.3,1.7,.5,1)}
.login:hover svg path,.login:focus-visible svg path{animation:mo-shrug .7s .08s cubic-bezier(.3,1.7,.5,1)}
.login span{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.login:hover span{transform:translateX(2px)}
@keyframes mo-nod{0%{transform:none}30%{transform:translateY(-3.5px)}55%{transform:translateY(.6px)}100%{transform:none}}
@keyframes mo-shrug{0%{transform:none}30%{transform:scaleY(.82)}55%{transform:scaleY(1.06)}100%{transform:none}}

/* ---------- sticker strip (home) ---------- */
.mo-strip{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:16px 30px;margin:0 0 30px;padding:4px 0 8px}
.mo-strip .mo-stk{position:relative;flex:0 0 auto}
.mo-stk{filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 6px 8px rgba(30,20,40,.2));transform:rotate(var(--r,0deg));transition:transform .25s}
.mo-stk svg{display:block;width:100%;height:100%;fill:currentColor}
.mo-strip .mo-stk:hover{transform:translateY(-4px) rotate(calc(var(--r,0deg) * -1)) scale(1.06)}
.mo-strip .mo-stk{opacity:0}
.mo-play .mo-stk{animation:mo-slap .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--d,0s)}
@keyframes mo-slap{0%{transform:scale(1.6) rotate(calc(var(--r,0deg) + 14deg));opacity:0}100%{transform:scale(1) rotate(var(--r,0deg));opacity:1}}

/* ---------- press check ---------- */
.mo-press{background:#FBFAF6;color:#241E2B;display:grid;place-items:center}
.mo-reg{position:relative;width:86%;aspect-ratio:330/160;margin-bottom:9%}
.mo-reg>svg{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;transition:transform 1.5s cubic-bezier(.3,.9,.25,1)}
.mo-reg.live>svg{transition:transform .08s linear}
.mo-reg .mo-c{color:#00AEEF}.mo-reg .mo-m{color:#EC008C}.mo-reg .mo-y{color:#FFE600}
.mo-reg .mo-k{color:#2C2240;opacity:0;transition:opacity .45s 1.2s}
.mo-reg.live .mo-k{transition-delay:0s}
.mo-reg.inreg .mo-k{opacity:1}
.mo-marks{position:absolute;inset:12px;pointer-events:none}
.mo-marks i{position:absolute;width:20px;height:20px;border:1.5px solid #2C2240;border-radius:50%}
.mo-marks i::before,.mo-marks i::after{content:"";position:absolute;background:#2C2240}
.mo-marks i::before{left:50%;top:-6px;bottom:-6px;width:1.5px;transform:translateX(-50%)}
.mo-marks i::after{top:50%;left:-6px;right:-6px;height:1.5px;transform:translateY(-50%)}
.mo-marks i:nth-child(1){left:0;top:0}.mo-marks i:nth-child(2){right:0;top:0}.mo-marks i:nth-child(3){left:0;bottom:50px}.mo-marks i:nth-child(4){right:0;bottom:50px}
.mo-press .mo-cap{left:44px;top:13px}
.mo-slider{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:6px 14px;box-shadow:0 4px 18px rgba(44,34,64,.14);font-size:12.5px;font-weight:700;color:#2C2240;width:min(360px,calc(100% - 28px));line-height:1.2}
.mo-slider input{flex:1;accent-color:#6F5A92;min-width:0}
.mo-slider output{font-variant-numeric:tabular-nums;min-width:50px;text-align:right}

/* ---------- white toner roller ---------- */
.mo-roller{background:var(--cp,#6B4E8C);color:#fff;display:grid;place-items:center;transition:background .6s}
.mo-wt{position:relative;width:86%;aspect-ratio:720/300;margin-bottom:6%}
.mo-wt-art{position:absolute;inset:0;display:grid;grid-template-columns:30% 70%;align-items:center;gap:2%}
.mo-wt-ghost{opacity:.13}
.mo-wt-ink{clip-path:inset(0 100% 0 0)}
.mo-painter{position:absolute;bottom:-6%;left:0;width:17%;aspect-ratio:97/150;transform:translateX(-60%);opacity:0}
.mo-play .mo-wt-ink{animation:mo-reveal 3.4s .3s cubic-bezier(.45,.05,.35,1) both}
.mo-play .mo-painter{animation:mo-walk 3.4s .3s cubic-bezier(.45,.05,.35,1) both}
.mo-play .mo-painter .mo-ill{animation:mo-bob .38s ease-in-out 9}
@keyframes mo-reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes mo-walk{0%{left:0;opacity:0}6%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
@keyframes mo-bob{50%{transform:translateY(-4px) rotate(-2deg)}}
.mo-dots{position:absolute;left:12px;bottom:12px;z-index:6;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 120px)}
.mo-dots button{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:var(--c);cursor:pointer;padding:0}
.mo-dots button[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.mo-cpname{position:absolute;right:14px;top:12px;z-index:5;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.swatches.mo-pickable .sw{cursor:pointer;transition:transform .2s}
.swatches.mo-pickable .sw:hover{transform:translateY(-3px)}

/* ---------- laser cut ---------- */
.mo-laser{display:grid;place-items:center}
.mo-cutbox{position:relative;width:54%;aspect-ratio:1;margin-bottom:2%}
.mo-cutbox>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mo-cut-path{fill:none;stroke:#FF2E88;stroke-width:1.6;opacity:0}
.mo-cut-done{fill:none;stroke:color-mix(in srgb,var(--pu) 40%,transparent);stroke-width:.8}
.mo-spark{fill:#fff;filter:drop-shadow(0 0 3px #FF2E88) drop-shadow(0 0 8px #FF2E88)}
.mo-piece{transform-origin:50% 50%;transform-box:fill-box}
.mo-piece.out{animation:mo-dropout 1.1s cubic-bezier(.5,0,.3,1) both}
.mo-piece.out .mo-shadowed{filter:drop-shadow(0 14px 12px rgba(44,34,64,.28))}
@keyframes mo-dropout{0%{transform:none}40%{transform:translate(0,-7%) rotate(-5deg)}100%{transform:translate(9%,-11%) rotate(-9deg)}}
.mo-hole{fill:color-mix(in srgb,var(--pu) 18%,var(--pu-50))}

/* ---------- foil ---------- */
.mo-foil{background:#1E1828;color:#fff;display:grid;place-items:center}
.mo-foil-art{width:84%;display:grid;grid-template-columns:1.45fr 1fr;gap:5%;align-items:center;margin-bottom:10%;filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 10px 16px rgba(0,0,0,.45))}
.mo-foil-art .mo-ill{fill:url(#mo-foil)}
.mo-foil-art .mo-fa{aspect-ratio:146/88}.mo-foil-art .mo-fb{aspect-ratio:99/63}
.mo-fchips{position:absolute;left:14px;bottom:14px;right:14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mo-fchips button{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0;background:linear-gradient(135deg,var(--a),var(--b) 50%,var(--c))}
.mo-fchips button[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.mo-fchips span{margin-left:6px;font-size:12.5px;font-weight:700;opacity:.85}

/* ---------- Kombi drive-by ---------- */
.mo-drive{position:relative;min-height:470px;border-radius:var(--r-xl);background:radial-gradient(500px 260px at 100% 0%,rgba(111,90,146,.12),transparent 70%),var(--lime-50);color:var(--pu-xdk);overflow:hidden;border:1px solid #E1EBBF}
.mo-drive-copy{position:absolute;left:clamp(22px,4vw,48px);top:34px;z-index:2;max-width:30ch}
.mo-drive-copy .eyebrow{margin-bottom:10px}
.mo-drive-copy b{display:block;font-size:clamp(28px,3.4vw,44px);font-weight:850;line-height:1.02;letter-spacing:-.035em}
.mo-drive-copy .mo-s{display:block;margin-top:10px;color:var(--ink-2);font-size:16.5px;line-height:1.5}
.mo-road{position:absolute;left:0;right:0;bottom:44px;height:2px;background:color-mix(in srgb,var(--pu) 28%,transparent)}
.mo-road::after{content:"";position:absolute;left:0;right:0;top:16px;height:3px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--pu) 22%,transparent) 0 34px,transparent 34px 70px)}
.mo-kombi{position:absolute;bottom:40px;left:0;width:min(300px,46%);aspect-ratio:562/342;color:var(--pu);will-change:transform}
.mo-speed{position:absolute;right:97%;top:30%;width:110px;height:46%;display:flex;flex-direction:column;justify-content:space-around;opacity:0;transition:opacity .2s}
.mo-speed i{display:block;height:3px;border-radius:3px;background:currentColor;opacity:.45}
.mo-speed i:nth-child(2){width:70%;margin-left:30%}.mo-speed i:nth-child(3){width:85%;margin-left:15%}
.mo-drive.moving .mo-speed{opacity:1}
.mo-hint{position:absolute;right:16px;top:16px;font-size:12px;font-weight:700;opacity:.6}

/* ---------- small van (cards / calendars) ---------- */
.mo-van{position:relative;height:190px;margin-top:22px;border-radius:var(--r-lg);background:var(--lime-50);border:1px solid #E1EBBF;overflow:hidden;color:var(--pu)}
.mo-van-copy{position:absolute;left:clamp(20px,3vw,34px);top:26px;z-index:2;max-width:24ch;color:var(--pu-xdk)}
.mo-van-copy b{display:block;font-size:22px;font-weight:850;letter-spacing:-.02em;line-height:1.15}
.mo-van-copy span{display:block;margin-top:6px;font-size:15px;color:var(--ink-2);line-height:1.45}
.mo-van .mo-road{bottom:30px}
.mo-vanwrap{position:absolute;bottom:27px;left:62%;width:min(250px,38%)}
.mo-vanart{aspect-ratio:166/63}
.mo-fast{position:absolute;left:4%;bottom:calc(100% + 10px);width:70%;aspect-ratio:120/18.5;opacity:0;color:var(--pu-dk)}
.mo-play .mo-vanwrap{animation:mo-vanin 2s cubic-bezier(.25,.8,.3,1) both}
.mo-play .mo-vanart .mo-ill{animation:mo-bump .2s ease-in-out 7}
.mo-play .mo-fast{animation:mo-pop .5s 1.8s cubic-bezier(.3,1.6,.5,1) both}
@keyframes mo-vanin{0%{left:-40%}80%{left:63%}90%{left:61.5%;transform:rotate(-2deg)}100%{left:62%;transform:none}}

/* ---------- sticker wall ---------- */
.mo-wall{position:relative;min-height:520px;border-radius:var(--r-xl);background:radial-gradient(color-mix(in srgb,var(--pu) 14%,transparent) 1.2px,transparent 1.4px) 0 0/22px 22px,var(--pu-50);border:1px solid var(--line);overflow:hidden;touch-action:pan-y;color:var(--pu)}
.mo-wall .mo-stk{position:absolute;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.mo-wall .mo-stk:hover{transform:translateY(-4px) rotate(var(--r,0deg)) scale(1.04)}
.mo-wall .mo-stk.drag{cursor:grabbing;transition:none;z-index:50}
.mo-wall .mo-replay{top:14px;bottom:auto;right:14px;background:#fff;color:var(--pu);box-shadow:var(--sh-1)}
.mo-wall-note{position:absolute;left:16px;top:18px;font-size:12px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mo-credit{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:14px;color:var(--muted)}
.mo-credit svg{width:38px;height:38px;color:var(--pu);flex:0 0 auto}

/* ---------- peek helper ---------- */
.mo-peek{position:relative;margin-top:96px}
.note.mo-peek{margin-top:110px}
.mo-peeker{position:absolute;right:70px;bottom:100%;width:130px;height:120px;overflow:hidden;pointer-events:none}
.mo-peeker .mo-head{position:absolute;left:50%;bottom:-6px;width:82px;aspect-ratio:67/77;color:var(--pu);transform:translate(-50%,100%)}
.mo-hands{position:absolute;right:5px;bottom:calc(100% - 7px);width:260px;aspect-ratio:201/27;transform:scaleY(0);transform-origin:50% 100%;color:var(--pu);opacity:0;pointer-events:none}
.note.mo-peek .mo-peeker{right:auto;left:50%;transform:translateX(-50%)}
.note.mo-peek .mo-hands{right:auto;left:50%;margin-left:-130px}
.mo-play .mo-peeker .mo-head{animation:mo-peekup .7s .2s cubic-bezier(.3,1.4,.5,1) both,mo-tilt 2.8s 1.2s ease-in-out infinite}
.mo-play .mo-hands{animation:mo-grab .35s .45s cubic-bezier(.3,1.5,.5,1) both}
@keyframes mo-peekup{to{transform:translate(-50%,0)}}
@keyframes mo-tilt{0%,100%{transform:translate(-50%,0) rotate(0)}50%{transform:translate(-50%,0) rotate(-6deg)}}
@keyframes mo-grab{to{transform:scaleY(1);opacity:1}}

/* ---------- "It's a Revolution, Baby!" ---------- */
.mo-baby{position:relative;aspect-ratio:516/481;color:var(--pu)}
.mo-baby .mo-ill{position:absolute;inset:0}
.mo-baby .l1{clip-path:inset(0 0 72% 0)}.mo-baby .l2{clip-path:inset(27% 0 34% 0)}.mo-baby .l3{clip-path:inset(64% 0 0 0)}
.mo-baby-stage{display:block}
.mo-baby-stage .mo-baby{position:absolute;left:6%;top:6%;height:62%}
.mo-baby-stage .mo-lounger{position:absolute;right:4%;bottom:12%;width:40%;aspect-ratio:364/200;opacity:0}
.mo-play .mo-baby .l1,.form.sent .mo-baby .l1{animation:mo-wipe1 .7s .15s cubic-bezier(.6,0,.3,1) both}
.mo-play .mo-baby .l2,.form.sent .mo-baby .l2{animation:mo-wipe2 1s .75s cubic-bezier(.6,0,.3,1) both}
.mo-play .mo-baby .l3,.form.sent .mo-baby .l3{animation:mo-wipe3 .8s 1.65s cubic-bezier(.6,0,.3,1) both}
.mo-play .mo-lounger{animation:mo-slidein .8s 2.3s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes mo-wipe1{from{clip-path:inset(0 100% 72% 0)}to{clip-path:inset(0 0 72% 0)}}
@keyframes mo-wipe2{from{clip-path:inset(27% 100% 34% 0)}to{clip-path:inset(27% 0 34% 0)}}
@keyframes mo-wipe3{from{clip-path:inset(64% 100% 0 0)}to{clip-path:inset(64% 0 0 0)}}
@keyframes mo-slidein{from{transform:translateX(30%);opacity:0}to{transform:none;opacity:1}}
.done .mo-baby{width:210px;margin:0 auto 16px}


@media (max-width:960px){
}
@media (max-width:600px){
  .mo-bar{left:10px;bottom:10px;font-size:12px}
  .mo-strip{gap:12px 18px}
  .mo-strip .mo-stk:nth-child(n+6){display:none}
  .mo-drive{min-height:460px}
  .mo-kombi{width:82%}
  .mo-van{height:250px}
  .mo-vanwrap{width:50%;left:46%}
  @keyframes mo-vanin{0%{left:-50%}80%{left:47%}90%{left:45.5%;transform:rotate(-2deg)}100%{left:46%;transform:none}}
  .mo-wall{min-height:600px}
  .mo-peeker{right:24px}
  .mo-hands{right:-41px}
  .mo-dots button{width:20px;height:20px}
  .mo-fchips button{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  .mo-stage *,.mo-hero *,.login *,.login::before,.mo-strip *,.mo-van *,.mo-wall *,.mo-peeker *,.mo-hands,.mo-baby *,.mo-bar i{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
}