.e2e-native,
.e2e-native * {

  box-sizing: border-box;

}

.e2e-native-hero .btn-flex {

  align-items: center !important;

}

.e2e-native {

  overflow: clip;

}


.e2e-native a {

  text-decoration: none;

}


.e2e-native figure,
.e2e-native ol {

  margin: 0;

}


.e2e-native .caption {

  letter-spacing: 0;

}


.e2e-native-hero {

  padding-bottom: 0;

}


.e2e-native-hero .tech-hero-wrapper {

  gap: var(--spacers--60);

}


.e2e-native-hero-title {

  max-width: 17ch;

}


.e2e-native-hero-lede {

  max-width: 62ch;

}


.e2e-native-hero-points {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  width: 50%;

  gap: var(--spacers--16);

  margin: var(--spacers--16) 0 var(--spacers--30);

}


.e2e-native-hero-points > p {

  margin: 0;

}


.e2e-native-hero-media {

  position: relative;

  height: min(68vh, 760px);

  min-height: 440px;

  margin-right: var(--spacers--padding-global);

  margin-left: var(--spacers--padding-global);

  overflow: hidden;

}


.e2e-native-hero-media > img {

  object-position: center 36%;

}


.e2e-native-stage-rail {

  position: absolute;

  right: var(--spacers--16);

  bottom: var(--spacers--16);

  left: var(--spacers--16);

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  color: var(--colors--white);

  background: rgba(30, 30, 30, 0.82);

  border: 1px solid rgba(255, 255, 255, 0.18);

  backdrop-filter: blur(8px);

}


.e2e-native-stage-rail > span {

  padding: var(--spacers--10);

  text-align: center;

  border-right: 1px solid rgba(255, 255, 255, 0.14);

}


.e2e-native-stage-rail > span:last-child {

  color: var(--colors--black);

  background: var(--colors--neon-yellow);

  border-right: 0;

}


.e2e-native-category {

  border-top: 1px solid rgba(255, 255, 255, 0.08);

}


.e2e-native-section-copy {

  width: 58.3333%;

  max-width: 48rem;

  margin-left: auto;

}


.e2e-native-model-grid {

  display: grid;

  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

  gap: var(--spacers--60);

  padding-top: var(--spacers--60);

  border-top: 1px solid rgba(255, 255, 255, 0.14);

}


.e2e-native-model-grid > div:first-child {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: var(--spacers--20);

}


.e2e-native-model-stack {

  display: grid;

  gap: var(--spacers--8);

}


.e2e-native-model-stack > div {

  display: grid;

  grid-template-columns: 2.5rem minmax(0, 1fr);

  gap: 0 var(--spacers--16);

  align-content: center;

  min-height: 6.5rem;

  padding: var(--spacers--20);

  color: var(--colors--white);

  background: #000;

  border: 1px solid rgba(255, 255, 255, 0.14);

}


.e2e-native-model-stack > div:nth-child(2) {

  margin-right: var(--spacers--16);

  margin-left: var(--spacers--16);

  color: var(--colors--black);

  background: var(--colors--neon-yellow);

  border-color: var(--colors--neon-yellow);

}


.e2e-native-model-stack > div:nth-child(2) .txt-light-grey {

  color: var(--colors--black);

}


.e2e-native-model-stack span {

  grid-row: 1 / 3;

}


.e2e-native-model-stack small {

  font-size: 0.8rem;

}


.e2e-native-input,
.e2e-native-fixes,
.e2e-native-faq {

  background: var(--colors--white);

}


.e2e-native-section-head {

  display: grid;

  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);

  gap: var(--spacers--60);

  align-items: end;

  margin-bottom: var(--spacers--60);

}


.e2e-native-section-head > div {

  display: flex;

  flex-direction: column;

  gap: var(--spacers--20);

}


.e2e-native-section-head > p {

  padding-bottom: 0.25rem;

}


.e2e-native-input .e2e-native-section-head {

  grid-template-columns: 1fr;

  align-items: start;

}


.e2e-native-input .e2e-native-section-head > p {

  width: min(100%, 48rem);

  margin-left: auto;

}


.e2e-native-input-title > span {

  display: block;

}


.e2e-native-comparison-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: var(--spacers--16);

}


.e2e-native-comparison-card {

  display: flex;

  min-height: 34rem;

  padding: var(--spacers--40);

  flex-direction: column;

  align-items: flex-start;

}


.e2e-native-comparison-card h3 {

  max-width: 13ch;

  margin-top: var(--spacers--40);

}


.e2e-native-comparison-typical .label.white {

  flex: none;

  color: var(--colors--black);

  white-space: nowrap;

}


.e2e-native-comparison-typical h3 {

  max-width: none;

}


.e2e-native-comparison-dazzl h3 {

  max-width: none;

}


.e2e-native-comparison-card ol {

  display: grid;

  width: 100%;

  margin-top: auto;

  margin-bottom: var(--spacers--40);

  padding: 0;

  list-style: none;

}


.e2e-native-comparison-card li {

  display: grid;

  grid-template-columns: 2.25rem minmax(0, 1fr);

  gap: var(--spacers--10);

  padding: var(--spacers--16) 0;

  border-top: 1px solid currentColor;

}


.e2e-native-comparison-card li > span {

  opacity: 0.55;

}


.e2e-native-comparison-typical {

  color: var(--colors--white);

  background: #000;

}


.e2e-native-comparison-typical li {

  border-color: rgba(255, 255, 255, 0.16);

}


.e2e-native-comparison-dazzl {

  color: var(--colors--black);

  background: var(--colors--neon-yellow);

}


.e2e-native-comparison-dazzl li {

  border-color: rgba(0, 0, 0, 0.18);

}


.e2e-native-logo {

  width: 141px;

  height: auto;

}


.e2e-native-workflow {

  background: #000;

}


.e2e-native-workflow-list {

  display: grid;

  gap: var(--spacers--16);

}


.e2e-native-workflow-card {

  display: grid;

  grid-template-columns: 3rem minmax(17rem, 0.82fr) minmax(22rem, 1.18fr);

  gap: var(--spacers--30);

  min-height: 28rem;

  padding: var(--spacers--20);

  background: var(--colors--black);

  border: 1px solid rgba(255, 255, 255, 0.12);

}


.e2e-native-workflow-number {

  padding-top: var(--spacers--10);

}


.e2e-native-workflow-copy {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  gap: var(--spacers--20);

  padding: var(--spacers--20) 0;

}


.e2e-native-workflow-copy > p:not(.caption) {

  max-width: 36rem;

}


.e2e-native-tags {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: var(--spacers--10);

  margin-top: var(--spacers--10);

}


.e2e-native-tags > .caption {

  padding: var(--spacers--8);

  border: 1px solid rgba(255, 255, 255, 0.18);

}


.e2e-native-tags > .label {

  color: var(--colors--black);

}


.e2e-native-workflow-media {

  min-height: 25rem;

  overflow: hidden;

}


.e2e-native-workflow-card:nth-child(2) .e2e-native-workflow-media img,
.e2e-native-workflow-card:nth-child(4) .e2e-native-workflow-media img {

  object-position: center top;

}


.e2e-native-fixes-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: var(--spacers--16);

}


.e2e-native-fix-card {

  padding: var(--spacers--16) var(--spacers--16) var(--spacers--30);

  background: var(--colors--white);

  border: 1px solid rgba(0, 0, 0, 0.18);

}


.e2e-native-fix-media {

  height: 22rem;

  margin-bottom: var(--spacers--30);

}


.e2e-native-fix-media .tech-features-typical,
.e2e-native-fix-media .tech-features-dazzl {

  justify-content: flex-end;

  background-position: center;

}


.e2e-native-fix-card h3 {

  margin-top: var(--spacers--10);

  margin-bottom: var(--spacers--16);

}


.e2e-native-fix-card > p:last-child {

  max-width: 35rem;

}


.e2e-native-gallery {

  padding-top: var(--spacers--120);

  background: var(--colors--black);

}


.e2e-native-gallery .tech-case-studies-intro > div {

  display: flex;

  flex-direction: column;

  gap: var(--spacers--20);

}


.e2e-native-gallery .gallery-collection {

  width: 100%;

  padding-right: var(--spacers--padding-global);

  padding-left: var(--spacers--padding-global);

}


.e2e-native-gallery .gallery-list {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: var(--spacers--16);

  width: 100%;

}


.e2e-native-gallery .gallery-item {

  width: 100% !important;

  height: auto !important;

  aspect-ratio: 2 / 3 !important;

  margin: 0 !important;

  padding: 0 !important;

  overflow: hidden;

  background: transparent !important;

}


.e2e-native-gallery .gallery-item > img {

  display: block !important;

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;

  object-fit: cover !important;

  object-position: center !important;

}


.e2e-native-guarantee {

  padding: var(--spacers--120) var(--spacers--padding-global);

  background: var(--colors--neon-yellow);

}


.e2e-native-guarantee-grid {

  display: grid;

  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);

  gap: var(--spacers--60);

  align-items: end;

}


.e2e-native-guarantee-grid > div {

  display: flex;

  flex-direction: column;

  gap: var(--spacers--20);

}


.e2e-native-guarantee-list {

  display: grid;

  margin-top: var(--spacers--20);

}


.e2e-native-guarantee-list > span {

  padding: var(--spacers--16) 0;

  border-top: 1px solid rgba(0, 0, 0, 0.24);

}


.e2e-native-proof {

  background: var(--colors--black);

}


.e2e-native-proof-grid {

  display: grid;

  grid-template-columns: minmax(20rem, 0.9fr) minmax(0, 1.1fr);

  gap: var(--spacers--60);

  align-items: center;

}


.e2e-native-proof-media {

  height: 42rem;

  overflow: hidden;

}


.e2e-native-proof-copy {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: var(--spacers--30);

}


.e2e-native-metrics {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  width: 100%;

  margin-top: var(--spacers--20);

  border-top: 1px solid rgba(255, 255, 255, 0.14);

  border-bottom: 1px solid rgba(255, 255, 255, 0.14);

}


.e2e-native-metrics > div {

  min-height: 8rem;

  padding: var(--spacers--20);

  border-right: 1px solid rgba(255, 255, 255, 0.14);

}


.e2e-native-metrics > div:first-child {

  padding-left: 0;

}


.e2e-native-metrics > div:last-child {

  border-right: 0;

}


.e2e-native-end-state {

  height: auto;

  min-height: 100vh;

  padding-top: var(--spacers--120);

  padding-bottom: var(--spacers--120);

  color: #1e1e1e !important;

  background-color: #e9ff94 !important;

  background-image: none !important;

}


.e2e-native-end-state-inner {

  display: flex !important;

  width: 100%;

  flex-direction: column !important;

  align-items: center !important;

  gap: var(--spacers--40, 2.5rem) !important;

  text-align: center !important;

}


.e2e-native-end-state-inner > h2 {

  max-width: 16ch;

  margin-right: auto !important;

  margin-left: auto !important;

  color: #1e1e1e !important;

  text-align: center !important;

}


.e2e-native-end-state-inner > .caption,
.e2e-native-end-state-inner > .heading-h5 {

  margin-right: auto !important;

  margin-left: auto !important;

  color: #1e1e1e !important;

  text-align: center !important;

}


.e2e-native-end-state-inner > .heading-h5 {

  max-width: 48rem;

}


.e2e-native-end-state-inner > h2 .txt-dark-grey {

  color: #6f6f6f !important;

}


.e2e-native-end-state .main-btn {

  align-self: center !important;

  margin-right: auto !important;

  margin-left: auto !important;

  color: var(--colors--white);

  background: var(--colors--black);

}


.e2e-native-end-state .main-btn .main-btn-txt {

  color: var(--colors--white);

}


.e2e-native-actions-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  width: min(100%, 60rem);

  margin-right: auto !important;

  margin-left: auto !important;

}


.e2e-native-actions-grid article {

  display: flex;

  min-height: 17rem;

  padding: var(--spacers--40);

  flex-direction: column;

  justify-content: space-between;

  text-align: left;

  color: #ffffff !important;

  background: #1e1e1e !important;

  border: 1px solid rgba(255, 255, 255, 0.14);

}


.e2e-native-actions-grid article:first-child h4 {

  color: #ffffff !important;

}


.e2e-native-actions-grid article:first-child .caption {

  color: #b8b8b8 !important;

}


.e2e-native-actions-grid article:last-child {

  color: #1e1e1e !important;

  background: #ffffff !important;

  border-color: #ffffff !important;

}


.e2e-native-actions-grid article:last-child h4,
.e2e-native-actions-grid article:last-child .caption {

  color: #1e1e1e !important;

}


.e2e-native-faq-head {

  display: flex;

  max-width: 48rem;

  flex-direction: column;

  gap: var(--spacers--20);

}


.e2e-native-faq-list {

  margin-top: var(--spacers--60);

  border-top: 1px solid rgba(0, 0, 0, 0.2);

}


.e2e-native-faq-list details {

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);

}


.e2e-native-faq-list summary {

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  min-height: 0;

  padding: var(--spacers--30) 0;

  align-items: center;

  gap: var(--spacers--30);

  font-family: var(--font-family--main);

  font-size: var(--typography--h5);

  letter-spacing: -0.02em;

  cursor: pointer;

  list-style: none;

}


.e2e-native-faq-question {

  text-align: left;

}


.e2e-native-faq-list summary::-webkit-details-marker {

  display: none;

}


.e2e-native-faq-list summary::after {

  content: "+";

  flex: none;

  color: var(--colors--dark-grey);

  font-family: var(--font-family--secondary);

  font-size: var(--typography--h4);

}


.e2e-native-faq-list details[open] summary::after {

  content: "−";

}


.e2e-native-faq-list details > p {

  max-width: 48rem;

  padding: 0 0 var(--spacers--30);

}


@media screen and (max-width: 991px) {

  .e2e-native-section-copy {

    width: 75%;

  }


  .e2e-native-model-grid,
  .e2e-native-section-head,
  .e2e-native-guarantee-grid,
  .e2e-native-proof-grid {

    grid-template-columns: 1fr;

  }


  .e2e-native-workflow-card {

    grid-template-columns: 3rem minmax(0, 1fr);

  }


  .e2e-native-workflow-media {

    grid-column: 1 / 3;

  }


  .e2e-native-proof-media {

    height: 36rem;

  }


  .e2e-native-gallery .gallery-list {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}


@media screen and (max-width: 767px) {

  .e2e-native-hero-media {

    height: 31rem;

    min-height: 0;

  }

  
.e2e-native-hero-points {

    grid-template-columns: 1fr;

    width: 100%;

  
  .e2e-native-stage-rail {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }


  .e2e-native-stage-rail > span:nth-child(2),
  .e2e-native-stage-rail > span:nth-child(3),
  .e2e-native-stage-rail > span:nth-child(4) {

    display: none;

  }


  .e2e-native-section-copy {

    width: 100%;

  }


  .e2e-native-comparison-grid,
  .e2e-native-fixes-grid,
  .e2e-native-actions-grid {

    grid-template-columns: 1fr;

  }


  .e2e-native-comparison-card {

    min-height: 31rem;

    padding: var(--spacers--30);

  }


  .e2e-native-workflow-card {

    grid-template-columns: 1fr;

    padding: var(--spacers--16);

  }


  .e2e-native-workflow-media {

    grid-column: auto;

    min-height: 20rem;

  }


  .e2e-native-fix-media {

    height: 19rem;

  }


  .e2e-native-proof-media {

    height: 30rem;

  }


  .e2e-native-metrics {

    grid-template-columns: 1fr;

  }


  .e2e-native-metrics > div,
  .e2e-native-metrics > div:first-child {

    min-height: 6rem;

    padding: var(--spacers--16) 0;

    border-right: 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.14);

  }


  .e2e-native-metrics > div:last-child {

    border-bottom: 0;

  }


  .e2e-native-actions-grid article {

    min-height: 13rem;

    padding: var(--spacers--30);

  }

}


@media screen and (max-width: 479px) {

  .e2e-native-gallery .gallery-list {

    grid-template-columns: 1fr;

  }

}


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

  .e2e-native {

    scroll-behavior: auto;

  }

}
