/* Beside the enterprise hero: "Inside your cloud account", a system diagram with a role lens and a hash-chained
   change history (enterprise-hero.js; Sam, October 25). Revised the same day: each agent shows the model it runs on,
   and the role cards glow until the visitor picks one. */
.hero.has-art-eh > .container { max-width: var(--container) !important; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(40px, 4vw, 72px); align-items: center; }
.hero.has-art-eh > .container > * { grid-column: 1; }
.hero.has-art-eh > .container > .eh-stage { grid-column: 2; grid-row: 1 / span 5; }
.hero.has-art-eh h1 { font-size: clamp(34px, 3.3vw, 50px); }
/* Below about 1400 pixels wide the diagram needs a little more of the row to keep every label whole. */
@media (max-width: 1400px) { .hero.has-art-eh > .container { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); column-gap: 40px; } }
@media (max-width: 900px) { .hero.has-art-eh > .container { display: block; max-width: 900px !important; } .eh-stage { display: none; } }

.eh-stage { padding-block: 8px; font-variant-numeric: tabular-nums; }
.eh-frame { position: relative; padding: 25px clamp(14px, 1.4vw, 20px) 23px; border-radius: 22px; border: 1.5px dashed rgba(132, 181, 210, 0.42);
  background: radial-gradient(rgba(241, 238, 231, 0.055) 1px, transparent 1.4px) 0 0 / 20px 20px, linear-gradient(180deg, rgba(88, 150, 189, 0.05), rgba(88, 150, 189, 0) 60%), var(--panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42); }
.eh-legend, .eh-own { position: absolute; display: flex; align-items: center; gap: 7px; margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--ground); font-size: 13.5px; white-space: nowrap; }
.eh-legend { top: -15px; left: 18px; border: 1px solid var(--accent); }
.eh-legend svg { width: 16px; height: 16px; color: var(--turquoise); }
.eh-legend b { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--turquoise); }
.eh-cloud { color: var(--ink); font-weight: 500; transition: opacity 0.3s ease, transform 0.3s ease; display: inline-block; }
.eh-cloud.swap { opacity: 0; transform: translateY(-4px); }
.eh-own { bottom: -15px; right: 18px; border: 1px solid var(--line-strong); color: var(--muted); }
.eh-own svg { width: 14px; height: 14px; color: var(--turquoise); }

.eh-body { position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) clamp(104px, 8.6vw, 124px) minmax(0, 1.2fr); column-gap: clamp(16px, 1.8vw, 30px); align-items: center; }
.eh-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.eh-w { fill: none; stroke: var(--line-strong); stroke-width: 1.5; transition: stroke 0.4s ease, opacity 0.4s ease; }
.eh-w.on { stroke: var(--turquoise); stroke-width: 2; stroke-dasharray: 7 6; animation: eh-flow 0.9s linear infinite; }
.eh-w.read { stroke: rgba(132, 181, 210, 0.5); stroke-dasharray: 2 5; }
.eh-w.off { stroke: var(--line); opacity: 0.55; }
.eh-still .eh-w.on { animation-play-state: paused; }
@keyframes eh-flow { to { stroke-dashoffset: -13; } }
.eh-col, .eh-hub { position: relative; z-index: 1; }
.eh-h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }

.eh-tile { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; column-gap: 10px; margin-bottom: 5px; padding: 5px 9px 5px 6px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--raised); transition: opacity 0.4s ease, border-color 0.4s ease; }
.eh-logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line-strong); }
.eh-logo svg { width: 16px; height: 16px; fill: currentColor; color: var(--ink); }
.eh-logo img { width: 18px; height: 18px; border-radius: 3px; object-fit: contain; }
.eh-logo svg, .eh-logo img { transition: filter 0.4s ease, opacity 0.4s ease; }
.eh-tile.a0 .eh-logo svg, .eh-tile.a0 .eh-logo img { filter: grayscale(1); opacity: 0.6; }
.eh-logo b { font-size: 13px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.eh-tt { min-width: 0; }
.eh-tt b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-tt em { display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 13px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.eh-tt em svg { width: 12px; height: 12px; flex: none; }
.eh-tile.a2 { border-color: rgba(132, 181, 210, 0.55); }
.eh-tile.a2 em { color: var(--turquoise); font-weight: 600; }
.eh-tile.a0 { opacity: 0.5; border-style: dashed; }
.eh-tile.a0 em { color: var(--faint); }

.eh-hub { display: flex; flex-direction: column; align-items: center; text-align: center; }
.eh-core { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 8px; border-radius: 22px; border: 1px solid var(--turquoise); background: var(--raised); box-shadow: 0 0 0 6px rgba(132, 181, 210, 0.07), 0 0 44px rgba(132, 181, 210, 0.22); animation: eh-pulse 3.2s ease-in-out infinite; }
.eh-core img { width: 36px; height: auto; }
.eh-hub b { font-size: 15.5px; color: var(--ink); }
.eh-hub span:not(.eh-core) { font-size: 13px; line-height: 1.35; color: var(--faint); }
.eh-hub > b, .eh-hub > span:not(.eh-core), .eh-model > span:not(.eh-mlogo) { padding: 0 4px; border-radius: 5px; background: var(--panel); } /* keeps wires from running through the words */
.eh-still .eh-core { animation-play-state: paused; }
.eh-model { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-strong); width: 100%; transition: opacity 0.22s ease, transform 0.22s ease; }
.eh-model.swap { opacity: 0; transform: translateY(4px); }
.eh-mlogo { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 13px; background: var(--raised); border: 1px solid var(--line-strong); }
.eh-mlogo img { width: 28px; height: 28px; border-radius: 6px; }
.eh-hub .eh-mrun { font-size: 13px; line-height: 1.3; color: var(--muted); }
.eh-mrun b { font-size: 15px; color: var(--ink); white-space: nowrap; }
.eh-hub .eh-mkind { font-size: 13px; line-height: 1.3; color: var(--muted); }
.eh-hub .eh-model.open .eh-mkind { color: var(--turquoise); font-weight: 600; }
@keyframes eh-pulse { 50% { box-shadow: 0 0 0 10px rgba(132, 181, 210, 0.04), 0 0 60px rgba(132, 181, 210, 0.3); } }

.eh-role { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 7px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--raised); font: inherit; text-align: left; color: var(--muted); cursor: pointer; transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; }
.eh-role:last-child { margin-bottom: 0; }
.eh-rlogo { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line-strong); }
.eh-rlogo img { width: 18px; height: 18px; border-radius: 4px; }
.eh-rt { min-width: 0; }
.eh-role b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-role em { display: block; font-style: normal; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--muted); }
.eh-role small { display: block; font-size: 13px; line-height: 1.3; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-role:hover b { color: var(--ink); }
.eh-role.on { border-color: var(--turquoise); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--raised); }
.eh-role.on b { color: var(--ink); }
.eh-role.on em { color: var(--turquoise); }
.eh-role.on small { color: var(--muted); }
/* Invitation to click: a soft pulsing turquoise outline until the first pick, then only a gentle glow on hover. */
.eh-stage:not(.eh-manual) .eh-role { animation: eh-invite 2.6s ease-in-out infinite; }
.eh-stage:not(.eh-manual) .eh-role:nth-child(2) { animation-delay: 0.2s; }
.eh-stage:not(.eh-manual) .eh-role:nth-child(3) { animation-delay: 0.4s; }
.eh-stage:not(.eh-manual) .eh-role:nth-child(4) { animation-delay: 0.6s; }
.eh-still .eh-role { animation-play-state: paused !important; }
@keyframes eh-invite { 0%, 100% { box-shadow: 0 0 0 1px rgba(132, 181, 210, 0.22), 0 0 0 rgba(132, 181, 210, 0); } 50% { box-shadow: 0 0 0 1.5px rgba(132, 181, 210, 0.7), 0 0 18px rgba(132, 181, 210, 0.32); } }
.eh-role:hover { box-shadow: 0 0 0 1px rgba(132, 181, 210, 0.6), 0 0 16px rgba(132, 181, 210, 0.24); }
.eh-hint { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(132, 181, 210, 0.5); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--turquoise); transition: opacity 0.4s ease; }
.eh-hint svg { width: 13px; height: 13px; }
.eh-manual .eh-hint { opacity: 0; }
.eh-role:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.eh-rule { margin: 10px 0 8px; min-height: 1.5em; text-align: center; font-size: 15px; color: var(--ink); }

.eh-chain { overflow: hidden; padding-top: 10px; border-top: 1px solid var(--line); }
.eh-ch { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--turquoise); }
.eh-ch svg { width: 15px; height: 15px; }
.eh-ch span { display: flex; align-items: center; gap: 5px; margin-left: auto; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.eh-blocks { display: flex; gap: 10px; margin-top: 8px; }
.eh-block { position: relative; flex: 0 0 calc((100% - 20px) / 3); min-width: 0; padding: 8px 11px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--raised); animation: eh-new 1.6s ease both; }
.eh-block.still { animation: none; }
.eh-block + .eh-block::before { content: ""; position: absolute; left: -11px; top: 50%; width: 10px; height: 2px; background: var(--turquoise); }
.eh-block p { display: flex; justify-content: space-between; gap: 6px; margin: 0 0 3px; font-size: 13px; }
.eh-block p b { color: var(--ink); }
.eh-block time, .eh-block em { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; color: var(--faint); }
.eh-block span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.eh-block em { display: block; margin-top: 3px; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes eh-new { 0% { opacity: 0; transform: translateY(8px); border-color: var(--turquoise); } 25% { opacity: 1; transform: none; border-color: var(--turquoise); box-shadow: 0 0 24px rgba(132, 181, 210, 0.25); } 100% { border-color: var(--line-strong); } }
@media (prefers-reduced-motion: reduce) { .eh-stage *, .eh-stage *::before { animation: none !important; transition: none !important; }
  .eh-stage:not(.eh-manual) .eh-role { box-shadow: 0 0 0 1.5px rgba(132, 181, 210, 0.6); } }