/* procedure.css - procedure.html. Selectors prefixed pr- (no clashes with Bootstrap / style.css). */
.pr{--pr-bg:#f4f6f9;--pr-surface:#fff;--pr-ink:#142033;--pr-muted:#5b687c;--pr-line:#dde3ec;--pr-accent:#c2412d;--pr-good:#2f7d46;--pr-good-bg:#e8f3ec;--pr-soft:#e8eef6;background:var(--pr-bg);color:var(--pr-ink);font-size:16px;line-height:1.7}
.pr *{box-sizing:border-box}
.pr h1,.pr h2,.pr p,.pr ol{margin:0}
.pr a{color:inherit}
.pr :focus-visible{outline:3px solid var(--pr-accent);outline-offset:2px}
.pr-wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.pr-hero{background:#fff;border-bottom:1px solid var(--pr-line);padding:56px 0 44px;text-align:center}
.pr-hero h1{font-size:clamp(30px,5vw,44px);line-height:1.3;margin-bottom:8px}
.pr-hero p{color:var(--pr-muted);max-width:36em;margin:0 auto}
.pr-sec{padding:56px 0}
.pr-alt{background:var(--pr-surface);border-block:1px solid var(--pr-line)}
.pr-head{margin-bottom:28px}
.pr-head h2{font-size:clamp(22px,3.2vw,30px);line-height:1.3}
.pr-head p{color:var(--pr-muted);margin-top:6px}

/* steps */
.pr-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:prs}
.pr-steps li{position:relative;background:var(--pr-surface);border:1px solid var(--pr-line);border-radius:12px;padding:20px 18px 18px;counter-increment:prs}
.pr-steps li::before{content:counter(prs);display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--pr-ink);color:#fff;font-weight:700;margin-bottom:10px}
.pr-steps li b{display:block;font-size:17px;line-height:1.4}
.pr-steps li span{display:block;font-size:13px;color:var(--pr-muted);margin-top:4px}
.pr-steps li.me::after{content:"我们负责";position:absolute;top:16px;right:16px;font-size:12px;font-weight:500;background:var(--pr-soft);color:var(--pr-ink);border-radius:999px;padding:0 10px}
.pr-steps li.final{background:var(--pr-good-bg);border-color:#b9dcc5}
.pr-steps li.final::before{background:var(--pr-good)}
@media(max-width:900px){.pr-steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pr-steps{grid-template-columns:1fr}}

/* timeline */
.pr-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.pr-tab{font:500 15px inherit;font-family:inherit;padding:8px 18px 8px 12px;border-radius:999px;border:1px solid var(--pr-line);background:var(--pr-bg);color:var(--pr-ink);cursor:pointer;display:flex;gap:8px;align-items:center;min-height:44px}
.pr-tab img{width:30px;height:20px;object-fit:cover;border-radius:2px}
.pr-tab[aria-selected="true"]{background:var(--pr-ink);color:#fff;border-color:var(--pr-ink)}
.pr-panel[hidden]{display:none}
.pr-meta{display:inline-flex;align-items:baseline;gap:10px;background:var(--pr-bg);border:1px solid var(--pr-line);border-radius:10px;padding:10px 18px;margin-bottom:26px}
.pr-meta b{font-size:24px;color:var(--pr-accent)}
.pr-tl{list-style:none;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:relative}
.pr-tl::before{content:"";position:absolute;left:8%;right:8%;top:15px;height:3px;background:var(--pr-line)}
.pr-tl li{position:relative;text-align:center;padding:0 6px}
.pr-tl li::before{content:"";display:block;width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--pr-ink);margin:8px auto 14px;position:relative}
.pr-tl li.done::before{background:var(--pr-good);border-color:var(--pr-good);width:20px;height:20px;margin-top:6px;margin-bottom:12px}
.pr-tl b{display:block;font-size:16px}
.pr-tl span{display:block;font-size:13px;color:var(--pr-muted);font-variant-numeric:tabular-nums}
.pr-tl li.done b{color:var(--pr-good)}
@media(max-width:760px){
  .pr-tl{grid-auto-flow:row;gap:0}
  .pr-tl::before{left:11px;right:auto;top:10px;bottom:10px;width:3px;height:auto}
  .pr-tl li{text-align:left;padding:0 0 18px 40px}
  .pr-tl li::before{position:absolute;left:3px;top:4px;margin:0}
  .pr-tl li.done::before{left:1px;top:2px;margin:0}
}
.pr-note{margin-top:20px;font-size:13px;color:var(--pr-muted)}

/* official links */
.pr-links{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pr-links a{display:flex;align-items:center;gap:12px;background:var(--pr-surface);border:1px solid var(--pr-line);border-radius:10px;padding:14px 16px;text-decoration:none!important}
.pr-links a:hover{border-color:var(--pr-ink)}
.pr-links img{width:36px;height:24px;object-fit:cover;border-radius:3px;flex:0 0 auto}
.pr-links b{font-size:16px}
.pr-links span{display:block;font-size:12px;color:var(--pr-muted);overflow-wrap:anywhere}
@media(max-width:700px){.pr-links{grid-template-columns:1fr}}
.pr-cta{background:var(--pr-ink);color:#eef2f8;text-align:center;padding:52px 20px}
.pr-cta h2{font-size:clamp(24px,3.4vw,32px)}
.pr-cta p{color:#b8c4d6;margin:6px 0 18px}
.pr-btn{display:inline-block;background:var(--pr-accent);color:#fff!important;text-decoration:none!important;font-weight:500;padding:10px 24px;border-radius:6px}