/* CMS-485 product hero: real software screenshots. Scoped to this page. */
.cms485-showcase-hero { background:linear-gradient(135deg,#f5fbff 0%,#eaf6fd 100%); padding:44px 20px 40px; }
.cms485-showcase-hero, .cms485-showcase-hero * { box-sizing:border-box; }
.cms485-showcase-wrap { width:min(100%,1200px); margin:0 auto; }
.cms485-showcase-grid { display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:clamp(25px,4vw,58px); align-items:start; }
.cms485-showcase-copy { padding:13px 0 0; min-width:0; }
.cms485-showcase-kicker { margin:0 0 12px; font-size:12px; font-weight:800; line-height:1.5; text-transform:uppercase; letter-spacing:.09em; color:#087fa6; }
.cms485-showcase-copy h1 { margin:0 0 16px; color:#102f4b; font-size:clamp(36px,4.1vw,56px); letter-spacing:-.045em; line-height:1.04; font-weight:800; }
.cms485-showcase-lead { margin:0 0 23px; color:#47667f; font-size:17px; line-height:1.65; max-width:490px; }
.cms485-showcase-price { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 22px; }
.cms485-showcase-price strong { color:#007da3; font-size:39px; line-height:1.12; font-weight:800; }
.cms485-showcase-price span { color:#173753; font-size:13px; font-weight:700; }
.cms485-showcase-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:19px; }
.cms485-showcase-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:46px; text-align:center; border-radius:8px; padding:11px 17px; font-size:14px; font-weight:800; text-decoration:none; transition:background-color .15s,transform .15s; }
.cms485-showcase-actions a:hover { transform:translateY(-1px); }
.cms485-showcase-primary { background:#087fa5; color:white!important; border:1px solid #087fa5; }
.cms485-showcase-primary:hover { background:#006e91; }
.cms485-showcase-secondary { background:white; color:#075582!important; border:1px solid #a9cddd; }
.cms485-showcase-secondary:hover { background:#f3faff; }
.cms485-showcase-trust { display:flex; flex-wrap:wrap; column-gap:17px; row-gap:9px; color:#466c83; font-size:12px; }
.cms485-showcase-trust span::before { content:'✓'; color:#008dbe; font-weight:900; padding-right:5px; }
.cms485-showcase-visual { min-width:0; }
.cms485-showcase-gallery { width:100%; overflow:hidden; background:#fff; border:1px solid #c6dcea; border-radius:14px; box-shadow:0 16px 38px rgba(17,52,79,.11); }
.cms485-showcase-viewport { position:relative; aspect-ratio:1.64/1; background:#eef5fa; overflow:hidden; }
.cms485-showcase-slide { position:absolute; inset:0; margin:0; opacity:0; visibility:hidden; transition:opacity .25s ease; pointer-events:none; }
.cms485-showcase-slide.is-active { opacity:1; visibility:visible; pointer-events:auto; z-index:1; }
.cms485-showcase-slide img { display:block; width:100%; height:100%; object-fit:contain; object-position:center top; }
.cms485-showcase-slide::after { content:''; position:absolute; inset:47% 0 0; background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.9) 97%); pointer-events:none; }
.cms485-showcase-callout { position:absolute; z-index:2; bottom:12px; left:13px; right:13px; max-width:85%; border:1px solid #dceaf3; border-radius:12px; padding:12px 15px; background:rgba(255,255,255,.98); color:#395671; box-shadow:0 5px 15px rgba(15,55,83,.1); font-size:12px; line-height:1.43; }
.cms485-showcase-callout strong { display:block; font-size:14px; margin-bottom:3px; color:#143b61; }
.cms485-showcase-callout span { display:block; }
.cms485-showcase-arrow { position:absolute; z-index:3; top:48%; transform:translateY(-50%); display:grid; place-items:center; width:38px; height:38px; border:none; border-radius:50%; background:rgba(255,255,255,.96); color:#12456b; box-shadow:0 2px 10px rgba(0,0,0,.14); cursor:pointer; font-size:29px; line-height:1; }
.cms485-showcase-arrow:hover,.cms485-showcase-arrow:focus-visible { background:#dff2ff; outline:2px solid #1671ba; outline-offset:2px; }
.cms485-showcase-prev {left:9px;} .cms485-showcase-next {right:9px;}
.cms485-showcase-footer { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-top:1px solid #e1edf5; color:#476782; font-size:12px; }
.cms485-showcase-dots {display:flex;gap:7px;flex-shrink:0;} .cms485-showcase-dot {width:10px;height:10px; border:0; border-radius:999px; padding:0; background:#b4c8d6;cursor:pointer;} .cms485-showcase-dot.is-active {background:#087fa5;} .cms485-showcase-dot:focus-visible {outline:2px solid #087fa5;outline-offset:3px;}
.cms485-showcase-support { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:11px; }
.cms485-showcase-support>div {display:flex;flex-direction:column;gap:4px;padding:13px 14px;background:#fff;border:1px solid #d7e5f0;border-radius:10px;font-size:12px;line-height:1.5;color:#4a667e;}
.cms485-showcase-support strong {color:#15436d;font-size:13px;}
@media(max-width:980px) { .cms485-showcase-grid {grid-template-columns:1fr;} .cms485-showcase-copy {padding:0;} .cms485-showcase-lead {max-width:730px;} .cms485-showcase-visual {max-width:850px;width:100%;} }
@media(max-width:600px) { .cms485-showcase-hero {padding:24px 15px;} .cms485-showcase-copy h1 {font-size:clamp(31px,9vw,40px);} .cms485-showcase-lead {font-size:15px;} .cms485-showcase-viewport {aspect-ratio:1.5/1;} .cms485-showcase-callout {bottom:8px;left:8px;right:8px;max-width:calc(100% - 16px);padding:8px 9px;font-size:10px;} .cms485-showcase-callout strong {font-size:11px;} .cms485-showcase-footer {font-size:11px;} .cms485-showcase-support {grid-template-columns:1fr;} .cms485-showcase-arrow {width:30px;height:30px;font-size:24px;} }
@media(prefers-reduced-motion:reduce) { .cms485-showcase-slide,.cms485-showcase-actions a {transition:none;} }