@font-face{font-family:Jakarta;src:url(fonts/jakarta.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-600i.woff2) format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:PlexAr;src:url(fonts/plexar-500.woff2) format('woff2');font-weight:400 600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:PlexAr;src:url(fonts/plexar-700.woff2) format('woff2');font-weight:700 800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Caveat;src:url(fonts/caveat-700.woff2) format('woff2');font-weight:700;font-display:swap}
:root{
 --blush:#f8e9f1;--sky:#e6f0fb;--paper:#fffdfb;--ink:#2e2a33;--ink2:#6f6674;--rule:#efe4ec;--rose:#e2578a;--rose2:#f4a3c0;
 --t0:#ffc8db;--t1:#ffd8b8;--t2:#fff1ab;--t3:#d8f5c6;--t4:#c2f0e6;--t5:#c7e5ff;--t6:#d9d2ff;--t7:#f4cbf6;
 --f-ui:Jakarta,PlexAr,system-ui,-apple-system,"Segoe UI",sans-serif;--f-d:Fraunces,PlexAr,Georgia,serif;--f-h:Caveat,cursive;
 --wrap:1180px;--r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html{background:linear-gradient(170deg,var(--blush) 0,#f3ecfb 900px,var(--sky) 1800px,#f6eef6 2800px,var(--blush) 4200px,#eef2fb 6000px);background-color:var(--blush)}
body{margin:0;color:var(--ink);font:16px/1.6 var(--f-ui);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;overflow-x:clip}
html{overflow-x:hidden;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:8px}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.desk-dots{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(46,42,51,.07) 1px,transparent 1.4px);background-size:26px 26px;mask-image:linear-gradient(#000,transparent 85%)}

/* nav */
.nav{position:sticky;top:0;z-index:40;padding:14px 0;transition:background .3s,box-shadow .3s}
.nav.scrolled{background:color-mix(in srgb,var(--paper) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--rule)}
.nav .wrap{display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 21px/1 var(--f-d);letter-spacing:-.01em}
.logo i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:repeating-conic-gradient(var(--t0) 0 25%,#fff 0 50%) 0 0/12px 12px;box-shadow:inset 0 0 0 2px #fff,0 4px 10px -4px rgba(120,40,80,.4);position:relative}
.logo i::after{content:"";position:absolute;inset:7px 9px;background:var(--paper);border-radius:3px}
.nav .sp{flex:1}
.nav a.lk{white-space:nowrap;text-decoration:none;font-weight:600;font-size:15px;color:var(--ink2);padding:8px 10px;border-radius:10px}
.nav a.lk:hover{color:var(--ink);background:rgba(255,255,255,.6)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 24px;border-radius:16px;font:700 16px/1 var(--f-ui);text-decoration:none;border:0;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s}
.btn img{width:22px;height:22px}
.btn.main{background:var(--ink);color:#fff;box-shadow:0 10px 24px -10px rgba(46,42,51,.6)}
.btn.main:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(46,42,51,.6)}
.btn.rose{background:var(--rose);color:#fff;box-shadow:0 10px 24px -10px rgba(226,87,138,.7)}
.btn.rose:hover{transform:translateY(-2px)}
.btn.soft{background:rgba(255,255,255,.75);color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(46,42,51,.12)}
.btn.soft:hover{background:#fff}
.btn:active{transform:scale(.97)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* hero */
.hero{padding:42px 0 90px}
.hero .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center}
.h1{font:700 clamp(42px,5.6vw,76px)/1.0 var(--f-d);letter-spacing:-.025em}
.lead{font-size:clamp(17px,1.5vw,19px);color:var(--ink2);margin:22px 0 30px;max-width:30em}
.note{font:700 26px/1.05 var(--f-h);color:var(--rose);display:inline-flex;align-items:flex-start;gap:6px;transform:rotate(-3deg)}
.note svg{width:54px;height:40px;stroke:var(--rose);fill:none;stroke-width:2.2;stroke-linecap:round;flex:none}

/* the desk scene */
.scene{position:relative;perspective:1600px;aspect-ratio:16/11.2}
.book3d{position:absolute;inset:6% 4% 4% 4%;transform-style:preserve-3d;transform:rotateX(var(--rx,10deg)) rotateY(var(--ry,-8deg)) rotateZ(1deg);transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.book3d img.shot{width:100%;height:100%;object-fit:cover;border-radius:20px;box-shadow:0 50px 80px -30px rgba(70,30,60,.45),0 18px 30px -16px rgba(70,30,60,.3)}
.drop-in{animation:drop 1.1s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes drop{from{opacity:0;transform:translateY(-60px) rotateX(35deg) rotateY(-20deg) scale(.9)}}
.stk{background:none;border:0;padding:0;position:absolute;width:var(--s,74px);height:var(--s,74px);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;z-index:5;filter:drop-shadow(0 8px 10px rgba(70,30,60,.25));transition:filter .2s}
.stk img{width:100%;height:100%;pointer-events:none;transform:rotate(var(--r,0deg));transition:transform .25s}
.stk:hover img{transform:rotate(var(--r,0deg)) scale(1.08)}
.stk.drag{cursor:grabbing;filter:drop-shadow(0 18px 18px rgba(70,30,60,.3));z-index:9}
.stk.drag img{transform:rotate(calc(var(--r,0deg) + 8deg)) scale(1.15)}
.pop{animation:pop .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop{from{opacity:0;transform:scale(.2) rotate(-30deg)}}
.tape{position:absolute;height:26px;width:120px;opacity:.9;z-index:4;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.08)}

/* section heads */
.sec{padding:80px 0}
.h2{font:700 clamp(32px,3.6vw,48px)/1.06 var(--f-d);letter-spacing:-.02em}
.sub{color:var(--ink2);font-size:18px;margin-top:12px;max-width:36em}
.head{margin-bottom:38px}

/* products */
.prods{display:grid;grid-template-columns:1.7fr 1fr;gap:24px;align-items:stretch}
.prod{position:relative;background:var(--paper);border-radius:28px;padding:14px;box-shadow:0 30px 60px -36px rgba(70,30,60,.45),0 0 0 1px rgba(46,42,51,.05);display:flex;flex-direction:column;text-decoration:none;overflow:hidden}
.prod .im{border-radius:18px;overflow:hidden;background:var(--blush);aspect-ratio:16/10;position:relative}
.prod .im img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.prod:hover .im img{transform:scale(1.04)}
.prod .bd{padding:20px 12px 10px;display:flex;flex-direction:column;gap:10px;flex:1}
.prod h3{font:700 28px/1.1 var(--f-d)}
.prod p{color:var(--ink2)}
.prod .tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:13px;font-weight:700;padding:5px 11px;border-radius:99px;background:var(--c,var(--t5))}
.prod .btns{margin-top:auto;padding-top:8px}
.prod.soon{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.55) 0 14px,rgba(255,255,255,.3) 14px 28px);box-shadow:inset 0 0 0 2px rgba(46,42,51,.08);justify-content:center;align-items:center;text-align:center;padding:40px 30px;gap:12px}
.prod.soon img{width:84px;height:84px;margin:0 auto}
.prod.soon h3{font-size:26px}

/* promises (handwritten sticky notes) */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sticky{background:var(--c);padding:26px 24px 28px;border-radius:4px 4px 18px 4px;box-shadow:0 18px 30px -18px rgba(70,30,60,.4);transform:rotate(var(--r));position:relative}
.sticky::before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:24px;margin-left:-45px;background:rgba(255,255,255,.55);transform:rotate(-3deg)}
.sticky img{width:52px;height:52px;margin-bottom:10px}
.sticky h3{font:700 30px/1.05 var(--f-h);margin-bottom:8px}
.sticky p{font-size:15.5px;color:#4b4350}

/* planner page: tab gallery */
.gal{position:relative;margin-top:10px}
.gtabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 26px;position:relative;z-index:2}
.gtabs::-webkit-scrollbar{display:none}
.gtab{flex:none;border:0;cursor:pointer;background:var(--c);color:var(--ink);font:700 14px/1 var(--f-ui);padding:12px 16px 14px;border-radius:14px 14px 0 0;transform:translateY(8px);transition:transform .2s;display:flex;align-items:center;gap:7px}
.gtab img{width:20px;height:20px}
.gtab:hover{transform:translateY(4px)}
.gtab[aria-selected=true]{transform:none;box-shadow:0 -6px 14px -8px rgba(70,30,60,.35)}
.gframe{position:relative;background:var(--paper);border-radius:26px;padding:12px;box-shadow:0 40px 80px -40px rgba(70,30,60,.5),0 0 0 1px rgba(46,42,51,.05)}
.gview{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:var(--blush)}
.gview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
.gview img.out{opacity:0;transform:scale(1.015)}
.gcap{display:flex;gap:14px;align-items:baseline;padding:16px 10px 6px;flex-wrap:wrap}
.gcap b{font:700 22px/1.2 var(--f-d)}
.gcap span{color:var(--ink2)}

/* devices */
.devices{display:grid;grid-template-columns:1fr 2.4fr 1fr;gap:28px;align-items:end}
.dev{background:#2e2a33;border-radius:34px;padding:10px;box-shadow:0 40px 60px -30px rgba(40,20,40,.55)}
.dev img{border-radius:26px;width:100%}
.dev.tab{border-radius:30px;padding:12px}.dev.tab img{border-radius:20px}
.dev.lap{border-radius:20px 20px 6px 6px;padding:10px 10px 0;position:relative}
.dev.lap img{border-radius:10px 10px 0 0}
.dev.lap::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-16px;height:16px;background:linear-gradient(#d9d3dc,#bdb5c1);border-radius:0 0 18px 18px}
.devcap{text-align:center;margin-top:30px;font-weight:700;color:var(--ink2)}

/* themes fan */
.fan{position:relative;height:clamp(260px,34vw,420px);margin-top:20px}
.fan button{position:absolute;top:0;width:52%;left:24%;border:0;padding:0;background:none;cursor:pointer;border-radius:16px;overflow:hidden;box-shadow:0 30px 50px -26px rgba(70,30,60,.55);transition:transform .6s cubic-bezier(.2,.8,.2,1),z-index 0s .2s;transform:translateX(var(--x)) rotate(var(--rot)) scale(var(--sc,.86));z-index:var(--z)}
.fan button img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fan button span{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);padding:6px 12px;border-radius:99px;font-weight:700;font-size:14px}

/* features */
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
.feat{display:flex;gap:16px;padding:20px 0;border-bottom:1.5px dashed rgba(46,42,51,.12)}
.feat img{width:44px;height:44px;flex:none}
.feat h3{font:700 19px/1.3 var(--f-ui)}
.feat p{color:var(--ink2);font-size:15.5px;margin-top:3px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{background:var(--paper);border-radius:24px;padding:28px 26px;position:relative;box-shadow:0 20px 40px -30px rgba(70,30,60,.45)}
.step::before{counter-increment:s;content:counter(s);font:700 54px/1 var(--f-d);color:var(--c);-webkit-text-stroke:1.5px var(--ink);display:block;margin-bottom:12px}
.step h3{font:700 20px/1.3 var(--f-ui);margin-bottom:6px}
.step p{color:var(--ink2);font-size:15.5px}
.step code{background:var(--blush);padding:2px 7px;border-radius:7px;font-family:inherit;font-weight:700;color:var(--rose)}

/* faq */
.faq{max-width:820px}
.faq details{background:var(--paper);border-radius:18px;margin-bottom:12px;box-shadow:0 0 0 1px rgba(46,42,51,.06)}
.faq summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:600 26px/1 var(--f-d);color:var(--rose);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 24px 20px;color:var(--ink2)}

/* cta band */
.band{background:var(--ink);color:#fff;border-radius:34px;padding:56px clamp(24px,5vw,64px);display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;position:relative;overflow:hidden}
.band .h2{color:#fff}
.band p{color:#cfc6d3;margin-top:12px}
.band .btns{justify-content:flex-end}
.band .btn.soft{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.band .deco{position:absolute;width:120px;opacity:.9;pointer-events:none}

footer{padding:40px 0 50px;color:var(--ink2);font-size:14px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer a{text-decoration:none;font-weight:600}
footer .sp{flex:1}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

@media(max-width:900px){
 .hero .wrap,.prods,.band{grid-template-columns:1fr}
 .hero{padding-top:20px}
 .scene{margin-top:10px}
 .notes,.steps{grid-template-columns:1fr}
 .feats{grid-template-columns:1fr}
 .devices{grid-template-columns:1fr 1fr}.devices .dev.lap{grid-column:1/-1;order:-1}
 .band .btns{justify-content:flex-start}
 .nav a.lk.hide-m{display:none}
 .nav .wrap{gap:6px}.nav a.lk{padding:8px 7px;font-size:14.5px}
}
@media(max-width:520px){.btn{width:100%}.stk{--s:56px!important}.fan button{width:70%;left:15%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.book3d{transform:none}}