/* Functional diagrams. Each topology expresses a different kind of work. */
.function-map {
  position: relative;
  height: 520px;
  min-width: 0;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 48%, #0a1723e6 12%, #0a1723ad 50%, #0a172300 74%);
}
.logic-panel { position: absolute; inset: 0; }
.logic-panel[hidden] { display: none; }
.logic-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.logic-track, .logic-wire {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-width: 1.3;
}
.logic-track { stroke: #91b0c32e; }
.logic-wire {
  stroke: #b7d9ed;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--reveal, 1));
  opacity: var(--reveal, 1);
}
.logic-arrow { fill: none; stroke: #b7d9ed; stroke-width: 1.2; }
.logic-stage-2 { --reveal: var(--logic-two, 1); }
.logic-stage-3 { --reveal: var(--logic-three, 1); }
.logic-node, .logic-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, calc(-50% + (1 - var(--reveal, 1)) * 16px));
  opacity: calc(.18 + var(--reveal, 1) * .82);
  text-align: center;
}
.logic-node {
  width: var(--node-width, 29%);
  min-height: 72px;
  padding: 12px 9px;
  border: 1px solid #8cabbf66;
  border-radius: 5px;
  background: #0d1c28;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: 0 14px 35px #030a1126;
}
.logic-node b { font-weight: 450; }
.logic-node small { color: #aebfc9; font-size: 11px; line-height: 1.5; }
.logic-input { border: 0; background: transparent; box-shadow: none; padding: 8px; }
.logic-symbol { font: 400 28px/1 Outfit; color: var(--accent); margin-bottom: 7px; }
.logic-hub {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #294b61, #102331 75%);
  border-color: #c0dcec99;
  box-shadow: 0 0 65px #75aac217;
}
.logic-hub b { font-size: 19px; letter-spacing: -.025em; }
.logic-hub small { font-size: 10px; }
.logic-output { width: var(--node-width, 43%); border-top: 2px solid #b7d9ed; }
.logic-review { background: #142a38; border-color: #a8c9dfaa; }
.logic-label { font-size: 11px; color: #c2d4df; white-space: nowrap; background: #0b1620; padding: 4px 8px; }
.function-caption {
  position: absolute;
  bottom: -28px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 11px;
  color: #aebfc9;
}

/* Lager: a threshold comparison, followed by a human decision. */
.logic-stock .logic-input, .logic-quote .logic-input { width: 43%; }
.stock-rule {
  position: absolute;
  left: 5%;
  top: 32%;
  width: 90%;
  opacity: calc(.18 + var(--reveal, 1) * .82);
  transform: translateY(calc((1 - var(--reveal, 1)) * 16px));
}
.stock-rule > p:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: #c5d3dc; margin: 0; }
.stock-rule > p small { font-size: 10px; color: #99afbd; white-space: nowrap; }
.rule-values { display: flex; justify-content: center; align-items: center; gap: 38px; margin: 23px 0 26px; }
.rule-values > div { text-align: center; min-width: 100px; }
.rule-values strong { display: block; font: 400 84px/.9 Outfit; letter-spacing: -.065em; color: #d4e9f4; }
.rule-values span { display: block; font-size: 12px; color: #aebfc9; margin-top: 10px; }
.rule-values > b { font: 300 38px/1 Geist; color: #88a9bf; }
.level-track { position: relative; height: 4px; background: #809cad33; }
.level-track > i { display: block; height: 100%; width: calc(20% * var(--logic-two, 1)); background: var(--accent); }
.level-track > b { position: absolute; left: 50%; top: -7px; width: 1px; height: 18px; background: #b7d9ed; }
.rule-conclusion { margin: 13px 0 0; font-size: 12px; color: #afc8d8; text-align: center; }

/* App: roles and functions connected through shared data. */
.logic-app .logic-input { width: 35%; }
.app-hub { width: 134px; height: 134px; }
.app-hub b { font-size: 26px; }
.app-hub small { max-width: 90px; }
.app-module { background: #0c1b26; border: 0; border-bottom: 2px solid #7daac6; border-radius: 0; box-shadow: none; }

/* Offert: a review gate with a route back to the draft. */
.quote-draft { border-color: #739cb577; }
.quote-review { border-radius: 40px; min-height: 82px; }
.quote-revise { font-size: 11px; padding: 3px 5px; }
.quote-send, .quote-follow { min-height: 50px; border: 0; border-top: 1px solid #9bbdd2; border-radius: 0; background: #0d1d29; }
.quote-send { width: 34%; }
.logic-quote .logic-node small { font-size: 11px; }

@media (max-width: 1100px) {
  .function-map { height: 480px; }
  .logic-node { font-size: 13px; padding: 10px 7px; }
  .logic-node small { font-size: 10px; }
  .logic-hub { width: 108px; height: 108px; }
  .logic-hub b { font-size: 17px; }
  .logic-label { font-size: 10px; padding-inline: 5px; }
  .app-hub b { font-size: 23px; }
  .stock-rule > p:first-child { font-size: 12px; }
}
@media (min-width: 701px) and (max-height: 760px) {
  .function-map { height: 450px; }
}
@media (max-width: 850px) and (min-width: 701px) {
  .logic-node { font-size: 12px; }
  .logic-hub { width: 92px; height: 92px; }
  .logic-hub b { font-size: 15px; }
  .logic-hub small { font-size: 9px; }
  .logic-label { font-size: 9px; }
  .rule-values { gap: 18px; }
  .rule-values > div { min-width: 70px; }
  .rule-values strong { font-size: 68px; }
  .stock-rule > p:first-child { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .function-map { height: 310px; max-width: 410px; margin: 8px auto 0; }
  .logic-node { min-height: 50px; padding: 7px 5px; gap: 4px; font-size: 13px; }
  .logic-node small { font-size: 10px; }
  .logic-symbol { font-size: 23px; margin-bottom: 4px; }
  .logic-hub { width: 90px; height: 90px; }
  .logic-hub b { font-size: 15px; }
  .logic-hub small { font-size: 9px; }
  .logic-label { font-size: 10px; padding: 3px 5px; }
  .function-caption { bottom: -25px; font-size: 10px; }
  .stock-rule > p:first-child { font-size: 12px; gap: 6px; }
  .stock-rule > p small { font-size: 9px; }
  .rule-values { gap: 22px; margin: 15px 0 18px; }
  .rule-values > div { min-width: 65px; }
  .rule-values strong { font-size: 50px; }
  .rule-values span { margin-top: 5px; font-size: 10px; }
  .rule-values > b { font-size: 25px; }
  .level-track { height: 3px; }
  .level-track > b { top: -5px; height: 13px; }
  .rule-conclusion { margin-top: 9px; font-size: 10px; }
  .app-hub b { font-size: 20px; }
  .app-hub small { max-width: 65px; }
  .quote-review { min-height: 58px; }
  .quote-send, .quote-follow { min-height: 38px; }
  .logic-quote .logic-node small { font-size: 10px; }
}
@media (max-width: 360px) {
  .function-map { height: 280px; margin-top: 7px; }
  .logic-node { font-size: 12px; min-height: 46px; }
  .logic-node small { font-size: 9px; }
  .logic-hub { width: 80px; height: 80px; }
  .logic-hub b { font-size: 13px; }
  .logic-hub small { font-size: 8px; }
  .logic-label { font-size: 9px; padding-inline: 4px; }
  .stock-rule > p:first-child { font-size: 10px; }
  .stock-rule > p small { font-size: 8px; }
  .rule-values { margin: 12px 0 15px; }
  .rule-values strong { font-size: 44px; }
  .rule-conclusion { display: none; }
  .app-hub b { font-size: 18px; }
  .app-hub small { font-size: 8px; }
  .quote-review { min-height: 54px; }
  .logic-quote .logic-node small { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .function-map { --logic-two: 1; --logic-three: 1; margin-block: 45px 35px; }
  .logic-node, .logic-label { transform: translate(-50%, -50%); }
  .stock-rule { transform: none; }
}