:root{--jb-bg:#101A29;--jb-surface:#1D2B3C;--jb-text:#E8EDF0;--jb-muted:#8DA2B3;--jb-accent:#9FB9C8;--jb-border:rgba(159,185,200,.22);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--jb-bg);color:var(--jb-text);font:400 16px/1.65 Inter,"Segoe UI",system-ui,sans-serif}a{color:inherit}.shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}.skip{position:absolute;top:-80px;left:20px;z-index:20;background:var(--jb-text);color:var(--jb-bg);padding:12px}.skip:focus{top:12px}.top{display:flex;justify-content:space-between;align-items:center;padding:24px 0;gap:20px}.brand{text-decoration:none;font-weight:800;letter-spacing:.11em;font-size:1.1rem}.back{text-decoration:none;color:var(--jb-muted);font-size:1rem}.back:hover,.back:focus-visible{color:var(--jb-text)}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:24px;flex-wrap:wrap}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.locale-switch select{appearance:auto;background:var(--jb-surface);color:var(--jb-text);border:1px solid var(--jb-border);border-radius:8px;padding:8px 10px;font:600 .9rem/1.3 inherit;cursor:pointer}.locale-switch select:focus-visible{outline:2px solid var(--jb-accent);outline-offset:3px}.hero{position:relative;overflow:hidden;min-height:0;padding:56px 0 62px;border-bottom:1px solid var(--jb-border);background:radial-gradient(ellipse at 78% 42%,rgba(159,185,200,.1),transparent 38%)}.hero .shell{position:relative;z-index:1}.kicker{margin:0;color:var(--jb-accent);font-size:clamp(1rem,1.25vw,1.125rem);font-weight:750;letter-spacing:.095em;text-transform:uppercase}.hero h1{font-size:clamp(2.1rem,4.2vw,3.9rem);line-height:1.08;letter-spacing:-.055em;max-width:970px;margin:16px 0 16px}.hero-lead{max-width:730px;color:var(--jb-muted);font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.6}.hero-action{display:inline-flex;gap:32px;align-items:center;border:1px solid var(--jb-accent);padding:13px 22px;margin-top:14px;text-decoration:none;border-radius:100px;font-weight:700;transition:background .2s}.hero-action:hover,.hero-action:focus-visible{background:var(--jb-surface)}.hero-geometry{display:none;position:absolute;right:-5%;top:2%;width:48vw;height:48vw;max-width:680px;max-height:680px;opacity:.35;pointer-events:none}.hero-geometry span{position:absolute;inset:10%;border:1px solid var(--jb-accent);transform:rotate(32deg);border-radius:15%}.hero-geometry span:nth-child(2){inset:24%;transform:rotate(60deg)}.hero-geometry span:nth-child(3){inset:39%;transform:rotate(12deg)}.workbench{padding-top:80px;padding-bottom:110px}.workbench-intro{max-width:800px;margin-bottom:48px}.workbench-intro h2{font-size:clamp(2rem,3.6vw,3.5rem);letter-spacing:-.045em;line-height:1.2;margin:12px 0}.workbench-intro>p:last-child{font-size:1.15rem;color:var(--jb-muted)}.workbench-layout{display:grid;grid-template-columns:minmax(230px,310px) minmax(0,1fr);align-items:start;gap:42px}.case-navigation{position:sticky;top:22px;border-top:1px solid var(--jb-border)}.case-link{display:grid;grid-template-columns:1fr auto;column-gap:8px;row-gap:4px;padding:19px 14px 19px 16px;border-bottom:1px solid var(--jb-border);text-decoration:none;transition:background .2s,border-color .2s}.case-link:hover,.case-link:focus-visible,.case-link.active{background:var(--jb-surface);border-left:3px solid var(--jb-accent);padding-left:13px}.case-number{grid-column:1/-1;color:var(--jb-accent);font-size:1rem;font-weight:700;letter-spacing:.08em}.case-name{font-size:1.12rem;font-weight:700;line-height:1.35}.case-arrow{color:var(--jb-accent);font-size:1.2rem}.case-content{min-width:0}.case-article{scroll-margin-top:30px;padding:0 0 78px;margin:0 0 78px;border-bottom:1px solid var(--jb-border)}.case-article:last-child{border-bottom:0;margin-bottom:0}.case-heading{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:start}.case-count{color:var(--jb-accent);font-size:1.05rem;font-weight:750;padding-top:9px}.case-tag{color:var(--jb-accent);font-size:.95rem;letter-spacing:.1em;font-weight:700;margin:0 0 8px}.case-heading h3{font-size:clamp(2rem,3vw,3.05rem);line-height:1.12;letter-spacing:-.04em;margin:0}.case-summary{font-size:1.14rem;color:var(--jb-muted);margin:15px 0 28px}.architecture{border:1px solid var(--jb-border);border-radius:18px;overflow:hidden;background:radial-gradient(circle at 75% 30%,rgba(159,185,200,.09),transparent 55%),var(--jb-surface);margin:10px 0 32px}.architecture-top,.architecture-bottom{display:flex;justify-content:space-between;gap:14px;padding:15px 22px;color:var(--jb-muted);font-size:.79rem;font-weight:700;letter-spacing:.07em}.architecture-top{border-bottom:1px solid var(--jb-border)}.architecture-bottom{border-top:1px solid var(--jb-border);align-items:center;justify-content:flex-start;letter-spacing:0;font-weight:500;font-size:.85rem}.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--jb-accent);flex-shrink:0;box-shadow:0 0 0 4px rgba(159,185,200,.1)}.architecture-track{display:flex;align-items:stretch;justify-content:center;gap:6px;padding:40px 18px;min-height:165px}.architecture-unit{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center;gap:12px;padding:15px 12px;background:rgba(16,26,41,.72);border:1px solid rgba(159,185,200,.34);border-radius:9px;position:relative;transition:border-color .2s,transform .2s}.architecture-unit:hover{border-color:var(--jb-accent);transform:translateY(-3px)}.unit-count{font-size:.75rem;color:var(--jb-accent);letter-spacing:.08em}.architecture-unit strong{font-size:clamp(.75rem,.95vw,.9rem);line-height:1.35;overflow-wrap:anywhere}.architecture-connector{align-self:center;color:var(--jb-accent);font-size:1.2rem;flex-shrink:0}.architecture-atm .architecture-unit:nth-of-type(3),.architecture-aws .architecture-unit:nth-of-type(3){border-top:3px solid var(--jb-accent)}.architecture-backup .architecture-unit:last-child,.architecture-identity .architecture-unit:last-child{border-style:dashed}.architecture-discovery .architecture-unit:first-child{border-style:dashed}.architecture-hotel .architecture-unit:nth-of-type(3){background:rgba(159,185,200,.14);border-color:var(--jb-accent)}.case-end-nav{display:flex;justify-content:flex-end;align-items:center;gap:14px;flex-wrap:wrap;margin-top:34px;padding-top:20px;border-top:1px solid var(--jb-border)}.case-end-nav a{color:var(--jb-accent);font-size:.95rem;font-weight:650;text-decoration:none}.case-end-nav a:hover,.case-end-nav a:focus-visible{color:var(--jb-text);text-decoration:underline;text-underline-offset:4px}.case-insights{display:grid;gap:24px}.case-insights>div{padding-left:20px;border-left:2px solid var(--jb-border)}.case-insights h4{font-size:1rem;letter-spacing:.075em;color:var(--jb-accent);margin:0 0 6px}.case-insights p{font-size:clamp(1.05rem,1.3vw,1.17rem);line-height:1.75;margin:0;max-width:740px}.footer{border-top:1px solid var(--jb-border);padding:32px 0 50px;color:var(--jb-muted)}.footer .shell{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}a:focus-visible{outline:2px solid var(--jb-accent);outline-offset:4px}
@media(max-width:920px){.workbench-layout{grid-template-columns:1fr;gap:30px}.case-navigation{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.case-article{padding-bottom:60px;margin-bottom:60px}.hero-geometry{opacity:.16}}@media(max-width:600px){.header-actions{gap:12px}.locale-switch{gap:6px}.shell{width:calc(100% - 34px)}.top{padding:20px 0}.hero{min-height:0;padding:42px 0 48px}.workbench{padding:56px 0}.case-navigation{grid-template-columns:1fr}.case-link{padding:13px}.case-link.active,.case-link:hover,.case-link:focus-visible{padding-left:10px}.case-heading{grid-template-columns:1fr;gap:0}.case-count{padding:0 0 12px}.architecture-top,.architecture-bottom{padding:12px;font-size:.7rem}.architecture-track{padding:20px 12px;display:grid;grid-template-columns:1fr;gap:6px}.architecture-unit{min-height:65px;flex-direction:row;justify-content:flex-start;align-items:center;gap:15px;padding:10px 15px}.architecture-unit strong{font-size:.9rem}.architecture-connector{justify-self:center;transform:rotate(90deg);line-height:1}.case-insights>div{padding-left:14px}.case-article{padding-bottom:48px;margin-bottom:48px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.architecture-unit,.case-link,.hero-action{transition:none}.architecture-unit:hover{transform:none}}

/* Cases are identified by their subject, never by an arbitrary sequence. */
.case-heading{display:block}.architecture-unit{gap:0}.case-link{row-gap:0}

/* Compact language menu for Architecture in Context. */
.locale-switch{position:relative;flex:none;font-size:12px;letter-spacing:.04em;color:var(--jb-muted)}
.locale-switch summary{display:flex;align-items:center;gap:5px;cursor:pointer;list-style:none;color:var(--jb-text);font-weight:700;padding:8px 10px;border:1px solid var(--jb-border);border-radius:9px;user-select:none}
.locale-switch summary::-webkit-details-marker{display:none}
.locale-switch summary:hover,.locale-switch[open] summary{background:rgba(255,255,255,.08)}
.locale-switch summary:focus-visible,.locale-switch a:focus-visible{outline:2px solid var(--jb-accent);outline-offset:2px}
.locale-chevron{font-size:13px;line-height:1}
.locale-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:30;min-width:65px;padding:5px;background:var(--jb-surface);border:1px solid var(--jb-border);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.35)}
.locale-menu a{display:block;padding:9px 12px;color:var(--jb-muted);text-decoration:none;border-radius:8px;text-align:center}
.locale-menu a:hover,.locale-menu a[aria-current="page"]{background:rgba(255,255,255,.08);color:var(--jb-text)}
.locale-menu a[aria-current="page"]{font-weight:700}

/* Air-traffic modernization: conceptual, staged infrastructure coexistence. */
.atm-transition .atm-body{padding:24px 22px 26px}
.atm-stage-label{color:var(--jb-accent);font-weight:750;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.atm-domains{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.48fr) minmax(0,1fr);gap:12px;align-items:stretch}
.atm-domain{border:1px solid var(--jb-border);border-radius:12px;padding:15px;background:rgba(16,26,41,.55);display:grid;grid-template-rows:auto repeat(3,minmax(46px,auto));gap:9px}
.atm-domain h5{margin:0 0 3px;color:var(--jb-text);font-size:.9rem;letter-spacing:.035em}
.atm-card{display:flex;align-items:center;justify-content:center;text-align:center;padding:9px;border:1px solid rgba(112,183,216,.4);border-radius:8px;background:rgba(112,183,216,.07);font-size:clamp(.75rem,1.1vw,.9rem);font-weight:600;transition:opacity .55s,border-color .55s,background .55s,transform .55s}
.atm-virtual{border-color:rgba(140,158,229,.55);background:rgba(140,158,229,.08)}
.atm-container{border-color:rgba(104,184,164,.55);background:rgba(104,184,164,.08)}
.atm-transition[data-stage="0"] .atm-virtual,.atm-transition[data-stage="0"] .atm-container,.atm-transition[data-stage="1"] .atm-container{opacity:.15;transform:scale(.97)}
.atm-interconnect{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.atm-interconnect svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.atm-route{fill:none;stroke:#70b7d8;stroke-width:2;stroke-dasharray:7 6;vector-effect:non-scaling-stroke;animation:atm-flow 1.8s linear infinite}
.atm-route-virtual{stroke:#8c9ee5}.atm-route-container{stroke:#68b8a4}
.atm-transition[data-stage="0"] .atm-route-virtual,.atm-transition[data-stage="0"] .atm-route-container,.atm-transition[data-stage="1"] .atm-route-container{opacity:.08;animation:none}
.atm-interconnect span{position:absolute;z-index:1;top:0;left:50%;transform:translateX(-50%);width:max-content;max-width:100%;padding:0 4px;background:var(--jb-surface);color:var(--jb-muted);font-size:.7rem;line-height:1.35;text-align:center}
.atm-continuity{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(104,184,164,.35);border-radius:9px;padding:12px;margin-top:18px;color:var(--jb-text);font-size:.88rem}
.atm-continuity .pulse-dot{background:#68b8a4;box-shadow:0 0 0 4px rgba(104,184,164,.1)}
.atm-stage-detail{color:var(--jb-muted);font-size:.9rem;line-height:1.6;min-height:2.8em;margin:16px 0 10px}
.atm-controls{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.atm-controls button{font:inherit;font-size:.82rem;color:var(--jb-text);background:transparent;border:1px solid var(--jb-border);border-radius:9px;padding:8px 12px;cursor:pointer}
.atm-controls button:hover,.atm-controls button:focus-visible{border-color:var(--jb-accent);background:rgba(159,185,200,.09)}
@keyframes atm-flow{to{stroke-dashoffset:-26}}
@media(max-width:600px){.atm-transition .atm-body{padding:18px 12px}.atm-domains{grid-template-columns:minmax(0,1fr) 55px minmax(0,1fr);gap:5px}.atm-domain{padding:9px 6px;gap:7px}.atm-domain h5{font-size:.76rem}.atm-card{padding:6px 3px;font-size:.69rem;overflow-wrap:anywhere}.atm-interconnect span{font-size:.57rem;padding:5px 2px}.atm-stage-detail{min-height:0}}
@media(prefers-reduced-motion:reduce){.atm-route{animation:none}.atm-card{transition:none}}

/* Technology cues: Cisco network, VMware NSX/Tanzu, Red Hat OpenShift.
   Keep the existing stage/reduced-motion behavior and dark JBGRID surface. */
.atm-transition{--atm-cisco:#89939e;--atm-vmware:#0091da;--atm-openshift:#ee0000}
.atm-transition .atm-card.atm-physical{border-color:rgba(137,147,158,.7);background:rgba(137,147,158,.12);box-shadow:inset 3px 0 0 var(--atm-cisco)}
.atm-transition .atm-domain:first-child .atm-card.atm-virtual,
.atm-transition .atm-domain:first-child .atm-card.atm-container{border-color:rgba(0,145,218,.7);background:rgba(0,145,218,.13);box-shadow:inset 3px 0 0 var(--atm-vmware)}
.atm-transition .atm-domain:last-child .atm-card.atm-virtual,
.atm-transition .atm-domain:last-child .atm-card.atm-container{border-color:rgba(238,0,0,.62);background:rgba(238,0,0,.12);box-shadow:inset 3px 0 0 var(--atm-openshift)}
.atm-transition .atm-route-base{stroke:var(--atm-cisco)}
.atm-transition .atm-route-virtual{stroke:var(--atm-vmware)}
.atm-transition .atm-route-container{stroke:var(--atm-openshift)}

/* Backup and recovery: protection is not proof of service restoration. */
.backup-recovery .backup-body{padding:24px 22px 26px;max-width:740px;margin:auto}
.backup-stage-label{font-size:.82rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--jb-accent);margin-bottom:16px}
.backup-workloads{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.backup-workload{border:1px solid rgba(137,147,158,.58);border-radius:10px;background:rgba(137,147,158,.09);text-align:center;padding:14px 10px;font-weight:650}
.backup-link{height:70px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:1px;color:var(--jb-muted);font-size:.72rem;letter-spacing:.06em;font-weight:650;text-align:center;transition:opacity .55s}
.backup-link svg{width:80px;height:34px;overflow:visible}
.backup-link path{fill:none;stroke:#4b9ec4;stroke-width:2;stroke-dasharray:6 5;animation:backup-flow 1.4s linear infinite}
.backup-link-restore path{stroke:#67b69d;stroke-dasharray:6 5}
.backup-strategy{border:1px solid rgba(75,158,196,.5);background:rgba(75,158,196,.065);border-radius:12px;padding:16px;text-align:center;transition:opacity .55s,transform .55s}
.backup-strategy>strong{font-size:.85rem;letter-spacing:.045em}
.backup-rule{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.backup-rule>div{background:rgba(16,26,41,.55);border:1px solid var(--jb-border);border-radius:8px;display:flex;align-items:center;flex-direction:column;gap:0;padding:9px 5px}
.backup-rule b{font-size:1.5rem;line-height:1.3;color:#88c1da}
.backup-rule span{font-size:.75rem;color:var(--jb-muted)}
.backup-service{display:flex;gap:12px;align-items:center;justify-content:center;padding:15px;border:1px solid rgba(103,182,157,.6);border-radius:12px;background:rgba(103,182,157,.09);transition:opacity .55s,transform .55s}
.backup-check{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:rgba(103,182,157,.18);color:#8ad3b8;font-weight:800}
.backup-service strong{display:block;font-size:.88rem;letter-spacing:.045em}
.backup-service small{display:block;color:var(--jb-muted);font-size:.75rem;line-height:1.5}
.backup-recovery[data-stage="0"] .backup-strategy,.backup-recovery[data-stage="0"] .backup-link-restore,.backup-recovery[data-stage="0"] .backup-service,.backup-recovery[data-stage="1"] .backup-link-restore,.backup-recovery[data-stage="1"] .backup-service,.backup-recovery[data-stage="2"] .backup-service{opacity:.14;transform:scale(.98)}
.backup-recovery[data-stage="0"] .backup-link-protect{opacity:.25}
.backup-recovery[data-stage="0"] .backup-link path,.backup-recovery[data-stage="1"] .backup-link-restore path{animation:none}
.backup-controls{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:17px}
.backup-controls button{font:inherit;font-size:.82rem;color:var(--jb-text);background:transparent;border:1px solid var(--jb-border);border-radius:9px;padding:8px 12px;cursor:pointer}
.backup-controls button:hover,.backup-controls button:focus-visible{border-color:var(--jb-accent);background:rgba(159,185,200,.09)}
@keyframes backup-flow{to{stroke-dashoffset:-22}}
@media(max-width:600px){.backup-recovery .backup-body{padding:18px 12px}.backup-rule{gap:5px}.backup-rule>div{padding:7px 3px}.backup-service{padding:12px}}
@media(prefers-reduced-motion:reduce){.backup-link path{animation:none}.backup-strategy,.backup-service,.backup-link{transition:none}}

/* Federated identity: source context, cross-cutting controls, access and audit. */
.identity-architecture .identity-body{max-width:760px;margin:auto;padding:24px 22px 26px}
.identity-stage-label{font-size:.82rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--jb-accent);margin-bottom:17px}
.identity-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.identity-node{border:1px solid rgba(137,147,158,.58);border-radius:10px;background:rgba(137,147,158,.08);padding:15px 10px;text-align:center;transition:opacity .5s,transform .5s,border-color .5s}
.identity-node strong,.identity-center strong{display:block;font-size:.92rem}
.identity-node small,.identity-center small{display:block;color:var(--jb-muted);font-size:.75rem;line-height:1.5}
.identity-path{height:54px;display:flex;justify-content:center;transition:opacity .5s}
.identity-path svg{height:100%;width:min(260px,70%);overflow:visible}
.identity-path path{fill:none;stroke:#70a8cb;stroke-width:2;stroke-dasharray:7 6;vector-effect:non-scaling-stroke;animation:identity-flow 1.6s linear infinite}
.identity-path-out path{stroke:#72b99d}
.identity-center{border:1px solid rgba(112,168,203,.65);background:rgba(112,168,203,.08);border-radius:12px;padding:17px;text-align:center;transition:opacity .5s,transform .5s}
.identity-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:13px}
.identity-controls span{display:grid;place-items:center;border:1px solid rgba(160,147,210,.52);border-radius:8px;background:rgba(160,147,210,.09);padding:10px 5px;font-size:.77rem;font-weight:650;transition:opacity .5s,background .5s}
.identity-audit{display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;border:1px solid var(--jb-border);background:rgba(137,147,158,.06);border-radius:9px;margin-top:18px;padding:12px;color:var(--jb-muted);font-size:.8rem;transition:opacity .5s,border-color .5s}
.identity-audit .pulse-dot{background:#9c92c9}
.identity-architecture[data-stage="0"] .identity-center,.identity-architecture[data-stage="0"] .identity-path-out,.identity-architecture[data-stage="0"] .identity-targets,.identity-architecture[data-stage="0"] .identity-audit,.identity-architecture[data-stage="1"] .identity-path-out,.identity-architecture[data-stage="1"] .identity-targets,.identity-architecture[data-stage="1"] .identity-audit,.identity-architecture[data-stage="2"] .identity-audit{opacity:.16}
.identity-architecture[data-stage="0"] .identity-controls span{opacity:.2}
.identity-architecture[data-stage="1"] .identity-controls span{opacity:1;background:rgba(160,147,210,.16)}
.identity-architecture[data-stage="2"] .identity-targets .identity-node,.identity-architecture[data-stage="3"] .identity-targets .identity-node{border-color:rgba(114,185,157,.7)}
.identity-architecture[data-stage="3"] .identity-audit{border-color:rgba(160,147,210,.55);opacity:1}
.identity-architecture[data-stage="0"] .identity-path path,.identity-architecture[data-stage="1"] .identity-path-out path{animation:none}
.identity-controls-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:17px}
.identity-controls-actions button{font:inherit;font-size:.82rem;color:var(--jb-text);background:transparent;border:1px solid var(--jb-border);border-radius:9px;padding:8px 12px;cursor:pointer}
.identity-controls-actions button:hover,.identity-controls-actions button:focus-visible{border-color:var(--jb-accent);background:rgba(159,185,200,.09)}
@keyframes identity-flow{to{stroke-dashoffset:-26}}
@media(max-width:600px){.identity-architecture .identity-body{padding:18px 12px}.identity-node{padding:11px 5px}.identity-controls{gap:5px}.identity-controls span{padding:8px 3px;font-size:.69rem}.identity-path{height:45px}}
@media(prefers-reduced-motion:reduce){.identity-path path{animation:none}.identity-node,.identity-center,.identity-controls span,.identity-audit,.identity-path{transition:none}}

/* Banking IAM: illustrative identity-by-identity migration during platform coexistence. */
.iam-migration .iam-body{max-width:760px;margin:auto;padding:24px 22px 26px}
.iam-stage-label{font-size:.82rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--jb-accent);margin-bottom:17px}
.iam-customer{width:min(280px,100%);margin:auto;border:1px solid var(--jb-border);background:rgba(137,147,158,.08);border-radius:10px;padding:13px;text-align:center;transition:border-color .5s}
.iam-customer strong,.iam-platform strong,.iam-capability strong{display:block;font-size:.91rem}
.iam-customer small,.iam-platform small,.iam-capability small,.iam-migration-note small{display:block;color:var(--jb-muted);font-size:.75rem;line-height:1.5}
.iam-entry{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 0 12px;color:var(--jb-muted);font-size:.74rem}
.iam-entry svg{width:60px;height:38px}
.iam-entry path{fill:none;stroke:#83b6d2;stroke-width:2;stroke-dasharray:6 5;animation:iam-flow 1.4s linear infinite}
.iam-platforms{display:grid;grid-template-columns:minmax(0,1fr) minmax(55px,.42fr) minmax(0,1fr);gap:8px;align-items:center}
.iam-platform{min-height:134px;border:1px solid rgba(137,147,158,.65);border-radius:11px;padding:16px 9px;background:rgba(137,147,158,.08);text-align:center;transition:opacity .5s,border-color .5s,background .5s}
.iam-modern{border-color:rgba(91,161,208,.65);background:rgba(91,161,208,.08)}
.iam-dots{display:flex;gap:8px;justify-content:center;margin-top:17px}
.iam-dots i{width:8px;height:8px;border-radius:50%;background:#89939e;transition:opacity .5s,background .5s}
.iam-modern .iam-dots i{background:#5ba1d0;opacity:.3}
.iam-crossing{position:relative;min-width:0}
.iam-crossing svg{display:block;width:100%;height:54px;overflow:visible}
.iam-crossing path{fill:none;stroke:#6aafba;stroke-width:2;stroke-dasharray:7 6;animation:iam-flow 1.4s linear infinite}
.iam-traveler{position:absolute;left:0;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#82d0b9;box-shadow:0 0 0 4px rgba(130,208,185,.13);opacity:0}
.iam-migration[data-stage="2"] .iam-traveler{opacity:1;animation:iam-travel 2.5s ease-in-out forwards}
.iam-migration-note{text-align:center;margin:16px 0 14px}
.iam-migration-note strong{display:block;font-size:.83rem}
.iam-capability{border:1px solid rgba(91,161,208,.4);background:rgba(91,161,208,.065);border-radius:10px;padding:15px;text-align:center;transition:opacity .5s,border-color .5s}
.iam-migration[data-stage="0"] .iam-entry,.iam-migration[data-stage="0"] .iam-capability{opacity:.3}
.iam-migration[data-stage="0"] .iam-crossing path,.iam-migration[data-stage="1"] .iam-crossing path{animation:none;opacity:.25}
.iam-migration[data-stage="1"] .iam-customer{border-color:#83b6d2}
.iam-migration[data-stage="0"] .iam-modern .iam-dots i,.iam-migration[data-stage="1"] .iam-modern .iam-dots i{opacity:.15}
.iam-migration[data-stage="3"] .iam-modern{border-color:rgba(130,208,185,.7);background:rgba(130,208,185,.09)}
.iam-migration[data-stage="3"] .iam-modern .iam-dots i{opacity:1;background:#82d0b9}
.iam-migration[data-stage="3"] .iam-legacy .iam-dots i{opacity:.75}
.iam-migration[data-stage="3"] .iam-capability{border-color:rgba(130,208,185,.65)}
.iam-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:17px}
.iam-actions button{font:inherit;font-size:.82rem;color:var(--jb-text);background:transparent;border:1px solid var(--jb-border);border-radius:9px;padding:8px 12px;cursor:pointer}
.iam-actions button:hover,.iam-actions button:focus-visible{border-color:var(--jb-accent);background:rgba(159,185,200,.09)}
@keyframes iam-flow{to{stroke-dashoffset:-26}}
@keyframes iam-travel{0%{left:0;opacity:0}12%{opacity:1}85%{opacity:1}100%{left:calc(100% - 12px);opacity:0}}
@media(max-width:600px){.iam-migration .iam-body{padding:18px 12px}.iam-platforms{grid-template-columns:minmax(0,1fr) minmax(34px,.32fr) minmax(0,1fr);gap:4px}.iam-platform{padding:12px 5px;min-height:145px}.iam-platform strong{font-size:.8rem}.iam-platform small{font-size:.68rem}.iam-dots{gap:5px}.iam-dots i{width:6px;height:6px}.iam-traveler{width:9px;height:9px}}
@media(prefers-reduced-motion:reduce){.iam-entry path,.iam-crossing path,.iam-migration[data-stage="2"] .iam-traveler{animation:none}.iam-customer,.iam-platform,.iam-capability,.iam-dots i{transition:none}}

/* Connected banking journey: customer -> legacy -> modern -> authentication/signature. */
.iam-migration .iam-entry{padding:7px 0 0;gap:6px}
.iam-migration .iam-entry svg,.iam-migration .iam-service-route svg{display:block;width:100%;height:58px;overflow:visible}
.iam-migration .iam-entry path,.iam-migration .iam-service-route path{fill:none;stroke:#83b6d2;stroke-width:1.2;stroke-dasharray:2.2 1.5;vector-effect:non-scaling-stroke;animation:iam-flow 1.4s linear infinite}
.iam-migration .iam-service-route path{stroke:#82d0b9}
.iam-service-route{height:58px;margin-top:12px;transition:opacity .5s}
.iam-flow-dot{fill:#83b6d2;opacity:.9}
.iam-service-route .iam-flow-dot{fill:#82d0b9}
.iam-migration[data-stage="0"] .iam-entry .iam-flow-dot,.iam-migration[data-stage="0"] .iam-service-route .iam-flow-dot,.iam-migration[data-stage="1"] .iam-service-route .iam-flow-dot,.iam-migration[data-stage="2"] .iam-service-route .iam-flow-dot{opacity:0}
.iam-migration[data-stage="0"] .iam-service-route,.iam-migration[data-stage="1"] .iam-service-route,.iam-migration[data-stage="2"] .iam-service-route{opacity:.25}
.iam-migration[data-stage="0"] .iam-entry path,.iam-migration[data-stage="0"] .iam-service-route path,.iam-migration[data-stage="1"] .iam-service-route path,.iam-migration[data-stage="2"] .iam-service-route path{animation:none}
.iam-migration[data-stage="3"] .iam-capability{opacity:1}
@media(prefers-reduced-motion:reduce){.iam-migration .iam-entry path,.iam-migration .iam-service-route path{animation:none}.iam-migration .iam-flow-dot{display:none}}

/* Modern IAM -> authentication/signature: green flow throughout, including the moving marker. */
.iam-migration .iam-service-route path{stroke:#82d0b9}
.iam-migration .iam-service-route .iam-flow-dot{fill:#82d0b9}

/* IAM pictograms: native inline SVG, aligned with the original conceptual design. */
.iam-migration .iam-icon{display:block;width:22px;height:22px;margin:0 auto 9px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.iam-migration .iam-icon-phone{color:#aab6c4}
.iam-migration .iam-icon-legacy{color:#89939e}
.iam-migration .iam-icon-modern{color:#5ba1d0}
.iam-migration .iam-icon-fingerprint{color:#82d0b9}
.iam-migration .iam-capability .iam-icon{margin-bottom:8px}

/* Bridge the modern IAM card to the service card across the migration caption. */
.iam-migration .iam-service-route{height:112px;margin-top:0;margin-bottom:-112px;position:relative;z-index:0;pointer-events:none}
.iam-migration .iam-service-route svg{height:112px}
.iam-migration .iam-migration-note{position:relative;z-index:1;pointer-events:none;background:transparent;min-height:84px;display:flex;flex-direction:column;justify-content:center;margin:0 0 14px}
.iam-migration .iam-service-route path{stroke:#82d0b9;stroke-width:1.2}

/* AWS operable platform: IaC materializes isolated accounts, ephemeral staging and DevOps operations. */
.aws-operable .aws-operable-body{max-width:760px;margin:auto;padding:24px 22px 26px}
.aws-operable-stage{font-size:.82rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--jb-accent);margin-bottom:17px}
.aws-iac,.aws-operations{border:1px solid rgba(160,147,210,.55);background:rgba(160,147,210,.075);border-radius:11px;padding:15px;text-align:center;transition:opacity .5s,border-color .5s}
.aws-platform-icon{display:block;width:23px;height:23px;margin:0 auto 9px;fill:none;stroke:#a093d2;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.aws-iac strong,.aws-operations strong,.aws-env strong{display:block;font-size:.91rem}
.aws-iac small,.aws-operations small,.aws-env small{display:block;color:var(--jb-muted);font-size:.75rem;line-height:1.5}
.aws-provision-route{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--jb-muted);font-size:.73rem;padding-top:10px;transition:opacity .5s}
.aws-provision-route svg{width:100%;height:46px;overflow:visible}
.aws-provision-route path,.aws-ops-route path{fill:none;stroke:#83b6d2;stroke-width:1.6;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;animation:aws-provision-flow 1.4s linear infinite}
.aws-provision-route circle{fill:#a093d2}
.aws-organization{border:1px solid rgba(91,161,208,.6);background:rgba(91,161,208,.055);border-radius:12px;padding:16px;transition:opacity .5s,transform .5s}
.aws-org-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}
.aws-org-heading strong{font-size:.88rem}
.aws-org-heading span{color:var(--jb-muted);font-size:.72rem}
.aws-env-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.aws-env{position:relative;border:1px solid rgba(137,147,158,.55);background:rgba(137,147,158,.075);border-radius:9px;padding:18px 7px;text-align:center;min-height:95px;display:flex;flex-direction:column;justify-content:center;transition:opacity .55s,transform .55s,border-color .55s}
.aws-env-staging{border-style:dashed}
.aws-staging-indicator{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:#82d0b9;opacity:0;transition:opacity .3s}
.aws-ops-route{height:44px;transition:opacity .5s}
.aws-ops-route svg{display:block;width:100%;height:44px}
.aws-ops-route path{stroke:#82d0b9}
.aws-operations{border-color:rgba(130,208,185,.55);background:rgba(130,208,185,.065)}
.aws-operations>span{display:block;color:#82d0b9;font-size:.76rem;margin-top:5px}
.aws-operable[data-stage="0"] .aws-organization,.aws-operable[data-stage="0"] .aws-ops-route,.aws-operable[data-stage="0"] .aws-operations,.aws-operable[data-stage="1"] .aws-ops-route,.aws-operable[data-stage="1"] .aws-operations,.aws-operable[data-stage="2"] .aws-ops-route,.aws-operable[data-stage="2"] .aws-operations{opacity:.17}
.aws-operable[data-stage="0"] .aws-provision-route{opacity:.3}
.aws-operable[data-stage="0"] .aws-env-staging,.aws-operable[data-stage="1"] .aws-env-staging,.aws-operable[data-stage="3"] .aws-env-staging{opacity:.38}
.aws-operable[data-stage="2"] .aws-env-staging{opacity:1;border-color:rgba(130,208,185,.8);animation:aws-staging-pulse 2s ease-in-out 2}
.aws-operable[data-stage="2"] .aws-staging-indicator{opacity:1}
.aws-operable[data-stage="3"] .aws-operations{opacity:1}
.aws-operable[data-stage="0"] .aws-provision-route path,.aws-operable[data-stage="0"] .aws-ops-route path,.aws-operable[data-stage="1"] .aws-ops-route path,.aws-operable[data-stage="2"] .aws-ops-route path{animation:none}
.aws-operable-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:17px}
.aws-operable-actions button{font:inherit;font-size:.82rem;color:var(--jb-text);background:transparent;border:1px solid var(--jb-border);border-radius:9px;padding:8px 12px;cursor:pointer}
.aws-operable-actions button:hover,.aws-operable-actions button:focus-visible{border-color:var(--jb-accent);background:rgba(159,185,200,.09)}
@keyframes aws-provision-flow{to{stroke-dashoffset:-18}}
@keyframes aws-staging-pulse{50%{border-color:#82d0b9;box-shadow:0 0 0 3px rgba(130,208,185,.12)}}
@media(max-width:600px){.aws-operable .aws-operable-body{padding:18px 12px}.aws-organization{padding:12px}.aws-env-grid{gap:5px}.aws-env{padding:14px 4px;min-height:105px}.aws-env strong{font-size:.78rem}.aws-env small{font-size:.66rem}}
@media(prefers-reduced-motion:reduce){.aws-provision-route path,.aws-ops-route path,.aws-operable[data-stage="2"] .aws-env-staging{animation:none}.aws-iac,.aws-operations,.aws-organization,.aws-env,.aws-ops-route,.aws-provision-route{transition:none}}

/* AI platform industrialization: stable foundations, independently evolving products. */
.ai-industrial .ai-industrial-body{max-width:760px;margin:auto;padding:24px 22px 26px}
.ai-industrial-stage{font-size:.82rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--jb-accent);margin-bottom:17px}
.ai-layer{border:1px solid var(--jb-border);border-radius:11px;padding:15px;background:rgba(137,147,158,.06);transition:opacity .5s,border-color .5s,background .5s}
.ai-layer-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.ai-layer-title strong{font-size:.9rem}
.ai-layer-title span{font-size:.72rem;color:var(--jb-muted)}
.ai-layer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ai-product,.ai-base-node,.ai-runtime-node{border:1px solid rgba(137,147,158,.5);background:rgba(137,147,158,.08);border-radius:8px;padding:13px 8px;text-align:center;font-size:.79rem;transition:border-color .5s,background .5s,opacity .5s}
.ai-product strong{display:block;font-size:.84rem}
.ai-product small{display:block;color:var(--jb-muted);font-size:.71rem;margin-top:3px}
.ai-product-a small{opacity:0;transition:opacity .5s}
.ai-industrial[data-stage="3"] .ai-product-a small{opacity:1;color:#82d0b9}
.ai-industrial[data-stage="3"] .ai-product-a{border-color:rgba(130,208,185,.75);background:rgba(130,208,185,.1)}
.ai-runtime{border-color:rgba(91,161,208,.55);background:rgba(91,161,208,.06)}
.ai-runtime-node{border-color:rgba(91,161,208,.45)}
.ai-base{border-color:rgba(91,161,208,.42)}
.ai-layer-link{height:34px;transition:opacity .5s}
.ai-layer-link svg{display:block;width:100%;height:34px}
.ai-layer-link path{fill:none;stroke:#83b6d2;stroke-width:1.7;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;animation:ai-layer-flow 1.5s linear infinite}
.ai-governance{margin-top:15px;border:1px solid rgba(160,147,210,.55);background:rgba(160,147,210,.06);border-radius:10px;padding:13px;transition:opacity .5s}
.ai-governance>strong{display:block;font-size:.84rem;margin-bottom:10px}
.ai-governance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ai-governance-grid span{border:1px solid rgba(160,147,210,.3);border-radius:7px;padding:9px 6px;font-size:.74rem;text-align:center}
.ai-industrial[data-stage="0"] .ai-runtime,.ai-industrial[data-stage="0"] .ai-products,.ai-industrial[data-stage="1"] .ai-products{opacity:.16}
.ai-industrial[data-stage="0"] .ai-layer-link,.ai-industrial[data-stage="1"] .ai-layer-link:first-of-type{opacity:.22}
.ai-industrial[data-stage="0"] .ai-layer-link path{animation:none}
.ai-industrial[data-stage="2"] .ai-products{opacity:1}
.ai-industrial-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:17px}
.ai-industrial-actions button{font:inherit;font-size:.82rem;color:var(--jb-text);background:transparent;border:1px solid var(--jb-border);border-radius:9px;padding:8px 12px;cursor:pointer}
.ai-industrial-actions button:hover,.ai-industrial-actions button:focus-visible{border-color:var(--jb-accent);background:rgba(159,185,200,.09)}
@keyframes ai-layer-flow{to{stroke-dashoffset:-18}}
@media(max-width:600px){.ai-industrial .ai-industrial-body{padding:18px 12px}.ai-layer{padding:12px}.ai-layer-title{display:block}.ai-layer-title span{display:block;margin-top:4px}.ai-layer-grid{gap:6px}.ai-product,.ai-base-node,.ai-runtime-node{padding:11px 5px;font-size:.72rem}.ai-governance-grid{gap:6px}.ai-governance-grid span{font-size:.69rem}}
@media(prefers-reduced-motion:reduce){.ai-layer-link path{animation:none}.ai-layer,.ai-product,.ai-base-node,.ai-runtime-node,.ai-governance,.ai-layer-link{transition:none}}

/* AI lifecycle v2: visible sequential activation, Terraform -> governance -> foundations -> ECS -> products. */
.ai-industrial .ai-industrial-body{display:flex;flex-direction:column}
.ai-industrial .ai-industrial-stage{order:-2;color:#c7d9ef;font-weight:800;min-height:2.4em}
.ai-industrial .ai-governance{order:0;margin:0 0 12px}
.ai-industrial .ai-base{order:1}
.ai-industrial .ai-layer-link:nth-of-type(5){order:2}
.ai-industrial .ai-runtime{order:3}
.ai-industrial .ai-layer-link:nth-of-type(3){order:4}
.ai-industrial .ai-products{order:5}
.ai-industrial .ai-industrial-actions{order:6}
.ai-industrial .ai-governance,.ai-industrial .ai-base,.ai-industrial .ai-runtime,.ai-industrial .ai-products{opacity:.23!important;filter:saturate(.65);transition:opacity .6s,filter .6s,border-color .6s,background .6s,box-shadow .6s}
.ai-industrial[data-stage="0"] .ai-governance,.ai-industrial[data-stage="1"] .ai-governance,.ai-industrial[data-stage="2"] .ai-governance,.ai-industrial[data-stage="3"] .ai-governance,.ai-industrial[data-stage="4"] .ai-governance,.ai-industrial[data-stage="5"] .ai-governance{opacity:1!important;filter:none;border-color:#b79cf0;background:rgba(153,112,230,.15)}
.ai-industrial[data-stage="0"] .ai-governance-grid span{opacity:.32}
.ai-industrial[data-stage="0"] .ai-governance-grid span:last-child{opacity:1;color:#f0e6ff;background:rgba(175,120,255,.25);border-color:#c29dff;box-shadow:0 0 0 2px rgba(175,120,255,.15)}
.ai-industrial[data-stage="1"] .ai-governance-grid span,.ai-industrial[data-stage="2"] .ai-governance-grid span,.ai-industrial[data-stage="3"] .ai-governance-grid span,.ai-industrial[data-stage="4"] .ai-governance-grid span,.ai-industrial[data-stage="5"] .ai-governance-grid span{opacity:1;border-color:rgba(194,157,255,.7);color:#e4d3ff}
.ai-industrial[data-stage="2"] .ai-base,.ai-industrial[data-stage="3"] .ai-base,.ai-industrial[data-stage="4"] .ai-base,.ai-industrial[data-stage="5"] .ai-base{opacity:1!important;filter:none;border-color:#69b6f1;background:rgba(54,139,211,.16)}
.ai-industrial[data-stage="3"] .ai-runtime,.ai-industrial[data-stage="4"] .ai-runtime,.ai-industrial[data-stage="5"] .ai-runtime{opacity:1!important;filter:none;border-color:#66c3e9;background:rgba(50,162,206,.17)}
.ai-industrial[data-stage="4"] .ai-products,.ai-industrial[data-stage="5"] .ai-products{opacity:1!important;filter:none;border-color:#7adfc2;background:rgba(58,181,151,.13)}
.ai-industrial[data-stage="5"] .ai-product-a{border-color:#82e8ca;background:rgba(75,203,161,.23);box-shadow:0 0 0 2px rgba(75,203,161,.12)}
.ai-industrial[data-stage="5"] .ai-product-a small{opacity:1;color:#a5f4db}
.ai-industrial .ai-layer-link{opacity:.2;transition:opacity .5s}
.ai-industrial[data-stage="3"] .ai-layer-link,.ai-industrial[data-stage="4"] .ai-layer-link,.ai-industrial[data-stage="5"] .ai-layer-link{opacity:1}
.ai-industrial .ai-layer-link path{stroke:#66c3e9;stroke-width:2}
@media(prefers-reduced-motion:reduce){.ai-industrial .ai-governance,.ai-industrial .ai-base,.ai-industrial .ai-runtime,.ai-industrial .ai-products,.ai-industrial .ai-layer-link{transition:none}}

/* Hotel Technology: detailed, responsive, semantic HTML topology. */
.ht-topology{--ht-blue:#58b9ff;--ht-cyan:#58d8ee;--ht-purple:#c38bff;--ht-green:#65e5b6;--ht-amber:#ffca74}
.ht-body{padding:22px 18px 25px;background:radial-gradient(ellipse at 50% 43%,rgba(22,58,77,.22),transparent 75%)}
.ht-stage{margin:0 0 16px;color:#c9eaff;font-size:.84rem;font-weight:750;letter-spacing:.04em;min-height:1.5em}
.ht-origins{display:grid;grid-template-columns:1.15fr 1fr .9fr;gap:12px}
.ht-node,.ht-origin{position:relative;min-width:0;padding:13px;border:1px solid currentColor;border-radius:12px;background:rgba(23,42,57,.6);color:var(--ht-blue);transition:opacity .5s,background .5s,box-shadow .5s,filter .5s}
.ht-node h4,.ht-origin h4{margin:0 0 11px;color:currentColor;font-size:.77rem;font-weight:800;line-height:1.35;letter-spacing:.035em}
.ht-symbol{display:inline-block;font-size:1.25rem;vertical-align:middle;margin-right:8px}
.ht-node p,.ht-origin p{font-size:.73rem;margin:9px 0 0;color:#bbd2df}
.ht-chips{display:flex;gap:6px;flex-wrap:wrap}
.ht-chips span{min-width:0;flex:1 1 auto;padding:8px 9px;border-radius:6px;border:1px solid color-mix(in srgb,currentColor 42%,transparent);background:color-mix(in srgb,currentColor 9%,transparent);font-size:.73rem;line-height:1.3;text-align:center;color:#e0edf7}
.ht-hotel{color:var(--ht-blue);background:rgba(41,114,180,.12)}
.ht-sites{color:var(--ht-cyan);background:rgba(41,148,169,.1)}
.ht-cloud{color:var(--ht-amber);background:rgba(194,125,34,.1)}
.ht-network{color:var(--ht-blue);background:rgba(46,114,190,.14)}
.ht-network .ht-chips span{flex:1 1 120px}
.ht-domains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ht-domains .ht-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ht-domains .ht-chips span{padding:10px 5px}
.ht-identity{color:var(--ht-purple);background:rgba(145,69,190,.12)}
.ht-voice{color:var(--ht-green);background:rgba(35,152,119,.1)}
.ht-enterprise{color:var(--ht-amber);background:rgba(184,127,40,.12)}
.ht-compute{color:var(--ht-blue);background:rgba(43,115,172,.13)}
.ht-core{color:var(--ht-green);background:rgba(33,145,116,.17)}
.ht-core .ht-chips span{flex:1 1 135px}
.ht-services,.ht-outcomes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ht-media{color:var(--ht-cyan);background:rgba(31,151,180,.12)}
.ht-smart{color:var(--ht-amber);background:rgba(181,120,37,.12)}
.ht-staff{color:var(--ht-purple);background:rgba(128,62,175,.11)}
.ht-guest{color:var(--ht-cyan);background:rgba(34,151,160,.12)}
.ht-wire{height:27px;position:relative;opacity:.25;transition:opacity .5s}
.ht-wire:before{content:"";position:absolute;left:50%;top:0;height:100%;border-left:2px dashed var(--ht-cyan);animation:ht-flow 1.6s linear infinite}
.ht-wire:after{content:"";position:absolute;bottom:0;left:calc(50% - 4px);border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--ht-cyan)}
.ht-wire-origins:before{border-color:var(--ht-blue)}.ht-wire-origins:after{border-top-color:var(--ht-blue)}
.ht-wire-core:before,.ht-wire-service:before,.ht-wire-outcome:before{border-color:var(--ht-green)}.ht-wire-core:after,.ht-wire-service:after,.ht-wire-outcome:after{border-top-color:var(--ht-green)}
.ht-legend{margin-top:17px;border-top:1px solid rgba(159,185,200,.25);padding-top:14px;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;color:#a9c0cf;font-size:.72rem}
.ht-legend strong{font-size:.72rem;color:#d7e8f2;letter-spacing:.05em}
.ht-legend span{display:inline-flex;align-items:center;gap:6px}.ht-key{width:22px;border-top:3px dotted var(--ht-blue)}.ht-key-1{border-color:var(--ht-green)}.ht-key-2{border-color:var(--ht-amber)}.ht-key-3{border-color:#d5dbe4}
.ht-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:17px}
.ht-actions button{font:inherit;font-size:.8rem;color:#e2f0f8;background:rgba(39,61,76,.5);border:1px solid rgba(159,185,200,.4);border-radius:8px;padding:8px 12px;cursor:pointer}
.ht-actions button:hover,.ht-actions button:focus-visible{border-color:var(--ht-cyan)}
.ht-topology[data-stage="0"] .ht-domains,.ht-topology[data-stage="0"] .ht-core,.ht-topology[data-stage="0"] .ht-services,.ht-topology[data-stage="0"] .ht-outcomes,
.ht-topology[data-stage="1"] .ht-core,.ht-topology[data-stage="1"] .ht-services,.ht-topology[data-stage="1"] .ht-outcomes,
.ht-topology[data-stage="2"] .ht-services,.ht-topology[data-stage="2"] .ht-outcomes,
.ht-topology[data-stage="3"] .ht-outcomes{opacity:.18;filter:saturate(.4)}
.ht-topology .ht-domains,.ht-topology .ht-services,.ht-topology .ht-outcomes{transition:opacity .5s,filter .5s}
.ht-topology[data-stage="0"] .ht-wire-domain,.ht-topology[data-stage="0"] .ht-wire-core,.ht-topology[data-stage="0"] .ht-wire-service,.ht-topology[data-stage="0"] .ht-wire-outcome,
.ht-topology[data-stage="1"] .ht-wire-core,.ht-topology[data-stage="1"] .ht-wire-service,.ht-topology[data-stage="1"] .ht-wire-outcome,
.ht-topology[data-stage="2"] .ht-wire-service,.ht-topology[data-stage="2"] .ht-wire-outcome,
.ht-topology[data-stage="3"] .ht-wire-outcome{opacity:.15}
.ht-topology[data-stage="0"] .ht-wire-origins,.ht-topology[data-stage="1"] .ht-wire-origins,.ht-topology[data-stage="2"] .ht-wire-origins,.ht-topology[data-stage="3"] .ht-wire-origins,.ht-topology[data-stage="4"] .ht-wire-origins,
.ht-topology[data-stage="1"] .ht-wire-domain,.ht-topology[data-stage="2"] .ht-wire-domain,.ht-topology[data-stage="3"] .ht-wire-domain,.ht-topology[data-stage="4"] .ht-wire-domain,
.ht-topology[data-stage="2"] .ht-wire-core,.ht-topology[data-stage="3"] .ht-wire-core,.ht-topology[data-stage="4"] .ht-wire-core,
.ht-topology[data-stage="3"] .ht-wire-service,.ht-topology[data-stage="4"] .ht-wire-service,
.ht-topology[data-stage="4"] .ht-wire-outcome{opacity:1}
@keyframes ht-flow{to{border-left-style:dotted}}
@media(max-width:950px){.ht-domains{grid-template-columns:repeat(2,minmax(0,1fr))}.ht-origins{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.ht-body{padding:15px 10px}.ht-origins{grid-template-columns:1fr 1fr}.ht-cloud{grid-column:1/-1}.ht-domains{grid-template-columns:1fr 1fr;gap:7px}.ht-services,.ht-outcomes{grid-template-columns:1fr;gap:9px}.ht-node,.ht-origin{padding:10px}.ht-node h4,.ht-origin h4{font-size:.69rem}.ht-chips span{font-size:.66rem;padding:7px 5px}.ht-domains .ht-chips{grid-template-columns:1fr}.ht-legend{gap:8px}}
@media(prefers-reduced-motion:reduce){.ht-wire:before{animation:none}.ht-node,.ht-origin,.ht-domains,.ht-services,.ht-outcomes,.ht-wire{transition:none}}

/* Hotel Technology: architecture-to-operations interactive guest journey. */
.ht-experience [hidden]{display:none!important}
.ht-view-switch{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;padding:5px;border:1px solid rgba(159,185,200,.3);border-radius:11px;background:rgba(20,37,53,.8)}
.ht-view-switch button{flex:1 1 170px;border:1px solid transparent;border-radius:8px;padding:12px 16px;background:transparent;color:#afc3d4;font:700 .84rem/1.4 inherit;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ht-view-switch button[aria-selected="true"]{background:rgba(77,164,194,.19);border-color:#60c6df;color:#e3f9ff}
.ht-view-switch button:focus-visible,.hj-progress-step:focus-visible,.hj-controls button:focus-visible{outline:2px solid #90e7f4;outline-offset:3px}
.ht-journey{--hj-blue:#67c8fa;--hj-teal:#6de2c2;--hj-violet:#c49df2}
.hj-body{padding:25px 20px 24px;background:radial-gradient(ellipse at 52% 40%,rgba(39,95,117,.19),transparent 76%)}
.hj-intro{max-width:720px;margin:0 0 21px;font-size:.96rem;color:#c7dbe7;line-height:1.6}
.hj-progress{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-bottom:25px}
.hj-progress-step{position:relative;min-width:0;min-height:95px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;padding:12px 5px 10px;border:1px solid rgba(124,159,183,.4);border-radius:9px;background:rgba(24,46,62,.65);color:#91a8bb;font:inherit;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.hj-progress-step span{display:grid;place-items:center;width:29px;height:29px;border:1px solid currentColor;border-radius:50%;font-size:.76rem;font-weight:800}
.hj-progress-step small{font-size:.68rem;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.hj-progress-step.is-complete{color:#9cead6;border-color:rgba(100,218,182,.65);background:rgba(45,125,101,.15)}
.hj-progress-step.is-current{color:#e4faff;border-color:#69d3ed;background:rgba(55,145,182,.22);box-shadow:0 0 0 2px rgba(105,211,237,.08)}
.hj-progress-step.is-current span{background:rgba(98,209,231,.19)}
.hj-kicker{margin:0 0 10px;color:#8cd6e9;font-size:.73rem;font-weight:800;letter-spacing:.12em}
.hj-step{border:1px solid rgba(107,182,210,.52);border-radius:13px;padding:24px;background:linear-gradient(140deg,rgba(30,71,92,.38),rgba(19,39,56,.72))}
.hj-step-head{display:flex;align-items:center;gap:15px}
.hj-count{font-size:2rem;line-height:1;font-weight:850;color:#8de0f0;letter-spacing:-.04em}
.hj-step h4{font-size:clamp(1.15rem,2.5vw,1.6rem);margin:0;color:#e6f7ff}
.hj-step>p{color:#c8dbe6;line-height:1.7;margin:16px 0 22px;max-width:780px}
.hj-systems{border-top:1px solid rgba(159,185,200,.2);padding-top:16px}
.hj-systems>strong,.hj-result strong{display:block;font-size:.73rem;letter-spacing:.07em;color:#9bc3d7}
.hj-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.hj-chips span{display:inline-block;padding:9px 12px;border-radius:7px;border:1px solid rgba(140,182,237,.5);background:rgba(78,119,184,.13);color:#dcecff;font-size:.79rem}
.hj-result{display:flex;align-items:center;gap:13px;margin-top:20px;padding:14px 15px;border-radius:9px;border:1px solid rgba(99,224,180,.46);background:rgba(48,137,107,.13)}
.hj-result>span{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:rgba(99,224,180,.16);color:#a0f4d6;font-weight:800}
.hj-result strong{color:#8be7c2}.hj-result p{margin:3px 0 0;color:#d2eee1;font-size:.89rem}
.hj-controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:18px}
.hj-controls button{border:1px solid rgba(130,184,207,.5);border-radius:8px;background:rgba(35,71,90,.55);color:#e4f5fd;padding:10px 14px;font:700 .81rem/1.4 inherit;cursor:pointer}
.hj-controls button:hover:not(:disabled){border-color:#85dce9;background:rgba(61,122,143,.3)}
.hj-controls button:disabled{opacity:.3;cursor:default}
.hj-controls .hj-next{border-color:#65c6db;background:rgba(57,144,170,.23)}
@media(max-width:720px){.hj-progress{grid-template-columns:repeat(3,minmax(0,1fr))}.hj-progress-step{min-height:76px}.hj-body{padding:16px 12px}.hj-step{padding:18px 14px}}
@media(max-width:440px){.hj-progress-step small{font-size:.62rem}.hj-step-head{gap:9px}.hj-count{font-size:1.6rem}.hj-controls button{flex:1 1 auto}.hj-chips span{font-size:.72rem;padding:8px 9px}}
@media(prefers-reduced-motion:reduce){.ht-view-switch button,.hj-progress-step{transition:none}}

/* Guest journey hybrid: compact system topology above synchronized operational stages. */
.hj-system-map{margin:0 0 23px;padding:18px;border:1px solid rgba(100,178,208,.38);border-radius:13px;background:radial-gradient(ellipse at center,rgba(32,91,111,.23),rgba(15,32,48,.7));}
.hj-map-title{margin:0 0 16px;text-align:center;color:#b3d2e2;font-size:.72rem;font-weight:800;letter-spacing:.08em}
.hj-map-row{display:flex;align-items:center;justify-content:center;gap:12px}
.hj-map-node{min-width:0;padding:12px 10px;border:1px solid rgba(114,153,179,.34);border-radius:9px;background:rgba(34,57,76,.4);color:#819aad;font-size:.78rem;font-weight:750;letter-spacing:.025em;text-align:center;transition:opacity .45s,border-color .45s,background .45s,color .45s,box-shadow .45s;opacity:.44}
.hj-map-row .hj-map-node{flex:1 1 0;max-width:260px}
.hj-map-arrow,.hj-map-down{color:#6ba2bb;font-size:1.3rem;text-align:center;opacity:.6}
.hj-map-down{height:28px;line-height:28px}
.hj-map-hub{max-width:560px;margin:auto}
.hj-map-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.hj-map-guest{max-width:420px;margin:auto}
.hj-map-node.is-active{opacity:1;color:#e8faff;border-color:#6bd6ed;background:rgba(40,138,175,.23);box-shadow:0 0 0 2px rgba(89,205,237,.1)}
.hj-map-node[data-system="hub"].is-active{border-color:#ba98f2;background:rgba(135,91,196,.2)}
.hj-map-node[data-system="room"].is-active,.hj-map-node[data-system="access"].is-active{border-color:#f0c47e;background:rgba(187,126,45,.17)}
.hj-map-node[data-system="wifi"].is-active,.hj-map-node[data-system="guest"].is-active{border-color:#79e6bf;background:rgba(45,158,121,.19)}
.hj-map-node.is-complete{opacity:.8;color:#bed6df;border-color:rgba(108,195,180,.52);background:rgba(44,107,99,.13)}
.hj-autoplay{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0 0 8px;color:#b9d4e1;font-size:.77rem}
.hj-autoplay-toggle{border:1px solid rgba(112,195,211,.58);border-radius:7px;padding:7px 12px;background:rgba(38,99,119,.25);color:#d8f5ff;font:700 .77rem/1.4 inherit;cursor:pointer}
.hj-autoplay-toggle:focus-visible{outline:2px solid #90e7f4;outline-offset:3px}
@media(max-width:650px){.hj-system-map{padding:12px}.hj-map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hj-map-node{font-size:.68rem;padding:10px 6px}.hj-map-row{gap:6px}.hj-map-title{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){.hj-map-node{transition:none}}

/* Guest journey includes VoIP as an additional operational service. */
.hj-map-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.hj-map-node[data-system="voip"].is-active{border-color:#b7a1f5;background:rgba(115,83,176,.2)}
@media(max-width:760px){.hj-map-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.hj-map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Prevent long storage-array labels from clipping inside compute domain chips. */
.ht-compute .ht-chips span{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal;white-space:normal;line-height:1.45;padding-inline:8px}
@media(min-width:601px){.ht-compute .ht-chips{grid-template-columns:minmax(0,1fr)}.ht-compute .ht-chips span{padding-block:9px}}

/* Hotel conceptual topology: shared bus, not a misleading single-site spine.
   Branches align with grid cell centers (3 origins and 4 technology domains). */
.ht-topology .ht-wire-origins,.ht-topology .ht-wire-domain{height:46px}
.ht-topology .ht-wire-origins:before,.ht-topology .ht-wire-domain:before{content:"";position:absolute;left:50%;top:0;height:100%;border-left:2px solid var(--ht-blue);animation:none}
.ht-topology .ht-wire-origins:after,.ht-topology .ht-wire-domain:after{content:"";position:absolute;left:16.6667%;right:16.6667%;top:23px;bottom:auto;width:auto;height:0;border:0;border-top:2px solid var(--ht-blue)}
.ht-topology .ht-wire-origins{background:linear-gradient(var(--ht-blue),var(--ht-blue)) 16.6667% 0/2px 23px no-repeat,linear-gradient(var(--ht-blue),var(--ht-blue)) 83.3333% 0/2px 23px no-repeat}
.ht-topology .ht-wire-origins:before{top:23px;height:23px}
.ht-topology .ht-wire-domain{background:linear-gradient(var(--ht-cyan),var(--ht-cyan)) 12.5% 23px/2px 23px no-repeat,linear-gradient(var(--ht-cyan),var(--ht-cyan)) 37.5% 23px/2px 23px no-repeat,linear-gradient(var(--ht-cyan),var(--ht-cyan)) 62.5% 23px/2px 23px no-repeat,linear-gradient(var(--ht-cyan),var(--ht-cyan)) 87.5% 23px/2px 23px no-repeat}
.ht-topology .ht-wire-domain:before{height:23px;border-color:var(--ht-cyan)}
.ht-topology .ht-wire-domain:after{left:12.5%;right:12.5%;border-color:var(--ht-cyan)}
@media(max-width:950px){
 .ht-topology .ht-wire-domain{height:55px;background:linear-gradient(var(--ht-cyan),var(--ht-cyan)) 25% 23px/2px 32px no-repeat,linear-gradient(var(--ht-cyan),var(--ht-cyan)) 75% 23px/2px 32px no-repeat}
 .ht-topology .ht-wire-domain:after{left:25%;right:25%}
}
@media(max-width:600px){
 .ht-topology .ht-wire-origins{height:55px;background:linear-gradient(var(--ht-blue),var(--ht-blue)) 25% 0/2px 23px no-repeat,linear-gradient(var(--ht-blue),var(--ht-blue)) 75% 0/2px 23px no-repeat,linear-gradient(var(--ht-blue),var(--ht-blue)) 50% 23px/2px 9px no-repeat}
 .ht-topology .ht-wire-origins:after{left:25%;right:25%;top:23px}
 .ht-topology .ht-wire-origins:before{top:32px;height:23px}
}

/* Three independent, color-coded routes from hotel, remote sites and cloud.
   Motion conveys conceptual data flow, not a literal physical cabling diagram. */
.ht-origin-flows{height:68px;position:relative;opacity:1;transition:opacity .45s}
.ht-origin-flows svg{display:block;width:100%;height:100%;overflow:visible}
.ht-origin-flows .ht-flow-mobile{display:none}
.ht-flow-path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12 9;animation:ht-route 1.35s linear infinite}
.ht-flow-hotel{stroke:var(--ht-blue)}
.ht-flow-sites{stroke:var(--ht-cyan);animation-duration:1.6s}
.ht-flow-cloud{stroke:var(--ht-amber);animation-duration:1.9s}
@keyframes ht-route{to{stroke-dashoffset:-42}}
.ht-topology[data-stage="0"] .ht-origin-flows,.ht-topology[data-stage="1"] .ht-origin-flows,.ht-topology[data-stage="2"] .ht-origin-flows,.ht-topology[data-stage="3"] .ht-origin-flows,.ht-topology[data-stage="4"] .ht-origin-flows{opacity:1}
@media(max-width:600px){.ht-origin-flows{height:54px}.ht-origin-flows svg:not(.ht-flow-mobile){display:none}.ht-origin-flows .ht-flow-mobile{display:block}}
@media(prefers-reduced-motion:reduce){.ht-flow-path{animation:none;stroke-dasharray:none}}