/* 08 · Onboarding */
#onboarding{
.ob-top{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:30px;align-items:start}
.ob-tpl{padding:16px 16px 14px;margin-top:50px}
.ob-tpl .tpl-h{font-size:15px;color:var(--grey);line-height:1.4}.ob-tpl .tpl-h b{color:var(--ink)}
.trl{position:relative;display:grid;grid-template-columns:1.65fr 1fr 1fr .7fr;gap:8px;margin:12px 0 14px;text-align:center;font-size:13.5px;line-height:1.3}
.trl::before{content:"";position:absolute;left:12%;right:9%;top:8px;height:3px;background:var(--azure)}
.trl li{position:relative;padding-top:26px;display:flex;flex-direction:column}
.trl li::before{content:"";position:absolute;left:50%;top:0;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--flap);border:3px solid #fff;box-shadow:0 0 0 1px #CFE9D9;box-sizing:border-box}
.trl li.s::before{background:var(--azure);box-shadow:0 0 0 1px #C9DEF5}
.ob-tpl .who{font-size:13.5px;color:var(--grey);border-top:1px solid var(--line);padding-top:9px}
.ob-mid{display:grid;grid-template-columns:minmax(0,600fr) minmax(0,690fr);gap:54px;margin-top:44px;align-items:start}
.ob-low .lede{margin-top:0;font-size:20px}
.chase{margin-top:26px;display:flex;flex-direction:column;gap:9px}
.chase .card{padding:11px 16px;font-size:15px;line-height:1.42}
.nw{white-space:nowrap}
.rail{position:relative;padding-top:4px;margin-bottom:42px}
.rl{position:absolute;left:0;right:0;top:0;height:8px;background:var(--azure);border-radius:4px}
.rl::before,.rl::after{content:"";position:absolute;top:-9px;width:12px;height:26px;background:var(--ink);border-radius:2px}
.rl::before{left:-4px}.rl::after{right:-4px}
.bdgs{display:flex;justify-content:space-between;padding:0 20px;gap:10px}
/* badges share the rail: they narrow to fit between its brackets, never past them */
.rail.three .bdgs{justify-content:center;gap:10px}
.bdg{position:relative;flex:0 1 146px;min-width:0;height:92px;margin-top:38px;background:#fff;border-radius:10px;box-shadow:var(--shadow);text-align:center;padding-top:22px}
.bdg .hang{position:absolute;left:50%;top:-42px;width:30px;height:42px;margin-left:-15px}
.bdg .hang::before{content:"";position:absolute;left:9px;top:0;width:12px;height:12px;border-radius:50%;background:var(--ink)}
.bdg .hang::after{content:"";position:absolute;left:4px;top:10px;width:22px;height:32px;border-left:3px solid var(--ink);border-right:3px solid var(--ink);clip-path:polygon(0 0,100% 0,82% 100%,18% 100%);box-sizing:border-box;transform:scaleX(-1)}
.bdg .slot{position:absolute;left:50%;top:7px;width:26px;height:6px;margin-left:-13px;border-radius:3px;background:#DFE6EE}
.bdg .nm{font-weight:750;font-size:15.5px;letter-spacing:-.01em;padding:0 4px}
.bdg .ds{display:flex;gap:9px;justify-content:center;margin-top:12px}
.bdg .ds i{width:13px;height:13px;border-radius:50%;background:var(--green-ink)}
.bub{position:absolute;right:-12px;top:-12px;width:32px;height:24px;background:var(--pink);border-radius:7px;color:#fff;font-weight:900;font-size:15px;line-height:16px;text-align:center}
.bub::before{content:"···";letter-spacing:1px}
.bub::after{content:"";position:absolute;left:6px;bottom:-6px;border:4px solid transparent;border-top:5px solid var(--pink);border-left:5px solid var(--pink)}
.wall-s{display:none}
.ob-key{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:14px;color:var(--grey);margin-top:-12px}
.ob-key i{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--green-ink);margin-right:6px;vertical-align:-1px}
.ob-pill{display:block;width:fit-content;margin:44px auto 0;font-weight:650}
.ob-pill .dl{justify-content:center}
/* once the pill can wrap, its phrases start at the left so a wrapped line never opens on "·" */
@media (max-width:999px){.ob-pill{text-align:left}.ob-pill .dl{justify-content:flex-start}}
@media (max-width:1439px) and (min-width:1180px){.ob-mid{gap:32px;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.bdgs{padding:0 12px}.bdg .nm{font-size:13.5px}}
@media (max-width:1359px){.ob-top{grid-template-columns:minmax(0,1fr);gap:24px}.ob-tpl{margin-top:0;max-width:560px}}
@media (max-width:1179px){
  .ob-top,.ob-mid{grid-template-columns:minmax(0,1fr);gap:24px}
  .ob-tpl{margin-top:0;max-width:560px}
  .ob-mid{margin-top:28px}
  .ob-low .lede{font-size:17px}
  .wall-l{max-width:680px}
}
@media (max-width:699px){
  .wall-l{display:none}.wall-s{display:block;max-width:400px}
  .bdgs{justify-content:space-around;padding:0 6px}
  .bdg{flex:0 1 160px}
  .trl{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .trl::before{display:none}
  .ob-pill{margin-top:28px}
}
}