/* ===== v31 ARCHITECTURE SECTION. Rebuilt to the reference design: badged header,
   iconed tiles, a dashed bus converging into SYNC on the overlay side, a solid blue
   spine on the Union side, and a divided footnote. Every icon comes from ONE SVG
   sprite used as a CSS mask, so a single data URI paints grey on the left and brand
   blue on the right via currentColor. ===== */
.cmp-arch{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 312 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0)'%3E%3Cpath d='M3 5h18v11H9l-4 4v-4H3z'/%3E%3Cpath stroke-width='2.4' d='M8 10.5h.01M12 10.5h.01M16 10.5h.01'/%3E%3C/g%3E%3Cg transform='translate(24)'%3E%3Cpath d='M3 10v4M7 7v10M11 4v16M15 7v10M19 10v4'/%3E%3C/g%3E%3Cg transform='translate(48)'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M5 20c0-3.9 3.1-6.2 7-6.2s7 2.3 7 6.2'/%3E%3C/g%3E%3Cg transform='translate(72)'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.6'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(96)'%3E%3Cpath d='M4 9.5v5h4l7 4V5.5l-7 4H4z'/%3E%3Cpath d='M18.5 9.5a4 4 0 010 5'/%3E%3C/g%3E%3Cg transform='translate(120)'%3E%3Ccircle cx='8' cy='12' r='4'/%3E%3Cpath d='M12 12h9M18 12v3.5'/%3E%3C/g%3E%3Cg transform='translate(144)'%3E%3Cpath d='M20 12a8 8 0 11-2.4-5.7'/%3E%3Cpath d='M20.5 4v5h-5'/%3E%3C/g%3E%3Cg transform='translate(168)'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7v10M14.4 9.6c0-1.1-1.1-1.9-2.4-1.9s-2.4.8-2.4 1.9 1.1 1.9 2.4 1.9 2.4.8 2.4 1.9-1.1 1.9-2.4 1.9-2.4-.8-2.4-1.9'/%3E%3C/g%3E%3Cg transform='translate(192)'%3E%3Cellipse cx='12' cy='6' rx='8' ry='2.9'/%3E%3Cpath d='M4 6v12c0 1.6 3.6 2.9 8 2.9s8-1.3 8-2.9V6'/%3E%3Cpath d='M4 12c0 1.6 3.6 2.9 8 2.9s8-1.3 8-2.9'/%3E%3C/g%3E%3Cg transform='translate(216)'%3E%3Cpath d='M12 3.2l8.6 4.6L12 12.4 3.4 7.8 12 3.2z'/%3E%3Cpath d='M3.4 13.2L12 17.8l8.6-4.6'/%3E%3C/g%3E%3Cg transform='translate(240)'%3E%3Cpath d='M12 4L2.6 20.2h18.8L12 4z'/%3E%3Cpath d='M12 10.4v4M12 17.2h.01' stroke-width='2.3'/%3E%3C/g%3E%3Cg transform='translate(264)'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M8.2 12.4l2.7 2.7 5.1-6'/%3E%3C/g%3E%3Cg transform='translate(288)'%3E%3Cpath stroke='none' fill='%23000' fill-rule='evenodd' d='M12 2.4a9.6 9.6 0 100 19.2 9.6 9.6 0 000-19.2zm5 6.9a1.15 1.15 0 00-1.75-1.5l-4.6 5.35-2.2-2.05a1.15 1.15 0 10-1.56 1.68l3.08 2.86a1.15 1.15 0 001.65-.09l5.38-6.25z'/%3E%3C/g%3E%3C/svg%3E");--dash:#C7CEDA;--bblue:#CFE0FF}
.cmp-arch-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;margin-top:34px}
.cmp-arch .cmp-arch-col{background:#F8FAFC;border:1px solid var(--line);border-radius:20px;padding:26px 26px 22px;display:flex;flex-direction:column}
.cmp-arch .cmp-arch-col.cmp-arch-union{background:#F4F8FF;border-color:var(--bblue)}
.cmp-arch .cmp-arch-col>.cmp-kicker{display:none}

/* Shared icon base. Only size and slot offset vary per icon. */
.cmp-ah-badge-o:before,.cmp-dg-tiles>span:before,.cmp-dg-pills>span:before,.cmp-dg-pms:before,.cmp-dg-sync>span:before,.cmp-arch-col>p:before{content:"";display:block;background:currentColor;-webkit-mask-image:var(--ico);mask-image:var(--ico);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* Header */
.cmp-ah{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.cmp-ah-badge{flex:0 0 auto;width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#fff}
.cmp-ah-badge-o{background:#525C6E}
.cmp-ah-badge-o:before{width:22px;height:22px;-webkit-mask-size:286px 22px;mask-size:286px 22px;-webkit-mask-position:-198px 0;mask-position:-198px 0}
.cmp-ah-badge-u{background:var(--brand);font-size:23px;font-weight:800;line-height:1}
.cmp-ah-t{font-size:20px;font-weight:800;letter-spacing:.005em;text-transform:uppercase;color:var(--ink);line-height:1.15}
.cmp-ah-s{font-size:14.5px;line-height:1.4;color:var(--muted);margin-top:3px}
.cmp-arch-union .cmp-ah-t{color:var(--brand)}
.cmp-arch-union .cmp-ah-s{color:#3D84FA}

.cmp-diagram{position:relative;margin-bottom:22px}

/* Overlay side: four tiles, dashed drops into a dashed bus, then SYNC, then the PMS */
.cmp-dg-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cmp-dg-tiles>span{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 6px 15px;text-align:center;font-size:13px;font-weight:600;line-height:1.3;color:var(--ink)}
.cmp-dg-tiles>span:before{width:26px;height:26px;margin:0 auto 11px;color:#5B6577;-webkit-mask-size:338px 26px;mask-size:338px 26px}
.cmp-dg-tiles>span:nth-child(1):before{-webkit-mask-position:0 0;mask-position:0 0}
.cmp-dg-tiles>span:nth-child(2):before{-webkit-mask-position:-26px 0;mask-position:-26px 0}
.cmp-dg-tiles>span:nth-child(3):before{-webkit-mask-position:-52px 0;mask-position:-52px 0}
.cmp-dg-tiles>span:nth-child(4):before{-webkit-mask-position:-78px 0;mask-position:-78px 0}
.cmp-dg-tiles>span:after{content:"";position:absolute;left:50%;top:100%;height:40px;border-left:2px dashed var(--dash)}
.cmp-dg-sync{position:relative;margin-top:20px;height:40px;display:flex;align-items:center;justify-content:center}
.cmp-dg-sync:before{content:"";position:absolute;left:12.5%;right:12.5%;top:50%;border-top:2px dashed var(--dash)}
.cmp-dg-sync:after{content:"";position:absolute;left:50%;top:50%;height:52px;border-left:2px dashed var(--dash)}
.cmp-dg-sync>span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.cmp-dg-sync>span:before{width:15px;height:15px;color:#5B6577;-webkit-mask-size:195px 15px;mask-size:195px 15px;-webkit-mask-position:-90px 0;mask-position:-90px 0}

/* The PMS bar closes both diagrams */
.cmp-dg-pms{position:relative;margin-top:32px;display:flex;align-items:center;justify-content:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:15px;font-weight:600;color:var(--ink)}
.cmp-dg-pms:before{width:20px;height:20px;color:#5B6577;-webkit-mask-size:260px 20px;mask-size:260px 20px;-webkit-mask-position:-160px 0;mask-position:-160px 0}
.cmp-dg-pms:after{content:"";position:absolute;left:50%;top:-13px;margin-left:-6px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--dash)}

/* Union side: one panel of eight pills on a solid spine */
.cmp-dg-one{background:#fff;border:1px solid #E2ECFF;border-radius:16px;padding:20px 18px}
.cmp-dg-one-t{display:block;text-align:center;font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--brand);margin-bottom:16px}
.cmp-dg-pills{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cmp-dg-pills>span{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#fff;border:1px solid var(--bblue);border-radius:999px;padding:9px 6px;font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.cmp-dg-pills>span:before{flex:0 0 auto;width:17px;height:17px;color:var(--brand);-webkit-mask-size:221px 17px;mask-size:221px 17px}
.cmp-dg-pills>span:nth-child(1):before{-webkit-mask-position:-68px 0;mask-position:-68px 0}
.cmp-dg-pills>span:nth-child(2):before{-webkit-mask-position:0 0;mask-position:0 0}
.cmp-dg-pills>span:nth-child(3):before{-webkit-mask-position:-17px 0;mask-position:-17px 0}
.cmp-dg-pills>span:nth-child(4):before{-webkit-mask-position:-34px 0;mask-position:-34px 0}
.cmp-dg-pills>span:nth-child(5):before{-webkit-mask-position:-51px 0;mask-position:-51px 0}
.cmp-dg-pills>span:nth-child(6):before{-webkit-mask-position:-85px 0;mask-position:-85px 0}
.cmp-dg-pills>span:nth-child(7):before{-webkit-mask-position:-102px 0;mask-position:-102px 0}
.cmp-dg-pills>span:nth-child(8):before{-webkit-mask-position:-119px 0;mask-position:-119px 0}
.cmp-dg-link{position:relative;padding-top:34px;display:flex;justify-content:center}
.cmp-dg-link:before{content:"";position:absolute;left:50%;top:0;height:34px;border-left:2px solid var(--brand)}
.cmp-dg-link:after{content:"";position:absolute;left:50%;top:100%;height:32px;border-left:2px solid var(--brand)}
.cmp-dg-link>span{position:relative;z-index:1;background:#fff;border:1px solid var(--bblue);border-radius:999px;padding:8px 18px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.cmp-arch-union .cmp-dg-pms{border-color:var(--bblue)}
.cmp-arch-union .cmp-dg-pms:before{color:var(--brand)}
.cmp-arch-union .cmp-dg-pms:after{border-top-color:var(--brand)}

/* Footnote, divided and marked. margin-top:auto keeps both notes on the same baseline. */
.cmp-arch .cmp-arch-col>p{position:relative;margin:0;margin-top:auto;padding:18px 0 0 32px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.55;color:#4A5463}
.cmp-arch-union>p{border-top-color:var(--bblue)}
.cmp-arch-col>p:before{position:absolute;left:0;top:19px;width:20px;height:20px;color:var(--muted);-webkit-mask-size:260px 20px;mask-size:260px 20px;-webkit-mask-position:-200px 0;mask-position:-200px 0}
.cmp-arch-union>p:before{color:var(--brand);-webkit-mask-position:-240px 0;mask-position:-240px 0}

@media screen and (max-width:1100px){
.cmp-dg-pills{grid-template-columns:repeat(2,1fr)}
}
@media screen and (max-width:900px){
.cmp-arch-grid{grid-template-columns:1fr;gap:18px}
.cmp-dg-pills{grid-template-columns:repeat(4,1fr)}
}
@media screen and (max-width:640px){
.cmp-arch .cmp-arch-col{padding:20px 18px 18px}
.cmp-dg-tiles{grid-template-columns:repeat(2,1fr)}
.cmp-dg-pills{grid-template-columns:repeat(2,1fr)}
/* 2x2 tiles would drop connectors onto the row below, so the bus is dropped here. */
.cmp-dg-tiles>span:after,.cmp-dg-sync:before{display:none}
.cmp-ah-t{font-size:17px}
.cmp-ah-badge{width:38px;height:38px}
}