@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink: #11221f; --paper: #f5f2eb; --cream: #fbf9f3; --lime: #d9f26c; --coral: #ef806c; --blue: #7fa8df; --line: rgba(17,34,31,.18); --muted: #5a6660; --display: 'Space Grotesk', sans-serif; --body: 'DM Sans', sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); font-size: 16px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
.page-shell { overflow: hidden; }
.site-header, main > section, .site-footer { max-width: 1240px; margin: auto; padding-left: 40px; padding-right: 40px; }
.site-header { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; font: 600 18px var(--display); letter-spacing: -.04em; }
.brand-dash { color: var(--coral); }
.brand-mark { width: 27px; height: 27px; display: flex; align-items: end; gap: 3px; padding: 5px; background: var(--ink); border-radius: 8px 8px 8px 2px; transform: rotate(-6deg); }
.brand-mark span { flex: 1; background: var(--lime); border-radius: 1px; }.brand-mark span:nth-child(1) { height: 35%; }.brand-mark span:nth-child(2) { height: 62%; }.brand-mark span:nth-child(3) { height: 88%; }
.site-nav { display: flex; gap: 30px; margin-left: 9%; color: #4d5b55; font-size: 14px; font-weight: 600; }.site-nav a:hover, .text-link:hover { color: var(--coral); }
.header-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 17px; border: 1px solid var(--ink); font-weight: 700; font-size: 13px; transition: transform .2s, background .2s, color .2s; }.header-cta:hover, .button:hover { transform: translateY(-2px); }.header-cta { border-radius: 3px; }.header-cta span, .button span, .text-link span { font-size: 17px; line-height: 1; }
.hero { min-height: 660px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 70px; padding-top: 72px; padding-bottom: 77px; }.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 21px; color: #69736d; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 700; }.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }.hero h1, h2, h3, p { margin-top: 0; }.hero h1 { max-width: 600px; margin-bottom: 23px; font: 600 clamp(50px, 6.2vw, 88px)/.94 var(--display); letter-spacing: -.075em; }.hero h1 em, h2 em { color: var(--coral); font-style: normal; }.hero-description { max-width: 455px; margin-bottom: 31px; color: #59655f; font-size: 17px; line-height: 1.55; }.hero-actions { display: flex; align-items: center; gap: 25px; }.button-primary { color: var(--cream); background: var(--ink); border-color: var(--ink); border-radius: 3px; }.button-primary:hover { background: var(--coral); border-color: var(--coral); }.text-link { font-weight: 700; font-size: 14px; display: inline-flex; gap: 10px; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: 2px; }.hero-proof { display: flex; gap: 21px; margin-top: 66px; padding-top: 18px; border-top: 1px solid var(--line); color: #65716b; font-size: 11px; }.hero-proof strong { margin-right: 5px; color: var(--coral); font-size: 10px; }
.hero-visual { position: relative; min-height: 435px; display: flex; align-items: center; justify-content: center; }.hero-visual::before { content: ''; position: absolute; width: 390px; height: 390px; border-radius: 50%; background: var(--lime); opacity: .78; }.visual-orbit { position: absolute; border: 1px solid rgba(17,34,31,.18); border-radius: 50%; }.orbit-one { width: 470px; height: 250px; transform: rotate(-22deg); }.orbit-two { width: 470px; height: 250px; transform: rotate(27deg); }
.workflow-window { position: relative; width: min(100%, 450px); background: var(--cream); box-shadow: 18px 21px 0 rgba(17,34,31,.12); border: 1px solid var(--ink); z-index: 1; transform: rotate(-3deg); }.window-topbar { height: 35px; padding: 0 13px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); color: #74817a; font-size: 9px; letter-spacing: .03em; }.window-dots { display: flex; gap: 4px; }.window-dots i { display: block; width: 6px; height: 6px; background: #d5d8d0; border-radius: 50%; }.window-dots i:first-child { background: var(--coral); }.window-status { margin-left: auto; color: #39815e; }.window-body { padding: 27px 25px 20px; }.window-heading { display: flex; justify-content: space-between; }.micro-label { color: var(--coral); font-size: 9px; font-weight: 700; letter-spacing: .13em; }.window-heading h2 { margin: 6px 0 34px; font: 600 22px var(--display); letter-spacing: -.06em; }.more { color: #94a09a; letter-spacing: 2px; }.flow-track { display: flex; flex-direction: column; }.flow-step { display: flex; align-items: center; gap: 13px; min-height: 50px; }.step-icon { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 27px; border: 1px solid #bec8be; border-radius: 50%; color: #87938b; }.flow-step.done .step-icon { color: var(--ink); background: var(--lime); border-color: var(--ink); }.flow-step.current .step-icon { color: var(--cream); background: var(--coral); border-color: var(--coral); }.flow-step b { display: block; font-size: 12px; }.flow-step small { color: #8a948d; font-size: 10px; }.flow-line { width: 1px; height: 16px; margin-left: 13px; background: #c9d0c7; }.window-footer { display: flex; align-items: center; gap: 8px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); color: #7b877f; font-size: 9px; }.avatar { width: 21px; height: 21px; display: inline-grid; place-items: center; border: 2px solid var(--cream); border-radius: 50%; color: var(--ink); font-size: 9px; font-weight: 700; margin-right: -6px; }.avatar-coral { background: var(--coral); }.avatar-blue { background: var(--blue); }.avatar-lime { background: var(--lime); }.footer-time { margin-left: auto; color: var(--ink); font-weight: 700; }.floating-note { position: absolute; z-index: 2; display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; align-items: center; padding: 11px 14px 11px 11px; background: var(--ink); color: var(--cream); box-shadow: 5px 6px 0 rgba(17,34,31,.16); font-size: 11px; }.floating-note span:first-child { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; background: var(--coral); color: var(--ink); font-size: 17px; }.floating-note b { font-size: 11px; }.floating-note small { color: #b9c5ba; font-size: 9px; }.note-top { top: 32px; right: -2px; transform: rotate(5deg); }.note-bottom { bottom: 22px; left: 0; transform: rotate(-7deg); }.note-bottom .pulse { position: relative; background: var(--lime); }.note-bottom .pulse::after { content: ''; position: absolute; width: 8px; height: 8px; border: 1px solid var(--lime); border-radius: 50%; animation: ping 1.8s infinite; }.note-bottom b { font: 700 16px var(--display); }
.marquee { max-width: none!important; padding: 0!important; overflow: hidden; background: var(--coral); color: var(--ink); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }.marquee-inner { max-width: 1240px; margin: auto; padding: 15px 40px; display: flex; justify-content: space-between; align-items: center; gap: 25px; font: 700 12px var(--display); letter-spacing: .16em; white-space: nowrap; }.marquee i { font-style: normal; font-size: 18px; }
.story-section { padding-top: 120px; padding-bottom: 123px; }.section-intro { display: grid; grid-template-columns: 1fr 2.2fr; gap: 40px; margin-bottom: 52px; }.section-intro h2, .how-section h2, .launch-section h2 { max-width: 720px; margin: 0; font: 600 clamp(32px, 4.6vw, 57px)/1.02 var(--display); letter-spacing: -.07em; }.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.benefit-card { min-height: 340px; display: flex; flex-direction: column; padding: 27px 27px 25px; border: 1px solid var(--ink); }.benefit-dark { background: var(--ink); color: var(--cream); }.benefit-lime { background: var(--lime); }.benefit-paper { background: #e8e2d7; }.card-number { font-size: 11px; font-weight: 700; }.card-icon { margin: 27px 0 21px; font: 32px var(--display); }.benefit-card h3 { max-width: 250px; margin-bottom: 12px; font: 600 23px/1.04 var(--display); letter-spacing: -.06em; }.benefit-card p { max-width: 270px; margin-bottom: 25px; color: #718078; font-size: 13px; line-height: 1.55; }.benefit-dark p { color: #b5c1b8; }.benefit-card a { margin-top: auto; font-size: 12px; font-weight: 700; }.benefit-card a span { margin-left: 9px; font-size: 16px; }.benefit-card a:hover { color: var(--coral); }
.clarity-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; padding-top: 102px; padding-bottom: 106px; border-top: 1px solid var(--line); }.clarity-heading h2 { max-width: 500px; margin: 0; font: 600 clamp(32px, 4.2vw, 53px)/1.03 var(--display); letter-spacing: -.07em; }.clarity-content { max-width: 550px; }.clarity-content > p { color: var(--muted); font-size: 16px; line-height: 1.6; }.clarity-content > p + p { margin-top: 17px; }.clarity-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 35px; padding-top: 19px; border-top: 1px solid var(--line); }.clarity-facts div { display: flex; flex-direction: column; gap: 7px; }.clarity-facts strong { font: 600 14px var(--display); letter-spacing: -.03em; }.clarity-facts span { color: #77827b; font-size: 11px; line-height: 1.35; }
.how-section { max-width: none!important; background: var(--ink); color: var(--cream); display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding-top: 112px; padding-bottom: 112px; }.how-copy .eyebrow { color: #a8b6a9; }.how-copy h2 { max-width: 540px; margin-bottom: 23px; }.how-copy p:not(.eyebrow) { max-width: 415px; color: #a8b6a9; font-size: 16px; }.text-link-light { margin-top: 27px; color: var(--lime); }.principles { padding-top: 13px; }.principles > div { display: grid; grid-template-columns: 45px 1fr; gap: 6px 15px; padding: 23px 0; border-top: 1px solid rgba(245,242,235,.2); }.principles > div:last-child { border-bottom: 1px solid rgba(245,242,235,.2); }.principles span { grid-row: span 2; color: var(--coral); font-size: 11px; font-weight: 700; }.principles h3 { margin: 0; font: 600 21px var(--display); letter-spacing: -.04em; }.principles p { margin: 0; color: #a8b6a9; font-size: 13px; }
.launch-section { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: end; padding-top: 120px; padding-bottom: 120px; }.launch-copy h2 { max-width: 500px; margin-bottom: 20px; }.launch-copy > p:last-child { max-width: 420px; color: var(--muted); font-size: 16px; }.signup-form { padding-bottom: 7px; }.signup-form label { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; }.input-row { display: flex; border-bottom: 1px solid var(--ink); }.input-row input { min-width: 0; flex: 1; padding: 14px 0; border: 0; outline: none; color: var(--ink); background: transparent; font: 16px var(--body); }.input-row input::placeholder { color: #929b94; }.button-dark { color: var(--cream); background: var(--ink); border-color: var(--ink); border-radius: 3px; white-space: nowrap; }.button-dark:hover { background: var(--coral); border-color: var(--coral); }.form-note { min-height: 22px; margin: 12px 0 0; color: #7b877e; font-size: 11px; }.form-note.success { color: #39815e; }.form-note.error { color: #c35d4c; }
.faq-section { padding-top: 0; padding-bottom: 118px; }.faq-section > h2 { max-width: 620px; margin: 0 0 38px; font: 600 clamp(32px, 4.2vw, 53px)/1.03 var(--display); letter-spacing: -.07em; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font: 600 18px var(--display); letter-spacing: -.04em; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { content: '+'; color: var(--coral); font-size: 24px; font-weight: 400; }.faq-list details[open] summary::after { content: '−'; }.faq-list details p { max-width: 650px; margin: -4px 45px 21px 0; color: var(--muted); font-size: 14px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; min-height: 100px; border-top: 1px solid var(--line); color: #65716b; font-size: 12px; }.site-footer .brand { color: var(--ink); font-size: 16px; }.site-footer p { margin: 0; }.footer-copy { color: #929b94; }
@keyframes ping { 0% { opacity: .8; transform: scale(.7); } 100% { opacity: 0; transform: scale(2.5); } }
@media (max-width: 900px) { .site-nav { margin-left: 0; gap: 16px; }.hero { grid-template-columns: 1fr; gap: 45px; padding-top: 65px; }.hero-copy { max-width: 690px; }.hero-visual { min-height: 400px; }.story-section { padding-top: 85px; padding-bottom: 85px; }.section-intro { grid-template-columns: 1fr 2fr; }.clarity-section { gap: 45px; }.how-section { gap: 45px; padding-top: 85px; padding-bottom: 85px; }.launch-section { gap: 45px; padding-top: 85px; padding-bottom: 85px; } }
@media (max-width: 640px) { .site-header, main > section, .site-footer { padding-left: 20px; padding-right: 20px; }.site-header { height: 72px; }.brand { font-size: 16px; }.site-nav { display: none; }.header-cta { padding: 10px 11px; font-size: 11px; }.hero { min-height: 0; padding-top: 60px; padding-bottom: 62px; }.hero h1 { font-size: clamp(47px, 15vw, 73px); }.hero-description { font-size: 16px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 21px; }.hero-proof { gap: 10px; justify-content: space-between; }.hero-proof span { font-size: 10px; }.hero-visual { min-height: 345px; margin: 0 -12px; }.hero-visual::before { width: 285px; height: 285px; }.visual-orbit { width: 340px; height: 190px; }.workflow-window { width: calc(100% - 26px); }.window-body { padding: 19px 17px 16px; }.window-heading h2 { margin-bottom: 23px; font-size: 19px; }.floating-note { transform: scale(.8); }.note-top { right: -20px; top: 18px; }.note-bottom { left: -13px; bottom: 2px; }.marquee-inner { padding: 14px 20px; gap: 17px; justify-content: flex-start; overflow: hidden; }.marquee-inner span:nth-of-type(n+4), .marquee-inner i:nth-of-type(n+4) { display: none; }.story-section { padding-top: 72px; padding-bottom: 72px; }.section-intro, .benefit-grid, .clarity-section, .how-section, .launch-section { grid-template-columns: 1fr; }.section-intro { gap: 20px; margin-bottom: 31px; }.benefit-grid { gap: 11px; }.benefit-card { min-height: 290px; padding: 23px; }.benefit-card h3 { font-size: 22px; }.clarity-section { gap: 35px; padding-top: 72px; padding-bottom: 72px; }.clarity-facts { grid-template-columns: 1fr; gap: 17px; }.how-section { gap: 51px; padding-top: 72px; padding-bottom: 72px; }.launch-section { gap: 40px; padding-top: 72px; padding-bottom: 78px; }.input-row { display: block; border: 0; }.input-row input { width: 100%; border-bottom: 1px solid var(--ink); }.button-dark { width: 100%; margin-top: 12px; }.faq-section { padding-bottom: 75px; }.faq-list summary { font-size: 16px; }.site-footer { align-items: flex-start; flex-direction: column; gap: 17px; padding-top: 27px; padding-bottom: 27px; }.site-footer p { order: 3; }.footer-copy { margin-left: auto; margin-top: -37px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms!important; transition-duration: .01ms!important; } }