/* =============================================================================
   ai-receptionist.css — shared scoped CSS for the /ai-receptionist/* cluster
   (template-native.php, page-body/ai-receptionist/*.php)

   Loaded on the hub AND every child page, so anything used by more than one
   page in the cluster belongs here rather than in a per-page file.

   Everything is scoped to .premium-main + an .air-* helper, tokens only. The
   pages themselves are built almost entirely from shared .ns-* components;
   these rules cover only the few layouts the design system has no canonical
   class for (centered typographic hero, hero chat mockup, question grid,
   freshness stamp, linked cluster card).
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Hero — re-center the typographic hero (.premium-main left-aligns .ns-hero)
   --------------------------------------------------------------------------- */
.premium-main .air-hero{ text-align:center; }
.premium-main .air-hero .ns-hero__actions{ display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; margin-top:var(--space-6); }
.premium-main .air-hero .ns-eyebrow{ justify-content:center; }

/* Hero assurance row */
.air-assure{ list-style:none; margin:var(--space-5) 0 0; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; gap:var(--space-3) var(--space-5);
  font-family:var(--font-mono); font-size:var(--fs-caption,12px); color:var(--ink-60); }
.air-assure li{ display:inline-flex; align-items:center; gap:var(--space-2); }
.air-check{ color:var(--periwinkle); font-weight:700; }

/* ---------------------------------------------------------------------------
   Hero call mockup — a small framed conversation, no external asset (fast LCP)
   --------------------------------------------------------------------------- */
.premium-main .air-chat{ max-width:560px; margin:var(--space-7) auto 0; background:var(--bg-elev);
  text-align:left; border:1px solid var(--line-2); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.air-chat__bar{ display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--line-2); }
.air-chat__dot{ width:9px; height:9px; border-radius:50%; background:var(--line-3); }
.air-chat__label{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-40); }
.air-chat__body{ padding:var(--space-5); display:grid; gap:var(--space-3); }
.air-msg{ max-width:82%; padding:var(--space-3) var(--space-4); font-size:14px; line-height:var(--lh-normal); }
.air-msg--in{ justify-self:start; background:var(--bg-elev-2); border:1px solid var(--line-2);
  border-radius:var(--r-md) var(--r-md) var(--r-md) 4px; color:var(--ink-80); }
.air-msg--out{ justify-self:end; background:var(--grad-brand); color:#fff;
  border-radius:var(--r-md) var(--r-md) 4px var(--r-md); box-shadow:var(--shadow-md); }

/* ---------------------------------------------------------------------------
   Real-question grids (what callers actually ask) — two columns
   --------------------------------------------------------------------------- */
.premium-main .ns-list--qs{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3) var(--space-6);
  max-width:none; margin-top:var(--space-6); }
.premium-main .ns-list--qs li{ padding-left:1.9em; color:var(--ink); font-weight:500; }
.premium-main .ns-list--qs li::before{ content:"\201C"; color:var(--periwinkle); font-weight:700;
  font-size:1.4em; line-height:1; top:.05em; }
@media (max-width:600px){ .premium-main .ns-list--qs{ grid-template-columns:1fr; } }

/* Compact lists inside cards */
.premium-main .ns-card .ns-list--compact{ margin:var(--space-4) 0 0; gap:var(--space-2); max-width:none; }
.premium-main .ns-list--compact li{ color:var(--ink-60); font-size:14px; }

/* Scope-boundary / caveat note under a section. Must be scoped under
   .premium-main to outrank the theme's own `.premium-main p` rule. */
.premium-main .air-note{ margin-top:var(--space-5); color:var(--ink-60); max-width:74ch; margin-inline:auto; }

/* Visible freshness signal under the quick-answer block (AEO/GEO date lever) */
.premium-main .air-updated{ margin-top:var(--space-5); font-family:var(--font-mono);
  font-size:var(--fs-caption,12px); color:var(--ink-60); letter-spacing:.02em; }

/* ---------------------------------------------------------------------------
   Cluster card — a whole ns-card that links to a sibling page (hub index).
   The design system has a card and a link, but no linked-card variant.
   --------------------------------------------------------------------------- */
.premium-main .air-linkcard{ display:block; text-decoration:none; color:inherit; }
.premium-main .air-linkcard:hover .ns-card__title{ color:var(--periwinkle); }
.premium-main .air-linkcard__more{ display:inline-flex; align-items:center; gap:var(--space-2);
  margin-top:var(--space-4); font-family:var(--font-mono); font-size:12px; color:var(--periwinkle); }

/* Section heads across this cluster are centered, so center the trailing CTAs
   to match (a bare .ns-btnrow defaults to left-aligned and strands a button). */
.premium-main .ns-btnrow{ display:flex; flex-wrap:wrap; gap:var(--space-3);
  justify-content:center; align-items:center; }