:root { color-scheme:light; --ink:#17362b; --green:#16834b; --muted:#50645b; --line:#dce7e0; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; color:var(--ink); background:white; font:16px/1.65 Inter,"Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; } h1,h2,h3,p { margin:0; } h1,h2,h3 { line-height:1.2; } h1 { font-size:clamp(38px,4.5vw,64px); letter-spacing:-2px; font-weight:650; margin:20px 0 24px; } h2 { font-size:clamp(28px,3vw,40px); letter-spacing:-1px; } h3 { font-size:20px; }
.site-header,main,footer { max-width:1200px; margin:auto; padding-left:32px; padding-right:32px; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:24px; padding-bottom:24px; }
.brand { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:700; text-decoration:none; }
nav { display:flex; gap:28px; font-size:14px; } nav a { text-decoration:none; padding:10px 0; } nav a:hover,.text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:48px; padding:12px 22px; background:var(--green); color:white; border-radius:8px; text-decoration:none; font-weight:600; font-size:15px; }
.button:hover { background:#116739; }
.hero { display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; padding:64px 0 80px; }
.eyebrow { color:var(--green); font-size:12px; font-weight:700; letter-spacing:1.4px; }
.lead { color:var(--muted); font-size:18px; max-width:480px; margin-bottom:28px; }
.small { font-size:13px; color:var(--muted); margin-top:16px; }
.product-view { margin:0; background:#edf6f0; padding:28px 20px 16px; border-radius:12px; }
.product-view img { display:block; width:100%; height:auto; } figcaption { text-align:center; font-size:12px; color:var(--muted); margin-top:12px; }
.steps-section,.features-section,.faq-section { border-top:1px solid var(--line); padding:64px 0; }
.section-heading .eyebrow,.feature-intro .eyebrow { margin-bottom:16px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); list-style:none; padding:0; gap:48px; margin:40px 0 0; }
.step-number { display:block; font-size:14px; color:var(--green); margin-bottom:16px; font-weight:700; }
.steps h3 { margin-bottom:12px; } .steps p,.feature-list p,.feature-intro > p:not(.eyebrow) { color:var(--muted); }
.features-section { display:grid; grid-template-columns:1fr 1fr; gap:100px; }
.feature-intro > p:not(.eyebrow) { margin:24px 0; max-width:400px; }
.text-link { font-weight:600; color:var(--green); text-decoration:none; display:inline-block; min-height:44px; }
.feature-list article { display:flex; gap:20px; padding:24px 0; border-bottom:1px solid var(--line); } .feature-list article:first-child { padding-top:0; } .feature-list article > span { color:var(--green); font-size:13px; padding-top:4px; } .feature-list h3 { margin-bottom:10px; }
.faq-section { display:grid; grid-template-columns:1fr 1.2fr; gap:64px; }
.faq-list details { border-bottom:1px solid var(--line); padding:0 0 16px; margin-bottom:16px; }
summary { cursor:pointer; min-height:44px; padding:10px 0; font-weight:600; } .faq-list p { margin:8px 0; color:var(--muted); }
.final-cta { background:#edf6f0; padding:40px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-radius:12px; margin-bottom:64px; } .final-cta h2 { font-size:30px; } .final-cta p { margin-top:12px; color:var(--muted); }
footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:24px; padding-bottom:32px; border-top:1px solid var(--line); } footer p { font-size:13px; color:var(--muted); }
:focus-visible { outline:3px solid var(--green); outline-offset:4px; } .skip { position:absolute; left:16px; top:-80px; padding:12px; background:white; z-index:10; } .skip:focus { top:16px; }
@media(max-width:900px) { nav { gap:16px; } .site-header,main,footer { padding-left:24px; padding-right:24px; } .hero { gap:24px; } .features-section { gap:48px; } .faq-section { gap:32px; } }
@media(max-width:700px) { .site-header { flex-wrap:wrap; gap:16px; } nav { order:3; width:100%; justify-content:space-between; font-size:12px; gap:8px; } .site-header .button { padding:10px 14px; font-size:13px; gap:10px; } .hero,.features-section,.faq-section { grid-template-columns:1fr; } .hero { padding:32px 0 48px; gap:32px; } h1 { letter-spacing:-1px; } .lead { font-size:17px; } .steps { grid-template-columns:1fr; gap:24px; margin-top:28px; } .steps li { border-bottom:1px solid var(--line); padding-bottom:24px; } .step-number { margin-bottom:10px; } .steps-section,.features-section,.faq-section { padding:40px 0; } .final-cta { padding:24px; flex-direction:column; align-items:flex-start; margin-bottom:40px; } footer { flex-direction:column; align-items:flex-start; gap:12px; } .product-view { padding:16px 12px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }