/* HelloBotz — Site-wide Mobile Hero Design System
   Desktop layouts unchanged. Mobile gets stacked composition. */

/* Force no page-level horizontal scroll on small screens */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  .container { max-width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; box-sizing: border-box; }
}

/* Generic hero grids used across industry/solution pages */
@media (max-width: 900px) {
  .edu-grid, .re-grid, .shy-grid, .woo-grid, .ecom-hero-grid, .gcm-hero-grid, .gfs-hero-grid, .crm-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
  }
  .edu-hero-copy, .re-hero-copy, .shy-hero-copy, .woo-hero-copy,
  .ecom-hero-copy, .gcm-hero-copy, .gfs-hero-copy, .crm-hero-copy {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .edu-sim-tabs, .re-sim-tabs, .shy-tabs, .woo-tabs, .ecom-tabs, .gcm-tabs, .gfs-tabs, .crm-tabs {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .edu-phone-stage, .re-phone-stage, .shy-stage, .woo-stage, .ecom-phone-stage, .gcm-phone-stage, .gfs-hero-visual, .crm-sim-stage {
    order: 3 !important;
    width: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    justify-content: center !important;
    overflow: visible !important;
    padding: 0.5rem 0 1rem !important;
  }
  /* Hide floating cards on mobile — they cause overflow */
  .edu-float, .re-float, .shy-float, .woo-float, .ecom-float, .gcm-float {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .edu-hero, .re-hero, .shy-hero, .woo-hero, .ecom-hero, .gcm-hero, .gfs-hero, .crm-hero {
    padding-top: calc(var(--nav, 64px) + 1rem) !important;
    padding-bottom: 1.5rem !important;
    overflow-x: hidden !important;
  }
  .edu-hero h1, .re-hero h1, .shy-hero h1, .woo-hero h1,
  .ecom-hero h1, .gcm-hero h1, .gfs-hero h1, .crm-hero h1 {
    font-size: clamp(1.35rem, 6vw, 1.65rem) !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  .edu-lead, .re-lead, .shy-lead, .woo-lead, .ecom-lead, .gcm-lead, .gfs-lead, .crm-lead {
    font-size: 0.9rem !important;
    max-width: 100% !important;
  }
  .edu-ctas, .re-ctas, .shy-ctas, .woo-ctas, .ecom-ctas, .gcm-ctas, .gfs-ctas, .crm-ctas {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    width: 100% !important;
  }
  .edu-ctas .btn, .re-ctas .btn, .shy-ctas .btn, .woo-ctas .btn,
  .ecom-ctas .btn, .gcm-ctas .btn, .gfs-ctas .btn, .crm-ctas .btn,
  .edu-ctas .btn-ghost-light, .re-ctas .btn-ghost-light {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  /* Phone simulation constrained */
  .edu-phone, .re-phone, .shy-phone, .woo-phone, .ecom-phone, .gcm-phone, .crm-phone {
    width: min(230px, 72vw) !important;
    max-width: 230px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .edu-phone-screen, .re-phone-screen, .shy-screen, .woo-screen, .ecom-screen, .gcm-screen, .crm-screen {
    height: 360px !important;
  }
}

@media (max-width: 430px) {
  .edu-hero h1, .re-hero h1, .shy-hero h1, .woo-hero h1,
  .ecom-hero h1, .gcm-hero h1, .gfs-hero h1, .crm-hero h1 {
    font-size: 1.3rem !important;
  }
  .edu-phone, .re-phone, .shy-phone, .woo-phone, .ecom-phone, .gcm-phone, .crm-phone {
    width: min(200px, 74vw) !important;
  }
  .edu-phone-screen, .re-phone-screen, .shy-screen, .woo-screen, .ecom-screen, .gcm-screen, .crm-screen {
    height: 330px !important;
  }
  .edu-sim-tabs button, .re-sim-tabs button, .shy-tabs button, .woo-tabs button,
  .ecom-tabs button, .gcm-tabs button, .crm-tabs button {
    font-size: 0.68rem !important;
    padding: 0.35rem 0.6rem !important;
  }
}

@media (max-width: 360px) {
  .edu-hero h1, .re-hero h1, .shy-hero h1, .woo-hero h1,
  .ecom-hero h1, .gcm-hero h1, .gfs-hero h1, .crm-hero h1 {
    font-size: 1.22rem !important;
  }
  .edu-phone, .re-phone, .shy-phone, .woo-phone, .ecom-phone, .gcm-phone, .crm-phone {
    width: min(185px, 78vw) !important;
  }
  .edu-phone-screen, .re-phone-screen, .shy-screen, .woo-screen, .ecom-screen, .gcm-screen, .crm-screen {
    height: 300px !important;
  }
}

/* Journey flows — visible text + mobile vertical */
.re-journey span, .ecom-journey span, .gcm-journey span, .gfs-pipeline span {
  color: inherit;
}
.section-dark .re-journey span,
.section-dark .ecom-journey span,
.section-dark .gcm-journey span {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}
.section-dark .re-journey .arr,
.section-dark .ecom-journey .arr,
.section-dark .gcm-journey .arr {
  color: #C4B5FD !important;
  background: transparent !important;
  border: 0 !important;
}

@media (max-width: 768px) {
  .re-journey, .ecom-journey, .gcm-journey, .gfs-pipeline, .crm-pipeline, .crm-timeline, .ecom-timeline, .ecom-flow, .gcm-timeline {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.35rem !important;
  }
  .re-journey span, .ecom-journey span, .gcm-journey span, .gfs-pipeline span,
  .crm-pipeline span, .crm-timeline span, .ecom-timeline span, .ecom-flow span, .gcm-timeline span {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .re-journey .arr, .ecom-journey .arr, .gcm-journey .arr, .gfs-pipeline .arr,
  .crm-pipeline .arr, .crm-timeline .arr, .ecom-timeline .arr, .ecom-flow .arr, .gcm-timeline .arr {
    width: auto !important;
    padding: 0.15rem !important;
  }
}

/* Marketing image section component */
.hb-mkt-section {
  margin: 2rem 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--bd, #e5e7eb);
  background: linear-gradient(135deg, #EDE9FE 0%, #CFFAFE 50%, #E0E7FF 100%);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.25rem;
}
.hb-mkt-section .hb-mkt-inner strong {
  display: block;
  font-size: 1.1rem;
  color: #1E1B4B;
  margin-bottom: 0.35rem;
}
.hb-mkt-section .hb-mkt-inner span {
  font-size: 0.9rem;
  color: #5B21B6;
  font-weight: 600;
}
.hb-mkt-section img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 420px;
}
@media (max-width: 640px) {
  .hb-mkt-section { min-height: 140px; padding: 1.5rem 1rem; }
}

/* ===== Marketing image slots (replaceable) ===== */
.hb-img-slot{
  margin:1.75rem auto;
  max-width:960px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--bd,#e5e7eb);
  background:linear-gradient(135deg,#EDE9FE 0%,#CFFAFE 45%,#E0E7FF 100%);
  min-height:200px;
  position:relative;
}
.hb-img-slot img{
  width:100%;height:auto;display:block;object-fit:cover;max-height:420px;
  min-height:180px;background:transparent;
}
.hb-img-slot .hb-img-fallback{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2.25rem 1.5rem;min-height:200px;
}
.hb-img-slot .hb-img-fallback .ico{font-size:2rem;margin-bottom:.5rem}
.hb-img-slot .hb-img-fallback strong{display:block;font-size:1.05rem;color:#1E1B4B;margin-bottom:.3rem}
.hb-img-slot .hb-img-fallback span{font-size:.875rem;color:#5B21B6;font-weight:600;max-width:28rem;line-height:1.45}
.hb-img-slot--dark{
  background:linear-gradient(135deg,#1e1b4b 0%,#0f172a 50%,#164e63 100%);
  border-color:rgba(255,255,255,.1);
}
.hb-img-slot--dark .hb-img-fallback strong{color:#E9EDEF}
.hb-img-slot--dark .hb-img-fallback span{color:#A5F3FC}
@media(max-width:640px){
  .hb-img-slot{min-height:160px;margin:1.25rem auto;border-radius:14px}
  .hb-img-slot .hb-img-fallback{padding:1.5rem 1rem;min-height:160px}
  .hb-img-slot .hb-img-fallback strong{font-size:.95rem}
}