:root { color-scheme:light; --ink:#243a37; --muted:#6d7771; --paper:#f9f8f3; --accent:#bc5639; --line:#e0e3d9; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; }html { scroll-behavior:smooth; scroll-padding-top:30px; }body { margin:0; }a { color:inherit; text-decoration:none; }button { font:inherit; cursor:pointer; }button,a { -webkit-tap-highlight-color:transparent; }a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px; } .wrap { max-width:1200px; padding-inline:40px; margin-inline:auto; } .skip { position:absolute; top:-100px; padding:16px; background:white; z-index:10; }.skip:focus { top:0; }
.header { min-height:100px; display:flex; justify-content:space-between; align-items:center; gap:30px; border-bottom:1px solid var(--line); }.brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:750; letter-spacing:2.5px; }.brand svg { width:29px; height:33px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.header nav { display:flex; gap:28px; font-size:13px; }.header-actions { display:flex; align-items:center; gap:22px; font-size:13px; }.header-actions button { padding:6px; background:none; border:0; color:var(--muted); }.button { display:inline-flex; justify-content:center; align-items:center; gap:20px; padding:15px 22px; min-height:48px; background:var(--ink); color:white; border:1px solid var(--ink); border-radius:5px; font-size:14px; font-weight:550; transition:background .15s,transform .15s; }.button:hover { background:#39544d; transform:translateY(-1px); }.button.small { padding:10px 17px; min-height:40px; }.button.outline { background:transparent; color:var(--ink); border-color:#cbd2c5; }.button.outline:hover { background:#edf0e8; }.text-link { font-size:14px; display:flex; gap:20px; align-items:center; }a:hover:not(.button):not(.brand) { color:var(--accent); }
.hero { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; padding-block:80px 90px; }.eyebrow { font-size:10px; font-weight:650; letter-spacing:1.7px; display:flex; align-items:center; gap:9px; }.dot { width:6px; height:6px; border-radius:50%; background:#5b826a; display:inline-block; flex-shrink:0; }.hero h1 { font-weight:500; font-size:clamp(44px,5.2vw,65px); letter-spacing:-2.7px; line-height:1.08; margin:24px 0; }.hero h1 em { font-style:normal; color:var(--accent); }.intro { font-size:16px; line-height:1.8; color:var(--muted); max-width:410px; }.hero-actions { display:flex; gap:25px; margin-top:30px; }.micro { font-size:11px; color:var(--muted); margin-top:17px; }
.preview { position:relative; background:#fff; border:1px solid #dce1d5; border-radius:12px; box-shadow:0 30px 70px #2f493519; transform:rotate(-1deg); margin:24px 8px 15px 0; }.preview-top { padding:17px 24px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #edf0e8; font-size:11px; }.preview-mark { background:var(--ink); color:white; padding:5px 7px; border-radius:4px; font-size:10px; }.preview-dots { margin-left:auto; letter-spacing:3px; color:#96a192; }.preview-body { padding:27px; }.preview-caption { display:flex; justify-content:space-between; gap:10px; align-items:center; font-size:9px; letter-spacing:1px; color:#788477; }.pill { border:1px solid #e9d8b4; background:#fffaf0; border-radius:20px; padding:5px 9px; color:#9b7738; letter-spacing:0; font-size:10px; }.preview h2 { font-size:23px; font-weight:550; letter-spacing:-.6px; margin:19px 0 9px; }.preview-sub { font-size:11px; color:var(--muted); }.preview-fields { display:grid; grid-template-columns:1fr 1fr; margin:24px 0; background:#f8f9f5; padding:16px; border:1px solid #eef0e9; border-radius:5px; }.preview-fields small,.preview-fields strong { display:block; font-size:11px; }.preview-fields small { color:#8c9688; margin-bottom:6px; font-size:9px; }.workflow { display:grid; gap:10px; }.step { position:relative; display:flex; align-items:center; gap:12px; padding:12px; border:1px solid #edf0e8; border-radius:6px; color:#9ca597; }.step>span:first-child { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#f2f4ef; font-size:10px; }.step strong,.step small { display:block; font-size:11px; font-weight:500; }.step small { margin-top:4px; font-size:9px; color:#939c8f; font-weight:400; }.step.done { color:var(--ink); }.step.done>span:first-child { color:#5e8566; background:#eaf2e7; }.step.current { border-color:#cbd7c1; color:var(--ink); background:#f8faf5; }.step.current>span:first-child { background:var(--ink); color:white; }.step .avatar { margin-left:auto; border-radius:50%; padding:8px; font-size:9px; background:#f0dfc8; color:#876e50; }.preview-foot { margin-top:22px; display:flex; align-items:center; gap:7px; font-size:9px; color:#83907c; }.sample { margin-left:auto; font-size:8px; }.floating { position:absolute; display:flex; gap:12px; align-items:center; right:-24px; bottom:-26px; padding:17px 20px; border-radius:7px; background:white; box-shadow:0 9px 30px #2f493518; border:1px solid #e6e9e0; transform:rotate(1deg); }.floating-icon { background:#f6eee5; color:var(--accent); padding:10px; border-radius:6px; }.floating strong,.floating small { display:block; font-size:11px; }.floating small { color:var(--muted); font-size:9px; margin-top:5px; }
.use-cases { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:27px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:12px; color:#6f7971; }.use-cases>span:first-child { font-size:8px; letter-spacing:1.2px; max-width:130px; line-height:1.8; }.section { padding-block:90px; }.section h2,.pricing-heading h2,.closing h2 { font-size:36px; letter-spacing:-1.3px; line-height:1.2; font-weight:500; margin:19px 0; }.section-heading { display:flex; justify-content:space-between; gap:50px; align-items:end; margin-bottom:38px; }.section-heading>p { max-width:310px; font-size:14px; line-height:1.8; color:var(--muted); }.features { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.features article { border:1px solid var(--line); border-radius:7px; padding:28px; }.feature-icon { font-size:23px; color:var(--accent); }.features h3 { font-size:18px; font-weight:550; margin-top:24px; }.features p { font-size:13px; line-height:1.8; color:var(--muted); min-height:94px; }.feature-index { display:block; border-top:1px solid var(--line); padding-top:20px; margin-top:25px; font-size:9px; letter-spacing:1px; color:#939c8b; }
.pricing-section { background:#eef1e8; padding-block:80px; border-block:1px solid var(--line); }.pricing-heading { text-align:center; }.pricing-heading .eyebrow { justify-content:center; }.pricing-heading p { color:var(--muted); font-size:14px; }.billing-note { display:inline-block; padding:8px 15px; border:1px solid #d7ddcf; border-radius:20px; font-size:10px; margin-top:10px; }.plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:48px; }.plan { position:relative; padding:30px 25px; border:1px solid #d7dece; border-radius:8px; background:#f9faf6; }.plan.featured { border:1px solid #405f4b; background:white; box-shadow:0 10px 30px #243a3708; }.plan-tag { position:absolute; right:20px; top:-12px; background:#405f4b; color:white; border-radius:20px; padding:6px 12px; font-size:8px; letter-spacing:1px; }.plan-kind { font-size:18px; font-weight:600; }.plan-description { font-size:12px; color:var(--muted); min-height:32px; line-height:1.6; }.price { font-size:36px; font-weight:550; letter-spacing:-1.8px; margin-top:26px; white-space:nowrap; }.price span { display:block; font-size:11px; font-weight:400; letter-spacing:0; color:var(--muted); margin-top:5px; }.price.custom { font-size:29px; letter-spacing:-1px; padding-top:6px; min-height:69px; white-space:normal; }.price-caption { font-size:11px; color:var(--muted); margin:14px 0 22px; }.plan .button { width:100%; font-size:12px; padding:12px 8px; }.plan ul { list-style:none; padding:20px 0 0; margin:22px 0 0; border-top:1px solid var(--line); }.plan li { font-size:12px; line-height:1.6; padding:7px 0; display:flex; gap:10px; }.plan li:before { content:'✓'; color:#6d8969; flex-shrink:0; }.pricing-disclosure { margin:28px auto 0; max-width:910px; font-size:11px; line-height:1.9; color:#778170; }.faq-section { display:grid; grid-template-columns:1fr 1.4fr; gap:80px; }.faq-section>div>p,.faq-section>div>a { font-size:13px; color:var(--muted); }.faq-list details { border-bottom:1px solid var(--line); padding:21px 0; }.faq-list summary { cursor:pointer; font-size:14px; line-height:1.6; }.faq-list details p { font-size:13px; color:var(--muted); line-height:1.85; padding-right:20px; }.closing { display:flex; align-items:center; justify-content:space-between; gap:30px; background:var(--ink); color:#f8f7f1; padding-block:45px; border-radius:9px; }.closing .eyebrow { color:#b8c5b6; }.closing h2 { margin-bottom:0; }.closing .button { background:#d8e2cd; color:var(--ink); border-color:#d8e2cd; }.footer { display:flex; justify-content:space-between; gap:40px; padding-block:55px 35px; }.footer .brand { font-size:16px; }.footer p,.footer small { color:var(--muted); font-size:11px; }.footer nav { display:flex; flex-wrap:wrap; gap:23px; align-items:start; font-size:11px; }
@media(min-width:1500px){.hero{padding-block:100px;}}
@media(max-width:980px){.wrap{padding-inline:28px;}.header{gap:18px;}.header nav{gap:16px;}.header-actions{gap:14px;}.hero{gap:35px;}.hero h1{font-size:52px;}.preview-body{padding:20px;}.features article{padding:22px;}.price{font-size:30px;}.plan{padding:26px 20px;}.price.custom{font-size:25px;}.faq-section{gap:40px;}.closing{margin-inline:28px;}.use-cases{gap:14px;}}
@media(max-width:720px){.wrap{padding-inline:22px;}.header{min-height:85px;flex-wrap:wrap;padding-block:17px;gap:16px;}.brand{font-size:15px;gap:7px;letter-spacing:1.6px;}.brand svg{width:22px;height:26px;}.header nav{order:3;width:100%;justify-content:center;font-size:12px;gap:35px;border-top:1px solid var(--line);padding-top:14px;}.header-actions{gap:12px;font-size:12px;}.header-actions .button{display:none;}.hero{grid-template-columns:1fr;gap:32px;padding-block:48px 65px;}.hero h1{font-size:52px;letter-spacing:-2px;}.intro{font-size:15px;}.preview{margin:0 14px 0 0;max-width:470px;}.floating{right:-14px;bottom:-24px;padding:12px;}.use-cases{display:grid;grid-template-columns:1fr 1fr;gap:17px;font-size:11px;}.use-cases>span:first-child{grid-column:1/-1;max-width:none;}.section{padding-block:60px;}.section-heading{display:block;margin-bottom:25px;}.section-heading>p{max-width:100%;}.section h2,.pricing-heading h2,.closing h2{font-size:30px;}.features{grid-template-columns:1fr;gap:14px;}.features p{min-height:0;}.feature-index{margin-top:18px;padding-top:15px;}.pricing-section{padding-block:60px;}.plans{grid-template-columns:1fr;gap:25px;margin-top:35px;}.plan{padding:28px;}.plan-description{min-height:0;}.price{font-size:40px;}.price span{display:inline;margin-left:8px;}.price.custom{font-size:30px;min-height:0;}.plan .button{min-height:46px;}.plan li{font-size:13px;}.faq-section{grid-template-columns:1fr;gap:15px;}.closing{margin-inline:14px;flex-direction:column;align-items:flex-start;padding:32px 26px;}.footer{flex-direction:column;gap:25px;}.footer nav{gap:18px;}.eyebrow{font-size:9px;letter-spacing:1.2px;}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}.button{transition:none;}}