.airnav-radar-hero {
  position: relative;
  height: 620px;
  overflow: hidden;
  background: var(--airnav-color-canvas);
}

.airnav-radar-hero__layout {
  position: relative;
  z-index: 1;
  height: 100%;
}

.airnav-radar-hero__content {
  position: absolute;
  top: 171px;
  left: 0;
  width: 606px;
}

.airnav-radar-hero__eyebrow,
.airnav-radar-hero__title,
.airnav-radar-hero__subtitle {
  margin: 0;
}

.airnav-radar-hero__eyebrow {
  color: var(--airnav-color-green);
  font-family: var(--airnav-font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}

.airnav-radar-hero__title {
  margin-top: 20px;
  color: var(--airnav-color-forest);
  font-family: var(--airnav-font-display);
  font-size: 80px;
  font-weight: 400;
  letter-spacing: -1.6px;
  line-height: 1.1;
}

.airnav-radar-hero__subtitle {
  margin-top: 12px;
  color: rgba(17, 32, 27, 0.7);
  font-family: var(--airnav-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 27px;
}

.airnav-radar-hero__cta {
  width: 150px;
  min-width: 150px;
  height: 60px;
  margin-top: 44px;
  padding: 16px 32px;
}

.airnav-radar-hero__world-map {
  position: absolute;
  top: 49px;
  left: calc(50% - 540px);
  width: 927.402px;
  height: 522px;
  pointer-events: none;
}

.airnav-radar-hero__world-map img {
  width: 100%;
  height: 100%;
}

.airnav-radar-hero__globe-source {
  position: absolute;
  top: 22px;
  left: calc(50% - 353px);
  width: 1031px;
  height: 576px;
  pointer-events: none;
  -webkit-mask-image: url("../images/airnav-radar/airnav-radar-hero-globe-mask.svg");
  -webkit-mask-position: 398px 15px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 547px 549px;
  mask-image: url("../images/airnav-radar/airnav-radar-hero-globe-mask.svg");
  mask-position: 398px 15px;
  mask-repeat: no-repeat;
  mask-size: 547px 549px;
}

.airnav-radar-hero__globe-image {
  width: 1031px;
  max-width: none;
  height: 576px;
  object-fit: cover;
}

.airnav-radar-next-gen {
  height: 619px;
  overflow: hidden;
  background: var(--airnav-color-surface);
}

.airnav-radar-next-gen__container {
  position: relative;
  height: 100%;
}

.airnav-radar-next-gen__content {
  position: absolute;
  top: 86px;
  left: 0;
  width: 413px;
}

.airnav-radar-next-gen__title,
.airnav-radar-next-gen__body p {
  margin: 0;
}

.airnav-radar-next-gen__title {
  color: var(--airnav-color-forest);
  font-family: var(--airnav-font-display);
  font-size: 64px;
  font-weight: 400;
  letter-spacing: -1.28px;
  line-height: 1.1;
}

.airnav-radar-next-gen__title span {
  display: block;
}

.airnav-radar-next-gen__title span + span {
  color: var(--airnav-color-green);
}

.airnav-radar-next-gen__divider {
  width: 80px;
  height: 1px;
  margin-top: 32px;
  background: var(--airnav-color-border);
}

.airnav-radar-next-gen__body {
  margin-top: 32px;
  color: rgba(17, 32, 27, 0.7);
  font-family: var(--airnav-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.airnav-radar-next-gen__body p + p {
  margin-top: 24px;
}

.airnav-radar-next-gen__visual {
  position: absolute;
  top: 72px;
  left: 476px;
  width: 804px;
  height: 474.616px;
  overflow: hidden;
  background: var(--airnav-color-canvas);
  border: 0.949px solid #b8ccc3;
  border-radius: 15.188px;
  box-shadow: 0 11.391px 37.969px rgba(184, 204, 195, 0.7);
}

.airnav-radar-next-gen__image {
  position: absolute;
  top: 11.391px;
  left: 11.271px;
  width: calc(100% - 10.322px);
  height: auto;
  aspect-ratio: 1946 / 1108;
  max-width: none;
  object-fit: cover;
}

/* Narrower than 1440 the text keeps its size, so the screenshot card shrinks instead: it keeps its 63px gap to the text and ends at the container edge, centred in the section as at 1440. */
@media (min-width: 1101px) and (max-width: 1439px) {
  .airnav-radar-next-gen__visual {
    top: 50%;
    width: calc(100% - 476px);
    height: auto;
    aspect-ratio: 804 / 474.616;
    /* Half the card's height (a margin percentage is of the container's width). */
    margin-top: calc((100% - 476px) * -0.295159);
  }

  .airnav-radar-next-gen__image {
    top: 2.4%;
    left: 1.4019%;
    width: 98.7162%;
  }
}

.airnav-radar-highlights {
  overflow: hidden;
  padding: 140px 0;
  background: var(--airnav-color-canvas);
}

.airnav-radar-highlights__header {
  position: relative;
  width: 1281px;
  height: 70px;
}

.airnav-radar-highlights__heading,
.airnav-radar-highlights__copy h3,
.airnav-radar-highlights__body,
.airnav-radar-highlights__points {
  margin: 0;
}

.airnav-radar-highlights__heading {
  color: var(--airnav-color-forest);
  font-family: var(--airnav-font-display);
  font-size: 64px;
  font-weight: 400;
  letter-spacing: -1.28px;
  line-height: 1.1;
}

.airnav-radar-highlights__heading span + span {
  color: var(--airnav-color-green);
}

.airnav-radar-highlights__header-divider {
  position: absolute;
  top: 54px;
  left: 557px;
  width: 723px;
  height: 1px;
}

/*
 * Where the rule shows, it runs from 40px after the title to the row's end,
 * as in the design; a longer title shortens it, down to 80px, and only then
 * wraps. The row grows with it instead of the title running over the rule.
 */
@media (min-width: 1357px) {
  .airnav-radar-highlights__header {
    display: flex;
    align-items: flex-start;
    column-gap: 40px;
    height: auto;
  }

  .airnav-radar-highlights__heading {
    flex: 0 0 auto;
    max-width: calc(100% - 120px);
    /* A line is 70.4px; the row ends at the design's 70px. */
    margin-bottom: calc(70px - 64px * 1.1);
  }

  .airnav-radar-highlights__header-divider {
    position: static;
    flex: 0 1 723px;
    min-width: 80px;
    margin: 54px 1px 0 auto;
  }
}

.airnav-radar-highlights__rows {
  display: grid;
  gap: 140px;
  margin-top: 64px;
}

.airnav-radar-highlights__row {
  display: grid;
  grid-template-columns: 588px 619px;
  column-gap: 74px;
  height: 435px;
}

.airnav-radar-highlights__row--reversed {
  grid-template-columns: 619px 588px;
}

.airnav-radar-highlights__row--reversed .airnav-radar-highlights__panel {
  grid-column: 2;
}

.airnav-radar-highlights__row--reversed .airnav-radar-highlights__copy {
  grid-column: 1;
  grid-row: 1;
}

.airnav-radar-highlights__panel,
.airnav-radar-highlights__crop {
  position: relative;
  width: 588px;
  height: 435px;
  overflow: hidden;
}

.airnav-radar-highlights__panel {
  background: var(--airnav-color-canvas);
  border: 5px solid var(--airnav-color-canvas);
  border-radius: 16px;
  box-shadow: 0 11.391px 37.969px rgba(184, 204, 195, 0.7);
}

.airnav-radar-highlights__row--2 .airnav-radar-highlights__panel,
.airnav-radar-highlights__row--4 .airnav-radar-highlights__panel {
  background: var(--airnav-color-surface);
}

.airnav-radar-highlights__row--3 .airnav-radar-highlights__panel,
.airnav-radar-highlights__row--5 .airnav-radar-highlights__panel,
.airnav-radar-highlights__row--7 .airnav-radar-highlights__panel {
  background: #fcfcfc;
}

.airnav-radar-highlights__row--6 .airnav-radar-highlights__panel {
  background: #0b2f4b;
}

.airnav-radar-highlights__crop {
  background: var(--airnav-color-canvas);
}

.airnav-radar-highlights__image {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: cover;
}

.airnav-radar-highlights__row--1 .airnav-radar-highlights__image {
  top: 0;
  left: 0;
  width: 762px;
  height: 435px;
}

.airnav-radar-highlights__row--2 .airnav-radar-highlights__image {
  top: -40px;
  left: 0;
  width: 961px;
  height: 475px;
}

.airnav-radar-highlights__row--3 .airnav-radar-highlights__image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.airnav-radar-highlights__row--4 .airnav-radar-highlights__image {
  top: 0;
  left: -31px;
  width: 650px;
  height: 435px;
}

.airnav-radar-highlights__row--5 .airnav-radar-highlights__image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Fills the frame with the whole runway in view: the map is cropped evenly either side of the airport. */
.airnav-radar-highlights__row--6 .airnav-radar-highlights__image {
  top: 0;
  left: -77px;
  width: 833px;
  height: 435px;
}

.airnav-radar-highlights__row--7 .airnav-radar-highlights__crop {
  top: 0;
  left: -43px;
  width: 673px;
  height: 440px;
}

.airnav-radar-highlights__row--7 .airnav-radar-highlights__image {
  top: -8.008px;
  left: -132.446px;
  width: 805.379px;
  height: 443.212px;
}

.airnav-radar-highlights__copy {
  align-self: start;
  margin-top: var(--airnav-radar-highlight-copy-top);
}

.airnav-radar-highlights__copy h3 {
  color: var(--airnav-color-forest);
  font-family: var(--airnav-font-display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.3;
}

.airnav-radar-highlights__body {
  margin-top: 40px;
  color: rgba(17, 32, 27, 0.7);
  font-family: var(--airnav-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

.airnav-radar-highlights__points {
  display: grid;
  gap: 20px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}

.airnav-radar-highlights__points li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  min-height: 22px;
  color: var(--airnav-color-forest);
  font-family: var(--airnav-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

.airnav-radar-highlights__points li::before {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  content: "";
  background: url("../icons/airnav-radar-check-circle.svg") center / contain no-repeat;
}

.airnav-radar-experience {
  height: 1003px;
  margin-bottom: 140px;
  overflow: hidden;
  background: var(--airnav-color-canvas);
}

.airnav-radar-experience__container {
  position: relative;
  height: 100%;
}

.airnav-radar-experience__header {
  position: absolute;
  top: 0;
  left: 296px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 689px;
  height: 102px;
}

.airnav-radar-experience__header h2,
.airnav-radar-experience__content h3,
.airnav-radar-experience__eyebrow,
.airnav-radar-experience__body {
  margin: 0;
}

.airnav-radar-experience__header h2 {
  color: var(--airnav-color-forest);
  font-family: var(--airnav-font-display);
  font-size: 64px;
  font-weight: 400;
  letter-spacing: -1.28px;
  line-height: 1.1;
  white-space: nowrap;
}

.airnav-radar-experience__header h2 span + span {
  color: var(--airnav-color-green);
}

.airnav-radar-experience__header img {
  width: 80px;
  height: 1px;
}

.airnav-radar-experience__cards {
  position: absolute;
  top: 134px;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, 630px);
  gap: 20px;
}

.airnav-radar-experience__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 630px;
  height: 869px;
  padding: 52px 32px;
  overflow: hidden;
  border-radius: 16px;
}

.airnav-radar-experience__card::before,
.airnav-radar-experience__card::after {
  position: absolute;
  z-index: 0;
  width: var(--airnav-radar-experience-glow-size);
  height: var(--airnav-radar-experience-glow-size);
  content: "";
  background: var(--airnav-radar-experience-glow) center / cover no-repeat;
  pointer-events: none;
}

.airnav-radar-experience__card--web {
	--airnav-radar-experience-glow-size: 693px;
	--airnav-radar-experience-glow: url("../images/airnav-radar/airnav-radar-experience-web-glow.webp");
	background: var(--airnav-color-surface);
}

.airnav-radar-experience__card--web::before {
	bottom: -260px;
	left: -260px;
}

.airnav-radar-experience__card--web::after {
	top: -260px;
	right: -260px;
}

.airnav-radar-experience__card--mobile {
	--airnav-radar-experience-glow-size: 741px;
	--airnav-radar-experience-glow: url("../images/airnav-radar/airnav-radar-experience-mobile-glow.webp");
	background: #f0f8fc;
}

.airnav-radar-experience__card--mobile::before {
	bottom: -270px;
	left: -270px;
}

.airnav-radar-experience__card--mobile::after {
	top: -420px;
	right: -120px;
}

.airnav-radar-experience__content,
.airnav-radar-experience__monitor-scale,
.airnav-radar-experience__monitor,
.airnav-radar-experience__phones-scale,
.airnav-radar-experience__phones,
.airnav-radar-experience__web-cta,
.airnav-radar-experience__stores {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.airnav-radar-experience__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 384px;
  height: 183px;
  text-align: center;
}

.airnav-radar-experience__card--mobile .airnav-radar-experience__content {
  width: 420px;
}

.airnav-radar-experience__eyebrow {
  color: var(--airnav-color-green);
  font-family: var(--airnav-font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}

.airnav-radar-experience__content h3 {
  color: var(--airnav-color-forest);
  font-family: var(--airnav-font-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.64px;
  line-height: 1.2;
}

.airnav-radar-experience__body {
  color: var(--airnav-color-ink);
  font-family: var(--airnav-font-body);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.36px;
  line-height: 1.2;
}

.airnav-radar-experience__monitor {
  width: 529px;
  height: 442px;
}

.airnav-radar-experience__monitor-scale {
  width: 529px;
  height: 442px;
}

.airnav-radar-experience__monitor-frame {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 529.59px;
  height: 435.862px;
  max-width: none;
}

.airnav-radar-experience__monitor-base {
  position: absolute;
  z-index: 2;
  top: 409.864px;
  left: -12.826px;
  width: 555.653px;
  height: 45.41px;
  max-width: none;
}

.airnav-radar-experience__monitor-screen {
  position: absolute;
  z-index: 1;
  top: 5.649px;
  left: 5.648px;
  width: 518.704px;
  height: 292.771px;
  overflow: hidden;
  background: #fcfcfc;
}

.airnav-radar-experience__monitor-image {
  position: absolute;
  top: 7.021px;
  left: 5.24px;
  width: 519.519px;
  height: 281.719px;
  max-width: none;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
}

.airnav-radar-experience__web-cta {
  width: 356px;
  min-width: 356px;
}

.airnav-radar-experience__phones {
  display: flex;
  gap: 32px;
  width: 460px;
  height: 442px;
}

.airnav-radar-experience__phones-scale {
  width: 460px;
  height: 442px;
}

.airnav-radar-experience__phone {
  position: relative;
  flex: 0 0 215px;
  width: 215px;
  height: 442px;
  overflow: hidden;
  border-radius: 32px;
}

.airnav-radar-experience__phone-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.airnav-radar-experience__stores {
  display: flex;
  gap: 67px;
  width: 427px;
  height: 60px;
}

.airnav-radar-experience__stores > a,
.airnav-radar-experience__stores > span {
  position: relative;
  display: block;
  width: 180px;
  height: 60px;
  overflow: hidden;
  color: var(--airnav-color-canvas);
  background: #000;
  border: 1.5px solid #a6a6a6;
  border-radius: 9px;
	text-decoration: none;
}

.airnav-radar-experience__stores > a:focus-visible {
	outline: 3px solid var(--airnav-color-green);
	outline-offset: 3px;
}

.airnav-radar-experience__store-play-icon,
.airnav-radar-experience__store-apple-icon {
  position: absolute;
  top: 10.5px;
  left: 10.5px;
}

.airnav-radar-experience__store-kicker,
.airnav-radar-experience__store-apple-kicker,
.airnav-radar-experience__store-apple-name {
  position: absolute;
  left: 52.5px;
  color: var(--airnav-color-canvas);
}

.airnav-radar-experience__store-kicker {
  top: 6px;
  font-family: Arial, sans-serif;
  font-size: 15px;
  line-height: 18px;
}

.airnav-radar-experience__store-play-wordmark {
  position: absolute;
  top: 28.5px;
  left: 52.5px;
  width: 111px;
  height: 22.5px;
  transform: scaleY(-1);
}

.airnav-radar-experience__store-apple-kicker {
  top: 8.25px;
  font-family: Arial, sans-serif;
  font-size: 13.5px;
  line-height: 13.5px;
}

.airnav-radar-experience__store-apple-name {
  top: 21.75px;
  font-family: Arial, sans-serif;
  font-size: 27px;
  letter-spacing: -0.705px;
  line-height: 27px;
}

@media (max-width: 1356px) {
  .airnav-radar-highlights {
    padding: 96px 0;
  }

  .airnav-radar-highlights__header {
    width: 100%;
    height: auto;
  }

  .airnav-radar-highlights__header-divider {
    display: none;
  }

  .airnav-radar-highlights__rows {
    gap: 72px;
    margin-top: 56px;
  }

  .airnav-radar-highlights__row,
  .airnav-radar-highlights__row--reversed {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 40px;
  }

  .airnav-radar-highlights__row--reversed .airnav-radar-highlights__panel,
  .airnav-radar-highlights__row--reversed .airnav-radar-highlights__copy {
    grid-column: auto;
    grid-row: auto;
  }

  .airnav-radar-highlights__row--reversed .airnav-radar-highlights__panel {
    order: 0;
  }

  .airnav-radar-highlights__row--reversed .airnav-radar-highlights__copy {
    order: 1;
  }

  .airnav-radar-highlights__panel {
    width: min(100%, 588px);
    aspect-ratio: 588 / 435;
    height: auto;
  }

  .airnav-radar-highlights__crop {
    width: 588px;
    height: 435px;
  }

  .airnav-radar-highlights__copy {
    width: min(100%, 619px);
    margin-top: 0;
  }
}

@media (max-width: 1319px) {
  .airnav-radar-experience {
    height: auto;
    margin-bottom: 0;
    padding: 96px 0;
  }

  .airnav-radar-experience__container {
    height: auto;
  }

  .airnav-radar-experience__header,
  .airnav-radar-experience__cards {
    position: static;
  }

  .airnav-radar-experience__header {
    width: auto;
    height: auto;
    margin-bottom: 56px;
  }

  .airnav-radar-experience__cards {
    grid-template-columns: minmax(0, 630px);
    justify-content: center;
  }
}

@media (max-width: 1100px) {
  .airnav-radar-hero__world-map {
    top: 86px;
    left: calc(50% - 448px);
    transform: scale(0.78);
    transform-origin: top left;
  }

  .airnav-radar-hero__globe-source {
    top: 70px;
    left: calc(100% - 690px);
    transform: scale(0.65);
    transform-origin: top left;
  }

  .airnav-radar-next-gen {
    height: auto;
    overflow: visible;
    padding: 80px 0;
  }

  .airnav-radar-next-gen__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    height: auto;
  }

  .airnav-radar-next-gen__content,
  .airnav-radar-next-gen__visual {
    position: static;
  }

  .airnav-radar-experience {
    height: auto;
    margin-bottom: 0;
    padding: 96px 0;
  }

  .airnav-radar-experience__container {
    height: auto;
  }

  .airnav-radar-experience__header,
  .airnav-radar-experience__cards {
    position: static;
  }

  .airnav-radar-experience__header {
    width: auto;
    height: auto;
    margin-bottom: 56px;
  }

  .airnav-radar-experience__cards {
    grid-template-columns: minmax(0, 630px);
    justify-content: center;
  }

  .airnav-radar-next-gen__content {
    width: min(100%, 413px);
  }

  .airnav-radar-next-gen__visual {
    /* Stays the containing block of the absolutely positioned screenshot, which otherwise lands on the heading. */
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 804px);
    height: auto;
    aspect-ratio: 804 / 474.616;
  }
}

@media (max-width: 900px) {
  .airnav-radar-hero__world-map {
    display: none;
  }

  .airnav-radar-hero__content {
    top: 96px;
    width: calc(100% - (var(--airnav-gutter) * 2));
  }

  .airnav-radar-hero__title {
    font-size: 64px;
  }

  .airnav-radar-hero__globe-source {
    top: 330px;
    left: calc(100% - 397px);
    transform: scale(0.45);
  }
}

@media (max-width: 700px) {
  /* Phone hero as in the design: the text, then the globe centred over the dotted map, then a full-width button. */
  .airnav-radar-hero {
    min-height: 0;
    height: auto;
  }

  .airnav-radar-hero__layout {
    min-height: 0;
    padding: 40px 0;
  }

  .airnav-radar-hero__content {
    position: static;
    width: auto;
  }

  .airnav-radar-hero__title {
    margin-top: 12px;
    font-size: 40px;
    letter-spacing: -0.8px;
  }

  .airnav-radar-hero__subtitle {
    margin-top: 8px;
  }

  /* The margin is the band the globe is drawn in: 59px, the 260px globe, 65px. */
  .airnav-radar-hero__cta {
    width: 100%;
    min-width: 0;
    margin-top: 384px;
  }

  /* Map and globe are placed from the hero's bottom edge, so they stay above the button however the text wraps. */
  .airnav-radar-hero__world-map {
    display: block;
    top: auto;
    bottom: 154.3px;
    left: calc(50% - 270px);
    width: 500px;
    height: 281.4px;
    transform: none;
  }

  .airnav-radar-hero__globe-source {
    top: auto;
    bottom: 159.5px;
    left: calc(50% - 317.5px);
    transform: scale(0.4729);
    transform-origin: left bottom;
  }

  .airnav-radar-next-gen {
    padding: 64px 0;
  }

  .airnav-radar-next-gen__container {
    gap: 40px;
  }

  .airnav-radar-next-gen__title {
    font-size: 40px;
    letter-spacing: -0.8px;
  }

  .airnav-radar-highlights {
    padding: 72px 0;
  }

  .airnav-radar-highlights__heading {
    font-size: 40px;
    letter-spacing: -0.8px;
  }

  .airnav-radar-highlights__header {
    width: 100%;
    height: auto;
  }

  .airnav-radar-highlights__rows {
    gap: 56px;
    margin-top: 40px;
  }

  .airnav-radar-highlights__row,
  .airnav-radar-highlights__row--reversed {
    gap: 20px;
  }

  /* Title above the screenshot, as in the phone design: the copy's children become items of the row's column. */
  .airnav-radar-highlights__copy {
    display: contents;
  }

  .airnav-radar-highlights__copy h3 {
    order: -1;
    font-size: 24px;
  }

  .airnav-radar-highlights__body,
  .airnav-radar-highlights__points {
    margin-top: 0;
  }

  .airnav-radar-highlights__crop,
  .airnav-radar-highlights__row--7 .airnav-radar-highlights__crop {
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
  }

  .airnav-radar-highlights__row .airnav-radar-highlights__image {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .airnav-radar-highlights__row--3 .airnav-radar-highlights__image,
  .airnav-radar-highlights__row--5 .airnav-radar-highlights__image {
    object-fit: contain;
  }

  /* The whole runway, as on desktop. */
  .airnav-radar-highlights__row--6 .airnav-radar-highlights__image {
    object-position: 29% 50%;
  }

  .airnav-radar-experience {
    padding: 72px 0;
  }

  .airnav-radar-experience__header {
    margin-bottom: 40px;
  }

  .airnav-radar-experience__header h2 {
    font-size: 40px;
    letter-spacing: -0.8px;
    text-align: center;
    white-space: normal;
  }

  .airnav-radar-experience__header h2 span + span {
    white-space: nowrap;
  }

  /* 24px sides as in the design, so the phones and store badges fit at the design's size. */
  .airnav-radar-experience__card {
    width: 100%;
    min-height: 0;
    height: auto;
    padding: 52px 24px;
  }

  .airnav-radar-experience__web-cta {
    width: min(356px, 100%);
    min-width: 0;
  }

  .airnav-radar-experience__content,
  .airnav-radar-experience__card--mobile .airnav-radar-experience__content {
    width: min(100%, 420px);
    height: auto;
    min-height: 0;
  }

  .airnav-radar-experience__content h3 {
    font-size: 24px;
    letter-spacing: -0.48px;
  }

  .airnav-radar-experience__monitor {
    width: 529px;
    height: 442px;
    transform: scale(0.75);
    transform-origin: top left;
  }

  .airnav-radar-experience__monitor-scale {
    width: 396.75px;
    height: 331.5px;
  }

  .airnav-radar-experience__phones {
    width: 460px;
    height: 442px;
    transform: scale(0.75);
    transform-origin: top left;
  }

  .airnav-radar-experience__phones-scale {
    width: 345px;
    height: 331.5px;
  }

  .airnav-radar-experience__stores {
    height: 45px;
    transform: scale(0.75);
    transform-origin: top center;
  }

  @media (max-width: 450px) {
    .airnav-radar-experience__monitor {
      height: 442px;
      transform: scale(0.5);
    }

    .airnav-radar-experience__monitor-scale {
      width: 264.5px;
      height: 221px;
    }

    /* Phones as in the design (two 142 x 292 screens, 21px apart), narrower only when the card is. */
    .airnav-radar-experience__phones-scale {
      width: min(100%, 305px);
      height: auto;
    }

    .airnav-radar-experience__phones {
      width: 100%;
      height: auto;
      gap: 6.96%;
      transform: none;
    }

    .airnav-radar-experience__phone {
      flex: 1 1 0;
      width: auto;
      height: auto;
      aspect-ratio: 215 / 442;
      border-radius: 14.88% / 7.24%;
    }

    /* Badges at the design's 139 x 46, the pair as wide as the phones. */
    .airnav-radar-experience__stores {
      width: 388px;
      height: 46px;
      gap: 28px;
      transform: scale(0.772);
    }
  }

  @media (max-width: 389px) {
    .airnav-radar-experience__stores {
      height: 41px;
      transform: scale(0.69);
    }
  }
}