/* Product imagery is kept whole so the application is visible as shipped. */
.hero.hero--city { padding: clamp(48px, 7vh, 80px) 32px 80px; }
.hero--city h1 { font-size: clamp(48px, 5.2vw, 74px); }
.hero--city .hero__sub { font-size: 19px; }
.hero--city .desktop-break { display: none; }
.hero--city .hero__layout {
  position: relative;
  z-index: 2;
  width: min(100%, 1320px);
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
}

.hero--city .hero__content {
  width: auto;
  text-align: left;
  pointer-events: none;
}

.hero--city .hero__sub { margin-left: 0; }
.hero--city .hero__ctas { justify-content: flex-start; }

.hero-product-shot {
  margin: 0;
  min-width: 0;
  filter: drop-shadow(0 28px 52px rgba(0, 0, 0, .48));
}

.hero-product-shot img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: clamp(12px, 1.5vw, 22px);
  background: #090c6c;
}

.mobile-product {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(260px, .55fr);
  align-items: center;
  gap: clamp(42px, 9vw, 160px);
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(82px, 11vw, 150px) 35px clamp(70px, 9vw, 120px);
}

.mobile-product::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(62vw, 640px);
  aspect-ratio: 1;
  right: 0;
  top: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 0, 255, .18), transparent 66%);
  pointer-events: none;
}

.mobile-product__copy { max-width: 470px; }
.mobile-product__copy > p:last-child { color: var(--text-dim); font-size: 18px; line-height: 1.75; margin: 0; }

.mobile-product__screen {
  width: min(100%, 328px);
  margin: 0 auto;
  filter: drop-shadow(0 30px 52px rgba(0, 0, 0, .5));
}

.mobile-product__screen img {
  width: 100%;
  height: auto;
  border-radius: clamp(24px, 3vw, 38px);
  border: 1px solid rgba(255, 255, 255, .3);
  background: #090c6c;
}

@media (max-width: 1050px) {
  .hero--city .hero__layout { gap: 40px; }
  .hero--city .hero__sub { font-size: 19px; }
  .hero--city h1 { font-size: clamp(42px, 5.2vw, 56px); }
}

@media (max-width: 700px) {
  .hero.hero--city { padding: 44px 24px 80px; }
  .hero--city h1 { font-size: clamp(48px, 9vw, 62px); }
  .hero--city .hero__layout { grid-template-columns: 1fr; gap: 42px; }
  .hero--city .hero__content { text-align: center; }
  .hero--city .hero__sub { margin-right: auto; margin-left: auto; }
  .hero--city .hero__ctas { justify-content: center; }
  .hero-product-shot { width: min(100%, 560px); margin: 0 auto; }

  .mobile-product { grid-template-columns: 1fr; gap: 42px; padding: 80px 25px 72px; text-align: center; }
  .mobile-product__copy { margin: 0 auto; }
  .mobile-product__copy .eyebrow { justify-content: center; }
  .mobile-product__copy > p:last-child { font-size: 16px; }
  .mobile-product__screen { width: min(100%, 310px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-product-shot, .mobile-product__screen { filter: none; }
}