.inst{min-height:100vh;padding:48px 0 80px}
.inst-wrap{max-width:720px;display:flex;flex-direction:column;align-items:center;gap:28px}
.inst-logo{color:var(--ink)}
.inst-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;font-size:14px;color:var(--mute-l)}
.inst-steps li{display:flex;align-items:center;gap:8px}
.inst-steps li span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-l2);font-family:var(--f-mono);font-size:12px}
.inst-steps li.is-on{color:var(--ink-2);font-weight:600}
.inst-steps li.is-on span{background:var(--ink-2);border-color:var(--ink-2);color:var(--paper)}
.inst-steps li.is-done span{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.inst-card{width:100%}
.inst-h{font-family:var(--f-display);font-size:30px;font-weight:600;letter-spacing:-.03em}
.inst-sub{margin-top:8px}

.inst-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.inst-checks li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--paper)}
.inst-checks small{color:var(--mute-l)}
.inst-mark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:13px;font-weight:700;flex-shrink:0}
.is-ok .inst-mark{background:var(--acc);color:var(--on-acc)}
.is-bad{outline:1px solid #B3261E}
.is-bad .inst-mark{background:#B3261E;color:#fff}
.is-warn .inst-mark{background:var(--line-l);color:var(--ink-2)}

.inst-form{display:flex;flex-direction:column;gap:16px}
.inst-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.inst-row:has(.inst-short){grid-template-columns:1fr 140px}
.inst-f{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
.inst-f select.co-input{text-transform:none;appearance:auto}
.inst-f input.co-input{text-transform:none}
/* undo the flex-grow from checkout.css, it squashes inputs in stacked labels */
.inst-f .co-input{flex:none}
.inst-demo{margin-top:4px}
.inst-errs{margin:0;padding-left:18px}
.inst-next{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;line-height:1.5}
.inst-next code{font-family:var(--f-mono);font-size:.9em;padding:1px 6px;border-radius:6px;background:var(--paper)}

@media (max-width:640px){.inst-row,.inst-row:has(.inst-short){grid-template-columns:1fr}}