:root { --ink:#17261f; --paper:#f6f2e9; --lime:#d9f265; --muted:#66746c; --line:#d5d8ce; --orange:#ef7147; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .page-shell { max-width:1240px; margin:auto; padding:0 36px; } .nav { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { color:inherit; text-decoration:none; font-size:20px; font-weight:800; letter-spacing:-.8px; display:flex; gap:9px; align-items:center; } .brand-mark { display:grid; place-items:center; width:27px; height:27px; color:#fff; background:var(--ink); border-radius:8px; font-size:15px; } .demo-label,.eyebrow,.panel-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.3px; color:var(--muted); } .hero { padding:108px 0 82px; max-width:850px; } .eyebrow { color:var(--orange); margin:0 0 17px; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(49px,7.5vw,92px); line-height:.98; letter-spacing:-.075em; margin-bottom:28px; } h1 em { color:var(--orange); font-style:normal; } .lede { max-width:680px; font-size:19px; line-height:1.55; color:var(--muted); } .hero-actions { display:flex; align-items:center; gap:25px; margin-top:35px; } .button { cursor:pointer; border:0; font:inherit; text-decoration:none; display:inline-flex; gap:23px; align-items:center; justify-content:space-between; padding:14px 18px; border-radius:7px; font-weight:750; } .button-primary { background:var(--ink); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); } .button-primary span { color:var(--lime); font-size:20px; } .text-link { color:var(--ink); text-underline-offset:5px; } .disclaimer { font-size:12px; color:var(--muted); margin-top:28px; } .outcomes { border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); } .outcomes article { padding:30px 24px 31px 0; border-right:1px solid var(--line); } .outcomes article:not(:first-child) { padding-left:24px; } .outcomes article:last-child { border:0; } .outcomes span { font:700 12px ui-monospace,monospace; color:var(--orange); } .outcomes h2 { margin:26px 0 9px; font-size:20px; letter-spacing:-.04em; } .outcomes p { color:var(--muted); font-size:14px; line-height:1.45; margin:0; } .demo { padding:110px 0; } .section-heading h2 { font-size:clamp(32px,4vw,52px); letter-spacing:-.06em; margin:0 0 9px; } .section-heading > p:last-child { color:var(--muted); } .demo-grid { display:grid; grid-template-columns:1.1fr .9fr; margin-top:40px; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:#fbfaf5; } .lead-form { padding:32px; display:grid; gap:18px; border-right:1px solid var(--line); } label { font-size:12px; font-weight:750; display:grid; gap:8px; } input,select,textarea { font:inherit; color:var(--ink); padding:11px 12px; border:1px solid #c8ccc3; background:#fffefa; border-radius:5px; outline-color:var(--orange); } textarea { min-height:105px; resize:vertical; line-height:1.45; } .lead-form .button { margin-top:4px; width:100%; } .activity-panel { padding:32px; background:var(--ink); color:#eff5ed; min-height:480px; } .panel-top { display:flex; align-items:start; justify-content:space-between; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.16); } .panel-label { color:#aebcaf; margin-bottom:9px; } .panel-top h3 { font-size:21px; letter-spacing:-.04em; margin:0; } .status-dot { width:10px; height:10px; border-radius:50%; margin-top:5px; background:#66746c; } .status-dot.active { background:var(--lime); box-shadow:0 0 0 5px rgba(217,242,101,.13); } .activity-list { list-style:none; padding:22px 0 0; margin:0; display:grid; gap:15px; } .activity-list li { position:relative; padding:0 0 0 28px; color:#d8e0d7; font-size:14px; line-height:1.42; } .activity-list li::before { content:""; width:10px; height:10px; position:absolute; left:0; top:5px; border:1px solid #9dac9f; border-radius:50%; } .activity-list li.done::before { background:var(--lime); border-color:var(--lime); } .activity-list strong { display:block; color:#fff; font-size:13px; margin-bottom:3px; } .empty-state { color:#aebcaf !important; padding-left:0 !important; } .empty-state::before { display:none; } .how-it-works { padding:95px 0 115px; border-top:1px solid var(--line); } .flow { margin-top:52px; display:flex; align-items:stretch; } .flow-card { flex:1; } .flow-card span { color:var(--orange); font-size:13px; font-weight:800; } .flow-card h3 { font-size:19px; margin:23px 0 10px; letter-spacing:-.04em; } .flow-card p { font-size:14px; line-height:1.5; color:var(--muted); max-width:180px; } .flow-line { height:1px; flex:0 1 42px; background:#aab1a7; margin:7px 15px 0; } .trust { background:var(--lime); margin:0 -36px; padding:70px 36px; display:grid; grid-template-columns:.8fr 1.3fr 1fr; gap:35px; } .trust .eyebrow { color:var(--ink); } .trust h2 { font-size:36px; letter-spacing:-.055em; margin-bottom:15px; } .trust p { line-height:1.6; margin:0; } .trust ul { padding:0; margin:0; list-style:none; display:grid; align-content:start; gap:12px; font-size:14px; font-weight:650; } .trust li::before { content:"✓"; margin-right:10px; } footer { text-align:center; padding:34px; font-size:13px; color:var(--muted); }
@media (max-width:760px) { .page-shell { padding:0 20px; } .nav { height:70px; } .demo-label { display:none; } .hero { padding:72px 0 58px; } .hero-actions { align-items:flex-start; flex-direction:column; gap:16px; } .outcomes { grid-template-columns:1fr 1fr; } .outcomes article:nth-child(2) { border-right:0; } .outcomes article:nth-child(n+3) { border-top:1px solid var(--line); } .outcomes article { padding:20px 15px 20px 0; } .outcomes article:not(:first-child) { padding-left:15px; } .demo { padding:72px 0; } .demo-grid { grid-template-columns:1fr; } .lead-form { border-right:0; border-bottom:1px solid var(--line); padding:24px; } .activity-panel { padding:24px; min-height:390px; } .how-it-works { padding:70px 0; } .flow { display:grid; grid-template-columns:1fr; gap:15px; margin-top:37px; } .flow-line { width:1px; height:27px; margin:0 0 0 5px; } .flow-card p { max-width:none; } .trust { margin:0 -20px; padding:52px 20px; grid-template-columns:1fr; gap:20px; } }