/* Harpenden Taxis — Download Our App (standalone section). */
.ht-app {
  --ht-app-navy: #121730;
  --ht-app-crimson: #be2039;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(117deg, #151a3c 0%, #11162e 62%, #151a3a 100%);
  color: #fff;
  padding: clamp(74px, 6.5vw, 112px) 0;
}
.ht-app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 43% 50% at 86% 44%, rgba(83, 98, 187, .18), transparent 80%),
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.02) 55%, transparent 100%);
}
.ht-app::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, #2c3077, #be2039);
}
.ht-app__container {
  width: min(calc(100% - var(--ht-gutter, 24px) - var(--ht-gutter, 24px)), var(--ht-container-width, 1580px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .97fr) minmax(0, 1.03fr);
  align-items: center;
  gap: clamp(20px, 4.5vw, 96px);
}
.ht-app__copy { position: relative; z-index: 2; min-width: 0; }
.ht-app__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 25px;
  color: #e4b8c9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .155em;
  line-height: 1.5;
}
.ht-app__eyebrow > span { width: 31px; height: 2px; flex: 0 0 31px; background: #ef6079; }
.ht-app .ht-app__heading {
  max-width: 660px;
  margin: 0;
  color: #fff;
  font-family: Manrope, "IBM Plex Sans", sans-serif;
  font-size: clamp(38px, 4vw, 66px);
  font-weight: 800;
  letter-spacing: -.058em;
  line-height: 1.115;
}
.ht-app__heading > span { display: block; color: #f08aa0; }
.ht-app__intro {
  max-width: 570px;
  margin: 26px 0 0;
  color: #cdd2e3;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.82;
}
.ht-app__features {
  list-style: none;
  display: grid;
  gap: 15px;
  margin: 31px 0 0;
  padding: 0;
}
.ht-app__features li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #f1f2f9;
  font-size: clamp(14px, 1vw, 15px);
  font-weight: 600;
  line-height: 1.35;
}
.ht-app__feature-icon {
  display: grid;
  place-items: center;
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  border: 1px solid rgba(245,156,171,.25);
  border-radius: 11px;
  color: #ffa6b6;
  background: rgba(190,32,57,.12);
}
.ht-app__stores { display: flex; flex-wrap: wrap; align-items: stretch; gap: 13px; margin-top: 35px; }
.ht-app__store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 186px;
  min-height: 64px;
  padding: 10px 19px;
  border: 1px solid #ced2df;
  border-radius: 12px;
  color: #fff !important;
  background: #06080f;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
  text-decoration: none !important;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ht-app__store:hover {
  transform: translateY(-4px);
  background: #11162a;
  border-color: #f49baa;
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
}
.ht-app__store:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.ht-app__store-symbol { flex: 0 0 27px; max-width: none; }
.ht-app__store-copy { display: flex; flex-direction: column; gap: 0; }
.ht-app__store-copy small { font-size: 11px; font-weight: 500; line-height: 1.35; letter-spacing: .015em; color: #dfe0e7; }
.ht-app__store-copy strong { font-family: "IBM Plex Sans", sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.035em; line-height: 1.13; }
.ht-app__proof { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 24px; font-size: 12px; color: #bfc5da; }
.ht-app__proof strong { font-size: 15px; color: #fff; }
.ht-app__proof-mark { display: inline-flex; align-items: center; justify-content: center; color: #f38ea2; margin-right: 2px; }
.ht-app__proof-separator { display: block; width: 1px; height: 16px; background: rgba(255,255,255,.24); margin-inline: 10px; }

/* Layered phone screens: no screenshot/image manipulation in markup. */
.ht-app__visual { position: relative; isolation: isolate; min-width: 0; height: 610px; perspective: 1000px; }
.ht-app__visual-glow {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 8%;
  width: min(80%, 520px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(72,86,160,.48), rgba(44,48,119,.22) 52%, transparent 71%);
}
.ht-app__visual-ring {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 2%;
  width: min(93%, 590px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border: 1px solid rgba(222,230,255,.11);
  border-radius: 50%;
}
.ht-app__phone {
  position: absolute;
  overflow: hidden;
  margin: 0;
  padding: 5px;
  border: 3px solid #3d4354;
  border-radius: 33px;
  background: #11131a;
  box-shadow: 0 31px 60px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.1);
  aspect-ratio: 648 / 1440;
  transform-origin: bottom center;
}
.ht-app__phone-screen { width: 100%; height: 100%; overflow: hidden; border-radius: 24px; background: #fff; }
.ht-app__phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ht-app__phone--left {
  width: 194px;
  left: 2%; bottom: 60px;
  z-index: 1;
  transform: rotate(-10deg);
  opacity: .94;
}
.ht-app__phone--right {
  width: 202px;
  right: 1%; bottom: 60px;
  z-index: 2;
  transform: rotate(10deg);
  opacity: .96;
}
.ht-app__phone--main {
  z-index: 3;
  width: 260px;
  left: 50%; bottom: 0;
  border-color: #7e8798;
  box-shadow: 0 36px 65px rgba(0,0,0,.39), 0 0 0 2px rgba(255,255,255,.07);
  transform: translateX(-50%);
}
.ht-app__visual-chip {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  right: 0;
  top: 7%;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  background: rgba(30,35,78,.85);
  box-shadow: 0 14px 38px rgba(0,0,0,.15);
}
.ht-app__visual-chip svg { color: #f39db0; }

@media (min-width: 1280px) {
  .ht-app__phone--left { left: 18%; bottom: 36px; }
  .ht-app__phone--right { right: 18%; bottom: 36px; }
  .ht-app__visual-chip { right: 5%; }
}
@media (max-width: 1180px) {
  .ht-app__container { gap: 26px; }
  .ht-app__visual { height: 540px; }
  .ht-app__phone--main { width: 231px; }
  .ht-app__phone--left { width: 175px; left: 12%; bottom: 28px; }
  .ht-app__phone--right { width: 176px; right: 12%; bottom: 28px; }
  .ht-app__visual-chip { right: 0; top: 5%; }
}
@media (max-width: 960px) {
  .ht-app { padding: 72px 0 58px; }
  .ht-app__container { grid-template-columns: 1fr; gap: 20px; }
  .ht-app__copy { max-width: 730px; margin-inline: auto; text-align: center; }
  .ht-app__eyebrow, .ht-app__features li, .ht-app__stores, .ht-app__proof { justify-content: center; }
  .ht-app .ht-app__heading { margin-inline: auto; }
  .ht-app__intro { margin-inline: auto; }
  .ht-app__features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ht-app__features li { gap: 8px; flex-direction: column; text-align: center; }
  .ht-app__stores { margin-top: 31px; }
  .ht-app__visual { width: min(100%, 660px); height: 570px; margin: 20px auto 0; }
  .ht-app__phone--main { width: 247px; z-index: 5; }
  .ht-app__phone--left { width: 190px; left: 14%; bottom: 24px; }
  .ht-app__phone--right { width: 190px; right: 14%; bottom: 24px; }
  .ht-app__visual-chip { right: 7%; }
}
@media (max-width: 630px) {
  .ht-app { padding: 70px 0 50px; }
  .ht-app__container { width: min(calc(100% - 36px), 1580px); }
  .ht-app__eyebrow { gap: 8px; margin-bottom: 18px; font-size: 10px; }
  .ht-app__eyebrow > span { width: 23px; flex-basis: 23px; }
  .ht-app .ht-app__heading { font-size: clamp(34px, 9vw, 47px); }
  .ht-app__intro { margin-top: 20px; font-size: 14px; line-height: 1.8; }
  .ht-app__features { margin-top: 23px; grid-template-columns: 1fr; gap: 12px; }
  .ht-app__features li { flex-direction: row; justify-content: flex-start; text-align: left; max-width: 345px; margin-inline: auto; width: 100%; font-size: 13px; }
  .ht-app__feature-icon { flex-basis: 34px; height: 34px; width: 34px; border-radius: 9px; }
  .ht-app__stores { gap: 9px; margin-top: 24px; }
  .ht-app__store { min-width: 0; width: calc(50% - 5px); min-height: 60px; padding: 8px 10px; gap: 7px; }
  .ht-app__store-symbol { width: 22px; height: 24px; flex-basis: 22px; }
  .ht-app__store-copy small { font-size: 9px; }
  .ht-app__store-copy strong { font-size: clamp(16px, 4.4vw, 20px); }
  .ht-app__proof { gap: 5px; margin-top: 16px; font-size: 11px; }
  .ht-app__proof-separator { margin-inline: 6px; }
  .ht-app__visual { height: clamp(362px, 109vw, 520px); margin: 14px auto 0; }
  .ht-app__phone { padding: 3px; border-width: 2px; border-radius: 23px; }
  .ht-app__phone-screen { border-radius: 18px; }
  .ht-app__phone--main { width: clamp(160px, 49vw, 228px); z-index: 5; }
  .ht-app__phone--left {
    width: clamp(121px, 35vw, 170px);
    left: 19%;
    bottom: 12px;
    transform: rotate(-12deg);
    z-index: 1;
  }
  .ht-app__phone--right {
    width: clamp(121px, 35vw, 170px);
    right: 19%;
    bottom: 12px;
    transform: rotate(12deg);
    z-index: 2;
  }
  .ht-app__visual-chip { top: 5%; right: 0; padding: 9px 10px; font-size: 8px; letter-spacing: .08em; }
}
@media (max-width: 380px) {
  .ht-app__proof { justify-content: center; }
  .ht-app__visual { height: 370px; }
  .ht-app__phone--main { width: 165px; z-index: 5; }
  .ht-app__phone--left { width: 124px; left: 16%; bottom: 10px; transform: rotate(-13deg); }
  .ht-app__phone--right { width: 124px; right: 16%; bottom: 10px; transform: rotate(13deg); }
  .ht-app__store { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .ht-app *, .ht-app *::before, .ht-app *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}

/* Desktop balance: let the copy fill more of its column and bring the
   overlapping phones closer, without changing their size or stacking. */
@media (min-width: 1181px) {
  .ht-app__container {
    grid-template-columns: minmax(0, .90fr) minmax(0, 1.10fr);
    column-gap: clamp(20px, 2vw, 36px);
  }
  .ht-app .ht-app__heading {
    font-size: clamp(48px, 4.15vw, 70px);
    max-width: 680px;
  }
  .ht-app__intro {
    max-width: 650px;
    font-size: clamp(16px, 1.1vw, 18px);
    line-height: 1.75;
  }
}

/* Give the badge its own row above the three-phone composition. */
@media (max-width: 960px) {
 .ht-app__visual { height: 630px; }
 .ht-app__visual-chip { top: 0; right: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 6; }
 .ht-app__visual-ring, .ht-app__visual-glow { top: 50%; transform: translate(-50%, -50%); }
}
@media (max-width: 630px) {
 .ht-app__visual { height: calc(clamp(362px, 109vw, 520px) + 60px); }
}