/* Quiet geographic and graph surfaces: the Orbital vocabulary at chapter scale. */
.signal-motion-path { fill: none; stroke: #7634b2; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; opacity:.86; transition:stroke 320ms ease, opacity 320ms ease; }
[data-signal-engaged="true"] .signal-motion-path {opacity:1;}
.signal-motion-trail { stroke:#9c69c2; stroke-width:3; opacity:var(--connection-ambient-opacity, .44); }
[data-signal-engaged="true"] .signal-motion-trail {opacity:var(--connection-engaged-opacity, .66);}
[data-illustration-motion][hidden] {display:none;}
[data-illustration-motion] {align-items:center;gap:8px;cursor:pointer;}
[data-illustration-motion] svg {flex:none;}
[data-illustration-motion] .motion-play-glyph {display:none;}
[data-illustration-motion][data-paused="true"] .motion-pause-glyph {display:none;}
[data-illustration-motion][data-paused="true"] .motion-play-glyph {display:block;}
.illustration-motion-toggle {display:inline-flex;align-self:flex-start;min-height:44px;padding:6px 0;border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;line-height:1.4;text-align:left;}
.illustration-motion-toggle:is(:hover,:focus-visible) {color:var(--purple);}
.illustration-motion-toggle:focus-visible {outline:2px solid var(--purple);outline-offset:4px;border-radius:2px;}
.motion-shortcut {display:inline-flex;font:inherit;color:var(--ink);}
[data-illustration-motion]:disabled {cursor:default;color:var(--muted);}
.alert-arrival-mark { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #d9c9e9; background: #fff; border-radius: 9px; color: #7840b0; flex: none; }
.alert-arrival-mark .icon { width: 18px; height: 18px; }
.relationship-figure {
  background: #f4f4f1; color: #202024; border: 1px solid #deddda;
  border-radius: 14px; box-shadow: 0 16px 42px -28px #25202e35;
}
.relationship-network { isolation: isolate; }
.relationship-network::before {
  content: ""; position: absolute; inset: -25px -20px; z-index: -1;
  background: url('/assets/launch/atlas-field.svg') center / cover no-repeat;
  opacity: .1; pointer-events: none;
}
.relationship-lines { stroke: #9868c1; stroke-width: 1.75; }
.relationship-lines path { vector-effect: non-scaling-stroke; }
.relationship-node strong { background: #f4f4f1; font-family: 'IBM Plex Sans', sans-serif; font-size: 22px; font-weight: 500; }
.relationship-node { transform: translate(-50%, -8px); }
.relationship-node > span:last-child { background: #f4f4f1; color: #68626f; font-size: 16px; }
.relationship-point { width: 16px; height: 16px; margin-bottom: 8px; border: 4px solid #fff; outline: 1px solid #a176c9; background: #7537b2; box-shadow: 0 0 0 6px #e8dfef; }
.relationship-origin .relationship-point { background: #252329; outline-color: #55505d; box-shadow: 0 0 0 6px #e5e3e7; }
.relationship-business strong { color: #642da0; }
.relationship-figure figcaption { border-color: #deddda; background: #fff; }
.relationship-figure figcaption p { color: #68626f; }

.product-preview.opportunity-demo { background: #f3f3f0; }
.opportunity-landscape { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
.opportunity-geography { position: relative; isolation: isolate; min-width: 0; height: 420px; margin: 24px 0 24px 24px; }
.opportunity-map { position: absolute; width: 100%; height: 100%; overflow: visible; }
.opportunity-map image { opacity: .65; }
.geographic-grid { stroke: #dad8df; stroke-width: .3; fill: none; opacity: .55; }
.geographic-link { stroke: #8646b8; stroke-width: 1.6; fill: none; vector-effect: non-scaling-stroke; }
.geographic-halo { fill: #fff; stroke: #c7b4db; stroke-width: .35; }
.geographic-point { fill: #7636af; }
.geographic-label { position: absolute; background: #f3f3f0; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.geographic-label strong { font-size: 18px; font-weight: 500; line-height: 1.25; }
.geographic-label span { font-size: 16px; color: #665d70; }
.geographic-developer { top: 40%; left: 6%; }
.geographic-projects { top: 73%; left: 53%; max-width: 45%; }
.product-preview .opportunity-landscape .opportunity-copy {
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  margin: 24px; padding: 34px; background: #fff;
}
.product-preview .opportunity-landscape .opportunity-copy h3 { font-size: 30px; max-width: 420px; }
.product-preview .opportunity-landscape .opportunity-copy p { margin-top: 18px; }
.opportunity-landscape .opportunity-decision { border-top: 1px solid #e0dce5; padding-top: 20px; }

.context-signal { height: 68px; position: relative; margin: 0 0 26px; max-width: 420px; }
.context-signal svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 1.5; }
.context-signal-track { stroke: #c5bece; stroke-dasharray: 3 5; }
.context-signal-connection { stroke: #8a4cbe; opacity: 0; transition: opacity 240ms; }
.context-added .context-signal-connection { opacity: 1; }
.context-signal-node { position: absolute; top: 4px; width: 20%; transform: translateX(-50%); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; }
.context-signal-node i { width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; outline: 1px solid #bdb1c9; background: #d8d0e1; transition: background-color 240ms, box-shadow 240ms; }
.context-signal-node span { font-size: 16px; line-height: 1.3; color: #6c6277; white-space: nowrap; }
.context-signal-event { left: 10%; }
.context-signal-event span { justify-self: start; }
.context-signal-event i { background: #28232e; outline-color: #b6acbe; }
.context-signal .target-one { left: 50%; }.context-signal .target-two { left: 90%; }
.context-signal .target-two span { justify-self: end; }
.context-added .context-signal-target i { background: #7537b2; box-shadow: 0 0 0 5px #eee7f7; }

.solution-case-visual { background: #fbfbfa; }
.solution-node:not(.solution-node-origin) { background: #fff; border-color: #dad6df; }
.solution-node { border-radius: 12px; box-shadow: 0 1px 2px #23202709, 0 8px 18px -10px #322b4230; }
.solution-lines { stroke: #ab83c9; }
.resource-connections { position: absolute; inset: 0; width: 100%; height: 100%; fill: #b99bdd; stroke: #aa80d0; stroke-width: 1.5; }
.resource-connections * { vector-effect: non-scaling-stroke; }
.resource-connections path { fill: none; }
.opportunity-art .resource-connections { fill: #7940b1; stroke: #8b57b5; }

@media (max-width: 1000px) {
  .opportunity-landscape { grid-template-columns: 1fr; }
  .opportunity-geography { height: 350px; margin: 20px auto 0; width: min(680px, calc(100% - 40px)); }
  .product-preview .opportunity-landscape .opportunity-copy { margin: 20px; }
}
@media (max-width: 650px) {
  .relationship-node strong { font-size: 18px; }
  .relationship-node > span:last-child { font-size: 16px; }
  .relationship-network::before { inset: -15px 0; background-size: auto 80%; opacity: .07; }
  .relationship-figure figcaption { padding: 28px 24px; }
  .opportunity-geography { height: clamp(220px, 66vw, 280px); width: calc(100% - 24px); margin-top: 12px; }
  .geographic-label { padding: 7px 8px; }
  .geographic-label strong { font-size: 16px; }
  .geographic-label span { font-size: 16px; }
  .geographic-developer { left: 1%; top: 27%; max-width: 48%; }
  .geographic-projects { top: auto; bottom: 0; left: 38%; right: 0; max-width: none; }
  .product-preview .opportunity-landscape .opportunity-copy { margin: 12px; padding: 26px 22px; }
  .product-preview .opportunity-landscape .opportunity-copy h3 { font-size: 26px; }
  .context-signal { margin-bottom: 24px; }
  .relationship-origin { top: calc(70 / 470 * 100%); }
  .relationship-primary { left: calc(76 / 320 * 100%); top: calc(230 / 470 * 100%); }
  .relationship-backup { left: calc(244 / 320 * 100%); top: calc(230 / 470 * 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .context-signal * { transition: none !important; }
  .signal-motion-path {display:none;transition:none;}
}
@media (forced-colors: active) {
  .signal-motion-path {display:none;}
  .relationship-figure, .relationship-figure figcaption, .relationship-node strong, .relationship-node > span:last-child, .geographic-label { background: Canvas; color: CanvasText; }
  .relationship-lines, .geographic-link, .resource-connections, .context-signal svg { stroke: CanvasText; }
  .relationship-network::before, .opportunity-map image, .geographic-grid { display: none; }
  .geographic-point { fill: CanvasText; }
  .geographic-halo { fill: Canvas; stroke: CanvasText; }
}