.miniauto-page {
  --miniauto-accent: #f4a02d;
  --miniauto-hero-blur: 0px;
  --miniauto-hero-overlay: 0;
}

.miniauto-page .hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(0, 0, 0, var(--miniauto-hero-overlay));
  pointer-events: none;
}

.miniauto-page .hero__kv {
  filter: blur(var(--miniauto-hero-blur));
  will-change: filter;
}

.miniauto-intro-copy {
  position: absolute;
  top: -30vh;
  right: 0;
  left: 0;
  z-index: 4;
  width: var(--safe-width);
  margin-inline: auto;
  color: #fff;
  opacity: 0;
  text-align: center;
  will-change: opacity;
}

.miniauto-intro-copy h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  line-height: 1.25;
  font-weight: 650;
}

.miniauto-intro-copy p {
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
  font-weight: 300;
}

.miniauto-intro-copy p+p {
  margin-top: 0.8rem;
}

.miniauto-page .hero__content {
  z-index: 2;
  top: 18%;
}

.miniauto-page .hero__content h1 {
  letter-spacing: -.04em;
}

.miniauto-page .hero__content p {
  letter-spacing: .12em;
}

.miniauto-mosaic {
  position: relative;
  z-index: 2;
  padding: 16vh 0 8vh;
  overflow: visible;
}

.miniauto-mosaic__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  width: var(--safe-width);
  aspect-ratio: 895 / 486;
  margin: 0 auto;
}

.miniauto-mosaic__card {
  width: 100%;
  height: 100%;
}

.miniauto-mosaic__card:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / 3;
}

.miniauto-mosaic__card:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.miniauto-mosaic__card:nth-child(3) {
  grid-column: 3 / 5;
  grid-row: 1;
}

.miniauto-mosaic__card:nth-child(4) {
  grid-column: 2 / 4;
  grid-row: 2;
}

.miniauto-mosaic__card:nth-child(5) {
  grid-column: 4;
  grid-row: 2;
}

.miniauto-mosaic__card>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.miniauto-mosaic__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .42), transparent 48%);
  pointer-events: none;
}

.miniauto-mosaic__card .mosaic-copy {
  z-index: 2;
}

.miniauto-mosaic__card .mosaic-copy h3 {
  font-size: clamp(1.05rem, 1.35vw, 1.55rem);
}

.miniauto-mosaic__card .mosaic-copy h3 b {
  font-size: clamp(1.5rem, 1.85vw, 2.2rem);
}

.miniauto-mosaic__card .mosaic-copy p {
  max-width: 14rem;
  margin-top: .38rem;
  font-size: clamp(.68rem, .78vw, .86rem);
}

.dual-core-card__modules {
  position: absolute;
  top: 4.4rem;
  left: 1.55rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 9rem;
}

.dual-core-card__modules figure {
  margin: 0;
}

.dual-core-card__modules figcaption {
  margin-bottom: .25rem;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(.62rem, .72vw, .78rem);
  line-height: 1.2;
  white-space: nowrap;
  padding-left: .5rem;
}

.dual-core-card__modules img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.miniauto-mosaic__card--dual:hover .dual-core-card__modules img {
  transform: none;
}

.miniauto-hardware__media {
  position: relative;
  width: var(--safe-width);
  margin-top: 6vh;
}

@media (min-width: 769px) {
  .hardware-showcase__inner {
    padding-top: 12vh;
  }
}

.miniauto-hardware__media img {
  width: 100%;
  max-height: 58vh;
  object-fit: contain;
}

.miniauto-hardware__media .hardware-callout {
  width: auto;
}

.miniauto-hardware__media .hardware-callout__line {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.miniauto-callout--vision {
  top: 10%;
  left: 2.4%;
  right: 56.4%;
}

.miniauto-callout--ultrasonic {
  top: 46%;
  left: 0%;
  right: 59%;
}

.miniauto-callout--wheel {
  top: 58%;
  left: 4%;
  right: 76%;
}

.miniauto-callout--claw {
  top: 77%;
  left: 4%;
  right: 75%;
}

.miniauto-callout--frame {
  top: 18%;
  left: 61%;
  right: 4%;
}

.miniauto-callout--expansion {
  top: 34%;
  left: 60%;
  right: 4%;
}

.miniauto-callout--controller {
  top: 42%;
  left: 61%;
  right: 7%;
}

.miniauto-callout--line-sensor {
  top: 77%;
  left: 50%;
  right: 12%;
}

.miniauto-callout--motor {
  top: 89%;
  left: 60%;
  right: 8%;
}

.feature-image-section {
  position: relative;
  padding: 8vh 0 8vh;
  overflow: hidden;
}

.feature-image-section .section-heading {
  width: calc(var(--safe-width) * 1);
}

.feature-image-section__media {
  position: relative;
  width: calc(var(--safe-width) * 1);
  margin: 3.2rem auto 0;
  overflow: hidden;
  border-radius: .55rem;
  background: #151515;
}

.feature-image-section__media img,
.feature-image-section__media video {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: cover;
  background: #151515;
}

.media-placeholder {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  padding: .55rem .9rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999rem;
  background: rgba(0, 0, 0, .48);
  color: rgba(255, 255, 255, .72);
  font-size: .75rem;
  backdrop-filter: blur(8px);
}

.miniauto-page #vision {
  padding-top: 8vh;
}

.miniauto-page #vision .carousel-tabs {
  width: 44rem;
}

.perception-section,
.fade-feature,
.control-section {
  position: relative;
  padding: 8vh 0 8vh;
  overflow: hidden;
}

.fade-feature {
  padding-bottom: 16vh;
}

.control-section {
  padding-top: 16vh;
}

.perception-section .section-heading,
.fade-feature .section-heading {
  width: calc(var(--safe-width) * 1);
}

.control-section>.section-heading {
  width: var(--safe-width)
}

.perception-accordion {
  display: flex;
  gap: .6rem;
  width: calc(var(--safe-width) * 1);
  height: min(38vw, 31.5rem);
  margin: 3.2rem auto 0;
  overflow: hidden;
  transition: height .72s cubic-bezier(.22, 1, .36, 1);
}

.perception-card {
  position: relative;
  flex: 208 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: .55rem;
  background: #151515;
  cursor: pointer;
  transition: flex-grow .72s cubic-bezier(.22, 1, .36, 1), filter .45s ease;
}

.perception-card.is-active {
  flex-grow: 559;
}

.perception-card:not(.is-active) {
  filter: brightness(.72);
}

.perception-card img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transition: transform .72s cubic-bezier(.22, 1, .36, 1);
}

.perception-card:not(.is-active):hover img {
  transform: scale(1.025);
}

.perception-tabs {
  width: 30rem;
}

.fade-feature__stage {
  position: relative;
  width: calc(var(--safe-width) * 1);
  aspect-ratio: 16 / 9;
  margin: 3.2rem auto 0;
  overflow: hidden;
  border-radius: .55rem;
  background: #151515;
}

.fade-feature__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.012);
  transition: opacity .72s ease, visibility .72s ease, transform 1s cubic-bezier(.22, 1, .36, 1);
}

.fade-feature__stage img.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.fade-feature__tabs {
  width: 28rem;
}

.perception-tabs,
.fade-feature__tabs {
  justify-content: center;
  gap: 1.5rem;
  width: max-content;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.perception-tabs button,
.fade-feature__tabs button {
  flex: 0 0 auto;
  min-width: 10rem;
  height: 2.65rem;
  padding: 0 1.4rem;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999rem;
  background: #24211d;
  color: rgba(255, 255, 255, .58);
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.perception-tabs button:hover,
.fade-feature__tabs button:hover {
  border-color: rgba(255, 255, 255, .62);
  color: rgba(255, 255, 255, .88);
}

.perception-tabs button.is-active,
.fade-feature__tabs button.is-active {
  border-color: rgba(255, 255, 255, .9);
  background: #1b1916;
  color: #fff;
  font-weight: 550;
}

.miniauto-page .poster-section::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .05) 60%);
}

.miniauto-page .poster-copy {
  width: min(60rem, calc(var(--safe-width) * .64));
}

.control-section {
  --control-cover-dim: 0;
  padding-bottom: 18vh;
  background-color: #fff;
}

.control-section .section-heading h2,
.control-section .poster-copy h2 {
  color: #302e2c;
}

.control-section .section-heading p,
.control-section .poster-copy p {
  color: #302e2c;
}

.control-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #000;
  opacity: var(--control-cover-dim);
  pointer-events: none;
}

.control-row {
  display: flex;
  align-items: center;
  gap: 5rem;
  width: var(--safe-width);
  margin: 3rem auto 0;
}

.control-row--reverse {
  flex-direction: row-reverse;
}

.control-row__copy {
  flex: 0 0 29%;
}

.control-row__copy>span {
  display: block;
  margin-bottom: .75rem;
  color: var(--orange);
  font-size: .95rem;
}

.control-row__copy p span {
  display: inline;
  margin: 0;
  font-size: inherit;
}

.control-row__copy h3 {
  font-size: 2rem;
  line-height: 1.2;
  color: #302e2c;
}

.control-row__copy p {
  margin-top: 1.25rem;
  color: rgba(34, 31, 31, 0.72);
  font-size: 1rem;
  line-height: 1.65;
}

.control-row__media {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border-radius: .55rem;
}

.control-row__media img {
  width: 100%;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.control-row:hover .control-row__media img {
  transform: scale(1.025);
}

.miniauto-page .specs__image {
  width: min(38rem, 72vw);
}

@media (max-width: 1920px) {
  .miniauto-callout--wheel {
    top: 58%;
    left: 4%;
    right: 70%;
  }

  .miniauto-callout--claw {
    top: 77%;
    left: 3%;
    right: 70%;
  }
}

@media (max-width: 1600px) {
  .miniauto-intro-copy {
    top: -37vh;
  }

  .miniauto-mosaic {
    padding: 12vh 0;
  }

  .miniauto-callout--wheel {
    top: 58%;
    left: 4%;
    right: 66%;
  }

  .miniauto-callout--claw {
    top: 77%;
    left: 3%;
    right: 66%;
  }
}

@media (max-width: 1024px) {
  .miniauto-mosaic__card .mosaic-copy {
    top: 1.15rem;
    left: 1.25rem;
  }

  .dual-core-card__modules {
    top: 3.75rem;
    left: 1.25rem;
    width: 5rem;
    gap: .3rem;
  }

  .control-row {
    gap: 3rem;
  }
}

@media (max-width: 900px) {
  .miniauto-intro-copy {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    z-index: auto;
    width: calc(100% - 2rem);
    margin: 0 auto 2.5rem;
    pointer-events: auto;
  }
}

@media (max-width: 768px) {
  .miniauto-intro-copy {
    position: relative;
    top: auto;
    left: auto;
    z-index: auto;
    width: calc(100% - 2rem);
    margin: 0 auto 2.5rem;
    opacity: 0;
    transform: none;
  }

  .miniauto-intro-copy p {
    font-size: .68rem;
    line-height: 1.55;
    text-align: center;
  }

  .miniauto-page .hero__content {
    top: 17%;
  }

  .miniauto-page .hero__content h1 {
    font-size: 3.6rem;
  }

  .miniauto-page .hero__content p {
    margin-top: .8rem;
    font-size: 1.15rem;
  }

  .miniauto-mosaic {
    padding: 2.5rem 0 6rem;
  }

  .miniauto-mosaic__grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 1rem;
    width: calc(100% - 2rem);
    aspect-ratio: auto;
  }

  .miniauto-mosaic__card:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }

  .miniauto-mosaic__card:nth-child(1) {
    aspect-ratio: 4 / 5;
  }

  .miniauto-mosaic__card .mosaic-copy p {
    display: block;
  }

  .miniauto-hardware__media {
    width: calc(100% - 2rem);
  }

  .miniauto-hardware__media .hardware-callout {
    width: auto;
  }

  .miniauto-hardware__media .hardware-callout--left {
    left: 0;
    right: 53%;
  }

  .miniauto-hardware__media .hardware-callout--right {
    left: 53%;
    right: 0;
  }

  .feature-image-section,
  .perception-section,
  .fade-feature,
  .control-section {
    padding: 6rem 0;
  }

  .feature-image-section .section-heading,
  .perception-section .section-heading,
  .fade-feature .section-heading,
  .control-section>.section-heading {
    width: calc(100% - 2rem);
    padding-left: 0;
  }

  .feature-image-section__media,
  .perception-accordion,
  .fade-feature__stage {
    width: calc(100% - 2rem);
    margin-top: 2rem;
  }

  .perception-accordion {
    gap: .45rem;
    height: 16.5rem;
  }

  .perception-card {
    flex-grow: 1;
  }

  .perception-card.is-active {
    flex-grow: 4;
  }

  .perception-tabs,
  .fade-feature__tabs,
  .miniauto-page #vision .carousel-tabs {
    width: calc(100% - 2rem);
  }

  .perception-tabs,
  .fade-feature__tabs {
    gap: 1rem;
  }

  .perception-tabs button,
  .fade-feature__tabs button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 .65rem;
  }

  .miniauto-page #vision .carousel-tabs {
    overflow-x: auto;
  }

  .miniauto-page #vision .carousel-tabs button {
    flex: 0 0 auto;
    padding: 0 .85rem;
  }

  .miniauto-page .poster-copy {
    width: calc(100% - 3rem);
  }

  .control-row,
  .control-row--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem;
    width: calc(100% - 2rem);
    margin-top: 4rem;
  }

  .control-row__copy {
    flex-basis: auto;
  }

  .control-row__copy h3 {
    font-size: 1.65rem;
  }

  .media-placeholder {
    right: .75rem;
    bottom: .75rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .perception-accordion,
  .perception-card,
  .perception-card img,
  .fade-feature__stage img,
  .control-row__media img {
    transition-duration: .01ms !important;
  }
}

.miniauto-page .product-faq {
  width: var(--safe-width);
  margin: 0 auto;
  padding-top: 8rem;
  color: #30343a;
}

.miniauto-page .product-faq__heading {
  margin-bottom: 3rem;
}

.miniauto-page .product-faq__heading h2 {
  font-size: 2.4rem;
  line-height: 1.15;
}

.miniauto-page .product-faq__item {
  border-bottom: 1px solid #d7d9dd;
}

.miniauto-page .product-faq__item:last-child {
  border-bottom: none;
}

.miniauto-page .product-faq__item summary {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 1.5rem;
  gap: 1rem;
  align-items: center;
  min-height: 5.25rem;
  color: #30343a;
  cursor: pointer;
  list-style: none;
}

.miniauto-page .product-faq__item summary::-webkit-details-marker {
  display: none;
}

.miniauto-page .product-faq__item summary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}

.miniauto-page .product-faq__number {
  color: #757a80;
  font-family: var(--font-en);
  font-size: .9rem;
  font-weight: 600;
  transition: color .25s ease;
}

.miniauto-page .product-faq__question {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
}

.miniauto-page .product-faq__arrow {
  justify-self: end;
  width: 0;
  height: 0;
  border-right: .38rem solid transparent;
  border-left: .38rem solid transparent;
  border-top: .5rem solid #757a80;
  transition: transform .25s ease, border-top-color .25s ease;
}

.miniauto-page .product-faq__item[open] .product-faq__number {
  color: var(--orange);
}

.miniauto-page .product-faq__item[open] .product-faq__arrow {
  border-top-color: var(--orange);
  transform: rotate(180deg);
}

.miniauto-page .product-faq__answer {
  max-width: calc(100% - 5rem);
  padding: 0 0 2.2rem 4.5rem;
  color: #757a80;
  font-size: 1rem;
  line-height: 1.85;
}

.miniauto-page .product-faq__answer a {
  color: var(--orange);
}

.miniauto-page .product-faq__answer p+p {
  margin-top: .65rem;
}

.miniauto-page .product-faq__answer strong {
  color: #4d535b;
}

.miniauto-page .product-faq__message {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem;
  width: min(38rem, 60%);
  height: 3.5rem;
  margin: 5rem auto 0;
  overflow: hidden;
  border-radius: 2rem;
  background: #d7d9dd;
}

.miniauto-page .product-faq__message-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.miniauto-page .product-faq__message input {
  min-width: 0;
  padding: 0 1.75rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: #30343a;
  font: inherit;
  text-align: center;
}

.miniauto-page .product-faq__message input::placeholder {
  color: #757a80;
  opacity: 1;
}

.miniauto-page .product-faq__message button {
  border: 0;
  background: var(--black);
  color: var(--light);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}

.miniauto-page .product-faq__message button:hover {
  background: var(--orange);
  color: var(--black);
}

.miniauto-page .product-faq__message button:disabled {
  cursor: wait;
  opacity: .6;
}

.miniauto-page .product-faq__message:focus-within {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.miniauto-page .product-faq__success {
  position: fixed;
  inset: 0;
  width: min(30rem, calc(100% - 2rem));
  margin: auto;
  padding: 3.5rem 3rem 3rem;
  border: 0;
  border-radius: .5rem;
  background: var(--light);
  color: #30343a;
  text-align: center;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .3);
}

.miniauto-page .product-faq__success::backdrop {
  background: rgba(0, 0, 0, .56);
}

.miniauto-page .product-faq__success[open] {
  animation: miniauto-faq-dialog-in .25s ease both;
}

.miniauto-page .product-faq__success-close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: #757a80;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.miniauto-page .product-faq__success-close:hover,
.miniauto-page .product-faq__success-close:focus-visible {
  color: var(--black);
}

.miniauto-page .product-faq__success-close:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

.miniauto-page .product-faq__success-mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.5rem;
  border: 2px solid var(--orange);
  border-radius: 50%;
  color: var(--orange);
  font-size: 1.65rem;
  font-weight: 700;
}

.miniauto-page .product-faq__success p {
  font-size: 1.2rem;
  line-height: 1.6;
  font-weight: 600;
}

@keyframes miniauto-faq-dialog-in {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  .miniauto-page .product-faq {
    width: 100%;
    margin-top: 5rem;
    padding-top: 0;
  }

  .miniauto-page .product-faq__heading {
    margin-bottom: 2.5rem;
  }

  .miniauto-page .product-faq__heading h2 {
    font-size: 2rem;
  }

  .miniauto-page .product-faq__item summary {
    grid-template-columns: 2.5rem minmax(0, 1fr) 1rem;
    gap: .75rem;
    min-height: 4.75rem;
  }

  .miniauto-page .product-faq__answer {
    max-width: 100%;
    padding: 0 0 1.8rem;
    font-size: .9rem;
  }

  .miniauto-page .product-faq__message {
    grid-template-columns: minmax(0, 1fr) 6rem;
    width: 100%;
    height: 3.25rem;
    margin-top: 4rem;
  }

  .miniauto-page .product-faq__message input {
    padding: 0 .8rem;
    font-size: .8rem;
  }

  .miniauto-page .product-faq__message button {
    font-size: .85rem;
  }

  .miniauto-page .product-faq__success {
    padding: 3rem 1.5rem 2.5rem;
  }

  .miniauto-page .product-faq__success p {
    font-size: 1rem;
  }
}