:root { --ink:#242320; --muted:#6e6b64; --paper:#f6f5ef; --white:#fffefa; --green:#c2dc9d; --lilac:#e6ddf5; --peach:#f8d5c5; --mint:#d8e9d8; --coral:#eb9178; --yellow:#f2c553; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.site-header { max-width:1240px; margin:auto; padding:25px 44px; display:flex; align-items:center; justify-content:space-between; }
.wordmark { display:inline-flex; align-items:center; gap:10px; font:800 23px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:-1.2px; }
.wordmark-icon { display:inline-grid; width:30px; height:30px; place-items:center; border-radius:50% 50% 42% 50%; color:#fff; background:#37352f; font:800 18px/1 ui-sans-serif,system-ui,sans-serif; }
nav { display:flex; align-items:center; gap:34px; font-size:14px; font-weight:600; }
nav a { transition:opacity .2s ease; } nav a:hover,.text-link:hover { opacity:.68; }
.nav-cta { padding:11px 17px; border:1px solid #d9d7cf; border-radius:999px; }
.nav-cta span { margin-left:6px; }
.section-wrap { max-width:1240px; margin:auto; padding-left:44px; padding-right:44px; }
.hero { min-height:690px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:18px; padding-top:55px; padding-bottom:70px; overflow:hidden; }
.hero-copy { max-width:540px; position:relative; z-index:2; padding-bottom:18px; }
.eyebrow { margin:0 0 18px; color:#77736b; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.sparkle { color:#d88972; font-size:16px; margin-right:7px; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:ui-sans-serif,system-ui,-apple-system,sans-serif; letter-spacing:-.06em; }
h1 { max-width:570px; margin:0 0 21px; font-size:clamp(52px,6.5vw,82px); line-height:1.04; font-weight:600; }
h1 em,h2 em { color:#737e52; font-weight:500; }
.hero-intro { max-width:455px; margin:0 0 26px; color:#625f58; font-size:18px; line-height:1.7; }
.hero-actions { display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:15px 22px; border-radius:999px; font-size:14px; font-weight:700; transition:transform .2s ease,box-shadow .2s ease; }
.button:hover { transform:translateY(-2px); box-shadow:0 9px 22px #25241f20; }
.button-dark { color:white; background:#292823; }
.quiet-note { margin-left:4px; color:#858177; font-size:12px; }
.trust-row { display:flex; gap:19px; flex-wrap:wrap; margin-top:37px; color:#77736b; font-size:12px; }
.trust-row b { color:#71834e; margin-right:5px; font-size:14px; }
.hero-art { min-height:570px; position:relative; display:grid; place-items:center; }
.sunburst { position:absolute; width:430px; height:430px; border-radius:50%; background:#e9e7dc; top:65px; left:50%; transform:translateX(-50%); }
.orbit { position:absolute; width:520px; height:520px; border:1px solid #d9d6ca; border-radius:50%; top:20px; left:50%; transform:translateX(-50%); }
.orbit-two { width:610px; height:610px; top:-25px; border-style:dashed; opacity:.55; }
.phone { position:relative; z-index:1; width:266px; height:525px; padding:13px 17px 16px; border:8px solid #25241f; border-radius:38px; background:#fffefa; box-shadow:0 30px 70px #28251e2a; transform:rotate(3deg); }
.phone-top { display:flex; justify-content:space-between; padding:1px 6px 10px; font-size:9px; font-weight:700; }
.app-greeting { display:flex; justify-content:space-between; align-items:center; margin:5px 2px 25px; }
.mini-brand { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800; letter-spacing:-.5px; }
.mini-brand .wordmark-icon { width:21px; height:21px; font-size:12px; }
.avatar { display:grid; width:26px; height:26px; place-items:center; border-radius:50%; color:#53513f; background:#e7ead9; font-size:15px; }
.phone-kicker { margin:0 0 6px; font-size:8px; font-weight:700; letter-spacing:.1em; color:#918b7b; }
.phone h2 { margin:0 0 17px; font-size:23px; line-height:1.1; font-weight:700; letter-spacing:-1.2px; }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.choice { min-height:88px; border-radius:13px; padding:10px; display:flex; flex-direction:column; }
.choice span { font-size:18px; line-height:1.1; }
.choice strong { margin-top:5px; font-size:11px; }
.choice small { color:#77736b; font-size:8px; }
.choice-lilac { background:var(--lilac); } .choice-peach { background:var(--peach); }
.idea-card { margin-top:14px; overflow:hidden; border-radius:14px; background:#f2f0e8; }
.idea-image { height:94px; position:relative; display:grid; place-items:center; overflow:hidden; background:#d6e0bd; color:#73814b; font-size:47px; }
.idea-image:before,.idea-image:after { content:''; position:absolute; width:94px; height:94px; border:1px solid #83925c; border-radius:50%; opacity:.6; }
.idea-image:after { width:140px; height:140px; }
.idea-image i { position:absolute; top:9px; right:38px; font-style:normal; font-size:18px; }
.idea-copy { padding:10px 12px 12px; display:flex; flex-direction:column; }
.idea-copy small { font-size:7px; font-weight:700; letter-spacing:.08em; color:#7d8067; }
.idea-copy strong { margin:4px 0; font-size:12px; }
.idea-copy span { color:#77736b; font-size:8px; line-height:1.45; }
.phone-bottom { position:absolute; bottom:11px; left:21px; right:21px; display:flex; justify-content:space-between; border-top:1px solid #e8e6dd; padding:9px 5px 0; color:#8c897e; font-size:13px; }
.floating-note { position:absolute; z-index:2; display:flex; align-items:center; gap:10px; padding:12px 15px; border-radius:17px; background:#fffefa; box-shadow:0 10px 35px #24232018; }
.note-top { top:112px; left:5px; transform:rotate(-4deg); }.note-bottom { right:-2px; bottom:103px; transform:rotate(3deg); }
.note-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:12px; font-size:18px; }.note-icon.yellow { background:#fff0bd; color:#a27b17; }.note-icon.coral { background:#fce0d6; color:#bd674e; }
.floating-note strong,.floating-note small { display:block; }.floating-note strong { font-size:11px; }.floating-note small { color:#858177; font-size:9px; }
.little-flower { position:absolute; color:#d58471; font-size:34px; }.flower-one { right:30px; top:59px; }.flower-two { left:39px; bottom:58px; color:#84965d; font-size:25px; }
.how { padding-top:78px; padding-bottom:100px; }
.section-heading { text-align:center; }
.section-heading .eyebrow { margin-bottom:14px; }.section-heading h2 { margin:0; font-size:clamp(42px,5vw,60px); line-height:1.12; font-weight:600; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:38px; max-width:940px; margin:68px auto 0; }
.step { position:relative; padding:5px 20px; text-align:center; }
.step-number { position:absolute; top:0; left:10px; color:#aaa69a; font:600 11px ui-sans-serif,system-ui,sans-serif; }
.step-icon { display:grid; width:64px; height:64px; margin:0 auto 18px; place-items:center; border-radius:23px; font-size:24px; }
.step-icon.lilac { background:var(--lilac); }.step-icon.peach { background:var(--peach); }.step-icon.mint { background:var(--mint); }
.step h3 { margin:0 0 8px; font:700 17px ui-sans-serif,system-ui,sans-serif; letter-spacing:-.04em; }
.step p { max-width:235px; margin:0 auto; color:#77736b; font-size:14px; }
.feature-band { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:455px; gap:55px; margin:0 auto 95px; padding-top:60px; padding-bottom:60px; border-radius:28px; background:#e9eadf; }
.feature-copy { max-width:480px; padding:0 0 0 35px; }.feature-copy .eyebrow { margin-bottom:16px; }.feature-copy h2 { margin:0 0 18px; font-size:clamp(39px,4.5vw,56px); line-height:1.09; font-weight:600; }.feature-copy>p:not(.eyebrow) { max-width:430px; margin-bottom:19px; color:#69675e; font-size:15px; line-height:1.75; }
.text-link { display:inline-flex; align-items:center; gap:12px; font-weight:700; font-size:14px; }.text-link span { font-size:18px; }
.feature-stack { position:relative; min-height:310px; display:flex; flex-direction:column; justify-content:center; gap:11px; padding:20px 45px 20px 0; }
.feature-card { display:flex; align-items:center; gap:15px; width:min(100%,350px); padding:14px 17px; border-radius:17px; background:#fffefa; box-shadow:0 8px 20px #25241f0b; }.card-two { margin-left:35px; }.card-three { margin-left:5px; }
.feature-symbol { display:grid; flex:0 0 43px; width:43px; height:43px; place-items:center; border-radius:15px; background:#f4e4b9; color:#76633b; font-size:19px; }.card-two .feature-symbol { background:#e2e9d3; }.card-three .feature-symbol { background:#f5dcd1; }
.feature-card strong { display:block; font:700 13px ui-sans-serif,system-ui,sans-serif; }.feature-card p { margin:3px 0 0; color:#858177; font-size:11px; }
.hand-drawn { position:absolute; right:3px; bottom:-5px; color:#7e895c; font:600 12px/1.35 ui-sans-serif,system-ui,sans-serif; transform:rotate(-9deg); }.hand-drawn span { display:block; padding-left:30px; font-size:22px; }
.closing { margin-bottom:0; padding-top:74px; padding-bottom:78px; position:relative; overflow:hidden; border-radius:30px 30px 0 0; color:#fffefa; background:#30342a; text-align:center; }
.closing .eyebrow { color:#c7c7ad; }.closing h2 { margin:0 0 25px; font-size:clamp(48px,6vw,70px); line-height:1.04; font-weight:600; }.closing h2 em { color:#c8dc9f; }.button-light { color:#2c2c26; background:#f8f5e9; }.closing-note { margin:14px 0 0; color:#b6b6a6; font-size:11px; }.closing-flower { position:absolute; top:23px; right:16%; color:#c3da99; font-size:36px; }.closing:before,.closing:after { content:'✿'; position:absolute; color:#6e775a; font-size:54px; opacity:.8; }.closing:before { left:11%; bottom:28px; }.closing:after { right:8%; bottom:25px; font-size:27px; color:#dc9b83; }
.site-footer { max-width:1240px; min-height:91px; margin:auto; padding:20px 44px; display:flex; align-items:center; justify-content:space-between; color:#858177; font-size:11px; }.site-footer .wordmark { color:var(--ink); font-size:18px; }.site-footer .wordmark-icon { width:25px; height:25px; font-size:15px; }
@media (max-width:850px) { .site-header,.section-wrap { padding-left:25px; padding-right:25px; }.hero { grid-template-columns:1fr; padding-top:55px; }.hero-copy { max-width:660px; margin:auto; text-align:center; }.hero-intro { margin-left:auto; margin-right:auto; }.hero-actions { align-items:center; }.trust-row { justify-content:center; }.hero-art { width:min(100%,600px); margin:10px auto 0; }.feature-band { gap:22px; }.feature-copy { padding-left:7px; }.feature-stack { padding-right:10px; } }
@media (max-width:600px) { .site-header { padding:20px 19px; }.wordmark { font-size:20px; }.site-header nav { gap:12px; }.site-header nav>a:not(.nav-cta) { display:none; }.nav-cta { padding:9px 13px; font-size:12px; }.section-wrap { padding-left:19px; padding-right:19px; }.hero { min-height:auto; padding-top:54px; padding-bottom:43px; }.hero-copy { text-align:left; }.hero h1 { font-size:52px; }.hero-intro { font-size:16px; }.hero-actions { align-items:flex-start; }.button { padding:14px 17px; font-size:12px; gap:12px; }.trust-row { justify-content:flex-start; gap:12px; font-size:10px; }.hero-art { min-height:530px; transform:scale(.92); transform-origin:top center; width:110%; margin-left:-5%; }.sunburst { width:360px; height:360px; top:73px; }.orbit { width:420px; height:420px; top:43px; }.orbit-two { width:490px; height:490px; top:8px; }.phone { width:250px; height:500px; }.note-top { left:-3px; top:103px; }.note-bottom { right:-8px; bottom:76px; }.floating-note { padding:9px 10px; }.note-icon { width:29px; height:29px; }.how { padding-top:32px; padding-bottom:62px; }.section-heading h2 { font-size:43px; }.steps { grid-template-columns:1fr; gap:34px; margin-top:40px; }.step-number { left:calc(50% - 83px); }.feature-band { grid-template-columns:1fr; gap:28px; min-height:auto; margin-bottom:55px; padding:42px 24px 35px; border-radius:22px; }.feature-copy { padding:0; }.feature-copy h2 { font-size:42px; }.feature-stack { min-height:270px; padding:3px 0; }.card-two { margin-left:14px; }.card-three { margin-left:2px; }.hand-drawn { right:6px; bottom:-5px; }.closing { padding:65px 20px 68px; border-radius:24px 24px 0 0; }.closing h2 { font-size:55px; }.closing-flower { top:16px; right:9%; }.closing:before { left:4%; bottom:15px; font-size:35px; }.closing:after { right:4%; bottom:14px; }.site-footer { padding:22px 20px; flex-wrap:wrap; gap:14px; }.site-footer>span:nth-child(2) { display:none; } }