/* ---------- Home: stage, record, teaching ---------- */
.stagecard{background:var(--green);border-color:var(--green);padding:20px 22px 22px}
.stagecard h2{color:#fff;font-size:30px;line-height:1.1;margin:0}

.beltrow{display:flex;gap:4px;margin-bottom:20px;flex-wrap:wrap}
.beltpip{flex:1 1 70px;min-width:70px}
.pipdot{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
.beltpip.past .pipdot{background:var(--gold-300)}
.beltpip.now .pipdot{background:var(--gold)}
.pipname{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#6F837A;margin-top:7px}
.beltpip.past .pipname{color:#9AACA3}
.beltpip.now .pipname{color:var(--gold-300);font-weight:600}

.stagehead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.beltname{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-300);font-weight:600}
.stageline{font-size:15px;color:#C6D2CC;margin:9px 0 0;max-width:62ch}

.progwrap{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.progbar{flex:1 1 200px;height:7px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.progbar span{display:block;height:100%;background:var(--gold);border-radius:4px;transition:width .4s ease}
.progtext{font-size:13px;color:#9AACA3;font-variant-numeric:tabular-nums}

.stageends{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
  font-size:14px;color:#D6DEDA;max-width:70ch}
.stageends span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#7C8F86;margin-bottom:5px}

.next{margin-top:16px}
.nextstep{font-size:13px;color:var(--ink-3);margin:4px 0 0}
.nextwhat{margin:9px 0 14px;max-width:62ch}

.waitgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.waititem{margin-top:9px;padding:9px 11px;border-radius:8px;font-size:13.5px}
.waititem b{display:block;font-weight:500;color:var(--ink)}
.waititem span{display:block;font-size:12.5px;margin-top:3px}
.waititem.back{background:#FBEFED}
.waititem.back span{color:#7A3B32}
.waititem.gus{background:var(--green-50)}
.waititem.gus span{color:var(--ink-3)}

.backlist{margin-top:12px}
.backrow{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:baseline;
  padding:9px 0;border-top:1px solid var(--line-2)}
.backwhen{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.backwhat{font-size:14px;color:var(--ink-2)}

.watchrow{display:flex;align-items:center;gap:14px;margin-top:12px}
.watchtitle{font-weight:500;font-size:15px}
@media(max-width:700px){ .waitgrid{grid-template-columns:1fr;gap:18px} .stagecard h2{font-size:25px} }
.stagecard .btn.ghost,.next .btn.ghost{color:#fff;border-color:rgba(255,255,255,.32);background:transparent}
.stagecard .btn.ghost:hover,.next .btn.ghost:hover{border-color:var(--gold-300);color:var(--gold-300)}