:root { --ink:#11231f; --paper:#f7f5ef; --lime:#d9fa58; --green:#11815e; --muted:#68716d; --line:#dfe2dc; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; } .shell { width:min(1120px, calc(100% - 48px)); margin:auto; }
.nav { height:88px; display:flex; justify-content:space-between; align-items:center; } .brand { display:flex; align-items:center; gap:9px; font-size:20px; font-weight:800; color:var(--ink); text-decoration:none; letter-spacing:-.7px; } .brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; color:var(--ink); background:var(--lime); font-family:Georgia,serif; font-size:22px; font-style:italic; } .nav-link { color:var(--ink); text-decoration:none; font-size:13px; font-weight:700; } .nav-link span { margin-left:4px; }
.hero { min-height:650px; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:50px; padding:50px 0 82px; } .eyebrow,.section-kicker { margin:0 0 18px; color:var(--green); text-transform:uppercase; font:500 11px/1.2 "DM Mono",monospace; letter-spacing:1.2px; } .eyebrow span { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--green); } h1,h2,h3,p { margin-top:0; } h1 { max-width:610px; font-size:clamp(48px,6vw,78px); line-height:.99; letter-spacing:-4px; margin-bottom:25px; } em { color:var(--green); font-family:Georgia,serif; font-weight:400; } .lede { max-width:480px; color:#53605c; font-size:18px; line-height:1.6; } .hero-actions { display:flex; gap:12px; margin:32px 0; flex-wrap:wrap; } .button { display:inline-flex; align-items:center; gap:18px; padding:15px 20px; border-radius:8px; text-decoration:none; font-weight:800; font-size:14px; } .button-primary { color:var(--ink); background:var(--lime); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); } .button-primary:hover { background:#cbed47; } .button-text { color:var(--ink); } .trust-row { display:flex; gap:17px; flex-wrap:wrap; color:var(--muted); font-size:11px; font-weight:700; } .trust-row span:before { content:"✓"; color:var(--green); margin-right:5px; }
.phone-wrap { min-height:525px; position:relative; display:grid; place-items:center; } .sun { position:absolute; width:430px; height:430px; border-radius:50%; background:#eaf4c4; } .phone { position:relative; z-index:1; width:255px; height:510px; overflow:hidden; border:8px solid #172420; border-radius:35px; background:#e9eee2; box-shadow:0 22px 45px rgba(17,35,31,.22); } .phone-top { height:25px; display:flex; justify-content:center; align-items:center; background:#172420; } .camera { width:58px; height:12px; border-radius:9px; background:#07110e; } .map { height:265px; position:relative; overflow:hidden; background:linear-gradient(130deg,#d4e9d5,#eef0ca); } .map-road { position:absolute; height:15px; border-radius:20px; background:#f7f6ea; transform:rotate(-27deg); box-shadow:0 0 0 2px #d0d8cc; } .road-one { width:270px; top:80px; left:-20px; } .road-two { width:220px; top:160px; right:-60px; transform:rotate(39deg); } .road-three { width:240px; top:225px; left:-80px; transform:rotate(-8deg); } .map-label { position:absolute; color:#6e8278; font-size:9px; font-weight:700; }.label-one{top:46px;left:24px}.label-two{right:15px;top:192px}.pin{position:absolute;width:15px;height:15px;border:4px solid white;border-radius:50%;z-index:2;box-shadow:0 1px 5px #5a6}.pin-start{top:84px;left:66px;background:var(--green)}.pin-end{right:40px;bottom:47px;background:#e7725c}.route{position:absolute;inset:0;width:100%;height:100%;z-index:1}.route path{fill:none;stroke:#142d27;stroke-width:5;stroke-linecap:round;stroke-dasharray:7 7}.trip-card{position:absolute;top:205px;left:11px;right:11px;padding:14px 15px 12px;border-radius:15px;background:#fff;box-shadow:0 5px 14px #4c665330}.trip-top,.result-title,.result-bottom{display:flex;justify-content:space-between;align-items:center;font:500 8px "DM Mono",monospace;letter-spacing:.7px}.trip-live{color:#e2644d}.fare{font-size:31px;font-weight:800;letter-spacing:-1.5px;margin:5px 0}.trip-lines{border-top:1px solid #e9ece7;padding-top:7px}.trip-lines p{margin:4px 0;font-size:10px;color:#68716d}.trip-lines b{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px}.trip-lines p+ p b{background:#e7725c}.trip-lines strong{float:right;color:#172420}.result-card{position:absolute;z-index:2;left:14px;right:14px;bottom:17px;padding:12px 13px;border-radius:13px;background:var(--ink);color:white;box-shadow:0 8px 18px #20372c77}.result-title{color:#b9c6bd}.result-title i{font-style:normal;color:var(--lime);font-size:13px}.result-value{font-size:25px;font-weight:800;letter-spacing:-1px;margin:3px 0}.result-value small{font-size:10px;color:#b9c6bd;letter-spacing:0}.result-bottom{padding-top:6px;border-top:1px solid #405149;color:#bdc8c1}.result-bottom strong{color:var(--lime);font-size:8px}.float-card{position:absolute;z-index:2;padding:10px 12px;background:white;border-radius:9px;box-shadow:0 9px 20px #3f574929;font-size:10px;font-weight:800}.card-one{top:64px;right:-3px}.card-two{bottom:61px;left:-1px;color:#5b6761}.card-two span{color:var(--ink);font-size:15px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.green{background:var(--green)}
.problem { padding:90px 0 105px; border-top:1px solid var(--line); }.problem-grid{display:grid;grid-template-columns:1.1fr .7fr;gap:90px;align-items:end}.problem h2,.how-section h2,.privacy h2,.cta h2{font-size:clamp(32px,4vw,52px);line-height:1.08;letter-spacing:-2.4px;margin:0}.problem-grid p,.privacy>p,.cta>p{color:#5f6965;font-size:16px;line-height:1.7;margin:0}.how-section{background:var(--ink);padding:100px 0;color:white}.section-kicker.light{color:var(--lime)}.how-section h2{margin-bottom:60px}.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #41534d}.steps article{padding:29px 27px 0 0}.steps article+article{border-left:1px solid #41534d;padding-left:27px}.step-number{color:var(--lime);font:500 12px "DM Mono",monospace}.steps h3{font-size:19px;margin:40px 0 9px}.steps p{color:#b7c1bd;line-height:1.6;font-size:14px}.privacy{display:grid;grid-template-columns:80px 1fr 1fr;gap:25px;align-items:center;padding:100px 0}.privacy-icon{display:grid;place-items:center;width:54px;height:54px;border:1px solid #bed0c4;border-radius:50%;font-size:31px;color:var(--green)}.privacy .section-kicker{margin-bottom:10px}.cta{padding:93px 0 105px;border-top:1px solid var(--line);text-align:center}.cta h2{font-size:clamp(42px,5vw,65px);margin-bottom:18px}.cta>p{margin:0 auto 28px;max-width:460px}.waitlist-form{width:min(100%,440px);margin:30px auto 0;text-align:left;display:grid;gap:7px}.waitlist-form label{font-size:12px;font-weight:800}.waitlist-form label span{font-weight:500;color:#79827e}.waitlist-form input:not(.website-field){width:100%;margin:0 0 10px;padding:13px 14px;border:1px solid #cbd1c9;border-radius:8px;background:#fff;font:500 14px Manrope,Arial,sans-serif;color:var(--ink)}.waitlist-form input:focus{outline:3px solid #d9fa5899;border-color:var(--green)}.waitlist-form .button{justify-self:start;margin-top:7px;border:0;cursor:pointer}.waitlist-form .button:disabled{opacity:.65;cursor:wait}.website-field{position:absolute!important;left:-10000px!important}.form-status{min-height:22px;margin:4px 0 0!important;font-size:13px!important;font-weight:700}.form-status.success{color:var(--green)}.form-status.error{color:#b34332}.form-note{margin:0!important;color:#75807b!important;font-size:11px!important;line-height:1.5!important}.cta .button{margin:auto}footer{display:flex;justify-content:space-between;padding:28px 0 35px;border-top:1px solid var(--line);font:400 11px "DM Mono",monospace;color:#71807a}footer a{color:inherit;text-decoration:none}
@media (max-width:760px){.shell{width:min(100% - 32px,560px)}.nav{height:72px}.hero{grid-template-columns:1fr;padding:43px 0 55px;gap:20px}.hero-copy{text-align:center}.eyebrow{display:inline-block}h1{letter-spacing:-2.7px}.lede{font-size:16px;margin-inline:auto}.hero-actions,.trust-row{justify-content:center}.phone-wrap{transform:scale(.9);min-height:465px;margin:-8px 0 -28px}.problem{padding:67px 0}.problem-grid,.privacy{grid-template-columns:1fr;gap:20px}.how-section{padding:70px 0}.steps{grid-template-columns:1fr}.steps article,.steps article+article{border-left:0;border-bottom:1px solid #41534d;padding:25px 0}.steps article:last-child{border-bottom:0}.steps h3{margin:20px 0 8px}.privacy{padding:70px 0}.cta{padding:70px 0}footer{padding-top:23px}.float-card{display:none}}