/* Student guide: a numbered path, because the steps really are a sequence.
   Phone screenshots sit beside the text on wide screens, under it on phones. */

.skip:focus { position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); width: auto; height: auto; clip-path: none; padding: var(--space-3) var(--space-4); background: var(--brand); color: var(--on-brand); border-radius: var(--radius-md); z-index: 60; }
.g-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-block: var(--space-4); }
.g-top img { height: 34px; width: auto; }
main.wrap { max-width: 880px; }

.g-hero { display: grid; gap: var(--space-4); padding-block: var(--space-4) var(--space-7); }
.g-hero h1 { font-size: clamp(var(--step-5), 8vw, 52px); color: var(--brand); }
.g-hero .lede { font-size: var(--step-2); max-width: 46ch; }
.cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.g-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--space-7); }
.g-step {
  counter-increment: step; position: relative; display: grid; gap: var(--space-5); align-items: start;
  padding-inline-start: 56px;
}
.g-step::before {
  content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: -2px;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: var(--on-brand); font: var(--weight-display) var(--step-2)/1 var(--font-display);
}
/* The thread that joins the numbers. */
.g-step:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 19px; inset-block: 46px calc(var(--space-7) * -1 + 6px);
  width: 2px; background: var(--line);
}
.g-copy { display: grid; gap: var(--space-3); justify-items: start; max-width: 60ch; }
.g-copy h2 { font-size: var(--step-4); color: var(--brand); }
.g-tip { font-size: var(--step-0); color: var(--text-muted); padding-inline-start: var(--space-3); border-inline-start: 3px solid var(--accent); }
.g-shot {
  width: min(100%, 260px); height: auto; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--line), 0 14px 30px rgb(0 0 0 / .12);
  background: var(--surface-raised);
}
@media (min-width: 760px) {
  .g-step:has(.g-shot) { grid-template-columns: 1fr 260px; }
}

.g-tabs { display: inline-flex; background: var(--surface); border-radius: var(--radius-pill); padding: 3px; }
.g-tabs button {
  min-height: 40px; min-width: 96px; padding-inline: var(--space-4); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-muted); font-weight: var(--weight-strong); cursor: pointer;
}
.g-tabs button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.g-sub { margin: 0; padding-inline-start: 1.3em; display: grid; gap: var(--space-2); }
.g-sub li::marker { font-weight: var(--weight-strong); color: var(--accent-text); }
.g-key { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--surface); vertical-align: middle; color: var(--text); }
.g-key .ico { width: 18px; height: 18px; }

.g-help { margin-block: var(--space-8) var(--space-6); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); display: grid; gap: var(--space-4); justify-items: start; }
.g-help h2 { font-size: var(--step-4); color: var(--brand); }
.g-help dl { margin: 0; display: grid; gap: var(--space-3); }
.g-help dt { font-weight: var(--weight-strong); }
.g-help dd { margin: 0; color: var(--text-muted); }

.g-foot { display: flex; gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-4) var(--space-7); font-size: var(--step-0); }
.g-foot a { min-height: var(--tap); display: inline-flex; align-items: center; }
.g-done { display: flex; gap: var(--space-2); align-items: center; font-weight: var(--weight-strong); color: var(--success); }