/* ── Mobile (HomeAi landing) ────────────────────────────────────────────── */

@media (max-width: 767px) {
  :root {
    --hai-mobile-gutter: 1rem;
  }

  /* clip (not hidden) on html only — blocks page-wide horizontal scroll without locking vertical scroll */
  html {
    overflow-x: clip;
    max-width: 100%;
    overscroll-behavior-x: none;
  }

  body.hai-page,
  body.hcn-page {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  .hai-container {
    padding-left: var(--hai-mobile-gutter);
    padding-right: var(--hai-mobile-gutter);
    max-width: 100%;
    min-width: 0;
  }

  /* Sections already wrap .hai-container — drop duplicate horizontal padding */
  .hai-modules,
  .hai-pricing,
  .hai-industries,
  .hai-how,
  .hai-faq,
  .hai-contact,
  .hai-testimonials,
  .hai-featurehub,
  .hai-demo-banner {
    padding-left: 0;
    padding-right: 0;
  }

  .hai-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .hai-hero {
    min-height: auto;
    padding-top: calc(var(--hai-nav-h) + 2rem);
    padding-bottom: 2.5rem;
    overflow-x: clip;
  }

  .hai-hero__intro {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  .hai-hero__blob--1 {
    width: 280px;
    height: 280px;
    top: -8%;
    right: -20%;
  }

  .hai-hero__blob--2 {
    width: 220px;
    height: 220px;
    bottom: -5%;
    left: -15%;
  }

  .hai-hero__intro {
    gap: 1.25rem;
  }

  .hai-hero__intro .hai-hero__title {
    font-size: clamp(1.375rem, 5vw, 1.75rem);
  }

  .hai-hero__intro .hai-hero__title em {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    min-height: calc(2 * 1.08em);
  }

  .hai-hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
  }

  .hai-hero__actions .hai-btn {
    width: auto;
    max-width: 100%;
    padding: 0.75rem 1.125rem;
    font-size: 0.8125rem;
  }

  .hai-hero__mods-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    justify-content: flex-start;
    gap: 0.3125rem;
    margin-inline: 0;
    padding-inline: 0;
    scroll-snap-type: x proximity;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    contain: inline-size;
  }

  .hai-hero__mods-pills::-webkit-scrollbar {
    display: none;
  }

  .hai-hero__mod-pill {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .hai-hero__layout {
    min-width: 0;
    overflow: hidden;
  }

  .hai-hero__layout > * {
    min-width: 0;
  }

  .hai-hero__app {
    --hai-hero-app-bleed-x: 0;
    --hai-hero-app-bleed-b: 1.25rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .hai-hero__app-viewport {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-right: 0;
    min-height: 0;
    overflow: hidden;
  }

  .hai-hero__app .hai-hero__window-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .hai-hero__dashboard,
  .hai-hero__dashboard--wide {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    box-shadow:
      0 16px 40px rgba(0, 0, 0, 0.22),
      0 4px 12px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .hai-hero__window-glow {
    display: none;
  }

  .hai-hero__chrome {
    height: 2rem;
    padding: 0 0.625rem;
    gap: 0.3125rem;
  }

  .hai-hero__chrome-dot {
    width: 8px;
    height: 8px;
  }

  .hai-hero__chrome-url {
    max-width: none;
    min-width: 0;
    font-size: 0.5625rem;
    padding: 0.1875rem 0.5rem;
  }

  .hai-hero__chrome-actions svg {
    width: 11px;
    height: 11px;
  }

  .hai-hero__chrome-avatar {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.5rem;
  }

  .hai-hero__body,
  .hai-hero__body--tall,
  .hai-hero__app .hai-hero__body--tall {
    min-height: 0;
    height: auto;
    max-height: 18.5rem;
  }

  .hai-hero__sidebar {
    width: 2.375rem;
    padding: 0.625rem 0;
    gap: 0.3125rem;
  }

  .hai-hero__sidebar-logo {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.5rem;
    margin-bottom: 0.25rem;
  }

  .hai-hero__sidebar-icon {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.4375rem;
  }

  .hai-hero__sidebar-icon svg {
    width: 12px;
    height: 12px;
  }

  .hai-hero__tabbar {
    height: 2.375rem;
    padding: 0 0.25rem;
  }

  .hai-hero__tab {
    padding: 0 0.625rem;
    font-size: 0.6875rem;
  }

  .hai-hero__tab-live {
    display: none;
  }

  .hai-hero__preview {
    padding: 0.625rem 0.5rem;
    overflow-x: hidden;
  }

  .hai-preview__greeting {
    font-size: 0.6875rem;
  }

  .hai-preview__stats {
    gap: 0.3125rem;
  }

  .hai-preview__stat {
    padding: 0.4375rem;
    min-width: 0;
  }

  .hai-preview__stat-value {
    font-size: 0.6875rem;
  }

  .hai-preview__chart {
    padding: 0.5rem;
  }

  .hai-modules {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .hai-modules__header {
    margin-bottom: 1.75rem;
  }

  .hai-modules__legend {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: 0;
    padding-inline: 0;
    scroll-snap-type: x proximity;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    contain: inline-size;
  }

  .hai-modules__legend::-webkit-scrollbar {
    display: none;
  }

  .hai-modules__legend-item {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .hai-modules__columns {
    column-count: 2;
    column-gap: 0.5rem;
    padding: 0;
    margin-inline: 0;
  }

  .hai-modules__tile-shell {
    padding: 0;
    margin-bottom: 0.375rem;
  }

  .hai-modules__tile-shell:has(.hai-modules__tile:hover),
  .hai-modules__tile-shell:has(.hai-modules__tile:focus-within),
  .hai-modules__tile-shell:has(.hai-modules__tile--expanded) {
    padding: 0;
  }

  .hai-modules__tile {
    padding: 0;
  }

  .hai-modules__tile-body {
    gap: 0.375rem;
    padding: 0.375rem 0.25rem 0.4375rem;
  }

  .hai-modules__module-link {
    padding: 0.1875rem 0.125rem;
  }

  .hai-modules__module-more {
    padding: 0.1875rem 0.125rem;
  }

  .hai-modules__tile:hover,
  .hai-modules__tile:focus-within,
  .hai-modules__tile.hai-modules__tile--expanded {
    transform: none;
  }

  .hai-modules__tile-title {
    font-size: 0.6875rem;
  }

  .hai-modules__module-name {
    font-size: 0.625rem;
  }

  .hai-modules__cta {
    margin-top: 1.75rem;
    padding: 1rem;
  }

  .hai-pricing {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .hai-pricing__header {
    margin-bottom: 1.75rem;
  }

  .hai-pricing__grid {
    display: flex;
    gap: 0.875rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: 0;
    padding: 0.25rem 0 0.75rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    contain: inline-size;
  }

  .hai-pricing__grid::-webkit-scrollbar {
    display: none;
  }

  .hai-pricing__card {
    flex: 0 0 min(85%, 19rem);
    scroll-snap-align: start;
    overflow: hidden;
    min-width: 0;
  }

  .hai-pricing__price {
    min-width: 0;
    flex-wrap: wrap;
  }

  .hai-industries__grid,
  .hai-testimonials__grid {
    display: flex;
    gap: 0.875rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: 0;
    padding-inline: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    contain: inline-size;
  }

  .hai-industries__grid::-webkit-scrollbar,
  .hai-testimonials__grid::-webkit-scrollbar {
    display: none;
  }

  .hai-industries__grid > *,
  .hai-testimonials__grid > * {
    flex: 0 0 min(82%, 18rem);
    scroll-snap-align: start;
  }
}