/* Material study. Transform only the component groups, never their projected geometry. */
.premium-site .roof-explorer-real{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:start}
.premium-site .roof-explorer-real .roof-visual{background:radial-gradient(ellipse at 50% 18%,#51584244,transparent 70%),#242920;border-radius:22px;padding:22px;box-shadow:inset 0 1px 0 #f0ead410,0 18px 48px #11160e1a}
.premium-site .roof-stage-toolbar button{min-height:44px;font-size:10px;background:transparent;border:0;color:#d3d7c3;padding:8px 4px}
.premium-site .roof-modes{display:flex;gap:4px;padding:4px;border:1px solid #dce2ce26;border-radius:11px;background:#151b136b;margin-top:15px}
.premium-site .roof-modes button{flex:1;min-height:44px;font-size:11px;padding:8px;border-radius:7px;color:#bfc6b2;background:transparent;border:1px solid transparent;white-space:nowrap}
.premium-site .roof-modes button[aria-pressed=true]{background:#d7ddc415;color:#f1f1df;border-color:#d8dfc638;box-shadow:inset 0 1px 0 #f6f8e916,0 3px 9px #0002}
.premium-site .roof-stage{position:relative;overflow:hidden;margin:16px -14px 20px}
.premium-site .roof-explorer-real .roof-real-scene{width:100%;height:auto;display:block;margin:0;overflow:visible}
.premium-site .roof-real-scene g{transform-box:fill-box;transform-origin:0 0;transition:none}
.premium-site .roof-real-scene [data-roof-part]{transform:translateY(0);transform-box:fill-box;opacity:1;transition:transform 480ms var(--as-ease),opacity 240ms;cursor:pointer}
.premium-site .roof-stage[data-roof-view=exploded] [data-roof-part]{transform:translateY(var(--explode-y))}
.premium-site .roof-stage[data-roof-view=isolated] [data-roof-part]{opacity:.13}
.premium-site .roof-stage[data-roof-view=isolated] [data-roof-part].is-selected{opacity:1;transform:translateY(-18px);filter:drop-shadow(0 7px 4px #0005)}
.premium-site .roof-stage[data-roof-view=isolated] .roof-context{opacity:.18;transition:opacity 240ms}
.premium-site .roof-real-scene [data-roof-part].is-hovered{filter:drop-shadow(0 0 2px #e4ead0);opacity:1}
.premium-site .roof-stage-caption{display:block;min-height:30px;margin:6px 14px 0;color:#c6cbb8;font-size:10px;line-height:1.65}
.premium-site .roof-explorer-real .roof-stage-footer{font-size:10px;padding-top:15px}
.premium-site .roof-explorer-real .diagram-note{margin-top:16px;font-size:10px}
.premium-site .roof-guide{display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;border:1px solid #c2cbaa40;border-radius:9px;background:#3e462e61;color:#e2e6d3;min-height:48px;padding:12px 16px;margin-top:20px;font-size:11px;text-align:left}
.premium-site .roof-guide[aria-pressed=true]{background:#5f6a4e;color:#f7f4ed}
.premium-site .roof-explorer-real .roof-groups{gap:5px;margin-bottom:16px}
.premium-site .roof-explorer-real .roof-groups button{font-size:10px;padding:9px 12px}
.premium-site .roof-explorer-real .layer-controls{min-height:240px}
.premium-site .roof-explorer-real .layer-controls button{font-size:12px;min-height:48px;padding:12px 10px}
.premium-site .roof-explorer-real .layer-controls button[aria-pressed=true]{background:linear-gradient(90deg,#dfe7c720,#dfe7c706);border-color:#aabb7e80}
.premium-site .roof-explorer-real .layer-description{margin-top:24px;padding-top:22px;min-height:0}
.premium-site .roof-detail-heading{display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:center;gap:15px;margin-bottom:19px}
.premium-site .roof-explorer-real .layer-description h3{font-size:28px;margin-bottom:0}
.premium-site .roof-explorer-real .layer-description .eyebrow{margin-bottom:10px;font-size:9px}
.premium-site .roof-detail-art{width:112px;height:100px;border-radius:12px;background:radial-gradient(ellipse,#777c5b2e,transparent 70%),#1c231a;border:1px solid #d6dcc51f}
.premium-site .roof-detail-facts{margin-top:22px;border-top:1px solid #ffffff1a}
.premium-site .roof-detail-facts>div{padding:15px 0;border-bottom:1px solid #ffffff1a}
.premium-site .roof-detail-facts dt{font-size:10px;font-weight:500;color:#dce3c8;letter-spacing:.03em;margin-bottom:8px}
.premium-site .roof-detail-facts dd{margin:0;color:#bdc5b1;font-size:12px;line-height:1.75}
.premium-site .roof-explorer-real .layer-review{margin-top:20px;padding-left:15px}
.premium-site .roof-explorer-real .layer-review p{font-size:12px;color:#d4dac5}
.premium-site .roof-explorer-real .roof-source{font-size:10px}
@media(hover:hover){.premium-site .roof-modes button:hover{background:#ffffff0b}.premium-site .roof-guide:hover{background:#5f6a4e}.premium-site .roof-explorer-real .layer-controls button:hover{background:#dfe7c714}}
@media(max-width:1100px){.premium-site .roof-explorer-real{gap:30px}.premium-site .roof-detail-heading{grid-template-columns:minmax(0,1fr) 90px}.premium-site .roof-detail-art{width:90px;height:88px}}
@media(max-width:850px){.premium-site .roof-explorer-real{grid-template-columns:1fr;gap:26px}.premium-site .roof-explorer-real .roof-visual{position:static;padding:17px;border-radius:17px}.premium-site .roof-modes{margin-top:12px}.premium-site .roof-modes button{font-size:10px}.premium-site .roof-stage{margin:12px -12px 15px}.premium-site .roof-stage-caption{font-size:9px;margin-top:0}.premium-site .roof-explorer-real .roof-groups button{flex:1;font-size:10px;padding:9px 10px;white-space:nowrap}.premium-site .roof-explorer-real .layer-controls{min-height:0}.premium-site .roof-explorer-real .layer-controls button{min-height:50px;font-size:12px}.premium-site .roof-explorer-real .layer-description h3{font-size:26px}.premium-site .roof-detail-heading{grid-template-columns:minmax(0,1fr) 100px}.premium-site .roof-detail-art{width:100px;height:92px}.premium-site .roof-explorer-real .layer-description p{font-size:13px}.premium-site .roof-detail-facts dd{font-size:12px}.premium-site .roof-explorer-real .roof-stage-footer{font-size:9px}}
@media(max-width:360px){.premium-site .roof-modes button{font-size:9px;padding-inline:5px}.premium-site .roof-detail-heading{grid-template-columns:minmax(0,1fr) 82px;gap:10px}.premium-site .roof-detail-art{width:82px;height:84px}}
@media(prefers-reduced-motion:reduce){.premium-site .roof-real-scene [data-roof-part]{transition:none!important;filter:none!important}.premium-site .roof-stage[data-roof-view=isolated] [data-roof-part].is-selected{transform:none}}

.premium-site .roof-explorer-real .roof-groups{overflow:visible;flex-wrap:wrap}
.premium-site .roof-explorer-real .roof-groups button{transition:transform var(--as-micro) var(--as-ease),border-color var(--as-micro),box-shadow var(--as-micro)}

.premium-site .roof-preview{width:100%;height:auto;aspect-ratio:830/670;display:block}.premium-site .roof-model-status{font-size:12px;line-height:1.7;padding:16px;margin:12px;color:#dce3cb;background:#1c231a;border-radius:9px}.premium-site .roof-model-status[hidden]{display:none}
.premium-site .roof-stage[data-roof-view=assembled] :is([data-roof-part=fasteners],[data-roof-part=deck-fastening],[data-roof-part=ventilation]):not(.is-selected){opacity:0;pointer-events:none}

.premium-site .roof-isolate-detail{position:absolute;top:8px;left:12px;width:170px;margin:0;padding:12px;border:1px solid #d7dfc62b;border-radius:12px;background:#20291def;box-shadow:inset 0 1px 0 #ffffff0c,0 7px 25px #0002;pointer-events:none}.premium-site .roof-isolate-detail[hidden]{display:none}.premium-site .roof-isolate-detail svg{width:100%;height:112px;display:block;margin-block:10px}.premium-site .roof-isolate-detail figcaption{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#c8d0b6}.premium-site .roof-isolate-detail>span{font-size:11px;color:#e8ebdc;display:block;line-height:1.4}
@media(max-width:850px){.premium-site .roof-isolate-detail{top:8px;left:12px;width:124px;padding:10px}.premium-site .roof-isolate-detail svg{height:72px;margin-block:5px}.premium-site .roof-isolate-detail figcaption{font-size:7px}.premium-site .roof-isolate-detail>span{font-size:9px}}
/* The explanation stays close to the selected part, with optional deeper reading. */
.premium-site .roof-basics{max-width:960px;margin-bottom:36px;color:#d0d5c2;font-size:14px;line-height:1.75}.premium-site .roof-basics>p{max-width:67ch;margin-bottom:20px}.premium-site .roof-concepts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 18px;margin-bottom:20px}.premium-site .roof-concepts details{border-block-end:1px solid #b7c19836}.premium-site .roof-concepts summary{min-height:48px;padding:14px 0;font-size:12px;font-weight:500;color:#e5ead5;cursor:pointer}.premium-site .roof-concepts p{font-size:12px;line-height:1.75;padding-bottom:18px}.premium-site .roof-field-label{display:block;font-size:11px;color:#dce3c8;letter-spacing:.03em;margin-bottom:10px}.premium-site .roof-related{margin-block:22px}.premium-site [data-roof-related]{display:flex;gap:7px;flex-wrap:wrap}.premium-site [data-roof-related] button{background:#ffffff05;border:1px solid #bdc8a82a;border-radius:8px;color:#e0e6ce;font-size:11px;padding:10px 12px;min-height:44px}.premium-site .roof-related-note,.premium-site .roof-scope-note{font-size:11px!important;line-height:1.7;color:#bdc5b1!important;margin-top:12px}.premium-site .roof-homeowner-details{margin-block:22px;border-block:1px solid #ffffff25}.premium-site .roof-homeowner-details summary{padding:16px 0;font-size:12px;min-height:48px;color:#e5ead5;cursor:pointer}.premium-site .roof-homeowner-details .roof-detail-facts{margin-top:0;border-top:0}.premium-site .roof-scope-note{padding-bottom:16px}.premium-site .roof-tour-exit{margin-top:10px;width:100%;min-height:44px;border:0;background:transparent;color:#e5ead5;font-size:12px}.premium-site .roof-tour-exit[hidden],.premium-site .roof-context-cta[hidden],.premium-site .roof-tour-note[hidden]{display:none}.premium-site .roof-tour-note{margin-top:12px;font-size:11px;color:#c8cfb8;line-height:1.6}.premium-site .roof-context-cta{border:1px solid #c2cbaa3d;border-radius:12px;background:#3e462e55;padding:20px;margin-top:22px}.premium-site .roof-context-cta p{font-size:14px;color:#f0f0df;margin-bottom:16px;line-height:1.6}.premium-site .roof-context-cta>span{display:block;margin-top:12px;font-size:10px;color:#c8cfb8;line-height:1.65}.premium-site .roof-context-cta .as-button{width:100%;font-size:12px}.premium-site .roof-stage[data-roof-view=isolated] [data-roof-part].is-related{opacity:.38}.premium-site .roof-explorer-real .roof-detail-facts dd{font-size:13px}.premium-site .roof-explorer-real button:disabled{cursor:progress}.premium-site .roof-explorer-real[data-roof-ready=fallback] button:disabled{cursor:not-allowed}
@media(max-width:850px){.premium-site .roof-concepts{grid-template-columns:repeat(2,minmax(0,1fr))}.premium-site .roof-basics{font-size:14px;margin-bottom:28px}.premium-site .roof-concepts summary{font-size:12px}.premium-site .roof-explorer-real .roof-detail-facts dd{font-size:14px;line-height:1.75}.premium-site .roof-related-note{font-size:12px!important}.premium-site .roof-homeowner-details summary{font-size:13px;line-height:1.6}.premium-site .roof-context-cta .as-button{padding-inline:12px}}
.premium-site .roof-stage .roof-model-status{position:absolute;z-index:2;top:10px;left:14px;right:14px;padding:12px;margin:0;display:block}.premium-site .roof-stage .roof-model-status[hidden]{display:none}