:root { --ink:#1b2832; --ink-light:#30414c; --paper:#f7f4ee; --cream:#efe9dd; --yellow:#f7c944; --apricot:#fa9271; --blue:#a8cfdf; --sage:#b8cbb9; --mist:#dce8e5; --line:rgba(27,40,50,.17); --serif:"Fraunces", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; --mono:"DM Mono", monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; overflow-x:hidden; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.grain { position:fixed; inset:0; opacity:.17; pointer-events:none; z-index:20; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); }
.site-header { height:92px; padding:0 clamp(24px, 6vw, 100px); display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; }
.logo { color:var(--ink); display:inline-flex; align-items:center; gap:7px; font-weight:700; text-decoration:none; font-size:24px; letter-spacing:-1.3px; }
.logo svg { width:27px; height:27px; }
nav { display:flex; align-items:center; gap:33px; margin-left:90px; }
nav a { text-decoration:none; color:var(--ink); font-size:13px; font-weight:600; transition:opacity .2s; } nav a:hover { opacity:.55; }
.button { border:0; background:var(--ink); color:#fff; padding:16px 23px; font-size:13px; font-weight:700; border-radius:2px; letter-spacing:.1px; transition:transform .2s, background .2s; box-shadow:4px 4px 0 rgba(27,40,50,.13); }
.button:hover { transform:translate(-2px,-2px); background:#30414c; }.button span { margin-left:13px; font-size:17px; line-height:0; }.button-small { padding:11px 15px; box-shadow:none; font-size:12px; }
.hero { min-height:calc(100vh - 92px); padding:75px clamp(24px, 9vw, 145px) 68px; display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:48px; position:relative; }
.hero-copy { position:relative; z-index:2; padding-bottom:25px; }.eyebrow { display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:1.55px; margin:0 0 25px; }.eyebrow span { display:inline-block; width:8px; height:8px; background:var(--apricot); border-radius:50%; }
h1,h2,h3,p { margin-top:0; }h1,h2 { font-family:var(--serif); font-weight:600; letter-spacing:-2.8px; line-height:.97; } h1 { font-size:clamp(50px, 5.5vw, 88px); margin-bottom:29px; }h1 em,h2 em { font-weight:600; color:var(--apricot); }
.hero-intro { font-size:17px; line-height:1.55; max-width:452px; color:var(--ink-light); }.hero-actions { margin-top:34px; display:flex; align-items:center; gap:29px; }.text-link { color:var(--ink); font-weight:700; font-size:13px; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:3px; }.text-link span { margin-left:7px; }
.micro-proof { display:flex; align-items:center; gap:13px; margin-top:54px; }.micro-proof p { font-size:11px; line-height:1.4; color:#56626a; margin:0; }.avatar-stack { display:flex; }.avatar-stack span { display:grid; place-items:center; border:2px solid var(--paper); width:28px; height:28px; margin-left:-6px; border-radius:50%; color:#fff; background:var(--ink); font-family:var(--mono); font-size:9px; }.avatar-stack span:first-child { margin-left:0; background:var(--apricot); }.avatar-stack span:nth-child(2){background:var(--blue); color:var(--ink)}.avatar-stack span:nth-child(3){background:var(--sage); color:var(--ink)}.avatar-stack span:last-child{background:var(--yellow); color:var(--ink)}
.hero-art { height:580px; min-width:440px; max-width:610px; margin-left:auto; width:100%; position:relative; overflow:hidden; background:var(--mist); border-radius:220px 220px 2px 2px; border:1px solid rgba(27,40,50,.12); }.sun { position:absolute; border-radius:50%; }.sun-one { width:250px; height:250px; background:var(--yellow); right:-40px; top:0; }.sun-two { width:110px; height:110px; background:var(--apricot); left:-22px; top:210px; }
.building { position:absolute; bottom:0; background:var(--ink); }.back-building { left:0; width:116px; height:290px; padding:31px 18px; display:grid; grid-template-columns:1fr 1fr; gap:22px; background:#59717e; }.back-building i { background:var(--blue); height:31px; }.main-building { left:103px; bottom:0; width:311px; height:420px; background:#e6a762; padding:76px 49px 0; display:grid; grid-template-columns:1fr 1fr; align-content:start; gap:40px 54px; }.main-building .roof { position:absolute; width:337px; height:24px; top:0; left:-14px; background:#df9252; }.window { height:55px; background:#fccf92; border:7px solid #c87c49; box-shadow:inset 0 0 0 2px rgba(48,65,76,.27); }.window.lit { background:var(--yellow); }.window.peach { background:var(--apricot); }.window.blue { background:var(--blue); }.door { position:absolute; width:77px; height:105px; background:#c87c49; bottom:0; left:117px; border-radius:38px 38px 0 0; border:8px solid #b96f42; border-bottom:0; }
.calendar-card { position:absolute; background:#fffdf8; border:1px solid rgba(27,40,50,.2); box-shadow:10px 12px 0 rgba(27,40,50,.12); padding:16px; width:264px; }.floating-card-one { left:32px; top:70px; transform:rotate(-2deg); }.card-topline { display:flex; justify-content:space-between; font-family:var(--mono); font-size:8px; letter-spacing:.6px; color:#64727b; padding-bottom:9px; border-bottom:1px solid var(--line); }.online { color:#536767; letter-spacing:0; }.online i,.schedule-footer i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#73b28a; }.calendar-card strong { display:block; font-family:var(--serif); font-size:23px; margin:12px 0 9px; letter-spacing:-.8px; }.event-line { display:flex; gap:7px; font-size:9px; align-items:center; margin-top:7px; color:#52616a; }.event-line time { margin-left:auto; font-family:var(--mono); font-size:8px; }.dot { width:7px; height:7px; border-radius:50%; }.apricot{background:var(--apricot)}.blue-dot{background:var(--blue)}.note-card { position:absolute; right:16px; top:283px; background:var(--yellow); color:var(--ink); width:190px; padding:17px 19px; font-family:var(--serif); font-size:20px; line-height:1.05; letter-spacing:-.5px; transform:rotate(4deg); box-shadow:5px 6px 0 rgba(27,40,50,.12); }.note-card span { font-family:var(--sans); font-size:14px; display:block; margin-bottom:6px; }.plant { position:absolute; right:20px; bottom:4px; width:100px; height:132px; z-index:2; }.pot { position:absolute; height:45px; width:66px; background:#c66f58; bottom:0; left:17px; clip-path:polygon(0 0,100% 0,83% 100%,17% 100%); }.plant i { position:absolute; width:25px; height:75px; background:#43676a; bottom:37px; left:40px; border-radius:100% 0 100% 0; transform-origin:bottom; }.plant i:nth-of-type(1){transform:rotate(-60deg);height:63px}.plant i:nth-of-type(2){transform:rotate(-31deg);height:80px}.plant i:nth-of-type(3){transform:rotate(0deg);height:94px}.plant i:nth-of-type(4){transform:rotate(35deg);height:73px}.plant i:nth-of-type(5){transform:rotate(65deg);height:57px}
.ticker { overflow:hidden; background:var(--yellow); padding:18px 0; border-block:1px solid var(--ink); transform:rotate(-1.4deg) scale(1.03); position:relative; z-index:3; }.ticker-track { display:flex; white-space:nowrap; align-items:center; gap:29px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:1.2px; animation:scroll 63s linear infinite; width:max-content; }.ticker-track b { font-size:13px; }@keyframes scroll {to {transform:translateX(-50%)}}
.section-pad { padding:150px clamp(24px, 9vw, 145px); }.section-label { display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:10px; letter-spacing:1.3px; }.section-label span { color:var(--apricot); }.section-label p { margin:0; }.problem { padding-bottom:110px; }.problem-content { display:grid; grid-template-columns:1fr 310px; gap:60px; padding:57px 0 67px 14%; }.problem h2,.how h2,.demo h2,.principles h2,.closing h2 { font-size:clamp(42px, 4.5vw, 69px); margin:0; }.problem-side { align-self:end; }.problem-side p { line-height:1.58; font-size:16px; color:var(--ink-light); }.round-link { display:inline-flex; align-items:center; gap:16px; color:var(--ink); text-decoration:none; font-size:13px; font-weight:700; margin-top:17px; }.round-link span { display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; width:31px; height:31px; font-size:17px; }.quote-band { padding:20px 34px; background:var(--blue); display:flex; justify-content:center; align-items:center; gap:20px; text-align:center; }.quote-band p { font-family:var(--serif); letter-spacing:-.4px; font-size:21px; margin:0; }.quote-mark { font-family:var(--serif); font-size:47px; line-height:.5; }.quote-mark.end { align-self:flex-end; }
.how { background:var(--ink); color:#f8f4eb; }.light span { color:var(--yellow); }.how-heading { display:grid; grid-template-columns:1fr 285px; gap:50px; margin:57px 0 73px 14%; }.how-heading h2 { color:#fff; }.how-heading h2 em { color:var(--yellow); }.how-heading p { font-size:15px; line-height:1.6; color:#bbc6c5; align-self:end; }.steps { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.35); }.step { padding:30px 38px 18px 0; min-height:278px; position:relative; }.step+ .step { padding-left:38px; border-left:1px solid rgba(255,255,255,.35); }.step-number { display:block; font-family:var(--mono); font-size:10px; color:var(--yellow); }.step-icon { height:69px; margin:17px 0 20px; color:var(--yellow); position:relative; }.step h3 { font-family:var(--serif); letter-spacing:-.5px; font-size:23px; margin-bottom:7px; }.step p { max-width:245px; font-size:13px; line-height:1.55; color:#c7d0cf; margin:0; }.icon-home { width:67px; height:49px; border:2px solid var(--yellow); border-top:0; margin-top:29px; }.icon-home:before { content:""; position:absolute; width:46px; height:46px; border:2px solid var(--yellow); border-right:0; border-bottom:0; transform:rotate(45deg); top:-25px; left:8px; }.icon-home i { display:block; position:absolute; width:10px; height:10px; border:1px solid var(--yellow); top:9px; left:12px; }.icon-home i:nth-child(2){left:42px}.icon-home i:nth-child(3){height:20px;left:28px;top:27px}.icon-clock { width:58px; height:58px; border:2px solid var(--yellow); border-radius:50%; }.icon-clock i { position:absolute; height:21px; width:2px; background:var(--yellow); left:27px; top:11px; transform-origin:bottom; transform:rotate(33deg); }.icon-clock i+ i { height:17px; top:18px; transform:rotate(125deg); }.icon-heart { font-size:63px; line-height:.8; font-family:Arial; }
.demo { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:75px; background:var(--cream); }.demo-copy h2 { margin:29px 0 20px; }.demo-copy p:not(.eyebrow) { max-width:370px; line-height:1.57; color:var(--ink-light); margin-bottom:29px; }.schedule-shell { background:#fffdf9; padding:26px 28px 17px; border:1px solid var(--line); box-shadow:12px 12px 0 #d8d0c1; transform:rotate(1.2deg); }.schedule-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:19px; border-bottom:1px solid var(--line); }.schedule-header p { font-family:var(--mono); color:#68777b; font-size:9px; letter-spacing:.9px; margin:0 0 7px; }.schedule-header strong { font-family:var(--serif); font-size:24px; letter-spacing:-.7px; }.schedule-header button { border:0; background:transparent; letter-spacing:2px; font-size:16px; color:var(--ink); }.weekdays { display:grid; grid-template-columns:repeat(5,1fr); text-align:center; padding:18px 0 14px; color:#748288; font-family:var(--mono); font-size:8px; line-height:2.2; }.weekdays b { font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink); }.weekdays .active b { display:inline-grid; width:29px; height:29px; place-items:center; background:var(--ink); color:white; border-radius:50%; }.schedule-events { display:grid; gap:9px; }.schedule-event { display:flex; align-items:center; gap:13px; padding:12px 13px; border-left:5px solid; background:#fff8f3; }.schedule-event.work { border-color:var(--apricot); }.schedule-event.music { border-color:var(--blue); background:#f1f8f8; }.schedule-event.rest { border-color:var(--sage); background:#f2f6ef; }.event-icon { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:#fff; font-size:15px; }.schedule-event strong { font-size:12px; }.schedule-event p { font-size:10px; margin:2px 0 0; color:#657278; }.schedule-event > span { margin-left:auto; font-family:var(--mono); font-size:9px; color:#6d797c; }.add-event { width:100%; margin:13px 0 14px; border:1px dashed #8a999a; padding:10px; color:#536367; background:transparent; font-size:11px; font-weight:700; }.add-event span { font-size:16px; margin-right:4px; }.schedule-footer { padding-top:14px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:9px; font-family:var(--mono); color:#68767a; }.schedule-footer i { margin-right:4px; }
.principles { padding-bottom:134px; }.principles-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:80px; padding:58px 0 0 14%; }.principles h2 { font-size:clamp(42px, 4.1vw, 63px); }.principles-list { border-top:1px solid var(--line); }.principles-list article { display:grid; grid-template-columns:52px 1fr; gap:14px; padding:23px 0; border-bottom:1px solid var(--line); }.principles-list article>span { font-family:var(--mono); color:var(--apricot); font-size:10px; padding-top:5px; }.principles-list h3 { font-family:var(--serif); font-size:22px; letter-spacing:-.5px; margin-bottom:6px; }.principles-list p { color:#59676d; font-size:13px; line-height:1.5; margin:0; }
.closing { padding:130px 24px 121px; background:var(--apricot); text-align:center; position:relative; overflow:hidden; }.closing > *:not(.closing-orbit) { position:relative; z-index:1; }.closing .eyebrow { justify-content:center; }.closing .eyebrow span { background:var(--ink); }.closing h2 { font-size:clamp(53px, 6vw, 91px); color:var(--ink); margin-bottom:33px; }.closing h2 em { color:#fffaf2; }.button-inverted { background:var(--paper); color:var(--ink); box-shadow:5px 5px 0 rgba(27,40,50,.2); }.button-inverted:hover { background:#fff; }.closing-note { font-family:var(--mono); font-size:10px; color:#5e3d38; margin:23px 0 0; }.closing-orbit { position:absolute; border:1px solid rgba(255,250,242,.4); width:650px; height:650px; border-radius:50%; left:50%; transform:translateX(-50%); top:-303px; }.orbit-b { width:920px; height:920px; top:-438px; border-color:rgba(27,40,50,.13); }
footer { min-height:115px; padding:0 clamp(24px, 9vw, 145px); display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#647075; } footer .logo { font-size:21px; }footer .logo svg{width:24px}footer p { margin:0; }.footer-demo { color:var(--ink); font-family:var(--mono); font-size:9px; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:2px; }
.modal { border:0; background:transparent; padding:20px; width:min(100%,620px); color:var(--ink); }.modal::backdrop { background:rgba(27,40,50,.64); backdrop-filter:blur(3px); }.modal-panel { position:relative; background:var(--paper); padding:42px; box-shadow:10px 10px 0 var(--yellow); }.modal-close { position:absolute; right:16px; top:10px; border:0; color:var(--ink); background:transparent; font-size:32px; line-height:1; }.modal h2 { font-size:43px; margin:0 0 14px; }.modal-intro { color:#617076; line-height:1.5; font-size:14px; margin-bottom:24px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }.modal label { display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:9px; letter-spacing:.35px; }.modal select,.modal input,.modal textarea { background:#fffdf8; color:var(--ink); border:1px solid #bdc2ba; outline:0; padding:10px; font-family:var(--sans); font-size:13px; border-radius:0; }.modal select:focus,.modal input:focus,.modal textarea:focus { border-color:var(--ink); box-shadow:3px 3px 0 var(--yellow); }.form-message { margin-top:13px; }.form-message span { color:#7c8887; }.modal textarea { resize:vertical; }.form-submit { width:100%; margin-top:22px; }.toast { position:fixed; z-index:30; right:25px; bottom:25px; display:flex; align-items:center; gap:11px; background:var(--ink); color:white; padding:14px 18px; box-shadow:5px 5px 0 var(--yellow); transform:translateY(140%); opacity:0; transition:transform .35s ease,opacity .35s; }.toast.show { transform:translateY(0); opacity:1; }.toast>span { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:var(--ink); background:var(--yellow); font-size:13px; font-weight:700; }.toast p { margin:0; font-size:11px; line-height:1.4; }.toast strong { font-size:12px; }
@media(max-width:820px) { .site-header { height:75px; padding:0 21px; }.site-header nav { display:none; }.button-small { padding:9px 12px; }.hero { min-height:auto; padding:59px 24px 52px; display:block; }.hero-copy { padding:0; }.hero-art { margin:57px auto 0; height:470px; min-width:0; border-radius:150px 150px 2px 2px; }.main-building{left:76px; transform:scale(.9); transform-origin:bottom left}.back-building{transform:scale(.9);transform-origin:bottom left}.calendar-card{transform:scale(.87) rotate(-2deg);transform-origin:top left}.note-card{transform:scale(.85) rotate(4deg);transform-origin:top right;right:2px}.hero-actions { flex-wrap:wrap; }.micro-proof { margin-top:38px; }.section-pad { padding:85px 24px; }.problem { padding-bottom:63px; }.problem-content,.how-heading,.principles-grid { display:block; padding:39px 0 39px; }.problem-side { margin-top:30px; }.how-heading { margin:0; padding:40px 0 46px; }.how-heading p { margin:20px 0 0; }.steps { display:block; }.step,.step+ .step { min-height:0; padding:25px 0; border-left:0; border-bottom:1px solid rgba(255,255,255,.35); }.step:last-child { border-bottom:0; }.step-icon { float:right; margin:-5px 18px 0 0; transform:scale(.75); transform-origin:top right; }.demo { display:block; }.schedule-shell { margin-top:55px; padding:20px 16px 14px; }.principles { padding-bottom:80px; }.principles-grid { padding-top:39px; }.principles-list { margin-top:39px; }.closing { padding:89px 20px; } footer { padding:27px 24px; min-height:0; flex-wrap:wrap; gap:15px; } footer p { order:3; width:100%; }.modal-panel { padding:34px 22px 25px; }.modal h2 { font-size:37px; }.toast { right:14px; left:14px; bottom:14px; } }
@media(max-width:410px) { h1 { font-size:49px; }.hero-art { height:410px; }.main-building{transform:scale(.76);left:65px}.back-building{transform:scale(.76)}.calendar-card{transform:scale(.72) rotate(-2deg);left:15px;top:49px}.note-card{transform:scale(.66) rotate(4deg);top:247px;right:0}.plant{transform:scale(.75);transform-origin:bottom right}.weekdays { font-size:7px; }.schedule-event { padding:10px 7px; gap:6px; }.schedule-event strong { font-size:11px; }.schedule-event > span { font-size:8px; }.form-grid { grid-template-columns:1fr; } }