.ord{max-width:480px}
.ord label{display:block;font-weight:600;margin-bottom:6px}
.ord input[type=email],.ord input[type=text]{width:100%;box-sizing:border-box;padding:12px 14px;font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:10px}
.ord input:focus-visible,.ord button:focus-visible{outline:3px solid var(--fg);outline-offset:2px}
.ord-consent{display:flex;gap:10px;align-items:flex-start}
.ord-consent input{margin-top:5px;flex:none}
.ord-consent label{font-weight:400;margin:0}
.ord progress{width:100%;height:10px}
.ord-msg{margin-top:12px;min-height:1.4em}
.ord-msg.ord-error{color:var(--fg);border-left:4px solid var(--acc);padding-left:12px}
.ord-msg.ord-ok{background:var(--bg-subtle);border-radius:12px;padding:16px}
.ord-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0;margin:20px 0 24px}
.ord-steps li{max-width:none;min-width:0;border-top:3px solid var(--border);padding-top:8px;font:600 var(--fs-sm) var(--sans);color:var(--mut)}
.ord-steps li.on{border-top-color:var(--acc);color:var(--fg)}
.ord-steps b{color:var(--acc);margin-right:4px}
@media (max-width:480px){.ord-steps li{font-size:var(--fs-sm)}.ord-steps b{display:block;margin:0}}
/* wide screens: the four steps stand beside the form instead of leaving the right half empty */
@media (min-width:900px){
main:has(.ord){display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);column-gap:72px;align-items:start}
main:has(.ord)>*{grid-column:1}
main:has(.ord)>h1,main:has(.ord)>.lead{grid-column:1/-1}
main:has(.ord)>.lead{max-width:40em}
main:has(.ord)>.ord-steps{grid-column:2;grid-row:3/span 4;display:block;margin:0;padding-top:6px}
main:has(.ord)>.ord-steps li{border-top:0;border-left:3px solid var(--border);padding:2px 0 2px 16px;margin:0 0 22px;font-size:var(--fs-body)}
main:has(.ord)>.ord-steps li.on{border-left-color:var(--acc)}
}
.ord-data{max-width:480px;margin-top:20px}
.ord-data summary{cursor:pointer;font-weight:600}
.ord-data summary:focus-visible{outline:3px solid var(--fg);outline-offset:2px}
.ord-data p{font-size:var(--fs-sm);color:var(--mut)}
.ord-key{display:flex;gap:10px;align-items:stretch;margin:16px 0 8px}
.ord-key pre{flex:1;margin:0;border:2px solid var(--acc);word-break:break-all;white-space:pre-wrap;display:flex;align-items:center}
.ord-key .btn{flex:none;display:flex;align-items:center}
.ex-wrap{position:relative;margin:0 0 .6em}.ex-wrap pre{padding-top:52px}
.ex-wrap #ex-copy{position:absolute;top:8px;right:8px;margin:0}
.ex-wrap #ex-copy .btn{width:auto;padding:6px 14px;font-size:var(--fs-sm)}
.ord-key pre{min-width:0;overflow-wrap:anywhere;user-select:all}
@media (max-width:480px){.ord-key{flex-direction:column}.ord-key .btn{width:auto;align-self:flex-start}}
.ord-go[disabled],.btn[aria-disabled=true]{pointer-events:none;background:var(--bg-subtle);border:1px dashed var(--mut);color:var(--mut)}
.btn.p[aria-disabled=true]:hover{filter:none}
.ord-ack{display:flex;gap:10px;align-items:center;font-weight:600;margin:12px 0}
#after .tile img{display:block;width:100%;height:110px;object-fit:cover;border-radius:6px;margin-bottom:10px}
#after[hidden]{display:none}