:root{--paper:#f5f3ec;--grid:#d6e1ee;--grid2:#b9cbe0;--ink:#13294b;--muted:#5b6b84;--orange:#ff7a1a;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{margin:0;color:var(--ink);font:500 17px/1.6 Rubik,Arial,sans-serif;background-color:var(--paper);background-image:linear-gradient(var(--grid2) 1px,transparent 1px),linear-gradient(90deg,var(--grid2) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:100px 100px,100px 100px,10px 10px,10px 10px;overflow-x:clip}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.mono,.tag,.receipt{font-family:'JetBrains Mono',monospace}

.bar{position:fixed;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px clamp(16px,4vw,56px);background:var(--ink);color:var(--white)}
.logo{display:flex;align-items:center;gap:10px;font:800 24px Rubik,sans-serif}
.logo i{width:22px;height:22px;border:3px solid var(--orange);border-radius:50%;background:linear-gradient(45deg,transparent 42%,var(--orange) 42% 58%,transparent 58%);animation:screw 6s linear infinite}
@keyframes screw{to{transform:rotate(360deg)}}
.bar nav{display:flex;gap:28px;font-size:15px;opacity:.8}
.bar-cta{padding:10px 18px;border-radius:8px;background:var(--orange);color:var(--ink);font-size:14px;font-weight:800}

.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;min-height:100svh;padding:110px clamp(16px,4vw,56px) 50px}
.tag{display:inline-block;padding:6px 12px;border:2px solid var(--ink);background:var(--white);font-size:13px;font-weight:700}
h1{margin-top:20px;font:800 clamp(40px,5.4vw,80px)/1.02 Rubik,sans-serif;letter-spacing:-.035em}
h1 span{background:linear-gradient(transparent 60%,var(--orange) 60% 88%,transparent 88%)}
.lead{max-width:30em;margin-top:22px;color:var(--muted);font-size:clamp(17px,1.4vw,20px)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 26px;border:2px solid var(--ink);border-radius:10px;background:var(--orange);color:var(--ink);font-weight:800;box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.ghost{background:var(--white)}

.plan{margin:0;padding:18px;border:2px solid var(--ink);background:rgb(255 255 255 / .7)}
.plan svg{display:block;width:100%;height:auto;overflow:visible}
.draw path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1.1s var(--d,0s) ease-out forwards}
.draw .wall{stroke-width:6;animation-duration:.8s}
.draw .dim{stroke:var(--orange);stroke-width:2}
@keyframes draw{to{stroke-dashoffset:0}}
.labels text{fill:var(--orange);font:700 15px 'JetBrains Mono',monospace;opacity:0;animation:fade .5s var(--d) forwards}
.checks g{opacity:0;transform-box:fill-box;transform-origin:center;animation:pop .45s var(--d) cubic-bezier(.3,1.6,.5,1) forwards}
.checks circle{fill:#1fa463}
.checks path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.checks text{fill:var(--ink);font:700 15px 'JetBrains Mono',monospace}
@keyframes fade{to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}

.estimate,.rules{padding:clamp(70px,10vw,130px) clamp(16px,4vw,56px)}
h2{font:800 clamp(36px,4.8vw,68px)/1.05 Rubik,sans-serif;letter-spacing:-.035em}
.sub{margin-top:12px;color:var(--muted)}
.estimate-grid{display:grid;grid-template-columns:1.4fr 1fr;align-items:start;gap:28px;margin-top:36px}
.tasks{display:grid;gap:10px}
.tasks label{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border:2px solid var(--ink);background:var(--white);cursor:pointer;transition:background .2s,transform .15s}
.tasks label:hover{transform:translateX(4px)}
.tasks input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--orange)}
.tasks span{flex:1}
.tasks b{font-family:'JetBrains Mono',monospace;white-space:nowrap}
.tasks label:has(input:checked){background:#fff1e4}
.receipt{position:sticky;top:96px;padding:26px 24px 34px;background:var(--white);font-size:15px;box-shadow:0 18px 30px -18px rgb(19 41 75 / .5);clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),95% 100%,90% calc(100% - 10px),85% 100%,80% calc(100% - 10px),75% 100%,70% calc(100% - 10px),65% 100%,60% calc(100% - 10px),55% 100%,50% calc(100% - 10px),45% 100%,40% calc(100% - 10px),35% 100%,30% calc(100% - 10px),25% 100%,20% calc(100% - 10px),15% 100%,10% calc(100% - 10px),5% 100%,0 calc(100% - 10px))}
.receipt-head{padding-bottom:12px;border-bottom:2px dashed var(--grid2);font-weight:700;letter-spacing:.1em;text-align:center}
#lines{display:grid;gap:8px;min-height:120px;padding:16px 0}
#lines li{display:flex;justify-content:space-between;gap:10px;animation:line .3s ease-out}
#lines .empty{color:var(--muted)}
@keyframes line{from{opacity:0;transform:translateX(-8px)}}
.receipt-total{display:flex;align-items:baseline;justify-content:space-between;padding-top:14px;border-top:2px dashed var(--grid2)}
.receipt-total b{font-size:32px}
.receipt-note{margin:6px 0 20px;color:var(--muted);font-size:13px}
.receipt .btn{width:100%}

.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.rules article{padding:28px;border:2px solid var(--ink);background:var(--white);box-shadow:6px 6px 0 var(--ink)}
.rules article b{font:700 40px 'JetBrains Mono',monospace;color:var(--orange)}
.rules h3{margin-top:14px;font-size:22px}
.rules article p{margin-top:6px;color:var(--muted)}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:24px clamp(16px,4vw,56px);background:var(--ink);color:#b9c6da;font-size:14px}

.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}

@media(max-width:900px){
  .bar nav{display:none}
  .hero,.estimate-grid{grid-template-columns:1fr}
  .receipt{position:static}
  .rules-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .logo i,#lines li{animation:none}
  .draw path{animation:none;stroke-dashoffset:0}
  .labels text,.checks g{animation:none;opacity:1}
  .js .reveal{opacity:1;transform:none;transition:none}
}