/* GENERATED by scripts/zip/scope-ai-css.mjs — do not edit directly.
   Source: nextweb-html/css/ai-pages.css. Scoped to :where(html.zip-ai-root) / :where(body.zip-ai-page) so AI-section styles
   never leak onto the homepage or other public pages. */
/* ============================================================
   ai-pages.css — PUBLIC WEBSITE, /ai/* section ONLY.

   Single shared design-system layer for every AI page (AI Hub,
   AI Agents, Voice Agents, Conversational AI, AI for Sales /
   Marketing / Operations / Support / Search, AI Development,
   AI Consulting).

   It aligns the AI section with the Sales CRM page
   (/platform/sales-crm) so both use the same NextWeb tokens:
   type scale, hero, badges, buttons, cards, section rhythm and
   sub-navigation. Loaded LAST for AI routes so it wins over
   ai-theme.css and large-screen-fixes.css (which pushes
   .hero h1 to 7rem on >=1440px screens).

   New AI pages inherit this automatically — never fork these
   values into a per-page stylesheet.
   ============================================================ */

/* ── Root scale: identical to Sales CRM (1rem = 10px) ────── */
html:where(.zip-ai-root) { font-size: 62.5% !important; }

/* AI routes swap page content inside a persistent section shell. The generic
   public-page entrance animations start at opacity: 0 on every route change,
   which reads as a navigation/style flash. AI content must paint in its final
   state immediately; continuous dashboard micro-animations remain intact. */
:where(body.zip-ai-page) .hero .htag,
:where(body.zip-ai-page) .hero h1,
:where(body.zip-ai-page) .hero .hero-desc,
:where(body.zip-ai-page) .hero .hbtns,
:where(body.zip-ai-page) .hero .htrust,
:where(body.zip-ai-page) .hero .hero-right {
  animation-name: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ── Hero ───────────────────────────────────────────────── */
:where(body.zip-ai-page) .hero {
  display: block !important;      /* main.css turns .hero into a 2-col grid */
  min-height: auto !important;
  gap: 0 !important;
  background: linear-gradient(135deg, #0d1835 0%, #1b2955 50%, #0d1835 100%) !important;
  padding: 6rem 4rem 4rem !important;
  text-align: left !important;
}
:where(body.zip-ai-page) .hero-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5rem !important;
  align-items: center !important;
}
:where(body.zip-ai-page) .hero h1 {
  font-size: clamp(3.5rem, 5vw, 6rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  color: #fff !important;
  margin-bottom: 2.5rem !important;
}
:where(body.zip-ai-page) .hero h1 .pk { color: #e81f76 !important; }
:where(body.zip-ai-page) .hero .hero-desc {
  font-size: 1.7rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.8 !important;
  margin: 0 0 3rem !important;
  max-width: 50rem !important;
}
:where(body.zip-ai-page) .hero .htag {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #cddd00 !important;
  font-size: 1.2rem !important;
  padding: 0.6rem 2rem !important;
  border-radius: 5rem !important;
  margin: 0 0 2.5rem !important;
}
:where(body.zip-ai-page) .hero .htag,
:where(body.zip-ai-page) .hero .hbtns { justify-content: flex-start !important; }
:where(body.zip-ai-page) .hero-right { padding-bottom: 4rem !important; }

/* ── Buttons ────────────────────────────────────────────── */
:where(body.zip-ai-page) .btn-p {
  background: #e81f76 !important;
  color: #fff !important;
  border: none !important;
  padding: 1.4rem 2.8rem !important;
  border-radius: 0.8rem !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  transition: 0.2s !important;
}
:where(body.zip-ai-page) .btn-p:hover { background: #c4145f !important; transform: translateY(-2px); }
:where(body.zip-ai-page) .btn-o {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  padding: 1.4rem 2.8rem !important;
  border-radius: 0.8rem !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  transition: 0.2s !important;
}
:where(body.zip-ai-page) .btn-o:hover { background: rgba(255, 255, 255, 0.1) !important; }

/* ── Section rhythm + centered intro pattern ────────────── */
:where(body.zip-ai-page) .sec { padding: 8rem 4rem !important; }
:where(body.zip-ai-page) .sec > .sec-inner {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
:where(body.zip-ai-page) .sec > .sec-inner > .stag,
:where(body.zip-ai-page) .sec > .sec-inner > .tc > .stag {
  display: table !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: rgba(232, 31, 118, 0.08) !important;
  border: 1px solid rgba(232, 31, 118, 0.2) !important;
  color: #e81f76 !important;
  font-size: 1.2rem !important;
}
:where(body.zip-ai-page) .testi-sec .stag,
:where(body.zip-ai-page) .sec[style*="1b2955"] .stag {
  background: rgba(205, 221, 0, 0.15) !important;
  border-color: rgba(205, 221, 0, 0.3) !important;
  color: #cddd00 !important;
}
:where(body.zip-ai-page) .sec > .sec-inner > .sh,
:where(body.zip-ai-page) .sec > .sec-inner > .tc > .sh {
  text-align: center !important;
  font-size: clamp(3rem, 4vw, 4.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  max-width: 90rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
:where(body.zip-ai-page) .sec > .sec-inner > .sd,
:where(body.zip-ai-page) .sec > .sec-inner > .tc > .sd {
  max-width: 65rem !important;
  font-size: 1.7rem !important;
  line-height: 1.7 !important;
  color: #666 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
:where(body.zip-ai-page) .testi-sec .sd { color: rgba(255, 255, 255, 0.7) !important; }

/* Voice Agents: badge, heading and description share one wrapper. */
:where(body.zip-ai-page) .voice-section-intro {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  text-align: center;
}
:where(body.zip-ai-page) .voice-section-intro > .stag {
  display: table !important;
  margin: 0 auto 24px !important;
}
:where(body.zip-ai-page) .voice-section-intro > .sh {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 32px !important;
}
:where(body.zip-ai-page) .voice-section-intro > .voice-section-description {
  width: 100%;
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

:where(body.zip-ai-page) .sec .card-grid,
:where(body.zip-ai-page) .sec .results-grid,
:where(body.zip-ai-page) .sec .testi-grid { text-align: left !important; }

/* ── Cards ──────────────────────────────────────────────── */
:where(body.zip-ai-page) .card {
  background: #fff !important;
  border: 1px solid #e8eaf0 !important;
  border-radius: 2rem !important;
  padding: 3rem 2.8rem !important;
  transition: 0.3s !important;
}
:where(body.zip-ai-page) .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(27, 41, 85, 0.1) !important;
  border-color: #e81f76 !important;
}
:where(body.zip-ai-page) .card h4 {
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  color: #1b2955 !important;
  margin-bottom: 1rem !important;
}
:where(body.zip-ai-page) .card p {
  font-size: 1.5rem !important;
  color: #666 !important;
  line-height: 1.7 !important;
}
:where(body.zip-ai-page) .card-icon {
  width: 5.6rem !important;
  height: 5.6rem !important;
  border-radius: 1.4rem !important;
  margin-bottom: 2rem !important;
}
:where(body.zip-ai-page) .card-icon svg { width: 2.8rem !important; height: 2.8rem !important; stroke: #e81f76 !important; }
:where(body.zip-ai-page) .card-link { font-size: 1.5rem !important; color: #e81f76 !important; }

/* ── Sub navigation (AI tabs) ───────────────────────────── */
:where(body.zip-ai-page) .ai-nav { background: #fff !important; border-bottom: 2px solid #e8eaf0 !important; }
:where(body.zip-ai-page) .an-link {
  padding: 1.4rem 2rem !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: #888 !important;
  border-bottom: 3px solid transparent !important;
  transition: color 0.2s, border-color 0.2s !important;
}
:where(body.zip-ai-page) .an-link:hover { color: #1b2955 !important; border-bottom-color: #e8eaf0 !important; }
:where(body.zip-ai-page) .an-link.active { color: #e81f76 !important; border-bottom-color: #e81f76 !important; }

/* ── FAQ ────────────────────────────────────────────────── */
:where(body.zip-ai-page) .faq-item { text-align: left !important; }
:where(body.zip-ai-page) .faq-q { width: 100% !important; text-align: left !important; padding: 2.2rem 0 !important; }
:where(body.zip-ai-page) .faq-q:focus-visible { outline: 2px solid #e81f76; outline-offset: 2px; border-radius: 4px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  :where(body.zip-ai-page) .hero-inner { grid-template-columns: 1fr !important; gap: 4rem !important; }
  :where(body.zip-ai-page) .hero-left { padding-bottom: 0 !important; }
}
@media (max-width: 768px) {
  :where(body.zip-ai-page) .hero { padding: 4rem 2rem 0 !important; text-align: center !important; }
  :where(body.zip-ai-page) .hero h1 { font-size: clamp(3rem, 9vw, 4.5rem) !important; }
  :where(body.zip-ai-page) .hero .hero-desc { font-size: 1.5rem !important; margin: 0 auto 2.5rem !important; }
  :where(body.zip-ai-page) .hero .hbtns { justify-content: center !important; }
  :where(body.zip-ai-page) .sec { padding: 5rem 2rem !important; }
  :where(body.zip-ai-page) .card { padding: 2.6rem 2.2rem !important; }
}
@media (max-width: 480px) {
  :where(body.zip-ai-page) .hero h1 { font-size: clamp(2.8rem, 8.5vw, 3.5rem) !important; }
  :where(body.zip-ai-page) .btn-p, :where(body.zip-ai-page) .btn-o { width: 100% !important; justify-content: center !important; text-align: center !important; }
}

/* ================================================================
   HERO COLUMN ORDER — match Sales CRM (copy left, visual right)
   AI page markup puts the visual in .hero-left and the copy in
   .hero-right, so we flip the visual order of the grid items.
================================================================ */
@media (min-width: 901px) {
  .zip-public-body:where(.zip-ai-page) .hero-inner {
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    gap: 6rem !important;
  }
  .zip-public-body:where(.zip-ai-page) .hero-right {
    order: 1 !important;
    padding-left: 0 !important;
    height: auto !important;
  }
  .zip-public-body:where(.zip-ai-page) .hero-left {
    order: 2 !important;
  }
}

/* Mobile: copy first, visual second (matches Sales CRM stacking) */
@media (max-width: 900px) {
  .zip-public-body:where(.zip-ai-page) .hero-right { order: 1 !important; padding-left: 0 !important; }
  .zip-public-body:where(.zip-ai-page) .hero-left  { order: 2 !important; }
}

/* ============================================================
   AI-section bottom CTA band — button group centring + Call
   button hover. Scoped to the AI marker only (see scope script);
   no other public page CTA is affected.
   ============================================================ */
.zip-public-body:where(.zip-ai-page) .cta-sec .hbtns {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  flex-wrap: wrap;
  gap: 1.6rem;
}

/* Call CTA: white bg / navy text by default, navy fill / white text on hover */
.zip-public-body:where(.zip-ai-page) .cta-sec:not(.dark):not(.cta-sec--dark) a.btn-o[href^="tel:"] {
  background: #fff !important;
  background-color: #fff !important;
  color: #1b2955 !important;
  border-color: #1b2955 !important;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.zip-public-body:where(.zip-ai-page)
  .cta-sec:not(.dark):not(.cta-sec--dark)
  a.btn-o[href^="tel:"]:is(:hover, :focus-visible) {
  background: #1b2955 !important;
  background-color: #1b2955 !important;
  color: #fff !important;
  border-color: #1b2955 !important;
}
.zip-public-body:where(.zip-ai-page)
  .cta-sec:not(.dark):not(.cta-sec--dark)
  a.btn-o[href^="tel:"]:is(:hover, :focus-visible) > svg {
  stroke: #fff !important;
  color: #fff !important;
}