:root { color-scheme:light; --bg:#f7f6f2; --ink:#232923; --muted:#646a62; --green:#285c46; --line:#dedfd6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
[hidden] { display:none!important; }
a { color:inherit; text-underline-offset:4px; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #598968; outline-offset:5px; }
button { font:inherit; cursor:pointer; }
.page { max-width:1180px; padding:0 48px; margin:auto; }
.skip { position:absolute; top:-60px; left:24px; background:white; padding:10px; z-index:3; }
.skip:focus { top:10px; }
header { height:96px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.wordmark { display:flex; align-items:center; gap:10px; font-size:21px; font-weight:650; letter-spacing:-.7px; text-decoration:none; }
.mark { display:grid; place-items:center; width:31px; height:31px; background:var(--green); color:var(--bg); border-radius:7px; font-size:25px; font-weight:400; }
.cli { color:var(--muted); font-weight:400; margin-left:2px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.audience-switch { display:flex; gap:16px; align-items:center; margin:0; padding:7px 10px; border:0; border-radius:4px; background:#555; color:white; font:11px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.audience-switch label { display:flex; align-items:center; gap:5px; cursor:pointer; min-height:20px; }
.audience-switch input { appearance:none; margin:0; width:10px; height:10px; border:1px solid white; border-radius:50%; cursor:pointer; }
.audience-switch input:checked { background:white; box-shadow:inset 0 0 0 2px #555; }
.audience-switch input:focus-visible { outline:2px solid white; outline-offset:4px; }
.hero { display:grid; grid-template-columns:1.15fr 1fr; gap:60px; align-items:center; padding:68px 0 56px; }
.eyebrow { font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:1.5px; color:var(--green); margin:0 0 22px; display:flex; align-items:center; gap:8px; }
.dot,.little-dot { width:6px; height:6px; background:var(--green); border-radius:50%; display:inline-block; }
h1 { font:normal clamp(48px,5.1vw,68px)/1.06 Georgia,"Times New Roman",serif; letter-spacing:-2.7px; margin:0 0 23px; }
h1 span { color:var(--green); }
.intro { font-size:17px; line-height:1.7; color:var(--muted); margin:0 0 28px; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:10px 17px; font-size:13px; font-weight:550; text-decoration:none; white-space:nowrap; border-radius:5px; }
.primary { background:var(--green); color:white; border:1px solid var(--green); }
.primary:hover { background:#1e4937; }
.secondary { border:1px solid #b6bdae; background:transparent; color:var(--ink); }
.secondary:hover { background:#eeefe7; }
.hero-footnote { font-size:11px; color:var(--muted); margin:17px 0 0; }
.hero-scene { background:#e9ede3; padding:24px; border-radius:16px; position:relative; }
.scene-caption { display:flex; align-items:center; gap:7px; font:9px/1.5 ui-monospace,monospace; letter-spacing:.6px; color:#53654f; margin-bottom:23px; }
.example-label { margin-left:auto; font-size:8px; color:#65705e; }
.chat-bubble { display:flex; align-items:center; gap:11px; background:var(--bg); border:1px solid #d9ded1; border-radius:12px 12px 12px 3px; padding:15px; box-shadow:0 4px 10px #31402706; }
.chat-bubble p { margin:0; font-size:13px; line-height:1.7; }
.avatar { width:28px; height:28px; flex-shrink:0; display:grid; place-items:center; font-size:10px; font-weight:600; border-radius:50%; background:#ded3c6; color:#695848; }
.scene-path { display:flex; flex-direction:column; align-items:center; height:62px; justify-content:center; }
.scene-path>span:not(.spark) { height:14px; border-left:1px dashed #a4b69a; }
.spark { color:var(--green); font-size:21px; line-height:28px; }
.receipt { background:#fffefa; padding:19px; border-radius:9px; box-shadow:0 10px 25px #35462c0c; }
.receipt-heading { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:550; }
.receipt-icon { background:var(--green); color:white; width:28px; height:28px; border-radius:6px; display:grid; place-items:center; font-size:20px; }
.receipt-heading small { display:block; font-size:9px; color:var(--muted); font-weight:400; }
.ready { margin-left:auto; color:var(--green); background:#e8efe5; width:23px; height:23px; display:grid; place-items:center; border-radius:50%; }
.receipt-amount { display:flex; align-items:center; justify-content:space-between; padding:17px 0; border-bottom:1px dashed #dbddd2; font-size:13px; }
.receipt-amount strong { font-size:28px; font-weight:550; letter-spacing:-1px; }
.receipt-amount strong span { font-size:17px; color:#92978b; }
.receipt-split { padding-top:13px; display:flex; align-items:center; justify-content:space-between; font-size:10px; color:var(--muted); }
.receipt-split b { margin:0 5px; font-weight:400; }
.avatar-stack { display:flex; padding-left:4px; }
.avatar-stack span { width:26px; height:26px; border:2px solid #fffefa; margin-left:-4px; background:#dbe5d3; border-radius:50%; display:grid; place-items:center; font-size:9px; color:#516b42; }
.avatar-stack span:nth-child(2) { background:#e8d4bd; color:#947454; }
.avatar-stack span:nth-child(3) { background:#dae2e7; color:#5c7280; }
.scene-bottom { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:20px; font-size:10px; color:#586451; }
.check-circle { border:1px solid #8aa17b; width:14px; height:14px; border-radius:50%; display:grid; place-items:center; font-size:8px; }
.benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding-bottom:47px; border-bottom:1px solid var(--line); }
h2 { font-size:22px; line-height:1.4; letter-spacing:-.6px; margin:0; }
.benefits h2 { font-size:17px; margin:18px 0 7px; }
.benefits p { font-size:13px; color:var(--muted); margin:0; max-width:290px; }
.benefit-picture { height:140px; border-radius:9px; display:flex; align-items:center; justify-content:center; position:relative; }
.expense-picture { background:#eee7dc; flex-direction:column; gap:6px; }
.voice-message { display:flex; align-items:center; gap:9px; padding:8px 13px; background:#fffaf3; border-radius:18px 18px 18px 3px; transform:rotate(-2deg); }
.voice-mic { display:grid; place-items:center; width:26px; height:26px; background:#ded2bd; color:#776548; border-radius:50%; }
.voice-mic svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.voice-wave { width:88px; height:26px; fill:none; stroke:#a18b65; stroke-width:2.3; stroke-linecap:round; }
.voice-duration { font-size:9px; color:#776548; }
.voice-transcript { font-size:10px; color:#776548; }
.mini-slip { background:#fffefa; display:flex; gap:22px; align-items:center; padding:12px 15px; border-radius:5px; font-size:10px; box-shadow:0 5px 15px #5546210a; transform:rotate(2deg); }
.mini-slip strong { font-size:14px; }
.mini-check { color:var(--green); }
.balance-picture { background:#e5ece2; flex-direction:column; gap:12px; padding:15px; }
.balance-question { font-size:11px; color:#58734f; background:#f9fcf6; padding:9px 16px; border-radius:13px 13px 3px 13px; align-self:flex-end; margin-right:18px; }
.balance-answer { display:flex; align-items:center; gap:9px; font-size:12px; background:#f9fcf6; padding:12px 14px; border:1px solid #d7e1d0; border-radius:3px 13px 13px 13px; align-self:flex-start; margin-left:18px; }
.balance-answer strong { display:block; font-weight:650; }
.balance-answer small { display:block; color:#66795b; margin-top:2px; font-size:10px; }
.answer-check { display:grid; place-items:center; width:21px; height:21px; background:#dce8d5; color:var(--green); border-radius:50%; font-size:11px; flex-shrink:0; }
.groups-picture { background:#e7eaee; flex-direction:column; gap:7px; }
.group-chip { width:174px; display:flex; align-items:center; gap:10px; font-size:10px; background:#f9fafb; padding:5px 10px; border:1px solid #dce1e7; border-radius:5px; }
.group-chip span { color:#71839a; font-size:15px; }
.group-chip:nth-child(2) { transform:translateX(13px); }
.group-chip:nth-child(3) { transform:translateX(-7px); }
.agent-section { padding:44px 0; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; }
.section-heading .eyebrow { margin-bottom:10px; }
.section-heading h2 { font:normal 32px/1.2 Georgia,"Times New Roman",serif; letter-spacing:-1px; }
.section-heading>p { max-width:350px; font-size:13px; color:var(--muted); margin:0; }
.agent-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin:27px 0 14px; }
.agent-card { padding:19px 12px 13px; border:1px solid var(--line); border-radius:7px; text-align:center; background:#faf9f5; }
.agent-symbol { display:grid; place-items:center; width:40px; height:40px; margin:auto; }
.agent-symbol img { display:block; width:37px; height:37px; object-fit:contain; }
.agent-card h3 { font-size:13px; font-weight:550; margin:11px 0 15px; }
.agent-card button { font-size:11px; color:var(--green); border:0; padding:7px 4px; background:transparent; border-top:1px solid var(--line); width:100%; }
.agent-card button:hover { color:#123d2a; background:#eef1e7; }
.agent-caption { color:var(--muted); font-size:11px; margin:0; }
.prompt-preview { margin-top:17px; font-size:12px; color:var(--muted); }
.prompt-preview summary { cursor:pointer; width:fit-content; }
.prompt-preview p { padding:15px 18px; border:1px solid var(--line); border-radius:5px; overflow-wrap:anywhere; }
.copy-status { font-size:13px; color:var(--green); margin-top:15px; }
.copy-status:empty { display:none; }
#copy-fallback { margin-top:15px; }
#copy-fallback label { display:block; font-size:13px; margin-bottom:8px; }
textarea { width:100%; padding:12px; font:13px/1.6 ui-monospace,monospace; border:1px solid var(--line); border-radius:6px; background:#fffefa; color:var(--ink); }
.migration { display:flex; align-items:center; gap:30px; border-top:1px solid var(--line); padding:33px 0 37px; }
.migration .eyebrow { margin-bottom:8px; }
.migration h2 { font-size:20px; }
.migration p:not(.eyebrow) { font-size:13px; margin:8px 0 11px; color:var(--muted); }
.text-link { font-size:13px; font-weight:550; }
.migration-art { width:116px; height:105px; flex-shrink:0; background:#ede7db; border-radius:10px; display:grid; place-items:center; position:relative; }
.login-card { background:#fffefa; width:68px; height:61px; border:1px solid #dfd6c7; border-radius:6px; color:#a08b6f; font-size:21px; padding:7px 10px; line-height:1.1; transform:rotate(-6deg); }
.login-card span { display:block; color:#a5a899; font-size:14px; letter-spacing:1px; border-top:1px solid #e6e3dc; margin-top:5px; padding-top:4px; }
.login-tick { position:absolute; right:15px; bottom:17px; background:var(--green); color:white; border:2px solid #ede7db; border-radius:50%; width:25px; height:25px; text-align:center; font-size:13px; }
.machine-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:32px 0 22px; border-bottom:1px solid var(--line); }
.machine-heading h1 { font:500 22px/1.4 ui-monospace,monospace; letter-spacing:-.5px; margin:0; }
.markdown-source { white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace; max-width:850px; padding:24px 0 36px; margin:0; }
footer { border-top:1px solid var(--line); padding:21px 0 26px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:11px; color:var(--muted); }
footer p { margin:0; }
footer>div { display:flex; flex-wrap:wrap; gap:18px; }
@media(max-width:1000px) { .hero { gap:30px; } .hero-scene { padding:20px; } .desktop-break { display:none; } .agent-grid { grid-template-columns:repeat(3,1fr); } .hero h1 { font-size:58px; } }
@media(max-width:700px) { .page { padding:0 22px; } header { height:80px; } .wordmark { font-size:18px; gap:7px; } .mark { width:27px; height:27px; font-size:21px; } .cli { display:none; } .audience-switch { gap:10px; padding:7px 8px; font-size:10px; } .hero { grid-template-columns:1fr; gap:30px; padding:43px 0 31px; } .hero h1 { font-size:54px; letter-spacing:-2px; } .eyebrow { font-size:9px; letter-spacing:1px; margin-bottom:18px; } .intro { font-size:16px; } .hero-scene { max-width:440px; width:100%; justify-self:center; padding:22px; } .benefits { grid-template-columns:1fr; gap:27px; padding-bottom:32px; } .benefits article { display:grid; grid-template-columns:124px 1fr; gap:0 18px; align-items:start; } .benefit-picture { width:124px; height:128px; grid-row:span 2; } .benefits h2 { margin:3px 0 6px; font-size:16px; } .benefits p { font-size:12px; } .expense-picture { padding:9px; gap:6px; } .voice-message { padding:6px; gap:4px; } .voice-mic { width:19px; height:19px; } .voice-mic svg { width:13px; height:13px; } .voice-wave { width:47px; height:22px; } .voice-duration { font-size:7px; } .voice-transcript { font-size:8px; } .mini-slip { gap:5px; font-size:8px; padding:10px 8px; flex-wrap:wrap; } .mini-slip strong { font-size:12px; } .balance-picture { padding:10px 8px; gap:10px; } .balance-question { font-size:8px; padding:8px; margin:0; } .balance-answer { font-size:9px; padding:8px 6px; gap:5px; margin:0; } .answer-check { width:16px; height:16px; font-size:9px; } .balance-answer small { font-size:8px; } .group-chip { width:98px; font-size:8px; padding:3px 5px; gap:4px; } .group-chip span { font-size:11px; } .group-chip:nth-child(2) { transform:translateX(4px); } .group-chip:nth-child(3) { transform:translateX(-3px); } .section-heading { display:block; } .section-heading h2 { font-size:29px; } .section-heading>p { margin-top:14px; } .agent-section { padding:31px 0; } .agent-grid { gap:9px; margin-top:22px; } .agent-card { padding:15px 7px 10px; } .agent-card h3 { font-size:11px; margin:10px 0 12px; } .agent-card button { font-size:10px; } .migration { gap:18px; align-items:flex-start; padding:28px 0; } .migration-art { width:75px; height:83px; } .login-card { width:49px; height:49px; padding:6px 7px; font-size:17px; } .login-card span { font-size:10px; } .login-tick { right:6px; bottom:11px; } .migration h2 { font-size:18px; } .migration .eyebrow { font-size:8px; } .migration p:not(.eyebrow),.text-link { font-size:12px; } .machine-heading { padding-top:26px; } .markdown-source { font-size:12px; } footer { display:block; font-size:10px; } footer>div { margin-top:10px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }