/* #how: three steps on a gradient rail (pattern: about timeline + Validator .vh-how), then levels and the four layers. */
#how .hw-lead{margin-top:16px;max-width:60ch}

/* ---------- Flow ---------- */
#how .hw-flow{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
#how .hw-flow::before,#how .hw-flow::after{content:"";position:absolute;left:23px;right:calc(33.333% - 23px);top:23px;height:2px;border-radius:2px}
#how .hw-flow::before{background:var(--line-soft)}
#how .hw-flow::after{background:var(--grad);transform-origin:0 50%}
.motion #how .hw-flow::after{transition:transform 1.5s var(--ease) .15s}
.motion #how .hw-flow:not(.is-in)::after{transform:scaleX(0)}
#how .hw-s{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.motion #how .hw-s{transition:opacity .5s ease,translate .7s var(--ease);transition-delay:calc(.2s + var(--k) * .26s)}
.motion #how .hw-flow:not(.is-in) .hw-s{opacity:0;translate:0 10px}
#how .hw-ic{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:var(--c-ink);
  background:color-mix(in srgb,var(--c) 14%,#fff);border:1px solid color-mix(in srgb,var(--c) 32%,#fff);box-shadow:0 0 0 6px var(--bg),0 10px 22px -16px color-mix(in srgb,var(--c) 90%,transparent)}
#how .hw-ic svg{width:22px;height:22px}
#how .hw-ic em{position:absolute;right:-7px;top:-7px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--bg);font-style:normal;font-size:12px;font-weight:700;line-height:1;color:#fff;background:var(--ink)}
#how .hw-s h3{margin-top:18px;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.015em}
#how .hw-s p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--body)}
#how .hw-who{margin-top:14px;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px 0 9px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--body);background:#fff;border:1px solid var(--line);white-space:nowrap}
#how .hw-who::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}

/* ---------- One call, step by step (the scene from hero.js; frame styles in hero.css) ---------- */
#how .hw-walk{max-width:1040px;margin:72px auto 0}
#how .hw-walk-eb{justify-content:center}
#how .hw-walk .vh-frame{margin-top:18px}

/* ---------- Layers ---------- */
#how .hw-layers{margin-top:104px}
#how .hw-h{font-size:clamp(24px,1.6vw + 10px,34px)}
#how .hw-val{padding:16px 18px;border-radius:14px;background:#fff;border:1px solid #e6ebf1;font-size:15.5px;line-height:1.6}
#how .hw-val b{color:var(--ink);font-weight:600}
#how .hw-stack{display:flex;flex-direction:column;gap:12px}
#how .hw-l{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 18px;align-items:center;padding:18px 22px;border-radius:16px;background:#fff;border:1px solid #e6ebf1;box-shadow:var(--sh)}
#how .hw-l:not(:last-child)::after{content:"";position:absolute;left:69px;bottom:-13px;width:2px;height:14px;background:repeating-linear-gradient(180deg,#c9d2dd 0 3px,transparent 3px 6px)}
#how .hw-l b{display:block;font-size:16.5px;font-weight:600;line-height:1.35;letter-spacing:-.015em}
#how .hw-l p{margin-top:3px;font-size:14px;line-height:1.55;color:var(--body)}
#how .hw-tag{justify-self:start;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
#how .is-yours .hw-tag{color:var(--ink);border:1px solid var(--ink)}
#how .is-buy{background:var(--soft);box-shadow:none}
#how .is-buy .hw-tag{color:var(--muted);border:1px dashed #c5cdd8;background:#fff}
#how .is-ours{padding:22px 22px 20px;border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;
  box-shadow:0 2px 4px rgba(12,21,41,.05),0 30px 60px -32px rgba(82,168,212,.6),0 24px 50px -34px rgba(231,76,101,.5)}
#how .is-ours .hw-tag{color:#fff;background:var(--ink)}
#how .is-ours .hw-tag img{width:16px;height:16px;padding:1px;border-radius:50%;background:#fff}
#how .hw-chips{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
#how .hw-chips li{height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;font-size:12.5px;color:var(--body);background:var(--soft);border:1px solid var(--line-soft)}
.motion #how .hw-l{transition:opacity .55s ease,translate .7s var(--ease),box-shadow .8s ease;transition-delay:calc(.15s + var(--k) * .14s)}
.motion #how .hw-stack:not(.is-in) .hw-l{opacity:0;translate:0 14px}
.motion #how .hw-stack:not(.is-in) .is-ours{box-shadow:var(--sh)}

@media (max-width:1080px){
  #how .hw-flow{grid-template-columns:minmax(0,1fr);gap:22px}
  #how .hw-flow::before,#how .hw-flow::after{left:22px;right:auto;top:23px;bottom:23px;width:2px;height:auto}
  #how .hw-flow::after{background:var(--grad-v);transform-origin:50% 0}
  .motion #how .hw-flow:not(.is-in)::after{transform:scaleY(0)}
  #how .hw-s{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:20px;align-items:start}
  #how .hw-ic{grid-row:1 / span 3}
  #how .hw-s h3{margin-top:2px}
  #how .hw-s p{margin-top:4px;max-width:56ch}
  #how .hw-who{grid-column:2;justify-self:start;margin-top:10px}
}
@media (max-width:640px){
  #how .hw-layers{margin-top:64px}
  #how .hw-l{grid-template-columns:minmax(0,1fr);padding:16px}
  #how .is-ours{padding:18px 16px}
  #how .hw-l:not(:last-child)::after{left:32px}
  #how .hw-chips{grid-column:1}
  #how .hw-s p{font-size:14px}
}