.hg {
  --help-surface: var(--bs-body-bg);
  --help-border: #dbe3dd;
  --help-border-strong: #c8d5cb;
  --help-ink: #202622;
  --help-muted: #667069;
  --help-green: #315f43;
  --help-green-soft: #f1f6f2;
  --help-green-border: #c8d8cb;
  --help-shadow: 0 .18rem .65rem rgba(28, 52, 36, .045);
  --help-heading-light: "Gill Sans Light", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  --help-heading-semibold: "Gill Sans SemiBold", "Gill Sans Semibold", "Gill Sans Semi Bold", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  max-width: 860px;
  margin: 0 auto;
  color: var(--help-ink);
}

.hg .serif {
  font-family: var(--help-heading-semibold);
  font-weight: 600;
}

.hg .eyebrow {
  margin-bottom: .5rem;
  color: var(--help-green);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hg h1.serif {
  font-family: var(--help-heading-light);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.hg h2,
.hg h3 {
  font-family: var(--help-heading-semibold);
  font-weight: 600;
}

.hg h2 {
  margin: 2.6rem 0 .9rem;
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
}

/* Deep links land on a heading with enough earlier context left visible to
   make the destination clear. */
.hg h1,
.hg h2,
.hg h3,
.hg h4,
.hg [id] {
  scroll-margin-top: 6rem;
}

.hg .lede {
  max-width: 36em;
  color: var(--help-muted);
  font-size: 1.08rem;
}

.hg p,
.hg li {
  max-width: 44em;
}

.hg ol.steps {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.hg ol.steps > li {
  position: relative;
  margin-bottom: .9rem;
  padding-left: 2.6rem;
  counter-increment: step;
}

.hg ol.steps > li::before {
  position: absolute;
  top: -.1rem;
  left: 0;
  display: flex;
  width: 1.8rem;
  height: 1.8rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--help-green);
  color: #fff;
  content: counter(step);
  font-size: .85rem;
  font-weight: 700;
}

.hg .checks {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.hg .checks li {
  position: relative;
  margin-bottom: .5rem;
  padding-left: 1.6rem;
}

.hg .checks li::before {
  position: absolute;
  left: 0;
  color: var(--help-green);
  content: "\2713";
  font-weight: 700;
}

.hg .ui {
  padding: .05em .4em;
  border: 1px solid var(--help-border-strong);
  border-radius: .38rem;
  background: var(--help-surface);
  font-size: .92em;
  white-space: nowrap;
}

.hg .tip,
.hg .warn {
  max-width: 44em;
  margin: 1.1rem 0;
  padding: .8rem 1rem;
  border: 1px solid var(--help-green-border);
  border-left: 4px solid var(--help-green);
  border-radius: 0 .5rem .5rem 0;
  background: var(--help-green-soft);
}

.hg .warn {
  border-color: var(--bs-warning-border-subtle);
  border-left-color: #b98900;
  background: var(--bs-warning-bg-subtle);
}

.hg .tip > strong:first-child {
  color: var(--help-green);
}

.hg .warn > strong:first-child {
  color: var(--bs-warning-text-emphasis);
}

.hg .shot-frame {
  margin: 1.4rem 0;
  overflow: hidden;
  border: 1px solid var(--help-border);
  border-radius: .52rem;
  background: var(--help-surface);
  box-shadow: var(--help-shadow);
}

.hg .shot-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.hg.illustrated,
.hg.wide {
  max-width: 980px;
}

.hg .step-figure {
  margin: 1.2rem 0 1.8rem;
}

.hg .step-figure .shot-frame {
  margin: 0 0 .4rem;
}

.hg .device-toggle {
  display: inline-flex;
  gap: 0;
  margin: 1rem 0 .4rem;
  overflow: hidden;
  border: 1px solid var(--help-border-strong);
  border-radius: 999px;
}

.hg .device-toggle button {
  padding: .35rem 1rem;
  border: 0;
  background: var(--help-surface);
  color: var(--help-ink);
  cursor: pointer;
  font-size: .9rem;
}

.hg .device-toggle button + button {
  border-left: 1px solid var(--help-border-strong);
}

.hg .device-toggle button.active {
  background: var(--help-green);
  color: #fff;
}

.hg.show-desktop .shot-phone,
.hg.show-phone .shot-desktop {
  display: none;
}

.hg .guide-nav {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--help-border);
}

.hg .guide-nav a {
  text-decoration: none;
}

.hg .guide-nav .card-lite {
  height: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--help-border);
  border-radius: .52rem;
  background: var(--help-surface);
  box-shadow: var(--help-shadow);
  color: var(--help-ink);
}

.hg .guide-nav .card-lite:hover {
  border-color: var(--bs-link-color);
}

[data-bs-theme="dark"] .hg {
  --help-surface: var(--bs-body-bg);
  --help-border: #3b4740;
  --help-border-strong: #4a5a50;
  --help-ink: var(--bs-body-color);
  --help-muted: #aeb8b1;
  --help-green: #8fbfa0;
  --help-green-soft: #203028;
  --help-green-border: #405848;
  --help-shadow: 0 .2rem .8rem rgba(0, 0, 0, .18);
}

[data-bs-theme="dark"] .hg .device-toggle button.active {
  color: #142019;
}

/* A .ui chip names a real control, so it is nowrap on purpose: "Email me a
   daily summary of completed work" should not break mid-label. On a phone
   that same rule is what pushes the page sideways — the label is 42
   characters, and a wider default sans (any Linux box without Segoe UI)
   renders it past 390px, so the document scrolls horizontally. Let the chips
   wrap at phone width instead. Same trade the compliance pages already make
   for their bordered pills: a wrapped chip splits its border across two
   lines, which beats a page that slides under the thumb. */
@media (max-width: 575.98px) {
  .hg .ui { white-space: normal; }
}

@media (forced-colors: active) {
  .hg .shot-frame,
  .hg .guide-nav .card-lite,
  .hg .tip,
  .hg .warn {
    border-color: CanvasText;
  }
}