@font-face{font-family:Bitter;src:url(/fonts/bitter-latin-600-normal.woff2) format("woff2");font-style:normal;font-weight:600;font-display:swap}@font-face{font-family:Karla;src:url(/fonts/karla-latin-400-normal.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Karla;src:url(/fonts/karla-latin-600-normal.woff2) format("woff2");font-style:normal;font-weight:600;font-display:swap}:root{--mineral:#E8F0EC;--paper:#F8FAF7;--slate:#172D29;--muted:#456258;--seam:#78978C;--patina:#1E6852;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--heading-sm:1.5rem;--heading-md:2rem;--heading-lg:2.5rem;--readout:3rem;color-scheme:light;accent-color:var(--patina);caret-color:var(--slate);scrollbar-color:var(--seam) var(--mineral)}*{box-sizing:border-box}body{margin:0;background:var(--mineral);color:var(--slate);font-family:Karla,sans-serif;font-size:var(--text-base);line-height:1.65;font-synthesis:none;font-variant-numeric:tabular-nums}::selection{background:var(--patina);color:var(--paper)}a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}button,input,select{font:inherit;font-size:var(--text-base)}button,a.button{cursor:pointer}a,button,input,select,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--patina);outline-offset:4px}button:disabled{cursor:not-allowed;color:var(--muted);background:var(--mineral)}[hidden]{display:none!important}h1,h2,h3,.brand{font-family:Bitter,serif;font-weight:600;line-height:1.3}h1{font-size:var(--heading-md);line-height:1.2;margin:0 0 16px;text-wrap:balance}h2{font-size:var(--heading-sm);margin:0 0 24px}h3{font-size:var(--text-xl);margin:32px 0 16px}p{margin:0 0 16px;max-width:72ch}small,.hint,.assumption,.estimate-note,figcaption{font-size:var(--text-sm);line-height:1.65}.hint,small,figcaption,.assumption{color:var(--muted)}.site-header{max-width:1200px;margin:auto;padding:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;border-bottom:1px solid var(--seam)}.brand{font-size:var(--text-xl);display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-height:48px}.brand svg{color:var(--patina)}.site-header nav{display:flex;flex-wrap:wrap;gap:0 16px}.site-header nav a{display:inline-flex;align-items:center;min-height:48px;font-size:var(--text-sm);text-decoration:none}.site-header nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;color:var(--patina)}.site-header nav a:hover{color:var(--patina);text-decoration:underline}main{max-width:1200px;margin:auto;padding:32px 16px 64px}.page-heading{margin-bottom:24px}.page-heading p{color:var(--muted);font-size:var(--text-lg);max-width:68ch}.tool-notice{font-size:var(--text-sm);color:var(--muted);margin:0 0 24px}.calculator{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}.result-sheet{background:var(--slate);color:var(--paper);padding:24px;min-width:0;border-radius:0}.result-sheet h2{font-size:var(--heading-sm);margin-bottom:16px}.result-body{display:grid;gap:24px;min-width:0}.result-body>*{min-width:0}.result-body>.assumption{grid-column:1/-1;margin:0}.pitch-figure{margin:0}.pitch-figure svg{width:100%;height:144px;display:block}.pitch-figure figcaption{margin-top:8px}.roof-fill{fill:var(--patina)}.roof-line{stroke:var(--slate);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}.dimension{stroke:var(--muted);stroke-width:1.5;fill:none;stroke-dasharray:4 4}svg text{fill:var(--slate);font-family:Karla,sans-serif;font-size:var(--text-sm)}.result-sheet .roof-fill{fill:var(--patina)}.result-sheet .roof-line{stroke:var(--paper)}.result-sheet .dimension{stroke:var(--seam)}.result-sheet svg text{fill:var(--paper)}.result-sheet :is(figcaption,.assumption,small){color:var(--paper)}.result-list{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}.result-list>div{padding:12px 0;border-bottom:1px solid var(--seam);min-width:0}.result-list>div:first-child{grid-column:1/-1;padding-top:0}dt{font-size:var(--text-sm)}dt small{display:block}dd{font-size:var(--heading-md);font-weight:600;line-height:1.3;margin:8px 0 0;overflow-wrap:anywhere}.result-list>div:first-child dd{font-size:var(--heading-lg)}.area-unit{display:inline-block;white-space:nowrap;font-size:var(--text-lg)}.bundle-row dd{font-size:var(--heading-md)}.without-diagram .result-list>div:nth-child(2) dd{font-size:var(--text-xl)}.assumption{margin:16px 0 0}.estimate-note{margin:24px 0 16px}.result-actions{display:flex;gap:12px;flex-wrap:wrap}.result-actions button{flex:1 1 auto;white-space:nowrap}.result-sheet #action-status{font-size:var(--text-sm);margin:8px 0 0}.result-sheet :focus-visible{outline-color:var(--paper)}button,.button{min-height:48px;min-width:48px;border:1px solid var(--seam);border-radius:4px;background:var(--paper);color:var(--slate);padding:8px 16px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}button:hover,.button:hover{background:var(--mineral);border-color:var(--slate)}button.primary,.primary{background:var(--patina);border-color:var(--patina);color:var(--paper)}button.primary:hover,.primary:hover{background:var(--slate);border-color:var(--slate);color:var(--paper)}.secondary{margin:16px 0 24px}.invalid-result .result-list{visibility:hidden}.invalid-result #results{position:relative;min-height:100px}.invalid-result #results:after{content:"Enter valid measurements to see your estimate.";position:absolute;inset:16px 0 auto;font-size:var(--text-base);color:var(--paper)}form{min-width:0}form>h2{font-size:var(--heading-sm)}fieldset{margin:0;padding:0;border:0;min-width:0}legend{font-weight:600;padding:0;margin-bottom:12px}.roof-section{background:var(--paper);padding:16px;margin:0 0 16px;border:1px solid var(--seam)}.roof-section legend{float:left;width:100%;font-family:Bitter,serif;font-size:var(--text-xl)}.roof-section legend+.fields-grid{clear:both}.fields-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field{display:flex;flex-direction:column;margin-bottom:16px;min-width:0}.fields-grid .field{margin-bottom:0}.fields-grid .field label{min-height:40px;line-height:1.4;display:flex;align-items:flex-end;flex-wrap:wrap;gap:4px}.field label{font-size:var(--text-sm);font-weight:600;line-height:1.5;margin-bottom:8px}.field small{margin-bottom:8px}.field input,.field select{width:100%;min-height:48px;border:1px solid var(--seam);border-radius:4px;background:var(--paper);color:var(--slate);padding:8px 12px}.field input:hover,.field select:hover{border-color:var(--slate)}input:user-invalid,input[aria-invalid=true]{outline:2px solid var(--slate);outline-offset:0}.field-error{font-size:var(--text-sm);font-weight:600;margin-top:8px}.roof-section p{margin:16px 0 0}.unit-options{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:16px}.unit-options legend{margin:0;font-size:var(--text-sm)}.unit-options label{min-height:48px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}.unit-options input{width:20px;height:20px;margin:0}.allowances{padding-top:16px}.allowances legend{float:left;width:100%;margin-bottom:24px;padding:0 0 12px;border-bottom:1px solid var(--seam)}.allowances .fields-grid{clear:both;max-width:560px}.allowances p{margin:16px 0 0}.form-error{font-size:var(--text-sm);font-weight:600;margin:16px 0}.form-error:empty{margin:0 0 16px}.remove-section{margin-top:16px}.explanation,.faq,.related,.guide-steps{margin-top:48px;max-width:800px}.explanation h2,.faq h2{margin-bottom:24px}.formula{font-size:var(--text-base);background:var(--paper);padding:24px;margin:24px 0;overflow-wrap:anywhere}.explanation>a,.related>a{display:inline-flex;min-height:48px;align-items:center;padding:8px 0}.faq details{border-bottom:1px solid var(--seam)}summary{padding:16px 8px 16px 0;min-height:56px;cursor:pointer;font-weight:600}summary:hover{background:var(--paper)}details p{padding:0 16px 8px 0}.related{display:flex;flex-direction:column;align-items:flex-start}.table-wrap{max-width:600px;overflow-x:auto;margin:24px 0}table{border-collapse:collapse;width:100%;text-align:left}caption{text-align:left;margin:0 0 16px;font-size:var(--text-sm);color:var(--muted)}th,td{border-bottom:1px solid var(--seam);padding:8px 12px}thead{background:var(--slate);color:var(--paper)}tbody th{font-weight:400}tbody tr:nth-child(2n){background:var(--paper)}.prose{max-width:760px}.prose h1{font-size:var(--heading-md);margin-bottom:24px}.prose h2{font-size:var(--heading-sm);margin-top:40px}.prose p{margin-bottom:24px}.guide-intro{max-width:760px}.guide-steps ol{padding-left:24px}.guide-steps li{padding-left:8px;margin-bottom:24px}.guide-steps h3{margin-top:0}.measurement-diagrams{display:grid;gap:24px;margin-top:32px}.measurement-diagrams figure{margin:0;background:var(--paper);padding:16px}.measurement-diagrams svg{width:100%;height:auto;display:block}.measurement-diagrams .roof-fill{fill:var(--mineral)}.measurement-diagrams figcaption{margin-top:16px;font-size:var(--text-base)}.measurement-diagrams figcaption h3{margin-top:0}.measurement-diagrams figcaption p{margin:16px 0 0}.diagram-key{margin:0;display:grid;gap:12px}.diagram-key>div{padding:8px 0;border-bottom:1px solid var(--seam)}.diagram-key dt{font-size:var(--text-base);font-weight:600}.diagram-key dd{font-size:var(--text-base);font-weight:400;line-height:1.65;margin:4px 0 0}.site-footer{max-width:1168px;margin:auto;border-top:1px solid var(--seam);padding:32px 16px;display:grid;gap:24px}.site-footer p{font-size:var(--text-sm);max-width:65ch}.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}.site-footer nav a{min-height:48px;display:inline-flex;align-items:center}.skip-link{position:absolute;left:16px;top:8px;padding:12px;background:var(--patina);color:var(--paper);z-index:10;transform:translateY(-160%)}.skip-link:focus{transform:none}.compact form>.field{max-width:360px}@media(min-width:768px){main{padding-top:40px}h1,.prose h1{font-size:var(--heading-lg)}.page-heading{margin-bottom:32px;max-width:920px}.result-sheet{padding:32px}.result-body{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}.result-body.without-diagram{grid-template-columns:minmax(0,1fr)}.pitch-figure svg{height:224px}.result-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px}.result-list>div:first-child{grid-column:span 2}.result-list>div:nth-child(2) dd{font-size:var(--heading-sm)}.compact .result-list{grid-template-columns:repeat(2,minmax(0,1fr))}.compact .result-list>div:first-child{grid-column:1/-1}.without-diagram .result-list{grid-template-columns:repeat(3,minmax(0,1fr))}.without-diagram .result-list>div:first-child{grid-column:span 2}.result-actions{max-width:400px}.roof-section .fields-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.compact form{max-width:800px}.measurement-diagrams{grid-template-columns:1fr 1fr}.site-footer{grid-template-columns:1fr auto}.site-footer>p{grid-column:1/-1}}@media(min-width:768px)and (max-width:1023px){.result-body{gap:24px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.result-list{grid-template-columns:repeat(2,minmax(0,1fr))}.result-list>div:first-child{grid-column:1/-1}.result-list>div:nth-child(2) dd{font-size:var(--heading-md)}}@media(min-width:1100px){.roof-section{padding:24px}.roof-section .fields-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.site-header nav{gap:24px}.result-sheet{padding:32px 40px}.result-list>div:first-child dd{font-size:var(--readout)}.explanation h2,.faq h2,.guide-steps>h2{font-size:var(--heading-md)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}@media print{body{background:var(--paper)}.site-header,.site-footer,.result-actions,.skip-link,button,.faq,.related{display:none!important}main{padding:0}.calculator{display:block}.result-sheet{border:1px solid var(--seam);break-inside:avoid;background:var(--paper);color:var(--slate)}.result-sheet :is(figcaption,.assumption,small){color:var(--slate)}.result-sheet .roof-line{stroke:var(--slate)}.result-sheet .dimension{stroke:var(--muted)}.result-sheet svg text{fill:var(--slate)}form{margin-top:24px}.roof-section{break-inside:avoid}.explanation{margin-top:24px}.pitch-figure svg{height:120px}}