/* ==========================================================================
   "Market signals" — homepage signal-flow demo.

   The old stage was a dark surface with a living signal storm compressing into
   an action. It was striking and it said the wrong thing: what a visitor took
   from it was "they have a lot of data". The claim is the opposite — that the
   volume is handled, and what reaches you is one decision.

   So this is light, quiet and literal: three columns, left to right, with the
   reading order carrying the argument. Signals detected → connected with your
   commercial context → the thing to do. Blue only on the connective tissue and
   the action; green and red only where they carry meaning.

   Every state is the same size. The columns reserve their height so a scenario
   change cannot move the page.
   ========================================================================== */

.mi-section { position: relative; background: #ffffff; padding: 88px 2rem 96px; }

.mi-header { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.mi-eyebrow {
  font: 700 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sns-grey-600, #475569); margin-bottom: 12px;
}
.mi-headline {
  font: 800 clamp(26px, 3.6vw, 40px)/1.16 Poppins, Inter, sans-serif;
  color: var(--sns-ink-800, #111827); letter-spacing: -0.03em;
  margin-bottom: 16px; text-wrap: balance;
}
.mi-sub {
  font: 400 16px/1.65 Inter, sans-serif;
  color: var(--sns-grey-600, #475569); margin-bottom: 10px;
}
.mi-micro { font: 600 13.5px/1.5 Inter, sans-serif; color: var(--sns-blue-700, #1D4ED8); }

.mi-stage-wrap { max-width: 1180px; margin: 0 auto; }
.mi-stage {
  position: relative;
  padding: 26px;
  border-radius: var(--sns-radius-lg, 16px);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--sns-surface-3, #F7F9FB) 100%);
  border: 1px solid var(--sns-border-strong, rgba(15, 23, 42, 0.14));
  box-shadow: var(--sns-shadow-sm, 0 1px 2px rgba(16, 24, 40, 0.04)),
              0 28px 64px -34px rgba(16, 24, 40, 0.42);
}

/* The flow. Column widths are fixed proportions rather than content-driven, so
   a longer signal in one scenario cannot resize the whole diagram. */
.ms-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 0.86fr) 34px minmax(0, 1.22fr);
  gap: 14px;
  align-items: stretch;
}

.ms-col { display: flex; flex-direction: column; min-width: 0; }
.ms-col-label {
  margin: 0 0 10px;
  font: 700 10px/1 Inter, sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sns-grey-400, #98A2B3);
}

/* ----------------------------------------------------- incoming signals -- */

/* Height is reserved for six rows whether or not six have arrived yet. */
.ms-sigs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-rows: repeat(6, 1fr); gap: 7px;
  flex: 1 1 auto;
}
.ms-sig {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 8px 11px;
  border: 1px solid var(--sns-border, rgba(15, 23, 42, 0.08));
  border-radius: var(--sns-radius-sm, 8px);
  background: var(--sns-surface-1, #FFFFFF);
  box-shadow: var(--sns-shadow-sm, 0 1px 2px rgba(16, 24, 40, 0.04));
  opacity: 0;
  transform: translateY(7px);
}
.ms-sig-type {
  font: 600 9.5px/1.2 Inter, sans-serif;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--sns-grey-400, #98A2B3);
}
.ms-sig-text {
  font: 500 12.5px/1.35 Inter, sans-serif;
  color: var(--sns-grey-700, #374151);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
  .ms-sig { transition: opacity 0.45s ease, transform 0.45s ease; }
  /* Arriving: staggered by index, so they land one after another. */
  .is-arriving .ms-sig {
    opacity: 1; transform: none;
    transition-delay: calc(var(--i) * 0.44s);
  }
  /* Flowing: they lean toward the engine and thin out. The stagger reverses
     so the first to arrive is the first to leave. */
  .is-flowing .ms-sig {
    opacity: 0.34; transform: translateX(10px);
    transition-delay: calc(var(--i) * 0.05s);
  }
  .is-connecting .ms-sig,
  .is-resolving .ms-sig,
  .is-read .ms-sig { opacity: 0.34; transform: translateX(10px); }
}
.is-static .ms-sig { opacity: 1; transform: none; }

/* ------------------------------------------------------------- the flow -- */

.ms-flow {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  padding-top: 22px;               /* clears the column labels */
}
.ms-chev {
  width: 6px; height: 6px;
  border-right: 1.4px solid var(--sns-grey-300, #CBD5E1);
  border-bottom: 1.4px solid var(--sns-grey-300, #CBD5E1);
  transform: rotate(-45deg);
  opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
  .ms-chev { transition: opacity 0.3s ease, border-color 0.3s ease; }
  /* Each connector lights only while something is actually crossing it. */
  .is-flowing .ms-flow--in .ms-chev,
  .is-resolving .ms-flow--out .ms-chev,
  .is-read .ms-flow--out .ms-chev {
    opacity: 1;
    border-color: var(--sns-blue-500, #3B82F6);
    animation: ms-chev 1.1s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.13s);
  }
}
@keyframes ms-chev {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* ----------------------------------------------------------- the engine -- */

.ms-engine {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 22px;                /* aligns with the columns' content */
  padding: 16px 14px 14px;
  border: 1px solid var(--sns-border-strong, rgba(15, 23, 42, 0.14));
  border-radius: var(--sns-radius-md, 12px);
  background: var(--sns-surface-1, #FFFFFF);
  box-shadow: var(--sns-shadow-md, 0 4px 14px rgba(16, 24, 40, 0.06));
  text-align: center;
}
.ms-engine-head { margin-bottom: 10px; }
.ms-engine-brand {
  margin: 0;
  font: 600 11px/1.2 Inter, sans-serif;
  color: var(--sns-grey-500, #667085);
}
.ms-engine-name {
  margin: 2px 0 0;
  font: 700 15px/1.2 Poppins, Inter, sans-serif;
  letter-spacing: -0.01em;
  color: var(--sns-ink-900, #101828);
}

.ms-lattice { width: 100%; max-width: 150px; height: auto; display: block; }

.ms-lat-path {
  stroke-dasharray: 96;
  stroke-dashoffset: 96;
}
@media (prefers-reduced-motion: no-preference) {
  .ms-lat-path { transition: stroke-dashoffset 0.62s ease; }
  /* The one piece of motion the engine has: the paths stroke on in sequence.
     That stroking IS the "connecting" beat — there is no other effect. */
  .is-connecting .ms-lat-path,
  .is-resolving .ms-lat-path,
  .is-read .ms-lat-path {
    stroke-dashoffset: 0;
    transition-delay: calc(var(--i) * 0.1s);
  }
  .ms-lat-in { transition: fill 0.4s ease; }
  .is-connecting .ms-lat-in,
  .is-resolving .ms-lat-in,
  .is-read .ms-lat-in {
    fill: #2563EB;
    transition-delay: calc(var(--i) * 0.1s);
  }
}
.is-static .ms-lat-path { stroke-dashoffset: 0; }
.is-static .ms-lat-in { fill: #2563EB; }

/* One pattern recognised: a single ring, once, not a pulse that never stops. */
.ms-lat-ring { opacity: 0; transform-box: view-box; transform-origin: 85% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .is-connecting .ms-lat-ring { animation: ms-ring 1.5s ease-out 0.75s 1 both; }
}
@keyframes ms-ring {
  0%   { opacity: 0; transform: scale(0.55); }
  45%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5); }
}

.ms-lat-out { opacity: 0.28; }
@media (prefers-reduced-motion: no-preference) {
  .ms-lat-out { transition: opacity 0.5s ease; }
  .is-connecting .ms-lat-out,
  .is-resolving .ms-lat-out,
  .is-read .ms-lat-out { opacity: 1; }
}
.is-static .ms-lat-out { opacity: 1; }

.ms-engine-support {
  margin: 10px 0 0;
  font: 400 11px/1.45 Inter, sans-serif;
  color: var(--sns-grey-500, #667085);
  max-width: 22ch;
}

/* Reserved height: the status text appears mid-loop and must not shift the
   panel when it does. */
.ms-engine-status {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 10px 0 0; min-height: 15px;
  font: 600 10.5px/1.3 Inter, sans-serif;
  color: var(--sns-blue-700, #1D4ED8);
}
.ms-status-dot {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--sns-blue-600, #2563EB);
  opacity: 0;
}
.is-connecting .ms-status-dot,
.is-resolving .ms-status-dot,
.is-read .ms-status-dot,
.is-static .ms-status-dot { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .is-connecting .ms-status-dot { animation: ms-dot 1.4s ease-in-out infinite; }
}
@keyframes ms-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ---------------------------------------------------------- the insight -- */

.ms-insight {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: 16px 18px;
  border: 1px solid var(--sns-border-strong, rgba(15, 23, 42, 0.14));
  border-left: 3px solid var(--sns-grey-300, #CBD5E1);
  border-radius: var(--sns-radius-md, 12px);
  background: var(--sns-surface-1, #FFFFFF);
  box-shadow: var(--sns-shadow-md, 0 4px 14px rgba(16, 24, 40, 0.06));
  opacity: 0;
  transform: translateY(9px);
}
/* The only colour that carries meaning: which way this one cuts. */
.ms-insight--up   { border-left-color: var(--sns-ok, #047857); }
.ms-insight--down { border-left-color: var(--sns-risk, #BE123C); }
.ms-insight--flat { border-left-color: var(--sns-blue-600, #2563EB); }

@media (prefers-reduced-motion: no-preference) {
  .ms-insight { transition: opacity 0.5s ease, transform 0.5s ease; }
  .is-resolving .ms-insight,
  .is-read .ms-insight { opacity: 1; transform: none; }
}
.is-static .ms-insight { opacity: 1; transform: none; }

.ms-kicker {
  margin: 0 0 6px;
  font: 700 10px/1 Inter, sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ms-insight--up   .ms-kicker { color: var(--sns-ok, #047857); }
.ms-insight--down .ms-kicker { color: var(--sns-risk, #BE123C); }
.ms-insight--flat .ms-kicker { color: var(--sns-blue-700, #1D4ED8); }

.ms-insight-title {
  margin: 0 0 12px;
  font: 700 17px/1.28 Poppins, Inter, sans-serif;
  letter-spacing: -0.02em;
  color: var(--sns-ink-900, #101828);
  text-wrap: balance;
}

.ms-block + .ms-block { margin-top: 10px; }
.ms-block-label {
  margin: 0 0 4px;
  font: 700 9.5px/1 Inter, sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sns-grey-400, #98A2B3);
}
.ms-block-text {
  margin: 0;
  font: 400 12.5px/1.5 Inter, sans-serif;
  color: var(--sns-grey-700, #374151);
}
.ms-block-text--action {
  font-weight: 500;
  color: var(--sns-ink-900, #101828);
}

.ms-changed { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.ms-changed li {
  position: relative;
  padding-left: 13px;
  font: 400 12.5px/1.45 Inter, sans-serif;
  color: var(--sns-grey-700, #374151);
  font-variant-numeric: tabular-nums;
}
.ms-changed li::before {
  content: ''; position: absolute; left: 0; top: 7.5px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--sns-grey-300, #CBD5E1);
}

.ms-cta {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: auto; padding-top: 14px;
  font: 600 12.5px/1 Inter, sans-serif;
  color: var(--sns-blue-600, #2563EB);
}
.ms-i { width: 14px; height: 14px; flex: none; }

/* ------------------------------------------------------- which scenario -- */

.ms-dots {
  position: absolute; right: 18px; bottom: 12px;
  display: flex; gap: 5px;
}
.ms-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sns-grey-200, #D9E0E8);
}
.ms-dot.is-on { background: var(--sns-blue-500, #3B82F6); }
@media (prefers-reduced-motion: no-preference) {
  .ms-dot { transition: background-color 0.4s ease; }
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1080px) {
  .ms-grid { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 0.9fr) 28px minmax(0, 1.3fr); gap: 10px; }
  .ms-insight-title { font-size: 15.5px; }
  .ms-engine-support { display: none; }   /* the name already says it at this width */
}

/* Vertical below this: signals, then the engine, then the insight — the same
   order, so the argument survives the stack. */
@media (max-width: 880px) {
  .mi-section { padding: 64px 20px 72px; }
  .mi-stage { padding: 18px; }
  .ms-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .ms-engine, .ms-flow { margin-top: 0; padding-top: 0; }
  .ms-engine { padding: 14px 14px 12px; }
  .ms-engine-support { display: block; max-width: none; }

  /* The connectors turn to point down. */
  .ms-flow { flex-direction: row; gap: 6px; padding: 2px 0; }
  .ms-chev { transform: rotate(45deg); }

  /* Two columns of signals so six rows do not become six screens. */
  .ms-sigs { grid-template-rows: repeat(3, auto); grid-template-columns: 1fr 1fr; }
  .ms-sig { padding: 7px 9px; }
  .ms-sig-text { font-size: 11.5px; }

  /* Sideways travel makes no sense once the flow points down. */
  .is-flowing .ms-sig,
  .is-connecting .ms-sig,
  .is-resolving .ms-sig,
  .is-read .ms-sig { transform: none; }

  /* The lattice is square, so at this width it costs more height than any
     other block. Shrink it and tighten the panel around it. */
  .ms-lattice { max-width: 76px; }
  .ms-engine-head { margin-bottom: 6px; }
  .ms-engine-name { font-size: 14px; }
  .ms-engine-support { margin-top: 7px; font-size: 10.5px; }
  .ms-engine-status { margin-top: 7px; }
  .ms-dots { position: static; justify-content: center; margin-top: 10px; }
}

@media (max-width: 520px) {
  /* Two columns are kept all the way down. One column reads marginally better
     per card and costs ~145px of height for the six, which is the difference
     between the flow fitting on a phone screen and not. */
  .ms-sigs { gap: 6px; }
  .ms-sig { padding: 6px 8px; }
  .ms-sig-type { font-size: 9px; }
  .ms-sig-text { font-size: 11px; line-height: 1.3; }
  .ms-insight { padding: 14px; }
  .ms-insight-title { font-size: 15px; }
}