.roof-intro{padding-bottom:10px}.roof-workbench{grid-template-columns:minmax(0,1.3fr) minmax(340px,.7fr)}.roof-inputs{padding:24px}.roof-inputs .measurement-guide{max-width:620px;margin:0 auto 22px}.roof-fields{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.roof-fields label{font-size:11px;font-weight:800}.roof-fields span{float:right;color:#7c8178;text-transform:uppercase;font:8px monospace}.roof-fields input,.roof-fields select{background:#f8f5ec;border:1px solid #cbc6b9;width:100%;height:48px;margin-top:7px;padding:0 11px;font-weight:700}.roof-live{color:#657067;text-transform:uppercase;margin:22px 0 0;font:10px monospace}.roof-result{border-radius:0;margin:0}.roof-result>p:first-child{margin:0 0 10px}.roof-result>strong{font-size:44px}.roof-result>div{padding:14px 0}@media (max-width:1050px){.roof-workbench{grid-template-columns:1fr}}@media (max-width:650px){.roof-fields{grid-template-columns:1fr}.roof-inputs{padding:16px}.roof-intro h1{font-size:36px}}