/* Static main-page adjustments. Motion and scroll behaviour stay in styles-main.css/script.js. */
.main-header-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  color: var(--white);
  font-size: 12px;
  line-height: 1.12;
}

@media (min-width: 2200px) {
  body.main-page .lead-form__desktop-title {
    max-width: none !important;
    white-space: nowrap !important;
  }
}

.main-header-tools {
  position: absolute;
  top: calc(var(--media-inset) + var(--header-offset));
  right: var(--page-gutter);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
}

.desktop-page-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.desktop-page-menu__button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

.desktop-page-menu__button span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.desktop-page-menu__panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 190px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(5, 4, 4, 0.96);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.24);
}

.desktop-page-menu:hover .desktop-page-menu__panel,
.desktop-page-menu:focus-within .desktop-page-menu__panel,
.desktop-page-menu.is-open .desktop-page-menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.desktop-page-menu__panel a {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  line-height: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.desktop-page-menu__panel a:last-child {
  border-bottom: 0;
}

.desktop-page-menu__panel .topbar-link__icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  opacity: 0.72;
}

.desktop-page-menu__panel .topbar-link__icon--main {
  display: grid;
  grid-template-columns: repeat(2, 5px);
  grid-template-rows: repeat(2, 5px);
  gap: 2px;
}

.desktop-page-menu__panel .topbar-link__icon--main::before,
.desktop-page-menu__panel .topbar-link__icon--main::after {
  content: "";
}

.desktop-page-menu__panel .topbar-link__icon--main,
.desktop-page-menu__panel .topbar-link__icon--main::before,
.desktop-page-menu__panel .topbar-link__icon--main::after {
  background: none;
}

.desktop-page-menu__panel .topbar-link__icon--main span {
  display: none;
}

.desktop-page-menu__panel .topbar-link__icon--main {
  background:
    linear-gradient(currentColor 0 0) 0 0 / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 9px 0 / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 0 9px / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 9px 9px / 5px 5px no-repeat;
}

@media (min-width: 761px) {
  .main-page .main-choice {
    position: relative !important;
    z-index: 8 !important;
    height: 80svh !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding-top: var(--media-inset) !important;
    padding-bottom: var(--media-inset) !important;
    background: #050505 !important;
    overflow: hidden !important;
  }

  .main-page .main-choice__card {
    height: 100% !important;
    min-height: 0 !important;
  }

  .main-page .main-choice__card p {
    bottom: 24px !important;
  }

  .main-page .main-choice__arrow {
    bottom: 20px !important;
  }

  .main-page .main-comparison .comparison__stage {
    height: 80svh !important;
  }

  .main-page .main-comparison .comparison__meta {
    color: #090707 !important;
  }

  .main-page .product-showcase__hero {
    min-height: 394px !important;
    padding-top: 16px !important;
    padding-bottom: 32px !important;
    place-items: center !important;
  }

  .main-page .product-showcase__hero img {
    width: min(608px, 56%) !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  .main-page .product-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(250px, 1fr));
  }

  .main-page .product-feature--speed {
    grid-column: 1;
    grid-row: 1;
    padding-left: 20px !important;
  }

  .main-page .product-feature--speed .product-feature__icon {
    left: 20px !important;
    bottom: 18px !important;
    width: 42px !important;
    height: 17px !important;
    max-width: 42px !important;
  }

  .main-page .product-showcase__power {
    grid-column: 1;
    grid-row: 2;
  }

  .main-page .main-product-showcase .product-showcase__power {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    min-height: 250px !important;
    padding: 18px 18px 18px 20px !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  .main-page .main-product-showcase .product-showcase__power-copy {
    grid-column: 1 !important;
    z-index: 2 !important;
    max-width: 150px !important;
    align-self: start !important;
  }

  .main-page .main-product-showcase .product-showcase__power h3 {
    margin: 0 !important;
    color: #080707 !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .main-page .main-product-showcase .product-showcase__power h3 span {
    display: block !important;
    font-family: var(--heading-font) !important;
    font-size: 1em !important;
    font-style: normal !important;
    line-height: 1 !important;
  }

  .main-page .main-product-showcase .product-showcase__power h3 em {
    display: block !important;
    font-family: var(--heading-accent-font) !important;
    font-size: 1.18em !important;
    font-style: italic !important;
    font-weight: 400 !important;
    line-height: .9 !important;
  }

  .main-page .main-product-showcase .product-showcase__power p {
    max-width: 142px !important;
    margin: 12px 0 0 !important;
    color: rgba(8, 7, 7, .58) !important;
    font-size: 11px !important;
    line-height: 1.22 !important;
  }

  .main-page .main-product-showcase .product-showcase__power-media {
    position: absolute !important;
    z-index: 1 !important;
    top: 50% !important;
    right: auto !important;
    left: 75% !important;
    bottom: auto !important;
    width: min(330px, 78%) !important;
    max-width: none !important;
    height: auto !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .main-page .main-product-showcase .product-showcase__power-icon {
    position: absolute !important;
    left: 20px !important;
    bottom: 18px !important;
    width: 42px !important;
    height: 17px !important;
    max-width: 42px !important;
    object-fit: contain !important;
  }

  .main-page .product-feature--body {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .main-page .product-feature--battery {
    grid-column: 3;
    grid-row: 1;
  }

  .main-page .product-feature--battery .product-feature__icon {
    top: auto !important;
    right: auto !important;
    bottom: 18px !important;
    left: 20px !important;
  }

  .main-page .product-feature--rollers {
    grid-column: 3;
    grid-row: 2;
  }

}

@media (min-width: 1181px) {
  body.main-page:not(.header-compact) .topbar:not(.is-open) .nav,
  body.main-page:not(.header-compact) .topbar:not(.is-open) .topbar__actions {
    align-items: center !important;
    gap: 20px !important;
  }

  body.main-page:not(.header-compact) .topbar:not(.is-open) .nav {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body.main-page:not(.header-compact) .topbar:not(.is-open) .nav a,
  body.main-page:not(.header-compact) .topbar:not(.is-open) .topbar__actions > a {
    min-height: 22px !important;
    align-items: center !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  body.main-page:not(.header-compact) .topbar:not(.is-open) .topbar__actions {
    display: flex !important;
    justify-self: end !important;
  }

  body.main-page:not(.header-compact) .topbar:not(.is-open) .contact .menu-contact-icon {
    display: inline-grid !important;
    width: 1em !important;
    height: 1em !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1 !important;
    overflow: hidden !important;
    transform: translateY(5px) !important;
  }

  body.main-page.header-compact .topbar__actions .contact .menu-contact-icon {
    display: inline-grid !important;
    width: 1em !important;
    height: 1em !important;
    color: currentColor !important;
    font-size: 16px !important;
    line-height: 1 !important;
    overflow: hidden !important;
    transform: translateY(1px) !important;
  }

  body.main-page:not(.header-compact) .brand {
    top: calc(var(--media-inset) + var(--header-offset)) !important;
    left: var(--hero-left) !important;
    width: 143px !important;
    height: 42px !important;
    transform: none !important;
    transform-origin: top left !important;
  }

  body.main-page:not(.header-compact) .brand__crop {
    width: 143px !important;
    height: 42.1px !important;
  }

  body.main-page.header-compact .topbar {
    width: 398px !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 9px 14px 9px 40px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  body.main-page.header-compact .brand {
    left: calc(50% - 185px) !important;
  }

  body.main-page.header-compact .nav {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }

  body.main-page.header-compact .nav a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 22px !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  body.main-page.header-compact .nav a,
  body.main-page.header-compact .topbar__actions a {
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body.main-page.header-compact .nav a .swap-track,
  body.main-page.header-compact .topbar__actions a .swap-track {
    display: inline-grid !important;
    height: 1em !important;
    overflow: hidden !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }

  body.main-page.header-compact .nav a .swap-track > span,
  body.main-page.header-compact .topbar__actions a .swap-track > span {
    grid-area: 1 / 1 !important;
    transition: transform 520ms cubic-bezier(.22, 1, .36, 1) !important;
  }

  body.main-page.header-compact .nav a .swap-track > span:last-child,
  body.main-page.header-compact .topbar__actions a .swap-track > span:last-child {
    display: inline !important;
    transform: translateY(110%) !important;
  }

  body.main-page.header-compact .nav a:hover .swap-track > span:first-child,
  body.main-page.header-compact .topbar__actions a:hover .swap-track > span:first-child,
  body.main-page.header-compact .nav a.is-swap-hover .swap-track > span:first-child,
  body.main-page.header-compact .topbar__actions a.is-swap-hover .swap-track > span:first-child {
    transform: translateY(-110%) !important;
  }

  body.main-page.header-compact .nav a:hover .swap-track > span:last-child,
  body.main-page.header-compact .topbar__actions a:hover .swap-track > span:last-child,
  body.main-page.header-compact .nav a.is-swap-hover .swap-track > span:last-child,
  body.main-page.header-compact .topbar__actions a.is-swap-hover .swap-track > span:last-child {
    transform: translateY(0) !important;
  }

  body.main-page.header-compact .topbar__actions {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  body.main-page.header-compact .topbar__actions .audience-switch,
  body.main-page.header-compact .topbar__actions .contact .swap-track,
  body.main-page.header-compact .topbar__actions .shop {
    display: none !important;
  }

  body.main-page.header-compact .topbar__actions .contact {
    display: inline-flex !important;
    width: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
}

@media (min-width: 2200px) {
  .main-page .product-showcase__hero {
    min-height: 492px !important;
  }

  .main-page .product-showcase__hero img {
    width: min(730px, 67%) !important;
  }

  .main-page .main-product-showcase .product-showcase__power-media {
    left: 75% !important;
    width: min(500px, 118%) !important;
    max-height: none !important;
  }
}

/* Match the business page large-desktop header and hero scale. */
@media (min-width: 1600px) {
  body.home-page.main-page {
    width: 100% !important;
    min-width: 0 !important;
    zoom: 1 !important;
    overflow-x: hidden !important;
  }

  .main-page .main-hero {
    width: 100% !important;
    height: 100svh !important;
    min-height: 0 !important;
  }

  .main-page .main-hero__media {
    inset: 12px !important;
  }

  .main-page .main-hero__image {
    height: 100% !important;
    transform: translate3d(0, var(--hero-scroll-shift, 0px), 0)
      scale(calc(var(--hero-scroll-scale, 1) * 1.08)) !important;
    transition: transform 80ms linear !important;
    will-change: transform !important;
  }

  .main-page .main-hero__content {
    right: 12px !important;
    bottom: 12px !important;
    left: 42px !important;
    grid-template-columns: minmax(0, 1fr) 512px !important;
    column-gap: 36px !important;
  }

  .main-page .main-hero__content::before {
    width: 512px !important;
    height: calc(100% - 18px) !important;
  }

  .main-page .main-hero__content h1 {
    max-width: 864px !important;
    margin-bottom: 36px !important;
    font-size: 36px !important;
    line-height: 40px !important;
  }

  .main-page .main-hero__content h1 em {
    font-size: 36.1px !important;
    line-height: 34.37px !important;
  }

  .main-page .main-hero__metrics {
    margin: 0 24px !important;
    padding-top: 24px !important;
  }

  .main-page .main-hero__metric {
    min-height: 92px !important;
    gap: 20px !important;
    padding-bottom: 20px !important;
  }

  .main-page .main-hero__metric + .main-hero__metric {
    padding-left: 24px !important;
  }

  .main-page .main-hero__metric strong {
    font-size: 76px !important;
  }

  .main-page .main-hero__metric span {
    font-size: 17px !important;
  }

  .main-page .main-hero__autonomy {
    margin: 22px 24px 0 !important;
    font-size: 38px !important;
  }

  .main-page .main-hero__cta.demo {
    height: 82px !important;
    margin: 30px 24px 24px !important;
    padding: 0 32px !important;
    font-size: 17px !important;
  }
}

@media (max-width: 760px) {
  .main-header-tools {
    display: none;
  }

  .main-header-contact {
    display: none;
  }

  body.main-page .main-hero__image {
    height: calc(100% + 96px) !important;
    transform: translate3d(0, calc(var(--hero-scroll-shift, 0px) - 28px), 0)
      scale(calc(var(--hero-scroll-scale, 1) * 1.08)) !important;
    transition: transform 80ms linear !important;
    will-change: transform;
  }

  body.main-page .main-choice__card img {
    transform: translate3d(0, var(--main-choice-parallax-y, 0px), 0) scale(1.04) !important;
    transition: transform 80ms linear !important;
    will-change: transform;
  }

  body.main-page .main-comparison .comparison__image {
    top: -6% !important;
    bottom: auto !important;
    height: 112% !important;
    transform: translate3d(0, var(--main-comparison-image-shift, 0px), 0) scale(1.03) !important;
    transform-origin: center;
    will-change: transform;
  }

  /* Align the visible "after" image with the masked "before" image. */
  body.main-page .main-comparison .comparison__stage > .comparison__image {
    transform: translate3d(0, calc(var(--main-comparison-image-shift, 0px) - 5px), 0) scale(1.03) !important;
  }

  body.main-page .lead-form__image {
    transform: translate3d(0, var(--main-lead-image-shift, 0px), 0) scale(1.08) !important;
    transition: transform 80ms linear !important;
    will-change: transform;
  }

  /* Keep the pinned comparison at its pre-pin width to avoid a one-frame jump. */
  body.main-page .main-comparison.is-pinned .main-comparison__sticky {
    right: 6px !important;
    left: 6px !important;
    width: calc(100% - 12px) !important;
  }

  body.main-page #main-reviews .home-reviews__arrows {
    width: auto !important;
    height: 20px !important;
    gap: 12px !important;
    background: none !important;
  }

  body.main-page #main-reviews .home-reviews__arrow {
    display: grid !important;
    width: 37px !important;
    height: 20px !important;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit !important;
    font-size: inherit !important;
    opacity: 1 !important;
  }

  body.main-page #main-reviews .home-reviews__arrow img {
    display: block;
    width: 37px;
    height: 12px;
  }

  body.main-page #main-reviews .home-reviews__arrow--prev img {
    transform: scaleX(-1);
  }

}

/* Main page mobile hero frame: keep the bottom inset equal to the side inset. */
@media (max-width: 760px) {
  body.main-page .main-choice {
    margin-top: 6px !important;
  }
}

/* Main page fixed opening image: keep the hero media pinned during scroll. */

/* Main page mobile hero title line break. */
.main-hero-mobile-break {
  display: none;
}

@media (max-width: 760px) {
  .main-hero-mobile-break {
    display: block;
  }
}