/* Approved transparent glass composition. The surrounding page remains its backdrop. */
:root body :is(.journey-artwork,.hub-hero-art)[data-crm-diagram]{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;isolation:isolate}
.hub-hero-art[data-crm-diagram]{width:100%;max-width:540px}
.crm-approved{position:relative;width:100%;aspect-ratio:1;margin:0;isolation:isolate}
:root body .crm-approved>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;filter:none;animation:none;pointer-events:none;border-radius:0}
:root body .crm-approved>.crm-approved-dark{display:none}
:root[data-theme="dark"] body .crm-approved>.crm-approved-light{display:none}
:root[data-theme="dark"] body .crm-approved>.crm-approved-dark{display:block}
.crm-art-link{position:absolute;display:block;border-radius:12px;background:transparent;transition:background 180ms ease,box-shadow 180ms ease}
.crm-art-core{left:36%;top:33%;width:28%;height:33%}
.crm-art-communication{left:37%;top:4%;width:26%;height:23%}
.crm-art-trading{left:5%;top:38%;width:22%;height:23%}
.crm-art-support{left:73%;top:38%;width:23%;height:23%}
.crm-art-partners{left:37%;top:72%;width:28%;height:23%}
.crm-art-link:hover{background:#204bff08;box-shadow:0 0 0 1px #90a5ff60}
.crm-art-link:focus-visible{outline:2px solid #204bff;outline-offset:4px}
:root[data-theme="dark"] .crm-art-link:focus-visible{outline-color:#90a5ff}
/* Only the main website's existing hero artwork is affected. */
.hero-art[data-crm-diagram="website"]{height:auto;aspect-ratio:1;width:min(49%,68svh,660px);right:0;top:calc(50% - clamp(24px,3.5vw,50px));transform:translateY(-50%)}
.hero-art[data-crm-diagram="website"] .crm-approved{width:100%;height:auto}
@media(prefers-reduced-motion:reduce){.crm-art-link{transition:none}}

@media(max-width:800px){.hero-art[data-crm-diagram="website"]{width:min(90%,430px);top:auto;right:auto;transform:none;margin:20px auto 0}}

/* A sky-blue glass picture frame is exclusive to the main website hero. */
.hero-art[data-crm-diagram="website"] .crm-approved{border-radius:26px;background:linear-gradient(135deg,#e8f7ff70,#ffffff30 45%,#d9f1ff50);box-shadow:inset 0 0 0 1px #a8d9f2a0,inset 0 2px 0 #ffffff,0 14px 36px -24px #5d9fc366;overflow:visible}
.hero-art[data-crm-diagram="website"] .crm-approved::before{content:"";position:absolute;inset:7px;border:1px solid #c6e8fa90;border-radius:20px;pointer-events:none;z-index:2;box-shadow:inset 0 1px 3px #ffffffb0}
@media(max-width:800px){.hero-art[data-crm-diagram="website"]{width:min(94%,460px);top:auto;right:auto;transform:none;margin:28px auto 0}}

/* Raised sky-blue glass rim, with restrained depth and a polished inner bevel. */
.hero-art[data-crm-diagram="website"] .crm-approved{border:1px solid #a7daf2;background:linear-gradient(135deg,#e8f7ff80,#ffffff20 48%,#d9f1ff60);box-shadow:0 3px 0 #b4def16b,0 7px 0 -2px #d4ecf77a,0 22px 32px -18px #578ead70,inset 0 0 0 6px #d5efff60,inset 2px 3px 3px #ffffff,inset -3px -4px 5px #a5d2ec65}
.hero-art[data-crm-diagram="website"] .crm-approved::before{inset:8px;border:1px solid #ffffffd9;border-radius:18px;box-shadow:0 0 0 1px #b9def17a,inset 0 2px 3px #93c9e22e}
.hero-art[data-crm-diagram="website"] .crm-approved::after{content:"";position:absolute;inset:1px;border-radius:24px;pointer-events:none;background:linear-gradient(130deg,#ffffff4d 0%,#ffffff00 22%,#ffffff00 66%,#ffffff1f 82%,#ffffff00 84%);z-index:1}
/* The workflow caption is removed while its company signature stays right-aligned. */
section.journey.dark .journey-footer{justify-content:flex-end}

/* Supplied wide-format illustration: preserve its aspect ratio and module positions. */
.crm-approved.crm-supplied,.hero-art[data-crm-diagram="website"]{aspect-ratio:3/2}
.crm-supplied .crm-art-core{left:30%;top:20%;width:42%;height:67%}
.crm-supplied .crm-art-onboarding{left:5%;top:10%;width:22%;height:31%}
.crm-supplied .crm-art-communication{left:4%;top:52%;width:22%;height:31%}
.crm-supplied .crm-art-partners{left:76%;top:8%;width:20%;height:30%}
.crm-supplied .crm-art-credit{left:78%;top:42%;width:19%;height:28%}
.crm-supplied .crm-art-social{left:72%;top:71%;width:21%;height:26%}
:root[data-theme="dark"] body .crm-approved.crm-supplied{background:#f6f5f2;border-radius:24px;box-shadow:inset 0 0 0 1px #c7d2ff80}

/* Main website: the supplied artwork stands on its own, without a frame. */
.hero-art[data-crm-diagram="website"]{width:min(52%,72svh,700px)}
:root body .hero-art[data-crm-diagram="website"] .crm-approved{background:none;border:0;border-radius:0;box-shadow:none}
.hero-art[data-crm-diagram="website"] .crm-approved::before,.hero-art[data-crm-diagram="website"] .crm-approved::after{content:none;display:none}
@media(max-width:800px){.hero-art[data-crm-diagram="website"]{width:min(100%,490px)}}

/* Selected editorial captions belong only to the main hero illustration. */
.hero-art[data-crm-diagram="website"]{aspect-ratio:auto}
.crm-art-heading{text-align:center;color:#202630;font-size:clamp(16px,1.55vw,23px);line-height:1.3;font-weight:500;letter-spacing:-.025em;margin:0 0 14px}
.crm-art-caption{text-align:center;color:#667085;font-size:clamp(11px,1.05vw,15px);line-height:1.5;font-weight:400;margin:14px 0 0}
@media(max-width:800px){.crm-art-heading{font-size:19px;margin-bottom:12px}.crm-art-caption{font-size:12px;margin-top:12px}}