@import url('/brand.css');
:root { color-scheme:light; --ink:#263950; --muted:#69778a; --paper:#faf9f6; --line:#e2e6ea; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.6 var(--font-body); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.wrap { width:min(1180px,calc(100% - 96px)); margin-inline:auto; }
.site-header { height:106px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.site-header nav { display:flex; gap:34px; font-size:13px; }
.site-header nav a,.portal-link { text-decoration:none; }
.site-header nav a:hover { color:var(--brand-blue); }
.portal-link { display:flex; gap:24px; align-items:center; border:1px solid #d5dce6; border-radius:100px; padding:11px 19px; font-size:13px; }
.hero { display:grid; grid-template-columns:1.05fr 1fr; gap:20px; align-items:center; min-height:710px; padding-top:32px; padding-bottom:62px; }
.hero-copy { padding-bottom:8px; animation:enter .6s ease both; }
.eyebrow { margin:0 0 22px; font-size:10px; font-weight:650; letter-spacing:1.7px; text-transform:uppercase; }
.hero .eyebrow { display:flex; align-items:center; gap:9px; }
.status-dot { width:6px; height:6px; border-radius:100%; background:#7e9aac; }
h1 { position:relative; margin:0; font-size:clamp(48px,5.4vw,76px); font-weight:500; line-height:1.07; letter-spacing:-3.8px; }
h1 em,h2 em { color:#6381b1; font-family:Georgia,serif; font-weight:400; }
.little-star { position:absolute; margin:6px 0 0 20px; color:#d3a954; font:normal 52px Georgia,serif; transform:rotate(-12deg); }
.hero-description { margin:28px 0; max-width:390px; font-size:15px; line-height:1.8; color:var(--muted); }
.hero-actions { display:flex; align-items:center; gap:25px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:25px; padding:16px 23px; min-height:54px; border:1px solid #3869ce; border-radius:100px; background:#3869ce; color:#fff; text-decoration:none; font-size:13px; font-weight:550; transition:background .2s; }
.button:hover { background:#2e59af; }
.text-link { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-size:13px; border-bottom:1px solid #bdc8d8; padding-block:8px; }
.hero-note { margin-top:24px; font-size:11px; color:var(--muted); }
.hero-visual { position:relative; display:grid; place-items:center; min-height:600px; background:radial-gradient(ellipse at center,#e3ecff 0%,#ecf0f955 47%,transparent 70%); animation:enter .8s .12s ease both; }
.orbit { position:absolute; border:1px solid #dbe3ee; width:510px; height:510px; border-radius:50%; pointer-events:none; }
.orbit-two { width:410px; height:410px; border-style:dashed; }
.sketch-star { position:absolute; font-family:Georgia,serif; color:#94aac5; font-size:43px; }
.star-one { top:20px; left:45px; }.star-two { right:15px; bottom:140px; color:#d5af5c; }
.phone-preview { position:relative; z-index:1; width:292px; padding:10px 16px 14px; background:#f6f8fc; border:5px solid #fff; border-radius:40px; box-shadow:0 28px 70px #34558420,0 0 0 1px #dee5ee; transform:rotate(5deg); }
.phone-status { display:flex; align-items:center; justify-content:space-between; font-size:10px; padding:2px 5px 17px; font-weight:600; }
.phone-status i { width:68px; height:17px; border-radius:20px; background:#243244; }
.preview-header { display:flex; align-items:center; gap:8px; justify-content:space-between; margin:6px 0 17px; }
.preview-header small { font-size:8px; color:#6f8099; }
.preview-header h2 { font-size:12px; margin:2px 0 0; letter-spacing:-.3px; font-weight:650; }.preview-header h2 span { color:#d6aa4d; }
.preview-avatar { width:29px; height:29px; border-radius:50%; background:#e8edf5; display:grid; place-items:center; font-size:11px; }
.preview-greeting { position:relative; overflow:hidden; background:#e6edfc; padding:16px; border-radius:18px; }
.preview-greeting p { margin:0 0 7px; font-size:7px; letter-spacing:1px; color:#5575a9; }
.preview-greeting h3 { position:relative; z-index:1; font-size:19px; line-height:1.3; font-weight:500; margin:0 0 9px; letter-spacing:-.5px; }
.preview-greeting>span { font-size:8px; color:#667b9d; }
.greeting-sun { position:absolute; width:77px; height:77px; right:-22px; top:27px; background:#f3db99; border:10px solid #efe6ce; border-radius:50%; }
.preview-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:12px 0 19px; }.preview-stats>div { display:grid; padding:10px; background:white; border:1px solid #e7ebf1; border-radius:14px; }.preview-stats strong { font-size:18px; font-weight:600; }.preview-stats small { font-size:10px; font-weight:400; }.preview-stats>div>span:last-child { font-size:8px; color:#718096; }
.stat-icon { font-size:19px; line-height:1.1; margin-bottom:5px; }.blue { color:#5b8bb8; }.lilac { color:#8b81c3; }.peach { color:#c3a063; }
.preview-section-title { display:flex; justify-content:space-between; font-size:9px; margin-bottom:9px; }.preview-section-title span { color:#7a879c; }
.preview-rhythm { background:#fff; border:1px solid #e6eaf2; border-radius:14px; padding:12px 10px 8px; }.preview-rhythm>div { display:flex; align-items:center; gap:9px; margin-bottom:9px; font-size:12px; color:#8680ad; }.rhythm-track { position:relative; flex:1; height:13px; border-radius:4px; background:#f0eef9; }.rhythm-track i { position:absolute; height:9px; top:2px; background:#a49ad5; border-radius:3px; }.feed-track { background:#eef4fa; }.feed-track i { width:6px; height:6px; top:3px; background:#6d9ed1; border-radius:50%; }.preview-rhythm footer { display:flex; justify-content:space-between; font-size:7px; padding-left:22px; color:#7a8798; }
.preview-entry { display:flex; align-items:center; gap:8px; padding:14px 0; }.entry-symbol { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:#e9eff9; color:#698bb9; }.preview-entry div { display:grid; gap:3px; }.preview-entry strong { font-size:9px; }.preview-entry div span { font-size:8px; color:#8390a0; }.preview-entry time { margin-left:auto; font-size:8px; color:#8390a0; }
.preview-nav { display:flex; justify-content:space-around; padding:8px 2px 3px; border-top:1px solid #e6eaf1; }.preview-nav>span { display:grid; text-align:center; font-size:17px; color:#8c97a9; }.preview-nav small { font-size:7px; }.preview-nav .selected { color:#4774cf; }
.floating-note { position:absolute; z-index:2; display:flex; align-items:center; gap:12px; border:1px solid #e6eaf0; background:#fff; border-radius:15px; padding:15px 18px; box-shadow:0 12px 30px #344a6710; }.floating-note strong { display:block; font-size:11px; font-weight:600; }.floating-note div>span { display:block; font-size:9px; color:#7a8799; }.note-sleep { top:105px; right:-12px; transform:rotate(3deg); }.note-icon { display:grid; place-items:center; width:32px; height:32px; background:#f5efdc; border-radius:50%; color:#b9974d; font-size:25px; }.note-together { bottom:68px; left:-5px; transform:rotate(-4deg); }.mini-avatars { display:flex; }.mini-avatars span { display:grid!important; place-items:center; width:27px; height:27px; border-radius:50%; border:2px solid white; background:#e9ebfa; color:#6676a3!important; font-size:9px!important; }.mini-avatars span+span { margin-left:-7px; background:#f2e7d8; color:#8b795f!important; }.preview-caption { position:absolute; bottom:-2px; font-size:9px; color:#7e8b9d; }
.quiet-strip { border-block:1px solid var(--line); padding:23px 0; }.quiet-strip .wrap { display:flex; justify-content:space-between; align-items:center; gap:20px; }.quiet-strip .wrap>span { font-size:12px; color:var(--muted); }.quiet-strip .wrap>div { display:flex; align-items:center; gap:25px; font-size:13px; }.quiet-strip i { color:#b4becb; font-style:normal; }
.section { padding-block:100px; }.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:25px; margin-bottom:35px; }h2 { margin:0; font-size:40px; line-height:1.2; font-weight:500; letter-spacing:-1.5px; }.section-heading p:last-child { font-size:13px; color:var(--muted); line-height:1.8; }.section-heading .eyebrow { color:var(--ink); font-size:10px; margin-bottom:16px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.feature { min-width:0; padding:30px; border-radius:22px; border:1px solid #243b5010; }.feature-blue { background:#edf2fb; }.feature-cream { background:#f4efe4; }.feature-sage { background:#ebf0e9; }.feature-index { font-size:8px; letter-spacing:1.4px; color:#61748a; }.feature h3 { font-size:26px; font-weight:500; line-height:1.25; letter-spacing:-.8px; margin:21px 0 13px; }.feature>p { color:#667586; font-size:12px; line-height:1.8; min-height:86px; margin:0; }.amount-demo { display:flex; gap:8px; margin:26px 0 22px; }.amount-demo span { flex:1; padding:10px 2px; text-align:center; background:#ffffff80; border:1px solid #dbe3f0; border-radius:10px; font-size:12px; }.amount-demo .chosen { color:#fff; background:#6a8ccb; border-color:#6a8ccb; }.feature-bottom { display:flex; align-items:center; gap:8px; font-size:9px; color:#6c7b89; }.small-circle { display:grid; place-items:center; flex:0 0 24px; height:24px; border:1px solid #aab8c65c; border-radius:50%; font-size:13px; }.mini-timeline { position:relative; display:grid; gap:16px; margin-top:24px; }.mini-timeline::before { content:''; position:absolute; top:8px; bottom:8px; left:4px; width:1px; background:#d7d6cf; }.mini-timeline>div { display:flex; align-items:center; gap:13px; font-size:10px; }.mini-timeline i { width:9px; height:9px; border-radius:50%; z-index:1; }.blue-dot { background:#84a4c9; }.lavender-dot { background:#ada2c6; }.gold-dot { background:#cdb073; }.mini-timeline time { color:#8b8d8f; font-size:9px; }.mini-timeline strong { font-weight:500; }.milestone-demo { display:flex; align-items:center; gap:10px; margin:25px 0 22px; padding:14px 10px; border:1px solid #dce3d9; border-radius:12px; background:#ffffff70; }.milestone-demo>span { font-size:25px; color:#89997c; }.milestone-demo small { display:block; font-size:6px; color:#7f8d7f; letter-spacing:.6px; }.milestone-demo strong { font-size:10px; font-weight:500; }
.together-section { display:grid; grid-template-columns:1fr 1fr; gap:85px; align-items:center; padding:25px 0 95px; }.together-art { position:relative; display:grid; place-items:center; height:390px; background:radial-gradient(ellipse,#eaeef8,transparent 70%); }.care-circle { position:relative; display:grid; place-items:center; width:280px; height:280px; border:1px dashed #becbdc; border-radius:50%; }.care-center { font-size:26px; text-align:center; line-height:1.35; letter-spacing:-1px; }.care-center em { font-family:Georgia,serif; color:#6d85ab; }.person { position:absolute; display:grid; place-items:center; width:67px; height:67px; border:5px solid var(--paper); border-radius:50%; font-size:12px; background:#e2e9f7; color:#58729a; }.person-one { top:10px; left:-10px; }.person-two { top:35px; right:-23px; background:#e8dfd1; color:#8b7962; }.person-three { bottom:-18px; left:65px; background:#e0e7d9; color:#78836c; }.access-example { position:absolute; bottom:0; display:flex; align-items:center; gap:13px; padding:16px 22px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 30px #364b6810; }.access-example strong { display:block; font-size:12px; font-weight:550; }.access-example div>span { color:#7b8898; font-size:10px; }.access-key { color:#729577; font-size:25px; }.access-dot { width:6px; height:6px; border-radius:50%; background:#8ca688; }.together-copy>p:not(.eyebrow) { color:var(--muted); font-size:14px; margin-block:23px; line-height:1.8; }.together-copy ul { padding:0; list-style:none; display:grid; gap:12px; font-size:12px; margin:0 0 23px; }.together-copy li::before { content:'✓'; display:inline-block; width:23px; color:#779684; }
.night-section { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:45px 60px; border-radius:24px; background:#172436; color:#ecf0f7; overflow:hidden; }.night-section h2 { font-size:32px; }.night-section h2 em { color:#b8c8e2; }.night-section .eyebrow { color:#9facbe; }.night-section p:last-child { color:#a8b5c7; font-size:12px; line-height:1.8; }.night-art { position:relative; display:grid; place-items:center; min-width:190px; height:180px; }.night-moon { width:90px; height:90px; border-radius:50%; background:#e3d5a7; box-shadow:0 0 50px #efdfb011; }.night-moon::after { content:''; display:block; width:78px; height:78px; background:#172436; border-radius:50%; transform:translate(24px,-12px); }.night-art>span { position:absolute; top:5px; right:0; font-size:24px; color:#9badc6; }.night-art small { font:italic 14px Georgia,serif; color:#b6c4d8; }
.faq-section { display:grid; grid-template-columns:1fr 1.3fr; gap:70px; }.faq-section>div>p:last-child { color:var(--muted); font-size:13px; }.faq-list details { border-bottom:1px solid #dfe3e8; }.faq-list summary { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:21px 0; font-size:14px; cursor:pointer; list-style:none; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary span { color:#8392a6; font-size:21px; font-weight:400; }.faq-list details[open] summary span { transform:rotate(45deg); }.faq-list details p { font-size:13px; color:var(--muted); padding-right:25px; margin:0 0 24px; line-height:1.85; }
.closing { position:relative; padding:55px 20px; text-align:center; background:#edf1f9; border-radius:24px; }.closing h2 { font-size:48px; margin-bottom:28px; }.closing .eyebrow { margin-bottom:15px; }.closing>p:last-child { color:var(--muted); font-size:12px; }.closing>p:last-child a { text-underline-offset:4px; }.closing-star { position:absolute; left:13%; top:65px; color:#c3aa6f; font:50px Georgia,serif; transform:rotate(12deg); }.site-footer { min-height:145px; display:flex; justify-content:space-between; align-items:center; gap:25px; font-size:11px; color:var(--muted); }.site-footer .brand { font-size:18px; }.site-footer>a:last-child { text-decoration:none; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:5; background:white; padding:12px 20px; border-radius:10px; }.skip-link:focus { top:10px; }:focus-visible { outline:3px solid #7596d4; outline-offset:5px; }
@keyframes enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media(min-width:1500px) { .hero { min-height:760px; } }
@media(max-width:1100px) { .wrap { width:calc(100% - 64px); }.hero-actions { gap:16px; }.hero-actions .button { padding-inline:17px; gap:15px; }.hero { gap:0; }.orbit { width:390px; height:390px; }.orbit-two { width:310px; height:310px; }.note-sleep { right:-6px; }.note-together { left:-5px; }.feature { padding:24px; }.together-section { gap:45px; } }
@media(max-width:800px) { .wrap { width:calc(100% - 40px); }.site-header { height:82px; }.site-header nav { display:none; }.hero { grid-template-columns:1fr; padding-top:35px; padding-bottom:40px; gap:30px; }.hero-copy { max-width:520px; margin:auto; text-align:center; }.hero .eyebrow { justify-content:center; font-size:9px; }.hero h1 { font-size:62px; letter-spacing:-3px; }.hero-description { margin:23px auto; max-width:350px; font-size:14px; }.hero-actions { justify-content:center; }.hero-note { font-size:10px; }.hero-visual { min-height:595px; width:min(100%,510px); margin:auto; }.note-sleep { right:0; }.note-together { left:0; }.quiet-strip .wrap { flex-direction:column; gap:12px; }.quiet-strip .wrap>div { font-size:11px; gap:18px; }.section { padding-block:64px; }.section-heading { display:block; }.section-heading>p { margin-top:20px; }.feature-grid { grid-template-columns:1fr; gap:14px; }.feature { padding:27px; }.feature>p { min-height:0; max-width:420px; }.feature h3 br { display:none; }.amount-demo { max-width:320px; }.mini-timeline { margin-bottom:10px; }.milestone-demo { max-width:350px; }.together-section { grid-template-columns:1fr; gap:35px; padding-bottom:64px; }.together-art { order:2; height:355px; }.together-copy { max-width:480px; }.night-section { padding:32px 26px; gap:10px; }.night-section h2 { font-size:27px; }.night-art { min-width:110px; }.night-art small { display:none; }.night-moon { width:65px; height:65px; }.night-moon::after { width:58px; height:58px; transform:translate(17px,-10px); }.faq-section { grid-template-columns:1fr; gap:20px; }.closing { padding-block:45px; }.closing h2 { font-size:40px; }.closing-star { font-size:30px; left:8%; top:80px; }.site-footer { flex-wrap:wrap; gap:20px; padding-block:30px; }.site-footer>span { order:3; width:100%; } }
@media(max-width:420px) { .site-header .brand { font-size:19px; gap:7px; }.portal-link { padding:9px 12px; gap:10px; font-size:11px; }.hero { padding-top:25px; }.hero h1 { font-size:53px; letter-spacing:-2.6px; }.little-star { font-size:32px; margin-left:10px; }.hero-actions { flex-direction:column; gap:10px; }.hero-description { max-width:310px; }.hero-visual { min-height:555px; }.phone-preview { width:270px; padding-inline:13px; }.orbit { width:100%; height:auto; aspect-ratio:1; }.orbit-two { width:85%; }.floating-note { padding:12px; gap:8px; }.floating-note strong { font-size:10px; }.floating-note div>span { font-size:8px; }.note-sleep { top:105px; right:-3px; }.note-together { bottom:35px; left:-3px; }.star-one { left:3px; }.quiet-strip .wrap>div { gap:10px; font-size:10px; }h2 { font-size:31px; letter-spacing:-1px; }.feature h3 { font-size:25px; }.night-section { display:block; position:relative; }.night-section>div:first-child { position:relative; z-index:1; }.night-art { position:absolute; right:-20px; top:0; opacity:.13; width:150px; }.closing h2 { font-size:35px; }.closing-star { left:4%; top:90px; font-size:23px; } }
@media(max-width:420px) { .hero h1 { font-size:clamp(39px,11.7vw,47px); letter-spacing:-2px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }* { animation:none!important; transition:none!important; } }