.roofx{padding:104px 0 120px}.roofx-grid{grid-template:"stage head""stage panel""stage pick"1fr/minmax(0,1.55fr) minmax(320px,1fr);align-items:start;gap:28px 64px;display:grid}.roofx-head{grid-area:head}.roofx-head .lead{margin-top:16px}.roofx-panel{grid-area:panel}.roofx-pick{grid-area:pick}.roofx-stagewrap{grid-area:stage;position:sticky;top:88px}.roofx-stage{aspect-ratio:1;isolation:isolate;background:#a9bdd0;border-radius:24px;width:min(100%,100dvh - 120px);margin-inline:auto;position:relative;overflow:hidden}.roofx-still,.roofx-video,.roofx-pick-still{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.roofx-video{opacity:0;transition:opacity .25s}.roofx-stage.is-video .roofx-video{opacity:1}.roofx-pick-still{z-index:1;animation:.35s both roofx-in}@keyframes roofx-in{0%{opacity:0}}.roofx-pin{z-index:2;cursor:pointer;font:600 14px var(--font-sans);color:#0d1b2a;background:0 0;border:0;align-items:center;gap:8px;padding:0;animation:.3s both roofx-in;display:flex;position:absolute;transform:translate(-15px,-50%)}.roofx-dot{color:#0d1b2a;font-variant-numeric:tabular-nums;background:#fff;border-radius:999px;place-items:center;width:30px;height:30px;font-size:14px;display:grid;box-shadow:0 0 0 4px #ffffff59,0 6px 16px -6px #0d1b2a99}.roofx-pin.is-on .roofx-dot,.roofx-pin:hover .roofx-dot{background:var(--color-green)}.roofx-pinname{white-space:nowrap;background:#ffffffeb;border-radius:999px;padding:5px 10px;box-shadow:0 6px 16px -8px #0d1b2a80}.roofx-tag{z-index:2;background:var(--color-surface);border:1px solid var(--color-border);border-radius:999px;align-items:center;gap:10px;margin:0;padding:9px 15px;font-size:15px;font-weight:600;display:flex;position:absolute;top:16px;left:16px;box-shadow:0 10px 24px -18px #0d1b2a80}.roofx-count{color:var(--color-muted-foreground);font-variant-numeric:tabular-nums;font-weight:500}.roofx-controls{z-index:2;justify-content:center;gap:10px;display:flex;position:absolute;bottom:16px;left:16px;right:16px}.roofx-go,.roofx-round{cursor:pointer;font:600 15px var(--font-sans);border-radius:999px;justify-content:center;align-items:center;transition:transform .18s cubic-bezier(.16,1,.3,1),background-color .18s;display:inline-flex}.roofx-go{background:var(--color-primary);height:48px;color:var(--color-primary-foreground);border:0;gap:10px;padding:0 22px;box-shadow:0 14px 30px -16px #0d1b2ab3}.roofx-round{border:1px solid var(--color-border);background:var(--color-surface);width:48px;height:48px;color:var(--color-foreground)}.roofx-go:active,.roofx-round:active{transform:translateY(1px)scale(.97)}.roofx-go svg{color:var(--color-green)}.roofx-steps{border-top:1px solid var(--color-border);margin:0;padding:0;list-style:none}.roofx-steps li{border-bottom:1px solid var(--color-border)}.roofx-steps button{width:100%;min-height:56px;font:inherit;color:var(--color-foreground);text-align:left;cursor:pointer;background:0 0;border:0;align-items:center;gap:14px;padding:12px 0;display:flex}.roofx-steps b{font-size:17px;font-weight:600}.roofx-steps button:hover b{-webkit-text-decoration:underline 2px var(--color-border);text-decoration:underline 2px var(--color-border);text-underline-offset:5px}.roofx-n{border:1.5px solid var(--color-border);font-variant-numeric:tabular-nums;border-radius:999px;flex:none;place-items:center;width:30px;height:30px;font-size:14px;font-weight:600;transition:background-color .25s,border-color .25s;display:grid}.roofx-steps li.is-done .roofx-n{background:var(--color-secondary);border-color:var(--color-secondary)}.roofx-steps li[aria-current] .roofx-n{background:var(--color-green);border-color:var(--color-green);color:#0d1b2a}.roofx-steps p{color:var(--color-muted-foreground);max-width:44ch;margin:-6px 0 16px 44px;font-size:15px;line-height:1.55;display:none}.roofx-steps li[aria-current] p{display:block}.roofx-pick{background:var(--color-surface);border:1px solid var(--color-border);border-radius:20px;padding:14px}.roofx-seg{background:var(--color-background);border-radius:999px;gap:4px;padding:4px;display:flex}.roofx-seg button{height:42px;font:600 14px var(--font-sans);color:var(--color-foreground);cursor:pointer;background:0 0;border:0;border-radius:999px;flex:1;padding:0 14px}.roofx-seg button[aria-pressed=true]{background:var(--color-navy);color:#fff}.roofx-swatches{flex-wrap:wrap;gap:8px;margin:14px 2px 10px;display:flex}.roofx-sw{border:3px solid var(--color-surface);width:40px;height:40px;box-shadow:0 0 0 1px var(--color-border);cursor:pointer;border-radius:999px}.roofx-sw[aria-pressed=true]{box-shadow:0 0 0 2px var(--color-foreground)}.roofx-note{color:var(--color-muted-foreground);margin:0 2px;font-size:13px}.roofx-book{background:var(--color-navy);color:#fff;width:100%;margin-top:12px}.roofx-book:hover{background:#1b2e44}.roofx button:focus-visible,.roofx a:focus-visible{outline:2px solid var(--color-foreground);outline-offset:3px}@media (prefers-reduced-motion:reduce){.roofx-video,.roofx-n,.roofx-go,.roofx-round{transition:none}.roofx-pick-still,.roofx-pin{animation:none}}@media (width<=1023px){.roofx-grid{grid-template-rows:none;grid-template-columns:minmax(0,1fr);grid-template-areas:"head""stage""pick""panel";row-gap:24px}.roofx-stagewrap{position:relative;top:auto}}@media (width<=767px){.roofx{padding:64px 0 72px}.roofx-stage{border-radius:20px;width:100%}.roofx-pinname{display:none}.roofx-pin:before{content:"";position:absolute;inset:-8px}.roofx-sw{width:44px;height:44px}.roofx-seg button{height:44px}.roofx-tag{padding:8px 13px;font-size:14px;top:12px;left:12px}.roofx-controls{bottom:12px;left:12px;right:12px}}