/* "How it works" flow (#how on the portal pages), rendered by how-fx.js.

   One row of steps per workflow: the line fills from step to step with a glowing dot
   at its front, each step lights up as the dot arrives, and "Closes when" appears at
   the end. Phones get the same flow as a vertical list.

   Colours come only from the page tokens (--acc, --grad, --sf, --ln, --tx ...), so it
   follows the light / dark theme.

   Motion is mostly transitions. The two small looping effects (the dot's glow and the
   active step's ring) re-assert their animation with !important: every page carries
   @media (prefers-reduced-motion: reduce) { * { animation:none !important; } }
   and, as with why-fx.css, this section animates for all visitors by request. */

.hiw { --hiw-mg: #6F7FD6; --hiw-teal: #1E8C80; --hiw-amber: #A9631A; font-family: var(--font); color: var(--tx2); }
html[data-theme="dark"] .hiw { --hiw-mg: #9AA6F0; --hiw-teal: #5FD3C4; --hiw-amber: #F0B36A; }
.hiw *, .hiw *::before, .hiw *::after { box-sizing: border-box; }
.hiw button { font-family: inherit; }
.hiw :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.hiw-ic { display: inline-block; flex: none; width: 16px; height: 16px; background: currentColor; }

/* tabs + pause */
.hiw-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.hiw-tabs { position: relative; display: inline-grid; grid-template-columns: repeat(4, auto); gap: 4px; padding: 4px; border: 1px solid var(--ln); border-radius: 14px; background: var(--sf2); }
.hiw-pill { position: absolute; z-index: 0; border-radius: 10px; background: var(--grad); box-shadow: 0 8px 22px -8px rgba(142, 34, 73, .6); transition: left .45s var(--ease), top .45s var(--ease), width .45s var(--ease), height .45s var(--ease); }
.hiw-tab { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: var(--tx2); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color .3s var(--ease); }
.hiw-tab:hover { color: var(--tx); }
.hiw-tab[aria-selected="true"] { color: #fff; }
.hiw-play { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px 0 12px; border: 1px solid var(--ln2); border-radius: 100px; background: var(--sf); color: var(--tx); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: border-color .25s var(--ease); }
.hiw-play:hover { border-color: var(--acc); }
.hiw-play .hiw-ic { width: 14px; height: 14px; }

/* the flow card */
.hiw-card { margin-top: 16px; padding: clamp(28px, 4vw, 48px) clamp(18px, 3vw, 40px) 0; border: 1px solid var(--ln); border-radius: 20px; background: linear-gradient(180deg, var(--sf), var(--sf2)); box-shadow: var(--shadowSm); overflow: hidden; }
.hiw-flow { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; transition: opacity .22s var(--ease), transform .22s var(--ease); }
.hiw-card.is-swap .hiw-flow { opacity: 0; transform: translateY(8px); }

.hiw-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; min-width: 0; }

/* connector to the next step: grey track, gradient fill, glowing dot at the front */
.hiw-link { position: absolute; top: 31px; left: calc(50% + 40px); width: calc(100% - 64px); height: 3px; border-radius: 3px; background: var(--ln2); }
.hiw-link i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--grad); transition: width 1.1s var(--ease); }
.hiw-link i::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #F2CE4A; box-shadow: 0 0 12px 4px rgba(242, 206, 74, .55); opacity: 0; transition: opacity .3s var(--ease); }
.hiw-step.is-done .hiw-link i { width: 100%; }
.hiw-step.is-done .hiw-link i::after { opacity: 1; animation: hiw-fade 1.1s var(--ease) forwards !important; }

/* step circle */
.hiw-node { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ln2); background: var(--sf); color: var(--tx3); transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
.hiw-node .hiw-ic { width: 24px; height: 24px; }
.hiw-step.is-done .hiw-node { border-color: var(--accLn); background: var(--accSoft); color: var(--acc); }
/* active step: plain inside, gradient ring as the border (padding-box fill over a border-box gradient) */
.hiw-step.is-on .hiw-node { border: 2px solid transparent; background: linear-gradient(var(--sf), var(--sf)) padding-box, var(--grad) border-box; color: var(--acc); transform: scale(1.1); box-shadow: 0 10px 28px -8px rgba(200, 82, 82, .45); }
.hiw-step.is-on .hiw-node::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: rgba(200, 82, 82, .35); animation: hiw-ring 1.5s ease-out infinite !important; }

/* step text */
.hiw-txt { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; opacity: .45; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.hiw-step.is-on .hiw-txt, .hiw-step.is-done .hiw-txt { opacity: 1; transform: none; }
.hiw-n { font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); }
.hiw-txt b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: var(--tx); }
.hiw-who { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 100px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.hiw-who .hiw-ic { width: 12px; height: 12px; }
.hiw-who.t-acc { color: var(--acc); background: var(--accSoft); box-shadow: inset 0 0 0 1px var(--accLn); }
.hiw-who.t-mg, .hiw-who.t-teal, .hiw-who.t-amber { color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.hiw-who.t-mg { --c: var(--hiw-mg); }
.hiw-who.t-teal { --c: var(--hiw-teal); }
.hiw-who.t-amber { --c: var(--hiw-amber); }
.hiw-who.t-sys { color: #fff; background: var(--grad); }

/* "Closes when" strip */
.hiw-close { margin: clamp(26px, 3.5vw, 40px) calc(-1 * clamp(18px, 3vw, 40px)) 0; padding: 16px clamp(18px, 3vw, 40px); display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--ln); background: var(--sf2); font-size: 14.5px; line-height: 1.5; }
.hiw-close b { font-weight: 600; color: var(--tx); }
.hiw-tick { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ln2); background: var(--sf); color: var(--tx3); transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.hiw-tick .hiw-ic { width: 14px; height: 14px; }
.hiw-card.is-closed .hiw-tick { border: 2px solid transparent; background: linear-gradient(var(--sf), var(--sf)) padding-box, var(--grad) border-box; color: var(--acc); transform: scale(1.12); }
.hiw-card.is-closed .hiw-close b { color: var(--acc); }

@keyframes hiw-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
@keyframes hiw-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* tablets: tighter row */
@media (max-width: 899px) {
  .hiw-node { width: 54px; height: 54px; }
  .hiw-node .hiw-ic { width: 21px; height: 21px; }
  .hiw-link { top: 26px; left: calc(50% + 34px); width: calc(100% - 52px); }
  .hiw-txt b { font-size: 14.5px; }
}
/* phones: vertical list, line runs down the left */
@media (max-width: 639px) {
  .hiw-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .hiw-tab { padding: 0 10px; font-size: 13.5px; }
  .hiw-flow { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hiw-step { flex-direction: row; align-items: center; text-align: left; gap: 16px; }
  .hiw-txt { align-items: flex-start; }
  .hiw-link { top: 62px; left: 26px; width: 3px; height: calc(100% - 46px); }
  .hiw-link i { width: 100%; height: 0; right: 0; bottom: auto; transition: height 1.1s var(--ease); }
  .hiw-step.is-done .hiw-link i { width: 100%; height: 100%; }
  .hiw-link i::after { right: auto; top: auto; bottom: -6px; left: 50%; margin: 0 0 0 -6px; }
}