@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#22251e;--cream:#f7f7ef;--green:#d6ed85;--muted:#707367}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}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 #398194;outline-offset:5px}.wrap{max-width:1260px;margin:auto;padding-left:48px;padding-right:48px}.nav{height:112px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:9px;font-size:28px;font-weight:800;letter-spacing:-1.3px}.brand-icon{background:var(--green);width:34px;height:37px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;font-size:35px;position:relative;line-height:1}.brand-icon span{font-size:17px;position:absolute;right:-7px;top:-5px}.brand-dot{font-size:10px;align-self:flex-start;margin-top:5px;margin-left:-4px}.nav nav{display:flex;gap:32px;font-size:13px}.nav nav a:hover{color:#64802d}.button{display:inline-flex;align-items:center;justify-content:center;gap:32px;padding:18px 23px;border-radius:8px;font-size:14px;font-weight:600;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px);background:#414b2d}.button span{font-size:20px}.dark{background:var(--ink);color:white}.small{padding:12px 18px;font-size:12px;gap:25px}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;padding-top:64px;padding-bottom:78px;align-items:center}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:700;display:flex;align-items:center;gap:8px}.status-dot{height:6px;width:6px;display:inline-block;background:#78a243;border-radius:100%}h1,h2,h3{font-family:Manrope,Arial,sans-serif}h1{font-size:clamp(44px,4.45vw,64px);line-height:1.13;letter-spacing:-3.2px;margin:23px 0 28px;font-weight:600;position:relative}h1>span{color:#7c9250}.underline{width:87%;height:20px;display:block;margin:1px 0 -17px;stroke:#a9c966;stroke-width:3;fill:none}p{font-size:15px;line-height:1.75;color:var(--muted)}.hero-copy>p{font-size:17px}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:28px}.hand-note{font-family:Georgia,serif;font-size:14px;font-style:italic;transform:rotate(-8deg);position:relative;line-height:1.3}.hand-note span{font-size:32px;position:absolute;left:77px;top:9px}.hero-foot{display:flex;align-items:center;gap:10px;margin-top:33px;font-size:10px;color:var(--muted)}.mini-face{width:25px;height:25px;border:1px solid #aaa;border-radius:50%;display:grid;place-items:center;font-size:23px;color:#555}.hero-art{background:#e6ebd8;border-radius:18px;position:relative;padding:23px 23px 17px;min-height:480px;transform:rotate(1deg)}.art-label{display:flex;align-items:center;gap:6px;font-size:8px;letter-spacing:1.1px}.art-label>span:last-child{margin-left:auto;font-size:19px}.desktop-stage{background:#fafbf6;border:1px solid #ced4bf;border-radius:12px;margin-top:24px;position:relative;box-shadow:0 12px 28px #57673913;transform:rotate(-2deg)}.window-bar{height:32px;border-bottom:1px solid #e4e6dd;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:8px;color:#888}.window-bar>div{display:flex;gap:4px}.window-bar i{display:block;width:5px;height:5px;border-radius:50%;background:#ccd0c2}.demo-scene{height:302px;position:relative;overflow:hidden;border-radius:0 0 12px 12px;background:radial-gradient(ellipse at 55% 80%,#eaf0df,transparent 65%)}.scene-top{display:flex;justify-content:space-between;font-size:7px;letter-spacing:1px;color:#979c8b;padding:15px}.ghost-lines{position:absolute;left:20px;top:58px;width:80px}.ghost-lines i{display:block;height:5px;background:#edf0e6;border-radius:4px;margin:8px 0}.ghost-lines i:nth-child(2){width:70%}.buddy-group{position:absolute;inset:0;animation:enter .75s both}.speech{position:absolute;top:44px;left:27px;z-index:2;background:white;border:1px solid #e3e7da;border-radius:13px;padding:17px 18px;width:218px;box-shadow:0 8px 18px #39462409;transform:rotate(-3deg)}.speech:after{content:'';position:absolute;bottom:-8px;right:30px;width:14px;height:14px;background:white;border-right:1px solid #e3e7da;border-bottom:1px solid #e3e7da;transform:rotate(45deg)}.speech-label{font-size:7px;letter-spacing:1.4px;color:#7b8970;font-weight:700}.speech h2{font-size:24px;line-height:1.22;letter-spacing:-.8px;margin:10px 0 15px;font-weight:700}.response-actions{display:flex;gap:8px}.response-actions button{font-size:10px;border:0;border-radius:5px;padding:9px 10px;background:#f2f3ed}.response-actions button:first-child{background:var(--green);flex:1}.response-actions button span{margin-left:7px}.response-actions button:hover{box-shadow:0 0 0 2px #9cb459}.response-actions button:disabled{opacity:.65;cursor:default}#response{font-size:10px;line-height:1.3;margin:8px 0 0;min-height:0}#response:empty{display:none}.character{position:absolute;width:197px;height:212px;right:1px;bottom:25px;transform:rotate(8deg)}.character svg{width:100%;overflow:visible}.character .body{transform-origin:125px 230px;animation:bob 3s ease-in-out infinite}.celebrate{position:absolute;color:#8caa37;right:5px;top:0;font-size:40px;opacity:0}.scene-bottom{position:absolute;bottom:10px;left:15px;right:12px;display:flex;justify-content:space-between;align-items:center;color:#879077;font-size:8px}.scene-bottom i{display:inline-block;width:4px;height:4px;background:#90ac67;border-radius:50%;margin-right:4px}.scene-bottom button{border:0;background:transparent;font-size:19px;color:#697556;padding:2px 8px}.demo-selector{display:flex;justify-content:center;gap:8px;margin-top:21px}.demo-selector button{border:1px solid transparent;background:transparent;color:#667155;border-radius:20px;padding:8px 13px;font-size:10px}.demo-selector button.active{background:#fbfcf6;border-color:#d1dac0;color:#282e20;box-shadow:0 3px 6px #405a1510}.try-note{text-align:center;font-size:10px;color:#7e876e;margin-top:11px}.try-note span{margin-left:8px}.spark{position:absolute;z-index:3}.spark-one{right:-15px;top:65px;font-size:48px;transform:rotate(12deg)}.spark-two{left:-20px;bottom:94px;font-size:47px}.orbit-label{position:absolute;right:13px;top:47px;font-size:12px;font-style:italic;font-family:Georgia;transform:rotate(8deg);z-index:4}.habit-ribbon{background:var(--green);border-block:1px solid #c4db79;overflow:hidden}.habit-ribbon>div{max-width:1400px;margin:auto;display:flex;align-items:center;justify-content:space-around;gap:24px;padding:22px 26px;font-size:23px;white-space:nowrap}.habit-ribbon span{font-size:10px;letter-spacing:1.8px;font-weight:600}.section{padding-top:85px;padding-bottom:85px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px}h2{font-size:37px;line-height:1.25;letter-spacing:-1.6px;font-weight:600;margin:17px 0}.section-heading>p{font-size:13px;margin-bottom:20px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:45px}.steps article{border-top:1px solid #d9dccf;padding-top:18px}.step-number{font-size:10px;color:#869372}.step-drawing{height:115px;display:flex;align-items:center;justify-content:center;gap:18px;font-size:40px}.calendar{color:#889e57}.calendar span{font-size:14px;border:1px solid #a1ae83;background:#edf1df;padding:18px 16px;border-radius:8px;transform:rotate(-8deg);color:#556333}.hello{gap:8px}.hello span{font-size:12px;border:1px solid #b9c7c4;background:#e8f1ed;border-radius:12px 12px 0 12px;padding:13px;transform:rotate(-5deg)}.hello b{color:#7a9e87;font-size:53px;transform:rotate(10deg)}.celebration{color:#b29260}.celebration b{font-size:65px;transform:rotate(-10deg)}h3{font-size:17px;letter-spacing:-.5px;margin:12px 0}.steps p{font-size:13px;margin:0;line-height:1.8}.habits-section{background:#eeefe5;border-block:1px solid #e1e3d7}.habits-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-top:66px;padding-bottom:66px}.habits-layout p{font-size:14px}.text-link{display:inline-flex;gap:40px;font-size:12px;border-bottom:1px solid #8b936e;padding:9px 0;margin-top:10px}.habit-list{display:flex;flex-direction:column;justify-content:center}.habit-list button{display:flex;align-items:center;gap:18px;background:transparent;text-align:left;border:0;border-bottom:1px solid #d6dacc;padding:20px 0;color:var(--ink)}.habit-list button:hover{transform:translateX(5px)}.habit-list button>span:last-child{margin-left:auto;font-size:22px}.habit-icon{width:49px;height:49px;border-radius:13px;display:grid;place-items:center;font-size:27px}.blue{background:#d1e9ed}.peach{background:#f0dec6}.lavender{background:#dedfee}.habit-list strong{display:block;font-size:16px;font-weight:500}.habit-list small{display:block;color:var(--muted);font-size:12px;margin-top:7px}.buddy-section{display:flex;align-items:center;justify-content:center;gap:95px}.buddy-section h2{font-size:32px}.buddy-section p{font-size:14px}.buddy-section .button{margin-top:10px;font-size:12px;padding:14px 18px}.buddy-sticker{position:relative;font-size:170px;line-height:1;color:#374124;background:#d6ed85;width:200px;height:205px;display:grid;place-items:center;border-radius:47% 50% 43% 48%;transform:rotate(-12deg);box-shadow:8px 8px 0 #c5d89c}.buddy-sticker span{font-family:Georgia;font-style:italic;font-size:15px;position:absolute;bottom:-40px;white-space:nowrap;transform:rotate(5deg)}.coming-note{font-size:10px;color:#858a79;margin-top:12px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #dedfd4;padding-top:27px;padding-bottom:27px}footer .brand{font-size:23px}footer .brand-icon{height:29px;width:28px;font-size:28px}footer p,footer>span{font-size:10px}.happy .character .body{animation:dance .45s ease-in-out infinite}.happy .celebrate{opacity:1;animation:twinkle .5s alternate infinite}.sad .character .mouth{d:path('M112 186 Q125 170 139 186')}.sad .character{animation:leave 1.8s .8s both}.sad .eyes{transform:translateY(3px)}.enter-right{animation-name:enterRight}.enter-top{animation-name:enterTop}.enter-left{animation-name:enter}.enter-middle{animation-name:enterMiddle}@keyframes bob{50%{transform:translateY(-5px) rotate(2deg)}}@keyframes dance{25%{transform:translateY(-12px) rotate(-12deg)}75%{transform:translateY(-9px) rotate(12deg)}}@keyframes twinkle{to{transform:scale(1.4) rotate(30deg)}}@keyframes leave{to{transform:translate(250px,30px) rotate(18deg);opacity:0}}@keyframes enter{from{transform:translateX(-420px);opacity:0}to{transform:none;opacity:1}}@keyframes enterRight{from{transform:translateX(420px);opacity:0}to{transform:none;opacity:1}}@keyframes enterTop{from{transform:translateY(-350px);opacity:0}to{transform:none;opacity:1}}@keyframes enterMiddle{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}@media(min-width:1400px){.hero{gap:65px}.hero-art{min-height:500px}.demo-scene{height:320px}.character{width:210px;height:225px}}@media(max-width:1000px){.wrap{padding-left:30px;padding-right:30px}.hero{gap:20px}.hero-art{padding:18px 14px}.speech{left:16px;width:190px}.speech h2{font-size:21px}.character{width:165px;height:185px;right:-8px}.hand-note{display:none}.nav nav{gap:17px}.hero-copy>p{font-size:15px}.eyebrow{font-size:8px}.steps{gap:25px}}@media(max-width:760px){.wrap{padding-left:23px;padding-right:23px}.nav{height:84px}.nav nav{display:none}.brand{font-size:25px}.small{font-size:10px;padding:10px 13px;gap:10px}.hero{grid-template-columns:1fr;padding-top:30px;padding-bottom:45px;gap:40px}.hero-copy{max-width:500px}h1{font-size:52px;letter-spacing:-2.8px}.underline{max-width:390px}.eyebrow{font-size:8px}.hero-art{max-width:480px;width:100%;margin:auto;min-height:455px}.demo-scene{height:294px}.speech{width:215px;left:25px}.speech h2{font-size:24px}.character{width:190px;height:212px;right:0}.hero-foot{margin-top:23px}.habit-ribbon>div{justify-content:flex-start;gap:23px;padding:17px 23px}.section{padding-top:53px;padding-bottom:53px}.section-heading{display:block}h2{font-size:31px}.section-heading>p{margin-top:18px}.steps{grid-template-columns:1fr;gap:26px;margin-top:30px}.step-drawing{height:95px;justify-content:flex-start;padding-left:30px}.steps p{max-width:360px}.habits-layout{grid-template-columns:1fr;gap:25px;padding-top:45px;padding-bottom:45px}.buddy-section{flex-direction:column;gap:65px;align-items:flex-start}.buddy-sticker{margin-left:40px;width:150px;height:155px;font-size:125px}.buddy-section h2{font-size:29px}footer{flex-wrap:wrap}footer p{width:100%;order:3;margin:0}footer>span{margin-left:auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}
@media(max-width:450px){.demo-scene{height:340px}.speech{top:39px;left:16px;width:192px;padding:15px}.speech h2{font-size:20px;letter-spacing:-.7px}.character{width:155px;height:168px;right:-3px;bottom:29px}.hero-art{min-height:490px}.scene-top{font-size:6px}.art-label{font-size:6px;letter-spacing:.8px}.orbit-label{font-size:10px}.speech-label{font-size:6px;letter-spacing:.9px}.try-note{font-size:9px}}

.release-card{display:flex;gap:48px;align-items:center;padding:40px;background:#e6ebd8;border:1px solid #ced4bf;border-radius:24px}.release-copy{flex:1;min-width:0}.release-copy h2{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.version-badge{font:600 13px Arial,sans-serif;letter-spacing:0;background:#fff;padding:8px 12px;border-radius:20px}.release-copy ul{padding-left:20px;font-size:14px;line-height:1.8;color:#505944}.release-mascot{flex:none;width:200px;height:300px;background:url('assets/vitabuddy-0.4.0.png') 0 -300px / 800px 1200px no-repeat}.release-requirements{font-size:12px}.preview-notice{font-size:12px;padding:12px 14px;border:1px solid #c6ccb9;border-radius:9px;background:#f7f7ef}.release-links{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;text-decoration:underline}.release-section{scroll-margin-top:20px}@media(max-width:760px){.release-card{flex-direction:column;padding:24px;gap:16px}.release-mascot{width:160px;height:240px;background-size:640px 960px;background-position:0 -240px}.release-copy h2{font-size:30px}}
