/* Quorum: slate night, electric blue, Onest with JetBrains Mono. Keys in the dark, signatures as a row of steps. */
:root { --bg: #0a0e16; --s1: #101624; --s2: #172033; --line: rgba(170, 190, 230, .1); --line2: rgba(170, 190, 230, .2); --text: #eef2fa; --muted: rgba(220, 228, 245, .6); --sub: rgba(238, 242, 250, .78); --acc: #5b86ff; --on-acc: #04112e; --up: #3ce3ab; --down: #f23674;
  --head: "Onest", Inter, Arial, sans-serif; --font: "Onest", Inter, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --wrap: 1180px; --g: clamp(16px, 4vw, 40px); --r: 12px; --rb: 10px;
  --h1w: 600; --h1ls: -.04em; --h2w: 600; --h2ls: -.035em; --h3w: 600; --barbg: rgba(10, 14, 22, .88);
  --hero-pos: 50% 40%; --hero-shade: linear-gradient(90deg, rgba(10, 14, 22, .9) 0%, rgba(10, 14, 22, .55) 50%, rgba(10, 14, 22, .25) 100%), linear-gradient(0deg, var(--bg), transparent 30%) }
.flowq { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 44px; position: relative }
.flowq::before { content: ""; position: absolute; left: 0; right: 25%; top: 9px; height: 2px; background: linear-gradient(90deg, var(--acc), var(--acc)) }
.flowq .step { position: relative; padding-top: 40px; padding-right: 24px } .flowq .step.off { opacity: .5 }
.flowq .dot { position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line2); background: var(--bg) } .flowq .dot.on { border-color: var(--acc); background: var(--acc) } .flowq .dot.acc { border-color: var(--acc); background: var(--bg); box-shadow: 0 0 0 6px rgba(91, 134, 255, .18) }
.flowq .who { display: block; font: 13px var(--mono); color: var(--muted) } .flowq b { display: block; font: 600 24px var(--head); letter-spacing: -.02em; margin-top: 6px } .flowq p { margin-top: 10px; color: var(--muted); font-size: 15px }
@media (max-width: 860px) { .flowq { grid-template-columns: 1fr 1fr; row-gap: 30px } .flowq::before { display: none } }
@media (max-width: 520px) { .flowq { grid-template-columns: 1fr } }