/* ============================================================================
   Agency white-label partner page (ID 2670, template-native.php) — page-only
   layout helpers. Tokens only, scoped to .premium-main so nothing leaks. Most
   of the page is built from shared .ns-* components; these cover the few
   layouts the system doesn't have a canonical class for.
   ========================================================================== */

/* 3-up grid for the 3 how-it-works steps and the 3 partner-story quotes.
   (premium-main .ns-bento is a fixed 4-col grid, which orphans a 3-item row.) */
.premium-main .ag-grid3{ display:grid; gap:var(--space-5); grid-template-columns:1fr; }
@media (min-width:760px){ .premium-main .ag-grid3{ grid-template-columns:repeat(3,1fr); } }

/* numbered step chip — mirrors the home template's .ns-step__num */
.premium-main .ag-step__num{ width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center;
  font-family:var(--font-mono); font-weight:700; color:#fff; background:var(--grad-brand); }

/* line-icon colour inside the bento tiles (one periwinkle icon language) */
.premium-main .ns-bento__icon{ color:var(--periwinkle); }

/* workshop stat row */
.premium-main .ag-stats{ display:flex; flex-wrap:wrap; gap:var(--space-7); margin-top:var(--space-6); }

/* apply / embedded-Scoutty frame (click-to-load, so no third-party JS on first paint) */
.premium-main .ag-chat{ position:relative; max-width:760px; margin-inline:auto; border:1px solid var(--line-2);
  border-radius:var(--r-xl); overflow:hidden; background:var(--bg-elev); background-image:var(--grad-brand-soft);
  padding:var(--space-7) var(--space-6); display:grid; place-items:center; min-height:320px; }
.premium-main .ag-chat__facade{ text-align:center; max-width:44ch; }
.premium-main #embeddedChatbot{ width:100%; min-height:560px; }