.roof-area-hero .pill-row{margin-top:18px}.roof-area-hero .pill{white-space:nowrap}.roof-area-box>p{margin-top:6px}.roof-area-box form{margin-top:18px}.roof-area-mode{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0;padding:5px;border-radius:14px;background:#edf3ee;border:1px solid #d4ddd6;width:max-content;max-width:100%}.roof-area-mode button{appearance:none;border:0;background:transparent;color:#375044;border-radius:10px;padding:9px 13px;font:inherit;font-weight:800;cursor:pointer}.roof-area-mode button.active{background:#173b2b;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}.roof-area-hidden{display:none!important}.one-col{grid-template-columns:minmax(0,1fr)!important}.roof-area-help{margin:18px 0 2px;padding:14px 16px;border-radius:14px;background:#eef5ef;border:1px solid #c9dacd;color:#294337}.roof-area-help strong{color:#173b2b}.roof-area-error{display:none;margin-top:14px;padding:13px 15px;border-radius:12px;background:#fff0ed;border:1px solid #efc0b8;color:#762d25;font-weight:750}.roof-area-error.show{display:block}.roof-area-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px;padding:18px;border-radius:18px;background:#173b2b}.roof-area-empty{grid-column:1/-1;color:#fff;display:flex;flex-direction:column;gap:5px;padding:7px}.roof-area-empty span{color:#dce7df;font-size:.9rem}.roof-area-result{min-height:94px;border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:14px;background:rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:space-between}.roof-area-result span{color:#dce7df;font-size:.79rem;font-weight:700}.roof-area-result strong{color:#fff;font-size:1.35rem;line-height:1.15;letter-spacing:-.02em}.roof-area-result.primary{background:#f2b84b;border-color:#f2b84b}.roof-area-result.primary span,.roof-area-result.primary strong{color:#173b2b}.roof-area-result.secondary{background:#244b38}.roof-area-quick{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(220px,.9fr);gap:18px;align-items:stretch;margin:22px 0}.roof-area-quick>div{border:1px solid #d4ddd6;border-radius:16px;padding:18px;background:#fff}.roof-area-quick .formula-card{background:#173b2b;color:#fff;border-color:#173b2b}.roof-area-quick .formula-card strong{display:block;font-size:1.18rem;margin-bottom:8px}.roof-area-quick .formula-card p{color:#dce7df;margin:0}.roof-area-quick p:last-child{margin-bottom:0}.roof-area-method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:22px 0}.roof-area-method-grid>div{border:1px solid #d4ddd6;border-radius:16px;padding:17px;background:#fff}.roof-area-method-grid strong{color:#173b2b}.roof-area-method-grid p{margin:6px 0 0}.roof-area-callout{margin:22px 0;padding:18px;border:1px solid #d4ddd6;border-radius:16px;background:#f8faf8}.roof-area-callout h3{margin:0 0 8px}.roof-area-callout p:last-child{margin-bottom:0}.roof-area-sources{margin:18px 0 22px;padding:18px;border-radius:16px;border:1px solid #d4ddd6;background:#fff}.roof-area-sources p:first-child{margin-top:0}.roof-area-sources p:last-child{margin-bottom:0}.roof-area-sources a{overflow-wrap:anywhere}@media(max-width:760px){.roof-area-hero .hero-art{display:none}.roof-area-hero{padding-bottom:24px}.roof-area-hero .pill-row{gap:8px}.roof-area-hero .pill{white-space:normal}.roof-area-box{margin-top:4px}.roof-area-results{grid-template-columns:1fr;padding:13px}.roof-area-result{min-height:78px}.roof-area-method-grid,.roof-area-quick{grid-template-columns:1fr}.roof-area-mode{width:100%}.roof-area-mode button{flex:1 1 145px}}