:root{--comp-primary: hsl(216, 68%, 56%);
--comp-secondary: hsl(286, 54%, 56%);
--comp-bg: var(--content-page-bg, hsl(216, 6%, 96%));
--comp-surface: var(--content-surface-bg, #ffffff);
--comp-text: var(--content-text, hsl(216, 10%, 10%));
--comp-text-muted: var(--content-text-muted, rgba(24,33,47,0.72));
--comp-border: var(--content-border, rgba(0,0,0,0.08));
--comp-radius: 18px;
--comp-max-width: 1640px;
--comp-hero-text-width: 859px;
--content-page-bg: hsl(216, 6%, 96%);
--content-surface-bg: rgb(226, 232, 242);
--content-text: hsl(216, 10%, 10%);
--content-text-muted: rgba(24,33,47,0.72);
--content-border: rgb(226, 232, 242);
--content-accent-text: #ffffff;
--brand-primary: hsl(216, 68%, 56%);
--brand-secondary: hsl(286, 54%, 56%);
--container-max: 1640px;
--hero-text-max: 859px;
--radius-card: 18px;
--transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--page-max-width: 1640px;
--idx-max-width: 1640px;
--max-width: 1640px;
--page-reading-width: 1017px;
--reading-width: 1017px;
--content-width: 1017px;
--text-column-width: 1017px;
--text-width: 1031px;
--page-hero-reading-width: 859px;
--hero-text-width: 859px;
--hero-text-max-width: 859px;
--transition: all 0.25s ease;
--site-page-frame-mode: editorial;
--site-hero-layout-family: editorial_band;
--site-breakout-mode: controlled;
--site-frame-width-policy: page;
--site-surface-density: airy;
--page-card-radius: 18px;
--page-card-shadow: none;
--page-card-border: rgb(226, 232, 242);
--page-card-bg: rgb(226, 232, 242);
--content-heading: hsl(216, 10%, 10%);
--content-accent-ui: hsl(216, 68%, 56%);
--content-link-color: #ffffff;
--content-link-hover: hsl(286, 54%, 56%);}
main.e7f80aa_wvi .ye3f96ab7e{box-sizing:border-box;}
main.e7f80aa_wvi.aacd311_558{background-color: var(--comp-bg);
color: var(--comp-text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
overflow-x: hidden;
text-align: left;}
main.e7f80aa_wvi .b9ac9590{padding: 80px 38px;
display: flex;
flex-direction: column;
align-items: flex-start;}
main.e7f80aa_wvi .aa8a127{width: 100%;
max-width: var(--comp-max-width);
margin: 0 auto;}
main.e7f80aa_wvi .rockudssw2m{position: relative;
padding: 120px 38px;
min-height: 60vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #f0f4f9 0%, #e8eef6 100%);
overflow: hidden;
isolation: isolate;
color: hsl(220, 10%, 11%);}
main.e7f80aa_wvi .rockudssw2m::after{content: "";
position: absolute;
right: -5%;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 80%;
background-image: url("../img/compatibility-office-brand-visual-1.jpg");
background-size: cover;
background-position: center;
border-radius: var(--comp-radius);
box-shadow: 0 40px 100px rgba(0,0,0,0.1);
z-index: 1;}
main.e7f80aa_wvi .x205__e13d{max-width: var(--comp-hero-text-width);
position: relative;
z-index: 2;}
main.e7f80aa_wvi .rockudssw2m h1{font-size: clamp(2.5rem, 5vw, 3.75rem);
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
color: var(--comp-text);}
main.e7f80aa_wvi .rockudssw2m p{font-size: 1.25rem;
color: var(--comp-text-muted);
margin-bottom: 40px;
max-width: 700px;}
main.e7f80aa_wvi .ibff1508{display: flex;
gap: 16px;}
main.e7f80aa_wvi .x0a2__f19{background-color: var(--comp-primary);
color: hsl(0, 18%, 12%);
padding: 16px 36px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);}
main.e7f80aa_wvi .x0a2__f19:hover{transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(37, 99, 235, 0.3);}
main.e7f80aa_wvi .likmw3c2xb8{background-color: transparent;
border: 1px solid var(--comp-border);
color: var(--comp-text);
padding: 16px 36px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;}
main.e7f80aa_wvi .likmw3c2xb8:hover{background-color: rgba(0,0,0,0.03);
color: hsl(220, 10%, 11%);}
main.e7f80aa_wvi .lee1__977{display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 32px;
width: 100%;
margin-top: 48px;}
main.e7f80aa_wvi .gd0b6__33d97{background: var(--comp-surface);
padding: 40px;
border-radius: var(--comp-radius);
border: 1px solid var(--comp-border);
transition: border-color 0.3s;
color: hsl(220, 10%, 11%);}
main.e7f80aa_wvi .gd0b6__33d97:hover{border-color: var(--comp-primary);}
main.e7f80aa_wvi .gd0b6__33d97 h3{font-size: 1.5rem;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;}
main.e7f80aa_wvi .gd0b6__33d97 ul{list-style: none;
padding: 0;}
main.e7f80aa_wvi .gd0b6__33d97 li{padding: 12px 0;
border-bottom: 1px solid var(--comp-border);
font-size: 0.95rem;
display: flex;
justify-content: space-between;}
main.e7f80aa_wvi .gd0b6__33d97 li span:first-child{color: var(--comp-text-muted);}
main.e7f80aa_wvi .l617f__83d5{display: flex;
flex-direction: column;
gap: 40px;
width: 100%;}
main.e7f80aa_wvi .j98fa_19{display: grid;
grid-template-columns: 80px 1fr;
gap: 24px;
align-items: flex-start;}
main.e7f80aa_wvi .h63e__552b{width: 60px;
height: 60px;
background: var(--comp-primary);
color: hsl(0, 18%, 12%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;}
main.e7f80aa_wvi .ye3f96ab7e h4{font-size: 1.25rem;
margin-bottom: 8px;}
main.e7f80aa_wvi .bd580__3d369{width: 100%;
max-width: 1000px;}
main.e7f80aa_wvi .a53d38_2d7{margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--comp-border);}
main.e7f80aa_wvi .p6e9e749_dvfu{font-weight: 700;
font-size: 1.1rem;
margin-bottom: 12px;
color: var(--comp-text);}
main.e7f80aa_wvi .j99e4f057{color: var(--comp-text-muted);
font-size: 1rem;}
main.e7f80aa_wvi .i4db9c580{padding: 60px 38px;
background: #111827;
color: rgba(255,255,255,0.6);
width: 100%;}
main.e7f80aa_wvi .r01d__bc84{max-width: var(--comp-max-width);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;}
main.e7f80aa_wvi .ecb88c_c742{color: #ffffff;
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 20px;}
main.e7f80aa_wvi .ld7c7f_2ed1{color: rgba(255,255,255,0.6);
text-decoration: none;
display: block;
margin-bottom: 10px;}
main.e7f80aa_wvi .ld7c7f_2ed1:hover{color: #ffffff;}
@media (max-width: 1024px) {main.e7f80aa_wvi .rockudssw2m::after{display: none;}
main.e7f80aa_wvi .x205__e13d{max-width: 100%;}}
html, body{margin: 0;
padding: 0;}
body *, body *::before, body *::after{box-sizing: border-box;}
body{background: var(--content-page-bg, hsl(216, 6%, 96%));
color: var(--content-text, hsl(216, 10%, 10%));}
div.x205__e13d{text-align: left   !important;
align-items: flex-start   !important;}
div.x205__e13d > :is(h1, h2, p){text-align: left   !important;
max-width: min(100%, var(--page-hero-reading-width, 859px))   !important;
margin-left: 0   !important;
margin-right: auto   !important;}
div.x205__e13d > :is(div, nav, ul, ol){margin-left: 0   !important;
margin-right: auto   !important;}
div.rockudssw2m div.x205__e13d{--dca96b21e: hsl(0, 18%, 28%);
--w986aa17c12: rgba(84, 58, 58, 0.78);
--bdcc1fecc95: hsl(216, 68%, 28%);
--kd6e53_dff0: dark;}
div.rockudssw2m div.x205__e13d{--dca96b21e: hsl(0, 18%, 28%);
--w986aa17c12: rgba(84, 58, 58, 0.78);
--bdcc1fecc95: hsl(216, 68%, 28%);
--kd6e53_dff0: dark;
color: var(--dca96b21e, hsl(0, 18%, 28%))   !important;}
div.rockudssw2m div.x205__e13d :is(h1, h2, h3, h4, h5, h6, strong, b, em){color: var(--dca96b21e, hsl(0, 18%, 28%))   !important;}
div.rockudssw2m div.x205__e13d a:not([class]):not([data-track]):not([role="button"]), div.rockudssw2m div.x205__e13d a[class=""]:not([data-track]):not([role="button"]){color: var(--bdcc1fecc95, hsl(216, 68%, 28%))   !important;}
div.rockudssw2m div.x205__e13d :is(p, li, small, blockquote, figcaption, dd, dt, label){color: var(--w986aa17c12, rgba(84, 58, 58, 0.78))   !important;}
div.lee1__977 > :nth-child(2){--dca96b21e: hsl(216, 68%, 28%);
--w986aa17c12: rgba(22, 61, 119, 0.78);
--bdcc1fecc95: hsl(216, 68%, 28%);
--kd6e53_dff0: dark;}
div.lee1__977 > :nth-child(2){--dca96b21e: hsl(216, 68%, 28%);
--w986aa17c12: rgba(22, 61, 119, 0.78);
--bdcc1fecc95: hsl(216, 68%, 28%);
--kd6e53_dff0: dark;
color: var(--dca96b21e, hsl(216, 68%, 28%))   !important;}
div.lee1__977 > :nth-child(2) :is(h1, h2, h3, h4, h5, h6, strong, b, em){color: var(--dca96b21e, hsl(216, 68%, 28%))   !important;}
div.lee1__977 > :nth-child(2) a:not([class]):not([data-track]):not([role="button"]), div.lee1__977 > :nth-child(2) a[class=""]:not([data-track]):not([role="button"]){color: var(--bdcc1fecc95, hsl(216, 68%, 28%))   !important;}
div.lee1__977 > :nth-child(2) :is(p, li, small, blockquote, figcaption, dd, dt, label){color: var(--w986aa17c12, rgba(22, 61, 119, 0.78))   !important;}
div.l617f__83d5 > :nth-child(4) > :nth-child(2){--dca96b21e: hsl(216, 68%, 28%);
--w986aa17c12: rgba(22, 61, 119, 0.78);
--bdcc1fecc95: hsl(216, 68%, 28%);
--kd6e53_dff0: dark;}
div.l617f__83d5 > :nth-child(4) > :nth-child(2){--dca96b21e: hsl(216, 68%, 28%);
--w986aa17c12: rgba(22, 61, 119, 0.78);
--bdcc1fecc95: hsl(216, 68%, 28%);
--kd6e53_dff0: dark;
color: var(--dca96b21e, hsl(216, 68%, 28%))   !important;}
div.l617f__83d5 > :nth-child(4) > :nth-child(2) :is(h1, h2, h3, h4, h5, h6, strong, b, em){color: var(--dca96b21e, hsl(216, 68%, 28%))   !important;}
div.l617f__83d5 > :nth-child(4) > :nth-child(2) a:not([class]):not([data-track]):not([role="button"]), div.l617f__83d5 > :nth-child(4) > :nth-child(2) a[class=""]:not([data-track]):not([role="button"]){color: var(--bdcc1fecc95, hsl(216, 68%, 28%))   !important;}
div.l617f__83d5 > :nth-child(4) > :nth-child(2) :is(p, li, small, blockquote, figcaption, dd, dt, label){color: var(--w986aa17c12, rgba(22, 61, 119, 0.78))   !important;}