/* Layout transcribed from the supplied SecuSolar prototype, scoped to this page.
   Versioned separately so a cached engineering.css cannot break the diagram. */
.ce-architecture {
  --ce-overlay-ready: 1;
  padding: 38px 0 70px;
}
.ce-architecture .ce-wrap { width: min(1320px, calc(100% - 40px)) !important; margin: 0 auto; }
.ce-head { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; margin-bottom: 18px; }
.ce-kicker { font-size: .76rem; text-transform: uppercase; letter-spacing: .16em; color: #b7c7d4; }
.ce-head h2 { max-width: none; font-size: clamp(1.7rem, 3.1vw, 3rem); letter-spacing: -.035em; line-height: 1.05; margin: 7px 0 0; text-wrap: wrap; }
.ce-head p { max-width: 600px; color: #9fb0bf; margin: 0; font-size: .94rem; }
.cea-figure { margin: 0; }
.ce-figure { border: 1px solid rgba(61,114,146,.55); border-radius: 24px; background: #02070c; box-shadow: 0 30px 90px rgba(0,0,0,.38); padding: 10px; overflow: hidden; }
.cea-diagram { position: relative; width: 100%; aspect-ratio: 1494 / 796; border-radius: 17px; overflow: hidden; isolation: isolate; }
.cea-diagram > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cea-overlay { position: absolute; inset: 0; }
.cea-overlay[hidden] { display: none; }
.cea-overlay > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cea-hotspot {
  fill: transparent !important;
  stroke: transparent !important;
  stroke-width: 1.5 !important;
  vector-effect: non-scaling-stroke;
  pointer-events: fill;
  cursor: pointer;
  outline: none;
}
.cea-diagram:hover .cea-hotspot, .cea-diagram:focus-within .cea-hotspot {
  stroke: rgba(56, 189, 248, .45) !important;
}
.cea-hotspot:focus-visible:not([data-ce-restored]), .cea-diagram .cea-hotspot.is-open {
  fill: rgba(237, 198, 75, .20) !important;
  stroke: #f5b743 !important;
  stroke-width: 2 !important;
}
@media (hover: hover) {
  .cea-hotspot:hover:not([data-ce-restored]) {
    fill: rgba(237, 198, 75, .20) !important;
    stroke: #f5b743 !important;
    stroke-width: 2 !important;
  }
}
.cea-hotspot[data-ce-restored]:focus-visible { stroke: #38bdf8 !important; stroke-width: 2 !important; }
.ce-figure .ce-hint { display: flex; justify-content: space-between; gap: 18px; align-items: center; color: #9fb0bf; font-size: .8rem; padding: 10px 6px 2px; margin: 0; }
.ce-hint .panel-link { flex-shrink: 0; }
.cea-figure [data-ce-status]:empty { display: none; }
.ce-three { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 108px; }
.ce-card { border: 1px solid rgba(61,114,146,.38); border-radius: 18px; background: linear-gradient(145deg,rgba(10,24,37,.84),rgba(4,11,18,.94)); padding: 22px; }
.ce-card .num { font-size: .7rem; letter-spacing: .13em; color: #f4c430; text-transform: uppercase; }
.ce-card h3 { font-size: 1.1rem; margin: 8px 0; }
.ce-card p { color: #9fb0bf; font-size: .9rem; margin: 0; }
.cea-modal button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cea-modal { width: min(48rem, calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); padding: 0; overflow: auto; border: 1px solid #38bdf855; border-radius: var(--radius-lg); background: var(--bg-alt); color: var(--text); }
.cea-modal::backdrop { background: rgba(1, 5, 13, .76); }
.cea-modal-card { position: relative; padding: clamp(1.25rem, 4vw, 2.5rem); }
.cea-modal-close { position: absolute; top: .75rem; right: .75rem; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg); color: var(--text); font-size: 1.5rem; cursor: pointer; }
.cea-modal h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.25; margin: .5rem 2.75rem 1rem 0; }
.cea-modal .section-label { margin-right: 3rem; }
.cea-modal-scope { color: #8dd5f3; font-size: .88rem; }
.cea-modal p, .cea-modal li { line-height: 1.75; }
.cea-modal ul { padding-left: 1.25rem; }
.cea-modal-navigation { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.5rem; }
.cea-modal-navigation button { min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; }
body.cea-modal-open { overflow: hidden; }
@media (max-width: 980px) { .ce-head, .ce-three { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ce-architecture { padding: 28px 0 52px; }
  .ce-architecture .ce-wrap { width: min(1320px, calc(100% - 24px)) !important; }
  .ce-figure { padding: 5px; border-radius: 16px; }
  .cea-diagram { border-radius: 12px; }
  .ce-figure .ce-hint { align-items: flex-start; flex-direction: column; }
  .ce-three { margin-top: 80px; }
}