:root{--ink:#20212c;--muted:#737382;--paper:#faf9fc;--purple:#7558e8;--line:rgba(38,31,61,.09);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #815ee9;outline-offset:6px}button:disabled{cursor:not-allowed}::selection{background:#ddceff}header{position:fixed;z-index:10;top:20px;left:50%;transform:translateX(-50%);width:min(1100px,calc(100% - 40px));height:66px;border:1px solid #ffffffd9;border-radius:22px;background:#ffffffb3;backdrop-filter:blur(22px);display:flex;align-items:center;justify-content:space-between;padding:0 20px;box-shadow:0 8px 40px #32215108}.brand{display:flex;align-items:center;gap:7px;font-size:21px;font-weight:700;letter-spacing:-.8px}.brand img{width:38px;height:38px}.brand em{font-style:normal;font-size:10px;letter-spacing:1px;background:#eee8fc;color:#7558bb;border-radius:6px;padding:5px 7px;margin-left:5px}nav{display:flex;gap:28px;font-size:13px;color:#666471}.button{border:0;border-radius:14px;padding:16px 23px;display:inline-flex;gap:14px;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-size:14px;font-weight:600;transition:transform .25s,box-shadow .25s}.button:hover{transform:translateY(-3px);box-shadow:0 10px 28px #36256322}.button.small{padding:12px 17px;border-radius:11px;font-size:12px}.button.light{background:white;color:var(--ink);border:1px solid var(--line)}.wrap{max-width:1100px;margin:auto;padding:0 28px}.hero{min-height:850px;min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;padding:150px 0 80px}.aurora{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 78% 38%,#d5c2ff85,transparent 43%),radial-gradient(ellipse at 89% 76%,#fedbd577,transparent 37%),radial-gradient(ellipse at 17% 72%,#d8f4f54d,transparent 40%)}.hero-grid{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:15px;position:relative;width:100%}.eyebrow{text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:2px;display:flex;align-items:center;gap:9px;color:#746687}.dot{width:6px;height:6px;border-radius:50%;background:#9a7fe3;box-shadow:0 0 0 4px #ab8eef1a}h1{font-size:clamp(50px,6.6vw,83px);line-height:1.02;letter-spacing:-5px;font-weight:650;margin:26px 0}h1 span{background:linear-gradient(110deg,#648eea,#9265df 45%,#d77dab);background-clip:text;color:transparent}.lede{color:var(--muted);font-size:17px;line-height:1.8;max-width:400px}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:30px}.text-link{font-size:13px;font-weight:600;border-bottom:1px solid #b9b1cb;padding:7px 0}.caption{font-size:11px;color:#92909d;line-height:1.7;margin-top:17px}.hero-art{position:relative;height:490px;perspective:900px}.hero-logo{width:370px;height:370px;object-fit:contain;position:absolute;left:50%;top:47%;transform:translate(-50%,-50%) rotate(-12deg);filter:drop-shadow(0 30px 35px #6732ba23);animation:floatLogo 8s ease-in-out infinite}.orbit{position:absolute;inset:35px 0 0;border:1px solid #a894da20;border-radius:50%;transform:rotate(-23deg) scaleY(.72)}.orbit.second{inset:0 -25px;transform:rotate(38deg) scaleY(.7)}.float-card{position:absolute;border:1px solid #fff;border-radius:16px;box-shadow:0 16px 45px #3e2a6710;background:#ffffffc9;backdrop-filter:blur(18px);padding:17px;animation:floatCard 6s ease-in-out infinite;max-width:235px}.float-card.clip{left:-22px;top:66px;transform:rotate(-7deg)}.float-card.field{right:-12px;bottom:70px;transform:rotate(7deg);animation-delay:-3s}.card-eyebrow{font-size:9px;text-transform:uppercase;letter-spacing:1.1px;color:#a19bab;margin-bottom:11px}.card-row{display:flex;gap:11px;align-items:center;font-size:12px;line-height:1.5}.mini-icon{width:30px;height:32px;display:grid;place-items:center;border-radius:9px;background:#eae5fb;color:#8062cd;font-size:16px}.card-row small{display:block;color:#91869e;font-size:10px}.pill{display:inline-block;background:#eeebfa;color:#8975ad;padding:5px 8px;font-size:9px;border-radius:6px;margin-top:12px}.scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:2px;color:#a5a1af;display:flex;align-items:center;gap:10px}.scroll-cue i{height:25px;width:16px;border:1px solid #c7c1d1;border-radius:12px}.scroll-cue i:after{content:"";display:block;width:2px;height:5px;border-radius:2px;background:#9c90b8;margin:5px auto;animation:scrollDot 2s infinite}.ribbon{border-block:1px solid var(--line);background:#fff8;padding:24px}.ribbon .wrap{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#82798f}.ribbon b{color:#4c415f;font-weight:500;margin-right:8px}.section{padding:125px 0}.section-label{font-size:11px;letter-spacing:2px;color:#9b8ead;text-transform:uppercase}.section-heading{font-size:clamp(35px,4.6vw,58px);line-height:1.08;letter-spacing:-2.7px;font-weight:600;margin:20px 0}.section-heading .soft{color:#a9a1b7}.section-copy{font-size:15px;color:var(--muted);line-height:1.9;max-width:425px}.intro{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:80px;margin-bottom:64px}.features{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}.feature{border:1px solid #fff;border-radius:30px;padding:32px;overflow:hidden;position:relative;background:#f0edf8;min-height:430px}.feature.peach{background:#f8efe9}.feature h3{font-size:22px;letter-spacing:-.8px;margin:0 0 10px;font-weight:600}.feature p{font-size:13px;color:#85818d;line-height:1.7;max-width:300px;margin:0}.feature .number{position:absolute;right:30px;top:32px;color:#b8adc8;font-size:11px}.notch-demo{width:285px;max-width:100%;margin:38px auto 0;border-radius:23px;background:#25242d;color:#fff;padding:18px;box-shadow:0 25px 35px #4e355727;transform:rotate(-5deg);transition:transform .5s}.feature:hover .notch-demo{transform:rotate(0) translateY(-6px)}.notch-header{display:flex;align-items:center;gap:7px;color:#8e8b9a;font-size:9px;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px}.notch-header img{width:22px;height:22px}.key{margin-left:auto;border:1px solid #ffffff24;border-radius:5px;padding:3px 5px;font-size:9px}.notch-row{padding:12px 10px;font-size:11px;color:#d2cedb;display:flex;gap:10px;align-items:center;border-radius:9px}.notch-row.selected{background:#ffffff12;color:#fff}.notch-row span{font-size:15px;color:#b6a4e4}.notch-row small{margin-left:auto;color:#787480;font-size:8px}.browser-mini{background:#ffffffac;border:1px solid #fff;border-radius:16px;padding:16px;max-width:290px;margin:37px auto 0;box-shadow:0 20px 45px #8860400a;transform:rotate(4deg)}.dots{display:flex;gap:5px;margin-bottom:20px}.dots i{width:6px;height:6px;border-radius:50%;background:#dad5dc}.input-label{font-size:9px;color:#96909a;margin:12px 0 6px}.fake-input{padding:12px;border:1px solid #cbbced;border-radius:7px;font-size:12px;background:#fff;box-shadow:0 0 0 3px #dac9f326}.suggestion{margin-top:10px;background:#fff;border-radius:10px;box-shadow:0 10px 25px #5b347a14;padding:12px;font-size:11px;color:#776480}.suggestion b{font-size:8px;display:block;letter-spacing:1px;font-weight:500;color:#b3a5b4;margin-bottom:8px}.suggestion span{color:#76a797;float:right}.story{background:#24232c;color:white;border-radius:40px;margin:0 20px;position:relative;overflow:hidden}.story:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 70%,#74529738,transparent 60%);pointer-events:none}.story-layout{display:grid;grid-template-columns:1fr 1fr;gap:85px;position:relative}.story .section-label{color:#af9dc7}.story .section-copy{color:#aaa3b7}.story-stage{position:sticky;top:160px;align-self:start}.story-title{font-size:clamp(36px,4vw,52px);line-height:1.13;letter-spacing:-2px;margin:24px 0}.story-title span{color:#b399db}.step{padding:35px 0;border-bottom:1px solid #ffffff13;opacity:.48;transition:opacity .6s,transform .6s;transform:translateX(10px)}.step.active{opacity:1;transform:none}.step:first-child{padding-top:0}.step-index{font-size:11px;color:#b59cd4}.step h3{font-size:23px;letter-spacing:-.6px;font-weight:500;margin:18px 0 10px}.step p{font-size:14px;line-height:1.9;color:#aba4b7}.demo-tray{margin-top:35px;max-width:310px;min-height:100px;border-radius:18px;background:#ffffff09;border:1px solid #ffffff13;padding:20px}.tray-label{font-size:9px;letter-spacing:1px;color:#a69ab3;text-transform:uppercase}.tray-value{font-size:20px;margin-top:14px;display:flex;align-items:center;justify-content:space-between}.tray-value span:last-child{color:#b39ad7;font-size:13px}.compare{max-width:820px;margin:55px auto 0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#fff9}.compare-row{display:grid;grid-template-columns:1.5fr 1fr 1fr;padding:21px 25px;border-bottom:1px solid var(--line);font-size:12px;align-items:center;gap:15px}.compare-row:last-child{border:0}.compare-row.heading{background:#f0edf8;font-weight:600;padding-block:24px}.compare-row span:not(:first-child){text-align:center}.yes{color:#8865bd;font-size:16px}.no{color:#b5aebf}.center{text-align:center}.center .section-copy{margin-inline:auto;max-width:520px}.download{padding:90px 30px;background:radial-gradient(ellipse at 50% 50%,#e5d8fa80,transparent 70%);position:relative}.download img{width:105px;height:105px;filter:drop-shadow(0 15px 25px #7b43c028)}.download .section-heading{font-size:clamp(40px,5vw,64px)}.download-actions{margin-top:28px}.download .caption{max-width:430px;margin-inline:auto}.faq{max-width:760px;margin:40px auto 0}details{border-bottom:1px solid var(--line);padding:21px 0}summary{cursor:pointer;font-size:14px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:25px}summary:after{content:"+";font-size:22px;color:#a495b7;font-weight:300}details[open] summary:after{content:"−"}details p{font-size:13px;line-height:1.9;color:var(--muted);max-width:630px}footer{padding:35px 0;border-top:1px solid var(--line);font-size:11px;color:#9d96a7}footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}footer .brand{font-size:16px;color:#494253}footer .brand img{width:27px;height:27px}.reveal{transition:opacity .8s,transform .8s}.js .reveal:not(.visible){opacity:0;transform:translateY(24px)}dialog{border:1px solid #fff;border-radius:26px;padding:32px;width:min(460px,calc(100% - 40px));box-shadow:0 30px 100px #2e1c4140;color:var(--ink);background:#faf8ff}dialog::backdrop{background:#21173055;backdrop-filter:blur(7px)}dialog h2{letter-spacing:-1px;font-size:26px}dialog p{color:var(--muted);font-size:14px;line-height:1.8}dialog img{width:65px;height:65px}dialog .button{width:100%;margin-top:12px}.progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,#82cee3,#9868eb,#eda8c4);z-index:20;width:0}.skip{position:fixed;top:-60px;left:20px;background:white;padding:12px;z-index:30}.skip:focus{top:5px}@keyframes floatLogo{50%{transform:translate(-50%,-54%) rotate(5deg)}}@keyframes floatCard{50%{translate:0 -12px}}@keyframes scrollDot{70%{transform:translateY(7px);opacity:.2}}@media(min-width:1400px){.hero{min-height:850px}}@media(max-width:850px){nav{display:none}.hero-grid{grid-template-columns:1fr}.hero{text-align:center;padding-top:140px}.eyebrow,.hero-actions{justify-content:center}.hero .lede{margin-inline:auto}h1{letter-spacing:-3px}.hero-art{height:400px;max-width:460px;width:100%;margin:20px auto 0}.hero-logo{width:310px;height:310px}.float-card.clip{left:0}.float-card.field{right:0;bottom:30px}.scroll-cue{display:none}.intro{grid-template-columns:1fr;gap:15px}.features{grid-template-columns:1fr}.section{padding:80px 0}.story-layout{gap:35px}.ribbon .wrap{flex-wrap:wrap;justify-content:center;gap:18px}.story{margin:0 10px;border-radius:28px}}@media(max-width:560px){header{top:12px;height:60px;width:calc(100% - 24px);padding-inline:14px}.wrap{padding-inline:23px}.hero-art{height:335px}.hero-logo{width:265px;height:265px}.float-card{padding:12px;max-width:185px}.float-card.clip{top:20px}.card-row{font-size:10px}.hero-actions{gap:18px}.button{padding:15px 18px}.story-layout{grid-template-columns:1fr}.story-stage{position:relative;top:auto}.story-title{margin-top:15px}.demo-tray{display:none}.step{opacity:1;transform:none}.compare-row{padding:18px 13px;font-size:10px;grid-template-columns:1.25fr 1fr 1fr;gap:8px}footer .wrap{flex-wrap:wrap;justify-content:center}h1{font-size:54px}.feature{padding:27px}.download{padding:65px 23px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal:not(.visible){opacity:1;transform:none}.step{opacity:1;transform:none}}

/* Scroll-driven product demonstration. All fields are illustrative, not inputs. */
.header-actions{display:flex;align-items:center;gap:12px}.theme-toggle{border:1px solid var(--line);border-radius:50%;width:35px;height:35px;display:grid;place-items:center;background:transparent;color:var(--ink);font-size:19px}.theme-toggle:hover{background:#9a77d415}.scroll-demo{height:270vh;position:relative;background:linear-gradient(180deg,var(--paper),#eae3f330 60%,var(--paper));padding-inline:24px}.demo-sticky{position:sticky;top:90px;min-height:calc(100svh - 95px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0 12px;overflow:hidden}.demo-intro{text-align:center;margin-bottom:25px}.demo-intro h2{font-size:clamp(24px,3.2vw,41px);font-weight:600;letter-spacing:-1.8px;margin:14px 0 9px}.demo-intro h2 span{color:#a093b6}.demo-intro p{font-size:12px;color:var(--muted);margin:0}.mac-stage{--notch-open:0;--cursor-x:73%;--cursor-y:73%;--cursor-visible:0;--compact-visible:0;--compact-y:46%;--email:0;--password:0;--success:0;--email-focus:0;--password-focus:0;--click:0;--note:0;position:relative;width:min(870px,100%);height:min(460px,53svh);min-height:330px;border:7px solid #302d35;border-radius:22px;background:#ebe1fa;box-shadow:0 22px 75px #4e306518;overflow:hidden;isolation:isolate}.mac-menubar{position:absolute;top:0;left:0;right:0;height:24px;display:flex;justify-content:space-between;padding:6px 15px;font-size:8px;z-index:1;color:#756581;background:#ffffff4a}.mac-menubar i{font-style:normal;opacity:.65}.wallpaper{position:absolute;inset:0;background:radial-gradient(ellipse at 10% 80%,#c6def4 0,transparent 65%),radial-gradient(ellipse at 80% 80%,#e6aaca66,transparent 70%),linear-gradient(145deg,#eee6fb,#e2d9ee);z-index:-1}.demo-notch{position:absolute;z-index:5;top:-1px;left:50%;width:280px;transform:translateX(-50%);background:#24232b;border-radius:0 0 18px 18px;box-shadow:0 calc(var(--notch-open)*20px) 40px #15112125;overflow:hidden;color:#eee}.notch-capsule{height:27px;width:150px;margin:auto;display:flex;justify-content:center;align-items:center;gap:7px;font-size:9px}.notch-capsule img{width:18px;height:18px}.notch-capsule i{width:4px;height:4px;background:#ad8fd0;border-radius:50%;margin-left:30px}.notch-drawer{height:calc(var(--notch-open)*154px);opacity:var(--notch-open);padding:0 14px;overflow:hidden}.drawer-title{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#9c93ad;padding:14px 0 8px}.drawer-row{display:flex;gap:9px;align-items:center;height:35px;font-size:10px;border-radius:8px;padding:6px;background:#ffffff08;margin-bottom:4px}.drawer-row small{font-size:7px;color:#8a8098;margin-left:auto}.login-window{position:absolute;top:49px;left:50%;transform:translateX(-50%);width:320px;border-radius:13px;border:1px solid #fff9;background:#fffc;box-shadow:0 12px 45px #4a2c6514;overflow:hidden;backdrop-filter:blur(10px)}.login-toolbar{display:flex;justify-content:space-between;align-items:center;height:29px;border-bottom:1px solid #3c314b0a;padding:0 10px;font-size:7px;color:#a399b0}.login-toolbar .dots{margin:0}.login-toolbar .dots i{width:5px;height:5px}.login-body{padding:15px 29px 12px}.workspace-icon{width:29px;height:29px;background:#e9e2f5;border-radius:8px;margin:auto;color:#8b6eb6;font-size:22px;text-align:center;font-weight:700;letter-spacing:-3px;position:relative}.workspace-icon span{font-size:10px;position:absolute;right:3px;top:1px}.login-body h3{font-size:19px;letter-spacing:-.6px;text-align:center;margin:10px 0 5px}.login-body>p{font-size:9px;color:#9b91a5;text-align:center;margin:0 0 17px}.form-field{margin:12px 0}.form-field label{display:block;font-size:8px;color:#918799;margin-bottom:5px}.demo-input{position:relative;height:32px;border:1px solid #c9c0d14a;background:#fff9;border-radius:6px;font-size:10px;padding:9px}.demo-input .placeholder{color:#b4aebd}.demo-input .filled{position:absolute;inset:9px;color:#6c597f;opacity:var(--email)}.field-check{position:absolute;right:9px;color:#6f9e8d;opacity:var(--email)}#demo-email{box-shadow:0 0 0 calc(var(--email-focus)*3px) #a078de25;border-color:rgba(157,119,210,calc(.2 + var(--email-focus)*.65))}#demo-email .placeholder{opacity:calc(1 - var(--email))}#demo-password{box-shadow:0 0 0 calc(var(--password-focus)*3px) #a078de25;border-color:rgba(157,119,210,calc(.2 + var(--password-focus)*.65))}#demo-password .filled,#demo-password .field-check{opacity:var(--password)}#demo-password .placeholder{opacity:calc(1 - var(--password))}.login-submit{height:31px;border-radius:6px;background:#2c2835;color:#eee8f5;font-size:9px;padding:10px;text-align:center;margin-top:16px}.login-submit span{float:right}.demo-security{text-align:center;font-size:7px;color:#b4a9bd;margin-top:10px}.demo-cursor{position:absolute;z-index:9;left:var(--cursor-x);top:var(--cursor-y);opacity:var(--cursor-visible);pointer-events:none;filter:drop-shadow(0 2px 2px #3c234b25)}.cursor-note{position:absolute;left:21px;top:25px;background:#fff;color:#776187;padding:7px 10px;border-radius:7px;font-size:9px;white-space:nowrap;box-shadow:0 3px 15px #5a368917;opacity:var(--note)}.click-ring{position:absolute;top:-8px;left:-8px;width:28px;height:28px;border:2px solid #a07ddd;border-radius:50%;opacity:var(--click);transform:scale(calc(1 + var(--click)*.65))}.second-ring{inset:-15px;width:42px;height:42px;border-width:1px}.compact-demo{position:absolute;z-index:8;left:calc(50% + 20px);top:var(--compact-y);width:246px;background:#fffefef0;border:1px solid #fff;border-radius:13px;box-shadow:0 16px 30px #33204724;backdrop-filter:blur(18px);padding:12px;opacity:var(--compact-visible);transform:translateY(calc((1 - var(--compact-visible))*10px)) scale(calc(.96 + var(--compact-visible)*.04));pointer-events:none}.compact-top{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600}.compact-top img{width:21px;height:21px}.compact-top>span{font-size:6px;color:#9e8cbc;background:#eae1f6;border-radius:3px;padding:3px 4px}.compact-top small{font-size:8px;color:#b5aebe;margin-left:auto;font-weight:400}.compact-tabs{display:flex;gap:14px;font-size:8px;color:#aaa0b3;margin:12px 0}.compact-tabs b{font-weight:500;color:#87719f}.compact-choice{display:flex;align-items:center;gap:9px;background:#eee7f7;padding:10px;border-radius:8px}.choice-icon{color:#9375b5}.compact-choice strong{font-size:9px;font-weight:500;color:#5d4d74}.compact-choice small{display:block;font-size:7px;color:#a18eaf;margin-top:4px}.choice-enter{margin-left:auto;color:#a293b2}.compact-foot{font-size:7px;color:#b0a5ba;margin-top:10px;text-align:center}.demo-success{position:absolute;bottom:18px;left:50%;transform:translate(-50%,calc((1 - var(--success))*10px));opacity:var(--success);z-index:10;background:#fffefef2;box-shadow:0 7px 20px #50436515;border-radius:30px;padding:10px 17px;font-size:10px;white-space:nowrap;color:#776782}.demo-success>span{color:#6a9f8c;margin-right:8px}.demo-timeline{display:flex;align-items:center;gap:22px;margin-top:25px;color:#b5a9c4;font-size:9px}.demo-timeline b{font-weight:500;margin-left:6px}.demo-timeline>i{width:32px;height:1px;background:#d9cede}.demo-timeline .current{color:#8460b2}.demo-footnote{font-size:9px;color:#a99db6;text-align:center;margin:13px 0 0;line-height:1.7;max-width:500px}
/* Explicit theme wins over system preference and persists between visits. */
html[data-theme=dark]{color-scheme:dark;--ink:#eeeaf5;--muted:#aca4b9;--paper:#17151c;--line:#ffffff14}html[data-theme=light]{color-scheme:light}html[data-theme=dark] header{background:#25212dd9;border-color:#ffffff10;box-shadow:0 8px 40px #0002}html[data-theme=dark] nav{color:#b8b0c4}html[data-theme=dark] .brand em{background:#41334f;color:#c6abec}html[data-theme=dark] .button{background:#dfd2f5;color:#2b2237}html[data-theme=dark] .button.light{background:#282130;color:#e5dced}html[data-theme=dark] .aurora{background:radial-gradient(ellipse at 78% 38%,#68419338,transparent 43%),radial-gradient(ellipse at 89% 76%,#914b6524,transparent 37%),radial-gradient(ellipse at 17% 72%,#2b697127,transparent 40%)}html[data-theme=dark] .float-card{background:#2c2634d9;border-color:#ffffff14;color:#eee7f7}html[data-theme=dark] .mini-icon{background:#493455;color:#c4a8e3}html[data-theme=dark] .pill{background:#42314f;color:#c5b0d8}html[data-theme=dark] .card-row small{color:#b2a3bf}html[data-theme=dark] .ribbon{background:#ffffff02}html[data-theme=dark] .ribbon b{color:#c1b3d2}html[data-theme=dark] .feature{background:#2c2436;border-color:#ffffff09}html[data-theme=dark] .feature.peach{background:#34272d}html[data-theme=dark] .feature p{color:#b6aabb}html[data-theme=dark] .browser-mini{background:#2c242c;border-color:#ffffff12}html[data-theme=dark] .fake-input,html[data-theme=dark] .suggestion{background:#392f3d;color:#cebce0}html[data-theme=dark] .compare{background:#211b29}html[data-theme=dark] .compare-row.heading{background:#30243c}html[data-theme=dark] .yes{color:#c39de9}html[data-theme=dark] .download{background:radial-gradient(ellipse at 50% 50%,#52366c55,transparent 70%)}html[data-theme=dark] dialog{background:#282130;border-color:#ffffff15}html[data-theme=dark] footer .brand{color:#cec1dd}html[data-theme=dark] .story{background:#100e16}html[data-theme=dark] .wallpaper{background:radial-gradient(ellipse at 10% 80%,#364457,transparent 65%),radial-gradient(ellipse at 80% 80%,#5f354d88,transparent 70%),linear-gradient(145deg,#342540,#292034)}html[data-theme=dark] .mac-menubar{background:#17121f70;color:#c1b1d1}html[data-theme=dark] .login-window{background:#26212ded;border-color:#ffffff15}html[data-theme=dark] .login-toolbar{border-color:#ffffff09}html[data-theme=dark] .workspace-icon{background:#4b395c;color:#c5a4de}html[data-theme=dark] .demo-input{background:#211a28}html[data-theme=dark] .demo-input .filled{color:#cebedb}html[data-theme=dark] .login-submit{background:#c6acdf;color:#31243e}html[data-theme=dark] .compact-demo{background:#302636ed;border-color:#ffffff19}html[data-theme=dark] .compact-choice{background:#493351}html[data-theme=dark] .compact-choice strong{color:#e1cbea}html[data-theme=dark] .compact-top>span{background:#513b61;color:#d5b9eb}html[data-theme=dark] .demo-success{background:#302938;color:#d8c9e5}html[data-theme=dark] .cursor-note{background:#e9dff2;color:#584366}html[data-theme=dark] .mac-stage{border-color:#46404d}html[data-theme=dark] .demo-timeline .current{color:#c5a0e9}
@media(max-width:650px){.scroll-demo{padding-inline:12px;height:230vh}.demo-sticky{top:83px;min-height:calc(100svh - 86px);padding:10px 0}.demo-intro{margin-bottom:18px}.demo-intro h2{font-size:26px;letter-spacing:-1px;max-width:310px;margin-inline:auto}.mac-stage{border-width:4px;border-radius:15px;height:395px;min-height:0}.login-window{width:270px;top:45px}.login-body{padding-inline:22px}.compact-demo{left:auto;right:9px;width:214px}.demo-notch{width:230px}.demo-timeline{gap:9px;margin-top:18px;font-size:8px}.demo-timeline>i{width:10px}.demo-timeline b{margin-left:3px}.demo-footnote{padding-inline:15px;font-size:8px}.mac-menubar{font-size:7px}.mac-menubar i{display:none}.header-actions{gap:8px}.theme-toggle{width:31px;height:31px;font-size:17px}header .button.small{font-size:10px;padding:11px}.brand{font-size:18px}.brand em{font-size:8px;padding:4px}.brand img{width:30px;height:30px}}
@media(max-height:700px) and (min-width:651px){.demo-intro h2{font-size:28px;margin:8px 0}.demo-intro{margin-bottom:10px}.demo-intro .section-label{display:none}.mac-stage{height:360px;min-height:330px}.demo-timeline{margin-top:12px}.demo-footnote{margin-top:8px}.demo-sticky{top:90px}.login-window{top:30px}.login-body{padding-block:10px}.login-body h3{margin-block:6px}.login-body>p{margin-bottom:8px}.form-field{margin:8px 0}}
@media(prefers-reduced-motion:reduce){.scroll-demo{height:auto;padding-block:60px}.demo-sticky{position:relative;top:auto;min-height:0}.mac-stage{--email:1!important;--password:1!important;--success:1!important}.demo-timeline{display:none}}

/* Product-first composition: a quiet canvas, oversized type and a scroll story. */
.language-select{font:inherit;font-size:11px;font-weight:600;border:0;border-radius:8px;background:transparent;color:var(--ink);padding:8px 3px;cursor:pointer}.language-select:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.hero{min-height:980px;padding:150px 0 70px;background:var(--paper)}
.hero-grid{display:flex;flex-direction:column;gap:12px;text-align:center}
.hero .eyebrow,.hero-actions{justify-content:center}.hero .lede{margin-inline:auto;max-width:500px;font-size:18px;line-height:1.6}.hero h1{font-size:clamp(62px,7.8vw,104px);letter-spacing:-5px;margin:24px 0}.hero h1 br{display:none}.hero h1 span{display:block}.hero-art{height:350px;width:min(680px,100%);margin:0 auto}.hero-logo{width:300px;height:300px}.float-card.clip{left:5%;top:40px}.float-card.field{right:4%;bottom:25px}.orbit{display:none}.aurora{opacity:.45}.hero .scroll-cue{bottom:22px}.ribbon{background:transparent;border-top:0}.section-heading{font-weight:650}.features{grid-template-columns:1fr 1fr}.feature{min-height:465px;padding:42px}.feature h3{font-size:28px;letter-spacing:-1.1px}.section{padding-block:140px}.demo-intro h2{font-size:clamp(28px,4vw,50px);letter-spacing:-2px}.demo-timeline{padding:14px 22px;border-radius:30px;background:#d8cfe626}.mac-stage{box-shadow:0 28px 75px #30203e20}.scroll-demo{height:300vh}
@media(max-width:850px){.hero{min-height:900px}.hero h1{font-size:76px}.hero h1 br{display:block}.hero-art{max-width:580px}.features{grid-template-columns:1fr}.section{padding-block:90px}.feature{min-height:430px}}
@media(max-width:560px){header{padding-inline:10px;gap:5px}.header-actions{gap:5px}.brand em{display:none}.brand{font-size:16px;gap:3px}.brand img{width:27px;height:27px}header .button.small{font-size:9px;padding:10px 8px;gap:5px}.language-select{font-size:10px;width:44px;padding-inline:0}.hero{padding-top:125px;min-height:900px}.hero h1{font-size:clamp(44px,12.5vw,66px);letter-spacing:-2.8px}.hero .lede{font-size:15px}.hero-art{height:340px}.hero-logo{width:265px;height:265px}.float-card.clip{left:0;top:15px}.float-card.field{right:0;bottom:12px}.hero-actions{gap:15px;flex-wrap:wrap}.feature{padding:28px}.demo-intro h2{font-size:27px;letter-spacing:-1px}.demo-timeline{padding:11px 9px;gap:7px}.demo-timeline>i{display:none}.scroll-demo{height:270vh}.demo-sticky{justify-content:flex-start}.demo-intro{padding-top:10px}.mac-stage{height:min(395px,52svh)}.login-window{top:35px}.login-body{padding-block:10px}.login-body>p{margin-bottom:9px}.login-body h3{margin-top:6px}.form-field{margin-block:9px}.demo-footnote{max-width:340px}.demo-success{font-size:8px}}
@media(prefers-reduced-motion:reduce){.scroll-demo{height:auto}}
.hero h1 br{display:block}.hero h1 span{display:inline}
/* Native artwork exported from the app's SwiftUI components. */
.wrap{max-width:1440px;padding-inline:48px}header{width:min(1440px,calc(100% - 64px))}.hero{display:block;padding:126px 0 65px;min-height:0}.hero-grid{max-width:1440px}.hero h1{font-size:clamp(48px,5.6vw,86px);margin:18px 0;line-height:1.02}.hero h1 br{display:none}.hero h1 br:after{content:' '}.hero h1 span{display:inline}.hero .lede{font-size:16px;line-height:1.5;margin-block:12px}.hero .lede br{display:none}.hero .lede{max-width:620px}.hero-actions{margin-top:20px}.hero .caption{margin-bottom:25px}.hero .eyebrow{font-size:9px}.hero .scroll-cue{position:static;transform:none;justify-content:center;margin-top:24px}.native-desktop{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 10% 100%,#9cb4bd,transparent 60%),radial-gradient(ellipse at 100% 80%,#cbc4ca,transparent 65%),#e0e4e4;border:1px solid #20202818;border-radius:18px 18px 28px 28px;box-shadow:0 22px 65px #273c4614}.hero-desktop{width:calc(100% - 80px);max-width:1600px;height:480px;margin:auto}.desktop-bar{height:30px;display:flex;justify-content:space-between;padding:9px 24px;background:#ffffff40;font-size:10px;color:#4c5255}.native-notch{position:absolute;top:0;left:50%;width:560px;height:470px;transform:translateX(-50%);filter:drop-shadow(0 15px 20px #0003)}.native-notch picture{position:absolute;top:0;left:50%;transform:translateX(-50%);display:block}.native-notch img{width:100%;height:auto;display:block}.native-collapsed{width:180px;animation:notchCollapsed 9s infinite}.native-expanded{width:560px;transform-origin:top center;animation:notchExpanded 9s infinite;clip-path:inset(0 0 0 0)}.asset-dark{display:none!important}html[data-theme=dark] .asset-light{display:none!important}html[data-theme=dark] .asset-dark{display:block!important}.desktop-caption{position:absolute;bottom:25px;left:30px;color:#535b61}.desktop-caption>span{font-size:9px;letter-spacing:1.5px}.desktop-caption p{font-size:14px;margin:8px 0 0}.notch-motion{position:absolute;bottom:22px;right:24px;width:34px;height:34px;border-radius:50%;border:1px solid #ffffff65;background:#ffffff60;color:#384047;font-size:13px}.motion-paused .native-expanded,.motion-paused .native-collapsed{animation-play-state:paused}.feature-native{max-width:442px;margin:38px auto 0;filter:drop-shadow(0 16px 22px #0002)}.feature-native img{display:block;width:100%}.feature-native.compact{max-width:399px}.native-compact{padding:0;background:transparent!important;border:0!important;backdrop-filter:none;box-shadow:none;border-radius:20px;width:399px;left:calc(50% + 25px);filter:drop-shadow(0 16px 22px #0003)}.native-compact img{width:100%;display:block}.mac-stage{width:min(1360px,100%);height:min(540px,59svh)}.scroll-demo{padding-inline:40px}.login-window{left:42%}.demo-intro h2{font-size:clamp(28px,3.5vw,48px)}
@keyframes notchExpanded{0%,12%,92%,100%{opacity:0;transform:translateX(-50%) scale(.322,.087);clip-path:inset(0 0 85% 0)}22%,78%{opacity:1;transform:translateX(-50%) scale(1);clip-path:inset(0 0 0 0)}}
@keyframes notchCollapsed{0%,12%,92%,100%{opacity:1}20%,80%{opacity:0}}
html[data-theme=dark] .native-desktop{background:radial-gradient(ellipse at 10% 100%,#354552,transparent 65%),radial-gradient(ellipse at 100% 80%,#49404d,transparent 65%),#24282e}html[data-theme=dark] .desktop-bar{background:#0002;color:#bbbfc6}html[data-theme=dark] .desktop-caption{color:#c1c5cc}
@media(min-width:1500px){.hero-desktop{height:530px}.native-notch,.native-expanded{width:610px}}
@media(max-width:850px){.hero h1 br{display:block}.hero-desktop{width:calc(100% - 32px);height:455px}.native-notch,.native-expanded{width:500px}.native-compact{width:320px;left:auto;right:16px}.login-window{left:40%}.wrap{padding-inline:28px}}
@media(max-width:560px){header{width:calc(100% - 24px)}.hero{padding-top:105px}.hero-desktop{height:365px;width:calc(100% - 20px)}.native-notch,.native-expanded{width:360px;max-width:100%}.native-notch{height:310px;width:100%}.native-expanded{width:calc(100% - 6px)}.desktop-caption{left:16px;bottom:20px;max-width:240px}.desktop-caption p{font-size:12px}.desktop-bar{font-size:8px;padding-inline:12px}.hero h1{font-size:48px;letter-spacing:-2.5px}.hero .lede{font-size:14px}.scroll-demo{padding-inline:12px}.native-compact{width:270px;right:10px}.login-window{left:50%}.mac-stage{height:400px}.demo-sticky{overflow:visible}.feature{min-height:0}.feature-native{margin-top:25px}.demo-intro h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){.native-expanded{opacity:1;transform:translateX(-50%);clip-path:none}.native-collapsed,.notch-motion{display:none}.hero-desktop{height:480px}}
/* Artwork from Snippy - App Store - 2; the app stays dark as designed. */
.native-collapsed{position:absolute;top:0;left:50%;transform:translateX(-50%);width:180px;height:32px;background:#000;border-radius:0 0 12px 12px;display:flex;align-items:center;justify-content:center;animation:notchCollapsed 9s infinite}.native-collapsed img{width:20px;height:20px;object-fit:contain}.native-expanded{top:-2px!important;width:560px;filter:drop-shadow(0 12px 20px #0002)}.hero-desktop{height:530px;background:radial-gradient(ellipse at 0 0,#256191,transparent 60%),radial-gradient(ellipse at 100% 100%,#6d1877,transparent 65%),#202128}.desktop-bar{color:#e3e6f0;background:#ffffff08}.desktop-caption{color:#d4d9e3}.native-compact{width:440px;filter:none}.login-window{top:100px;left:36%;width:350px}.login-body{padding:24px 30px}.login-body h3{font-size:23px}.login-body>p{font-size:11px}.form-field label{font-size:10px}.demo-input{height:38px;padding:12px;font-size:12px}.demo-input .filled{inset:12px}.login-submit{font-size:11px;height:37px;padding:12px}.demo-security{font-size:8px}.mac-stage{min-height:420px}.demo-intro{margin-bottom:20px}.native-desktop .desktop-caption{left:30px}.hero-grid{gap:0}.hero h1{font-size:clamp(42px,4.8vw,76px)}
@media(min-width:1500px){.hero-desktop{height:570px}.native-expanded{width:610px}}
@media(max-width:850px){.native-expanded{width:500px}.hero-desktop{height:475px}.native-compact{width:360px}.login-window{left:38%}}
@media(max-width:560px){.native-expanded{width:100%}.hero-desktop{height:360px}.desktop-caption{bottom:20px}.native-compact{width:300px;right:2px}.login-window{width:270px;left:50%;top:65px}.mac-stage{min-height:390px}.login-body{padding:18px 22px}.hero .lede{line-height:1.6}.hero h1{font-size:46px}.hero h1 br{display:block}.native-desktop .desktop-caption{left:16px;max-width:230px}.notch-motion{right:15px}.scroll-demo{height:260vh}}

.native-expanded{margin-top:-5.4%}.hero .aurora{z-index:-1}.hero-desktop{z-index:1}.native-notch{pointer-events:none}
.hero h1{letter-spacing:-2px}.hero h1 span{margin-left:.07em}.hero .lede br:after{content:' '}
@media(max-width:560px){.hero h1{letter-spacing:-1.8px}}

.demo-intro h2{letter-spacing:-1px}.hero-desktop .desktop-caption{text-align:left}.hero .scroll-cue{display:flex}

/* Match the original Sketch composition: 907-point app in a 2796-point display. */
.hero-desktop{width:calc(100% - 64px);max-width:1600px;height:auto;aspect-ratio:2796 / 1180;background:transparent!important;border:0;border-radius:0;box-shadow:none;overflow:hidden}
.laptop-frame{display:block;width:100%;height:auto;position:relative}
.hero-desktop:after{content:"";position:absolute;inset:68% 0 0;background:linear-gradient(transparent,var(--paper));pointer-events:none;z-index:2}
.hero-desktop .native-notch{top:2.966%;width:38.17%;height:auto;aspect-ratio:1334 / 1198;filter:none;max-width:none}
.hero-desktop .native-expanded{width:100%;top:0!important;margin-top:-5.397%;filter:none}
.hero-desktop .native-collapsed{width:34%;height:auto;aspect-ratio:180 / 32;border-radius:0 0 9px 9px}
.hero-desktop .native-collapsed img{width:11.1%;height:auto}
.hero-desktop .desktop-caption{bottom:4%;left:3%;z-index:3;color:var(--muted)}
.hero-desktop .notch-motion{bottom:4%;right:3%;z-index:3;color:var(--ink);background:var(--paper);border-color:var(--line)}
@keyframes notchExpanded{0%,12%,92%,100%{opacity:0;transform:translateX(-50%) scale(.4);clip-path:inset(0 0 91% 0)}22%,78%{opacity:1;transform:translateX(-50%) scale(1);clip-path:inset(0)}}
@media(max-width:560px){.hero-desktop{width:calc(100% - 20px)}.hero-desktop .desktop-caption{display:none}.hero-desktop .notch-motion{width:26px;height:26px;font-size:10px}.hero-desktop .native-collapsed{border-radius:0 0 4px 4px}}
@media(prefers-reduced-motion:reduce){.hero-desktop .native-expanded{opacity:1;transform:translateX(-50%);clip-path:none}}

/* Shared framed desktop treatment for both product demonstrations. */
.hero-desktop{aspect-ratio:1360 / 540;border:7px solid #302d35;border-radius:22px;background:#ebe1fa!important;box-shadow:0 22px 75px #4e306518;isolation:isolate}
.hero-desktop:after{display:none}
.hero-desktop .wallpaper{z-index:-1}
.hero-desktop .native-notch{top:0;width:38.17%}
.hero-desktop .desktop-caption{color:#756581}
.hero-desktop .notch-motion{background:#ffffff90;color:#534460;border-color:#ffffffa0}
html[data-theme=dark] .hero-desktop{border-color:#46404d;background:#292034!important}
html[data-theme=dark] .hero-desktop .desktop-caption{color:#c1b1d1}
html[data-theme=dark] .hero-desktop .notch-motion{background:#302938;color:#d8c9e5;border-color:#ffffff20}
@media(max-width:850px){.hero-desktop{aspect-ratio:1.55}}
@media(max-width:560px){.hero-desktop{aspect-ratio:1.25;border-width:4px;border-radius:15px}.hero-desktop .native-notch{width:56%}}

/* Keep native chrome above the menu bar and its dark surface independent of wallpaper. */
.hero-desktop .native-notch{z-index:5}
.native-expanded:before{content:"";position:absolute;inset:6% 7.5% 10.8%;background:#19191e;border-radius:0 0 4% 4%;z-index:-1}
.native-expanded{isolation:isolate}
@keyframes notchExpanded{0%,12%,92%,100%{visibility:hidden;opacity:1;transform:translateX(-50%) scale(.4);clip-path:inset(0 0 91% 0)}13%{visibility:visible}22%,78%{visibility:visible;opacity:1;transform:translateX(-50%) scale(1);clip-path:inset(0)}91%{visibility:visible}}
@keyframes notchCollapsed{0%,18%,84%,100%{visibility:visible;opacity:1}19%,83%{visibility:hidden;opacity:1}}
@media(prefers-reduced-motion:reduce){.native-expanded{visibility:visible}}
/* Retract the full-size app behind a fixed notch, without shrinking its UI. */
.hero-desktop .native-notch{overflow:hidden}
.hero-desktop .native-collapsed{z-index:2;animation:none;visibility:visible;opacity:1}
.hero-desktop .native-expanded{z-index:1;transform-origin:top center;animation:notchSlideBehind 9s cubic-bezier(.22,.7,.25,1) infinite}
@keyframes notchSlideBehind{
  0%,12%,92%,100%{visibility:visible;opacity:1;transform:translate(-50%,-100%);clip-path:inset(0)}
  25%,76%{visibility:visible;opacity:1;transform:translate(-50%,0);clip-path:inset(0)}
}
@media(prefers-reduced-motion:reduce){.hero-desktop .native-expanded{animation:none;transform:translate(-50%,0);visibility:visible}.hero-desktop .native-collapsed{display:flex}}
.hero-desktop.motion-paused .native-expanded{animation-play-state:paused}
/* One shared stage; only the completed scene advances the carousel. */
.product-carousel{width:calc(100% - 64px);max-width:1600px;margin:auto}
.carousel-slides{position:relative;aspect-ratio:1360 / 540}
.carousel-slide{position:absolute;inset:0}
.carousel-slide[hidden]{display:none}
.product-carousel .hero-desktop,.product-carousel .mac-stage{width:100%;height:100%;min-height:0;margin:0;aspect-ratio:auto}
.product-carousel .native-expanded{animation:none!important;opacity:1;visibility:visible;clip-path:none}
.product-carousel .native-collapsed{animation:none;visibility:visible;opacity:1}
.product-carousel .native-compact{opacity:var(--compact-visible);transform:none;transition:none;filter:none}
.carousel-controls{display:flex;justify-content:center;gap:8px;align-items:center;margin-top:22px}
.carousel-controls button{border:1px solid var(--line);background:transparent;color:var(--muted);padding:11px 17px;border-radius:30px;font-size:11px}
.carousel-controls button span{margin-left:6px}
.carousel-controls button[aria-pressed=true]:not(.carousel-motion){background:var(--ink);color:var(--paper)}
.carousel-controls .carousel-motion{width:36px;height:36px;padding:0;color:var(--ink)}
@media(max-width:850px){.carousel-slides{aspect-ratio:1.55}}
@media(max-width:560px){.product-carousel{width:calc(100% - 20px)}.carousel-slides{aspect-ratio:auto;height:400px}.carousel-controls button{font-size:10px;padding:10px 12px}}

/* Swift chrome: opaque black header fades into regular glass and a 10% black tint.
   PNG exports contain the controls but cannot export live macOS backdrop blur. */
.product-carousel .native-expanded{isolation:isolate}
.product-carousel .native-expanded:before{
  inset:6% 7.5% 10.8%;z-index:-1;border-radius:0 0 4% 4%;
  background:linear-gradient(to bottom,#000 0%,#000 12%,rgba(0,0,0,.82) 16%,rgba(0,0,0,.42) 22%,rgba(0,0,0,.1) 30%,rgba(0,0,0,.1) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(1.35);backdrop-filter:blur(24px) saturate(1.35)
}
.product-carousel .native-expanded img{opacity:var(--content-reveal,1);transform:translateY(calc((1 - var(--content-reveal,1)) * -18px))}
.product-carousel .native-compact{isolation:isolate}
.product-carousel .native-compact:before{
  content:"";position:absolute;inset:7.26% 6.9% 13%;z-index:-1;border-radius:7%;
  background:rgba(0,0,0,.1);-webkit-backdrop-filter:blur(24px) saturate(1.35);backdrop-filter:blur(24px) saturate(1.35)
}