/* The original product graph, in the approved portfolio's visual language.
   Design read: preserve; DESIGN_VARIANCE 6 / MOTION_INTENSITY 3 /
   VISUAL_DENSITY 3. Native HTML and SVG, with no diagram library required.
   Rounded rectangles are screens; pills are the assistance added to the flow.
   The existing site explicitly locks its light theme and Helvetica type. */
.sensei-architecture {
  --flow-surface: var(--selected-work-surface, #fdfdfc);
  --flow-ink: var(--portfolio-ink, #101216);
  --flow-accent: var(--portfolio-purple, #7c4dff);
  --flow-accent-ink: #6941c5;
  --flow-line: #9b8baa;
  --flow-help-line: #9273b2;
}
.sensei-case-study .sensei-architecture-figure { margin-top: 56px; }
.sensei-flow {
  --flow-grid-width: 1120;
  position: relative;
  height: 610px;
  color: var(--flow-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}
.sensei-flow-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sensei-flow-lines > g > path,
.sensei-flow-group-line { vector-effect: non-scaling-stroke; }
.sensei-flow-existing { stroke: var(--flow-line); }
.sensei-flow-assisted,
.sensei-flow-group-line { stroke: var(--flow-help-line); }
.sensei-flow-lines marker path { stroke: var(--flow-line); stroke-width: 1.2; }
.sensei-flow-lines marker[id*="help"] path { stroke: var(--flow-help-line); }
.sensei-flow-lines--mobile { display: none; }
.sensei-flow-node,
.sensei-flow-assistance {
  position: absolute;
  top: calc(var(--flow-y) * 1px);
  left: calc(var(--flow-x) / var(--flow-grid-width) * 100%);
  width: calc(var(--flow-w) / var(--flow-grid-width) * 100%);
  height: calc(var(--flow-h) * 1px);
}
.sensei-flow-node,
.sensei-flow-help {
  display: grid;
  place-items: center;
  padding: 10px 14px;
  border: 1px solid #e1dce8;
  border-radius: 14px;
  background: var(--flow-surface);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.025em;
  text-align: center;
  text-wrap: balance;
}
.sensei-flow-node--main { border-color: #c9b9e1; font-weight: 600; }
.sensei-flow-node--help,
.sensei-flow-help {
  border-color: #dcd0f3;
  border-radius: 999px;
  color: var(--flow-accent-ink);
  background: #f5f1fc;
  font-weight: 600;
}
.sensei-flow-assistance { display: grid; grid-template-rows: repeat(3, 1fr); gap: 12px; }
.sensei-flow-help { padding: 8px 12px; font-size: 16px; }
.sensei-flow-node--splash { --flow-x: 22; --flow-y: 20; --flow-w: 178; --flow-h: 68; }
.sensei-flow-node--match { --flow-x: 330; --flow-y: 20; --flow-w: 200; --flow-h: 68; }
.sensei-flow-node--cash { --flow-x: 655; --flow-y: 20; --flow-w: 175; --flow-h: 68; }
.sensei-flow-node--contest { --flow-x: 330; --flow-y: 170; --flow-w: 200; --flow-h: 76; }
.sensei-flow-node--teams { --flow-x: 655; --flow-y: 174; --flow-w: 175; --flow-h: 68; }
.sensei-flow-node--insights { --flow-x: 920; --flow-y: 174; --flow-w: 184; --flow-h: 68; }
.sensei-flow-node--create { --flow-x: 330; --flow-y: 336; --flow-w: 200; --flow-h: 76; }
.sensei-flow-assistance { --flow-x: 652; --flow-y: 300; --flow-w: 220; --flow-h: 168; }
.sensei-flow-node--captain { --flow-x: 330; --flow-y: 518; --flow-w: 200; --flow-h: 76; }
.sensei-case-study .sensei-flow-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #eae5f0;
  font-size: 13px;
  letter-spacing: -.01em;
}
.sensei-case-study .sensei-flow-caption > span { color: var(--flow-accent-ink); }
.sensei-case-study .sensei-flow-caption a {
  flex-shrink: 0;
  padding-block: 10px;
  min-height: 44px;
  color: var(--case-muted, #626977);
  text-decoration: underline;
  text-decoration-color: #c7b6dd;
  text-underline-offset: 4px;
}
.sensei-case-study .sensei-flow-caption a:hover { color: var(--flow-accent-ink); }
.sensei-case-study .sensei-flow-caption a:focus-visible { outline: 3px solid var(--flow-accent); outline-offset: 4px; }
@media (max-width: 1023px) {
  .sensei-case-study .sensei-architecture-figure { margin-top: 40px; }
  .sensei-flow {
    --flow-grid-width: 400;
    width: min(460px, 100%);
    height: 888px;
    margin-inline: auto;
  }
  .sensei-flow-lines--desktop { display: none; }
  .sensei-flow-lines--mobile { display: block; }
  .sensei-flow-node,
  .sensei-flow-help { padding: 8px; font-size: 16px; }
  .sensei-flow-node--splash { --flow-x: 24; --flow-y: 20; --flow-w: 172; --flow-h: 68; }
  .sensei-flow-node--match { --flow-x: 24; --flow-y: 140; --flow-w: 172; --flow-h: 68; }
  .sensei-flow-node--cash { --flow-x: 224; --flow-y: 140; --flow-w: 176; --flow-h: 68; }
  .sensei-flow-node--contest { --flow-x: 24; --flow-y: 300; --flow-w: 172; --flow-h: 68; }
  .sensei-flow-node--teams { --flow-x: 224; --flow-y: 300; --flow-w: 176; --flow-h: 68; }
  .sensei-flow-node--insights { --flow-x: 224; --flow-y: 415; --flow-w: 176; --flow-h: 68; }
  .sensei-flow-node--create { --flow-x: 24; --flow-y: 494; --flow-w: 172; --flow-h: 68; }
  .sensei-flow-assistance { --flow-x: 224; --flow-y: 548; --flow-w: 176; --flow-h: 168; }
  .sensei-flow-node--captain { --flow-x: 24; --flow-y: 788; --flow-w: 172; --flow-h: 78; }
  .sensei-case-study .sensei-flow-caption { width: min(460px, 100%); margin-inline: auto; }
}
@media (max-width: 767px) {
  .sensei-case-study .sensei-flow-caption { display: block; margin-top: 12px; }
  .sensei-flow-caption > span { display: block; }
  .sensei-flow-caption a { display: inline-block; margin-top: 4px; }
}