main{padding-top:36px;padding-bottom:56px}
.leadline{font-size:16px;line-height:1.7;word-break:keep-all;margin-bottom:8px}
section.blk{padding-top:34px;scroll-margin-top:16px}

.stepcards{list-style:none;display:flex;flex-wrap:wrap;gap:24px 30px;margin-top:16px}
.stepcards li{
  position:relative;flex:1 1 170px;min-width:158px;
  background:var(--bg-soft);border-top:3px solid var(--brand);padding:18px 16px 20px
}
.stepcards li+li::before{
  content:"→";position:absolute;left:-23px;top:50%;transform:translateY(-50%);
  color:var(--brand);font-size:17px;line-height:1
}
.stepcards .no{display:block;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--brand)}
.stepcards svg{margin:8px 0 10px;color:var(--brand)}
.stepcards strong{display:block;font-size:16px;font-weight:700;color:var(--text)}
.stepcards span.t{display:block;font-size:13.5px;color:var(--text-body-alt);margin-top:5px;word-break:keep-all}
.stepcards li.last{background:var(--brand);border-top-color:var(--brand-active)}
.stepcards li.last .no,.stepcards li.last svg,.stepcards li.last strong,.stepcards li.last span.t{color:var(--on-brand)}
.tblnote{font-size:13.5px;color:var(--text-muted);margin-top:10px}

.wizard{max-width:720px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--brand)}
.progress{display:flex;align-items:center;gap:0;padding:14px 24px;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.progress span{flex:1;height:4px;background:var(--line)}
.progress span+span{margin-left:6px}
.progress span.on{background:var(--brand)}
.progress::after{content:attr(data-step);font-family:var(--mono);font-size:12px;font-weight:700;color:var(--brand);margin-left:14px;white-space:nowrap}
.qcard{padding:26px 24px 22px}
.qcard h3{font-size:19px;font-weight:700;color:var(--text);letter-spacing:normal;margin-bottom:4px}
.qcard .hint{font-size:14px;color:var(--text-muted);margin-bottom:18px}
.opts{display:grid;gap:10px}
.opts button{
  position:relative;text-align:left;background:var(--bg);
  border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:0;padding:14px 44px 14px 16px;min-height:44px;font:inherit;font-size:15px;cursor:pointer;
  transition:background-color 120ms linear,border-color 120ms linear
}
.opts button::after{
  content:"→";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-weight:700;color:var(--line);transition:color 120ms linear
}
.opts button:hover{background:var(--bg-soft);border-color:var(--brand);border-left-color:var(--brand)}
.opts button:hover::after{color:var(--brand)}
.opts button strong{display:block;color:var(--text);font-weight:700}
.opts button span{font-size:13px;color:var(--text-muted)}
.wnav{display:flex;justify-content:space-between;gap:10px;margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.wnav button{background:none;border:0;color:var(--text-muted);font:inherit;font-size:14px;cursor:pointer;min-height:44px;padding:8px 10px}
.wnav button:hover{color:var(--brand)}
.wnav button::before{content:"↺ ";font-size:13px}
.result .rtag{display:inline-block;font-size:12px;font-weight:700;color:var(--brand);border:1px solid var(--brand);padding:1px 8px;margin-bottom:14px}
.result .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

@media (max-width:1000px){
  .stepcards{gap:14px}
  .stepcards li{flex:1 1 100%}
  .stepcards li+li::before{content:none}
  .qcard{padding:20px}
}