/* Shared step/wizard UI (apps/site/ui/steps.js). One heading style on every step, and one button row:
   right-aligned, primary rightmost, Back directly to its left. Under 600px the row stacks: Back above, primary last. */
.step-title{margin:0 0 8px;font:500 28px/1.15 var(--disp);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.step-title:focus,.step-title:focus-visible{outline:none}
.steps-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:8px}
.steps-actions .form-error{margin:0 auto 0 0;flex:1 1 200px;min-width:0}
.steps-actions .form-error:empty{flex:0 0 0}
.steps-back{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border:0;border-radius:10px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--control,var(--line2));font:500 15px var(--sans);cursor:pointer}
.steps-back:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.steps-back:focus-visible,.steps-primary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.steps-primary{justify-content:center}
.steps-primary[disabled]{opacity:.6;cursor:progress}
@media (max-width:600px){
  .step-title{font-size:24px}
  .steps-actions{flex-direction:column;align-items:stretch}
  .steps-actions .form-error{order:-1;flex:none;margin:0}
  .steps-actions .form-error:empty{display:none}
  .steps-back,.steps-primary{width:100%}
}