:root{color-scheme:dark;--background:#220132;--text:#fff;--muted:#727272;font-family:'Nunito',ui-rounded,'SF Pro Rounded',system-ui,sans-serif;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--background);color:var(--text)}h1,h2,h3,p{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}h1,h2,h3{font-weight:600}h2{font-size:42px;line-height:1.2}p{font-size:22px;line-height:1.2;font-weight:300}.container{width:min(1180px,calc(100% - 64px));margin-inline:auto}.hero{height:976px;position:relative;overflow:hidden;background:#011332}.navigation{display:flex;align-items:center;justify-content:space-between;padding-top:35px;position:relative;z-index:1}.brand{flex-shrink:0}.download-nav{display:flex;gap:16px}.download-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px 12px 12px;border:1px solid #7272724d;border-radius:6px;color:var(--muted);font-size:16px;font-weight:600;line-height:1;min-height:50px;transition:transform .18s,filter .18s}.download-button:hover{filter:brightness(1.05);transform:translateY(-2px)}.ios{background:#d3fec5}.mac{background:#fec5d5}.hero-copy{position:relative;z-index:1;text-align:center;margin:74px auto 0;padding-inline:24px}.hero h1{font-size:72px;line-height:1.2;letter-spacing:-1.7px}.hero-copy p{color:#cffec0;margin-top:12px}.app-store{display:block;width:192px;margin:36px auto 0;border-radius:12px}.devices{position:absolute;width:1100px;height:auto;max-width:none;bottom:0;left:50%;transform:translateX(-50%)}.simple{height:530px;position:relative;overflow:hidden;background:linear-gradient(180deg,#22013280 50%,#31013280)}.reflection{position:absolute;width:1100px;max-width:none;height:auto;top:4px;left:50%;transform:translateX(-50%);pointer-events:none}.simple-inner{position:relative;max-width:980px;height:100%;margin:auto;display:grid;grid-template-columns:380px 440px;gap:140px;align-items:center}.simple-copy p{color:#fec5d5;margin-top:12px}.note-demo{align-self:end;position:relative}.phone{position:relative;width:440px;aspect-ratio:1;container-type:inline-size}.phone>img{width:100%;height:auto}.try-notes{position:absolute;top:-47px;right:0;font:24px/1.2 'Delicious Handrawn',cursive;color:#fef3c5;display:flex;align-items:center;gap:8px;white-space:nowrap}.note-hint-arrow{display:block;flex:none;width:22px;height:26px;overflow:visible;align-self:flex-end;transform:translateY(14px)}.note-tabs{position:absolute;top:19.1%;left:24.9%;width:47.8%;height:9%;display:flex;gap:4.65%}.note-tabs button{position:relative;flex:1;min-width:0;border:0;border-radius:50%;background:transparent;cursor:pointer;padding:0;color:#746a38}.essentials{background:linear-gradient(#011332,#220132);padding:120px 0 118px}.section-heading{text-align:center}.section-heading p{margin-top:12px;color:#c5dafe}.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:50px}.feature{height:280px;border-radius:24px;box-shadow:inset 0 -2px 1px #ffffffbf,inset 0 2px 1px #ffffffbf;color:#727272;text-align:center;padding:48px 24px 24px;background:linear-gradient(#ffffff4d,transparent 70%),var(--card)}.feature>img{margin:0 auto 32px;height:80px;width:auto;max-width:none}.feature h3{font-size:32px;line-height:1;font-weight:600;letter-spacing:-.7px}.feature p{font-size:16px;line-height:1.26;font-weight:500;opacity:.75;margin-top:8px}.yellow{--card:#fef3c5}.green{--card:#d3fec5}.mint{--card:#c5feef}.blue{--card:#c5dafe}.purple{--card:#ebc5fe}.pink{--card:#fec5d5}.peach{--card:#fed5c5}.rainbow{background:radial-gradient(at 90% 10%,#fef3c5,transparent 55%),radial-gradient(at 100% 90%,#c5feef,transparent 60%),radial-gradient(at 0 100%,#ebc5fe,transparent 60%),#fed5c5}.get-jot{padding:74px 24px 0;display:flex;flex-direction:column;align-items:center;gap:36px;scroll-margin-top:40px}.get-jot .section-heading p{color:#ebc5fe}.app-icon{border-radius:25%;width:220px;height:auto}.download-options{display:flex;flex-direction:column;align-items:center;gap:24px}.large{padding:18px 28px 18px 18px;border-width:2px;border-radius:12px;font-size:24px;gap:18px;height:80px}.platform-icon{height:40px;width:40px;display:grid;place-items:center}.mac .platform-icon{width:53.333px}.platform-icon img{transform:scale(1.6667);max-width:none}.download-status{font-size:16px;min-height:20px;text-align:center;color:#ebc5fe;margin-top:-16px}footer{display:flex;justify-content:center;padding:100px 24px 20px}footer nav{display:flex;gap:28px;padding:16px 28px;background:#320a45;border-radius:99px;font-size:16px;line-height:1}a[aria-disabled=true]{cursor:pointer}:focus-visible{outline:3px solid #fff;outline-offset:5px}.note-tabs button:focus-visible{outline-color:#746a38;outline-offset:1px}.visually-hidden,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link:focus{position:fixed;top:12px;left:12px;z-index:10;background:#220132;padding:16px}.get-jot:focus{outline:none}

@media(max-width:1199px){.hero{height:auto;padding-bottom:0}.hero-copy{margin-top:74px}.hero h1{font-size:clamp(44px,5vw,72px)}.devices{position:relative;left:auto;transform:none;width:min(1100px,100%);margin:50px auto 0}.simple-inner{width:calc(100% - 96px);grid-template-columns:minmax(0,380px) minmax(0,440px);gap:60px}.phone{width:100%}.simple{height:500px}.feature{height:auto;min-height:270px;padding-inline:18px}.feature h3{font-size:27px}.feature-grid{gap:16px}.essentials{padding-block:96px}.get-jot{padding-top:60px}}
@media(max-width:900px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;margin-inline:auto}.feature{min-height:280px}.feature h3{font-size:32px}.simple-inner{gap:36px;width:calc(100% - 64px);grid-template-columns:1fr 1fr}.simple{height:440px}.simple h2{font-size:36px}.simple p{font-size:20px}.try-notes{font-size:21px}.hero-copy{margin-top:64px}.hero h1{letter-spacing:-1px}.hero-copy p{max-width:580px;margin-inline:auto}.download-button{font-size:14px;gap:8px}.large{font-size:24px;gap:18px}.download-nav{gap:10px}}
@media(max-width:600px){.container{width:calc(100% - 40px)}.navigation{padding-top:24px;align-items:center}.brand img{width:106px;height:auto}.download-nav{display:none}.hero-copy{margin-top:58px;padding-inline:20px}.hero h1{font-size:44px;line-height:1.08;max-width:420px;margin:auto}.hero-copy p{font-size:20px;line-height:1.35;max-width:370px;margin-top:18px}.app-store{margin-top:28px}.devices{width:calc(100% - 40px);max-width:440px;margin:40px auto 0}.reflection{width:calc(100% - 40px);max-width:440px}.simple{height:auto;padding-top:58px}.simple-inner{width:calc(100% - 40px);display:flex;flex-direction:column;gap:80px}.simple-copy{text-align:center;max-width:400px}.simple h2,h2{font-size:34px}.simple-copy p{font-size:20px;line-height:1.35}.note-demo{width:min(360px,100%);align-self:center}.try-notes{right:8px;top:-42px}.essentials{padding:70px 0}.section-heading p{font-size:20px;line-height:1.35}.feature-grid{gap:12px;margin-top:36px}.feature{border-radius:20px;min-height:238px;padding:28px 12px 24px}.feature>img{margin-bottom:20px;transform:scale(.8)}.feature h3{font-size:clamp(18px,4.8vw,26px);letter-spacing:-.5px}.feature p{font-size:14px;line-height:1.3}.desktop-break{display:none}.get-jot{padding-top:36px;gap:30px}.app-icon{width:170px}.large{font-size:22px;height:76px}.download-options{gap:18px}footer{padding-top:60px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* Solid foreground colours matched to the Figma reference screenshots.
   The multicolour tile alone retains foreground blending. */
.download-button,.feature{isolation:isolate}
.download-button.ios{color:#47713b;border-color:#a7cd97}
.download-button.mac{color:#743c4d;border-color:#cb94a6}
.feature.yellow{--heading:#71673b;--body:#958b62}
.feature.green{--heading:#47713b;--body:#6b935f}
.feature.mint{--heading:#3b7163;--body:#61958a}
.feature.blue{--heading:#3b5276;--body:#5e7598}
.feature.purple{--heading:#603b73;--body:#845f95}
.feature.pink{--heading:#743c4d;--body:#965f70}
.feature.peach{--heading:#744e3b;--body:#976f5d}
.feature:not(.rainbow) h3{color:var(--heading)}
.feature:not(.rainbow) p{color:var(--body);opacity:1}
.feature.rainbow>img,.feature.rainbow>h3,.feature.rainbow>p{mix-blend-mode:multiply;mix-blend-mode:plus-darker}
/* Figma hero: supplied colour artwork, translucent backdrop blur,
   bottom-centred screen highlight, and subtle static grain. */
.hero{isolation:isolate}
.hero-background{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;isolation:isolate;--colour-blur:clamp(100px,17.3611vw,250px);--highlight-blur:clamp(40px,6.9444vw,100px)}
.hero-colours{position:absolute;inset:0;background:url("assets/colours.svg") center / cover no-repeat}
.hero-blur{position:absolute;inset:0;background:rgb(255 255 255 / 1%);-webkit-backdrop-filter:blur(var(--colour-blur));backdrop-filter:blur(var(--colour-blur))}
.hero-highlight{position:absolute;inset:0;background:radial-gradient(ellipse 70.2778% 100% at 50% 100%,#fff 0%,rgb(255 255 255 / 0%) 74.519%);opacity:.5;mix-blend-mode:screen;filter:blur(var(--highlight-blur))}
.hero-grain{position:absolute;inset:0;background:url("assets/hero-noise.svg") repeat;opacity:.13;mix-blend-mode:soft-light}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-colours{filter:blur(var(--colour-blur));transform:scale(1.15)}
}

/* Avoid short final lines in headings and paragraphs. */
h1,h2,h3,h4,h5,h6,p{text-wrap:pretty}

/* Notes and device frame use identical canvases; only the screen changes. */
#note-panel{position:absolute;inset:0;z-index:0}
#note-image{display:block;width:100%;height:auto}
.phone>.note-frame{position:absolute;inset:0;z-index:1;pointer-events:none}
.note-tabs{z-index:2}

.try-notes{transition:color .2s ease}

/* Set before observation so elements cannot flash before their entrance. */
@media(prefers-reduced-motion:no-preference){
  .reveal-pending{opacity:0}
}
@media print{
  .reveal-pending{opacity:1}
}

/* A quiet, readable layout for the privacy policy. */
.policy-page{background:linear-gradient(155deg,#011332 0%,#220132 650px);min-height:100vh}
.policy-home{font-size:16px;color:#ebc5fe;text-decoration:underline;text-underline-offset:4px}
.policy-content{width:min(760px,calc(100% - 48px));margin:80px auto 0}
.policy-content h1{font-size:48px;line-height:1.15;letter-spacing:-1px;margin-bottom:20px}
.policy-content h2{font-size:28px;line-height:1.25;margin:40px 0 16px}
.policy-content p,.policy-content li{font-size:18px;line-height:1.65;font-weight:400;color:#e9dfee}
.policy-content p+p{margin-top:18px}
.policy-content .policy-date{font-size:16px;color:#c5dafe;margin-bottom:28px}
.policy-content strong{font-weight:700}
.policy-content ul{padding-left:24px;margin:0}
.policy-content li+li{margin-top:18px}
.policy-content a{color:#ebc5fe;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.policy-content a:hover,.policy-home:hover{color:#fff}
@media(max-width:600px){
  .policy-content{margin-top:56px;width:calc(100% - 40px)}
  .policy-content h1{font-size:36px}
  .policy-content h2{font-size:25px;margin-top:32px}
  .policy-content p,.policy-content li{font-size:17px}
  .policy-home{font-size:14px}
}