@media (max-width:900px){ .nav nav a.l{display:none} }

.hero{--hc:var(--cell);--ho:5px;position:relative;margin-inline:calc(-1 * var(--gut));height:clamp(620px,78vh,760px);height:clamp(620px,78svh,760px);border-bottom:1px solid var(--rule);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,transparent var(--ho),var(--dot) var(--ho) calc(var(--ho) + 2px),transparent calc(var(--ho) + 2px)) 0 0 / var(--hc) var(--hc);
  -webkit-mask:linear-gradient(to bottom,transparent var(--ho),#000 var(--ho) calc(var(--ho) + 2px),transparent calc(var(--ho) + 2px)) 0 0 / var(--hc) var(--hc);
  mask:linear-gradient(to bottom,transparent var(--ho),#000 var(--ho) calc(var(--ho) + 2px),transparent calc(var(--ho) + 2px)) 0 0 / var(--hc) var(--hc)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:manipulation}
.hero .still{position:absolute;bottom:var(--hc);left:calc(74% - 204px);width:408px}.hero .copy{position:absolute;left:var(--gut);top:clamp(28px,6vh,72px);background:var(--paper);padding:clamp(16px,2.4vw,28px);display:flex;flex-direction:column;gap:18px;max-width:calc(100% - 2 * var(--gut));box-shadow:var(--hair)}
.hero h1{font-size:clamp(46px,8.4vw,120px)}
.hero p{margin:0;font-size:clamp(17px,1.7vw,21px);color:var(--mute)}
.hero .row{display:flex;flex-wrap:wrap;gap:10px}
.hero .tap{position:absolute;right:var(--gut);bottom:14px;font-family:var(--f-mono);font-size:12px;color:var(--mute);background:var(--paper);padding:4px 8px;pointer-events:none}
@media (max-width:839px){ .hero .still{left:auto;right:var(--hc);width:204px} }@media (max-width:759px){ .hero{--hc:9px;--ho:3px} }
.chat{display:flex;flex-direction:column;gap:12px;font-family:var(--f-mono);font-size:14px;line-height:1.6}
.chat .you{color:var(--ink)}
.chat .you::before{content:"> ";color:var(--iris)}
.chat .step{color:var(--mute)}
.chat .step::before{content:"";display:inline-block;width:.58em;height:.58em;background:var(--spark);margin-right:.7em}.card{display:flex;gap:16px;align-items:center;padding:14px 16px;background:var(--paper);box-shadow:var(--hair);min-width:0}
.card > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.card strong{font-family:var(--f-display);font-weight:800;font-stretch:75%;font-size:20px;letter-spacing:-.03em}
.card .u{overflow-wrap:anywhere}.card .meta{color:var(--mute);font-size:13px}

.use{flex-direction:row;align-items:center;gap:16px}
.use img{flex:none;width:40px;height:40px}.use h3{font-size:clamp(18px,1.6vw,22px)}

.how .code{font-size:13px}

.states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);container-type:inline-size}
.states figure{margin:0;background:var(--paper);display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 0 14px}
.states .m{width:68px}
@container (min-width:310px){ .states .m{width:102px} }
@container (min-width:412px){ .states .m{width:136px} }
.states figcaption{font-family:var(--f-mono);font-size:12px;color:var(--mute)}

.map canvas{display:block;width:100%;height:auto;aspect-ratio:64 / 28}
.badge{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:6px 14px 6px 6px;background:var(--ink);color:var(--paper);font-family:var(--f-mono);font-size:14px;border-radius:999px}
.badge img{width:34px;height:34px;object-fit:cover;object-position:50% 75%;image-rendering:pixelated;background:var(--paper);border-radius:999px}

.price{font-family:var(--f-display);font-weight:800;font-stretch:75%;letter-spacing:-.04em;font-size:clamp(40px,5vw,64px);line-height:1}

.end{align-items:center;text-align:center;padding-block:clamp(40px,6vw,72px)}
.end .m{width:136px}
@media (min-width:1000px){ .end .m{width:170px} }
.ask{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
.ask .field{flex:1 1 220px;max-width:340px}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}.says{min-height:1.6em;margin-block:-4px}
.says p{font-family:var(--f-mono);font-size:14px;color:var(--iris);margin:0}
.says .flash{display:none;scroll-margin-top:55vh}
.says .flash:target{display:block}
.end .fine{font-size:13px}

.legal h1{font-size:clamp(36px,5.6vw,76px)}
.legal h2{margin:0}
.legal dl{margin:0;display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:6px 16px;font-size:15px}
.legal dt{font-family:var(--f-mono);font-size:13px;color:var(--mute);padding-top:2px}
.legal dd{margin:0;overflow-wrap:anywhere}
.legal .todo{font-family:var(--f-mono);font-size:13px;background:var(--spark);color:var(--ink);padding:1px 6px}@media (max-width:560px){ .legal dl{grid-template-columns:1fr} .legal dd{margin-bottom:8px} }

@media (max-width:900px){
  .map + .c{grid-column:span 12}
  #pricing .c:first-child{grid-column:span 12}
}
@media (max-width:560px){
  .hero{height:680px}
  .hero .copy{top:20px}
  .hero .tap{right:auto;left:var(--gut)}
}
@media (prefers-reduced-motion:reduce){
  .hero .tap{display:none}
  .hero canvas{cursor:default}
}