@import url('fonts.css');
:root{--ink:#25241f;--cream:#f1ecdf;--red:#ca3026;--yellow:#ffce48;--scale:1;--frame-w:414px;--frame-h:868px}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:14px/1.5 'DM Sans',sans-serif;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer;background:none;border:0;color:inherit;transition:transform .25s,background .25s}button:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:5px}button:active{transform:scale(.96)}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.canvas-grain{position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.24' filter='url(%23n)'/%3E%3C/svg%3E");z-index:-1}.showcase-header{display:flex;align-items:center;justify-content:space-between;padding:22px 4.5vw;gap:20px;height:87px}.showcase-brand{display:flex;gap:12px;align-items:center;font-family:'Barlow Condensed',sans-serif;font-size:25px;font-weight:800;line-height:1}.showcase-brand img{width:45px;height:45px;border-radius:12px;object-fit:cover}.showcase-brand>span>span{display:block;font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:2px;font-weight:700;margin-top:7px}.concept-label{font-size:9px;letter-spacing:1.7px;font-weight:700;color:#81796a}.concept-label i,.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:8px}.restart{font-size:11px;display:flex;align-items:center;gap:12px;min-height:44px}.restart svg{width:16px;height:16px}.showcase-layout{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px;padding:0 65px;min-height:calc(100dvh - 130px)}.pitch{padding:0 0 30px}.small-kicker{font-size:9px;letter-spacing:1.6px;font-weight:800;display:flex;align-items:center;gap:9px}.small-kicker>span{height:1px;width:27px;background:var(--red)}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:clamp(66px,7.8vw,114px);line-height:.85;letter-spacing:-1.4px;margin:26px 0 22px}h1 em{color:var(--red);font-style:normal}.pitch>p{font-size:13px;line-height:1.8;color:#776e60;margin:0 0 25px}.tour-links{max-width:300px;border-top:1px solid #d8d0c1;display:grid}.tour-links button{display:flex;align-items:center;gap:15px;text-align:left;border-bottom:1px solid #d8d0c1;padding:12px 0;min-height:43px;font-size:11px;font-weight:700}.tour-links button>span{font-size:9px;color:var(--red);font-weight:800}.tour-links svg{margin-left:auto;width:17px;transition:transform .3s}.tour-links button:hover svg{transform:translateX(5px)}.pitch-bottom{font-size:8px;letter-spacing:1.5px;font-weight:800;display:flex;gap:10px;align-items:center;margin-top:23px}.little-star{font-size:27px;color:var(--red);display:block;line-height:1;animation:slowSpin 18s linear infinite}.preview{position:relative;display:flex;flex-direction:column;align-items:center;isolation:isolate;padding-bottom:3px}.device-switch{display:flex;align-items:center;gap:4px;z-index:2;background:#ffffff70;border:1px solid #d6cebf;border-radius:30px;padding:4px;margin-bottom:17px;box-shadow:0 3px 8px #261d0b03}.device-switch button{font-size:10px;font-weight:700;padding:7px 15px;border-radius:30px;min-height:32px}.device-switch button.selected{background:var(--ink);color:white}.device-switch button:last-child{color:#787063;font-size:9px}.switch-divider{height:12px;width:1px;background:#ddd4c3;margin-inline:3px}.device-space{position:relative;width:calc(var(--frame-w) * var(--scale));height:calc(var(--frame-h) * var(--scale));z-index:2}.device{position:relative;width:var(--frame-w);height:var(--frame-h);padding:10px;border:2px solid #696965;border-radius:55px;background:#232421;box-shadow:0 0 0 2px #b7b6ae,0 0 0 4px #d5d1c8,17px 32px 52px #24201524,0 7px 0 #111;transform:scale(var(--scale));transform-origin:top left;transition:border-radius .4s}.screen{width:100%;height:100%;border-radius:43px;overflow:hidden;background:#f8f5ed}.screen iframe{display:block;width:100%;height:100%;border:0;background:#f8f5ed}.phone-camera{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:75px;height:17px;border-radius:20px;background:#20211e;z-index:5;pointer-events:none}.phone-camera:after{content:'';position:absolute;right:8px;top:5px;height:6px;width:6px;background:#263036;box-shadow:inset 0 0 0 1px #36434e;border-radius:50%}.phone-home{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:108px;height:4px;border-radius:9px;background:#282820;pointer-events:none;z-index:4}.side-key{position:absolute;background:#4c4d49;width:4px;border-radius:3px}.key-one{left:-5px;top:135px;height:63px}.key-two{right:-5px;top:167px;height:86px}.device.android{border-radius:38px}.android .screen{border-radius:26px}.android .phone-camera{width:13px;height:13px;top:21px;border-radius:50%}.android .phone-camera:after{right:4px;top:4px;width:5px;height:5px}.android .phone-home{width:74px}.phone-caption{display:flex;align-items:center;gap:0;font-size:9px;color:#81786a;margin:18px 0 0}.phone-caption .live-dot{width:5px;height:5px;background:#6f8459;box-shadow:0 0 0 4px #6f84590b}.phone-orbit{position:absolute;width:490px;height:490px;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #d8c8ad;border-radius:50%;z-index:-1}.phone-orbit:before,.phone-orbit:after{content:'';position:absolute;border:1px solid #d8c8ad99;border-radius:50%;inset:25px}.phone-orbit:after{inset:60px}.floating-note{position:absolute;z-index:3;pointer-events:none}.note-one{right:-40px;top:24%;width:110px;height:110px;color:var(--ink);background:var(--yellow);clip-path:polygon(50% 0,58% 10%,70% 4%,73% 17%,87% 15%,85% 29%,98% 32%,90% 44%,100% 53%,88% 60%,92% 74%,78% 77%,78% 91%,64% 88%,55% 100%,46% 90%,33% 98%,29% 84%,15% 88%,16% 74%,3% 69%,12% 57%,0 47%,12% 40%,7% 26%,22% 25%,22% 11%,36% 14%);text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:36px;line-height:1;transform:rotate(12deg);animation:stampSway 6s ease-in-out infinite}.note-one span{font-family:'DM Sans',sans-serif;font-size:6px;letter-spacing:.5px;margin-top:7px}.note-two{left:-25px;bottom:25%;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;color:var(--red);transform:rotate(-13deg)}.note-two svg{display:block;width:90px;height:60px;stroke-width:1.8;margin-left:9px}.showcase-footer{display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:1px;color:#8d8475;padding:10px 4.5vw 18px}.showcase-footer span:first-child{color:#5f584b;font-weight:700}.actual-size .showcase-layout{align-items:start;padding-block:30px}.actual-size .pitch{position:sticky;top:40px}.actual-size .device-space{--scale:1}
@keyframes slowSpin{to{transform:rotate(360deg)}}@keyframes stampSway{0%,100%{transform:translateY(0) rotate(12deg)}50%{transform:translateY(-8px) rotate(17deg)}}
@media(max-height:780px) and (min-width:701px){.showcase-header{height:70px;padding-top:15px;padding-bottom:15px}.showcase-layout{min-height:calc(100dvh - 104px)}h1{font-size:78px;margin-top:20px;margin-bottom:16px}.pitch>p{margin-bottom:16px}.pitch{padding-bottom:8px}.pitch-bottom{margin-top:16px}.device-switch{margin-bottom:13px}.phone-caption{margin-top:13px}.tour-links button{min-height:39px;padding:9px 0}}
@media(max-width:1050px) and (min-width:601px){.showcase-layout{padding-inline:40px;gap:30px}.pitch h1{font-size:65px}.small-kicker{font-size:7px;letter-spacing:1px}.note-one{right:-16px;width:88px;height:88px;font-size:29px}.note-one span{font-size:5px}.note-two{display:none}.phone-orbit{width:350px;height:350px}.showcase-header{padding-inline:30px}.concept-label{display:none}}
@media(max-width:700px) and (min-width:601px){.pitch{display:none}.showcase-layout{grid-template-columns:1fr}.note-one{right:15%}.phone-orbit{width:450px;height:450px}}
@media(max-width:600px){html,body{height:100%;height:100dvh;overflow:hidden;background:#f8f5ed}.showcase-header,.pitch,.device-switch,.floating-note,.phone-caption,.phone-orbit,.showcase-footer{display:none}.showcase-layout{display:block;min-height:0;height:100%;padding:0}.preview{height:100%;padding:0}.device-space{width:min(100vw,430px)!important;height:100%!important;margin:0 auto}.device{width:100%!important;height:100%!important;transform:none!important;padding:0;border:0;border-radius:0!important;box-shadow:none}.screen,.android .screen{border-radius:0;width:100%;height:100%}.phone-camera,.phone-home,.side-key{display:none}.actual-size .showcase-layout{padding:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.maker-copy{display:grid;gap:5px;font-size:10px;line-height:1.5;letter-spacing:.2px}.maker-copy strong{font-weight:700}.maker-copy>span{color:#81786a;font-size:9px;font-weight:500}.pitch-bottom:has(.maker-copy){gap:12px;align-items:center}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.device-switch{white-space:nowrap}
.device-switch .fullscreen-toggle{display:inline-flex;align-items:center;gap:7px;font-size:10px;color:var(--ink);padding-inline:12px}
.fullscreen-toggle svg{width:14px;height:14px}
.device-switch .fullscreen-toggle:hover{background:#ddd4c3}
body.demo-fullscreen{overflow:hidden;background:#25241f}
.demo-fullscreen .showcase-header,.demo-fullscreen .pitch,.demo-fullscreen .showcase-footer,.demo-fullscreen .floating-note,.demo-fullscreen .phone-orbit,.demo-fullscreen .phone-caption{display:none}
.demo-fullscreen .showcase-layout{position:fixed;inset:0;display:grid;grid-template-columns:1fr;gap:0;place-items:center;height:100dvh;min-height:0;max-width:none;padding:0;margin:0}
.demo-fullscreen .preview{width:100%;height:100%;padding:74px 20px 20px;justify-content:center}
.demo-fullscreen .device-switch{position:absolute;top:max(18px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);margin:0;background:#38372f;border-color:#575449;color:#f1ecdf}
.demo-fullscreen .device-switch button.selected{background:var(--yellow);color:var(--ink)}
.demo-fullscreen .device-switch .fullscreen-toggle{color:#f1ecdf}
.demo-fullscreen .fullscreen-toggle:hover{background:#504d42}
.demo-fullscreen #scale-toggle,.demo-fullscreen .switch-divider{display:none}
.demo-fullscreen .device{box-shadow:0 0 0 2px #807d72,0 0 0 4px #45433b,0 20px 65px #0006,0 7px 0 #111}
@media(max-width:600px){
 .demo-fullscreen .device-switch{display:flex;position:absolute;top:max(8px,env(safe-area-inset-top));padding:3px}
 .demo-fullscreen .preview{padding:60px 0 0}
 .demo-fullscreen .device-space{height:100%!important}
 .demo-fullscreen .device{box-shadow:none}
 .demo-fullscreen .device-switch [data-device]{display:none}
}