/* "Same models. Different container." — the one section that argues for Nexa.
   Replaces the old How-it-works trio and the Less-switching ledger. Uses site.css tokens
   throughout, so it follows light and dark like everything else. */

/* ---------- the part that makes the rest believable ---------- */
.wn-fair {
  margin-top: clamp(22px, 3vh, 30px);
  max-width: 68ch;
  font-size: var(--fs-copy); line-height: 1.65;
  color: var(--ink-60);
}
.wn-fair b { color: var(--ink); font-weight: 600; }

/* ---------- one thread, four providers ----------
   The differentiator nobody else has: a thread is not owned by the provider that started it.
   Drawn as a route with stops, because that is what it is - the same conversation continuing
   through a handover. */
.wn-thread { margin-top: clamp(52px, 8vh, 92px); }
.wn-thread-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; }
.wn-thread-head h3 {
  font-size: clamp(24px, 2.6vw, 32px); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.1; color: var(--ink);
}
.wn-thread-head h3 em { color: var(--blue); }
.wn-thread-sub { margin-top: 12px; max-width: 60ch; font-size: var(--fs-copy); line-height: 1.6; color: var(--ink-60); }

.wn-route { position: relative; margin-top: clamp(30px, 4.5vh, 46px); padding-top: 6px; }
/* The line IS the thread: unbroken from the first stop to the last, which is the whole point. */
.wn-route::before {
  content: ""; position: absolute; left: 0; right: 0; top: 25px; height: 2px;
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 35%, transparent));
  border-radius: 2px;
}
.wn-stops { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.wn-stop { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.wn-dot {
  width: 14px; height: 14px; margin-top: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--blue);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--bg) 88%, transparent);
}
.wn-stop-body { display: flex; flex-direction: column; gap: 3px; }
.wn-stop b { font-size: var(--fs-copy); font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.wn-stop span { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-60); max-width: 24ch; }
.wn-stop.is-break .wn-dot { border-color: color-mix(in srgb, var(--ink) 34%, transparent); }
.wn-stop.is-break b { color: var(--ink-60); }

.wn-carry {
  margin-top: clamp(26px, 4vh, 38px);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.wn-carry span {
  padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg) 68%, transparent);
  font-size: var(--fs-lead); color: var(--ink-60);
}
.wn-carry span b { color: var(--ink); font-weight: 600; }

.reveal .wn-stop { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--polish-ease, ease), transform .5s var(--polish-ease, ease); }
.reveal.in .wn-stop { opacity: 1; transform: none; }
.reveal.in .wn-stop:nth-child(1) { transition-delay: .1s }
.reveal.in .wn-stop:nth-child(2) { transition-delay: .25s }
.reveal.in .wn-stop:nth-child(3) { transition-delay: .4s }
.reveal.in .wn-stop:nth-child(4) { transition-delay: .55s }

@media (max-width: 820px) {
  /* Stacked, the route runs down the left edge instead of across the top. */
  .wn-stops { grid-template-columns: 1fr; gap: 22px; padding-left: 26px; }
  .wn-route::before { left: 6px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 35%, transparent)); }
  .wn-dot { position: absolute; left: -26px; margin-top: 2px; }
  .wn-stop { position: relative; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal .wn-stop { opacity: 1; transform: none; transition: none; }
}