.stage{background:
   linear-gradient(rgba(14,22,38,.89),rgba(14,22,38,.94)),
   var(--navy-3) url("../img/hero-assessment.webp") center/cover no-repeat fixed;
   color:var(--parchment);min-height:calc(100vh - 74px);display:flex;align-items:center;padding-block:clamp(2.5rem,6vw,5rem)}
.card{max-width:760px;margin-inline:auto;width:100%}
.a-eyebrow{color:var(--brass-2);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}

/* intro */
.intro h1{color:var(--parchment);font-weight:300;font-size:clamp(2.2rem,1.8rem + 3vw,3.6rem);margin-top:1.1rem;max-width:16ch;line-height:1.03}
.intro h1 em{font-style:italic;color:var(--brass-2);font-weight:400}
.intro p{margin-top:1.4rem;max-width:52ch;font-size:1.1rem;color:rgba(244,241,234,.84)}
.intro .facts{margin-top:1.8rem;display:flex;gap:1.6rem;flex-wrap:wrap}
.intro .facts span{font-size:.85rem;color:rgba(244,241,234,.7);display:flex;align-items:center;gap:.5rem}
.intro .facts b{color:var(--brass-2);font-family:var(--display);font-size:1.1rem}
.intro .start{margin-top:2.4rem}

/* progress */
.prog{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;gap:1rem}
.prog .label{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-2);font-weight:600;white-space:nowrap}
.bar{flex:1;height:3px;background:rgba(244,241,234,.14);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brass);width:0;transition:width .4s ease}

/* step */
.step .sys-no{font-family:var(--display);font-size:1rem;color:var(--brass-2);font-variant-numeric:tabular-nums}
.step h2{color:var(--parchment);font-size:clamp(1.6rem,1.3rem + 1.6vw,2.3rem);margin-top:.3rem}
.q{margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--line-navy)}
.q:first-of-type{border-top:0}
.q legend{font-size:1.12rem;color:var(--parchment);max-width:56ch;padding:0;margin-bottom:1rem;font-weight:500}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;max-width:520px}
.scale label{position:relative;cursor:pointer}
.scale input{position:absolute;opacity:0;inset:0}
.scale span{display:block;text-align:center;padding:.7rem .3rem;border:1px solid var(--line-navy);border-radius:3px;font-size:.8rem;color:rgba(244,241,234,.7);transition:all .15s ease;line-height:1.2}
.scale label:hover span{border-color:var(--brass-2);color:#fff}
.scale input:checked + span{background:var(--brass);border-color:var(--brass);color:#fff;font-weight:600}
.scale input:focus-visible + span{outline:2px solid var(--brass-2);outline-offset:2px}
.scale small{display:block;font-size:.64rem;margin-top:.2rem;opacity:.8}
.nav{margin-top:2.4rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.link-btn{background:none;border:0;color:rgba(244,241,234,.7);font-family:var(--sans);font-size:.9rem;cursor:pointer;padding:.6rem 0}
.link-btn:hover{color:#fff}
.link-btn[disabled]{opacity:.35;cursor:not-allowed}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}

/* gate */
.gate h2{color:var(--parchment);font-size:clamp(1.8rem,1.4rem + 2vw,2.7rem);max-width:18ch}
.gate h2 em{font-style:italic;color:var(--brass-2)}
.gate p{margin-top:1rem;max-width:48ch;color:rgba(244,241,234,.82)}
.field{margin-top:1.4rem;display:flex;flex-direction:column;gap:.4rem;max-width:420px}
.field label{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(244,241,234,.7);font-weight:600}
.field input{background:rgba(244,241,234,.06);border:1px solid var(--line-navy);border-radius:3px;padding:.85rem 1rem;color:var(--parchment);font-family:var(--sans);font-size:1rem}
.field input:focus{outline:2px solid var(--brass-2);outline-offset:1px;border-color:var(--brass-2)}
.gate .note{margin-top:1rem;font-size:.78rem;color:rgba(244,241,234,.5);max-width:44ch}

/* results */
.res .overall{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.res .overall .big{font-family:var(--display);font-size:clamp(3rem,2rem + 6vw,5rem);color:var(--brass-2);line-height:1;font-variant-numeric:tabular-nums}
.res .overall .cap{font-size:1rem;color:rgba(244,241,234,.7);max-width:22ch}
.bars{margin-top:2.2rem;display:flex;flex-direction:column;gap:1rem}
.brow{display:grid;grid-template-columns:13rem 1fr 2.6rem;gap:1rem;align-items:center}
.brow .nm{font-size:.95rem;color:var(--parchment)}
.brow .nm em{color:var(--brass-2);font-style:normal;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-top:.15rem}
.brow .track{height:10px;background:rgba(244,241,234,.1);border-radius:6px;overflow:hidden}
.brow .track i{display:block;height:100%;border-radius:6px;background:var(--brass);width:0;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.brow.weak .track i{background:linear-gradient(90deg,#9C5B3C,var(--brass-2))}
.brow .val{font-family:var(--display);font-variant-numeric:tabular-nums;color:var(--parchment);text-align:right}
.reco{margin-top:2.4rem;border:1px solid var(--line-navy);border-radius:5px;padding:1.8rem;background:linear-gradient(180deg,rgba(176,141,76,.10),transparent)}
.reco .k{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-2);font-weight:600}
.reco h3{color:var(--parchment);font-size:1.5rem;margin-top:.6rem}
.reco p{margin-top:.7rem;color:rgba(244,241,234,.82);max-width:56ch}
.reco .actions{margin-top:1.6rem;display:flex;gap:1rem;flex-wrap:wrap}
.res .disc{margin-top:1.8rem;font-size:.76rem;color:rgba(244,241,234,.5);max-width:60ch}
.hidden{display:none !important}
@media(max-width:620px){
  .scale{grid-template-columns:repeat(5,1fr);gap:.3rem}
  .scale span{padding:.55rem .12rem;font-size:.78rem}
  .scale small{font-size:.56rem;line-height:1.15;margin-top:.18rem;opacity:.85}
  .brow{grid-template-columns:1fr 3rem;grid-template-areas:"nm val" "track track";row-gap:.5rem}
  .brow .nm{grid-area:nm}.brow .val{grid-area:val}.brow .track{grid-area:track}
}