/* SEO "Get recommended by AI" (version B, Evan 2026-10-02): three steps on the left, the live chat on the right.
   Only the playing step opens. Lines run from a dot on the step (or each check) to a dot on the matching part of
   the chat: the message box, "Searching the web", then the Your Business card. js/seo-ai-flow.js drives it from
   the chat's sai:phase events. */
.hb-grid { position: relative; display: grid; grid-template-columns: minmax(0, 460px) minmax(440px, 470px); justify-content: space-between; gap: 64px; align-items: center; }
.hb-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; align-items: end; margin-bottom: 48px; }
.hb-head h2 { margin: 0; }
.hb-lede { margin: 0; font-size: 18px; line-height: 1.55; color: #2b2b2b; }
.hb-steps { position: relative; z-index: 2; list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.hb-steps > li { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; padding: 14px 16px; border-radius: 16px;
  background: #fff; box-shadow: 0 0 0 1px #e5e5ea;   /* each step is its own card */
  transition: background-color .7s cubic-bezier(.65,0,.35,1), box-shadow .7s cubic-bezier(.65,0,.35,1); }
.hb-steps > li.on { background: #f3f3f5; box-shadow: 0 0 0 1.5px #000; }
.hb-n { width: 34px; height: 34px; border-radius: 50%; background: #e6e6e9; color: #6e6e73; display: grid; place-items: center; font-size: 14px;
  transition: background-color .45s, color .45s, transform .5s cubic-bezier(.3,1.5,.5,1); }
.hb-steps > li.on .hb-n, .hb-steps > li.done .hb-n { background: #000; color: #fff; }
.hb-steps > li.on .hb-n { transform: scale(1.08); }
.hb-t { align-self: center; font-size: 19px; font-weight: 500; line-height: 1.3; color: #6e6e73; transition: color .45s; }
.hb-steps > li.on .hb-t, .hb-steps > li.done .hb-t { color: #000; }
.hb-more { grid-column: 2; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .8s cubic-bezier(.65,0,.35,1), opacity .4s; }
.hb-more > div { overflow: hidden; padding: 0 2px; margin: 0 -2px; }   /* room so the check cards' outlines are not clipped */
.hb-steps > li.on .hb-more { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .8s cubic-bezier(.65,0,.35,1), opacity .6s .25s; }
.hb-more p { margin: 6px 0 4px; font-size: 16px; line-height: 1.5; color: #333; }
.hb-cards { display: grid; gap: 6px; margin: 8px 0 4px; }
.hb-c { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff; font-size: 15px; color: #000;
  box-shadow: 0 0 0 1px #e5e5ea; transition: box-shadow .4s; }
.hb-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #c7c7cc; display: grid; place-items: center; color: #fff;
  transition: background-color .35s, border-color .35s, transform .45s cubic-bezier(.3,1.6,.5,1); }
.hb-tick svg { width: 11px; height: 11px; opacity: 0; transition: opacity .3s .1s; }
.hb-c.ok { box-shadow: 0 0 0 1.5px #000; }
.hb-c.ok .hb-tick { background: #000; border-color: #000; transform: scale(1.06); }
.hb-c.ok .hb-tick svg { opacity: 1; }
.hb-note { margin: 0 0 20px; font-size: 13px; color: #6e6e73; }
.hb-out .seo-label { font-size: 14px; color: #484848; margin-bottom: 12px; }
.hb-out .seo-sticky { position: static; }

/* Lines: drawn in with a dash offset, with a dot at each end. */
.hb-wire { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.hb-wire path { fill: none; stroke: #000; stroke-width: 1.5; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1), opacity .5s; }
.hb-wire circle { fill: #000; transition: opacity .5s .2s; }
.hb-wire .hb-off { opacity: 0; }

@media (max-width: 991px) { .hb-head { grid-template-columns: 1fr; gap: 16px; } .hb-grid { grid-template-columns: 1fr; gap: 40px; } .hb-wire { display: none; } }
@media (prefers-reduced-motion: reduce) { .hb-grid *, .hb-wire * { transition: none !important; } }