/* Section: How Matrix works (#how-it-works). Four-step timeline plus the sources -> Matrix -> outputs diagram.
   Independent of the other sections. Needs section-base.css.
   The diagram's curves are an SVG with a fixed 360 x 272 viewBox that lines up with three 56px rows
   (24px frame padding, 28px gap), so row heights below must stay in step with the path coordinates in index.html. */

/* ---------- Steps ---------- */
.how__steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 var(--s-9); padding: 0; list-style: none; }
.how__steps::before {                               /* the rail */
  content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.16) 70%, transparent);
}
.how__step { position: relative; padding: var(--s-6) var(--s-5) 0 var(--s-5); }
.how__step + .how__step { border-left: 1px solid var(--border); }
.how__step:first-child { padding-left: 0; }
.how__dot { position: absolute; top: 0; left: var(--s-5); width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.how__step:first-child .how__dot { left: 0; }
.how__label {
  display: inline-block; margin-bottom: var(--s-4); padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 6px; background: rgba(255, 255, 255, 0.04);
  font: 400 var(--fs-mono)/1.2 var(--font-mono); letter-spacing: 0.04em; color: var(--t-2);
}
.how__step h3 { margin: 0; color: var(--t-head); font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; }
.how__step p { margin: var(--s-2) 0 0; color: var(--t-2); font-size: var(--fs-small); line-height: 1.55; }
.how__step .chip { margin-top: var(--s-4); white-space: normal; }

@media (prefers-reduced-motion: no-preference) {
  .how__dot { animation: how-dot 3.2s ease-in-out infinite; }
  .how__step:nth-child(2) .how__dot { animation-delay: 0.4s; }
  .how__step:nth-child(3) .how__dot { animation-delay: 0.8s; }
  .how__step:nth-child(4) .how__dot { animation-delay: 1.2s; }
}
@keyframes how-dot { 50% { opacity: 0.35; } }

@media (max-width: 959.98px) {
  .how__steps { grid-template-columns: 1fr; margin-bottom: var(--s-8); padding-left: var(--s-6); }
  .how__steps::before { top: 5px; bottom: 0; left: 5px; right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.12)); }
  .how__step, .how__step:first-child { padding: 0 0 var(--s-6) 0; border-left: 0; }
  .how__dot, .how__step:first-child .how__dot { top: 0; left: calc(-1 * var(--s-6)); }
  .how__step + .how__step { border-left: 0; }
}

/* ---------- Diagram ---------- */
.how__diagram { display: grid; grid-template-columns: 1fr 360px 1fr; align-items: start; border: 0; background: none; overflow: visible; }
.how__col { padding: 24px; display: grid; grid-auto-rows: 56px; gap: 28px; }
.how__node {
  position: relative; display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4);
  border: 1px solid var(--border); border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  color: var(--t-body); font-size: var(--fs-small); line-height: 1.3;
}
.how__arrow { flex: none; width: 20px; text-align: center; font: 400 var(--fs-body)/1 var(--font-mono); color: var(--t-4); }
/* No connector dots on the frame edges: the rails meet the frames cleanly and only the moving pulses are blue (founder instruction). */

.how__mid { position: relative; height: 272px; }
.how__lines { position: absolute; inset: 0; width: 360px; height: 272px; }
.how__rail { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.how__hub {
  position: absolute; left: 50%; top: 136px; display: grid; place-items: center; width: 72px; height: 72px;
  margin: -36px 0 0 -36px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), var(--recessed);
}
.how__hub img { display: block; width: 38px; height: auto; }
.how__hubname {
  position: absolute; left: 0; right: 0; top: 184px; text-align: center;
  font: 400 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-3);
}
/* The two frames sit behind the rows, left and right of the middle column. */
.how__col--in, .how__col--out {
  border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01) 55%), var(--recessed);
}

@media (max-width: 959.98px) {
  .how__diagram { grid-template-columns: 1fr; gap: var(--s-5); }
  .how__mid { height: auto; display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
  .how__lines { display: none; }
  .how__hub { position: relative; left: auto; top: auto; margin: 0; }
  .how__hubname { position: static; }
  .how__mid::before, .how__mid::after { content: ""; width: 1px; height: 28px; background: rgba(255, 255, 255, 0.22); }
  .how__mid::after { order: 3; }
  .how__hub { order: 1; } .how__hubname { order: 2; }
}