/* Real peel-away groups on the same house; fixed surrounding interface. */
.roof-assembly-frame,.roof-assembly-image{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.roof-assembly-frame{pointer-events:none}.roof-assembly-image{display:block}
[data-assembly-layer]{transition:transform .7s cubic-bezier(.2,.65,.2,1),opacity .5s ease;transform-box:fill-box;transform-origin:center;opacity:1}
[data-removed-shingles] [data-assembly-layer=shingles],[data-removed-starter] [data-assembly-layer=starter],[data-removed-underlayment] [data-assembly-layer=underlayment],[data-removed-drip-edge] [data-assembly-layer=drip-edge],[data-removed-ridge-cap] [data-assembly-layer=ridge-cap]{transform:translate(-24px,-66px);opacity:0;pointer-events:none}
[data-assembly-vent],[data-assembly-material],[data-assembly-airflow],[data-assembly-fastening]{display:none}
[data-vent=ridge] [data-assembly-vent=ridge],[data-vent=box] [data-assembly-vent=box],[data-vent=turbine] [data-assembly-vent=turbine],[data-material=synthetic] [data-assembly-material=synthetic],[data-material=felt] [data-assembly-material=felt],[data-component=ventilation] [data-assembly-airflow],[data-component=fastening] [data-assembly-fastening]{display:inline}
.roof-system-v3 .roof-component-info>p[data-roof-body]{font-size:.75rem;line-height:1.55;color:#636363}.roof-system-v3 .roof-component-info{width:240px;top:27%;max-height:none}.roof-system-v3 .roof-material-panel{display:none}.roof-system-v3 .roof-material-tabs{margin-top:12px}.roof-detail-link{font:500 .72rem/1.45 var(--body);padding:10px 0 0;border:0;border-top:1px solid #ddd;background:none;text-align:left;width:100%;color:#303030;text-decoration:none}.roof-detail-link:hover{text-decoration:underline;text-underline-offset:3px}.roof-detail-link:disabled{color:#777;cursor:default}
.roof-peel-controls{max-width:1560px;margin:0 auto;padding:26px 5.8% 24px;border-top:1px solid #e5e5e5;background:#fafafa;position:relative;z-index:5}.roof-peel-heading{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-bottom:19px}.roof-peel-heading p{font-size:1rem;font-weight:600;letter-spacing:-.02em}.roof-peel-heading>span{font-size:.68rem;color:#666}.roof-layer-buttons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.roof-layer-buttons>button{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #dedede;padding:12px 14px;border-radius:10px;background:white;font:500 .78rem/1.4 var(--body);color:#333;transition:background .2s,border-color .2s}.roof-layer-buttons>button:hover{border-color:#858585;box-shadow:0 4px 15px #00000009}.roof-layer-buttons>button[aria-pressed=true]{background:#eeeeed;border-color:#aaa}.roof-layer-icon{font-size:1.3rem;line-height:1;border:1px solid #ccc;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}.roof-layer-buttons>button[aria-pressed=true] .roof-layer-icon{font-size:0}.roof-layer-buttons>button[aria-pressed=true] .roof-layer-icon:after{content:'+';font-size:1.2rem}.roof-layer-buttons small{display:block;font-size:.62rem;color:#707070;margin-top:2px;font-weight:400}.roof-peel-footer{display:flex;align-items:center;gap:20px;margin-top:16px}.roof-peel-footer>button{background:none;border:0;border-bottom:1px solid #aaa;padding:4px 0;font:500 .71rem var(--body);color:#383838}.roof-peel-footer>button:disabled{color:#888;border-bottom-color:transparent}.roof-peel-footer>span{font-size:.63rem;color:#747474;margin-left:auto;max-width:370px;line-height:1.5}
.roof-system-v3 .roof-component-rail{padding-top:24px}.roof-system-v3 .roof-tab-art{background:linear-gradient(#fafafa,#f5f5f5);margin:8px -6px 0;overflow:hidden}.roof-system-v3 .roof-tab-art svg{height:112px;width:100%;max-height:none}.roof-system-v3 .roof-tab-art text,.roof-system-v3 .roof-tab-art .detail-label,.roof-system-v3 .roof-tab-art .detail-callout{display:none}.roof-tab-more{font-size:.59rem;display:block;color:#555;padding:9px 0 13px}.roof-system-v3 .roof-component-tab:before{top:-25px}.roof-system-v3 .roof-tab-summary{color:#737373;font-size:.65rem}
.roof-education{padding:40px 5.8% 64px;border-top:1px solid #e2e2e2;background:linear-gradient(135deg,#f5f5f4,#fff 70%);scroll-margin-top:110px}.roof-education-article{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;max-width:1420px;margin:auto;align-items:start}.roof-education-art{position:sticky;top:130px;border:1px solid #e0e0de;background:#fff;border-radius:18px;box-shadow:0 22px 60px #00000008;padding:26px 24px 19px}.roof-detail-eyebrow{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:#686868;margin-bottom:18px!important;line-height:1.5}.roof-detail-eyebrow>span{float:right;letter-spacing:.04em}.roof-education-art svg{display:block;width:100%;height:auto;overflow:visible}.roof-drawing-note{font-size:.65rem;line-height:1.5;color:#707070;margin-top:20px!important;max-width:430px}.roof-education-copy{padding-top:8px}.roof-education-copy h2{font:600 clamp(2rem,3vw,3.2rem)/1.08 var(--body);letter-spacing:-.055em;margin-bottom:26px}.roof-detail-sections{display:grid;gap:20px}.roof-detail-sections h3{font:600 .88rem/1.4 var(--body);margin:0 0 7px;color:#363636}.roof-detail-sections p{font-size:.82rem;color:#616161;line-height:1.7}.roof-source{display:inline-block;margin-top:25px;font-size:.66rem;line-height:1.5;color:#5a5a5a;text-decoration:underline;text-underline-offset:3px}.roof-vent-options{padding:32px 5.8%;border-top:1px solid #e0e0e0;background:#fafafa;scroll-margin-top:110px}.roof-vent-options>div:first-child{max-width:720px;margin-bottom:22px}.roof-vent-options h2{font:600 1.8rem/1.15 var(--body);letter-spacing:-.045em;margin-bottom:12px}.roof-vent-options p:not(.roof-detail-eyebrow){font-size:.82rem;line-height:1.6;color:#666}.roof-vent-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.roof-vent-choices button{border:1px solid #ddd;border-radius:12px;background:#fff;padding:20px;text-align:left;color:#333}.roof-vent-choices button[aria-pressed=true]{border-color:#444;box-shadow:inset 0 0 0 1px #444;background:#f0f0ef}.roof-vent-choices strong{display:block;font-size:.9rem;margin-bottom:10px}.roof-vent-choices span{font-size:.72rem;line-height:1.6;display:block;color:#666}.roof-vent-mini{display:flex;gap:4px;margin:10px 0}.roof-vent-mini button{border:1px solid #ddd;background:#fff;font-size:.62rem;padding:7px 10px;border-radius:20px}.roof-vent-mini button[aria-pressed=true]{background:#333;color:#fff;border-color:#333}
.roof-system-v3 .roof-tab-art .roof-art-label,.roof-system-v3 .roof-tab-art .roof-art-callout{display:none}
@media(min-width:851px){.roof-system-v3 .roof-component-info{top:auto;bottom:108px}}
.roof-detail-viewport{overflow:auto;max-height:420px;overscroll-behavior:contain;scrollbar-width:thin;border-radius:4px}.roof-detail-viewport:focus-visible{outline:2px solid #777;outline-offset:5px}.roof-detail-canvas{width:100%;min-width:100%}.roof-detail-zoom-controls{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:.65rem;color:#666}.roof-detail-zoom-controls button{border:1px solid #ddd;background:#fff;color:#333;border-radius:50%;width:32px;height:32px;font:400 1.1rem var(--body)}.roof-detail-zoom-controls button:disabled{opacity:.35}.roof-detail-zoom-controls output{width:36px;text-align:center}.roof-detail-zoom-controls span{margin-left:auto;font-size:.6rem}.is-detail-zoomed .roof-detail-viewport{cursor:all-scroll}
[data-removed-shingles] [data-assembly-fastening]{display:none}
.roof-system-v3 [hidden]{display:none!important}
@media(max-width:1150px){.roof-system-v3 .roof-component-info{width:200px;top:29%;padding:15px}.roof-system-v3 .roof-component-info>p[data-roof-body]{font-size:.69rem}.roof-system-v3 .roof-detail-link{font-size:.63rem}.roof-education-article{gap:30px}.roof-education-art{padding:19px 14px}.roof-layer-buttons>button{font-size:.7rem;padding:10px;gap:7px}.roof-peel-heading{display:block}.roof-peel-heading>span{display:block;margin-top:7px}.roof-peel-footer>span{max-width:310px}.roof-system-v3 .roof-tab-summary{font-size:.58rem}}
@media(max-width:850px){.roof-system-v3 .roof-component-info{top:auto;bottom:105px;width:250px}.roof-system-v3 .roof-tab-art svg{height:100px}.roof-education-article{grid-template-columns:1fr;gap:30px}.roof-education-art{position:static;max-width:680px;width:100%;margin:auto;padding:25px}.roof-education-copy{max-width:680px;margin:auto}.roof-education-copy h2{font-size:2.5rem}.roof-detail-sections{grid-template-columns:1fr 1fr;gap:25px}.roof-vent-choices{grid-template-columns:1fr}.roof-vent-choices button{padding:16px}.roof-layer-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}.roof-peel-footer{flex-wrap:wrap;gap:12px 20px}.roof-peel-footer>span{flex-basis:100%;max-width:none;margin:0}.roof-education{scroll-margin-top:90px}.roof-vent-options{scroll-margin-top:90px}}
@media(max-width:520px){.roof-system-v3 .roof-component-info{top:auto;bottom:auto;width:100%;margin-top:300px;padding:16px}.roof-system-v3 .roof-system-stage{min-height:590px;padding-bottom:123px}.roof-system-v3 .roof-component-info>p[data-roof-body]{font-size:.76rem}.roof-system-v3 .roof-detail-link{font-size:.72rem}.roof-system-v3 .roof-material-tabs{width:100%;max-width:200px}.roof-peel-controls{padding:22px 7%}.roof-peel-heading p{font-size:.96rem}.roof-peel-heading>span{font-size:.65rem;line-height:1.5}.roof-layer-buttons{grid-template-columns:1fr 1fr;gap:8px}.roof-layer-buttons>button{font-size:.74rem;padding:12px 10px;min-height:62px}.roof-peel-footer{gap:18px}.roof-peel-footer>button{font-size:.68rem;min-height:32px}.roof-peel-footer>span{font-size:.62rem}.roof-education{padding:26px 7% 42px}.roof-education-art{padding:20px 10px 16px;border-radius:12px}.roof-detail-eyebrow{font-size:.55rem;letter-spacing:.1em}.roof-education-copy h2{font-size:2rem}.roof-detail-sections{grid-template-columns:1fr;gap:22px}.roof-detail-sections p{font-size:.81rem}.roof-vent-options{padding:26px 7%}.roof-vent-options h2{font-size:1.65rem}.roof-system-v3 .roof-system-stage:has([data-roof-info][hidden]){min-height:438px}.roof-vent-mini button{min-height:34px;font-size:.69rem}}
@media(prefers-reduced-motion:reduce){[data-assembly-layer]{transition:none!important}}
html:not(.motion-on) [data-assembly-layer]{transition:none!important}
@media(min-width:851px){.roof-system-v3 .roof-component-info{top:auto;bottom:108px}}