/* SX Agency precision reconstruction — isolated to the homepage CRM showcase.
   All dashboard text, panels, graphs, controls are DOM/SVG, not an image. */
#crm-systems.sx-precision-crm{--p-light-x:76%;--p-light-y:12%;position:relative;isolation:isolate;overflow:clip;display:block;background:#020304;color:#f7f7f9;height:864px;max-width:none;width:100%;margin:0;border:0;font-family:'DM Sans',Arial,sans-serif;contain:layout style}
#crm-systems.sx-precision-crm *,#crm-systems.sx-precision-crm *::before,#crm-systems.sx-precision-crm *::after{box-sizing:border-box}
#crm-systems.sx-precision-crm button,#crm-systems.sx-precision-crm input{font-family:inherit}
#crm-systems.sx-precision-crm button{color:inherit;cursor:pointer}
#crm-systems.sx-precision-crm svg{display:block;flex:none}
#crm-systems.sx-precision-crm [hidden]{display:none!important}
#crm-systems.sx-precision-crm a:focus-visible,#crm-systems.sx-precision-crm button:focus-visible,#crm-systems.sx-precision-crm input:focus-visible,#crm-systems.sx-precision-crm .pcrm-chart-dot:focus-visible{outline:2px solid #e8edf7;outline-offset:3px}
#crm-systems .pcrm-env{position:absolute;inset:0;z-index:-3;pointer-events:none;background:url('images/sx-crm-cinematic-space.webp') center top/cover no-repeat,#020305}
#crm-systems .pcrm-env::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.39),transparent 46%,rgba(0,0,0,.12)),linear-gradient(0deg,rgba(0,0,0,.15),transparent 29%);pointer-events:none}
#crm-systems .pcrm-nebula{position:absolute;inset:0;background:radial-gradient(ellipse 28% 32% at 37% 21%,rgba(187,202,234,.09),transparent 74%),radial-gradient(ellipse 22% 40% at 4% 72%,rgba(130,145,160,.12),transparent 84%);mix-blend-mode:screen}
#crm-systems .pcrm-floor{position:absolute;bottom:0;left:0;right:0;height:165px;background:url('images/sx-crm-stone-reflection.webp') center bottom/100% 108px no-repeat,linear-gradient(to bottom,transparent,#020305 76%);mask-image:linear-gradient(to bottom,transparent 5%,black 48%,black)}
#crm-systems .pcrm-orb{position:absolute;z-index:-1;top:-10px;right:-17px;width:min(58.4vw,900px);height:min(48.5vw,743px);padding:0;display:block;border:0;background:transparent;overflow:visible;cursor:crosshair;--orb-glare:.71;transition:transform .7s ease;transform:translate3d(0,0,0);-webkit-tap-highlight-color:transparent}
#crm-systems .pcrm-orb::before{content:"";position:absolute;inset:5% 4% 0 2%;border-radius:50%;background:radial-gradient(ellipse at 46% 45%,#020305 41%,#04070c 69%,#010203 72%);box-shadow:inset 0 0 40px #e8edff23,0 0 56px #bacbe51a}
#crm-systems .pcrm-orb-art{position:absolute;inset:0;background:url('images/sphere-reference.jpg') center / 108% 108% no-repeat;mix-blend-mode:screen;border-radius:50%;opacity:.97;mask-image:radial-gradient(ellipse 50% 50% at 50% 51%,black 67%,transparent 99%)}
#crm-systems .pcrm-orb-shine{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse 22% 12% at var(--p-light-x) var(--p-light-y),rgba(255,255,255,.68),rgba(248,250,255,.14) 25%,transparent 74%),radial-gradient(ellipse 64% 23% at 73% 5%,rgba(255,255,255,.12),transparent 74%);opacity:var(--orb-glare);transition:opacity .4s}
#crm-systems .pcrm-orb-rim{position:absolute;inset:0;border-radius:50%;pointer-events:none;border:1px solid rgba(241,247,255,.13);mask-image:linear-gradient(to bottom,black,transparent 92%);box-shadow:inset 6px 5px 5px #f4f7ff38,inset -4px 4px 4px #ffffff40}
#crm-systems .pcrm-orb:hover{--orb-glare:1}
#crm-systems .pcrm-orb[aria-pressed=true]{--orb-glare:1;filter:drop-shadow(0 0 18px #ffffff25)}
#crm-systems .pcrm-marketing{position:absolute;top:0;left:max(7.6%,calc((100% - 1304px)/2));width:520px;z-index:2;pointer-events:none}
#crm-systems .pcrm-marketing a,#crm-systems .pcrm-tags span{pointer-events:auto}
#crm-systems .pcrm-first{position:absolute;top:125px;left:0;width:650px}
#crm-systems .pcrm-eyebrow{margin:0;color:#dee0e5;font-size:10px;letter-spacing:3px;line-height:1.7;font-weight:600;white-space:nowrap}
#crm-systems .pcrm-first-label{display:flex;align-items:center;gap:14px}
#crm-systems .pcrm-first-label span{height:1px;width:44px;background:rgba(237,240,245,.82);display:block}
#crm-systems .pcrm-first h1{font-family:'Manrope','DM Sans',sans-serif;margin:18px 0 0;line-height:1.13;letter-spacing:-2.9px;font-weight:600;font-size:clamp(44px,3.66vw,58px);color:#f9f9fb;white-space:nowrap}
#crm-systems .pcrm-first h1 em,#crm-systems .pcrm-second h3 em{font-weight:400;font-style:normal;color:#999aa5}
#crm-systems .pcrm-second{position:absolute;top:346px;left:0;width:465px}
#crm-systems .pcrm-second h3{font-family:'Manrope','DM Sans',sans-serif;font-size:clamp(37px,3.02vw,47px);letter-spacing:-2.2px;font-weight:570;line-height:1.13;margin:29px 0 14px;color:#fafafc;white-space:nowrap}
#crm-systems .pcrm-description{font-size:13px;line-height:1.72;max-width:435px;margin:0;color:#c5c6d0}
#crm-systems .pcrm-tags{display:flex;gap:8px;flex-wrap:nowrap;margin-top:25px}
#crm-systems .pcrm-tags span{white-space:nowrap;border-radius:99px;border:1px solid rgba(218,222,231,.22);background:linear-gradient(150deg,#191b2044,#08090c22);padding:9px 10px;font-size:9.8px;line-height:1;letter-spacing:-.1px;color:#c8cbd3;transition:background .25s,border-color .25s}
#crm-systems .pcrm-tags span:hover{border-color:#f0f1f67b;background:#ffffff17}
#crm-systems .pcrm-ctas{display:flex;gap:13px;margin-top:26px}
#crm-systems .pcrm-cta{--mx:50%;--my:30%;text-decoration:none;display:inline-flex;align-items:center;gap:15px;justify-content:space-between;white-space:nowrap;min-height:51px;border-radius:99px;padding:5px 7px 5px 20px;font-size:12px;font-weight:600;letter-spacing:-.1px;color:#fff;border:1px solid rgba(241,244,253,.59);background:radial-gradient(ellipse 64% 110% at var(--mx) var(--my),#fafcff24,transparent 90%),linear-gradient(180deg,#4d505993,#0d0e13e8 49%,#08090ed9);box-shadow:inset 0 2px 1px #ffffff77,inset 0 -1px 1px #c9d2e34c,0 6px 24px #000c,0 0 12px #d0dcf92a;transition:transform .25s ease,border-color .25s,box-shadow .25s}
#crm-systems .pcrm-cta b{width:35px;height:35px;display:grid;place-items:center;flex:none;border-radius:50%;border:1px solid #bec4d3aa;background:radial-gradient(ellipse at 35% 14%,#ffffff6e,transparent 42%),linear-gradient(145deg,#2b2e38,#090b12);box-shadow:inset 0 1px 2px #ffffff55,0 2px 6px #000b;transition:transform .22s ease,background .22s}
#crm-systems .pcrm-cta b svg{transform:rotate(-45deg)}
@media(hover:hover){#crm-systems .pcrm-cta:hover{transform:translateY(-2px);border-color:#f4f7ffed;box-shadow:inset 0 2px 1px #fff9,0 10px 29px #000e,0 0 21px #e5efff30}#crm-systems .pcrm-cta:hover b{transform:translateX(3px)}}
#crm-systems .pcrm-disclaimer{display:block;margin-top:22px;font-size:9.8px;color:#9da0ad}
#crm-systems .pcrm-intro-note{position:absolute;z-index:2;top:175px;right:5.8%;margin:0;max-width:335px;font-size:12px;line-height:1.8;color:#d3d4dc;text-shadow:0 2px 9px #000}
/* Floating marketing dashboard — primary focal object */
#crm-systems .pcrm-app{--app-scale:1;position:absolute;z-index:4;left:auto;right:4.9%;top:252px;width:54.6%;height:514px;display:grid;grid-template-columns:118px minmax(0,1fr);border-radius:17px;border:1px solid rgba(250,252,255,.65);background:linear-gradient(135deg,rgba(20,25,33,.98),rgba(5,8,13,.98) 50%,rgba(10,12,18,.98));box-shadow:0 10px 5px #0007,0 20px 42px #000e,0 0 21px #eff5ff22,inset 0 1px 1px #fff8;overflow:visible;transform:perspective(1900px) rotateY(-1.2deg) rotateX(.12deg);transform-origin:center;transition:transform .45s,box-shadow .45s}
#crm-systems .pcrm-app::before{content:"";position:absolute;inset:1px;pointer-events:none;border-radius:16px;background:linear-gradient(116deg,transparent 40%,#e0e5f60e 61%,transparent 71%);z-index:6;opacity:.7}
#crm-systems .pcrm-app:hover{box-shadow:0 18px 49px #000e,0 0 31px #f1f6ff31,inset 0 1px 1px #fff8}
#crm-systems .pcrm-sidebar{border-radius:16px 0 0 16px;display:flex;flex-direction:column;min-width:0;background:linear-gradient(165deg,rgba(3,5,8,.98),rgba(6,9,14,.99));border-right:1px solid #e4eaf520;padding:15px 9px 10px}
#crm-systems .pcrm-wordmark{display:flex;align-items:center;gap:5px;padding:0 3px 17px 4px;border-bottom:1px solid #c9d5e51e;font-size:10px;color:#a5a7b4}
#crm-systems .pcrm-wordmark strong{font-family:Manrope,sans-serif;font-size:28px;letter-spacing:-3px;line-height:1;color:#fff;font-style:italic}
#crm-systems .pcrm-wordmark span{color:#525662;font-size:15px}
#crm-systems .pcrm-wordmark small{font-size:10px;letter-spacing:1px}
#crm-systems .pcrm-navigation{display:flex;flex-direction:column;gap:3px;margin-top:12px}
#crm-systems .pcrm-navitem{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid transparent;border-radius:7px;text-align:left;padding:7px 6px;min-height:32px;color:#aeb5c3;font-size:9.8px;transition:background .2s,color .2s,border-color .2s}
#crm-systems .pcrm-navitem svg{width:12px;height:12px}
#crm-systems .pcrm-navitem:hover,#crm-systems .pcrm-navitem.is-current{border-color:#ffffff51;background:linear-gradient(100deg,#454b589e,#181d2890);color:#fff}
#crm-systems .pcrm-user{display:flex;align-items:center;gap:5px;margin-top:auto;padding-top:12px;border-top:1px solid #aab9cc1e}
#crm-systems .pcrm-user>span{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid #ffffff66;background:linear-gradient(135deg,#6b7184,#0c1017);font-size:10px}
#crm-systems .pcrm-user div{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}
#crm-systems .pcrm-user strong{font-size:7.4px;white-space:nowrap;color:#d7d9e0}
#crm-systems .pcrm-user small{font-size:6.7px;color:#858b98;white-space:nowrap}
#crm-systems .pcrm-user svg{width:11px;height:11px;color:#9b9da7}
#crm-systems .pcrm-main{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:0 16px 16px 0;background:linear-gradient(155deg,#0c1017fb 0%,#080b10ff 55%,#0a0c10f7 100%)}
#crm-systems .pcrm-app-topbar{height:53px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px 0 12px;border-bottom:1px solid #d3dbea30;background:linear-gradient(180deg,#272c38a3,#0a0e15b8)}
#crm-systems .pcrm-search{display:flex;align-items:center;gap:6px;min-width:0;width:325px;border:1px solid #e4ebfc33;border-radius:20px;padding:7px 11px;color:#969ba9;background:linear-gradient(180deg,#1e2430,#0c1017)}
#crm-systems .pcrm-search:focus-within{border-color:#d4ddfca8;box-shadow:0 0 0 2px #ffffff12}
#crm-systems .pcrm-search svg{width:12px;height:12px}
#crm-systems .pcrm-search input{background:transparent;color:white;border:0;width:100%;outline:0!important;font-size:8.5px;min-width:0}
#crm-systems .pcrm-search input::placeholder{color:#979dab}
#crm-systems .pcrm-app-tools{display:flex;align-items:center;gap:12px}
#crm-systems .pcrm-notify-wrap{position:relative}
#crm-systems .pcrm-iconbtn{border:1px solid #ffffff40;border-radius:50%;background:#171b24;position:relative;width:27px;height:27px;display:grid;place-items:center}
#crm-systems .pcrm-iconbtn i{width:4px;height:4px;border-radius:50%;background:#e9717d;position:absolute;right:3px;top:2px}
#crm-systems .pcrm-avatar{width:27px;height:27px;display:grid;place-items:center;border:1px solid #ffffff70;border-radius:50%;font-size:9px;background:linear-gradient(135deg,#606678,#090c13)}
#crm-systems .pcrm-notifications,#crm-systems .pcrm-date-menu{position:absolute;right:0;z-index:25;width:220px;top:calc(100% + 8px);padding:12px;border:1px solid #ffffff65;border-radius:11px;background:#161a23f9;box-shadow:0 16px 35px #000d;color:#fff}
#crm-systems .pcrm-notifications strong{font-size:11px}
#crm-systems .pcrm-notifications p{font-size:10px;margin:10px 0 0;padding-top:9px;border-top:1px solid #ffffff20;color:#d0d2db}
#crm-systems .pcrm-app-body{padding:11px 12px 12px;display:flex;gap:9px;flex-direction:column;min-height:0;flex:1}
#crm-systems .pcrm-app-head{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:53px}
#crm-systems .pcrm-app-head p{font-size:6.8px;letter-spacing:1.4px;color:#a4aaba;margin:0 0 4px}
#crm-systems .pcrm-app-head h4{font-family:Manrope,sans-serif;color:#f4f6fc;font-size:22px;line-height:1.05;font-weight:650;letter-spacing:-1px;margin:0 0 5px}
#crm-systems .pcrm-app-head span{color:#a7aeba;font-size:8px;line-height:1.2}
#crm-systems .pcrm-date-wrap{position:relative;align-self:flex-start;flex:none}
#crm-systems .pcrm-date{display:flex;align-items:center;gap:5px;border-radius:13px;padding:6px 8px;background:linear-gradient(160deg,#181e29,#090d12);border:1px solid #ffffff42;font-size:7.8px;white-space:nowrap}
#crm-systems .pcrm-date svg{width:11px;height:11px}
#crm-systems .pcrm-date-menu{width:164px;padding:6px}
#crm-systems .pcrm-date-menu button{display:block;width:100%;background:none;border:0;text-align:left;font-size:10px;padding:10px;border-radius:5px}
#crm-systems .pcrm-date-menu button:hover{background:#ffffff1e}
#crm-systems .pcrm-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
#crm-systems .pcrm-metric{min-height:73px;border-radius:9px;position:relative;padding:9px 9px 5px;border:1px solid #bfc9dc57;background:linear-gradient(151deg,#202633cb,#0a0d13ec 67%);overflow:hidden;transition:border-color .2s,transform .2s;outline-offset:2px}
#crm-systems .pcrm-metric:hover,#crm-systems .pcrm-metric:focus-visible{border-color:#edf3ffc7;transform:translateY(-1px)}
#crm-systems .pcrm-metric>span{display:block;color:#aeb4c1;font-size:8px;white-space:nowrap}
#crm-systems .pcrm-metric strong{font-size:21px;line-height:1.3;font-weight:600;letter-spacing:-.6px;white-space:nowrap;display:block;margin-top:3px}
#crm-systems .pcrm-metric small{font-size:8px;color:#70c9a4}
#crm-systems .pcrm-sparkline{position:absolute;right:6px;bottom:8px;width:48%;height:27px;overflow:visible}
#crm-systems .pcrm-sparkline path{stroke:#dfe5f2;stroke-width:1.7;fill:none;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px #ffffff50)}
#crm-systems .pcrm-panel{background:linear-gradient(155deg,#10151def,#06080def);border:1px solid #cdd8ed53;border-radius:9px;min-width:0;overflow:hidden;padding:8px 8px 7px}
#crm-systems .pcrm-panel-title{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:16px;margin-bottom:5px}
#crm-systems .pcrm-panel-title strong{font-size:10px;font-weight:600;white-space:nowrap}
#crm-systems .pcrm-panel-title strong span{font-size:8px;display:inline-block;margin-left:3px;color:#d8e0ec;border:1px solid #ffffff30;border-radius:14px;padding:1px 5px}
#crm-systems .pcrm-panel-title small,#crm-systems .pcrm-panel-title>span{font-size:7.4px;color:#a6adbc;white-space:nowrap}
#crm-systems .pcrm-data-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8px;min-height:171px}
#crm-systems .pcrm-lanes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;height:136px}
#crm-systems .pcrm-lane{display:flex;flex-direction:column;gap:4px;padding:7px 5px 3px;text-align:left;min-width:0;border:1px solid #d5dff24d;border-radius:7px;background:linear-gradient(166deg,#1c2330c7,#080b10ed);overflow:hidden;transition:border-color .2s,background .2s}
#crm-systems .pcrm-lane:hover,#crm-systems .pcrm-lane.is-active{border-color:#e6f1ffac;background:#26303d91}
#crm-systems .pcrm-lane>span:first-child{color:#c9ced9;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#crm-systems .pcrm-lane strong{font-size:17px;line-height:1.2;font-weight:650}
#crm-systems .pcrm-lane small{font-size:6.5px;color:#a5aebe;white-space:nowrap}
#crm-systems .pcrm-lane-won{border-color:#83c4b18a;background:linear-gradient(155deg,#132b26b3,#0b1212ee)}
#crm-systems .pcrm-lane-won>span:first-child,#crm-systems .pcrm-lane-won small{color:#92debb}
#crm-systems .pcrm-bars{display:flex;align-items:flex-end;gap:2px;height:42px;margin-top:auto;width:100%}
#crm-systems .pcrm-bars i{display:block;min-width:0;flex:1;height:var(--bar);background:linear-gradient(0deg,#7d8594,#e8edf6);opacity:.79;border-radius:1px 1px 0 0}
#crm-systems .pcrm-lane-won .pcrm-bars i{background:linear-gradient(0deg,#348f73,#b2f4d6)}
#crm-systems .pcrm-revenue{display:flex;flex-direction:column}
#crm-systems .pcrm-chart-wrap{height:125px;position:relative;flex:1;min-height:0}
#crm-systems .pcrm-chartsvg{width:100%;height:100%;overflow:visible}
#crm-systems .pcrm-gridlines path{stroke:#8994a528;stroke-width:.8;fill:none}
#crm-systems .pcrm-axis{fill:#9ca5b7;font-size:10px}
#crm-systems .pcrm-revenue-line{fill:none;stroke:#f4f7fc;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px #d5e6ff90)}
#crm-systems .pcrm-chart-dot{fill:#e9f1ff;stroke:#cbd9ee;stroke-width:1px;cursor:pointer;transition:r .2s}
#crm-systems .pcrm-chart-dot:hover,#crm-systems .pcrm-chart-dot:focus{r:6}
#crm-systems .pcrm-chart-tooltip{position:absolute;z-index:3;right:3px;top:10px;font-size:8px;background:#191f2bee;border:1px solid #ffffff53;border-radius:5px;padding:6px 9px;pointer-events:none}
#crm-systems .pcrm-chart-months{display:flex;justify-content:space-between;color:#929aab;font-size:7px;padding-left:13%;margin-top:0}
#crm-systems .pcrm-bottom-grid{display:grid;grid-template-columns:1.05fr 1fr .9fr;gap:8px;flex:1;min-height:0;max-height:124px}
#crm-systems .pcrm-bottom-grid .pcrm-panel{padding:7px}
#crm-systems .pcrm-bottom-grid .pcrm-panel-title strong{font-size:9.5px}
#crm-systems .pcrm-activity-row{display:flex;align-items:center;gap:5px;margin-top:5px;min-width:0}
#crm-systems .pcrm-row-icon{display:grid;place-items:center;flex:none;width:19px;height:19px;border-radius:50%;border:1px solid #ffffff39;background:linear-gradient(145deg,#363d4a,#080c12)}
#crm-systems .pcrm-row-icon svg{width:11px;height:11px}
#crm-systems .pcrm-activity-row>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
#crm-systems .pcrm-activity-row strong{font-size:7.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#crm-systems .pcrm-activity-row small{font-size:6px;color:#939eaf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#crm-systems .pcrm-activity-row time{font-size:6px;color:#a4abb9;white-space:nowrap}
#crm-systems .pcrm-task{cursor:pointer;display:flex;align-items:center;gap:6px;min-height:26px;color:#e6e8ed;font-size:7.6px;position:relative}
#crm-systems .pcrm-task input{position:absolute;opacity:0;width:19px;height:19px;left:0;cursor:pointer}
#crm-systems .pcrm-task-check{display:block;flex:none;width:17px;height:17px;border-radius:50%;border:1px solid #c9d1dfba;background:linear-gradient(#202630,#0c1016)}
#crm-systems .pcrm-task input:checked+.pcrm-task-check{background:#386c59;box-shadow:inset 0 0 0 3px #121b18}
#crm-systems .pcrm-task input:focus-visible+.pcrm-task-check{outline:2px solid white;outline-offset:2px}
#crm-systems .pcrm-task input:checked~span:last-child{text-decoration:line-through;color:#899b95}
#crm-systems .pcrm-task span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#crm-systems .pcrm-task small{font-size:6.3px;color:#a2a8b5;display:block;margin-top:1px;text-decoration:none}
#crm-systems .pcrm-location{display:grid;grid-template-columns:minmax(0,1fr) 1.2fr 17px;gap:6px;align-items:center;min-height:19px;font-size:7.4px;color:#d4d8e0}
#crm-systems .pcrm-track{background:#2b303a;height:5px;display:block;border-radius:99px;overflow:hidden}
#crm-systems .pcrm-track i{height:100%;display:block;background:linear-gradient(90deg,#a9b0bd,#f7faff);border-radius:99px}
#crm-systems .pcrm-location strong{font-weight:500;text-align:right}
#crm-systems .pcrm-demo-toast{position:absolute;z-index:10;bottom:28px;left:50%;transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;padding:9px 17px;border:1px solid #ffffff6c;border-radius:30px;background:#19202af2;box-shadow:0 10px 25px #000c;font-size:11px}
#crm-systems .pcrm-demo-toast.is-visible{opacity:1;transform:translate(-50%,0)}
/* Adapt rather than shrink unreadably on small screens */
@media(min-width:1700px){#crm-systems.sx-precision-crm{height:890px}#crm-systems .pcrm-app{width:52.5%;top:252px;right:6%}}
@media(min-width:1151px) and (max-width:1350px){#crm-systems .pcrm-marketing{left:5.2%}#crm-systems .pcrm-first h1{font-size:47px}#crm-systems .pcrm-second h3{font-size:40px}#crm-systems .pcrm-second{width:425px}#crm-systems .pcrm-app{width:58.7%;right:2.9%}#crm-systems .pcrm-intro-note{right:4%}#crm-systems .pcrm-tags{gap:5px}#crm-systems .pcrm-tags span{padding:8px 7px;font-size:9px}}
@media(max-width:1150px){#crm-systems.sx-precision-crm{height:auto;min-height:1050px;padding:72px 5% 100px;overflow:hidden}#crm-systems .pcrm-marketing{position:relative;left:auto;top:auto;width:100%;max-width:720px}#crm-systems .pcrm-first,#crm-systems .pcrm-second{position:relative;top:auto;left:auto;width:auto}#crm-systems .pcrm-first h1{font-size:clamp(42px,5.5vw,64px);white-space:normal}#crm-systems .pcrm-second{margin-top:70px}#crm-systems .pcrm-intro-note{top:150px;right:5%;max-width:265px}#crm-systems .pcrm-app{position:relative;width:min(880px,100%);height:530px;right:auto;top:auto;margin:72px auto 0}#crm-systems .pcrm-orb{width:800px;height:650px;right:-180px;top:90px;opacity:.8}#crm-systems .pcrm-tags{flex-wrap:wrap}#crm-systems .pcrm-second h3{font-size:46px}#crm-systems .pcrm-floor{height:200px}}
@media(max-width:760px){#crm-systems.sx-precision-crm{padding:62px 20px 70px;min-height:0}#crm-systems .pcrm-first h1{font-size:clamp(34px,9.5vw,50px);letter-spacing:-1.8px}#crm-systems .pcrm-first-label{gap:12px}#crm-systems .pcrm-first-label span{width:28px}#crm-systems .pcrm-eyebrow{font-size:8.5px;letter-spacing:2.2px}#crm-systems .pcrm-intro-note{position:relative;top:auto;right:auto;margin-top:24px;max-width:520px;font-size:11.5px}#crm-systems .pcrm-second{margin-top:50px}#crm-systems .pcrm-second h3{font-size:clamp(34px,9vw,47px)}#crm-systems .pcrm-description{font-size:12.5px}#crm-systems .pcrm-tags span{font-size:10px}#crm-systems .pcrm-ctas{flex-wrap:wrap}#crm-systems .pcrm-cta{font-size:12px;min-height:49px}#crm-systems .pcrm-orb{right:-235px;top:245px;width:650px;height:570px;opacity:.48}#crm-systems .pcrm-app{margin-top:55px;display:block;width:100%;height:auto;transform:none;overflow:hidden;border-radius:15px}#crm-systems .pcrm-app:hover{transform:none}#crm-systems .pcrm-sidebar{display:none}#crm-systems .pcrm-main{border-radius:15px}#crm-systems .pcrm-app-topbar{height:48px}#crm-systems .pcrm-app-body{padding:14px}#crm-systems .pcrm-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}#crm-systems .pcrm-metric{min-height:86px}#crm-systems .pcrm-app-head{min-height:83px;align-items:flex-start}#crm-systems .pcrm-app-head h4{font-size:21px}#crm-systems .pcrm-date{font-size:8px}#crm-systems .pcrm-data-grid{grid-template-columns:1fr;min-height:0}#crm-systems .pcrm-lanes{height:150px}#crm-systems .pcrm-chart-wrap{height:170px;flex:none}#crm-systems .pcrm-bottom-grid{grid-template-columns:1fr 1fr;max-height:none}#crm-systems .pcrm-locations{grid-column:1/-1}#crm-systems .pcrm-panel{padding:12px}#crm-systems .pcrm-panel-title strong{font-size:11px}#crm-systems .pcrm-bottom-grid .pcrm-panel{padding:10px}#crm-systems .pcrm-activity-row strong,#crm-systems .pcrm-task{font-size:9px}#crm-systems .pcrm-locations .pcrm-location{font-size:9px;min-height:23px}#crm-systems .pcrm-chart-months{font-size:8px}}
@media(max-width:430px){#crm-systems.sx-precision-crm{padding:52px 14px 62px}#crm-systems .pcrm-first h1{font-size:clamp(30px,8.8vw,38px)}#crm-systems .pcrm-first h1 em{white-space:nowrap}#crm-systems .pcrm-second h3{font-size:36px;letter-spacing:-1.7px}#crm-systems .pcrm-tags span{font-size:9px}#crm-systems .pcrm-ctas{gap:8px}#crm-systems .pcrm-cta{padding-left:13px;gap:8px;font-size:11px}#crm-systems .pcrm-cta b{width:29px;height:29px}#crm-systems .pcrm-app-topbar{padding:0 9px}#crm-systems .pcrm-search{padding:6px 8px;width:auto;flex:1}#crm-systems .pcrm-app-tools{gap:7px}#crm-systems .pcrm-search input{font-size:8px}#crm-systems .pcrm-date-wrap{position:absolute;right:10px;top:55px}#crm-systems .pcrm-app-head{min-height:98px;align-items:start;padding-top:3px}#crm-systems .pcrm-date{font-size:7px;padding:5px}#crm-systems .pcrm-app-body{padding:10px}#crm-systems .pcrm-metric strong{font-size:18px}#crm-systems .pcrm-lanes{gap:3px;height:123px}#crm-systems .pcrm-lane{padding:5px 3px}#crm-systems .pcrm-lane>span:first-child{font-size:6px}#crm-systems .pcrm-lane strong{font-size:14px}#crm-systems .pcrm-lane small{font-size:5.5px}#crm-systems .pcrm-bars{gap:1px;height:35px}#crm-systems .pcrm-bottom-grid{grid-template-columns:1fr}#crm-systems .pcrm-locations{grid-column:auto}#crm-systems .pcrm-activity-row strong,#crm-systems .pcrm-task{font-size:10px}}
@media(prefers-reduced-motion:reduce){#crm-systems .pcrm-orb,#crm-systems .pcrm-app,#crm-systems .pcrm-cta,#crm-systems .pcrm-metric,#crm-systems .pcrm-navitem{transition:none!important;animation:none!important;transform:none!important}}

/* SX precision atmospheric reconstruction V2 — scoped to homepage CRM showcase only.
   Background contains environment-only artwork derived from customer-supplied
   reference; text, CTA, and the dashboard are entirely live DOM/SVG. */
@media (min-width:1151px){
  #crm-systems.sx-precision-crm .pcrm-env{
    background-image:url('images/sx-crm-atmosphere-reference.webp');
    background-position:center center;
    background-size:100% 100%;
  }
  #crm-systems.sx-precision-crm .pcrm-env::after{background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 46%,rgba(0,0,0,.06))}
  #crm-systems.sx-precision-crm .pcrm-nebula{opacity:.12}
  #crm-systems.sx-precision-crm .pcrm-floor{display:none}
  #crm-systems.sx-precision-crm .pcrm-orb{right:1%;top:2%;width:57%;height:75%;z-index:0;}
  #crm-systems.sx-precision-crm .pcrm-orb::before,
  #crm-systems.sx-precision-crm .pcrm-orb-art,
  #crm-systems.sx-precision-crm .pcrm-orb-rim{display:none}
  #crm-systems.sx-precision-crm .pcrm-orb-shine{background:radial-gradient(ellipse 14% 9% at var(--p-light-x) var(--p-light-y),rgba(255,255,255,.32),rgba(255,255,255,.065) 35%,transparent 75%);opacity:.22;mix-blend-mode:screen}
  #crm-systems.sx-precision-crm .pcrm-orb:hover .pcrm-orb-shine,
  #crm-systems.sx-precision-crm .pcrm-orb[aria-pressed=true] .pcrm-orb-shine{opacity:.77}
  #crm-systems.sx-precision-crm .pcrm-intro-note{display:none}
  #crm-systems.sx-precision-crm .pcrm-app{
    width:55%;right:4.8%;top:270px;height:505px;
    grid-template-columns:124px minmax(0,1fr);
    transform:perspective(1900px) rotateY(-1.8deg) rotateZ(-.45deg);
    border-color:rgba(239,245,255,.72);
    background:linear-gradient(135deg,#171b21fc,#06080cfa 45%,#07090efa);
    box-shadow:0 16px 35px #000c,0 22px 50px #000d,0 0 14px #f2f6ff19,inset 0 1px 1px #fff9;
  }
  #crm-systems.sx-precision-crm .pcrm-first h1{margin-top:12px;}
  #crm-systems.sx-precision-crm .pcrm-first h1 em{font-size:1.028em}
  #crm-systems.sx-precision-crm .pcrm-second{top:341px}
  #crm-systems.sx-precision-crm .pcrm-second h3{margin-top:25px;margin-bottom:10px;line-height:1.06;font-size:46px}
  #crm-systems.sx-precision-crm .pcrm-tags{margin-top:25px}
  #crm-systems.sx-precision-crm .pcrm-ctas{margin-top:26px}
  #crm-systems.sx-precision-crm .pcrm-dashboard{isolation:isolate}
}
@media (min-width:1151px) and (max-width:1350px){
  #crm-systems.sx-precision-crm .pcrm-app{width:58.4%;right:2.7%}
  #crm-systems.sx-precision-crm .pcrm-second h3{font-size:40px}
}
/* Cursor-light never intercepts controls, including on touch devices. */
#crm-systems.sx-precision-crm .pcrm-orb-shine{pointer-events:none}
#crm-systems.sx-precision-crm .pcrm-env{pointer-events:none}
@media(min-width:1151px){
  #crm-systems.sx-precision-crm .pcrm-app-topbar{height:47px}
  #crm-systems.sx-precision-crm .pcrm-app-head{min-height:48px}
  #crm-systems.sx-precision-crm .pcrm-metric{min-height:78px}
  #crm-systems.sx-precision-crm .pcrm-data-grid{min-height:155px}
  #crm-systems.sx-precision-crm .pcrm-bottom-grid{max-height:130px}
  #crm-systems.sx-precision-crm .pcrm-app-body{gap:7px}
}
/* Content order and touch-readability refinements */
#crm-systems.sx-precision-crm .pcrm-intro-note{display:none!important}
@media(min-width:1151px){
  #crm-systems.sx-precision-crm .pcrm-app{top:274px;height:501px}
}
@media(max-width:430px){
  #crm-systems.sx-precision-crm .pcrm-lanes{
    display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
    height:154px;max-width:100%;padding:0 1px 8px;
    scroll-snap-type:x proximity;scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  #crm-systems.sx-precision-crm .pcrm-lane{flex:0 0 103px;width:103px;min-width:103px;scroll-snap-align:start;padding:9px 8px}
  #crm-systems.sx-precision-crm .pcrm-lane>span:first-child{font-size:9.3px}
  #crm-systems.sx-precision-crm .pcrm-lane strong{font-size:19px}
  #crm-systems.sx-precision-crm .pcrm-lane small{font-size:8px}
  #crm-systems.sx-precision-crm .pcrm-bars{height:51px;gap:2px}
}
@media(min-width:1151px){
  #crm-systems.sx-precision-crm .pcrm-notifications{right:105px}
}

/* SX Agency | Mobile cinematic CRM layout (2026)
   Desktop reference composition remains unchanged. No screenshot overlays.
   The interactive chrome sphere and the HTML dashboard are one responsive stage. */
@media (min-width:1151px){
  #crm-systems .pcrm-product-stage{display:contents}
}
@media (max-width:1150px){
  #crm-systems.sx-precision-crm{overflow:clip}
  #crm-systems .pcrm-product-stage{position:relative;isolation:isolate;width:100%;max-width:920px;margin:52px auto 0;padding-top:48px;padding-bottom:28px;min-width:0}
  #crm-systems .pcrm-product-stage .pcrm-orb{top:-90px;right:-90px;width:min(85vw,760px);height:min(70vw,610px);opacity:.94;z-index:0}
  #crm-systems .pcrm-product-stage .pcrm-app{position:relative;z-index:2;margin:0 auto;min-width:0}
  #crm-systems .pcrm-product-stage::before{content:"";position:absolute;z-index:-1;inset:6% -6% 0;pointer-events:none;background:radial-gradient(ellipse 72% 42% at 65% 25%,rgba(163,177,210,.13),transparent 78%)}
}
@media (max-width:760px){
  #crm-systems.sx-precision-crm{padding:37px 16px 53px;background:#030407}
  #crm-systems .pcrm-env{background-image:linear-gradient(180deg,rgba(4,5,9,.08) 0%,rgba(4,5,9,.45) 50%,rgba(4,5,9,.12) 100%),url('images/sx-crm-cinematic-space.webp');background-size:cover,auto 1050px;background-position:center,43% top;background-repeat:no-repeat}
  #crm-systems .pcrm-env::after{background:linear-gradient(90deg,#01020556,transparent 65%),linear-gradient(0deg,#030406 2%,transparent 28%)}
  #crm-systems .pcrm-nebula{background:radial-gradient(ellipse 90% 28% at 85% 10%,rgba(175,186,210,.08),transparent 70%),radial-gradient(ellipse 70% 22% at 0% 61%,rgba(111,127,160,.09),transparent 82%)}
  #crm-systems .pcrm-floor{height:260px;background-size:100% 190px,100% 100%;opacity:.72}
  #crm-systems .pcrm-marketing{width:100%;max-width:none}
  #crm-systems .pcrm-first h1{font-size:clamp(31px,8.7vw,45px);line-height:1.1;letter-spacing:-1.65px;margin-top:14px}
  #crm-systems .pcrm-first h1 em{font-weight:400}
  #crm-systems .pcrm-eyebrow{font-size:9px;letter-spacing:2.5px}
  #crm-systems .pcrm-second{margin-top:34px}
  #crm-systems .pcrm-second h3{margin-top:17px;margin-bottom:13px;line-height:1.06;font-size:clamp(34px,8.6vw,44px);letter-spacing:-1.8px}
  #crm-systems .pcrm-description{font-size:13.5px;line-height:1.7;max-width:450px}
  #crm-systems .pcrm-tags{margin-top:20px;gap:6px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-width:100%;padding:1px 0 5px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #crm-systems .pcrm-tags::-webkit-scrollbar{display:none}
  #crm-systems .pcrm-tags span{font-size:10px;letter-spacing:0;padding:10px 11px;flex:none}
  #crm-systems .pcrm-ctas{margin-top:17px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #crm-systems .pcrm-cta{min-width:0;gap:7px;min-height:51px;padding:5px 5px 5px 11px;font-size:clamp(10px,2.9vw,12px);letter-spacing:-.22px}
  #crm-systems .pcrm-cta b{width:34px;height:34px}
  #crm-systems .pcrm-disclaimer{margin-top:15px;font-size:10px;line-height:1.45}
  #crm-systems .pcrm-product-stage{max-width:620px;margin:22px auto 0;padding-top:89px;padding-bottom:42px}
  #crm-systems .pcrm-product-stage .pcrm-orb{top:-28px;right:-13%;width:108%;height:330px;opacity:1;filter:drop-shadow(0 0 11px #dce9ff15);z-index:0}
  #crm-systems .pcrm-orb::before{inset:3% 9% 3%;box-shadow:inset 0 0 28px #f7fbff21,0 0 29px #d4e0ff10}
  #crm-systems .pcrm-orb-art{background-size:112% 112%;opacity:1}
  #crm-systems .pcrm-product-stage::before{inset:20px -22px 15%;background:radial-gradient(ellipse 70% 37% at 56% 17%,rgba(245,247,255,.10),transparent 75%)}
  #crm-systems .pcrm-product-stage .pcrm-app{width:100%;max-width:none;margin:0;border-radius:17px;display:flex;flex-direction:column;overflow:visible;border:1px solid rgba(230,238,252,.6);background:#090d14;box-shadow:0 20px 45px #000d,0 0 22px #a9c5eb20,inset 0 1px 1px #fff6}
  #crm-systems .pcrm-sidebar{display:flex!important;flex-direction:column;flex:none;min-width:0;padding:11px 11px 7px;overflow:hidden;border-radius:16px 16px 0 0;border-right:0;border-bottom:1px solid rgba(222,234,255,.23);background:linear-gradient(145deg,#171c27ee,#080c12eb)}
  #crm-systems .pcrm-wordmark{padding:0 4px 10px;border-bottom:0}
  #crm-systems .pcrm-wordmark strong{font-size:23px;letter-spacing:-2.5px}
  #crm-systems .pcrm-wordmark span{font-size:14px}
  #crm-systems .pcrm-wordmark small{font-size:9px}
  #crm-systems .pcrm-navigation{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:7px;margin:0;min-width:0;max-width:100%;padding:0 1px 4px;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  #crm-systems .pcrm-navigation::-webkit-scrollbar{display:none}
  #crm-systems .pcrm-navitem{display:flex;flex:0 0 auto;min-height:37px;padding:7px 11px;border-radius:10px;font-size:11px;gap:7px;scroll-snap-align:start;white-space:nowrap;color:#c8ced9}
  #crm-systems .pcrm-navitem svg{width:15px;height:15px}
  #crm-systems .pcrm-user{display:none}
  #crm-systems .pcrm-main{border-radius:0 0 16px 16px;overflow:visible;min-width:0;background:linear-gradient(170deg,#0c1119,#070a11 68%,#05080d)}
  #crm-systems .pcrm-app-topbar{height:55px;padding:0 11px;gap:10px}
  #crm-systems .pcrm-search{flex:1;min-width:0;max-width:none;width:auto;padding:8px 10px}
  #crm-systems .pcrm-search input{font-size:11px;min-width:0}
  #crm-systems .pcrm-app-tools{gap:9px}
  #crm-systems .pcrm-iconbtn{width:33px;height:33px}
  #crm-systems .pcrm-avatar{width:31px;height:31px}
  #crm-systems .pcrm-app-body{padding:15px 12px 17px;gap:11px}
  #crm-systems .pcrm-app-head{min-height:0;display:flex;align-items:flex-start;flex-direction:column;gap:13px;padding:0;margin:0}
  #crm-systems .pcrm-app-head p{font-size:9px;letter-spacing:1.7px;margin:0 0 7px}
  #crm-systems .pcrm-app-head h4{font-size:24px;letter-spacing:-1.1px;margin:0 0 6px;line-height:1.1}
  #crm-systems .pcrm-app-head span{font-size:11px;line-height:1.5;display:block;max-width:310px}
  #crm-systems .pcrm-date-wrap{position:relative!important;top:auto!important;right:auto!important;align-self:flex-start}
  #crm-systems .pcrm-date{padding:8px 10px;font-size:10px;min-height:34px}
  #crm-systems .pcrm-date svg{width:13px;height:13px}
  #crm-systems .pcrm-date-menu{z-index:20}
  #crm-systems .pcrm-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  #crm-systems .pcrm-metric{min-width:0;min-height:104px;padding:12px 10px;border-radius:12px}
  #crm-systems .pcrm-metric>span{font-size:10px}
  #crm-systems .pcrm-metric strong{font-size:clamp(20px,5.2vw,26px);white-space:nowrap}
  #crm-systems .pcrm-metric small{font-size:10px}
  #crm-systems .pcrm-sparkline{width:44%;height:38px}
  #crm-systems .pcrm-data-grid{display:flex;flex-direction:column;gap:10px}
  #crm-systems .pcrm-panel{min-width:0;border-radius:13px;padding:12px}
  #crm-systems .pcrm-panel-title{margin-bottom:9px}
  #crm-systems .pcrm-panel-title strong{font-size:12px}
  #crm-systems .pcrm-panel-title small{font-size:9px}
  #crm-systems .pcrm-lanes{display:flex;gap:9px;height:155px;padding-bottom:7px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #crm-systems .pcrm-lanes::-webkit-scrollbar{display:none}
  #crm-systems .pcrm-lane{flex:0 0 108px;width:108px;min-width:108px;padding:10px 9px;scroll-snap-align:start;border-radius:9px}
  #crm-systems .pcrm-lane>span:first-child{font-size:10px}
  #crm-systems .pcrm-lane strong{font-size:21px}
  #crm-systems .pcrm-lane small{font-size:9px}
  #crm-systems .pcrm-bars{height:55px;gap:2px}
  #crm-systems .pcrm-chart-wrap{height:165px;min-height:165px}
  #crm-systems .pcrm-chart-months{font-size:9px}
  #crm-systems .pcrm-bottom-grid{display:flex;gap:10px;max-height:none;min-width:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:7px;-webkit-overflow-scrolling:touch}
  #crm-systems .pcrm-bottom-grid::-webkit-scrollbar{display:none}
  #crm-systems .pcrm-bottom-grid .pcrm-panel{flex:0 0 88%;max-width:88%;min-height:155px;scroll-snap-align:start;padding:13px}
  #crm-systems .pcrm-bottom-grid .pcrm-panel-title strong{font-size:12px}
  #crm-systems .pcrm-activity-row strong,#crm-systems .pcrm-task{font-size:10.5px}
  #crm-systems .pcrm-location{font-size:10px;min-height:22px}
  #crm-systems .pcrm-notifications{right:-29px;z-index:30;max-width:300px}
  #crm-systems .pcrm-product-stage::after{content:"";position:absolute;pointer-events:none;z-index:-1;bottom:-10px;left:-25px;right:-25px;height:180px;background:url('images/sx-crm-stone-reflection.webp') center bottom/cover no-repeat;opacity:.50;mask-image:linear-gradient(to bottom,transparent 0,black 65%,transparent 100%)}
  #crm-systems .pcrm-visual-hint{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#a9afbb;display:flex;justify-content:space-between;align-items:center;margin:10px 3px 0}
  #crm-systems .pcrm-visual-hint span:last-child{color:#f1f4fb}
}
@media(max-width:360px){
  #crm-systems.sx-precision-crm{padding:33px 12px 48px}
  #crm-systems .pcrm-first h1{font-size:clamp(28px,8.55vw,32px)}
  #crm-systems .pcrm-first h1 em{white-space:nowrap}
  #crm-systems .pcrm-cta{font-size:10px;padding-left:9px;letter-spacing:-.3px}
  #crm-systems .pcrm-cta b{width:29px;height:29px}
  #crm-systems .pcrm-product-stage{padding-top:70px}
  #crm-systems .pcrm-product-stage .pcrm-orb{height:285px}
  #crm-systems .pcrm-app-body{padding:12px 9px}
  #crm-systems .pcrm-metric strong{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  #crm-systems .pcrm-product-stage .pcrm-orb,#crm-systems .pcrm-product-stage .pcrm-app{transition:none!important;animation:none!important}
  #crm-systems .pcrm-navigation,#crm-systems .pcrm-lanes,#crm-systems .pcrm-bottom-grid{scroll-behavior:auto!important}
}

/* Mobile adaptation: more of the original cosmic environment, with high-contrast type. */
@media(max-width:760px){
  #crm-systems.sx-precision-crm .pcrm-env{
    background-image:linear-gradient(180deg,rgba(2,4,8,.18) 0%,rgba(2,4,8,.32) 32%,rgba(2,4,8,.26) 54%,rgba(2,4,8,.02) 72%),url('images/sx-crm-mobile-atmosphere.webp'),url('images/sx-crm-cinematic-space.webp');
    background-position:center,center top,center top;
    background-size:100% 100%,100% auto,cover;
    background-repeat:no-repeat;
  }
}
@media(min-width:761px){#crm-systems .pcrm-visual-hint{display:none}}

/* KPI percentage trend arrows are native vector strokes, avoiding blue iOS emoji. */
#crm-systems .pcrm-metric small .sx-vector-arrow{width:12px;height:12px;margin-right:3px;vertical-align:-.18em;}

#crm-systems .pcrm-metric small{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;line-height:1.25;}
#crm-systems .pcrm-metric small .sx-vector-arrow{display:block;flex:0 0 12px;margin:0;vertical-align:baseline;}

/* CRM hero relocation: keep original showcase geometry and mobile logic intact. */
.page-crm #crm-systems.sx-precision-crm{margin:0;max-width:100%;}
.page-crm #crm-systems .pcrm-first h1{margin-block:18px 0;}
@media(max-width:760px){.page-crm #crm-systems .pcrm-first h1{margin-top:14px;}}
/* SX Agency CRM reference fidelity pass · 2026-10-28.
   Scope: CRM hero at desktop widths only. Preserve every other page and mobile layout.
   The baseline had a 501px app and squashed a 16:9 background into 864px.
   This restores the reference scene ratio, true panel height and restrained 3D trapezoid. */
@media (min-width:1151px){
  #crm-systems.sx-precision-crm{
    height:max(900px,56.25vw);
  }
  #crm-systems.sx-precision-crm .pcrm-env{
    background-size:100% 100%;
    background-position:center center;
  }
  #crm-systems.sx-precision-crm .pcrm-marketing{
    left:7.65%;
    width:560px;
  }
  #crm-systems.sx-precision-crm .pcrm-first{
    top:clamp(115px,8.02vw,155px);
    width:650px;
  }
  #crm-systems.sx-precision-crm .pcrm-first h1{
    font-size:clamp(47px,3.68vw,70px);
    line-height:1.07;
    letter-spacing:-2.7px;
    margin-top:17px;
  }
  #crm-systems.sx-precision-crm .pcrm-first h1 em{
    font-size:1.025em;
  }
  #crm-systems.sx-precision-crm .pcrm-second{
    top:clamp(335px,22.1vw,424px);
    width:480px;
  }
  #crm-systems.sx-precision-crm .pcrm-second h3{
    font-size:clamp(40px,3.05vw,57px);
    line-height:1.08;
    letter-spacing:-2.15px;
    margin-top:30px;
    margin-bottom:14px;
  }
  #crm-systems.sx-precision-crm .pcrm-description{
    max-width:460px;
    font-size:clamp(13px,.83vw,16px);
    line-height:1.68;
  }
  #crm-systems.sx-precision-crm .pcrm-tags{margin-top:24px;gap:9px}
  #crm-systems.sx-precision-crm .pcrm-tags span{font-size:10.5px;padding:10px 11px}
  #crm-systems.sx-precision-crm .pcrm-ctas{margin-top:27px;gap:13px}
  #crm-systems.sx-precision-crm .pcrm-cta{
    min-height:56px;
    font-size:12.8px;
    padding-left:20px;
    padding-right:7px;
    box-shadow:inset 0 2px 1px #ffffff99,inset 0 -1px 2px #dee9ff6d,0 8px 20px #000d,0 0 14px #e7efff35;
  }
  #crm-systems.sx-precision-crm .pcrm-cta b{width:39px;height:39px}
  #crm-systems.sx-precision-crm .pcrm-disclaimer{margin-top:17px}
  #crm-systems.sx-precision-crm .pcrm-app{
    top:29.7%;
    right:8%;
    width:54%;
    height:59%;
    min-height:535px;
    grid-template-columns:clamp(115px,7.85vw,152px) minmax(0,1fr);
    border:1px solid rgba(238,245,255,.77);
    border-radius:17px;
    transform:perspective(1250px) rotateY(-9deg);
    transform-origin:center center;
    background:linear-gradient(115deg,#10141bf9,#04070cfb 46%,#111721fc 100%);
    box-shadow:0 22px 46px #000e,0 30px 72px #000a,0 0 23px #edf4ff21,inset 0 1px 1px #fff9;
  }
  #crm-systems.sx-precision-crm .pcrm-app::before{
    inset:0;
    border-radius:16px;
    opacity:1;
    background:linear-gradient(119deg,transparent 58%,rgba(235,240,252,.07) 68%,transparent 74%),linear-gradient(180deg,rgba(255,255,255,.12),transparent 12%);
  }
  #crm-systems.sx-precision-crm .pcrm-app::after{
    content:"";
    position:absolute;
    pointer-events:none;
    z-index:6;
    right:18%;top:0;
    width:1px;height:29%;
    transform:skewX(-35deg);
    transform-origin:top center;
    background:linear-gradient(to bottom,#eef5ff9e,rgba(229,239,255,.1));
    box-shadow:0 0 5px #dfe9ff45;
    opacity:.66;
  }
  #crm-systems.sx-precision-crm .pcrm-sidebar{padding:16px 10px 13px}
  #crm-systems.sx-precision-crm .pcrm-navigation{gap:4px;margin-top:13px}
  #crm-systems.sx-precision-crm .pcrm-navitem{min-height:35px;font-size:10px;gap:8px}
  #crm-systems.sx-precision-crm .pcrm-wordmark{padding-bottom:18px}
  #crm-systems.sx-precision-crm .pcrm-wordmark strong{font-size:29px}
  #crm-systems.sx-precision-crm .pcrm-main{background:linear-gradient(155deg,#111721fa,#080b11 58%,#07090ffc)}
  #crm-systems.sx-precision-crm .pcrm-app-topbar{height:52px}
  #crm-systems.sx-precision-crm .pcrm-app-body{padding:12px 13px 13px;gap:10px}
  #crm-systems.sx-precision-crm .pcrm-app-head{min-height:64px}
  #crm-systems.sx-precision-crm .pcrm-app-head h4{font-size:25px}
  #crm-systems.sx-precision-crm .pcrm-app-head span{font-size:8.4px}
  #crm-systems.sx-precision-crm .pcrm-metrics{gap:8px}
  #crm-systems.sx-precision-crm .pcrm-metric{min-height:86px;padding:10px 10px 6px}
  #crm-systems.sx-precision-crm .pcrm-metric>span{font-size:8.5px}
  #crm-systems.sx-precision-crm .pcrm-metric strong{font-size:22px}
  #crm-systems.sx-precision-crm .pcrm-data-grid{min-height:187px;gap:8px}
  #crm-systems.sx-precision-crm .pcrm-lanes{height:149px;gap:5px}
  #crm-systems.sx-precision-crm .pcrm-lane{padding:8px 5px 4px}
  #crm-systems.sx-precision-crm .pcrm-lane strong{font-size:18px}
  #crm-systems.sx-precision-crm .pcrm-lane small{font-size:7px}
  #crm-systems.sx-precision-crm .pcrm-bars{height:52px}
  #crm-systems.sx-precision-crm .pcrm-chart-wrap{height:147px}
  #crm-systems.sx-precision-crm .pcrm-bottom-grid{max-height:none;min-height:124px;gap:8px}
  #crm-systems.sx-precision-crm .pcrm-bottom-grid .pcrm-panel{padding:9px}
  #crm-systems.sx-precision-crm .pcrm-activity-row{margin-top:7px}
  #crm-systems.sx-precision-crm .pcrm-activity-row strong{font-size:8px}
  #crm-systems.sx-precision-crm .pcrm-activity-row small{font-size:7px}
  #crm-systems.sx-precision-crm .pcrm-task{min-height:28px;font-size:8px}
  #crm-systems.sx-precision-crm .pcrm-location{min-height:21px;font-size:8px}
}
/* Preserve the approved smaller laptop composition without clipping the larger app. */
@media (min-width:1151px) and (max-width:1400px){
  #crm-systems.sx-precision-crm .pcrm-app{right:3.5%;width:57.5%;transform:perspective(1700px) rotateY(-5.5deg);height:550px;top:266px}
  #crm-systems.sx-precision-crm .pcrm-marketing{left:5.5%}
  #crm-systems.sx-precision-crm .pcrm-first{top:128px}
  #crm-systems.sx-precision-crm .pcrm-second{top:356px}
  #crm-systems.sx-precision-crm .pcrm-first h1{font-size:48px}
  #crm-systems.sx-precision-crm .pcrm-second h3{font-size:40px}
  #crm-systems.sx-precision-crm .pcrm-second{width:415px}
  #crm-systems.sx-precision-crm .pcrm-description{font-size:12.5px;max-width:405px}
  #crm-systems.sx-precision-crm .pcrm-tags{gap:5px}
  #crm-systems.sx-precision-crm .pcrm-tags span{font-size:9px;padding:8px 7px}
  #crm-systems.sx-precision-crm .pcrm-app{grid-template-columns:113px minmax(0,1fr)}
}
@media (min-width:1401px){
  #crm-systems.sx-precision-crm .pcrm-app{width:54.6%;right:7.4%;grid-template-columns:clamp(122px,8.3vw,158px) minmax(0,1fr)}
  #crm-systems.sx-precision-crm .pcrm-ctas{margin-top:34px}
}
@media (min-width:1151px){
  /* Fit all five locations and three activity/task rows inside the real dashboard.
     Earlier CSS used a 124px panel with children totalling >140px. */
  #crm-systems.sx-precision-crm .pcrm-bottom-grid .pcrm-panel{padding:7px 8px}
  #crm-systems.sx-precision-crm .pcrm-bottom-grid .pcrm-panel-title{min-height:15px;margin-bottom:3px}
  #crm-systems.sx-precision-crm .pcrm-location{min-height:17px}
  #crm-systems.sx-precision-crm .pcrm-activity-row{margin-top:5px}
  #crm-systems.sx-precision-crm .pcrm-task{min-height:25px}
}
@media (min-width:1401px) and (max-width:1600px){
  /* Keep all five location rows visible at intermediate laptop widths. */
  #crm-systems.sx-precision-crm .pcrm-app{min-height:580px}
}