/* Shared responsive corrections for the committed static site. */

@media (max-width: 767px) {
  /*
   * The solution pages rendered this image twice: once in the animated layer
   * and once through this pseudo-element. Keeping the animated layer avoids
   * the repeated band that cut through the hero copy.
   */
  .ft-hero > .absolute::before,
  .cs-hero > .absolute::before,
  .rv-hero > .absolute::before,
  section[aria-label="The only AI-native CRM built for B2B Software"] > .absolute::before {
    content: none !important;
  }

  .ft-hero > .absolute [style*="hero-bg-1200"],
  .cs-hero > .absolute [style*="hero-bg-1200"],
  .rv-hero > .absolute [style*="hero-bg-1200"],
  section[aria-label="The only AI-native CRM built for B2B Software"] > .absolute [style*="hero-bg-1200"] {
    background-repeat: no-repeat !important;
  }

  /* CS and RevOps have longer hero copy than Sales. Keep that copy clear of the wave. */
  .cs-hero,
  .rv-hero {
    min-height: 560px !important;
    padding-top: 56px !important;
  }

  .cs-hero > .absolute,
  .rv-hero > .absolute {
    top: 320px !important;
    height: 300px !important;
  }

  .cs-hero > .absolute::before,
  .rv-hero > .absolute::before {
    opacity: 0.96 !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0) 100%) !important;
    mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0) 100%) !important;
  }

  .cs-hero > .absolute .bg-animation,
  .rv-hero > .absolute .bg-animation {
    opacity: 1 !important;
    filter: saturate(1.25) brightness(1.06) contrast(1.04);
  }

  .cs-hero > .absolute .bg-animation > .block,
  .rv-hero > .absolute .bg-animation > .block {
    opacity: 1;
  }

  .cs-hero > .absolute .bg-animation > .absolute.bottom-0,
  .rv-hero > .absolute .bg-animation > .absolute.bottom-0 {
    height: 56px !important;
    background: linear-gradient(180deg, rgba(4, 7, 11, 0) 0%, rgba(4, 7, 11, 0.22) 32%, rgba(4, 7, 11, 0.72) 100%) !important;
  }

  .cs-hero .cs-title,
  .rv-hero .rv-title {
    font-size: 34px !important;
    line-height: 37.4px !important;
  }

  .cs-hero .cs-copy,
  .rv-hero .rv-copy {
    font-size: 16px !important;
    line-height: 22.4px !important;
  }

  .cs-hero__inner,
  .rv-hero__inner {
    width: min(calc(100% - 32px), 342px) !important;
    gap: 24px !important;
  }

  .cs-hero .cs-label-img,
  .rv-hero .rv-label-img,
  .cs-hero .cs-title,
  .rv-hero .rv-title,
  .cs-hero .cs-copy,
  .rv-hero .rv-copy,
  .cs-hero .cs-primary-action,
  .rv-hero .rv-primary-action {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .cs-hero .cs-label-img,
  .rv-hero .rv-label-img {
    display: block;
    width: auto;
    max-width: min(100%, 342px);
    height: auto;
    margin-bottom: 28px !important;
  }

  .rv-hero .rv-hero-label {
    width: 265px !important;
    height: 36px !important;
    max-width: 265px !important;
  }

  /* Keep the site navigation above sticky table cells and other page media. */
  .dreamhub-header-v2 {
    z-index: 1000 !important;
  }

  /*
   * Reserve a real grid row for the CTAs. The navigation row can then scroll
   * independently on short viewports instead of being covered by the footer.
   */
  .dreamhub-header-v2__mobile-menu {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto;
    height: calc(100dvh - 72px) !important;
    min-height: 0;
    overflow: hidden !important;
  }

  /* Preserve Alpine's closed x-show state; the rule above is only for open menus. */
  .dreamhub-header-v2__mobile-menu[x-cloak],
  .dreamhub-header-v2__mobile-menu[style*="display: none"] {
    display: none !important;
  }

  .dreamhub-header-v2__mobile-nav {
    grid-row: 1;
    height: auto !important;
    min-height: 0;
    padding: 24px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .dreamhub-header-v2__mobile-links {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  .dreamhub-header-v2__mobile-ctas {
    position: static !important;
    grid-row: 2;
    margin: 0 !important;
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom)) !important;
  }

  /* Let wide comparison tables pan inside their own viewport. */
  .cs-comparison__scroll,
  .rv-comparison__scroll,
  section[aria-label*="current CRM"] .scroll-hide {
    position: relative;
    width: calc(100% - 32px) !important;
    margin-inline: 16px !important;
    padding-inline: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: rgba(249, 250, 251, 0.45) rgba(249, 250, 251, 0.08);
    scrollbar-width: thin;
    touch-action: pan-x pan-y;
  }

  .cs-comparison__scroll::-webkit-scrollbar,
  .rv-comparison__scroll::-webkit-scrollbar,
  section[aria-label*="current CRM"] .scroll-hide::-webkit-scrollbar {
    height: 6px;
  }

  .cs-comparison__scroll::-webkit-scrollbar-thumb,
  .rv-comparison__scroll::-webkit-scrollbar-thumb,
  section[aria-label*="current CRM"] .scroll-hide::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(249, 250, 251, 0.45);
  }

  .cs-comparison__scroll::-webkit-scrollbar-track,
  .rv-comparison__scroll::-webkit-scrollbar-track,
  section[aria-label*="current CRM"] .scroll-hide::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(249, 250, 251, 0.08);
  }

  /* Fit the semantic CRM table into a shorter, deliberate horizontal pan. */
  section[aria-label*="current CRM"] [role="table"] > .container {
    width: 980px !important;
    min-width: 980px !important;
    grid-template-columns: 145px 205px repeat(5, minmax(0, 1fr)) !important;
  }

  section[aria-label*="current CRM"] [role="columnheader"],
  section[aria-label*="current CRM"] [role="cell"],
  section[aria-label*="current CRM"] [class*="max-lg:sticky"] {
    position: static !important;
    left: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ft-hero .bg-animation,
  .cs-hero .bg-animation,
  .rv-hero .bg-animation {
    animation: none !important;
  }
}