#map-app{ padding: 50px 0 70px; }
#map-app main{ max-width: 34rem; margin: 0 auto; padding: 0 20px; text-align: center; }
#map-app main p{ margin: 0 0 1rem; }
#map-app main .lede{ color: var(--cream-dim); max-width: 620px; margin-left: auto; margin-right: auto; }

#map-app .breath{ width: 110px; height: 110px; margin: .5rem auto 1.6rem; position: relative; }
#map-app .breath span{ position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--gold); animation: mapBreathe 10s ease-in-out infinite; }
#map-app .breath span:nth-child(2){ inset: 18px; opacity: .6; animation-delay: .6s; }
#map-app .breath span:nth-child(3){ inset: 36px; background: var(--gold); opacity: .9; border: none; animation-delay: 1.2s; }
@keyframes mapBreathe{ 0%,100%{ transform: scale(.82); } 50%{ transform: scale(1); } }
@media (prefers-reduced-motion: reduce){ #map-app .breath span{ animation: none; } }

#map-app .beats{ display: flex; gap: 7px; margin: 0 0 1.6rem; justify-content: center; }
#map-app .beats i{ width: 9px; height: 9px; border-radius: 50%; background: var(--cream-line); transition: background .3s; }
#map-app .beats i.on{ background: var(--gold); }

#map-app .opts{ display: flex; flex-direction: column; gap: .55rem; margin: 0 0 1.4rem; }
#map-app .opt{ text-align: left; font: inherit; color: var(--cream); background: var(--black-soft); border: 1.5px solid var(--cream-line);
  border-radius: var(--radius); padding: .8rem 1rem; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
#map-app .opt:hover{ border-color: var(--gold); }
#map-app .opt[aria-pressed="true"]{ border-color: var(--gold); background: rgba(200,146,47,.14); }
#map-app .hint{ font-size: .9rem; color: var(--cream-dim); margin: -.6rem 0 1rem; }

#map-app input[type=text], #map-app input[type=email], #map-app textarea, #map-app select{ width: 100%; font: inherit; color: var(--cream); background: var(--black-soft);
  border: 1.5px solid var(--cream-line); border-radius: var(--radius); padding: .8rem 1rem; margin: 0 0 1.2rem; }
#map-app input:focus, #map-app textarea:focus, #map-app select:focus{ outline: none; border-color: var(--gold); }
#map-app textarea{ min-height: 7rem; resize: vertical; }
#map-app label.small{ display: block; font-size: .95rem; color: var(--cream-dim); margin: 0 0 .35rem; }
#map-app .row{ display: flex; gap: .8rem; align-items: center; justify-content: center; flex-wrap: wrap; }

#map-app .btn[disabled]{ opacity: .4; cursor: default; pointer-events: none; }
#map-app .map-back{ background: none; border: none; color: var(--cream-dim); font: inherit; font-weight: 500; cursor: pointer; padding: .85rem .4rem; }
#map-app .map-back:hover{ color: var(--cream); }

#map-app main h1{ font-size: clamp(2.1rem,7vw,2.9rem); line-height: 1.1; margin: 1.2rem 0 1rem; }
@media (min-width: 700px){
  #map-app main{ max-width: 42rem; }
  #map-app main h1{ font-size: 2.5rem; white-space: nowrap; }
}
#map-app main h2{ font-size: 1.5rem; line-height: 1.2; margin: 0 0 1.2rem; }
#map-app .map h2{ margin-top: 1.8rem; font-size: 1.2rem; }
#map-app .map .pattern{ font-family: var(--font-display); font-size: clamp(1.7rem,6vw,2.2rem); line-height: 1.1; margin: .2rem 0 1.2rem; color: var(--gold-light); }
#map-app .status{ color: var(--cream-dim); font-style: italic; }
#map-app .cta{ margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1.5px solid var(--cream-line); }
#map-app .cta .btn{ display: inline-block; text-decoration: none; margin-bottom: 10px; }
#map-app .sig{ font-family: var(--font-display); font-style: italic; color: var(--gold-light); margin-top: 1.4rem; }
#map-app .hide{ display: none; }