/* ─── /how-it-works ──────────────────────────────────────────────
   The page is built entirely from page-builder blocks (styling lives in
   page-blocks.css). This file only adds the guide-specific touches used
   inside block bodies. head.ejs loads /css/<page>.css unconditionally,
   so this file must exist even if it stays thin. */

/* Tip callout — authored inside block body HTML as:
   <p class="hiw-tip">…</p> */
.hiw-tip {
  margin: var(--space-md) 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--text-secondary);
  font-size: 0.95em;
}
.hiw-tip strong { color: var(--text-primary); }

/* Numbered mini-steps list inside guide bodies:
   <ol class="hiw-steps"><li>…</li></ol> */
.hiw-steps { counter-reset: hiw; list-style: none; padding-left: 0 !important; }
.hiw-steps li {
  counter-increment: hiw;
  position: relative;
  padding-left: 42px;
  margin-bottom: var(--space-sm);
}
.hiw-steps li::before {
  content: counter(hiw);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--primary-light);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
}