/* Shared product module — Figma 668:406. */

html body[data-page] :is(#systems,#readiness,#business-measures)>.container{display:grid;grid-template-columns:minmax(0,570fr) minmax(0,638fr);gap:0 52px;max-width:1260px;align-items:start}
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-heading{grid-column:1;grid-row:1;margin:0;max-width:none;text-align:left}
html body[data-page] :is(#systems,#readiness,#business-measures) h2{font-size:48px;line-height:1.2;letter-spacing:-2.4px;font-weight:400;margin:0 0 24px}
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-intro{font-size:14px;line-height:25.202px;margin:0;color:#000000a6}
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-eyebrow{margin-bottom:16px}
/* Semantic module badges shared by every product locale. */
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-eyebrow{display:inline-flex;align-items:center;gap:8px}
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-eyebrow:before{content:"";display:inline-block;width:18px;height:18px;flex:none;background:url('../img/voice-badges/systems.svg') center/contain no-repeat}
html body[data-page] :is(#readiness,#business-measures) .p9-eyebrow:before{background-image:url('../img/paas-readiness/readiness-badge.svg')}
html body[data-page] :is(#systems,#readiness,#business-measures) .systems-controls{grid-column:1;grid-row:2;margin:56px 0 0;padding:0;align-self:end}
html body[data-page] :is(#systems,#readiness,#business-measures) .systems-controls button{display:none}
html body[data-page] :is(#systems,#readiness,#business-measures) .systems-position{position:static;width:auto;height:auto;clip-path:none;overflow:visible;margin:0;min-width:0;text-align:left;color:#000000a6;font-size:16px}
html body[data-page] :is(#systems,#readiness,#business-measures) .systems-position strong{font-size:20px;color:#000000d9;font-weight:500}
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid{grid-column:2;grid-row:1/3;display:flex;container-type:inline-size;gap:12px;min-height:334px;width:100%;max-width:none;margin:0;isolation:isolate;align-items:stretch}
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid:before,html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid:after{display:none}
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid article{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 68px;min-width:0;min-height:334px;padding:0;opacity:1;visibility:visible;pointer-events:auto;overflow:hidden;transform:none;text-align:left;border:1px solid #ffffff66;border-radius:32px;box-shadow:none;background:url('../img/systems-668/first.png') center/cover;cursor:pointer;transition:flex-grow .55s cubic-bezier(.22,1,.36,1),flex-basis .55s cubic-bezier(.22,1,.36,1)}
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid article:nth-child(2){background-image:url('../img/systems-668/second.png')}
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid article:nth-child(3){background-image:url('../img/systems-668/third.png')}
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid article:nth-child(4){background-image:url('../img/systems-668/second.png')}
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid article.is-system-active{flex:1 1 0;padding:0;border:2px solid #ffffff66;box-shadow:none}
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid article:before{display:none}
html body[data-page] :is(#systems,#readiness,#business-measures) .readiness-card-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;flex:none;box-sizing:border-box;width:calc(100cqw - (var(--systems-count) - 1)*80px - 76px);min-height:330px;padding:36px 0;opacity:0;visibility:hidden;transition:opacity .12s ease,visibility .12s}
html body[data-page] :is(#systems,#readiness,#business-measures) .is-system-active .readiness-card-content{opacity:1;visibility:visible;transition:opacity .25s ease .25s,visibility 0s .25s}
html body[data-page] :is(#systems,#readiness,#business-measures) .chat-system-icon{width:61px;height:61px;border-radius:14px;border:1.386px solid #ffffff80;background:#ffffff80;display:grid;place-items:center;margin:0 0 auto;flex:none}
html body[data-page] :is(#systems,#readiness,#business-measures) .chat-system-icon img{width:33.273px;height:33.273px}
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid h3{font-size:20px;line-height:28px;font-weight:500;margin:70px 0 8px;color:#000;text-align:left}
html body[data-page] :is(#systems,#readiness,#business-measures) .readiness-card-content p{font-size:16px;line-height:1.4;margin:0;color:#00000073;text-align:left}
html body[data-page] :is(#systems,#readiness,#business-measures) .readiness-card-label{position:absolute;inset:auto;left:50%;top:50%;width:260px;height:auto;min-height:28px;display:block;text-align:center;writing-mode:horizontal-tb;transform:translate(-50%,-50%) rotate(90deg);font-size:20px;font-weight:500;line-height:28px;color:#000;transition:opacity .15s}
html body[data-page] :is(#systems,#readiness,#business-measures) .is-system-active .readiness-card-label{opacity:0;pointer-events:none}
html body[data-page] :is(#systems,#readiness,#business-measures) article:focus-visible{outline:2px solid #1177ff;outline-offset:3px}
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-note{display:none}
@media(max-width:1100px){html body[data-page] :is(#systems,#readiness,#business-measures)>.container{grid-template-columns:1fr;gap:32px}html body[data-page] :is(#systems,#readiness,#business-measures) .p9-heading{grid-column:1;grid-row:1}html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid{grid-column:1;grid-row:2;max-width:638px;justify-self:center}html body[data-page] :is(#systems,#readiness,#business-measures) .systems-controls{grid-column:1;grid-row:3;margin:0}html body[data-page] :is(#systems,#readiness,#business-measures) h2{font-size:38px;letter-spacing:-1.6px}}
@media(max-width:600px){html body[data-page] :is(#systems,#readiness,#business-measures)>.container{display:flex;flex-direction:column;gap:24px}html body[data-page] :is(#systems,#readiness,#business-measures) .p9-heading{order:0;margin:0}html body[data-page] :is(#systems,#readiness,#business-measures) h2{font-size:34px}html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid{order:1;flex-direction:column;min-height:0;gap:10px}html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid article{flex:0 0 56px;min-height:0;border-radius:24px}html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid article.is-system-active{flex:0 0 334px}html body[data-page] :is(#systems,#readiness,#business-measures) .readiness-card-content{width:calc(100cqw - 48px);min-height:330px;padding:26px 0}html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid h3{margin-top:36px}html body[data-page] :is(#systems,#readiness,#business-measures) .readiness-card-label{width:calc(100% - 48px);transform:translate(-50%,-50%);text-align:left;font-size:18px}html body[data-page] :is(#systems,#readiness,#business-measures) .systems-controls{order:2;align-self:flex-start;margin:0}}
@media(prefers-reduced-motion:reduce){html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid article,html body[data-page] :is(#systems,#readiness,#business-measures) .p9-card-grid article *{transition:none}}
html body[data-page] :is(#systems,#readiness,#business-measures) .p9-heading>div{width:100%;max-width:none}
html body[data-page] :is(#systems,#readiness,#business-measures) h2{max-width:none;width:100%}
@media(min-width:601px){html[lang^="zh"] body[data-page] :is(#systems,#readiness,#business-measures) .readiness-card-label{writing-mode:vertical-rl;text-orientation:upright;width:28px;height:260px;transform:translate(-50%,-50%);text-align:center}}

/* Figma 670:448: subtle diagonal texture on each connected-systems card. */
html body[data-page] #systems .p9-card-grid article:after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:url('../../img/global-presence/texture.png') left top/16.8px 16.8px repeat;opacity:.05;pointer-events:none}
html body[data-page] #systems .p9-card-grid article{border-color:#0000001a}
html body[data-page] #systems .readiness-card-content{position:relative;z-index:1}
html body[data-page] #systems .readiness-card-label{z-index:1}