/* =========================================================
   Nav sales phone link — present on every page next to Blog.
   Small muted label that aligns with nav items. */
.nav-phone {
  font-size: 13px !important;
  color: var(--mid, #6b6b6b) !important;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
}
.nav-phone:hover { color: var(--black, #111) !important; }

/* In the slide-out mobile menu, match size of the other links. */
.mobile-menu .nav-phone {
  font-size: inherit !important;
  color: inherit !important;
}

/* Hide the nav phone in the desktop header on phones — it lives in the
   mobile slide-out menu already, and the header is logo+hamburger only. */
@media (max-width: 900px) {
  nav > .nav-right > .nav-phone,
  header nav .nav-phone:not(.mobile-menu .nav-phone) { display: none; }
}

/* =========================================================
   Global responsive overrides — mobile & tablet
   Loaded on every page AFTER inline <style>, overrides where needed.
   ========================================================= */

/* Prevent any stray horizontal scroll site-wide */
html, body { overflow-x: hidden; max-width: 100%; }

/* ==================== TABLET (≤ 1024px, > 900px) ==================== */
@media (max-width: 1024px) and (min-width: 901px) {
  /* Tighten home hero — no empty right column at mid widths */
  .hero { grid-template-columns: 1fr !important; }
  .hero-left { border-right: none !important; padding: 64px 32px 48px !important; }
  .hero-right { min-height: 320px; }

  /* Pricing on tablet: force the carousel on (instead of the cut-off 2-col grid)
     so all 4 plans are reachable at 768px. */
  .pricing-grid { display: none !important; }
  .pricing-carousel-wrapper { display: block !important; }
  .pricing-carousel-track { padding: 20px 32px !important; }
  .pricing-carousel-track .pricing-card {
    min-width: 420px !important;
    max-width: 420px !important;
    padding: 40px 32px !important;
  }

  /* Tablet blog toolbar — reduce 80px side padding */
  .blog-toolbar { padding: 20px 32px !important; }

  /* Tablet comparison table — allow horizontal scroll gracefully */
  .comparison-table { min-width: 900px !important; }
}

/* ==================== SINGLE-ROW MOBILE HEADER ====================
   At ≤900px, collapse the two-row editorial header into a clean
   single-row nav: logo LEFT, hamburger RIGHT. Matches modern mobile UX.
   ========================================================= */
@media (max-width: 900px) {
  header { border-bottom: 1px solid var(--gray, #e7e3da); }

  .logo-bar {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    text-align: left !important;
    padding: 14px 20px !important;
    border-bottom: none;
  }
  .logo-bar .logo, .logo-bar a.logo {
    font-size: 30px !important;
    letter-spacing: -1px !important;
    line-height: 1;
    text-decoration: none;
  }

  nav {
    position: absolute !important;
    top: 0;
    right: 0;
    padding: 14px 20px !important;
    border-top: none !important;
    background: transparent;
    min-height: 62px;
    display: flex;
    align-items: center;
  }
  header { position: fixed; }
  .hamburger { padding: 6px !important; }

  /* Case-study back-link: breathing room below collapsed header */
  .cs-back { margin-top: 16px; display: inline-block; }
}

/* ==================== MOBILE LAYOUT FIXES (≤ 720px) ==================== */
@media (max-width: 720px) {

  /* Watch-a-demo teaser + closing CTA banners — shrink padding */
  .watch-demo-teaser { padding: 64px 20px !important; }
  .wdt-cta { width: 100%; text-align: center; }

  .cta-banner {
    flex-direction: column !important;
    padding: 48px 24px !important;
    gap: 24px !important;
    text-align: left;
  }
  .cta-banner h2 { font-size: 30px !important; letter-spacing: -1px; line-height: 1.1; }
  .cta-banner-right { width: 100%; }
  .cta-banner-right p { margin-top: 0 !important; }
  .cta-banner .btn-accent { display: block; width: 100%; text-align: center; padding: 14px 24px; }

  /* Pricing on mobile: replace the horizontal carousel with a stacked list
     so all 4 plans are visible when the user scrolls down. Much more
     natural on phones than swiping sideways. */
  .pricing-carousel-wrapper { display: block !important; overflow: visible !important; }
  .pricing-carousel-wrapper::before,
  .pricing-carousel-wrapper::after { display: none !important; }
  .pricing-carousel-track {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 20px 20px !important;
    transform: none !important;
    overflow: visible !important;
    width: 100% !important;
    cursor: default !important;
    touch-action: auto !important;
  }
  .pricing-carousel-track .pricing-card {
    position: relative !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 32px 24px !important;
    flex-shrink: 0;
  }
  .pricing-carousel-track .pricing-card.peek-prev,
  .pricing-carousel-track .pricing-card.peek-next,
  .pricing-carousel-track .pricing-card.peek-active {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Hide arrows + dots — not needed when stacked */
  .carousel-prev, .carousel-next, .carousel-dots,
  .carousel-nav, .carousel-nav-btn { display: none !important; }
  .plan-name, .plan-tag { font-size: 13px; }
  .plan-price { font-size: 40px !important; letter-spacing: -1.5px; }
  .plan-features li { font-size: 13.5px; }
  .page-hero, .pricing-hero { padding-left: 20px !important; padding-right: 20px !important; }
  .page-hero h1 { letter-spacing: -1px !important; }

  /* Comparison table — let the browser handle horizontal scroll with
     smaller min-width so it never overflows the viewport frame. */
  .comparison-table { min-width: 720px !important; }
  .comparison-header { padding-left: 20px !important; padding-right: 20px !important; }

  /* FAQ — one column on mobile */
  .faq-grid { grid-template-columns: 1fr !important; }

  /* Agents/Solutions/Case-studies hero stats wrap cleanly */
  .stats-row, .hero-stats, .cs-stats {
    flex-wrap: wrap !important;
    gap: 20px 32px !important;
  }
  .stats-row > *, .hero-stats > * { flex: 1 1 140px; min-width: 140px; }

  /* Case studies listing — single column */
  .cs-grid, .case-grid { grid-template-columns: 1fr !important; }

  /* Case study detail page typography */
  .cs-hero h1 { font-size: 32px !important; line-height: 1.15 !important; letter-spacing: -1px; }
  .cs-section h2 { font-size: 26px !important; }
  .cs-section { padding: 48px 24px !important; }
  .cs-quote-text { font-size: 18px !important; line-height: 1.45; }

  /* Blog + careers card grids */
  .blog-grid, .careers-grid, .jobs-grid { grid-template-columns: 1fr !important; }
  .blog-card, .job-card { padding: 24px !important; }

  /* Blog filter chips: ensure they wrap and stay inside the viewport.
     blog-toolbar has 80px side padding by default which pushes things wide. */
  .blog-toolbar {
    padding: 16px 20px !important;
    gap: 12px !important;
  }
  .blog-filters {
    flex-wrap: wrap !important;
    width: 100%;
    gap: 8px !important;
  }
  .blog-filter-btn { font-size: 12px; padding: 6px 12px; }
  .blog-search { width: 100%; max-width: 100% !important; }

  /* Demo page */
  .demo-hero h1 { font-size: 36px !important; letter-spacing: -1px; line-height: 1.1; }
  .demo-stage, .stage { border-radius: 16px !important; }
  .end-card { padding: 32px 22px !important; }
  .end-card h2 { font-size: 26px !important; }

  /* Chat widget — edge padding + viewport-safe size */
  .scout-launcher { right: 16px !important; bottom: 16px !important; }
  .scout-panel {
    right: 12px !important;
    left: 12px !important;
    bottom: 80px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 70vh !important;
  }

  /* Sales modal — full-screen sheet on mobile */
  .sales-card {
    grid-template-columns: 1fr !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .sales-left { display: none !important; }
  .sales-right { padding: 24px 20px 40px !important; }
  .sales-row { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* Footer */
  footer { padding: 32px 20px !important; }

  /* Generic: buttons full-width in closing bands */
  .btn-accent.full-m { width: 100%; text-align: center; }
}

/* ==================== DEMO PAGE (≤ 720px) ==================== */
@media (max-width: 720px) {
  /* Hero preview mockup — sidebar is too wide on mobile (160px + cards).
     Stack it and shrink so nothing spills. */
  .preview-body {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    height: auto !important;
    min-height: 320px;
  }
  .preview-sidebar { flex-direction: row !important; gap: 6px !important; overflow-x: auto; }
  .preview-sidebar .ps-item { white-space: nowrap; padding: 6px 10px !important; font-size: 11px !important; }
  .preview-main { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .preview-card { padding: 14px !important; }
  .pc-value { font-size: 28px !important; }
  .hero-visual { height: auto !important; min-height: 300px; }
  .preview { position: relative !important; animation: none !important; }

  /* Demo player — the #viewDemo hero takes a lot of vertical space on phones
     AND the stage internals overflow. Compact the hero, give the stage real
     height, let scenes scroll when their content is taller than viewport. */
  .demo-view .demo-hero { padding: 28px 20px 18px !important; }
  .demo-h1 { font-size: 26px !important; line-height: 1.15 !important; letter-spacing: -0.5px !important; }
  .demo-sub { font-size: 14px !important; margin-top: 10px !important; }
  .demo-shell { padding: 0 14px !important; margin-bottom: 40px !important; }
  .player { min-height: 0 !important; border-radius: 14px !important; }
  .stage { padding: 46px 12px 8px !important; } /* top padding for caption pill */
  .stage-caption { top: 12px !important; left: 12px !important; right: 12px !important;
    font-size: 11px !important; padding: 6px 12px !important;
    white-space: normal !important; line-height: 1.3 !important;
  }
  .stage-screens {
    min-height: 460px !important;
    overflow: hidden !important;
  }
  .scene {
    padding: 8px !important;
    align-content: start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .scene > * { max-width: 100% !important; width: 100% !important; box-sizing: border-box; }
  .scene .mockup { max-width: 100% !important; }
  .q-panel { grid-template-columns: 1fr !important; gap: 10px !important; }
  .qualify-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .closer { grid-template-columns: 1fr !important; }
  .kpi-row { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .kpi { padding: 10px !important; }
  .kpi-val { font-size: 18px !important; }
  .kpi-label { font-size: 9px !important; }
  .scout-chat, .scout-p, .bubble { max-width: 100% !important; width: auto !important; }
  .scout-chat { position: static !important; margin-top: 12px !important; }
  .scene img, .scene svg { max-width: 100% !important; height: auto !important; }
  /* Intro/outro typography shrink */
  .intro-logo { font-size: 54px !important; }
  .intro-tag { font-size: 15px !important; }
  .ip { padding: 7px 12px !important; font-size: 12px !important; }
  .outro-eyebrow { font-size: 28px !important; }
  .outro-stats { gap: 18px !important; flex-wrap: wrap; justify-content: center; }
  .os-num { font-size: 34px !important; }
  .os-lbl { font-size: 12px !important; }
  /* Player controls compact */
  .controls { padding: 10px 12px !important; gap: 8px !important; }
  .ctrl-time { font-size: 11px !important; }
}

/* ==================== CHAT WIDGET — MOBILE FULL-VIEWPORT ==================== */
@media (max-width: 720px) {
  /* The launcher sits bottom-right. The panel opens from the launcher but
     on a 375px viewport the default 380px panel positioned at right:24px
     overflows to the left edge. Reposition so it's a proper full-width sheet. */
  .scout-widget { right: 16px !important; bottom: 16px !important; }
  .scout-panel {
    position: fixed !important;
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 88px !important;
    width: auto !important;
    max-width: none !important;
    height: calc(100vh - 120px) !important;
    max-height: calc(100vh - 120px) !important;
  }
  .scout-launcher { width: 56px !important; height: 56px !important; }
  .scout-launcher svg { width: 24px !important; height: 24px !important; }
}

/* ==================== EXTRA-SMALL (≤ 420px) ==================== */
@media (max-width: 420px) {
  .logo-bar .logo { font-size: 26px !important; }
  .hero-headline { font-size: 36px !important; }
  .section-title { font-size: 26px !important; }
  .cs-hero h1 { font-size: 28px !important; }
  .plan-price { font-size: 36px !important; }
}