.progression-nav{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px;margin:14px 0}
.progression-step{min-height:62px;border:1px solid #dce6f2;border-radius:14px;padding:10px 12px;background:white;text-align:left;cursor:pointer;position:relative}
.progression-step strong{display:block;font-size:.82rem}.progression-step span{display:block;margin-top:2px;color:#6c7d91;font-size:.69rem}
.progression-step.is-active{color:white;border-color:var(--section-color);background:var(--section-color)}
.progression-step.is-active span{color:rgba(255,255,255,.8)}
.progression-step.is-complete::after{content:"✓";position:absolute;right:9px;top:8px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#e8f7e4;color:#3b842e;font-weight:900}
.progression-step.is-active.is-complete::after{background:white;color:var(--section-color)}
.skip-row{display:flex;align-items:center;gap:10px;margin-top:9px}.skip-row button{border:0;background:transparent;color:#68798d;text-decoration:underline;cursor:pointer;font-weight:650}.skip-row span{color:#8190a1;font-size:.75rem}
.section-intro-meta{margin:15px 0;padding:12px;border-radius:12px;background:#f1f6fb;color:#56697e;font-size:.8rem}
.review-sections{display:grid;gap:11px;padding:22px;max-height:55vh;overflow:auto}
.review-section{border:1px solid #dce6f2;border-left:6px solid var(--section-color);border-radius:14px;padding:14px}
.review-section-top{display:flex;justify-content:space-between;gap:15px}.review-section h3{margin:0}.review-section p{margin:4px 0 0;color:#69798c;font-size:.8rem}
.review-section button{margin-top:10px;border:0;background:transparent;color:#287fc1;font-weight:750;cursor:pointer}
@media(max-width:850px){.progression-nav{grid-template-columns:repeat(5,180px);overflow:auto;padding-bottom:8px}}

/* Stage 9.2: compact section navigation on laptop and desktop. */
@media (min-width: 1101px) {
  .progression-nav {
    gap: 7px;
    margin: 9px 0 11px;
  }
  .progression-step {
    min-height: 44px;
    padding: 6px 9px;
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .progression-step strong {
    font-size: .76rem;
    line-height: 1.08;
    padding-right: 18px;
  }
  .progression-step span {
    margin-top: 1px;
    font-size: .64rem;
    line-height: 1.05;
  }
  .progression-step.is-complete::after {
    right: 6px;
    top: 5px;
    width: 17px;
    height: 17px;
    font-size: .68rem;
  }
}