/*
 * T010DP | Detail Page
 * Page-scoped composition rules for reusable S/M/U building blocks.
 * These rules restore the approved desktop proportions without changing the
 * reusable module schemas or exposing internal U components in HubSpot.
 */

html {
  overflow-x: clip;
  scrollbar-gutter: stable;
  background: #0d0d0d;
}


/*
 * HubSpot appends generated DnD section width rules near the end of the HTML.
 * Define the same final geometry in the render-blocking page stylesheet so the
 * first paint cannot flash full-width and then contract.
 */
body.page-t010dp-detail-page .t010dp-detail-page-main .dnd-section > .row-fluid {
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--container-wide, 1200px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-t010dp-detail-page .t010dp-detail-page-main .s170sp-reviews-section > .row-fluid {
  max-width: var(--container-wide, 1200px) !important;
}

body.page-t010dp-detail-page,
body.page-t010dp-detail-page #main-content {
  width: 100%;
  min-width: 0;
  background: #0d0d0d;
  overflow-x: clip;
}

body.page-t010dp-detail-page .t010dp-detail-page-main picture,
body.page-t010dp-detail-page .t010dp-detail-page-main img,
body.page-t010dp-detail-page .t010dp-detail-page-main video,
body.page-t010dp-detail-page .t010dp-detail-page-main canvas,
body.page-t010dp-detail-page .t010dp-detail-page-main svg {
  max-width: 100%;
}

body.page-t010dp-detail-page .t010dp-detail-page-main .m100hv-hero-visual,
body.page-t010dp-detail-page .t010dp-detail-page-main .m110ms-metrics-strip,
body.page-t010dp-detail-page .t010dp-detail-page-main .m120mg-media-grid,
body.page-t010dp-detail-page .t010dp-detail-page-main .m130fg-feature-grid,
body.page-t010dp-detail-page .t010dp-detail-page-main .m140pj-pricing-journey,
body.page-t010dp-detail-page .t010dp-detail-page-main .m150am-alternating-media,
body.page-t010dp-detail-page .t010dp-detail-page-main .m170sp-social-proof,
body.page-t010dp-detail-page .t010dp-detail-page-main .m175cb-cta-banner,
body.page-t010dp-detail-page .t010dp-detail-page-main .m190fa-faq-accordion,
body.page-t010dp-detail-page .t010dp-detail-page-main .m160ag-asymmetric-grid {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body.page-t010dp-detail-page .t010dp-detail-page-main .m010sh-section-heading {
  margin-bottom: 32px;
}

/*
 * Preserve the approved heading-to-content rhythm from the source design.
 * These explicit values also prevent missing Tailwind utilities from collapsing
 * the gap between a shared M010SH heading and its following module.
 */
body.page-t010dp-detail-page .s120mg-media-grid-section .m010sh-section-heading {
  margin-bottom: 56px;
}

body.page-t010dp-detail-page .s130fg-feature-grid-section .m010sh-section-heading {
  margin-bottom: 48px;
}

body.page-t010dp-detail-page .s140pj-pricing-journey-section .m010sh-section-heading {
  margin-bottom: 32px;
}

body.page-t010dp-detail-page .s150am-alternating-media-section .m010sh-section-heading {
  margin-bottom: 56px;
}

body.page-t010dp-detail-page .s170sp-results-section .m010sh-section-heading {
  margin-bottom: 40px;
}

body.page-t010dp-detail-page .s120mg-media-grid-section .m010sh-section-heading > div,
body.page-t010dp-detail-page .s170sp-results-section .m010sh-section-heading > div {
  max-width: 760px;
  margin-top: 8px;
}

/* Section-level vertical rhythm. Values mirror the approved Industry design. */
body.page-t010dp-detail-page .s120mg-media-grid-section {
  padding-top: 80px !important;
  padding-bottom: 68px !important;
}

body.page-t010dp-detail-page .s130fg-feature-grid-section {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

body.page-t010dp-detail-page .s170sp-reviews-section {
  padding-top: 96px !important;
  padding-bottom: 52px !important;
}

body.page-t010dp-detail-page .s140pj-pricing-journey-section {
  padding-top: 56px !important;
  padding-bottom: 0 !important;
}

body.page-t010dp-detail-page .s175cb-standard-section {
  padding-top: 7px !important;
  padding-bottom: 84px !important;
}

body.page-t010dp-detail-page .s150am-alternating-media-section {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}

body.page-t010dp-detail-page .s160ag-logo-overlay-section {
  padding-top: 68px !important;
  padding-bottom: 32px !important;
}

body.page-t010dp-detail-page .s170sp-results-section {
  padding-top: 96px !important;
  padding-bottom: 4px !important;
}

body.page-t010dp-detail-page .s175cb-visual-section {
  margin-top: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.page-t010dp-detail-page .s160ag-text-overlay-section {
  padding-top: 58px !important;
  padding-bottom: 58px !important;
}

/* S100H | Hero */
body.page-t010dp-detail-page .s100h-hero-section > .row-fluid {
  display: grid !important;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}

body.page-t010dp-detail-page .s100h-hero-section > .row-fluid > .dnd-column,
body.page-t010dp-detail-page .s100h-hero-section > .row-fluid > .widget-span {
  width: auto !important;
  margin-left: 0 !important;
  float: none !important;
}

body.page-t010dp-detail-page .s100h-hero-section .m100hc-hero-content {
  max-width: 560px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.page-t010dp-detail-page .s100h-hero-section .m100hv-hero-visual {
  min-height: 420px;
  padding: 0 0 0 16px !important;
  overflow: visible !important;
}

body.page-t010dp-detail-page .s100h-hero-section .m100hv-hero-visual__stage,
body.page-t010dp-detail-page .s100h-hero-section .m100hv-hero-visual picture {
  display: block;
  width: 100%;
}

body.page-t010dp-detail-page .s100h-hero-section .m100hv-hero-visual__stage {
  position: relative;
  max-width: 640px;
  margin-left: auto;
}

/*
 * Keep the desktop dashboard in the approved 1366px-design position.
 * The offset follows the container gutter until it reaches 83px, then stops.
 * This lets the visual meet the right edge at 1366px without chasing the
 * viewport edge on wider desktop screens. The edge fade moves with the stage.
 */
@media (min-width: 960px) {
  body.page-t010dp-detail-page .s100h-hero-section .m100hv-hero-visual__stage {
    transform: translateX(
      clamp(
        0px,
        calc((100vw - var(--container-wide, 1200px)) / 2),
        83px
      )
    );
  }
}

body.page-t010dp-detail-page .s100h-hero-section .m100hv-hero-visual__picture {
  transform: none;
}

body.page-t010dp-detail-page .s100h-hero-section .m100hv-hero-visual__edge-fade {
  right: -1px;
  width: clamp(56px, 5vw, 72px);
  background: linear-gradient(
    90deg,
    rgba(13, 13, 13, 0) 0%,
    rgba(13, 13, 13, 0.03) 20%,
    rgba(13, 13, 13, 0.13) 42%,
    rgba(13, 13, 13, 0.38) 66%,
    rgba(13, 13, 13, 0.76) 88%,
    #0d0d0d 100%
  );
}

body.page-t010dp-detail-page .s100h-hero-section .m100hv-hero-visual img {
  width: 100% !important;
  max-width: 640px !important;
}

/* S110MS | Metrics Strip */
body.page-t010dp-detail-page .s110ms-metrics-strip-section .m110ms-metrics-strip {
  width: 100%;
}

/* S170SP-A | Social Proof — Reviews */
body.page-t010dp-detail-page .s170sp-reviews-section .logo-cloud-section {
  margin-top: 38px;
  padding-top: 0;
  padding-bottom: 0;
}

body.page-t010dp-detail-page .s170sp-reviews-section .marquee::before,
body.page-t010dp-detail-page .s170sp-reviews-section .marquee::after {
  width: 72px;
}

/* S120MG / S130FG */
body.page-t010dp-detail-page .s120mg-media-grid-section .m120mg-media-grid,
body.page-t010dp-detail-page .s130fg-feature-grid-section .m130fg-feature-grid {
  margin-top: 0;
}

body.page-t010dp-detail-page .s120mg-media-grid-section {
  margin-top: 28px;
}

/* S140PJ | Pricing Journey: five approved cards remain one desktop row. */
@media (min-width: 960px) {
  body.page-t010dp-detail-page .m140pj-pricing-journey {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* S150AM | Alternating Media */
body.page-t010dp-detail-page .s150am-alternating-media-section .m150am-alternating-media {
  margin-top: 0;
}

body.page-t010dp-detail-page .s150am-alternating-media-section .u150mr-media-row picture,
body.page-t010dp-detail-page .s150am-alternating-media-section [data-ui="U150MR"] picture {
  display: block;
  width: 100%;
}

/* S160AG | Asymmetric Grid variants */
body.page-t010dp-detail-page .s160ag-logo-overlay-section,
body.page-t010dp-detail-page .s160ag-text-overlay-section {
  background: transparent;
}

body.page-t010dp-detail-page .m160ag-asymmetric-grid {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  overflow-x: clip;
}

body.page-t010dp-detail-page .m160ag-asymmetric-grid .grid {
  width: 100%;
  grid-auto-flow: dense;
  align-items: stretch;
}

body.page-t010dp-detail-page .m160ag-asymmetric-grid .grid > *,
body.page-t010dp-detail-page .m160ag-asymmetric-grid a,
body.page-t010dp-detail-page .m160ag-asymmetric-grid article {
  min-width: 0;
  max-width: 100%;
}

body.page-t010dp-detail-page .s160ag-logo-overlay-section .m160ag-asymmetric-grid article {
  background: #191919;
}

body.page-t010dp-detail-page .s160ag-text-overlay-section .m160ag-asymmetric-grid article {
  box-shadow: none;
}

body.page-t010dp-detail-page .s160ag-logo-overlay-section .m160ag-asymmetric-grid__header {
  margin-bottom: 32px;
}

body.page-t010dp-detail-page .s160ag-text-overlay-section .m160ag-asymmetric-grid__header {
  margin-bottom: 36px;
}

/* S175CB | CTA Banner */
body.page-t010dp-detail-page .m175cb-cta-banner[data-variant="visual"] .u175vb-visual-board picture {
  display: block;
  width: 100%;
}

body.page-t010dp-detail-page .m175cb-cta-banner[data-variant="visual"] .u175vb-visual-board img {
  width: 100%;
}

body.page-t010dp-detail-page .m175cb-cta-banner[data-variant="visual"] {
  padding-top: 38px !important;
}

body.page-t010dp-detail-page .m175cb-cta-banner[data-variant="visual"] h2 {
  max-width: 860px;
  margin-inline: auto;
}

body.page-t010dp-detail-page .m175cb-cta-banner[data-variant="visual"] .btn-product-tour-dark,
body.page-t010dp-detail-page .m175cb-cta-banner[data-variant="visual"] .btn-primary {
  min-width: 183px;
}

body.page-t010dp-detail-page .m175cb-cta-banner[data-variant="visual"] .btn-stroke {
  min-width: 185px;
}

body.page-t010dp-detail-page .m175cb-cta-banner[data-variant="visual"] .u175vb-visual-board {
  margin-top: 4px;
}

body.page-t010dp-detail-page .s170sp-results-section .m110ms-metrics-strip {
  margin-bottom: 4px;
}

body.page-t010dp-detail-page .s170sp-results-section .m170sp-social-proof {
  gap: 4px !important;
}

body.page-t010dp-detail-page .s170sp-results-section .m170sp-social-proof article {
  min-height: 119px;
}

@media (max-width: 1279px) {
  /* One shared responsive gutter; nested app containers must not double it. */
  body.page-t010dp-detail-page .t010dp-detail-page-main .dnd-section > .row-fluid {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  body.page-t010dp-detail-page .t010dp-detail-page-main .dnd-section .app-container,
  body.page-t010dp-detail-page .t010dp-detail-page-main .dnd-section .app-container-wide,
  body.page-t010dp-detail-page .t010dp-detail-page-main .dnd-section .app-container-narrow {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 959px) {
  body.page-t010dp-detail-page .s100h-hero-section > .row-fluid {
    display: block !important;
  }

  body.page-t010dp-detail-page .s100h-hero-section > .row-fluid > .dnd-column,
  body.page-t010dp-detail-page .s100h-hero-section > .row-fluid > .widget-span {
    width: 100% !important;
  }

  body.page-t010dp-detail-page .s100h-hero-section .m100hv-hero-visual {
    min-height: 0;
    padding-left: 0 !important;
  }

  /*
   * Below the desktop split breakpoint, preserve the approved left gutter but
   * let the dashboard extend through the responsive right gutter. This keeps
   * the image flush with the viewport edge without introducing horizontal
   * scrolling or changing the text-column alignment.
   */
  body.page-t010dp-detail-page .s100h-hero-section .m100hv-hero-visual__stage {
    --m100hv-mobile-right-bleed: 24px;
    width: calc(100% + var(--m100hv-mobile-right-bleed));
    max-width: none;
    margin-right: calc(var(--m100hv-mobile-right-bleed) * -1);
  }

  body.page-t010dp-detail-page .s100h-hero-section .m100hv-hero-visual img {
    max-width: none !important;
  }

  body.page-t010dp-detail-page .m160ag-asymmetric-grid .grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1023px) {
  body.page-t010dp-detail-page .s120mg-media-grid-section {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }

  body.page-t010dp-detail-page .s130fg-feature-grid-section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  body.page-t010dp-detail-page .s140pj-pricing-journey-section {
    padding-top: 42px !important;
    padding-bottom: 0 !important;
  }

  body.page-t010dp-detail-page .s175cb-standard-section {
    padding-top: 7px !important;
    padding-bottom: 64px !important;
  }

  body.page-t010dp-detail-page .s150am-alternating-media-section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  body.page-t010dp-detail-page .s160ag-logo-overlay-section {
    padding-top: 52px !important;
    padding-bottom: 24px !important;
  }

  body.page-t010dp-detail-page .s170sp-results-section {
    padding-top: 72px !important;
    padding-bottom: 4px !important;
  }

  body.page-t010dp-detail-page .s175cb-visual-section {
    padding-top: 0 !important;
  }

  body.page-t010dp-detail-page .s160ag-text-overlay-section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  body.page-t010dp-detail-page .s120mg-media-grid-section .m010sh-section-heading {
    margin-bottom: 48px;
  }

  body.page-t010dp-detail-page .s130fg-feature-grid-section .m010sh-section-heading {
    margin-bottom: 40px;
  }

  body.page-t010dp-detail-page .s140pj-pricing-journey-section .m010sh-section-heading {
    margin-bottom: 28px;
  }

  body.page-t010dp-detail-page .s150am-alternating-media-section .m010sh-section-heading {
    margin-bottom: 40px;
  }

  body.page-t010dp-detail-page .s170sp-results-section .m010sh-section-heading {
    margin-bottom: 32px;
  }

  body.page-t010dp-detail-page .s160ag-logo-overlay-section .m160ag-asymmetric-grid__header,
  body.page-t010dp-detail-page .s160ag-text-overlay-section .m160ag-asymmetric-grid__header {
    margin-bottom: 32px;
  }

  body.page-t010dp-detail-page .m175cb-cta-banner[data-variant="visual"] {
    padding-top: 38px !important;
  }
}

@media (max-width: 767px) {
  body.page-t010dp-detail-page .s100h-hero-section .m100hv-hero-visual__stage {
    --m100hv-mobile-right-bleed: 16px;
  }

  body.page-t010dp-detail-page .t010dp-detail-page-main .dnd-section > .row-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.page-t010dp-detail-page .t010dp-detail-page-main .m010sh-section-heading {
    margin-bottom: 24px;
  }

  body.page-t010dp-detail-page .s120mg-media-grid-section .m010sh-section-heading {
    margin-bottom: 48px;
  }

  body.page-t010dp-detail-page .s130fg-feature-grid-section .m010sh-section-heading {
    margin-bottom: 40px;
  }

  body.page-t010dp-detail-page .s140pj-pricing-journey-section .m010sh-section-heading {
    margin-bottom: 28px;
  }

  body.page-t010dp-detail-page .s150am-alternating-media-section .m010sh-section-heading {
    margin-bottom: 40px;
  }

  body.page-t010dp-detail-page .s170sp-results-section .m010sh-section-heading {
    margin-bottom: 32px;
  }

  body.page-t010dp-detail-page .s170sp-reviews-section {
    padding-top: 48px !important;
    padding-bottom: 36px !important;
  }

  body.page-t010dp-detail-page .s170sp-reviews-section .logo-cloud-section {
    margin-top: 24px;
  }
}

@media (min-width: 1024px) {
  body.page-t010dp-detail-page .m175cb-cta-banner[data-variant="visual"] {
    padding-top: 44px !important;
  }

  body.page-t010dp-detail-page .m175cb-cta-banner[data-variant="visual"] h2 {
    font-size: 32px;
  }
}