/* Panabistics platform illustration. Proposed design; awaiting approval. */
.riVisual {
  --ri-surface: #0e0f15; --ri-text: #f0eff8; --ri-muted: #aaa7bd; --ri-violet: #ac98ff; --ri-blue: #8bc9ff;
  container: ri-visual / inline-size;
  position: relative; min-width: 0; width: 100%; border: 1px solid #aaa0df30; border-radius: 20px;
  background: radial-gradient(ellipse at 55% 39%,#8170db12,transparent 57%),var(--ri-surface);
  box-shadow: 0 28px 80px #0005,0 0 50px #9683f508;
  color: var(--ri-text); overflow: hidden; align-self: center; font-family: Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.riVisual::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg,transparent,#b0a0faaa,transparent); }
.riVisual * { box-sizing: border-box; }
.riTop { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 24px; border-bottom: 1px solid #ffffff0d; }
.riBrand { display: inline-flex; align-items: center; gap: 8px; color: #e7e2f3; font-size: 13px; line-height: 1.5; font-weight: 580; }
.riMark { position: relative; width: 19px; height: 19px; border-radius: 5px; background: linear-gradient(145deg,#c7b4ff,#8970e7); }
.riMark::before,.riMark::after { content: ""; position: absolute; border-radius: 2px; background: #131018; }
.riMark::before { inset: 4px 9px 4px 4px; }.riMark::after { inset: 4px 4px 9px 9px; }
.riIllustrative { color: #a29cb5; font-size: 11px; line-height: 1.5; }
.riHeading { padding: 24px 26px 0; }
.riEyebrow { color: #a99dc2; font-size: 11px; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; }
.riHeading h2 { color: #f4f1fc; margin: 8px 0 0; font-size: 30px; line-height: 1.22; letter-spacing: -.038em; font-weight: 550; }
.riHeading h2 span { background: linear-gradient(100deg,#e0d4ff,#a4b5ff 65%,#91d5ed); background-clip: text; -webkit-background-clip: text; color: transparent; }
.riHeading p { color: #aaa5bd; font-size: 13px; line-height: 1.6; margin: 9px 0 0; }
.riNetwork {
  position: relative; display: grid; grid-template-columns: minmax(0,1fr) 122px minmax(0,1fr); gap: 20px; align-items: center;
  margin: 16px 24px 14px; padding: 24px 0; isolation: isolate;
  background-image: radial-gradient(#b4a9f012 .7px,transparent .7px); background-size: 14px 14px;
}
.riConnections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
.riRoute { fill: none; stroke: #66568d80; stroke-width: 1.2; transition: stroke .2s ease; }
.riRouteOutput { stroke: #527a9470; }
.riPort { fill: #9b85da; stroke: var(--ri-surface); stroke-width: 2; }
.riPortOutput { fill: #76a8c7; }
.riSources,.riResults { display: grid; gap: 12px; z-index: 1; }
.riNode { position: relative; min-height: 56px; display: flex; align-items: center; gap: 9px; padding: 11px 10px; border: 1px solid #ffffff13; border-radius: 9px; background: linear-gradient(120deg,#171721,#111119); color: #c5c0d9; font-size: 12px; font-weight: 500; line-height: 1.45; box-shadow: 0 5px 15px #0002; transition: border-color .2s,background .2s; }
.riNodeIcon { flex: 0 0 17px; width: 17px; height: 17px; color: #a397c5; }
.riResults .riNodeIcon { color: #97b4c9; }
.riEngine { position: relative; width: 122px; height: 122px; display: grid; place-items: center; }
.riOrbit { position: absolute; width: 174px; height: 174px; transform: rotate(45deg); border: 1px solid #a387ef1c; border-radius: 28px; z-index: -1; }
.riOrbit::before { content: ""; position: absolute; inset: 13px; border: 1px solid #a387ef14; border-radius: 22px; }
.riEngine::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; z-index: -2; background: radial-gradient(ellipse,#9680ee22,transparent 65%); }
.riChip { position: relative; width: 122px; height: 122px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; border-radius: 18px; border: 1px solid #aa97e857; background: linear-gradient(145deg,#30293d,#191820 52%,#252238); box-shadow: inset 0 1px 0 #ddd0ff21,inset 0 -1px 0 #9682cf18,0 18px 30px #0005,0 0 30px #b491ff18; text-align: center; }
.riChip::before { content: ""; position: absolute; inset: 6px; border: 1px solid #c7b6ff0f; border-radius: 13px; }
.riCoreMark { width: 31px; height: 31px; border-radius: 9px; background: linear-gradient(140deg,#e2d4ff,#8b75e8); box-shadow: 0 0 26px #b89aff30; }
.riCoreMark::before { inset: 7px 15px 7px 7px; border-radius: 3px; }.riCoreMark::after { inset: 7px 7px 15px 15px; border-radius: 3px; }
.riChip strong { font-size: 12px; line-height: 1.4; font-weight: 550; color: #e0d7f8; }
.riMode { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; margin: 0 24px; padding: 4px; border: 1px solid #ffffff12; border-radius: 9px; background: #0a0a10; }
.riMode button { min-height: 44px; min-width: 0; padding: 8px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #a29ab5; font: inherit; font-size: 12px; line-height: 1.5; font-weight: 500; cursor: pointer; }
.riMode button:hover { color: #ddd2ff; background: #ffffff03; }
.riMode button[aria-pressed="true"] { color: #d8c6ff; background: linear-gradient(180deg,#b4a0ff18,#b4a0ff09); border-color: #b4a0ff23; box-shadow: inset 0 1px 0 #b4a0ff0d; }
.riDetail { color: #a6a0b7; font-size: 12px; line-height: 1.6; padding: 0 3px; margin: 12px 24px 18px; min-height: 39px; }
.riOffers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0 24px 21px; }
.riOffer { position: relative; display: block; padding: 14px 12px; border: 1px solid #ffffff12; border-radius: 9px; background: #ffffff02; }
.riOfferTitle { display: block; color: #d5d0e3; font-size: 12px; line-height: 1.45; font-weight: 520; }
.riLive { display: inline-flex; align-items: center; gap: 5px; color: #87b99f; font-size: 11px; line-height: 1.5; margin-top: 9px; }
.riLive::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #7eb695; }
.riFoot { display: flex; flex-direction: column; gap: 6px; padding: 15px 24px; background: #ffffff02; border-top: 1px solid #ffffff0d; color: #aaa1bd; font-size: 11px; line-height: 1.5; }
.riMarkets { display: flex; gap: 15px; flex-wrap: wrap; color: #b4bfd4; }
.riScope { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.riScope strong { color: #c3b6dc; font-weight: 500; }
.riVisual[data-focus="evidence"] .riSources .riNode { border-color: #ba9cf956; background: linear-gradient(120deg,#251e35,#15121e); }
.riVisual[data-focus="evidence"] .riRouteInput { stroke: #bc9dffc0; }
.riVisual[data-focus="outputs"] .riResults .riNode { border-color: #89c4ed45; background: linear-gradient(120deg,#17212c,#12171d); }
.riVisual[data-focus="outputs"] .riRouteOutput { stroke: #8bc5f2b0; }
.riVisual[data-focus="intelligence"] .riChip { border-color: #c3a6ff80; box-shadow: inset 0 1px 0 #ddd0ff24,0 18px 30px #0005,0 0 40px #b491ff24; }
.riVisual[data-focus="intelligence"] .riRouteInput { stroke: #b197ee90; }.riVisual[data-focus="intelligence"] .riRouteOutput { stroke: #8eb2d090; }
@container ri-visual (max-width: 430px) {
  .riTop { padding: 15px 18px; }
  .riHeading { padding: 23px 20px 0; }
  .riEyebrow { font-size: 11px; letter-spacing: .06em; }
  .riHeading h2 { font-size: 28px; }
  .riHeading p { font-size: 14px; }
  .riNetwork { grid-template-columns: minmax(0,1fr); gap: 28px; margin: 18px 20px 20px; padding: 12px 0; }
  .riSources,.riResults { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .riNode { min-height: 72px; padding: 11px 5px; flex-direction: column; justify-content: center; text-align: center; gap: 7px; font-size: 12px; line-height: 1.4; }
  .riNodeIcon { width: 16px; height: 16px; flex-basis: 16px; }
  .riEngine { justify-self: center; }
  .riOrbit { width: 158px; height: 158px; }
  .riMode { margin: 0 20px; }
  .riMode button { min-height: 44px; font-size: 13px; }
  .riDetail { font-size: 13px; margin: 12px 20px 18px; min-height: 42px; }
  .riOffers { padding: 0 20px 20px; gap: 8px; }
  .riOffer { padding: 13px 10px; }
  .riOfferTitle { font-size: 12px; }
  .riFoot { padding: 15px 20px; font-size: 12px; }
  .riMarkets { gap: 6px 13px; }
}
@container ri-visual (max-width: 300px) {
  .riHeading,.riFoot { padding-left: 16px; padding-right: 16px; }
  .riHeading h2 { font-size: 25px; }
  .riNetwork,.riMode { margin-left: 16px; margin-right: 16px; }
  .riMode { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr); }
  .riDetail { margin-inline: 16px; }
  .riOffers { padding-left: 16px; padding-right: 16px; }
  .riSources,.riResults { gap: 5px; }
  .riNode { font-size: 11px; }
  .riOfferTitle { font-size: 11px; }
  .riScope { display: block; }.riScope > span { display: block; margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) { .riVisual * { transition: none; } }