/* Help / install page styles */
.help { gap: 14px; }
.lead {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.lead strong { color: var(--ink); font-weight: 700; }

.platform .cell-inner { padding: 14px 16px 16px 18px; }
.platform-head {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 12px;
}
.pico {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--cyan) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  color: var(--cyan);
}
.pico svg { width: 21px; height: 21px; }
.ptitle { display: flex; flex-direction: column; line-height: 1.15; }
.ptitle b { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: .01em; }
.ptitle span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  color: var(--label); text-transform: uppercase;
}

ol.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
ol.steps li {
  counter-increment: s;
  position: relative;
  padding: 0 0 14px 40px;
  font-size: 14px; line-height: 1.5; color: var(--ink);
}
ol.steps li:last-child { padding-bottom: 0; }
ol.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: #042430; background: var(--cyan);
  border-radius: 8px;
}
/* connector line between step badges */
ol.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 12.5px; top: 27px; bottom: 4px;
  width: 1px; background: var(--panel-brd);
}
ol.steps b { font-weight: 700; }
.ico-inline {
  display: inline-flex; vertical-align: -4px;
  width: 17px; height: 17px; color: var(--cyan);
}
.ico-inline svg { width: 100%; height: 100%; }

.note {
  display: flex; gap: 10px; align-items: flex-start;
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px; line-height: 1.5; color: var(--ink);
}
.note .nico { flex: none; color: var(--amber); margin-top: 1px; }
.note .nico svg { width: 18px; height: 18px; }
.note b { color: var(--ink); }

.backbar { display: flex; justify-content: center; padding-top: 4px; }
.backbig {
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-decoration: none;
  color: var(--cyan);
  border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  padding: 11px 22px; border-radius: 11px;
}
.backbig:active { transform: translateY(1px); }