.roofcalc{--c-pad:32px;border:1px solid var(--line);background:#fff;border-radius:28px;grid-template-columns:minmax(0,1fr);gap:0;padding:0;scroll-margin-top:90px;display:grid;position:relative;overflow:hidden;box-shadow:0 1px 2px #0b0b0b0a,0 34px 70px -48px #0b0b0b73}.roofcalc>*{margin:0 var(--c-pad);min-width:0}.roofcalc>*+*{margin-top:24px}.roofcalc>:first-child{margin-top:30px}.roofcalc>:last-child:not([data-out]){margin-bottom:30px}.roofcalc>.sb-out{margin-bottom:0}.roofcalc .rc-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;display:flex}.roofcalc .rc-title{font:700 clamp(24px, 2.6vw, 30px)/1.12 var(--font-display);letter-spacing:-.035em;margin:0}.roofcalc[data-live] .rc-head:after{content:"Updates as you type";color:#3f6212;white-space:nowrap;background:radial-gradient(circle at 14px 50%, #65a30d 3.5px, #65a30d40 4.5px, #65a30d40 7px, transparent 7.5px) var(--lime-tint);height:30px;animation:rc-in .4s var(--ease-out) both;border-radius:999px;order:2;align-items:center;padding:0 12px 0 26px;font-size:12.5px;font-weight:600;display:inline-flex}.roofcalc>.rc-intro{max-width:62ch;color:var(--ink-muted);margin-top:8px;font-size:16px;line-height:1.55}.roofcalc .rc-grid{grid-template-columns:repeat(auto-fill,minmax(min(232px,100%),1fr));align-items:start;gap:26px 18px;display:grid}.roofcalc .rc-grid>*{min-width:0}.roofcalc .rc-grid>div{grid-row:span 3;grid-template-rows:subgrid;align-content:start;row-gap:8px;display:grid}.roofcalc .rc-grid>div>:first-child{align-self:end}.roofcalc .rc-grid>div>:nth-child(2){align-self:start}.roofcalc label,.roofcalc .label{color:var(--ink);margin:0;font-size:13.5px;font-weight:600;line-height:1.35;display:block}.roofcalc>div>.label{margin-bottom:8px}.roofcalc .caption{color:var(--ink-muted);margin:0;font-size:12.5px;font-weight:450;line-height:1.45}.roofcalc .caption.err{color:var(--error);font-weight:600}.roofcalc .field{height:54px;min-height:54px;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:600 17px var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em;background:#f6f6f7;border:0;border-radius:14px;padding:0 16px;transition:box-shadow .16s,background-color .16s}.roofcalc .field:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}.roofcalc .field:focus{box-shadow:inset 0 0 0 1.5px var(--violet), 0 0 0 4px #7c3aed24;background:#fff;outline:none}.roofcalc .field[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--error), 0 0 0 4px #b423181a;background:#fff}.roofcalc .field::placeholder{color:#8a8a93;font-size:15px;font-weight:450}.roofcalc select.field{-webkit-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;background-size:16px;padding-right:40px;font-size:16px}.roofcalc .rc-in{position:relative}.roofcalc .rc-in:before,.roofcalc .rc-in:after{pointer-events:none;color:var(--ink-muted);font-weight:600;position:absolute;top:50%;transform:translateY(-50%)}.roofcalc .rc-in[data-up]:before{content:attr(data-up);font-size:17px;left:16px}.roofcalc .rc-in[data-us]:after{content:attr(data-us);font-size:14px;right:16px}.roofcalc .rc-in[data-up] .field{padding-left:32px}.roofcalc .rc-in[data-us] .field{padding-right:62px}.roofcalc .rc-pair{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:8px;display:grid}.roofcalc .rc-pair select.field{padding-left:12px;font-size:14px;font-weight:550}.roofcalc .rc-opts{background:#efeff1;border-radius:14px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:4px;min-height:54px;padding:4px;display:grid}.roofcalc .rc-opts.two,.roofcalc .rc-opts.three,.roofcalc .rc-opts.five{grid-template-columns:none}.roofcalc .rc-opts.four{grid-template-columns:repeat(auto-fit,minmax(64px,1fr));grid-auto-flow:row}.roofcalc .rc-opts .key{min-width:0;min-height:46px;box-shadow:none;color:#52525b;font:600 14px/1.2 var(--font-sans);text-align:center;white-space:normal;transition:background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .14s var(--ease-out);background:0 0;border:0;border-radius:10px;padding:4px 8px}.roofcalc .rc-opts .key[aria-checked=true]{background:var(--ink);color:#fff;box-shadow:0 8px 18px -10px #0b0b0bb3}@media (hover:hover) and (pointer:fine){.roofcalc .rc-opts .key:hover{color:var(--ink);box-shadow:none;background:#ffffffd9}.roofcalc .rc-opts .key[aria-checked=true]:hover{color:#fff;background:#1f1f23}}.roofcalc .rc-mat{flex-direction:column;gap:2px;min-height:58px}.roofcalc .rc-rate{color:#52525b;font-size:13px;font-weight:600}.roofcalc .key[aria-checked=true] .rc-rate{color:#d4d4d8}.roofcalc .rc-actions{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:30px;display:flex}.roofcalc .rc-go{border-radius:16px;min-height:56px;margin-left:auto;padding:0 30px;font-size:16px;font-weight:650}.roofcalc[data-compact="1"] .rc-go{width:100%;margin-left:0}.roofcalc .rc-actions [role=switch]{border-radius:999px;min-height:46px;padding:0 16px 0 10px;font-size:14px;font-weight:600}.roofcalc .box{background:var(--ink);width:22px;height:22px;color:var(--lime);border-radius:7px;justify-content:center;align-items:center;font-size:13px;transition:background-color .16s;display:inline-flex}.roofcalc [aria-checked=false]>.box{color:#0000;box-shadow:inset 0 0 0 1.5px var(--line-strong);background:#fff}.roofcalc .rc-actions [role=switch][aria-checked=true]{border-color:var(--line);color:var(--ink);background:#fff}.roofcalc .rc-skip{min-height:40px;padding:0 16px;font-size:14px}.roofcalc .rc-dots{gap:4px;margin-right:4px;display:inline-flex}.roofcalc .rc-dots i{background:var(--lime);border-radius:50%;width:6px;height:6px;animation:.9s ease-in-out infinite rc-dot}.roofcalc .rc-dots i:nth-child(2){animation-delay:.12s}.roofcalc .rc-dots i:nth-child(3){animation-delay:.24s}@keyframes rc-dot{0%,to{opacity:.45;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}.roofcalc>[data-out]:not(.sb-out){isolation:isolate;color:#fff;padding:30px var(--c-pad) 32px;background:#0b0b0b;margin:0;position:relative;overflow:hidden}.roofcalc>[data-out]:not(.sb-out):before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(70% 60% at 0 0,#c6ff0021,#0000 60%),radial-gradient(60% 60% at 100% 100%,#7c3aed47,#0000 65%);position:absolute;inset:0}.roofcalc .rc-result{color:#fff;background:0 0;border-radius:0;flex-direction:column;gap:8px;padding:0;display:flex}.roofcalc .rc-result[hidden]{display:none}.roofcalc .rc-result.pop{animation:rcpop .42s var(--ease-out) both}.roofcalc .rc-label{color:#a1a1aa;font-size:14px;font-weight:600;line-height:1.4}.roofcalc .rc-range{font:700 clamp(38px, 5vw, 56px)/1.02 var(--font-display);letter-spacing:-.045em;color:var(--lime);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin:2px 0 6px}.roofcalc .rc-range.tick{animation:rc-tick .36s var(--ease-out)}.roofcalc .rc-lines{flex-direction:column;margin-top:4px;display:flex}.roofcalc .rc-line{border-top:1px solid #ffffff17;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;font-size:15px;font-weight:500;display:flex}.roofcalc .rc-line span:first-child{color:#a1a1aa;flex:42%;min-width:0}.roofcalc .rc-line span:last-child{color:#fff;text-align:right;font-variant-numeric:tabular-nums;flex:0 auto;max-width:62%;font-weight:650}.roofcalc .rc-note{color:#a1a1aa;margin-top:10px;font-size:12px;font-weight:450;line-height:1.6}.roofcalc .rc-note a,.roofcalc .rc-result a{color:#fff;font-weight:600}.roofcalc .rc-result .key{color:#fff;box-shadow:none;background:#ffffff14;border-color:#ffffff24}@keyframes rcpop{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes rc-tick{0%{opacity:.45;filter:blur(2px);transform:translateY(3px)}to{opacity:1;filter:none;transform:none}}@keyframes rc-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media (width>=1000px){.calc-wide .roofcalc{--c-pad:36px;grid-template-columns:minmax(0,1fr) minmax(340px,37%)}.calc-wide .roofcalc>*{grid-column:1}.calc-wide .roofcalc>[data-out]:not(.sb-out){grid-area:1/2/span 40;margin:0;padding:40px 34px}.calc-wide .roofcalc .rc-result{position:sticky;top:104px}.calc-wide .roofcalc>:first-child{margin-top:36px}.calc-wide .roofcalc .rc-actions{margin-bottom:36px}}@media (width<=640px){.roofcalc{--c-pad:20px;border-radius:24px}.roofcalc .rc-go{width:100%;margin-left:0}}@media (prefers-reduced-motion:reduce){.roofcalc .rc-result.pop,.roofcalc .rc-range.tick,.roofcalc[data-live] .rc-head:after{animation:none}}