/* Separate four-pillar cards, aligned with the product and infrastructure visuals. */
#ecosystem .section-heading p{max-width:690px;margin-left:auto;margin-right:auto}
#ecosystem .pillar-grid{gap:16px;border:0;border-radius:0;background:transparent;overflow:visible;box-shadow:none}
#ecosystem .pillar-technology{--pillar-bg:#f2eafd;--pillar-wash:#faf7ff;--pillar-border:#ddcdef;--pillar-accent:#7951a8;--pillar-ink:#43344f;--pillar-copy:#776184;--pillar-hover:#d4bce8}
#ecosystem .pillar-connections{--pillar-bg:#e8f4ed;--pillar-wash:#f5faf7;--pillar-border:#c6dfd0;--pillar-accent:#387052;--pillar-ink:#2f483b;--pillar-copy:#56715f;--pillar-hover:#aecfba}
#ecosystem .pillar-intelligence{--pillar-bg:#fceee5;--pillar-wash:#fff9f4;--pillar-border:#edd1bd;--pillar-accent:#935a37;--pillar-ink:#513d31;--pillar-copy:#7c6352;--pillar-hover:#dfb89a}
#ecosystem .pillar-expertise{--pillar-bg:#eaf1fc;--pillar-wash:#f6f9ff;--pillar-border:#cad9ed;--pillar-accent:#446c99;--pillar-ink:#324459;--pillar-copy:#566d86;--pillar-hover:#adc5e1}
#ecosystem .pillar-card{position:relative;border:1px solid var(--pillar-border);border-radius:14px;background:linear-gradient(155deg,var(--pillar-bg),var(--pillar-wash));padding:28px 25px 26px;transition:border-color .2s ease,box-shadow .2s ease;color:var(--pillar-ink);box-shadow:0 8px 24px -22px var(--pillar-accent)}
#ecosystem .pillar-card:hover{transform:none;box-shadow:0 10px 28px -22px var(--pillar-accent);border-color:var(--pillar-hover)}
#ecosystem .pillar-card:focus-visible{outline:2px solid var(--pillar-accent);outline-offset:3px}
#ecosystem .pillar-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:35px;min-height:40px;color:var(--pillar-accent)}
#ecosystem .pillar-icon{width:34px;height:34px;stroke-width:1.35;flex:none;color:var(--pillar-accent)}
#ecosystem .pillar-index{font-size:9px;line-height:1.4;letter-spacing:.055em;text-transform:uppercase;color:var(--pillar-accent);white-space:nowrap}
#ecosystem .pillar-card h3{font-size:21px;font-weight:500;line-height:1.2;letter-spacing:-.65px;max-width:190px;min-height:51px}
#ecosystem .pillar-card p{font-size:13px;line-height:1.8;color:var(--pillar-copy);margin:16px 0 26px}
#ecosystem .pillar-card .text-link{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;line-height:1.5;letter-spacing:.01em;font-weight:500;color:var(--pillar-accent);margin-top:auto}
#ecosystem .pillar-card .text-link>span{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--pillar-border);border-radius:50%;font-size:13px;color:var(--pillar-accent);transition:background .2s,border-color .2s}
#ecosystem .pillar-card:hover .text-link>span{background:var(--pillar-bg);border-color:var(--pillar-hover)}
/* Geometry is SVG rather than a glyph from an operating system's emoji font. */
.ui-symbol{display:inline-block;width:1em;height:1em;min-width:1em;vertical-align:-.13em;flex:none;overflow:visible}
.ai-core>.ui-symbol{width:1em;height:1em;vertical-align:middle;stroke-width:1.1}
.app-nav>.ui-symbol{width:1em;height:1em;margin-right:2px;vertical-align:-.1em}
.menu-toggle>span[aria-hidden=true]{display:inline-flex;align-items:center}
.menu-toggle .ui-symbol{width:15px;height:15px}
.calc-picker-option[aria-selected=true]::after{content:'';width:13px;height:13px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center/contain no-repeat}
/* Payment events join the platform directly, separately from lead routing. */
.journey-showcase .jsc-payment{top:231px;min-height:78px;padding:10px 6px;border-color:#9d88bb70;background:#282941}
.journey-showcase .jsc-payment strong{font-size:11px;line-height:1.4}
.journey-showcase .jsc-payment small{font-size:9px;line-height:1.5;margin-top:5px;color:#b2a4c7}
@media(min-width:1001px){
 .journey-showcase .jsc-graph{height:764px}
 .journey-showcase .jsc-infrastructure{height:572px}
 .journey-showcase .jsc-infra-connections{height:540px}
 .journey-showcase .jsc-outcome{padding-top:17px}
 .journey-showcase .jsc-shared-layer{top:668px}
}
@media(max-width:1100px) and (min-width:601px){
 #ecosystem .pillar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #ecosystem .pillar-card{padding:25px 28px}
 #ecosystem .pillar-top{margin-bottom:23px}
 #ecosystem .pillar-card h3{max-width:none;min-height:0;font-size:23px}
 #ecosystem .pillar-card p{max-width:310px;min-height:66px}
}
@media(max-width:1000px){
 .journey-showcase .jsc-infrastructure{padding-bottom:30px}
 .journey-showcase .jsc-outcome{margin-top:31px;padding-top:21px}
 .journey-showcase .jsc-payment{top:auto;min-height:76px;margin-top:19px;padding:13px;width:190px}
 .journey-showcase .jsc-payment:before{content:'';position:absolute;left:50%;top:-20px;height:19px;border-left:1px dashed #aa92bf}
 .journey-showcase .jsc-payment strong{font-size:13px}
 .journey-showcase .jsc-payment small{font-size:10px;margin-top:3px}
}
@media(max-width:600px){
 #ecosystem .pillar-grid{grid-template-columns:1fr;gap:12px}
 #ecosystem .pillar-card{padding:24px 23px 22px 75px;border-radius:13px}
 #ecosystem .pillar-top{position:static;min-height:0;margin-bottom:9px}
 #ecosystem .pillar-icon{position:absolute;left:22px;top:24px;width:30px;height:30px}
 #ecosystem .pillar-index{font-size:9px}
 #ecosystem .pillar-card h3{font-size:22px;line-height:1.2;min-height:0;max-width:none;letter-spacing:-.5px}
 #ecosystem .pillar-card p{font-size:12px;line-height:1.75;margin:12px 0 16px}
 #ecosystem .pillar-card .text-link{font-size:11px}
 #ecosystem .pillar-card .text-link>span{width:25px;height:25px}
}
@media(max-width:360px){#ecosystem .pillar-card{padding:22px 18px 20px 65px}#ecosystem .pillar-icon{left:18px;width:27px;height:27px}#ecosystem .pillar-card h3{font-size:20px}}
@media(prefers-reduced-motion:reduce){#ecosystem .pillar-card,#ecosystem .pillar-card .text-link>span{transition:none}}
/* Mobile menu labels share the vertical centre of their icon or number. */
@media(max-width:1200px){
 #navigation .dropdown-panel a{align-items:center}
 #navigation .dropdown-panel a>.tiny-icon{flex-shrink:0}
 #navigation .dropdown-panel a>.tiny-icon+span{min-width:0}
}