/* Pathway checker — the help column beside the questions.

   The checker's first stage lists 20 professions in six groups, which is a
   long scroll before the Continue button. Someone who isn't sure which option
   is theirs had nowhere to look. This column sits alongside and stays put
   while that list scrolls.

   It is help, not decoration: what to pick when unsure, what the checker will
   ask, and who actually decides. Nothing here states a requirement — the
   checker and the guides do that.

   Colours come from destination.css. The checker is destination-neutral until
   the person chooses, so the page takes body.global. */

@media (min-width:1000px){
  .pw-wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(262px,.38fr);
    gap:clamp(24px,3vw,44px);
    align-items:start;
  }
  #ctx-strip{grid-column:1 / -1}
  .pw-help{position:sticky;top:96px}
}

.pw-help{
  background:var(--soft,#EFF5F1);
  border-radius:16px;
  padding:clamp(20px,2.2vw,26px);
  margin-top:28px;
}
@media (min-width:1000px){.pw-help{margin-top:0}}

.pw-help .b{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid rgba(2,97,93,.14)}
.pw-help .b:last-child{padding:0;margin:0;border:0}

.pw-help .ic{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--lime-pale,#E7F5C8);color:#2F5E49;
  font:700 15px/1 var(--display),'Work Sans',sans-serif;
  margin-bottom:11px;
}

.pw-help h3{
  font-family:var(--display),'Work Sans',sans-serif;
  font-size:15.5px;line-height:1.3;color:var(--teal,#02615D);
  margin:0 0 7px;
}
.pw-help p{font-size:13.5px;line-height:1.6;color:var(--muted,#555);margin:0 0 8px}
.pw-help p:last-child{margin-bottom:0}
.pw-help ul{margin:0 0 10px;padding-left:17px}
.pw-help li{font-size:13.5px;line-height:1.55;color:var(--muted,#555);margin-bottom:5px}
.pw-help li:last-child{margin-bottom:0}
.pw-help a{color:var(--teal,#02615D)}

/* On a phone the three blocks read as one short column under the questions,
   not three cards competing with them. */
@media (max-width:620px){
  .pw-help{padding:18px;border-radius:13px}
  .pw-help h3{font-size:15px}
}