:root{--os-modal-z:100;--os-modal-radius:20px;--os-modal-radius-mobile:20px 20px 0 0;--os-modal-bg:#fff;--os-modal-shadow:0 25px 60px -25px #0f172a4d, 0 4px 12px -8px #0f172a1a;--os-modal-backdrop:#0f172a8c;--os-modal-text:#0f172a;--os-modal-text-muted:#475569;--os-modal-text-soft:#6b7280;--os-modal-surface-soft:#f9fafb;--os-modal-border:#0f172a0f;--os-modal-orange:var(--color-orange,#ea580c);--os-modal-ease-out:cubic-bezier(.16, 1, .3, 1);--os-modal-ease-in:cubic-bezier(.4, 0, .2, 1);--os-modal-open-duration:.62s;--os-modal-close-duration:.56s;--os-modal-transition:var(--os-modal-close-duration) var(--os-modal-ease-in);--os-modal-slide-distance:64px}.os-modal-root{z-index:var(--os-modal-z);justify-content:stretch;align-items:stretch;display:flex;position:fixed;inset:0}.os-modal-backdrop{opacity:0;pointer-events:auto;will-change:opacity;background:linear-gradient(#7a7e80d4 64%,#8a8278 69%,#b08161 84%,#d27d44 93%,#f4b95b 100%);position:fixed;inset:0}.os-modal-root[data-state=closed] .os-modal-backdrop{opacity:0;transition:none}.os-modal-root[data-state=opening] .os-modal-backdrop,.os-modal-root[data-state=open] .os-modal-backdrop{opacity:1;transition:opacity var(--os-modal-open-duration) var(--os-modal-ease-out)}.os-modal-root[data-state=closing] .os-modal-backdrop{opacity:0;transition:opacity var(--os-modal-close-duration) var(--os-modal-ease-in)}.os-modal-positioner{z-index:1;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;justify-content:center;align-items:flex-start;width:100%;height:100%;padding:40px 24px 80px;display:flex;position:relative;overflow-y:auto}.os-modal-surface{background:var(--os-modal-bg);border-radius:var(--os-modal-radius);width:100%;max-width:1080px;box-shadow:var(--os-modal-shadow);box-sizing:border-box;will-change:transform, opacity;opacity:0;transform:translateY(var(--os-modal-slide-distance)) scale(.985);outline:none;margin:auto;padding:40px 44px 44px;position:relative}.os-modal-root[data-state=closed] .os-modal-surface{opacity:0;transform:translateY(var(--os-modal-slide-distance)) scale(.985);transition:none}.os-modal-root[data-state=opening] .os-modal-surface,.os-modal-root[data-state=open] .os-modal-surface{opacity:1;transition:opacity var(--os-modal-open-duration) var(--os-modal-ease-out) 80ms, transform var(--os-modal-open-duration) var(--os-modal-ease-out) 80ms;transform:translateY(0)scale(1)}.os-modal-root[data-state=closing] .os-modal-surface{opacity:0;transform:translateY(var(--os-modal-slide-distance)) scale(.985);transition:opacity var(--os-modal-close-duration) var(--os-modal-ease-in), transform var(--os-modal-close-duration) var(--os-modal-ease-in)}.os-modal-close{cursor:pointer;z-index:2;box-sizing:border-box;background:#fff3ee;border:none;border-radius:6px;justify-content:center;align-items:center;width:30px;height:30px;padding:9px 11px 8px 10px;transition:background-color .15s,transform .15s;display:flex;position:absolute;top:20px;right:20px}.os-modal-close:hover{background:#ffe4d2;transform:scale(1.05)}.os-modal-close:focus-visible{outline-offset:2px;outline:2px solid #fd5000}.os-modal-close-icon{color:#fd5000;font-family:Inter, var(--font-primary), system-ui, sans-serif;font-size:16px;font-style:normal;font-weight:100;line-height:26px;display:inline-block}.os-modal-close:hover{color:var(--os-modal-text);background:#e5e7eb;transform:scale(1.05)}.os-modal-close:focus-visible{outline:2px solid var(--os-modal-orange);outline-offset:2px}.os-modal-header{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start;gap:56px;margin:0 0 36px;display:grid}.os-modal-header-text{flex-direction:column;gap:12px;display:flex}.os-modal-eyebrow{font-family:var(--font-mono,ui-monospace, SFMono-Regular, Menlo, monospace);color:var(--os-modal-text-soft);letter-spacing:.04em;margin:0;font-size:12px;font-weight:500}.os-modal-title{font-family:var(--font-primary);color:var(--os-modal-text);max-width:22ch;margin:0;font-size:clamp(22px,2vw,28px);font-weight:800;line-height:1.2}.os-modal-desc{font-family:var(--font-primary);color:var(--os-modal-text-muted);max-width:38ch;margin:0;font-size:14.5px;line-height:1.55}.os-modal-cta{color:var(--os-modal-orange);font-family:var(--font-primary);background:0 0;border:none;align-items:center;gap:6px;width:fit-content;margin-top:6px;padding:0;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.os-modal-cta:hover{text-decoration:underline}.os-modal-cta:focus-visible{outline:2px solid var(--os-modal-orange);outline-offset:4px;border-radius:4px}.os-modal-highlights{flex-direction:column;gap:14px;margin:0;padding:18px 0 0;list-style:none;display:flex}.os-modal-highlight{font-family:var(--font-primary);color:var(--os-modal-text);align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.5;display:flex}.os-modal-highlight-tick{width:20px;height:20px;color:var(--os-modal-orange);background:#ea580c1f;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;display:inline-flex}.os-modal-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.os-modal-feature{background:#fafafa;border:1px solid #0f172a0a;border-radius:16px;flex-direction:column;transition:transform .2s,box-shadow .2s;display:flex;overflow:hidden}.os-modal-feature-media{aspect-ratio:462/260;background-image:url(/images/zuper-for-roofing/sitcky-card-bg.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:12px 12px 0 0;justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.os-modal-feature-media img{object-fit:contain;object-position:center;width:80%;max-width:100%;height:80%;max-height:100%;margin:0;display:block}.os-modal-feature-media[data-position^=top]{align-items:flex-start}.os-modal-feature-media[data-position^=bottom]{align-items:flex-end}.os-modal-feature-media[data-position=top],.os-modal-feature-media[data-position=bottom]{justify-content:center}.os-modal-feature-media[data-position$=left]{justify-content:flex-start}.os-modal-feature-media[data-position$=right]{justify-content:flex-end}.os-modal-feature-media[data-position=left],.os-modal-feature-media[data-position=right]{align-items:center}.os-modal-feature-media[data-position=center] img{object-position:center}.os-modal-feature-media[data-position=top] img{object-position:top center}.os-modal-feature-media[data-position=bottom] img{object-position:bottom center}.os-modal-feature-media[data-position=left] img{object-position:center left}.os-modal-feature-media[data-position=right] img{object-position:center right}.os-modal-feature-media[data-position=top-left] img{object-position:top left}.os-modal-feature-media[data-position=top-right] img{object-position:top right}.os-modal-feature-media[data-position=bottom-left] img{object-position:bottom left}.os-modal-feature-media[data-position=bottom-right] img{object-position:bottom right}.os-modal-feature-body{background:#fafafa;padding:16px 16px 20px}.os-modal-feature-title{font-family:Inter, var(--font-primary), system-ui, sans-serif;color:#191919;align-items:center;gap:8px;margin:0 0 6px;font-size:16px;font-weight:700;line-height:24px;display:inline-flex}.os-modal-feature-title svg{color:var(--os-modal-orange);transition:transform .2s var(--os-modal-ease-out);flex-shrink:0}.os-modal-feature-link{color:inherit;align-items:center;gap:8px;text-decoration:none;transition:color .15s;display:inline-flex}.os-modal-feature-link:hover{color:var(--os-modal-orange)}.os-modal-feature-link:hover svg{transform:translate(3px)}.os-modal-feature-link:focus-visible{outline:2px solid var(--os-modal-orange);outline-offset:4px;border-radius:4px}.os-modal-feature-desc{font-family:Inter, var(--font-primary), system-ui, sans-serif;color:#191919;margin:0;font-size:16px;font-weight:400;line-height:24px}@media (width>=768px) and (width<=1023px){.os-modal-surface{padding:36px 32px 32px}.os-modal-header{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px;margin-bottom:28px}.os-modal-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}@media (width<=767px){.os-modal-surface{max-width:760px;padding:36px 28px 32px}.os-modal-header{grid-template-columns:1fr;gap:24px;margin-bottom:28px}.os-modal-features,.os-modal-features[data-count="3"]{grid-template-columns:1fr;gap:14px}}.os-modal-root[data-variant=sheet] .os-modal-positioner{align-items:flex-end;padding:0;overflow-y:hidden}.os-modal-root[data-variant=sheet] .os-modal-surface{-webkit-overflow-scrolling:touch;border-radius:var(--os-modal-radius-mobile);width:100%;max-width:100%;max-height:92vh;padding:32px 20px 24px;overflow-y:auto}.os-modal-root[data-variant=sheet][data-state=closed] .os-modal-surface,.os-modal-root[data-variant=sheet][data-state=closing] .os-modal-surface{transform:translateY(100%)}.os-modal-root[data-variant=sheet][data-state=opening] .os-modal-surface,.os-modal-root[data-variant=sheet][data-state=open] .os-modal-surface{transform:translateY(0)}.os-modal-root[data-variant=sheet] .os-modal-close{width:32px;height:32px;top:12px;right:12px}.os-modal-root[data-variant=sheet] .os-modal-header{margin-bottom:22px}.os-modal-root[data-variant=sheet] .os-modal-feature-media{aspect-ratio:16/9}.os-modal-root[data-variant=sheet] .os-modal-feature-body{background:#fafafa;padding:16px 16px 20px}@media (prefers-reduced-motion:reduce){.os-modal-backdrop,.os-modal-surface,.os-modal-feature,.os-modal-cta,.os-modal-close{transition:none!important}.os-modal-surface{transform:none!important}}.os-modal-features[data-columns="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}.os-modal-feature[data-variant=wide],.os-modal-feature[data-variant=banner]{grid-column:1/-1}.os-modal-feature[data-variant=wide]{flex-direction:row;align-items:stretch}.os-modal-feature[data-variant=wide] .os-modal-feature-media{aspect-ratio:4/3;border-radius:12px 0 0 12px;flex:0 0 48%;width:48%}.os-modal-feature[data-variant=wide] .os-modal-feature-media img{width:88%;height:88%}.os-modal-feature[data-variant=wide] .os-modal-feature-body{flex:auto;min-width:0;padding:28px 32px}.os-modal-feature[data-variant=portrait] .os-modal-feature-media{aspect-ratio:1}.os-modal-feature[data-variant=portrait] .os-modal-feature-media img{width:auto;max-width:100%;height:94%}.os-modal-feature[data-variant=banner]{background-image:url(/images/zuper-for-roofing/sitcky-card-bg.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;flex-direction:row;align-items:center;gap:24px;padding:22px 28px}.os-modal-feature[data-variant=banner] .os-modal-feature-body{background:0 0;flex:auto;order:1;min-width:0;padding:0}.os-modal-feature[data-variant=banner] .os-modal-feature-media{aspect-ratio:auto;background:0 0;border-radius:0;flex:0 0 clamp(160px,26%,280px);order:2;align-self:stretch;min-height:68px}.os-modal-feature[data-variant=banner] .os-modal-feature-media>img{width:100%;height:100%}.os-modal-feature[data-variant=banner] .os-modal-feature-media:has(.os-modal-feature-avatars){aspect-ratio:auto;max-width:none;min-height:0;overflow:visible}@media (width>=768px){.os-modal-feature[data-variant=banner] .os-modal-feature-media:has(.os-modal-feature-avatars){flex:0 0 clamp(200px,31%,300px)}}.os-modal-feature-avatars{--os-avatar-lead:clamp(52px, 6vw, 76px);justify-content:flex-end;align-items:center;width:100%;display:flex}.os-modal-feature-avatar{--s:1;--d:calc(var(--os-avatar-lead) * var(--s));width:var(--d);height:var(--d);margin-left:calc(var(--d) * -.2);box-sizing:border-box;background:var(--color-orange,#fd5000);background:linear-gradient(160deg, color-mix(in srgb, var(--color-orange,#fd5000) 82%, #fff) 0%, var(--color-orange,#fd5000) 55%, color-mix(in srgb, var(--color-orange,#fd5000) 88%, #000) 100%);border:2px solid #fff;border-radius:50%;flex:none;overflow:hidden;box-shadow:0 6px 16px #7a320a38}.os-modal-feature-avatar:first-child{margin-left:0}.os-modal-feature-avatar:first-child{--s:1;z-index:6}.os-modal-feature-avatar:nth-child(2){--s:.87;z-index:5}.os-modal-feature-avatar:nth-child(3){--s:.76;z-index:4}.os-modal-feature-avatar:nth-child(4){--s:.68;z-index:3}.os-modal-feature-avatar:nth-child(5){--s:.62;z-index:2}.os-modal-feature-avatar:nth-child(6){--s:.57;z-index:1}.os-modal-feature-media .os-modal-feature-avatar img{width:120%;max-width:none;height:auto;max-height:none;margin:4% 0 0 -10%;display:block}.os-modal-feature[data-variant=banner] .os-modal-feature-title{margin-bottom:4px;font-size:18px;line-height:26px}.os-modal-feature[data-variant=banner] .os-modal-feature-desc{max-width:62ch;font-size:14px;line-height:22px}@media (width<=1023px){.os-modal-features[data-columns="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=767px){.os-modal-features[data-columns="3"]{gap:14px}.os-modal-feature[data-variant=wide]{flex-direction:column}.os-modal-feature[data-variant=wide] .os-modal-feature-media{aspect-ratio:462/260;border-radius:12px 12px 0 0;flex:none;width:100%}.os-modal-feature[data-variant=wide] .os-modal-feature-body{padding:16px 16px 20px}.os-modal-feature[data-variant=banner]{flex-direction:column;align-items:stretch;gap:16px;padding:20px 18px}.os-modal-feature[data-variant=banner] .os-modal-feature-media{aspect-ratio:782/327;flex:none;order:3;align-self:center;width:100%;max-width:340px;min-height:0}.os-modal-feature[data-variant=banner] .os-modal-feature-title{font-size:16px;line-height:24px}.os-modal-feature[data-variant=banner] .os-modal-feature-avatars{justify-content:center}}@media (width<=639px){.os-modal-features[data-columns="3"]{gap:12px}.os-modal-feature[data-variant=portrait] .os-modal-feature-body{padding:12px 12px 14px}.os-modal-feature[data-variant=portrait] .os-modal-feature-title{gap:6px;font-size:14px;line-height:20px}.os-modal-feature[data-variant=portrait] .os-modal-feature-desc{font-size:13px;line-height:20px}}