/* THE RULE — a short flat bar that marks the start of a section.
   Sits under an eyebrow or heading, one per section. */
.hn-rule{display:block;width:56px;height:3px;background:var(--hn-brand);margin-bottom:var(--hn-s4);border:0}
.hn-rule--deep{background:var(--hn-brand-deep)}
.hn-rule--wide{width:112px}
.hn-rule--center{margin-inline:auto}
/* THE ORDER — a numbered sequence for anything with steps (the method, checkout, a protocol). */
.hn-order{list-style:none;padding:0;margin:0;display:grid;gap:var(--hn-s5);max-width:none;counter-reset:hn-step}
@media (width >= 768px){.hn-order{grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--hn-s6)}}
.hn-order__step{position:relative;padding-top:var(--hn-s6);margin:0}
.hn-order__step::before{counter-increment:hn-step;content:counter(hn-step);position:absolute;top:0;left:0;width:32px;height:32px;border-radius:var(--hn-radius-pill);background:var(--hn-brand-bright);color:var(--hn-ink);font-family:var(--font-body);font-weight:var(--hn-weight-bold);font-size:var(--hn-ui);display:grid;place-items:center}
.hn-order__step::after{content:'';position:absolute;top:16px;left:44px;right:calc(-1 * var(--hn-s6));height:1px;background:var(--hn-line)}
.hn-order__step:last-child::after{display:none}
@media (width < 768px){.hn-order__step::after{display:none}}
.hn-order__step h3{margin-bottom:var(--hn-s2)}
.hn-order__step p{margin:0;color:var(--text-body)}