:root{--ink:#202025;--muted:#77757e;--purple:#6c54d6;--font-display:"Instrument Sans",Arial,sans-serif;--font-sans:Inter,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,monospace;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#f7f6f4}body{margin:0;color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 90% 3%,#e5dff480,transparent 34%),radial-gradient(ellipse at 5% 18%,#dcebf34d,transparent 35%),#f7f6f4}a{color:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:2px solid #765de2;outline-offset:6px}::selection{background:#dcd2fc}
.site-header{position:fixed;z-index:30;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 22px) 32px 24px;background:linear-gradient(#f7f6f4f5,#f7f6f400);pointer-events:none}.site-header a{pointer-events:auto}.site-header nav{display:flex;align-items:center;gap:26px}.collect-mark{display:inline-flex;align-items:center;gap:10px;font:600 26px/1 var(--font-display);letter-spacing:-.055em;text-decoration:none}.collect-mark>span{width:29px;height:29px;border-radius:10px;background-image:linear-gradient(#ffffff73,#fff0 60%),linear-gradient(150deg,#8ecbff,#6355ff 60%,#b9a6ff);box-shadow:inset 0 1px 0 #ffffffb3,0 4px 10px -4px #6b53c75e}.signin{font-size:13px;text-decoration:none;color:#66626f}.action{display:inline-flex;justify-content:center;align-items:center;gap:22px;border-radius:14px;padding:17px 27px;background:linear-gradient(#37353f,#24222c);color:#fff;font-size:14px;font-weight:500;text-decoration:none;box-shadow:inset 0 1px 0 #ffffff38,0 10px 24px -13px #3831427a;transition:transform .3s,box-shadow .3s}.action:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff38,0 14px 28px -12px #3831427a}.action-small{font-size:12px;padding:11px 16px;gap:12px;border-radius:11px}.action-big{font-size:15px;padding:19px 30px;margin-top:31px}.action span{font-size:20px;font-weight:400;line-height:1}
.hero{position:relative;isolation:isolate;min-height:max(710px,96svh);padding:155px 24px 80px;text-align:center;display:flex;align-items:center;flex-direction:column;overflow:clip}.eyebrow{display:inline-block;font:10px/1.5 var(--font-mono);letter-spacing:.2em;padding:10px 20px;border-radius:999px;color:#6e6379;background:#ffffff8c;border:1px solid #ffffffb8;box-shadow:0 3px 14px -10px #76669438}.hero h1{font:500 clamp(64px,8.3vw,110px)/.99 var(--font-display);letter-spacing:-.065em;margin:36px 0 24px}.hero-sub{font-size:18px;margin:5px 0 0;color:#6f6879;letter-spacing:-.02em}.hero-note{margin:17px 0 0;font-size:11px;color:#655c70}.scroll-cue{display:flex;flex-direction:column;gap:7px;margin-top:39px;color:#655c70;font-size:10px;letter-spacing:.02em;text-decoration:none}.scroll-cue span{font-size:22px;line-height:1}.word{display:inline-block;will-change:transform,opacity,filter}.hero .word{animation:hero-word .85s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--word-index)*100ms + 120ms)}@keyframes hero-word{from{opacity:0;transform:translateY(32px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.scrolly{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:.92fr 1.08fr;gap:40px;padding:0 24px;scroll-margin-top:0}.step{min-height:100svh;display:flex;align-items:center;scroll-margin-top:0}.step-copy{padding:0 0 0 5px;will-change:transform,opacity}.step-label{font:10px/1.5 var(--font-mono);letter-spacing:.13em;color:#70617e;margin:0 0 23px}.step h2{font:500 clamp(35px,4.1vw,54px)/1.08 var(--font-display);letter-spacing:-.048em;margin:0;max-width:12em}.step-detail{font-size:16px;line-height:1.75;color:#6e6777;max-width:345px;margin:20px 0 0;letter-spacing:-.013em}.story-tail{height:22svh}.visual-track{position:relative;min-width:0}.visual-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center}.product-frame{width:100%;position:relative}.example-note{text-align:center;font:8px/1.5 var(--font-mono);letter-spacing:.13em;color:#675d76;margin:12px 0 0}.example-note span{padding:0 10px}
/* Keep the existing product UI, while the page owns its new scroll track. */
.demo-story{height:auto!important;min-width:0}.demo-sticky{position:relative;top:0;height:auto;max-height:none;display:block}.demo-heading,.demo-controls{display:none}.demo-scene{height:430px;min-height:0;max-height:none;flex:none;overflow:clip}.demo-sheet{width:calc(100% - 28px);border-radius:21px}.demo-link{width:min(430px,calc(100% - 42px))}.demo-browserBody{grid-template-columns:170px 1fr;min-height:275px}.demo-tree{padding:20px 12px}.demo-tree b{font-size:11px}.demo-destination{padding:15px 10px}.demo-destination h3{font-size:22px}.demo-destination p{font-size:10px}.demo-file{width:104px}.demo-counter>span{font-size:88px}.demo-upload{height:330px}.demo-halo{opacity:.65}.demo-arrivalHeading{padding-inline:18px}.demo-grid{padding:0 18px 20px;gap:11px}
.finale{position:relative;z-index:5;padding:0 40px 24px;margin-top:-10svh}.closing-card{max-width:1120px;min-height:570px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:70px 30px;border-radius:36px;background:radial-gradient(ellipse at 50% 0,#eee9ff90,transparent 60%),linear-gradient(145deg,#e4dcfa,#cec0ef);box-shadow:inset 0 1px 0 #fff,0 30px 90px -50px #8a6acb66;will-change:transform}.closing-label{font:10px/1.4 var(--font-mono);letter-spacing:.17em;color:#584273;margin:0 0 28px}.closing-card h2{font:500 clamp(46px,6.9vw,88px)/1.04 var(--font-display);letter-spacing:-.052em;color:#44305d;margin:0}.closing-card .action{margin-top:37px}.closing-card>p:last-child{font-size:11px;color:#584273;margin:19px 0 0}footer{max-width:1120px;margin:50px auto 0;display:flex;align-items:center;justify-content:space-between;gap:25px;padding-bottom:10px}footer .collect-mark{font-size:23px}footer .collect-mark>span{width:25px;height:25px;border-radius:9px}footer p,footer>a:last-child{font-size:10px;color:#655c70;text-decoration:none}footer p{margin:0}
@media(max-width:900px){.scrolly{grid-template-columns:1fr;gap:0;max-width:640px}.steps,.visual-track{grid-area:1/1}.visual-track{pointer-events:none}.visual-pin{top:68px;height:44svh;z-index:2}.steps{padding-top:30svh}.step{height:140svh;min-height:0;display:block;text-align:center}.step-copy{position:sticky;top:59svh;padding:0 12px}.step-label{margin-bottom:16px;font-size:9px}.step h2{font-size:clamp(30px,6.2vw,46px);max-width:none}.step-detail{font-size:16px;line-height:1.65;max-width:340px;margin:17px auto 0}.story-tail{height:30svh}.demo-scene{height:44svh;min-height:310px;max-height:420px}.demo-sheet{width:calc(100% - 26px)}.demo-link{width:calc(100% - 38px)}.demo-browserBody{grid-template-columns:135px 1fr;min-height:255px}.demo-tree{padding:18px 8px}.demo-destination h3{font-size:20px}.demo-file{width:90px}.demo-counter>span{font-size:74px}.demo-upload{height:310px}.demo-arrivalHeading small{font-size:7px}.demo-grid{padding:0 15px 16px;gap:9px}.example-note{display:none}.finale{margin-top:-20svh}}
@media(max-width:600px){.site-header{padding:calc(env(safe-area-inset-top,0px) + 21px) 23px 22px}.collect-mark{font-size:23px;gap:8px}.collect-mark>span{width:25px;height:25px;border-radius:9px}.site-header nav{gap:18px}.signin{display:none}.action-small{font-size:10px;padding:10px 13px;gap:8px}.action-small span{font-size:16px}.hero{min-height:96svh;padding:160px 20px 65px}.hero h1{font-size:78px;margin-top:31px;letter-spacing:-.065em}.eyebrow{font-size:8px;letter-spacing:.16em;padding:9px 15px}.hero-sub{font-size:15px;max-width:260px;line-height:1.6}.action-big{margin-top:27px;font-size:13px;padding:17px 24px}.hero-note{font-size:10px}.scroll-cue{margin-top:33px}.scrolly{padding:0 15px}.demo-sheet{width:calc(100% - 16px)}.demo-link{width:calc(100% - 26px)}.demo-browserBody{grid-template-columns:112px 1fr}.demo-tree b{font-size:9px}.demo-tree>span{font-size:9px}.demo-destination p{font-size:9px}.demo-arrivalHeading{padding:15px 14px 12px}.demo-arrivalHeading b{font-size:16px}.demo-receipt{font-size:8px}.demo-counter>span{font-size:70px}.demo-link p{font-size:9px}.demo-address{font-size:9px}.finale{padding:0 15px 25px}.closing-card{min-height:510px;padding:55px 22px;border-radius:28px}.closing-card h2{font-size:48px}.closing-label{font-size:8px}.closing-card .action{font-size:13px;padding:16px 24px}.closing-card>p:last-child{font-size:10px;max-width:230px}footer{margin-top:35px;flex-wrap:wrap;gap:24px}footer p{order:3;width:100%;font-size:9px}footer>a:last-child{font-size:10px}}
@media(prefers-reduced-motion:reduce),(max-height:560px){html{scroll-behavior:auto}.site-header{position:absolute}.hero .word{animation:none}.scrolly{display:flex;flex-direction:column}.steps{padding-top:0;order:2}.step{height:auto;min-height:0;margin:0;padding:48px 12px;text-align:left}.step-copy{position:relative;top:0;transform:none!important;opacity:1!important}.step-detail{margin-left:0}.step-copy .word{opacity:1!important;transform:none!important;filter:none!important}.visual-track{order:1;pointer-events:auto}.visual-pin{position:relative;top:0;height:auto;margin:25px 0}.demo-scene{height:420px;min-height:0}.story-tail{display:none}.finale{margin-top:40px}.closing-card{transform:none!important}.word{will-change:auto}.action,.action:hover{transition:none;transform:none}.hero{min-height:650px}}
