/* Public site shares the app's calm green palette. */
:root { --bg:#f8faf6; --surface:#fff; --surface-2:#f0f4ed; --border:#dfe7db; --accent:#19735d; --accent-h:#125d49; --accent-light:#e5f0e7; --accent-grad:#19735d; --text:#192c26; --text-2:#54695e; --text-3:#697c71; --ink:#172f27; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
.wrap { max-width:1240px; padding-inline:32px; }
.nav { background:#f8faf6ed; }
.nav-in { height:78px; grid-template-columns:auto 1fr auto; gap:28px; }
.logo { font-weight:700; letter-spacing:-.6px; }
.logo-mark { border-radius:9px; width:31px; height:31px; }
.nav-links { font-size:12px; gap:24px; }
.nav-cta { gap:8px; }
.nav-cta > a:first-child { display:none; }
.nav-support { color:var(--accent-h); font-size:12px; font-weight:600; padding:9px 8px; }
.btn { font-family:inherit; font-size:13px; font-weight:600; border-radius:9px; padding:13px 20px; }
.btn-sm { padding:9px 14px; font-size:12px; }
.btn-primary { box-shadow:0 3px 8px #163d2715; }
.btn:hover { transform:translateY(-1px); }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #278368; outline-offset:4px; }
.hero { text-align:left; padding:76px 0 0; background:radial-gradient(ellipse at 85% 30%,#e4efde,transparent 52%); }
.hero-layout { display:grid; grid-template-columns:.9fr 1.15fr; align-items:center; gap:48px; }
.hero-copy { padding-bottom:24px; }
.eyebrow { background:transparent; padding:0; font-size:10px; letter-spacing:1.6px; font-weight:700; margin-bottom:27px; }
.beta-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }
h1 { font-size:clamp(42px,4.5vw,64px); line-height:1.09; letter-spacing:-3px; font-weight:500; margin-bottom:26px; }
h1 em { font-style:normal; color:var(--accent); }
.hero-sub { font-size:15px; line-height:1.9; max-width:400px; margin:0 0 28px; }
.hero-btns { justify-content:flex-start; gap:10px; margin-bottom:16px; }
.hero-btns .btn-primary { gap:27px; }
.hero-note { font-size:11px; max-width:340px; line-height:1.8; }
.hero-proof { display:flex; flex-wrap:wrap; gap:10px 18px; font-size:10px; color:var(--text-2); margin-top:27px; }
.hero-proof span::before { content:'✓'; color:var(--accent); margin-right:6px; }
.hero-bottom { display:flex; justify-content:space-between; gap:20px; padding-block:38px; margin-top:43px; border-top:1px solid var(--border); font-size:10px; color:var(--text-3); letter-spacing:1.5px; }
.hero-bottom a { color:var(--accent-h); letter-spacing:0; font-size:12px; }
.live-preview { padding:0; border:1px solid #d5e2d2; border-radius:17px; background:#fff; box-shadow:0 20px 65px #284b2212,0 2px 6px #284b2208; overflow:hidden; min-width:0; }
.preview-top { display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--border); padding:14px 20px; font-size:12px; }
.preview-logo { display:grid; place-content:center; background:var(--accent); color:white; width:25px; height:25px; border-radius:7px; font-size:12px; }
.preview-logo span { display:none; }
.sample-badge { display:inline-block; font-size:9px; color:var(--text-2); background:#f0f4ed; padding:4px 8px; border:1px solid var(--border); border-radius:5px; font-weight:500; white-space:nowrap; }
.preview-top > .sample-badge { margin-left:auto; }
.preview-body { padding:24px; }
.preview-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.preview-kicker { color:var(--accent); font-size:8px; letter-spacing:1.1px; margin-bottom:8px; font-weight:700; }
.preview-heading h2 { font-size:23px; letter-spacing:-.9px; font-weight:600; margin:0; }
.preview-clock { font-size:9px; color:var(--text-3); }
.preview-instruction { color:var(--text-2); font-size:10px; margin:11px 0 20px; }
.preview-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:18px; }
.preview-stats button { text-align:left; font-family:inherit; border:1px solid var(--border); border-radius:9px; padding:12px; background:#fff; color:var(--text); cursor:pointer; }
.preview-stats button[aria-pressed=true] { background:#eff6ed; border-color:#92bda5; box-shadow:inset 0 -2px 0 #19735d; }
.preview-stats span { font-size:9px; display:block; }
.preview-stats strong { font-size:28px; display:block; font-weight:500; padding:5px 0; }
.preview-stats small { font-size:8px; color:var(--text-2); }
.preview-red { color:#bc4840; }
.preview-flows { min-height:181px; }
.preview-flow { display:flex; align-items:center; gap:10px; width:100%; padding:13px 8px; border:0; border-bottom:1px solid #edf0e9; background:#fff; cursor:pointer; text-align:left; font-family:inherit; color:var(--text); border-radius:7px; }
.preview-flow[aria-pressed=true],.preview-flow:hover { background:#f2f6ef; }
.preview-flow-icon { width:26px; height:26px; background:#e8efe3; display:grid; place-items:center; border-radius:7px; color:var(--accent); }
.preview-flow-name { flex:1; min-width:0; }
.preview-flow-name strong { display:block; font-size:11px; font-weight:600; }
.preview-flow-name small { display:block; color:var(--text-3); font-size:9px; margin-top:3px; }
.preview-state { font-size:8px; border-radius:5px; padding:4px 6px; background:#f1f4ef; color:var(--text-2); }
.preview-issues { background:#fff0ed; color:#a43832; }
.preview-ok { background:#eaf5ed; color:#276247; }
.preview-arrow { color:var(--text-3); font-size:12px; }
.preview-detail { background:#f4f7f0; border:1px solid #e2e9dd; border-radius:10px; padding:16px; margin-top:17px; min-height:177px; }
.preview-detail-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.preview-detail-top strong { font-size:11px; overflow-wrap:anywhere; }
.preview-detail-metrics { display:flex; gap:36px; margin:12px 0; }
.preview-detail-metrics span { display:block; color:var(--text-2); font-size:9px; }
.preview-detail-metrics strong { display:block; font-size:16px; font-weight:600; margin-top:3px; }
.preview-detail p { font-size:10px; line-height:1.7; color:var(--text-2); }
.preview-detail .preview-owner { margin-top:8px; font-size:9px; }
.preview-foot { display:flex; align-items:center; gap:7px; padding:12px 20px; font-size:9px; color:var(--text-2); border-top:1px solid var(--border); background:#fcfdfb; }
.sample-dot { width:5px; height:5px; border-radius:50%; background:#839b76; flex-shrink:0; }
section { padding-block:85px; }
h2 { font-weight:600; letter-spacing:-1.3px; font-size:36px; }
h3 { font-weight:600; letter-spacing:-.4px; }
.sec-sub { font-size:15px; line-height:1.8; }
.thesis p { font-size:26px; letter-spacing:-.6px; font-weight:500; }
.card,.sec-card,.price,.cmp { border-radius:16px; box-shadow:none; }
.card::before { background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),#19735d12,transparent 45%); }
.card::after { background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),#19735d55,transparent 42%); }
.trace-launch,.sec-dark { background:#182f28; }
.trace-ui-head { background:#19735d; }
.price { border-color:#a2bea8; }
.final { background:#e8f0e3; }
.final .hero-btns { justify-content:center; }
.foot-in { justify-content:space-between; }
.foot-in .muted { margin-left:0; }
.support-section { padding-block:38px; }
.support-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.support-inner h2 { font-size:24px; letter-spacing:-.6px; margin-bottom:8px; }
.support-inner p { font-size:13px; color:var(--text-2); line-height:1.8; }
.support-email { color:var(--accent-h); max-width:100%; white-space:normal; overflow-wrap:anywhere; }
@media(max-width:1050px) { .hero-layout { gap:26px; } .wrap { padding-inline:24px; } .nav-links { gap:16px; } h1 { font-size:48px; } .preview-body { padding:18px; } .preview-clock { display:none; } }
@media(max-width:820px) { .hero-layout { grid-template-columns:1fr; gap:32px; } .hero { padding-top:46px; } .hero-copy { text-align:center; padding:0; } h1 { font-size:54px; } .hero-sub,.hero-note { margin-inline:auto; } .hero-btns,.hero-proof { justify-content:center; } .live-preview { width:100%; max-width:620px; margin-inline:auto; } .nav-links { display:none; } .nav-in { grid-template-columns:1fr auto; } .hero-bottom { margin-top:36px; } }
@media(max-width:480px) { .wrap { padding-inline:18px; } h1 { font-size:43px; letter-spacing:-2px; } .hero-sub { font-size:14px; } .nav-cta #nav-signin { display:none; } .nav-in { gap:12px; height:67px; } .preview-body { padding:15px; } .preview-heading h2 { font-size:21px; } .preview-stats button { padding:9px; } .preview-stats small { font-size:7px; } .preview-stats span { font-size:8px; } .preview-flow { gap:7px; } .preview-flow-icon { display:none; } .preview-top { padding:12px 15px; } .preview-foot { padding:12px 15px; line-height:1.6; } .hero-bottom { flex-direction:column; text-align:center; align-items:center; font-size:9px; padding-block:25px; } section { padding-block:58px; } .live-preview { padding:0; } h2 { font-size:29px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .btn:hover { transform:none; } }