/* Final responsive overrides. This file intentionally loads after every
   page-specific Webflow extract. */

:root {
  --desktop-header-height: 110px;
}

/* Fixed navigation must never cover headings or hash-link destinations. */
html {
  scroll-padding-top: calc(var(--desktop-header-height) + 1rem);
}

[id] {
  scroll-margin-top: calc(var(--desktop-header-height) + 1rem);
}

.page-customers,
.page-customers main,
.page-customers .main-wrapper {
  max-width: 100%;
  overflow-x: clip !important;
}

.page-customers .w-dyn-list,
.page-customers .w-dyn-items,
.page-customers .w-dyn-item,
.page-customers .cms-carousel,
.page-customers .c-wrap,
.page-customers .c-container {
  min-width: 0;
  max-width: 100%;
}

/* The whitepaper/resource block is part of the Customers page, directly
   before the newsletter. Keep one slide in normal flow so the section cannot
   collapse into the large blank gap seen in the manual comparison. */
.page-customers .v2-section_whitepaper,
.page-customers .v2-whitepaper__slider,
.page-customers .splide__track,
.page-customers .splide__list {
  min-height: 1px;
  width: 100%;
}

.page-customers .v2-whitepaper__content[hidden] {
  display: none !important;
}

.page-customers .v2-whitepaper__content:not([hidden]) {
  display: grid !important;
}

/* The export includes a second Recommendations story collection solely for
   Webflow's looping illusion. The runtime carousel already loops the primary
   collection, so displaying both creates real duplicate stories. */
.page-recommendations .cms-carousel--clone {
  display: none !important;
}

.page-recommendations .v2-blogs_tile-content_customer,
.page-recommendations .v2-blogs_title-link,
.page-recommendations .blogs_button-wrapper {
  min-height: 0 !important;
}

.page-recommendations .v2-blogs_item,
.page-recommendations .w-dyn-item {
  display: flex;
  flex-direction: column;
}

.page-recommendations .v2-blogs_tile-content_customer {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 13.5rem !important;
}

.page-recommendations .blogs_button-wrapper {
  margin-top: auto;
}

/* Jobs cards are interactive controls, not decorative wrappers. */
.page-jobs .jobs-listings__item[role="link"] {
  cursor: pointer;
}

.page-jobs .jobs-listings__item[role="link"]:focus-visible,
.accordion-top-wrapper[role="button"]:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid #ff5c28 !important;
  outline-offset: 4px !important;
}

.page-jobs .layout121_progress-bar {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 120ms linear;
}

.page-jobs .layout121_timeline-step {
  opacity: 0.45;
  transform: translateY(1rem);
  transition: opacity 320ms ease, transform 320ms ease;
}

.page-jobs .layout121_timeline-step.is-visible {
  opacity: 1;
  transform: none;
}

/* The source CMS list is copied into the visible slider by BaseLayout. Its
   page CSS otherwise overrides the hidden attribute and exposes every quote. */
.page-jobs .section_talents .w-dyn-list[hidden] {
  display: none !important;
}

.page-jobs .testimonial_slider .w-slide[hidden] {
  display: none !important;
}

.page-jobs .testimonial_slider .w-slide:not([hidden]) {
  display: block !important;
}

.page-jobs .testimonial_slider,
.page-jobs .testimonial_slider .w-slider-mask {
  height: auto !important;
  min-height: 16rem !important;
}

/* Ebook pages sit below a fixed desktop header. Keep the hero clear even if
   a page-specific stylesheet resets the main element's padding. */
@media screen and (min-width: 992px) {
  .ebook-site-page > main {
    padding-top: var(--desktop-header-height) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .page-jobs .layout121_progress-bar {
    transform: scaleY(1) !important;
  }

  .page-jobs .layout121_timeline-step {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media screen and (max-width: 991px) {
  :root {
    --mobile-header-height: 72px;
  }

  html {
    scroll-padding-top: calc(var(--mobile-header-height) + 1rem);
  }

  [id] {
    scroll-margin-top: calc(var(--mobile-header-height) + 1rem);
  }

  .home-page .c-tag_white.cc-mobile_lands-none {
    display: flex !important;
    margin-top: 1rem;
    width: 100%;
  }

  .home-page .cc-home_hero-counter {
    display: inline !important;
  }

  .page-recommendations .v2-blogs_tile-content_customer {
    height: 14rem !important;
  }

  body.nav-is-open {
    overflow: hidden !important;
  }

  body > main {
    padding-top: var(--mobile-header-height) !important;
  }

  .v2-navbar_component {
    background: #fff !important;
    min-height: var(--mobile-header-height) !important;
  }

  .v2-navbar_component.is-hidden {
    transform: none !important;
  }

  .v2-navbar_component .v2-navbar5_container {
    min-height: var(--mobile-header-height) !important;
    padding-block: 0 !important;
  }

  .v2-navbar_component .v2-navbar5_logo-link {
    padding-left: 0 !important;
  }

  .v2-navbar_component .v2-navbar5_logo {
    display: block;
    height: auto;
    max-width: 116px;
    width: 116px;
  }

  /* The same actions live inside the open menu, so do not crowd the header. */
  .v2-navbar_component .v2-navbar5_container > .c-wrap.cc-horizontal.cc-align_center {
    display: none !important;
  }

  .v2-navbar_component .v2-navbar5_menu-button {
    margin-left: auto !important;
    padding: 0 !important;
  }

  .v2-navbar_component .v2-nav_mobile-button-wrap {
    gap: 0.55rem !important;
    min-height: 44px;
    padding: 0 !important;
  }

  .v2-navbar_component .v2-navbar_menu[data-nav-menu-open] {
    background: #fff !important;
    border: 0 !important;
    display: block !important;
    height: calc(100dvh - var(--mobile-header-height)) !important;
    inset: var(--mobile-header-height) 0 auto !important;
    margin: 0 !important;
    max-height: calc(100dvh - var(--mobile-header-height)) !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 1rem 1.25rem max(2rem, env(safe-area-inset-bottom)) !important;
    position: fixed !important;
    text-align: center !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }

  .v2-navbar_component .v2-navbar5_menu-right {
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 auto !important;
    max-width: 36rem !important;
    width: 100% !important;
  }

  .v2-navbar_component .v2-dropdown {
    display: block !important;
    margin: 0 !important;
    position: relative !important;
    width: 100% !important;
  }

  .v2-navbar_component .v2-dropdown__toggle {
    align-items: center !important;
    background: transparent !important;
    display: flex !important;
    justify-content: space-between !important;
    min-height: 52px !important;
    padding: 0.75rem 0 !important;
    white-space: normal !important;
    width: 100% !important;
  }

  .v2-navbar_component .v2-dropdown__top-icon {
    flex: 0 0 auto !important;
    margin-left: 0.5rem;
    transition: transform 180ms ease;
  }

  .v2-navbar_component .v2-dropdown.w--open .v2-dropdown__top-icon,
  .v2-navbar_component .v2-dropdown__toggle.w--open .v2-dropdown__top-icon {
    transform: rotate(180deg) !important;
  }

  /* Mobile dropdowns are in-flow accordions, never floating mega menus. */
  .v2-navbar_component .v2-dropdown__list,
  .v2-navbar_component .v2-dropdown__list.cc-2,
  .v2-navbar_component .v2-dropdown__list.w--open {
    background: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    inset: auto !important;
    margin: 0 0 0.75rem !important;
    max-height: none !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0.5rem !important;
    position: static !important;
    transform: none !important;
    translate: none !important;
    width: 100% !important;
  }

  .v2-navbar_component .v2-dropdown__2col,
  .v2-navbar_component .v2-dropdown__2col.cc-2,
  .v2-navbar_component .v2-dropdown-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    grid-template-columns: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .v2-navbar_component .v2-dropdown__heading {
    color: #717171;
    font-size: 0.75rem;
    margin: 0.6rem 0.75rem 0.25rem !important;
    text-transform: uppercase;
  }

  .v2-navbar_component .v2-dropdown__item,
  .v2-navbar_component .v2-dropdown__item.cc-2 {
    align-items: center !important;
    border-radius: 8px;
    display: grid !important;
    gap: 0.75rem !important;
    grid-template-columns: 2rem minmax(0, 1fr) !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 0.7rem 0.75rem !important;
    width: 100% !important;
  }

  .v2-navbar_component .v2-dropdown__icon-container,
  .v2-navbar_component .v2-dropdown__item.cc-2 .v2-dropdown__icon-container {
    background: transparent !important;
    justify-content: center !important;
    height: 2rem !important;
    margin: 0 !important;
    min-width: 2rem !important;
    width: 2rem !important;
  }

  .v2-navbar_component .v2-dropdown__icon {
    height: 1.5rem !important;
    object-fit: contain !important;
    width: 1.5rem !important;
  }

  .v2-navbar_component .v2-dropdown__text-container,
  .v2-navbar_component .v2-dropdown__item.cc-2 .v2-dropdown__text-container {
    min-width: 0 !important;
    padding: 0 !important;
  }

  .v2-navbar_component .v2-dropdown__link-text {
    font-size: 1rem !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  .v2-navbar_component .v2-dropdown__link-subtext {
    display: block !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    margin-top: 0.15rem !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  .v2-navbar_component .mobile-cta,
  .v2-navbar_component .v2-button-secondary.show-tablet {
    margin-top: 0.75rem !important;
    width: 100% !important;
  }

  .v2-navbar_component .v2-top-nav.cc-2 {
    padding: 1rem 0 0.5rem !important;
  }
}

@media screen and (max-width: 767px) {
  /* Keep mobile footer resource titles on one consistent reading edge. */
  .footer_component .v2-footer_top-wrapper.cc-top {
    align-items: stretch !important;
    text-align: left !important;
  }

  .footer_component .v2-footer_link-list.cc-top {
    align-items: flex-start !important;
    width: 100% !important;
    text-align: left !important;
  }

  .footer_component .v2-footer_link-list.cc-top .footer_link {
    display: block;
    width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  /* Keep the fixed header entirely separate from the homepage headline. */
  .home-page > main {
    padding-top: var(--mobile-header-height) !important;
  }

  .home-page main > .c-section.cc-pt_8:first-child {
    padding-top: 2.5rem !important;
  }

  .home-page main > .c-section.cc-pt_8:first-child h1 {
    margin-top: 0 !important;
  }
}

@media screen and (max-width: 420px) {
  .v2-navbar_component .v2-menu {
    font-size: 0.95rem;
  }

  .home-page main > .c-section.cc-pt_8:first-child {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* Product and demo page repairs observed on narrow iPhone viewports. */
@media screen and (max-width: 767px) {
  /* The original demo stylesheet hides the entire video column on phones. */
  .v2-demo-page__text-area.cc-2 {
    display: flex !important;
    width: 100% !important;
    padding: 1.5rem !important;
  }

  .v2-demo-page__text-area.cc-2 .v2-demo-page__logo-link {
    display: none;
  }

  .v2-demo-page__text-area.cc-2 .video-2 {
    width: 100%;
    margin: 0 0 1.5rem;
  }

  /* Calendly's attendee-details step is taller than its initial calendar view.
     Never crop the iframe: doing so makes the final Schedule Event action
     unreachable on iOS. The extra room is preferable to a blocked conversion. */
  .v2-demo-page .calendly-inline-widget {
    height: 1120px !important;
    min-height: 1120px !important;
    width: 100% !important;
  }

  .v2-demo-page .cc-calendly {
    height: auto !important;
    min-height: 1120px !important;
    overflow: visible !important;
  }

  .v2-demo-page .calendly-inline-widget iframe {
    display: block;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Webflow leaves this 2-column grid intact on mobile, causing page overflow. */
  .mobile-omnisearch-section .c-2x1 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mobile-omnisearch-section .c-box,
  .mobile-omnisearch-section .c-wrap {
    min-width: 0;
  }

  .mobile-omnisearch-section .c-box {
    overflow: hidden;
  }

  .mobile-omnisearch-section h2,
  .mobile-omnisearch-section p {
    overflow-wrap: anywhere;
  }

  /* Reserve breathing room below the absolutely positioned hero video. */
  .chat-page .v2-header1_image-wrapper.cc-2 {
    margin-bottom: 2rem;
  }

  /* Separate the audience logo rail from the following feature headline. */
  .audience-page #features .product-highlight__header {
    padding-top: 2.5rem;
  }

  /* The secondary-feature row is hidden on mobile, so preserve its separation. */
  .email-page .product-highlight {
    padding-top: 2rem;
  }

  /* Learn listings collapse the desktop sidebar above the cards by default. */
  .blogs_component.cc-pad {
    display: flex !important;
    flex-direction: column;
  }

  .blogs_component.cc-pad > .blogs_blog-posts {
    order: 1;
  }

  .blogs_component.cc-pad > .left-form-info {
    order: 2;
    width: 100%;
    margin-top: 2rem;
  }

  /* Keep the legacy Reviews wall readable and continuous on phones. */
  .love-page .love_component {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    row-gap: 2rem !important;
  }

  .love-page .love_item,
  .love-page .love-item_quote {
    width: 100%;
    min-width: 0;
  }

  .love-page .section-hero.change.smaller {
    margin-bottom: 0 !important;
    padding-bottom: 2rem !important;
  }

  .love-page .section_wall-hero {
    padding-top: 0 !important;
  }

  .love-page .section_wall-hero > .padding-global > .padding-section-large {
    padding-top: 2rem !important;
  }

  /* About imported stale Search artwork into its mobile-only image slots. */
  .mobile-image-video {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
    overflow: hidden;
  }

  .mobile-image-video > img {
    display: block !important;
    height: 100% !important;
    object-fit: cover !important;
    width: 100% !important;
  }

  /* Partners inherited desktop widths and an oversized top offset on phones. */
  .partners-page {
    overflow-x: clip;
  }

  .partners-page .section-hero.partners-hero {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 2.5rem !important;
    padding-bottom: 3rem !important;
  }

  .partners-page .columns-3,
  .partners-page .column-3,
  .partners-page .column-13,
  .partners-page .div-block-11 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .partners-page .columns-3 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .partners-page .column-3,
  .partners-page .column-13 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .partners-page .heading-4,
  .partners-page .paragraph,
  .partners-page .section-subheading {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .partners-page .div-block-11 .w-button,
  .partners-page .hero-badge {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
  }

  .partners-page .div-block-11 {
    flex-direction: column !important;
    gap: 0.75rem;
  }

  .partners-page .hero-badge {
    height: auto !important;
    min-height: 4.7rem;
  }

  /* The exported slider is populated from the adjacent CMS list at runtime. */
  .jobs-page .testimonial_slider {
    display: block !important;
    min-height: 21rem !important;
  }

  .jobs-page .testimonial_slider .testimonoal_mask,
  .jobs-page .testimonial_slider .w-dyn-item {
    min-height: 21rem;
  }

  .jobs-page .section_talents .w-dyn-items {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(86vw, 34rem);
    gap: 1rem;
    overflow-x: auto;
    padding: 0.25rem 0 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .jobs-page .section_talents .w-dyn-item {
    scroll-snap-align: start;
  }

  .chat-page .v2-reviews-container {
    box-sizing: border-box;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.75rem;
    overflow: visible !important;
    width: 100% !important;
  }

  .chat-page .v2-reviews-container .v2-review-score {
    flex: 1 1 8rem;
    height: auto;
    max-width: min(45%, 150px);
    min-width: 0;
  }

  .home-page .c-home_hero-customers > a {
    flex-basis: min(40vw, 170px) !important;
  }

  .jobs-page .section_talents .margin-medium,
  .jobs-page .section_talents .margin-bottom.margin-small {
    margin-top: 1rem;
    margin-bottom: 0;
  }

  /* Long editorial titles and rich-text children must shrink to the viewport. */
  .blog-post-page {
    overflow-x: clip;
  }

  .blog-post-page .article-head__grid,
  .blog-post-page .article-head__grid > div,
  .blog-post-page .v2-blog-container,
  .blog-post-page .v2-blogpost5_content-wrapper,
  .blog-post-page .v2-blogpost5_content,
  .blog-post-page .v2-text-rich-text {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .blog-post-page .article-head .padding-global,
  .blog-post-page .section_blogpost5 .padding-global {
    box-sizing: border-box;
    width: 100vw !important;
    max-width: 100vw !important;
    padding-right: 1.25rem !important;
    padding-left: 1.25rem !important;
  }

  .blog-post-page .article-head__title {
    width: 100% !important;
    max-width: calc(100vw - 2.5rem) !important;
    white-space: normal !important;
    font-size: clamp(2rem, 10vw, 2.75rem) !important;
    line-height: 1.08 !important;
  }

  .blog-post-page .article-head__title,
  .blog-post-page .v2-text-rich-text h2,
  .blog-post-page .v2-text-rich-text h3,
  .blog-post-page .v2-text-rich-text h4,
  .blog-post-page .v2-text-rich-text p,
  .blog-post-page .v2-text-rich-text li {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .blog-post-page .v2-text-rich-text img,
  .blog-post-page .v2-text-rich-text iframe,
  .blog-post-page .v2-text-rich-text video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
  }

  /* Demo's expanded resource footer becomes a very long sparse column. */
  body:has(.v2-demo-page) .footer_component .v2-footer-top-container {
    display: none;
  }
}
/* Match the live CTA geometry exactly. Page-specific Webflow exports are loaded
   after site.css, so parity rules that must win belong in this final sheet. */
.v2-button-secondary,
.v2-button-secondary:hover,
.v2-button-secondary:focus-visible {
  border-width: 1px !important;
  font-weight: 600;
}

.v2-featured-case__quote {
  font-weight: 500;
}

/* Final navigation geometry: copied page sheets use several historical header
   heights, so normalize the shared chrome here (this stylesheet loads last). */
.v2-navbar5_container {
  height: auto !important;
  min-height: 76px !important;
  padding-block: .55rem !important;
}

.v2-navbar5_logo {
  width: 112px !important;
}

.v2-navbar_wrapper {
  padding-inline: clamp(1.25rem, 5vw, 4rem) !important;
}

.v2-dropdown__link-subtext {
  display: block !important;
}

.clerk-vid-desktop,
.clerk-vid-mobile {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
}

/* Keep the shared footer signup visually identical even when a product page's
   copied stylesheet contains an older version of the component. */
.footer_component .v2-newsletter-form {
  background: transparent !important;
  color: inherit !important;
  margin-inline: auto !important;
  max-width: 72rem !important;
  width: 100% !important;
}

.footer_component .v2-newsletter-form__content {
  align-items: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
}

.footer_component .v2-newsletter-form__top {
  align-items: stretch !important;
  display: flex !important;
  gap: 0.75rem !important;
}

.footer_component .v2-newsletter-form__field {
  background: #fff !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 999px !important;
  color: #333 !important;
  min-height: 46px !important;
  padding: 0.75rem 1rem !important;
}

@media screen and (max-width: 767px) {
  .v2-navbar5_container {
    min-height: 62px !important;
  }

  .v2-navbar5_logo {
    width: 100px !important;
  }

  .ebook-signal-stats__grid {
    grid-template-columns: 1fr !important;
  }

  .footer_component .v2-newsletter-form__top {
    flex-direction: column !important;
  }
}