:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #25372a; background: #fbfcf7; font-synthesis: none; }
* { box-sizing: border-box; } body { margin: 0; } a { color: inherit; text-decoration: none; } button, input { font: inherit; } button, a, input, summary { outline-offset: 4px; } :focus-visible { outline: 2px solid #3f7050; } [hidden] { display: none !important; }
p { line-height: 1.65; } .skip { position: absolute; left: 20px; top: -60px; padding: 12px; background: white; z-index: 10; } .skip:focus { top: 10px; }
.site-header { max-width: 1220px; padding: 26px 36px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; letter-spacing: -.65px; font-weight: 650; white-space: nowrap; }
.mark { display: block; flex: none; width: 32px; height: 32px; }
nav { display: flex; align-items: center; gap: 30px; font-size: 12px; } nav > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid #28553a; border-radius: 8px; padding: 15px 20px; background: #28553a; color: #fff; font-size: 13px; font-weight: 550; cursor: pointer; } .button:hover { background: #1e452d; } .button:disabled { opacity: .6; cursor: wait; } .button.small { padding: 11px 16px; font-size: 11px; } .button span { font-size: 17px; }
.hero { max-width: 1220px; margin: 36px auto 90px; padding: 35px 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.eyebrow { font-size: 10px; font-weight: 550; letter-spacing: 1.2px; text-transform: uppercase; color: #708269; margin: 0 0 24px; } .eyebrow > span { display: inline-block; width: 6px; height: 6px; border-radius: 100%; background: #86a778; margin: 0 6px 1px 0; }
h1 { font-size: clamp(44px, 4.9vw, 65px); line-height: 1.07; letter-spacing: -2.9px; font-weight: 550; margin: 0 0 26px; } h1 em { font-family: Georgia, serif; font-weight: 400; color: #6e8b59; }
.intro { max-width: 420px; font-size: 15px; color: #6e7969; margin-bottom: 30px; }.under-button { font-size: 10px; color: #87917e; margin-top: 14px; }
.hero-art { position: relative; min-height: 550px; display: grid; place-items: center; }
.art-orbit { position: absolute; border: 1px solid #e2e9d9; border-radius: 50%; width: 450px; height: 450px; transform: rotate(-25deg); } .orbit-two { width: 330px; height: 530px; border-color: #ecf0e5; transform: rotate(32deg); }
.sample-phone { position: relative; width: 270px; min-height: 467px; border: 6px solid white; border-radius: 31px; background: #f5f3e9; box-shadow: 0 23px 50px #4c62351a, 0 0 0 1px #e9eddf; overflow: hidden; text-align: center; padding: 0 18px 20px; transform: rotate(5deg); }
.sample-cover { height: 112px; margin: 0 -18px; background: #e4e8d5; position: relative; overflow: hidden; } .sample-sun { width: 48px; height: 48px; background: #f1d8a3; position: absolute; top: 17px; left: 46px; border-radius: 50%; } .sample-hill { position: absolute; width: 380px; height: 200px; background: #bbc7a5; border-radius: 50%; top: 60px; left: 15px; transform: rotate(-15deg); }
.sample-avatar { position: relative; width: 58px; height: 58px; border: 4px solid #f5f3e9; border-radius: 50%; background: #9aab87; display: grid; place-items: center; margin: -32px auto 10px; color: white; font-family: Georgia, serif; font-size: 27px; }
.sample-phone h2 { font-family: Georgia, serif; font-size: 23px; font-weight: 400; margin: 8px 0; } .sample-phone p { font-size: 10px; color: #849076; margin: 0 auto 22px; max-width: 180px; }
.sample-link { display: flex; align-items: center; justify-content: space-between; background: #fffefa; border: 1px solid #dfe4d4; border-radius: 9px; padding: 14px 12px; font-size: 9px; font-weight: 500; margin-bottom: 9px; box-shadow: 0 2px 3px #596d3805; } .sample-link:first-of-type { background: #647c50; color: white; border-color: #647c50; } .sample-dots { margin-top: 23px; color: #9aab89; font-size: 7px; }
.floating-note { position: absolute; z-index: 2; background: #fff; border: 1px solid #e3e9da; border-radius: 11px; padding: 14px 17px; font-size: 10px; box-shadow: 0 10px 24px #5065360d; display: flex; align-items: center; gap: 10px; }.floating-note > span { color: #71945d; font-size: 19px; }.note-top { top: 64px; right: -5px; transform: rotate(-5deg); }.note-bottom { bottom: 75px; left: -12px; transform: rotate(-5deg); }.illustration-label { position: absolute; bottom: -5px; font-size: 10px; color: #9aa38e; }
.features { max-width: 1148px; margin: 0 auto 100px; padding: 55px 0 0; border-top: 1px solid #e3e9d9; }.section-heading { text-align: center; }.section-heading .eyebrow { margin-bottom: 13px; } .section-heading h2 { font-size: 31px; font-weight: 500; letter-spacing: -.9px; margin: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 55px; margin: 50px 30px 0; }.feature-number { font-size: 11px; color: #97a18c; display: block; margin-bottom: 18px; }.feature-grid h3 { font-size: 16px; font-weight: 550; margin: 0 0 11px; }.feature-grid p { color: #7b8573; font-size: 13px; margin: 0; }
.waitlist { max-width: 1148px; margin: 0 auto 70px; padding: 56px 65px; border: 1px solid #dfe6d5; border-radius: 18px; background: #eef2e7; display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; align-items: center; scroll-margin-top: 30px; }.waitlist .eyebrow { margin-bottom: 17px; }.waitlist h2 { font-size: 36px; line-height: 1.12; letter-spacing: -1.2px; font-weight: 500; margin: 0 0 20px; }.waitlist p { font-size: 13px; color: #7a866f; max-width: 330px; }.waitlist .staff-note { font-size: 10px; color: #8d9882; margin: 22px 0 0; }
label { display: block; font-size: 11px; font-weight: 550; margin-bottom: 7px; } label span { font-weight: 400; color: #8c9783; } input { width: 100%; background: #fff; border: 1px solid #dce4d1; border-radius: 7px; padding: 12px; font-size: 12px; color: #25372a; margin: 0 0 18px; } input::placeholder { color: #abb39f; } form .button { width: 100%; margin-top: 1px; } form .form-note { font-size: 9px; line-height: 1.6; margin: 13px 0 0; color: #8e9981; }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }.success-message, .error-message { font-size: 15px; line-height: 1.7; padding: 22px; border: 1px solid #ccd9bf; border-radius: 10px; background: #f8fbf3; }.error-message { font-size: 12px; background: #fff4f0; color: #963d35; border-color: #e9c9c0; margin-bottom: 15px; }
footer { max-width: 1220px; margin: auto; padding: 0 36px 35px; display: flex; align-items: center; gap: 28px; } footer .wordmark { font-size: 16px; } footer .mark { width: 25px; height: 25px; font-size: 15px; border-radius: 8px; } footer p, footer > span { font-size: 10px; color: #96a08a; }footer p { margin: 0; }footer > span { margin-left: auto; }
@media(max-width: 1100px) { .features { margin-inline: 36px; }.waitlist { margin-inline: 36px; padding: 45px; gap: 50px; }.hero { gap: 25px; }.art-orbit { width: 350px; height: 400px; }.orbit-two { width: 260px; height: 480px; }.floating-note { padding: 12px; font-size: 9px; } .note-top { right: -10px; top: 60px; } .note-bottom { left: -10px; bottom: 70px; } }
@media(max-width: 760px) { .site-header { padding: 22px; } nav { gap: 15px; } nav > a:first-child { display: none; } nav > a:not(.button) { font-size: 11px; }.wordmark { font-size: 18px; } .hero { grid-template-columns: 1fr; margin: 30px auto 60px; padding: 20px 25px; gap: 30px; } h1 { font-size: 56px; letter-spacing: -2.3px; }.hero-copy { max-width: 520px; }.hero-art { min-height: 535px; max-width: 430px; width: 100%; margin: auto; }.note-top { right: 0; }.note-bottom { left: 0; }.features { margin-inline: 25px; margin-bottom: 65px; padding-top: 40px; }.section-heading h2 { font-size: 27px; }.feature-grid { grid-template-columns: 1fr; margin: 35px 10px 0; gap: 30px; }.feature-number { margin-bottom: 10px; }.waitlist { grid-template-columns: 1fr; gap: 30px; padding: 35px 25px; margin: 0 20px 40px; }.waitlist h2 { font-size: 32px; } footer { padding-inline: 22px; flex-wrap: wrap; gap: 15px; } footer > span { display: none; } }
@media(max-width: 420px) { nav > a:not(.button) { display: none; }.button.small { padding: 10px 12px; gap: 10px; }.site-header { gap: 12px; }.hero h1 { font-size: 48px; }.eyebrow { font-size: 8px; letter-spacing: .9px; }.hero-art { transform: scale(.9); margin-block: -20px; }.art-orbit { width: 330px; }.orbit-two { width: 250px; }.floating-note { font-size: 8px; }.note-top { right: -12px; }.note-bottom { left: -14px; } }