*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color:#000}body{background:#f6f6f5;position:relative;overflow-x:hidden}.art{position:absolute;z-index:0;left:31.45vw;top:-69px;width:83vw;height:897px;background:url("https://www.figma.com/api/mcp/asset/db2479db-d968-4d0d-8352-f59a4da1b8ae.png") center/cover no-repeat;mix-blend-mode:multiply;pointer-events:none}header,main,footer{position:relative;z-index:1}header{height:83px;padding:28px 80px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#000;width:max-content}.brand img{width:27px;height:27px;border-radius:7px;box-shadow:0 0 20px rgba(0,0,0,.27)}.brand b{font-size:22px;letter-spacing:-.88px}.hero{height:637px;padding:8px 80px;display:flex;align-items:center}.hero>div,.hero{ }.hero{display:block;padding-top:45px}.eyebrow{font-size:12px;font-weight:500;letter-spacing:.96px;color:#999;margin:0 0 20px}.hero h1{font-size:84px;line-height:84px;letter-spacing:-4.2px;margin:0 0 20px;width:680px}.lede{font-size:19px;line-height:29px;color:#666;width:520px;margin:0 0 20px}.badge{width:206px;height:69px;border-radius:10px;background:#000;color:#fff;display:flex;align-items:center;gap:11px;padding:9px 16px;text-decoration:none;margin-bottom:20px}.badge .apple{font-size:27px}.badge span:last-child{display:flex;flex-direction:column}.badge small{font-size:11px}.badge strong{font-size:24px;line-height:25px}.mechanics{border-top:1.5px solid #000;width:680px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding-top:20px}.mechanics article{overflow:hidden}.mechanics h2{font-size:17px;letter-spacing:-.51px;margin:10px 0}.mechanics article>p{font-size:13px;line-height:19px;color:#666;margin:0;width:200px}.demo{height:56px;display:flex;align-items:center}.log{height:51px;margin-top:2px;background:#000;color:#fff;border-radius:14px;padding:11px 16px 11px 14px;gap:10px;font-size:13px}.log .circle{width:18px;height:18px;border-radius:50%;border:2px solid #fff}.log span:nth-child(2){display:flex;flex-direction:column}.log small{font-size:10px;color:#999}.log i,.count i{flex:1}.count{gap:10px}.count strong{font-size:48px;line-height:50px;letter-spacing:-2.4px}.count>span:nth-child(2){font-size:12px;color:#999}.check{width:22px;height:22px;border-radius:50%;background:#000;color:#fff;text-align:center;line-height:22px}.heatmap{height:56px;width:198px;display:grid;grid-template-columns:repeat(25,6px);grid-auto-rows:6px;gap:2px;align-content:center}.heatmap i{display:block;width:6px;height:6px;border-radius:1px;background:#e5e5e3}.heatmap i.mid{background:#a6a6a6}.heatmap i.dark{background:#000}footer{height:106px;border-top:1px solid rgba(0,0,0,.1);padding:23px 80px;display:grid;grid-template-columns:520px 1fr 225px;align-items:center;gap:42px}footer>div:first-child p{font-size:13px;color:#666;margin:14px 0 0}footer nav{display:flex;gap:28px;font-size:13px}footer nav a{color:#666;text-decoration:none;white-space:nowrap}.company{text-align:right;font-size:13px}.company small{font-size:10px;color:#666}@media(max-width:800px){
body{display:flex;flex-direction:column}
header{order:1;padding:24px;height:75px}
.art{order:2;position:relative;left:0;top:0;width:100%;height:min(92vw,380px);margin-top:-8px;opacity:1;background-size:cover;background-position:62% 38%;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
main{order:3}footer{order:4}
.hero{height:auto;padding:12px 24px 56px}
.eyebrow{margin-bottom:16px}
.hero h1{font-size:clamp(44px,14.5vw,64px);line-height:.98;letter-spacing:-.05em;width:auto;margin-bottom:18px}
.lede{width:auto;max-width:520px;font-size:18px;line-height:27px}
.badge{margin-bottom:36px}
.mechanics{width:100%;grid-template-columns:1fr;gap:32px;padding-top:28px}
.mechanics article>p{width:auto;max-width:320px}
.heatmap{width:100%;max-width:198px}
footer{height:auto;padding:28px 24px 36px;grid-template-columns:1fr;gap:24px}
footer nav{flex-wrap:wrap;gap:12px 24px}
.company{text-align:left}
}
@media(max-width:380px){.hero{padding-left:20px;padding-right:20px}header,footer{padding-left:20px;padding-right:20px}}