:root{color-scheme:light;--paper:#f5f5ef;--ink:#20231d;--muted:#70746a;--lime:#d3f66b;--line:#dedfd5;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body{margin:0}
a{color:inherit;text-decoration:none}
button,a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:3px solid #587729;outline-offset:5px}
::selection{background:var(--lime);color:var(--ink)}
.wrap{width:min(1280px,calc(100% - 96px));margin-inline:auto}
.skip-link{position:fixed;top:-100px;left:20px;padding:16px;background:var(--lime);z-index:10}
.skip-link:focus{top:12px}
.header{height:108px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:25px;letter-spacing:-1.3px;font-weight:750;white-space:nowrap}
.brand img{flex-shrink:0}
.brand-dot{color:#70873b}
.header nav{display:flex;gap:28px;font-size:13px}
.header nav a,.text-link,.footer>a:last-child{transition:color .2s}
.header nav a:hover,.text-link:hover,.footer>a:last-child:hover{color:#657e2d}
.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:58px;padding:17px 24px;border-radius:8px;font-size:14px;font-weight:600;line-height:1.3;transition:transform .2s,background .2s}
.button:hover{transform:translateY(-2px)}
.button span{font-size:22px;font-weight:400}
.button-small{min-height:44px;padding:10px 17px;font-size:12px;gap:20px}
.button-outline{border:1px solid #bfc2b4}
.button-outline:hover{background:#e9ecdF}
.button-dark{background:var(--ink);color:white}
.button-dark:hover{background:#3c4333}
.button-lime{background:var(--lime);color:var(--ink)}
.button-lime:hover{background:#e0ff8d}
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;padding-top:76px;padding-bottom:72px;align-items:center}
.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 30px;font-size:11px;letter-spacing:1.25px;line-height:1.5;text-transform:uppercase;font-weight:600}
.live-dot{display:inline-block;flex-shrink:0;width:7px;height:7px;background:#638230;border-radius:50%}
.hero h1{font-size:clamp(38px,3.8vw,55px);font-weight:500;line-height:1.1;letter-spacing:-2.5px;margin:0}
.muted{color:var(--muted)}
.hero-description{max-width:470px;font-size:16px;line-height:1.7;color:#62675a;margin:28px 0 30px}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.text-link{display:inline-flex;align-items:center;gap:15px;font-size:13px;font-weight:600;min-height:44px}
.hero-note{font-size:11px;color:var(--muted);margin:21px 0 0}
.hero-note span{margin-right:7px;color:#516e26}
.product-scene{background:#e5e8dc;border:1px solid #dde1d3;border-radius:16px;padding:22px 32px 17px;position:relative;transform:rotate(1.5deg)}
.scene-top{display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:600;letter-spacing:1.35px;margin-bottom:21px}
.scene-top>span:first-child{display:flex;align-items:center;gap:8px}
.scene-top>span:last-child{font-size:24px}
.order-preview{background:#fff;border-radius:12px;padding:25px;box-shadow:0 14px 35px #3a432019;transform:rotate(-1.5deg)}
.preview-brand{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;border-bottom:1px solid #eceee6;padding-bottom:20px}
.garage-mark{display:grid;place-items:center;width:34px;height:34px;background:var(--ink);color:var(--lime);border-radius:9px;font-size:20px}
.preview-brand small{display:block;color:#767c6d;font-size:8px;font-weight:400;margin-top:4px}
.preview-menu{margin-left:auto;letter-spacing:2px}
.order-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:23px 0 16px}
.tiny-label{font-size:8px;letter-spacing:1px;color:var(--muted)}
.status-badge{font-size:9px;background:#eef6df;padding:7px 11px;border-radius:20px;color:#4c6a24}
.order-preview h2{font-size:28px;line-height:1.14;letter-spacing:-1px;font-weight:500;margin:0}
.preview-description{font-size:10px;color:#787f70;margin:11px 0 26px}
.progress-label{display:flex;justify-content:space-between;font-size:9px;color:#67705c;margin-bottom:9px}
.progress-label strong{color:var(--ink)}
.progress-track{display:flex;gap:5px}
.progress-track span{height:5px;background:#d9edb1;flex:1;border-radius:2px}
.progress-track span:last-child{background:#edf0e7}
.work-stages{list-style:none;margin:20px 0;padding:0}
.work-stages li{display:flex;align-items:center;gap:10px;position:relative;padding-bottom:20px}
.work-stages li:last-child{padding-bottom:0}
.stage-icon{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:12px;position:relative;z-index:1}
.completed{background:#edf4e3;color:#4d7527}
.current{background:var(--ink);color:var(--lime)}
.work-stages li:not(:last-child):after{content:"";position:absolute;left:12px;width:1px;top:25px;bottom:0;background:#e3e8db}
.work-stages strong{font-size:10px;display:block;font-weight:600}
.work-stages small{font-size:9px;display:block;color:#767c6e;margin-top:4px}
.stage-time{margin-left:auto;font-size:9px;color:#85897e}
.master-note{display:flex;align-items:flex-start;gap:10px;background:#f5f6f1;border:1px solid #eceee5;border-radius:8px;padding:13px}
.avatar{border-radius:50%;display:grid;place-items:center;background:#e2e7d8;width:26px;height:26px;flex-shrink:0;font-size:10px}
.master-note strong{font-size:9px}
.master-note p{font-size:10px;line-height:1.6;color:#676e5c;margin:5px 0 0}
.preview-footer{display:flex;justify-content:center;align-items:center;gap:6px;font-size:8px;margin-top:18px;color:#717964}
.preview-footer .live-dot{width:5px;height:5px}
.scene-caption{display:flex;justify-content:space-between;align-items:center;margin-top:17px;font-size:10px;color:#626c51}
.caption-mark{font-size:23px;font-weight:700;letter-spacing:-2px}
.value-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.value-strip p{font-size:12px;line-height:1.6;margin:0;color:var(--muted)}
.value-strip strong{font-weight:400;color:var(--ink)}
.value-strip>span{font-size:12px;display:flex;align-items:center;gap:12px}
.value-strip>span:before{content:"✳";font-size:20px;color:#7c875e}
.section{padding-block:96px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:40px}
.section .eyebrow,.workflow-section .eyebrow{margin-bottom:22px;color:#666f56}
h2{font-size:clamp(31px,3.3vw,46px);font-weight:500;line-height:1.12;letter-spacing:-1.6px;margin:0}
.section-heading>p{font-size:14px;color:var(--muted);line-height:1.8;margin:0 30px 5px 0}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.benefit-card{border-radius:12px;min-height:323px;padding:27px;display:flex;flex-direction:column}
.card-dark{background:var(--ink);color:var(--paper)}
.card-lime{background:var(--lime)}
.card-neutral{background:#e9ebe2}
.card-number{font-size:10px;opacity:.65}
.benefit-card h3{font-size:21px;letter-spacing:-.6px;font-weight:500;line-height:1.2;margin:0 0 13px}
.benefit-card p{font-size:12px;line-height:1.8;margin:0;color:#535d40}
.card-dark p{color:#c0c6b6}
.message-pair{height:144px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:9px;font-size:11px}
.message-pair>span:first-child{background:#393e32;color:#cbd0c2;padding:11px 16px;border-radius:9px 9px 9px 0;transform:rotate(-4deg)}
.message-pair>span:last-child{background:var(--lime);color:var(--ink);padding:11px 16px;border-radius:9px 9px 0 9px;align-self:flex-end;transform:rotate(2deg)}
.message-pair b{margin-left:20px}
.mini-timeline{display:flex;align-items:center;height:144px;gap:8px}
.mini-timeline span{border:1px solid #94b344;border-radius:25px;padding:8px;font-size:9px;white-space:nowrap}
.mini-timeline span:nth-of-type(2){background:var(--ink);color:var(--lime);border-color:var(--ink)}
.mini-timeline i{height:1px;flex:1;background:#8fac49}
.mini-brand{height:144px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px}
.mini-brand>span:first-child{border:1px dashed #a5ad95;padding:12px 20px;font-size:10px;letter-spacing:1px}
.mini-brand>span:last-child{background:#f7f8f3;padding:10px 12px;font-size:9px;border-radius:5px;box-shadow:0 5px 10px #20231d06}
.mini-brand b{margin-left:12px}
.workflow-section{background:#eceee5;padding-block:80px}
.workflow-layout{display:grid;grid-template-columns:1fr 1fr;gap:85px}
.workflow-intro{font-size:14px;line-height:1.8;color:var(--muted);margin:25px 0 16px}
.workflow-steps{margin:0;padding:0;list-style:none}
.workflow-steps li{display:flex;align-items:flex-start;gap:24px;padding:30px 0;border-bottom:1px solid #d6dbcb}
.workflow-steps li:first-child{padding-top:7px}
.workflow-steps li:last-child{border-bottom:none;padding-bottom:0}
.workflow-steps li>span{font-size:11px;display:grid;place-items:center;border:1px solid #c9cfbe;border-radius:50%;width:34px;height:34px;flex-shrink:0}
.workflow-steps h3{font-size:20px;letter-spacing:-.5px;font-weight:500;margin:5px 0 13px}
.workflow-steps p{font-size:13px;line-height:1.8;color:#6b735e;max-width:390px;margin:0}
.questions-layout{display:grid;grid-template-columns:1fr 1fr;gap:65px}
.questions-intro{font-size:13px;line-height:2;color:var(--muted);margin:24px 0}
.questions-intro a{color:var(--ink);text-underline-offset:4px;text-decoration:underline}
.faq details{border-bottom:1px solid var(--line);padding:21px 0}
.faq details:first-child{padding-top:0}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;font-size:14px;line-height:1.5;font-weight:500;min-height:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{font-size:22px;font-weight:400;color:var(--muted);transition:transform .2s}
.faq details[open] summary span{transform:rotate(45deg)}
.faq details p{font-size:13px;line-height:1.8;color:var(--muted);margin:14px 34px 0 0}
.faq a{text-decoration:underline;text-underline-offset:3px}
.contact-section{padding-bottom:50px}
.contact-card{background:var(--ink);color:var(--paper);border-radius:16px;padding:42px 50px}
.contact-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.contact-top .eyebrow{color:#c8cebd;font-size:10px}
.contact-top .live-dot{background:var(--lime)}
.contact-top>span{font-size:45px;line-height:1;color:var(--lime)}
.contact-card h2{font-size:clamp(35px,4.5vw,60px);letter-spacing:-2px}
.contact-bottom{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-top:28px}
.contact-bottom p{font-size:14px;color:#b8c0aa;line-height:1.8;margin:0}
.contact-email{display:block;font-size:12px;color:#cad2bb;margin-top:24px;text-decoration:underline;text-underline-offset:4px;width:fit-content}
.footer{padding-block:18px 40px;display:flex;justify-content:space-between;gap:24px;align-items:center}
.footer .brand{font-size:20px}
.footer p,.footer>a:last-child{font-size:11px;color:var(--muted)}
@media(min-width:1600px){.hero{padding-block:90px}
.hero h1{font-size:57px}
}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}
.header nav{gap:16px;font-size:12px}
.brand{font-size:22px}
.hero{gap:32px;padding-top:55px}
.hero h1{font-size:42px;letter-spacing:-1.8px}
.hero-description{font-size:14px}
.product-scene{padding:20px}
.hero-actions{gap:10px}
.hero-actions .button{font-size:12px;padding-inline:18px;gap:20px}
.value-strip{gap:14px}
.value-strip>span{font-size:10px;gap:7px}
.benefit-card{padding:22px}
.benefit-card h3{font-size:19px}
.mini-timeline{gap:4px}
.mini-timeline span{padding:6px;font-size:8px}
.workflow-layout,.questions-layout{gap:45px}
}
@media(max-width:820px){.header{height:88px}
.header nav{display:none}
.hero{gap:30px;grid-template-columns:1fr 1fr;padding-block:45px}
.hero h1{font-size:34px;letter-spacing:-1.4px}
.eyebrow{font-size:9px;letter-spacing:.8px;margin-bottom:22px}
.hero-description{font-size:13px;line-height:1.7;margin-block:22px}
.product-scene{padding:15px}
.order-preview{padding:18px}
.order-preview h2{font-size:24px}
.scene-top{font-size:7px;letter-spacing:.7px}
.scene-caption{font-size:8px}
.hero-note{font-size:10px;line-height:1.6}
.section{padding-block:68px}
.benefit-grid{gap:12px}
.benefit-card{padding:20px 16px}
.benefit-card h3{font-size:18px}
.benefit-card p{font-size:11px}
.message-pair{font-size:9px}
.message-pair>span{padding:9px!important}
.mini-timeline{flex-wrap:wrap;align-content:center;height:144px}
.mini-timeline i{min-width:5px}
.mini-brand>span:last-child{font-size:7px;padding:10px 6px}
.section-heading>p{font-size:12px;margin-right:0}
.workflow-layout,.questions-layout{gap:35px}
.workflow-steps li{gap:16px}
.workflow-steps h3{font-size:18px}
.contact-card{padding:35px}
.contact-bottom{align-items:flex-start}
.contact-bottom p{font-size:12px}
.contact-bottom .button{font-size:12px;gap:16px;padding-inline:18px}
.footer p{display:none}
.value-strip>span:last-child{display:none}
}
@media(max-width:620px){.wrap{width:calc(100% - 40px)}
.header{height:80px;gap:12px}
.brand{font-size:21px;gap:7px}
.header .brand img{width:30px;height:30px}
.header .button{font-size:10px;gap:10px;padding:8px 10px;min-height:42px}
.hero{grid-template-columns:1fr;padding-top:38px;padding-bottom:40px;gap:38px}
.hero h1{font-size:clamp(34px,8.8vw,48px);letter-spacing:-1.6px}
.hero .eyebrow{font-size:9px;margin-bottom:24px}
.hero-description{font-size:14px;max-width:400px;margin-block:24px}
.hero-actions{gap:7px 20px}
.hero-actions .button{font-size:12px;min-height:54px}
.text-link{font-size:12px}
.hero-note{margin-top:15px}
.product-scene{max-width:430px;width:calc(100% - 8px);margin-inline:auto;padding:21px 24px 15px;transform:rotate(1deg)}
.order-preview{padding:24px;transform:rotate(-1deg)}
.order-preview h2{font-size:29px}
.preview-brand{font-size:13px}
.preview-brand small{font-size:9px}
.scene-top{font-size:9px}
.scene-caption{font-size:9px}
.master-note p{font-size:11px}
.work-stages strong{font-size:11px}
.work-stages small{font-size:10px}
.value-strip{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-block:24px}
.value-strip p{grid-column:1/-1;font-size:13px}
.value-strip>span{font-size:11px}
.value-strip>span:last-child{display:flex}
.section{padding-block:58px}
h2{font-size:34px;letter-spacing:-1.3px}
.section-heading{display:block;margin-bottom:26px}
.section-heading>p{font-size:13px;margin-top:20px}
.section-heading>p br{display:none}
.benefit-grid{grid-template-columns:1fr;gap:14px}
.benefit-card{padding:26px;min-height:290px}
.benefit-card h3{font-size:23px;max-width:290px}
.benefit-card p{font-size:13px}
.message-pair{height:130px;font-size:12px;max-width:300px;width:100%;align-self:center}
.message-pair>span{padding:11px 16px!important}
.mini-timeline{height:125px;gap:10px;flex-wrap:nowrap}
.mini-timeline span{padding:10px 12px;font-size:10px}
.mini-brand{height:130px}
.mini-brand>span:last-child{font-size:10px;padding:10px 14px}
.workflow-section{padding-block:55px}
.workflow-layout,.questions-layout{grid-template-columns:1fr;gap:28px}
.workflow-intro{font-size:13px;margin-block:22px 8px}
.workflow-steps li{padding-block:24px;gap:18px}
.workflow-steps h3{font-size:21px}
.workflow-steps p{font-size:13px}
.questions-intro{margin-bottom:0}
.faq summary{font-size:14px}
.faq details{padding-block:18px}
.contact-section{padding-bottom:30px}
.contact-card{padding:28px 24px;border-radius:12px}
.contact-top .eyebrow{font-size:8px;letter-spacing:.8px}
.contact-top>span{font-size:30px}
.contact-card h2{font-size:37px;letter-spacing:-1.5px}
.contact-bottom{display:block;margin-top:22px}
.contact-bottom p{font-size:13px}
.contact-bottom .button{margin-top:24px;min-height:54px;font-size:12px;width:100%;justify-content:space-between}
.contact-email{margin-top:20px}
.footer{flex-wrap:wrap;padding-bottom:30px;gap:18px}
.footer .brand{font-size:20px}
.footer>a:last-child{font-size:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{transition:none!important}
.button:hover{transform:none}
}