:root{--green:#173b32;--green2:#244c41;--ink:#1e302b;--muted:#5c6a64;--yellow:#f6cb65;--paper:#f5f6f2;--line:#d8dfd8;--orange:#ae4b29;--white:#fff;--radius:6px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.6}a{color:inherit;text-underline-offset:4px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #a44b18;outline-offset:4px}input[type=range]:focus-visible{outline-offset:0}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:650;line-height:1.09;letter-spacing:-.045em}h1{font-size:clamp(2.6rem,4.4vw,4.25rem)}h2{font-size:clamp(1.8rem,2.7vw,2.5rem)}h3{font-size:1.35rem}p{margin:1rem 0}strong{font-weight:700}small{font-size:.5em}button{border:0}main{max-width:1320px;padding:0 40px;margin:auto}.header{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:20}.navwrap{max-width:1320px;min-height:91px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:40px}.logo{display:inline-flex;align-items:center;gap:10px;font-size:29px;letter-spacing:-1.5px;font-weight:800;text-decoration:none;line-height:1}.logo svg{width:37px;height:36px;color:var(--green)}.logo .dot{font-weight:400;color:var(--muted)}nav{display:flex;align-items:center;gap:34px}nav a{text-decoration:none;font-size:14px;font-weight:600}nav a:hover{color:var(--orange)}.navcta{background:var(--green);color:white;padding:13px 18px;border-radius:4px}.navcta:hover{background:var(--green2);color:white}.navcta span{margin-left:12px}.menu{display:none;background:none;color:var(--green);font-weight:700}.skip{position:absolute;left:20px;top:-100px;background:#fff;padding:12px;z-index:200}.skip:focus{top:10px}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;padding:52px 0 38px}.eyebrow,.sectionlabel{font-size:12px;letter-spacing:1.7px;font-weight:700;color:var(--green)}.intro h1{margin-top:18px}.intro h1 span{color:#657269}.introcopy{max-width:340px;margin-bottom:6px;font-size:18px}.introcopy p{margin:0 0 23px}.introline{display:flex;gap:25px;font-size:13px;color:var(--muted)}.introline span:before{content:'✓';color:var(--green);margin-right:8px}.calculator{display:grid;grid-template-columns:1fr 1.12fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;scroll-margin-top:25px}.calcinputs{padding:30px 36px}.sectionlabel{display:flex;align-items:center;justify-content:space-between;gap:12px}.sectionlabel a{font-size:13px;letter-spacing:0;font-weight:400}.calcinputs h2{font-size:29px;margin:19px 0 22px}.segmented{display:flex;border-bottom:1px solid var(--line);margin-bottom:24px;gap:20px}.segmented button{background:transparent;color:var(--muted);padding:0 0 12px;border-bottom:3px solid transparent;font-size:14px;font-weight:600}.segmented button[aria-pressed=true]{color:var(--green);border-color:var(--green)}label{display:block;font-size:14px;font-weight:600;line-height:1.35}input:not([type=checkbox]):not([type=range]),select,textarea{display:block;width:100%;margin-top:8px;border:1px solid #c6d0c8;border-radius:4px;padding:11px 12px;background:white;color:var(--ink);min-height:46px}input[type=number]{font-size:20px;font-weight:600;padding-right:38px!important}input:invalid:not(:placeholder-shown){box-shadow:none}.inputwrap{position:relative;display:block}.inputwrap>span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px}.measure-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}.measure-fields>label:last-child{grid-column:1/-1}.measure-fields>label:last-child .inputwrap{max-width:calc(50% - 9px)}.pitchlabel{display:flex;justify-content:space-between;align-items:center;margin-top:23px}.pitchlabel output{font-size:25px;font-weight:700}input[type=range]{width:100%;margin:15px 0 0;accent-color:var(--green);min-height:23px;cursor:pointer}.rangeends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.hint{font-size:13px;line-height:1.55;color:var(--muted);margin:13px 0}.calcinputs .hint{max-width:455px}.calcvisual{background:var(--green);color:white;padding:30px 34px;display:flex;flex-direction:column;position:relative;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:25px 25px}.visualtop{display:flex;justify-content:space-between;color:#bdd0c2;letter-spacing:1.6px;font-size:11px;font-weight:600}.visualtop>span:last-child{font-size:22px;line-height:1}.roofdiagram{flex:1;display:flex;align-items:center;min-height:235px;margin:10px -10px 8px}.roofdiagram svg{width:100%;height:auto;overflow:visible}.visnumbers{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;border-top:1px solid #ffffff30;padding-top:23px}.visnumbers span{font-size:14px;color:#c0d2c9;display:block}.visnumbers strong{display:block;font-size:49px;letter-spacing:-2px;line-height:1.35;font-weight:500;color:#fff}.visnumbers strong small{font-size:22px;letter-spacing:0}.visnumbers>div:first-child strong{color:var(--yellow)}.calcvisual>p{color:#c0d2c9;font-size:13px;margin:8px 0 22px}.minimetrics{display:flex;gap:27px;font-size:13px;color:#c0d2c9}.minimetrics strong{display:block;color:white;font-size:18px;font-weight:500}.costsection{display:grid;grid-template-columns:1fr 1.12fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);margin:22px 0 68px;overflow:hidden}.costsection>div{background:#fff;padding:34px 36px}.costsection h2{font-size:29px;margin-top:18px}.costsection p{max-width:490px}.costcard{background:#f9e8bb!important}.tag{display:inline-block;font-size:10px;letter-spacing:1.2px;line-height:1.4;font-weight:700;color:#5d4f2e}.costcard h3{font-size:16px;font-weight:500;letter-spacing:0;margin-top:17px}.price{font-size:clamp(2rem,3.05vw,3rem);font-weight:700;letter-spacing:-1.4px;line-height:1.25;margin-top:8px;white-space:normal}.price small{font-size:20px;letter-spacing:0}.costcard #pricebasis{font-size:13px;margin:4px 0 20px}.costcard dl{margin:0;font-size:14px}.costcard dl>div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid #80714930}.costcard dd{margin:0;text-align:right;font-weight:600}.budgetline{display:flex;justify-content:space-between;gap:15px;padding:16px 0;font-size:14px}.budgetline strong{text-align:right}.button{display:inline-flex;justify-content:center;align-items:center;gap:16px;padding:14px 20px;background:var(--green);color:#fff;font-size:14px;font-weight:600;text-decoration:none;border-radius:4px;min-height:48px;text-align:center;line-height:1.4}.button:hover{background:var(--green2)}.button.yellow{color:var(--green);background:var(--yellow)}.button.yellow:hover{background:#ffd77a}.costcard .button{display:flex;margin-top:10px;justify-content:space-between;border:1px solid #aa8238}.costcard .hint{color:#5e573f;margin-bottom:0}.assumptions{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin:25px 0 20px}.assumptions summary{cursor:pointer;font-size:14px;font-weight:600}.assumptions p{font-size:14px}.rategrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.rategrid input{font-size:17px!important;padding-right:60px!important}.check{display:flex;align-items:center;gap:10px;line-height:1.6}.check input{width:19px;height:19px;accent-color:var(--green)}#rotfields{margin-top:20px}#rotResult{padding:12px;background:#fff9eb;border:1px solid #c1a764;font-size:14px;margin-bottom:10px}#rotResult strong{display:block;font-size:21px}.error{background:#fff0eb;color:#842b16;border-left:3px solid #a44629;padding:12px;font-size:14px;margin:12px 0}.section{margin:0 0 76px}.sectionhead{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}.sectionhead h2{margin-top:14px}.textlink{font-size:14px;font-weight:600;white-space:nowrap}.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px 0}.steps a{text-decoration:none;padding:4px 24px;border-right:1px solid var(--line)}.steps a:first-child{padding-left:0}.steps a:last-child{border:0}.steps b{display:block;font-size:14px;color:var(--orange);margin-bottom:20px;font-weight:400}.steps h3{font-size:22px;letter-spacing:-.025em}.steps p{font-size:14px;color:var(--muted);margin-bottom:2px}.steps a:hover h3{text-decoration:underline}.guidegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.guidecard{display:flex;flex-direction:column;text-decoration:none;background:white;border:1px solid var(--line);padding:25px 26px;min-height:285px;border-radius:4px;transition:transform .15s,border-color .15s}.guidecard:hover{transform:translateY(-3px);border-color:var(--green)}.cardtop{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:34px;font-size:10px;letter-spacing:1px}.cardtop b{font-size:29px;font-weight:400;letter-spacing:-1px;color:#a9b7ae}.guidecard h3{font-size:24px}.guidecard p{font-size:15px;color:var(--muted);margin-top:13px}.readmore{font-size:13px;font-weight:600;margin-top:auto;padding-top:20px;display:flex;justify-content:space-between}.readmore>span{font-size:18px}.cta{background:var(--green);color:#fff;margin:0 0 64px;padding:38px 44px;display:flex;align-items:center;justify-content:space-between;gap:45px;border-radius:4px}.cta .eyebrow{color:#baccc0;font-size:10px}.cta h2{font-size:30px;margin-top:15px}.cta p{font-size:15px;color:#d7e2da;margin-bottom:0}.cta .button{flex-shrink:0}footer{background:#e9eee7;padding:45px max(40px,calc((100vw - 1240px)/2)) 0;border-top:1px solid var(--line)}.footergrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;padding-bottom:35px}.footergrid p{font-size:14px;color:var(--muted)}.footergrid>div>strong{display:block;margin:5px 0 14px;font-size:14px}.footergrid>div>a:not(.logo){display:block;font-size:14px;text-decoration:none;margin:8px 0}.footergrid>div>a:hover{text-decoration:underline}.footerline{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:18px 0;border-top:1px solid #cfd8ce;gap:25px}.pageintro{padding:56px 0 45px}.pageintro h1{margin:18px 0 22px;max-width:1000px}.pageintro p{font-size:19px;max-width:650px;color:var(--muted)}.breadcrumbs{font-size:12px;color:var(--muted);padding:25px 0 40px}.articlelayout{display:grid;grid-template-columns:minmax(0,760px) 285px;justify-content:space-between;gap:60px;margin-bottom:70px}.articlelayout h1{font-size:48px;margin-top:16px}.lead{font-size:21px;color:var(--muted)}.articlemeta{font-size:12px;border-bottom:1px solid var(--line);padding:10px 0 25px;color:var(--muted)}article section{margin:36px 0}article section h2{font-size:28px;letter-spacing:-.025em}article section p{font-size:17px;line-height:1.75}.articleaside{align-self:start;background:#e6ecdf;padding:27px;border-radius:4px;margin-top:20px;position:sticky;top:20px}.articleaside h3{font-size:25px;margin-top:22px}.articleaside p{font-size:15px}.articleaside .button{width:100%;margin:6px 0 18px}.articleaside .textlink{white-space:normal;font-size:13px}.sources{border-top:1px solid var(--line);padding-top:22px;margin:45px 0 0;font-size:13px;color:var(--muted)}.sources a{display:block;margin:8px 0}.sources p{font-size:13px}.plainarticle{max-width:780px;margin:0 0 70px}.plainarticle h2{font-size:28px;margin:34px 0 15px}.materialgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.materialcard{padding:32px;background:white;border:1px solid var(--line);border-radius:5px}.materialnum{font-size:40px;color:#8f9e93;font-weight:300;display:block;margin-bottom:20px}.materialcard h2{font-size:30px}.materialcard .lead{font-size:18px;margin:15px 0 25px}.materialcard h3{font-size:16px;letter-spacing:0}.materialcard p{font-size:16px}.materialcard a{font-size:14px}.note{padding:17px 20px;background:#eaf0e5;border-left:3px solid #658a65;font-size:14px;margin:20px 0}.note p{margin:8px 0 0}.tablewrap{overflow-x:auto}table{border-collapse:collapse;width:100%;text-align:left;margin:26px 0;background:white;font-size:15px}th,td{padding:15px 20px;border-bottom:1px solid var(--line)}th{background:var(--green);color:white;font-weight:500}.quote-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:35px;margin:0 0 75px}.quoteform{background:white;border:1px solid var(--line);border-radius:4px;padding:30px}.quoteform h2{font-size:28px;margin:20px 0}.quotegrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.wide{grid-column:1/-1}.quotegrid input:not([type=number]){font-size:16px}.spaceabove{margin-top:35px}.quoteactions{padding:28px;background:#e6ecdf;align-self:start;border-radius:5px}.quotestats{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}.quotestats span{font-size:13px;display:block}.quotestats strong{font-size:31px;line-height:1.5;letter-spacing:-1px}.printoption{padding:22px 0;border-top:1px solid #bccdbd}.printoption h3{font-size:25px;margin-top:12px}.printoption p{font-size:15px}.printoption .button{width:100%;margin:7px 0 14px}.printoption>a{font-size:13px}.angle-demo{padding:25px;background:#e6ecdf;border-radius:4px}.angle-demo label{display:flex;justify-content:space-between;align-items:center}.angle-demo output{font-size:24px}.angle-demo svg{display:block;width:100%;max-width:620px;margin:auto}#print-root{display:none}[hidden]{display:none!important}
@media(min-width:1600px){.intro{padding-top:62px}.calculator{grid-template-columns:1fr 1.12fr}}
@media(max-width:1000px){main{padding:0 25px}.navwrap{padding:0 25px;gap:20px}nav{gap:20px}nav a{font-size:13px}.intro{gap:25px}.introcopy{max-width:290px;font-size:16px}.calcinputs{padding:25px}.calcvisual{padding:25px}.visnumbers strong{font-size:37px}.visnumbers strong small{font-size:18px}.costsection>div{padding:27px}.steps a{padding:4px 17px}.guidegrid{gap:15px}.guidecard{padding:22px}.guidecard h3{font-size:22px}.articlelayout{grid-template-columns:1fr 240px;gap:30px}.articlelayout h1{font-size:40px}.articleaside{padding:23px}.quote-layout{gap:22px;grid-template-columns:1.2fr 1fr}.quoteform{padding:24px}.quoteactions{padding:22px}.quotestats{grid-template-columns:1fr}.footergrid{gap:30px}.cta{padding:30px}.cta h2{font-size:27px}}
@media(max-width:760px){html{scroll-padding-top:20px}main{padding:0 20px}.navwrap{min-height:74px;padding:0 20px}.logo{font-size:26px}.logo svg{width:31px}.menu{display:flex;align-items:center;gap:12px;font-size:14px;padding:12px 0}.menu span{font-size:21px}nav{display:none;position:absolute;top:74px;left:0;right:0;padding:15px 20px 23px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 22px #0001;z-index:100}nav.open{display:flex;flex-direction:column;align-items:stretch;gap:4px}nav a{padding:13px 10px;font-size:16px}.navcta{margin-top:7px}.intro{display:block;padding:34px 0 26px}.intro h1{font-size:39px;margin-top:14px}.introcopy{max-width:none;margin-top:20px}.introcopy p{font-size:16px;max-width:450px;margin-bottom:14px}.introline{font-size:12px;gap:20px}.calculator{display:flex;flex-direction:column}.calcvisual{order:-1;padding:19px 21px 22px;min-height:350px}.visualtop{font-size:10px}.roofdiagram{min-height:0;margin:4px auto -10px;max-width:420px;flex:0}.roofdiagram svg{height:215px;max-width:100%}.visnumbers{padding-top:13px;gap:10px}.visnumbers span{font-size:12px}.visnumbers strong{font-size:39px;line-height:1.25}.visnumbers strong small{font-size:19px}.calcvisual>p{font-size:12px;margin:5px 0 0}.minimetrics{display:none}.calcinputs{padding:24px 21px}.calcinputs h2{font-size:26px}.sectionlabel{font-size:11px;letter-spacing:1.2px}.calcinputs .hint{font-size:13px}.costsection{display:flex;flex-direction:column;gap:0;margin:18px 0 48px}.costsection>div{padding:27px 22px}.costsection>div:first-child{padding-bottom:20px}.costsection h2{font-size:26px}.price{font-size:33px}.costcard .hint{font-size:12px}.costcard dl{font-size:13px}.budgetline{font-size:13px}.section{margin-bottom:48px}.sectionhead{display:block;margin-bottom:24px}.sectionhead .textlink{display:inline-block;margin-top:18px}.sectionhead h2{font-size:29px}.eyebrow{font-size:10px;letter-spacing:1.4px}.steps{grid-template-columns:1fr 1fr;gap:22px 0;padding:23px 0}.steps a{padding:0 18px}.steps a:nth-child(odd){padding-left:0}.steps a:nth-child(even){border-right:0}.steps b{margin-bottom:12px}.steps h3{font-size:21px}.steps p{font-size:13px}.guidegrid{grid-template-columns:1fr}.guidecard{min-height:235px;padding:23px}.cardtop{margin-bottom:23px}.guidecard h3{font-size:26px}.guidecard p{font-size:15px}.readmore{padding-top:10px}.cta{display:block;padding:29px 24px;margin-bottom:45px}.cta h2{font-size:29px}.cta .button{margin-top:24px}.footergrid{grid-template-columns:1fr 1fr;gap:26px 20px}.footergrid>div:first-child{grid-column:1/-1}.footergrid>div>strong,.footergrid>div>a:not(.logo){font-size:13px}footer{padding:32px 20px 0}.footerline{display:block;font-size:11px}.footerline span{display:block;margin-top:8px}.pageintro{padding:37px 0 25px}.pageintro h1{font-size:39px}.pageintro p{font-size:17px}.articlelayout{display:block;margin-bottom:45px}.articlelayout h1{font-size:38px}.articlelayout .lead{font-size:19px}.articleaside{position:static;margin-top:36px}.articleaside h3{font-size:27px}.breadcrumbs{font-size:11px;padding:20px 0 28px}.articlemeta{font-size:11px}.articlelayout section h2{font-size:26px}.articlelayout section p{font-size:16px}.materialgrid{grid-template-columns:1fr}.materialcard{padding:26px}.materialcard h2{font-size:30px}.tablewrap table{min-width:480px}.quote-layout{display:block;margin-bottom:50px}.quoteform{padding:23px 20px}.quotegrid{gap:20px 15px}.quotegrid label{font-size:13px}.quotegrid input[type=number]{font-size:19px}.quotegrid select{font-size:14px}.quoteactions{margin-top:24px;padding:25px}.quotestats{grid-template-columns:1fr 1fr}.quotestats strong{font-size:29px}.printoption h3{font-size:28px}.plainarticle h2{font-size:26px}.sources{overflow-wrap:anywhere}th,td{padding:13px}.angle-demo{padding:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

@media print{.header,.cta,footer,.skip,.menu{display:none!important}body{background:white}main{padding:0;max-width:none}}

@media(max-width:760px){.intro h1{font-size:36px}.intro{padding-top:28px}.introcopy{margin-top:15px}.roofdiagram svg{height:200px}.calcvisual{min-height:330px}}

.partner-placement{border:1px solid var(--line);padding:28px;margin:0 0 45px;background:white}.partner-placement h3{margin-top:15px}.partner-placement .button{margin:10px 0}.partner-placement p{max-width:800px}
@media(min-width:761px) and (max-width:900px){.quote-layout,.articlelayout{display:block}.quoteactions,.articleaside{margin-top:25px;position:static}.quotestats{grid-template-columns:1fr 1fr}.quoteform{padding:28px}}

/* Comparable roof profiles and bidirectional rise calculation. */
#pitch-method-wrap{margin-top:20px;scroll-margin-top:25px}#height-input-wrap{margin-top:16px}.rise-metric{margin-top:24px;padding-top:18px;border-top:1px solid #ffffff30;display:flex;gap:18px;justify-content:space-between;align-items:center}.rise-metric span{font-size:16px;color:#dce8df}.rise-metric strong{font-size:32px;color:var(--yellow);white-space:nowrap}.angle-reference{padding-top:42px;padding-bottom:38px}.angle-reference .sectionhead{margin-bottom:20px}.reference-basis{font-weight:600;color:var(--green)}.angle-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:22px 0 30px}.angle-card{display:flex;flex-direction:column;align-items:center;padding:16px 10px 12px;background:#fff;color:var(--green);border:2px solid var(--line);border-radius:6px;text-align:center;line-height:1.4;min-width:0}.angle-card:hover{border-color:var(--green)}.angle-card[aria-pressed=true]{background:#fff5d7;border-color:var(--green)}.angle-card>strong{font-size:32px}.angle-card svg{width:100%;height:auto;display:block}.angle-card>span{font-size:14px}.angle-card>span:first-of-type{min-height:40px}.angle-card .angle-card-rise{font-size:18px;font-weight:700;margin:10px 0}.angle-card-action{margin-top:auto;text-decoration:underline;text-underline-offset:3px}.height-explainer{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;background:white;border:1px solid var(--line);padding:28px;border-radius:6px}.height-explainer svg{display:block;width:100%;height:auto}.height-explainer .height-total{display:block;font-size:54px;line-height:1.25;color:var(--green);margin-top:10px}.height-explainer .hint,.angle-reference>.hint{font-size:14px}#height-equation{font-size:16px}.rise-metric[hidden],.height-explainer[hidden]{display:none}.visnumbers strong{font-size:clamp(2rem,3.3vw,3rem)}
@media(max-width:1000px){.angle-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.height-explainer{gap:20px;padding:20px}.angle-card>span:first-of-type{min-height:20px}}
@media(max-width:760px){.angle-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.angle-card>span:first-of-type{min-height:40px}.height-explainer{grid-template-columns:1fr;padding:18px;gap:16px}.height-explainer .height-total{font-size:46px}.rise-metric{margin-top:18px;padding-top:12px}.rise-metric span{font-size:14px}.rise-metric strong{font-size:28px}.angle-reference{padding-top:32px}.visnumbers strong{font-size:35px}.visnumbers strong small{font-size:16px}}
.heightdrawing{min-width:0}.heightdrawing #heightdiagram{min-height:190px}.heightcontrols{min-width:0;border-left:1px solid var(--line);padding-left:28px}.heightcontrols>p{font-size:15px;margin:12px 0 20px}.heightcontrols .segmented{margin:20px 0}.height-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.height-fields label{font-size:14px}.height-fields input{min-width:0}.height-results{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding-top:18px;border-top:1px solid var(--line)}.height-results span{display:block;font-size:14px;color:var(--muted)}.height-results strong{display:block;font-size:clamp(1.8rem,3.2vw,2.75rem);line-height:1.3;color:var(--green)}.height-results>div:first-child strong{color:var(--orange)}#detail-height-input{margin-top:18px}#detailRange{width:100%}#height-equation{font-size:14px;color:var(--muted)}.heightcontrols .pitchlabel{gap:12px;font-size:15px}.heightcontrols .pitchlabel output{white-space:nowrap;font-size:24px}.heightcontrols .error{margin-top:14px}
@media(max-width:1000px){.height-explainer{grid-template-columns:1fr 1fr}.heightcontrols{padding-left:20px}.height-fields{grid-template-columns:1fr;gap:10px}}
@media(max-width:760px){.height-explainer{grid-template-columns:1fr}.heightcontrols{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}.height-fields{grid-template-columns:1fr 1fr;gap:12px}.height-results strong{font-size:32px}.heightcontrols>p{font-size:16px}.heightcontrols .pitchlabel{font-size:14px}.heightcontrols .pitchlabel output{font-size:21px}}
.material-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.material-photo-grid article{min-width:0}.material-photo{margin:0 0 18px}.material-photo>a{position:relative;display:block;background:#e5e9e2;border:1px solid var(--line);border-radius:5px;overflow:hidden}.material-photo img{display:block;width:100%;height:auto;aspect-ratio:1.52;object-fit:cover}.material-photo>a>span{position:absolute;right:8px;bottom:8px;background:var(--green);color:#fff;padding:4px 9px;border-radius:3px;font-size:13px}.material-photo figcaption{font-size:13px;color:var(--muted);line-height:1.5;margin-top:8px;overflow-wrap:anywhere}.material-photo-grid h3{font-size:23px}.material-photo-grid h3 a{text-decoration:none}.material-photo-grid article>p{font-size:15px;margin-top:10px}.material-examples>.hint{font-size:14px;margin-top:25px}.materialcard .material-photo{margin:22px 0}.materialcard .material-photo img{max-height:300px}.material-photo-grid figure{margin-bottom:16px}
@media(max-width:1000px){.material-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}}
@media(max-width:760px){.material-photo-grid{gap:24px 14px}.material-photo-grid h3{font-size:20px}.material-photo-grid article>p{font-size:14px}.material-photo>a>span{font-size:12px;right:4px;bottom:4px;padding:3px 6px}.material-photo figcaption{font-size:12px}.material-photo-grid img{aspect-ratio:1.25}}
.material-photo-plat img{object-fit:contain;background:#f1f3ee}.photo-description{font-size:15px;color:var(--muted)}
.material-photo-grid .material-photo figcaption{min-height:40px}
@media(max-width:760px){.material-photo-grid .material-photo figcaption{min-height:54px}}