.roof-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.roof-tag{font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:#f0f1ed;padding:7px 10px;border-radius:3px;color:#5e6860}.roof-demo button{cursor:pointer}.roof-demo button:disabled{cursor:not-allowed;opacity:.5}.roof-demo a:focus-visible,.roof-demo button:focus-visible,.roof-demo summary:focus-visible{outline:2px solid #688568;outline-offset:4px}.roof-field{border:0;padding:0;margin:0 0 22px}.roof-field legend{font-size:12px;font-weight:600;margin-bottom:10px;width:100%;display:flex;justify-content:space-between}.roof-field legend span{font-weight:400;color:#666}.roof-building-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.roof-building-grid button,.roof-segment button{font-size:12px;border:1px solid #ddd;border-radius:4px;padding:10px 8px;min-height:40px}.roof-building-grid button[aria-pressed=true],.roof-segment button[aria-pressed=true]{background:#222825;color:#fff;border-color:#222825}.roof-building-grid button{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:7px;min-height:64px;min-width:0;line-height:1.3;text-align:left}.roof-building-icon{display:block;width:42px;max-width:100%;height:auto;pointer-events:none}.roof-profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.roof-profile-grid button{position:relative;border:1px solid #ddd;border-radius:4px;padding:6px 5px 12px;font-size:11px;min-width:0;background:#fafbf8}.roof-profile-grid img{display:block;width:100%;height:auto;aspect-ratio:200/144;margin:0 0 2px;pointer-events:none}.roof-profile-kind,.roof-profile-name{display:block}.roof-profile-name{font-weight:600;line-height:1.4}.roof-profile-kind{margin-top:3px;color:#69716b;font-size:10px;line-height:1.3}.roof-profile-check{position:absolute;top:6px;right:6px;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;color:white}.roof-profile-grid button:hover{border-color:#8e9d91}.roof-profile-grid button[aria-pressed=true]{border-color:#283d31;box-shadow:inset 0 0 0 1px #283d31;background:#eff2eb}.roof-profile-grid button[aria-pressed=true] .roof-profile-check{background:#283d31}.roof-swatches{display:flex;gap:12px;padding:3px}.roof-swatches button{width:44px;height:44px;border-radius:50%;border:3px solid white;color:white;font-size:16px;box-shadow:0 0 0 1px #ddd}.roof-swatches button[aria-pressed=true]{box-shadow:0 0 0 2px #384c3c}.roof-segment{display:grid;grid-template-columns:1fr 1fr;gap:6px}.roof-source{display:flex;align-items:center;gap:7px;font-size:12px;text-decoration:underline;text-underline-offset:3px}.roof-model-note{margin-top:14px;font-size:11px;line-height:1.55;color:#61695f}.roof-model-note summary{cursor:pointer;padding-block:5px}.roof-note{font-size:11px;line-height:1.55;color:#6b706a;margin-top:10px}.roof-render-action{padding:18px 24px;border-top:1px solid #ddd}.roof-primary{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:30px;background:#222825;color:white;min-height:46px;font-size:12px;font-weight:600}.roof-error{font-size:12px;color:#9b3328;margin-top:10px}.roof-caption{position:absolute;bottom:var(--viewer-inset);left:var(--viewer-inset);pointer-events:none;display:flex;align-items:center;gap:6px;max-width:calc(100% - 140px);padding:7px 9px;border-radius:5px;background:#fffffff0;color:#545e54;font-size:clamp(9px,1.3cqw,12px);white-space:nowrap}.roof-caption span:first-child{overflow:hidden;text-overflow:ellipsis;min-width:0}.roof-caption b{color:#263528;flex-shrink:0}.roof-edit-hint{position:absolute;top:88px;left:50%;transform:translateX(-50%);z-index:21;width:min(290px,calc(100% - 100px));text-align:center;padding:6px 10px;background:#fffffff2;border:1px solid #dfe3dc;border-radius:12px;font-size:11px;line-height:1.4}.roof-dimension-fields{display:grid;gap:10px}.roof-bespoke-tile{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:40px;padding:6px;border:1px dashed #bbc3b6;border-radius:4px;background:#f5f6f1;font-size:12px}.roof-bespoke-tile small{font-size:9px;color:#66705e}.roof-future{scroll-margin-top:90px}.roof-results{margin-top:40px}.roof-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.roof-result-grid img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#eceee8;border-radius:4px}.roof-result-grid figcaption{font-size:12px;padding-top:10px;display:flex;justify-content:space-between}.roof-result-grid figcaption a{text-decoration:underline}.roof-result-placeholder{aspect-ratio:16/9;background:#f0f1ed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:13px}.roof-future{border-top:1px solid #dedfd8;margin-top:40px;padding-top:30px;display:flex;justify-content:space-between;align-items:center;gap:28px}.roof-contact{white-space:nowrap;text-decoration:underline;text-underline-offset:5px}.roof-contact,.roof-fallback{display:flex;align-items:center;gap:12px;font-size:14px}.roof-fallback{justify-content:center;padding:100px 30px;text-align:center}.roof-scene-layer{position:absolute;inset:0;opacity:1;transition:opacity .16s var(--ease-draw)}.roof-scene-layer[data-changing=true]{opacity:.3;pointer-events:none}.roof-scene-progress{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;color:#344233;font-size:12px;pointer-events:none}@media (prefers-reduced-motion:reduce){.roof-scene-layer{transition:none}.roof-demo .animate-spin{animation:none}}@media (max-width:700px){.roof-heading{align-items:flex-start;flex-direction:column}.roof-result-grid{grid-template-columns:1fr}.roof-future{align-items:flex-start;flex-direction:column}.roof-demo .ik-panel__body{overflow:visible}}@media (max-width:400px){.roof-building-grid button{grid-template-columns:minmax(0,1fr);justify-items:center;gap:4px;min-height:104px;text-align:center}.roof-building-icon{width:64px}}.roof-coating{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:12px;border-top:1px solid #e5e5df;padding-top:16px;margin-bottom:22px}.roof-coating strong{font-weight:500;color:#566056}.roof-measurement{display:block;padding:5px 7px;white-space:nowrap;border-radius:4px;background:#fffffff0;color:#33463a;font-size:10px}@container (max-width:400px){.roof-demo .viewer-view-switch .ik-switch__item svg{display:none}.roof-demo .viewer-view-switch .ik-switch__item{flex:0 0 auto;padding-inline:8px}}.roof-unit-switch{display:flex;gap:4px;margin-bottom:12px}.roof-unit-switch button{padding:6px 16px;border:1px solid #7f8b80;border-radius:6px}.roof-unit-switch button[aria-pressed=true]{background:#33463a;color:white}.roof-quota-reset progress{width:100%;height:6px;accent-color:#637a60}.roof-quota-reset{margin-top:12px}