/* My PrimeParking homepage. Styled UI with actual public WE-F map geometry. */
.home-app {
  background: var(--navy, #0B1230);
  color: #FFFFFF;
  overflow: hidden;
  scroll-margin-top: calc(var(--header-height, 72px) + 24px);
}
.home-app__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(24px, 3.5vw, 52px);
  padding-block: 100px;
}
.home-app__copy { position: relative; z-index: 1; min-width: 0; }
.home-app__eyebrow {
  display: block;
  margin-bottom: 20px;
  color: #CCD3E3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.home-app h2 {
  margin: 0 0 24px;
  color: #FFFFFF;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.08;
  letter-spacing: -.055em;
}
.home-app h2 span { color: var(--orange, #D6500A); }
.home-app__intro {
  max-width: 460px;
  margin-bottom: 30px;
  color: #CCD3E3;
  font-size: 16px;
  line-height: 1.8;
}
.home-app__features { display: grid; gap: 22px; margin: 0 0 34px; padding: 0; list-style: none; }
.home-app__features li { display: flex; align-items: flex-start; gap: 16px; }
.home-app__feature-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #FFFFFF;
  background: #202B4B;
  border: 1px solid #36415F;
  border-radius: 10px;
}
.home-app__feature-icon svg { width: 23px; height: 23px; }
.home-app__features h3 { margin: 0 0 5px; color: #FFFFFF; font-size: 15px; font-weight: 650; line-height: 1.4; letter-spacing: -.015em; }
.home-app__features p { max-width: 365px; margin: 0; color: #BCC6D9; font-size: 13px; line-height: 1.65; }
.home-app__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 480px; }
.home-app__actions .button { width: 100%; min-height: 48px; padding: 11px 12px; font-size: 19px; font-weight: 700; border-radius: 8px; }
.home-app .home-app__primary { color: #FFFFFF; background: var(--orange, #D6500A); border-color: var(--orange, #D6500A); box-shadow: none; }
.home-app .home-app__primary:hover { background: #B84208; border-color: #B84208; }
.home-app .home-app__secondary { color: #FFFFFF; background: #202B4B; border-color: #425071; box-shadow: none; }
.home-app .home-app__secondary:hover { background: #303D60; border-color: #617091; }
.home-app__actions .button:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 4px; }
.home-app__access { margin: 16px 0 0; color: #B5BFD4; font-size: 11px; line-height: 1.6; }

/* Layered, lightweight presentation of the account and real public zone map. */
.home-app { background: radial-gradient(ellipse at 78% 42%, #182343 0, #0B1230 58%); }
.home-app__visual { position: relative; min-width: 0; margin: 0; container-type: inline-size; }
.app-showcase { position: relative; width: 100%; aspect-ratio: 640 / 800; isolation: isolate; }
.app-showcase__aura { position: absolute; inset: 4% -14% 0 -12%; z-index: -1; background: radial-gradient(ellipse at 60% 66%, #D6500A28, transparent 55%); }
.app-showcase__aura::after { content: ''; position: absolute; inset: 9% 5% 17%; border: 0.15625cqw solid #FFFFFF0D; border-radius: 50%; transform: rotate(-23deg); box-shadow: 0 0 0 8.59375cqw #FFFFFF02, 0 0 0 17.1875cqw #FFFFFF01; }
.app-window { position: absolute; top: 9%; left: -3%; width: 95%; border: 0.15625cqw solid #B5BED166; border-radius: 2.1875cqw; background: #F6F7FB; color: #0B1230; transform: perspective(234.375cqw) rotateY(6deg) rotateZ(-5deg); box-shadow: -1.5625cqw 5cqw 11.71875cqw #00000055, 0 0.3125cqw 0.46875cqw #FFFFFF22 inset; overflow: hidden; }
.app-window__bar { display: flex; align-items: center; justify-content: space-between; height: 4.21875cqw; padding: 0 1.875cqw; background: #E8ECF4; border-bottom: 0.15625cqw solid #DCE1EC; font-size: 1.09375cqw; color: #52617A; letter-spacing: .025em; }
.app-window__dots { display: flex; gap: 0.625cqw; }
.app-window__dots i { width: 0.78125cqw; height: 0.78125cqw; border-radius: 50%; background: #8C99AC; }
.app-window__secure svg { width: 1.875cqw; height: 1.875cqw; display: block; }
.app-window__workspace { display: grid; grid-template-columns: 21% minmax(0, 1fr); }
.app-window__sidebar { display: flex; flex-direction: column; gap: 0.78125cqw; padding: 3.125cqw 1.5625cqw; background: #0B1230; color: #DBE0EA; font-size: 1.25cqw; }
.app-window__sidebar > img { width: 100%; height: auto; margin: 0 0 3.4375cqw; }
.app-window__sidebar > span { display: flex; align-items: center; gap: 1.09375cqw; padding: 1.40625cqw 0.9375cqw; white-space: nowrap; }
.app-window__sidebar svg { width: 2.03125cqw; height: 2.03125cqw; flex-shrink: 0; }
.app-window__sidebar > .app-window__nav-label { padding-bottom: 0.78125cqw; font-size: 0.9375cqw; letter-spacing: .14em; color: #A8B3CB; }
.app-window__sidebar > .app-window__nav-current { background: #FFFFFF12; border-radius: 0.78125cqw; box-shadow: inset 0.3125cqw 0 #D6500A; color: #FFFFFF; }
.app-window__sidebar > .app-window__nav-support { border-top: 0.15625cqw solid #FFFFFF1A; margin-top: 1.09375cqw; padding-top: 2.03125cqw; }
.app-window__header { display: flex; justify-content: space-between; align-items: center; padding: 1.875cqw 2.34375cqw; font-size: 1.25cqw; background: #FFFFFF; border-bottom: 0.15625cqw solid #E2E6EF; color: #586681; }
.app-window__account { display: flex; align-items: center; gap: 0.78125cqw; padding: 0.78125cqw 1.25cqw; border-radius: 0.78125cqw; background: #D6500A; color: #FFFFFF; font-size: 1.09375cqw; }
.app-window__account svg { width: 1.875cqw; height: 1.875cqw; }
.app-window__content { padding: 2.8125cqw 2.5cqw 1.40625cqw; }
.app-window__heading > span { font-size: 0.9375cqw; font-weight: 650; letter-spacing: .12em; color: #68768D; }
.app-window__heading > strong { display: block; font-size: 3.90625cqw; line-height: 1.3; letter-spacing: -.045em; }
.app-window__heading p { font-size: 1.25cqw; color: #68768D; margin: 0.78125cqw 0 1.875cqw; }
.app-window__search { display: flex; align-items: center; justify-content: space-between; gap: 0.78125cqw; margin-bottom: 1.71875cqw; }
.app-window__search > span { display: flex; align-items: center; gap: 0.78125cqw; flex: 1; padding: 1.25cqw; border: 0.15625cqw solid #DDE2EC; border-radius: 0.78125cqw; background: #FFFFFF; color: #68768D; font-size: 0.9375cqw; }
.app-window__search svg { width: 1.71875cqw; height: 1.71875cqw; }
.app-window__search > b { background: #0B1230; color: #FFFFFF; padding: 1.40625cqw 1.09375cqw; font-size: 0.9375cqw; border-radius: 0.78125cqw; font-weight: 550; white-space: nowrap; }
.app-window__map { position: relative; overflow: hidden; border-radius: 1.25cqw; background: #E8E8E4; border: 0.15625cqw solid #DDE2E9; }
.app-window__map > img { display: block; width: 100%; height: auto; }
.app-window__zone-label { position: absolute; left: 1.5625cqw; top: 1.5625cqw; background: #FFFFFFF2; padding: 0.78125cqw 1.09375cqw; border-radius: 0.78125cqw; font-size: 0.78125cqw; font-weight: 600; letter-spacing: .05em; box-shadow: 0 0.3125cqw 1.25cqw #0B123017; }
.app-window__zone-label strong { font-size: 1.09375cqw; margin-left: 0.78125cqw; color: #D6500A; }
.app-window__map-note { font-size: 0.9375cqw; margin: 1.25cqw 0 0; color: #68768D; }
.app-phone { position: absolute; right: 4%; top: 16%; width: 40%; padding: 0.9375cqw; background: linear-gradient(140deg,#A2AABD,#303B53 16%,#0A0E1B 64%,#65728B); border-radius: 5.46875cqw; border: 0.15625cqw solid #A2AABD; box-shadow: 0 3.90625cqw 10.9375cqw #00000080, 0 0.3125cqw 0.46875cqw #FFFFFF33 inset; transform: rotate(5deg); }
.app-phone::before { content: ''; position: absolute; left: -0.46875cqw; top: 13.28125cqw; height: 5.9375cqw; width: 0.3125cqw; border-radius: 0.3125cqw 0 0 0.3125cqw; background: #8590A6; }
.app-phone__screen { overflow: hidden; background: #F6F7FB; color: #0B1230; border-radius: 4.53125cqw; border: 0.15625cqw solid #050914; }
.app-phone__status { display: flex; justify-content: space-between; align-items: center; position: relative; height: 5cqw; padding: 0 2.65625cqw; background: #FFFFFF; font-size: 1.25cqw; }
.app-phone__status > svg { width: 4.53125cqw; height: 1.5625cqw; }
.app-phone__camera { position: absolute; top: 1.25cqw; left: 50%; width: 9.375cqw; height: 2.34375cqw; transform: translateX(-50%); background: #090D17; border-radius: 3.125cqw; }
.app-phone__header { display: flex; align-items: center; justify-content: space-between; gap: 1.09375cqw; padding: 1.5625cqw 1.71875cqw; background: #FFFFFF; border-bottom: 0.15625cqw solid #E2E6EF; }
.app-phone__header > img { width: 67%; height: auto; }
.app-phone__header > span { display: grid; place-items: center; width: 3.59375cqw; height: 3.59375cqw; flex-shrink: 0; border-radius: 0.9375cqw; }
.app-phone__header svg { width: 2.03125cqw; height: 2.03125cqw; }
.app-phone__menu { border: 0.15625cqw solid #DDE2EC; }
.app-phone__account { background: #D6500A; color: #FFFFFF; }
.app-phone__body { padding: 2.65625cqw 2.03125cqw 1.40625cqw; }
.app-phone__eyebrow { display: block; color: #65738B; font-size: 0.9375cqw; font-weight: 600; letter-spacing: .13em; margin-bottom: 0.625cqw; }
.app-phone__title { display: block; font-size: 3.59375cqw; letter-spacing: -.06em; line-height: 1.2; }
.app-phone__intro { margin: 0.78125cqw 0 2.34375cqw; color: #65738B; font-size: 1.25cqw; }
.app-phone__support { display: flex; align-items: center; justify-content: center; gap: 0.9375cqw; margin: 2.03125cqw 0 0.78125cqw; font-size: 1.09375cqw; }
.app-phone__support svg { width: 1.875cqw; height: 1.875cqw; }
.app-phone__bottom { display: flex; justify-content: center; padding: 1.40625cqw 0; }
.app-phone__bottom > span { width: 10.9375cqw; height: 0.46875cqw; background: #0B1230; border-radius: 0.46875cqw; }
.home-app__visual figcaption { text-align: center; color: #B5BFD4; font-size: 10px; margin-top: 26px; }

.home-app__visual figcaption { margin-top: 8px; line-height: 1.7; }
.home-app__map-credit { display: block; margin-top: 4px; font-size: 10px; }
.home-app__map-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.home-app__map-credit a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
@media (max-width: 1100px) and (min-width: 801px) {
  .home-app__inner { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 28px; padding-block: 80px; }
  .home-app__actions { grid-template-columns: 1fr; max-width: 300px; }
}
@media (max-width: 800px) {
  .home-app__inner { grid-template-columns: minmax(0,1fr); gap: 30px; padding-block: 60px; }
  .home-app__copy { max-width: 570px; }
  .home-app h2 { font-size: clamp(38px,7vw,52px); }
  .home-app__intro { max-width: 500px; font-size: 15px; }
  .home-app__visual { width: 100%; max-width: 620px; justify-self: center; }
  .home-app__actions { max-width: 480px; }
}
@media (max-width: 540px) {
  .home-app__inner { gap: 30px; padding-block: 52px; }
  .home-app__eyebrow { font-size: 10px; margin-bottom: 17px; }
  .home-app__intro { margin-bottom: 27px; font-size: 14px; }
  .home-app__features { gap: 21px; margin-bottom: 29px; }
  .home-app__features li { gap: 13px; }
  .home-app__features h3 { font-size: 14px; }
  .home-app__features p { font-size: 12px; }
  .home-app__feature-icon { flex-basis: 38px; width: 38px; height: 38px; }
  .home-app__actions .button { font-size: 16px; }
  .app-phone { transform: rotate(3deg); }
  .app-window { transform: rotate(-2deg); }
  .home-app__visual figcaption { font-size: 10px; }
}

.app-phone__street { margin-bottom: 1.875cqw; }
.app-phone__street > strong { display: block; font-size: 1.25cqw; margin-bottom: .94cqw; font-weight: 600; }
.app-phone__street > span { display: flex; align-items: center; gap: .78cqw; border: .15625cqw solid #DDE2EC; border-radius: .94cqw; background: #FFFFFF; padding: 1.25cqw 1.56cqw; font-size: 1.09cqw; color: #65738B; }
.app-phone__street svg { width: 1.875cqw; height: 1.875cqw; }
.app-phone__street > b { display: block; width: max-content; background: #0B1230; color: #FFFFFF; font-size: 1.09cqw; font-weight: 600; padding: 1.4cqw 2.19cqw; margin-top: 1.25cqw; border-radius: .94cqw; }
.app-phone__zone-map { overflow: hidden; border-radius: 1.875cqw; border: .15625cqw solid #DDE2EC; }
.app-phone__zone-map img { display: block; width: 100%; height: auto; }
.app-phone__map-note { font-size: .94cqw; color: #65738B; line-height: 1.5; margin: 1.56cqw .3cqw 0; }