: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}}