*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:#f7f8f6;color:#172a32;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #0088af;outline-offset:5px}
button{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.08;letter-spacing:-.045em}
h3{font-size:28px}
p{color:#64747b}
.wrap{width:min(1160px,calc(100% - 64px));margin-inline:auto}
.preview-notice{background:#e9efec;text-align:center;padding:7px 16px;font-size:11px;letter-spacing:.04em;color:#596c67}
.nav{height:104px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;letter-spacing:-.6px}
.nav nav{display:flex;gap:32px;font-size:14px;font-weight:500}
.nav nav a:hover{color:#007594}
.button{border:1px solid #d0dbd8;background:transparent;border-radius:999px;padding:15px 24px;display:inline-flex;gap:24px;align-items:center;justify-content:center;font-size:14px;font-weight:600;transition:background .18s,box-shadow .18s}
.button:hover{background:#e5eeea}
.button.small{padding:11px 18px}
.button.primary{background:#193740;border-color:#193740;color:#fff;box-shadow:0 5px 12px #15343c12}
.button.primary:hover{background:#27515d;box-shadow:0 6px 18px #15343c26}
.text-button{border:0;background:none;font-size:14px;font-weight:500;padding:15px}
.text-button span{margin-left:12px}
.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:650;display:flex;align-items:center;gap:9px;color:#55756c}
.green-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#2d9d78;flex-shrink:0}
.hero{text-align:center;padding-top:62px}
.hero>.eyebrow{justify-content:center;letter-spacing:.04em;font-weight:500;font-size:13px}
.hero h1{font-size:clamp(68px,8vw,104px);line-height:.98;letter-spacing:-.067em;font-weight:650;margin:27px 0}
.hero h1 span{color:#477971}
.hero-copy{font-size:18px;line-height:1.7}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px}
.micro{font-size:11px;margin-top:17px;color:#7d8b8a}
.app-stage{margin-top:64px;padding:64px 44px 18px;border-radius:32px;position:relative;text-align:left;isolation:isolate;background:linear-gradient(140deg,#b8d1ce 0%,#dae4d1 46%,#75a7aa 100%);overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff66}
.stage-glow{position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 75% 78%,#368a9566,transparent 55%),radial-gradient(ellipse at 20% 65%,#f4eddc,transparent 65%)}
.mini-menu{position:absolute;right:48px;top:21px;display:flex;gap:8px;align-items:center;font-size:10px;line-height:18px;color:#345358}
.mini-menu img{width:16px;height:16px}
.mini-menu-divider{height:12px;width:1px;background:#34535833;margin:0 7px}
.mini-muted{color:#34535899}
.app-window{display:grid;grid-template-columns:170px 1fr;min-height:500px;border-radius:16px;border:1px solid #fff8;background:#eff5f1a6;box-shadow:0 30px 55px -20px #173a4566,0 1px 2px #173a4522;backdrop-filter:blur(30px);overflow:hidden}
.app-sidebar{background:#f7f8f6b0;padding:14px 13px;display:flex;flex-direction:column;border-right:1px solid #dce7e380}
.traffic{display:flex;gap:6px}
.traffic i{width:8px;height:8px;background:#ff625a;border:1px solid #d54e4722;border-radius:50%}
.traffic i:nth-child(2){background:#ffc149}
.traffic i:nth-child(3){background:#2acb56}
.app-brand{display:flex;align-items:center;gap:5px;margin:28px 0 23px;font-size:15px;font-weight:700;letter-spacing:-.5px}
.demo-navigation{display:grid;gap:4px}
.demo-navigation button{display:flex;gap:9px;align-items:center;background:none;border:0;padding:10px 12px;border-radius:9px;font-size:12px;color:#667779;text-align:left}
.demo-navigation button span{width:17px;text-align:center;font-size:19px;line-height:20px}
.demo-navigation button.active{background:#84bab82e;color:#24454b;font-weight:600}
.sidebar-foot{font-size:9px;color:#85958f;margin-top:auto;padding:16px 9px 0}
.app-main{padding:35px 27px 27px;min-width:0}
.app-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.app-kicker{font-size:7px;letter-spacing:.15em;font-weight:600;margin-bottom:8px}
.app-top h2{font-size:27px}
.periods{display:flex;gap:2px;padding:3px;border:1px solid #fff8;border-radius:9px;background:#ffffff20;box-shadow:0 1px 3px #193b4314}
.periods button{border:0;background:none;border-radius:6px;font-size:9px;white-space:nowrap;padding:5px 8px}
.periods button.active{background:#fff9;box-shadow:0 1px 3px #294d5022}
.demo-summary{display:flex;justify-content:space-between;margin:27px 0 20px;align-items:center}
.metric-label{font-size:11px;color:#506864}
.big-number{display:flex;align-items:baseline;gap:9px;margin:0 0 3px}
.big-number strong{font-size:51px;line-height:1.25;letter-spacing:-2px;font-weight:650;font-variant-numeric:tabular-nums}
.big-number>span{font-size:14px;color:#728a80}
.demo-summary p{font-size:9px}
.summary-mark{font-size:43px;width:72px;height:72px;border-radius:23px;border:5px solid #729b8740;display:flex;align-items:center;justify-content:center;color:#729b8740;font-weight:650;transform:rotate(-9deg);margin-right:10px}
.demo-chart-card{border:1px solid #fff6;border-radius:14px;padding:17px 19px 12px;background:#fff3}
.chart-heading{display:flex;align-items:center;justify-content:space-between}
.chart-heading h3{font-size:12px;letter-spacing:-.01em}
.chart-heading>span{font-size:8px;color:#758984}
.chart{height:120px;margin-top:17px;display:flex;gap:7px;align-items:end;border-bottom:1px solid #395c4c16;background:repeating-linear-gradient(to top,transparent 0,transparent 39px,#395c4c0e 39px,#395c4c0e 40px)}
.chart .bar{flex:1;background:linear-gradient(to top,#347e83,#6aa49f);border-radius:3px 3px 0 0;min-height:2px;transition:height .25s ease;position:relative}
.chart .bar:hover{background:#226d77}
.chart .bar:after{content:attr(data-value);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);background:#193740;color:white;border-radius:5px;padding:3px 6px;white-space:nowrap;font-size:9px;opacity:0;pointer-events:none;z-index:1}
.chart .bar:hover:after{opacity:1}
.chart-ticks{display:flex;justify-content:space-between;font-size:8px;margin-top:7px;color:#84968d}
.demo-bottom{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:10px;margin-top:12px}
.mini-stat,.mini-app{border:1px solid #fff6;border-radius:11px;background:#fff3;padding:12px}
.mini-stat>span,.mini-app>span{font-size:9px;color:#657b71;display:block;margin-bottom:5px}
.mini-stat>strong{font-size:22px;letter-spacing:-.7px;font-weight:600}
.mini-stat small{font-size:10px;color:#779085;font-weight:500;letter-spacing:0}
.mini-app>div{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:11px}
.mini-app>div>span:last-child{font-size:9px;margin-left:auto;color:#718879}
.app-dot{background:#effcfd;border:1px solid #fff;border-radius:6px;width:24px;height:24px;text-align:center;color:#188cab;font-size:18px}
.demo-caption{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#446961;margin-top:18px;gap:15px}
.demo-caption>span:first-child{display:flex;align-items:center;gap:6px}
.intro{padding:120px 0 54px;display:grid;grid-template-columns:1fr 1fr;column-gap:80px;align-items:end}
.intro .eyebrow{grid-column:1 / -1;margin-bottom:23px}
.intro h2,.setup h2,.faq h2{font-size:47px;letter-spacing:-.05em}
.intro>p:last-child{font-size:17px;line-height:1.8;padding-bottom:3px}
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:110px}
.feature{background:#edf0eb;border:1px solid #e2e8df;border-radius:24px;padding:36px;overflow:hidden;min-height:310px}
.feature p{font-size:14px;line-height:1.75;max-width:335px;margin-top:14px}
.feature-symbol{font-size:27px;color:#5c8b7d;display:block;margin-bottom:25px;line-height:1}
.feature-wide{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:335px}
.feature-wide h3{font-size:38px}
.keyboard-art{transform:rotate(-8deg);padding:20px 0;max-width:440px}
.keyboard-art>div{display:flex;gap:7px;margin-bottom:7px;justify-content:center}
.keyboard-art i{font-style:normal;width:53px;height:51px;border-radius:10px;background:#e4eae1;border:1px solid #d4ddd2;box-shadow:0 3px 0 #cbd7c9;text-align:center;line-height:51px;font-size:13px;color:#647564}
.keyboard-art .heat-1{background:#b2c8b2}
.keyboard-art .heat-2{background:#83ac97;color:#2b5440}
.keyboard-art .heat-3{background:#3c8575;color:#edf8ee;border-color:#398271;box-shadow:0 3px 0 #286856}
.keyboard-art .space{width:227px}
.menu-feature{grid-row:span 2;background:linear-gradient(140deg,#e4ece7,#cddfd7);display:flex;flex-direction:column}
.popover-art{background:#f5f8f1b3;backdrop-filter:blur(20px);border:1px solid #ffffffab;border-radius:20px;width:280px;max-width:100%;padding:23px;margin:50px auto 10px;box-shadow:0 24px 50px -15px #2d534a44;transform:rotate(-3deg)}
.popover-art>div:first-child{display:flex;gap:8px;align-items:center;font-size:13px;margin-bottom:27px}
.popover-art .green-dot{margin-left:auto}
.popover-art>span{font-size:11px;color:#627b69}
.popover-art>strong{font-size:44px;display:flex;align-items:center;justify-content:space-between;letter-spacing:-1px;font-weight:600;line-height:1.3}
.popover-art>strong small{font-size:23px;font-weight:400;color:#8da68c}
.popover-metrics{display:flex;justify-content:space-between;border-top:1px solid #59735320;padding-top:16px;margin-top:18px;font-size:20px;font-weight:600}
.popover-metrics small{font-size:11px;font-weight:500;color:#6c8167}
.pace-art{height:62px;display:flex;align-items:end;gap:9px;margin-top:25px}
.pace-art i{flex:1;border-radius:3px;background:#78a797;height:35%}
.pace-art i:nth-child(3n){height:90%;background:#408570}
.pace-art i:nth-child(4n){height:65%}
.pace-art i:nth-child(5n){height:100%}
.distance-art{margin-top:22px;display:flex;align-items:center;gap:18px;color:#46786a}
.distance-art strong{font-size:65px;font-weight:500;line-height:1;letter-spacing:-3px}
.distance-art span{font-size:11px;line-height:1.6;color:#76917e}
.privacy-section{background:#172f36;color:#eaf0e9;padding:90px 0}
.privacy-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.privacy-icon{font-size:44px;line-height:1;color:#92b1a3;display:block;margin-bottom:34px}
.privacy-section .eyebrow{color:#8aaba1;font-size:9px;margin-bottom:23px}
.privacy-section h2{font-size:56px}
.privacy-section p{color:#a3b9b6;margin-top:22px;font-size:15px}
.privacy-list article{display:flex;gap:24px;padding:26px 0;border-bottom:1px solid #ffffff14}
.privacy-list article>span{font-family:monospace;font-size:11px;color:#779c8e;padding-top:4px}
.privacy-list h3{font-size:20px;letter-spacing:-.02em}
.privacy-list p{font-size:13px;line-height:1.8;margin-top:11px}
.privacy-link{font-size:12px;margin-top:25px;display:inline-block;color:#b6d2c2}
.privacy-link span{margin-left:14px}
.setup{padding:112px 0;display:grid;grid-template-columns:1fr 1fr;gap:100px;border-bottom:1px solid #dce3dc}
.setup .eyebrow,.faq .eyebrow{margin-bottom:20px}
.setup ol{list-style:none;padding:0;margin:0;display:grid;gap:31px}
.setup li{display:flex;gap:18px}
.setup li>span{width:30px;height:30px;display:grid;place-items:center;background:#e5ece4;border-radius:50%;color:#4f7463;flex-shrink:0;font-size:12px}
.setup h3{font-size:19px;letter-spacing:-.02em;padding-top:4px}
.setup p{font-size:13px;line-height:1.75;margin-top:9px}
.faq{padding:95px 0;display:grid;grid-template-columns:1fr 1fr;gap:100px}
.faq details{border-bottom:1px solid #dce3dc;padding:22px 0}
.faq details:first-child{padding-top:0}
.faq summary{font-size:15px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;font-weight:550}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';font-size:18px;font-weight:400;color:#718a7e}
.faq details[open] summary:after{content:'−'}
.faq details p{font-size:13px;line-height:1.8;margin-top:16px}
.closing{text-align:center;background:linear-gradient(125deg,#e0eadd,#edf2e9,#d7e7e2);padding:65px 24px;border-radius:28px;margin-bottom:70px}
.closing img{opacity:.8;margin-bottom:22px}
.closing h2{font-size:52px}
.closing .button{margin-top:28px}
.closing p{font-size:12px;margin-top:15px}
.footer{display:flex;align-items:center;gap:28px;font-size:11px;padding:0 0 40px;color:#82918c}
.footer .brand{font-size:16px;color:#263e40;margin-right:auto}
.footer>a:not(.brand):hover{text-decoration:underline}
.skip{position:absolute;left:20px;top:-100px;z-index:10;background:white;padding:15px;border-radius:10px}
.skip:focus{top:15px}
dialog{border:1px solid #d6e2d9;border-radius:24px;background:#f7f8f6;color:#172a32;box-shadow:0 25px 100px #16363633;padding:40px;width:min(460px,calc(100% - 40px));max-height:90vh}
dialog::backdrop{background:#10282d77;backdrop-filter:blur(5px)}
dialog .eyebrow{margin:20px 0 16px}
dialog h2{font-size:34px}
dialog p:not(.eyebrow){font-size:14px;line-height:1.8;margin-top:18px}
dialog .button{margin-top:25px}
.dialog-close{position:absolute;top:12px;right:16px;font-size:26px;border:0;background:transparent;color:#77887e}
.legal{max-width:740px;margin:60px auto 110px;padding:0 24px}
.legal h1{font-size:52px;margin:22px 0}
.legal h2{font-size:25px;margin:35px 0 16px}
.legal p,.legal li{font-size:15px;line-height:1.8}
.legal p+p{margin-top:15px}
.legal a{text-decoration:underline}
@media(min-width:1400px){.hero{padding-top:75px}
}
@media(max-width:1000px){.wrap{width:calc(100% - 48px)}
.app-stage{padding:58px 22px 18px}
.app-window{grid-template-columns:145px 1fr}
.app-main{padding:25px 18px 18px}
.app-brand{font-size:12px}
.app-brand img{width:28px}
.app-top{align-items:flex-start;flex-direction:column}
.periods{margin-top:7px}
.demo-summary{margin-top:20px}
.intro,.privacy-grid,.setup,.faq{column-gap:45px}
.footer{flex-wrap:wrap}
.intro h2,.setup h2,.faq h2{font-size:40px}
}
@media(max-width:700px){.wrap{width:calc(100% - 36px)}
.nav{height:83px;gap:12px}
.nav nav{display:none}
.brand{font-size:17px}
.brand img{width:28px}
.nav .small{font-size:11px;padding:9px 13px;gap:10px}
.hero{padding-top:42px}
.hero h1{font-size:clamp(44px,13.5vw,56px)}
.hero-copy{font-size:16px}
.desktop{display:none}
.hero-actions{gap:3px}
.hero>.eyebrow{font-size:11px}
.app-stage{margin-top:45px;padding:49px 12px 16px;border-radius:20px}
.mini-menu{right:20px;top:16px;font-size:9px}
.app-window{display:block}
.app-sidebar{padding:10px 12px;border-bottom:1px solid #d0ded544}
.app-brand,.sidebar-foot{display:none}
.traffic{margin-bottom:12px}
.demo-navigation{display:flex;gap:2px;justify-content:space-between}
.demo-navigation button{font-size:9px;padding:6px 7px;gap:3px;justify-content:center}
.demo-navigation button span{display:none}
.app-main{padding:20px 15px 15px}
.app-top{gap:5px}
.app-top h2{font-size:23px}
.app-kicker{font-size:6px}
.periods{width:100%;justify-content:space-between}
.periods button{flex:1;padding:6px;font-size:9px}
.demo-summary{margin:18px 0}
.big-number strong{font-size:42px}
.summary-mark{width:53px;height:53px;border-radius:17px;font-size:30px;border-width:4px}
.chart{gap:4px;height:90px}
.demo-chart-card{padding:14px 12px 10px}
.demo-bottom{gap:5px;grid-template-columns:1fr 1fr}
.mini-app{display:none}
.mini-stat{padding:10px}
.mini-stat>strong{font-size:21px}
.demo-caption{flex-direction:column;gap:5px;font-size:8px;margin-top:14px}
.intro{padding:70px 0 30px;display:block}
.intro h2,.setup h2,.faq h2{font-size:36px}
.intro>p:last-child{margin-top:23px;font-size:15px}
.features{grid-template-columns:1fr;margin-bottom:65px;gap:14px}
.feature{padding:28px;min-height:280px}
.feature-wide{display:block;grid-column:auto}
.feature-wide h3{font-size:32px}
.keyboard-art{max-width:330px;margin:30px auto 0}
.keyboard-art i{width:40px;height:40px;line-height:40px}
.keyboard-art .space{width:190px}
.menu-feature{grid-row:auto}
.popover-art{margin-top:30px}
.privacy-section{padding:60px 0}
.privacy-grid{grid-template-columns:1fr;gap:30px}
.privacy-section h2{font-size:45px}
.privacy-icon{margin-bottom:23px}
.privacy-list article{gap:17px}
.setup,.faq{padding:65px 0;grid-template-columns:1fr;gap:35px}
.closing{padding:45px 22px;margin-bottom:40px}
.closing h2{font-size:39px}
.footer{gap:15px;padding-bottom:25px}
.footer .brand{width:100%}
.footer>span:last-child{width:100%}
.preview-notice{font-size:9px}
.legal h1{font-size:40px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{transition:none!important}
}

@media(max-width:700px){.hero-actions .button{white-space:nowrap;padding:14px 16px;font-size:12px;gap:12px}
.hero-actions .text-button{white-space:nowrap;font-size:12px;padding:10px}
.hero-actions .text-button span{margin-left:6px}
}