/* ═══════════════════════════════════════════════════════════════
   LUNAR INSPECTIONS — HOW IT WORKS LAYER
   Extends site-core.css. Page-only: compact process hero, does/
   does-not modifier for .std-list, and the Spectora explainer box.
   ═══════════════════════════════════════════════════════════════ */

.hero-book .hiw-phases { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; }
.hero-book .hiw-phases span { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-secondary); }
.hero-book .hiw-phases i { color: var(--accent-cyan); }

/* "Does not" modifier — same row shape as .std-list, muted icon instead
   of the accent check, so the two lists read as a clear pair. */
.std-list.dont li i { color: var(--text-muted); }

/* Spectora / client-portal explainer — same visual language as the
   informational notice on the scheduling page (not an error/warning). */
.portal-note {
  display: flex; align-items: flex-start; gap: 14px;
  max-width: 880px; margin: 0 auto;
  padding: 18px 22px; border-radius: var(--radius-md);
  background: rgba(66,133,244,0.09);
  border: 1px solid rgba(66,133,244,0.28);
}
.portal-note i { flex: none; margin-top: 3px; font-size: 17px; color: var(--accent-light); }
.portal-note p { margin: 0; font-size: 15px; color: var(--text-secondary); line-height: 1.65; }
.portal-note p + p { margin-top: 10px; }