:root{
 --bg:#fffaf3;--ink:#171717;--muted:#6f6a63;--card:#fff;--line:#e9e1d7;
 --pink:#ff9eb5;--yellow:#ffd35a;--blue:#376cf4;--green:#65c68b;--orange:#ff8a34;--red:#ff645d;
 --lav:#d9c6ff;--shadow:0 14px 34px rgba(46,31,18,.10)
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input{font:inherit}
button{color:inherit}
.app{max-width:1040px;margin:auto;padding:14px 16px 100px}
.topbar{position:sticky;top:0;z-index:30;padding:8px 0 12px;background:linear-gradient(var(--bg) 78%,transparent)}
header{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:8px;font-weight:950;letter-spacing:-1.2px;font-size:24px}
.brand .w1{color:var(--blue)}.brand .w2{color:var(--orange)}.brand .w3{color:var(--pink)}.brand .w4{color:var(--green)}
.play{font-size:11px;background:var(--yellow);padding:7px 9px;border-radius:999px;transform:rotate(-5deg)}
.iconbtn{border:1px solid var(--line);background:#fff;border-radius:14px;padding:9px 11px}
.hero{padding:14px 0 4px}
.hero h1{font-size:48px;line-height:.92;letter-spacing:-2.5px;margin:12px 0 11px}
.hero p{margin:0 0 16px;color:var(--muted);font-size:16px}
.search{display:flex;gap:10px;align-items:center;background:white;border:1px solid var(--line);border-radius:18px;padding:13px 14px;box-shadow:var(--shadow)}
.search input{width:100%;border:0;outline:0;background:transparent}
.filters{display:flex;gap:8px;overflow:auto;padding:12px 0 4px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 12px}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.ui-icon,.inline-icon{width:1.25em;height:1.25em;object-fit:contain;vertical-align:-.25em}
.chip .ui-icon{width:1.35em;height:1.35em}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 0}
.segmented{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--line);padding:4px;border-radius:16px;width:210px}
.segmented button{border:0;background:transparent;border-radius:12px;padding:10px;font-weight:800}
.segmented button.active{background:var(--pink)}
.nearme{border:0;background:var(--blue);color:#fff;padding:11px 13px;border-radius:14px;font-weight:800}
.statusline{font-size:13px;color:var(--muted);margin:6px 0 12px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card{background:white;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.card-visual{height:150px;background:
 radial-gradient(circle at 18% 35%,var(--yellow) 0 12%,transparent 13%),
 radial-gradient(circle at 78% 28%,var(--pink) 0 12%,transparent 13%),
 radial-gradient(circle at 68% 78%,var(--blue) 0 10%,transparent 11%),
 linear-gradient(145deg,#fff5e8,#f4efe8);
 display:flex;align-items:center;justify-content:center;font-size:48px;position:relative}
.card-visual .photo-label{position:absolute;bottom:10px;left:10px;font-size:11px;background:rgba(255,255,255,.88);padding:6px 8px;border-radius:999px}
.card-body{padding:15px}
.card-head{display:flex;justify-content:space-between;gap:10px}
.card h3{font-size:20px;margin:0 0 4px}.sub{font-size:13px;color:var(--muted)}
.heart{border:0;background:#fff0f3;border-radius:999px;width:38px;height:38px;font-size:20px}
.heart.saved{background:var(--pink)}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.badge{font-size:11px;border-radius:999px;padding:7px 8px;background:#f3f0eb}
.good{background:#e9f8ee}.water{background:#e9f0ff}.baby{background:#fff0dc}.new{background:#fff3c9}.verify{background:#efe9ff}
.note{font-size:14px;line-height:1.45;color:#49453f}
.actions{display:flex;gap:8px;margin-top:13px}.actions button,.actions a{flex:1;text-align:center;text-decoration:none;border:1px solid var(--line);background:#fff;padding:10px;border-radius:13px;font-weight:800;color:#111}
.actions .primary{background:var(--pink);border-color:transparent}
#map{height:62vh;min-height:460px;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);display:none}
.pin{width:38px;height:38px;border-radius:50% 50% 50% 10%;transform:rotate(-45deg);border:3px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center}
.pin span{transform:rotate(45deg);font-size:17px}.marker-art{display:block;width:23px;height:23px;object-fit:contain}.pin.playground{background:var(--pink)}.pin.splash{background:var(--blue)}.pin.toddler{background:var(--yellow)}
.leaflet-div-icon{background:transparent;border:0}
.modal{position:fixed;inset:0;background:rgba(20,17,14,.44);z-index:100;display:none;align-items:flex-end;justify-content:center}
.modal.open{display:flex}
.sheet{background:var(--bg);width:min(720px,100%);max-height:92vh;overflow:auto;border-radius:28px 28px 0 0;padding:16px 16px 32px;box-shadow:0 -20px 50px rgba(0,0,0,.15)}
.sheet-grab{width:42px;height:5px;background:#d5cec5;border-radius:999px;margin:0 auto 14px}
.sheet-hero{height:220px;border-radius:22px;background:linear-gradient(145deg,#ffe8ef,#fff4cf);display:flex;align-items:center;justify-content:center;font-size:64px;position:relative;overflow:hidden}
.sheet h2{font-size:28px;letter-spacing:-1px;margin:16px 0 4px}
.sheet-meta{color:var(--muted);font-size:14px}
.amenity-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:16px 0}
.amenity{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;font-size:13px}
.verifybox{background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px;margin:14px 0}
.empty{text-align:center;padding:34px;color:var(--muted)}
.bottomnav{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px;padding:7px;display:flex;gap:5px;width:min(430px,calc(100% - 28px))}
.bottomnav button{flex:1;border:0;background:transparent;padding:9px 4px;border-radius:15px;font-size:12px}
.bottomnav button.active{background:#fff0f3;font-weight:800}
.nav-icon{display:block;width:25px;height:25px;object-fit:contain;margin:0 auto 2px}
footer{text-align:center;color:var(--muted);font-size:11px;margin-top:26px}
@media(max-width:700px){.cards{grid-template-columns:1fr}.hero h1{font-size:44px}.card-visual{height:135px}.app{padding-top:6px}}

/* V2.1 exact logo artwork */
.brand-image{
  width:min(430px,calc(100vw - 82px));
  height:auto;
  display:flex;
  align-items:center;
}
.brand-image img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
@media(max-width:700px){
  .brand-image{width:min(310px,calc(100vw - 78px))}
}


/* V2.2 — mobile map/detail-sheet navigation fix */
.modal{
  z-index:5000; /* Leaflet panes/popups use lower z-index values */
  isolation:isolate;
}
.modal.open{
  display:flex;
}
.sheet{
  position:relative;
  z-index:5001;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.sheet-close{
  position:sticky;
  top:0;
  float:right;
  z-index:2;
  width:40px;
  height:40px;
  margin:0 0 -40px auto;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  box-shadow:0 5px 18px rgba(0,0,0,.10);
  font-size:28px;
  line-height:34px;
  cursor:pointer;
}
body.modal-open{
  overflow:hidden;
  touch-action:none;
}
body.modal-open .sheet{
  touch-action:pan-y;
}
@media(max-width:700px){
  .modal{
    background:rgba(20,17,14,.58);
  }
  .sheet{
    width:100%;
    max-height:94dvh;
    border-radius:28px 28px 0 0;
    padding-bottom:calc(32px + env(safe-area-inset-bottom));
  }
}


/* V2.3 — map app chooser */
.directions-modal{
  position:fixed;
  inset:0;
  z-index:6500;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:0 12px calc(12px + env(safe-area-inset-bottom));
  background:rgba(20,17,14,.48);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.directions-modal.open{display:flex}
.directions-sheet{
  width:min(520px,100%);
  border-radius:26px;
  background:var(--bg);
  padding:12px;
  box-shadow:0 -18px 50px rgba(0,0,0,.2);
  animation:directionsUp .18s ease-out;
}
@keyframes directionsUp{
  from{transform:translateY(20px);opacity:.5}
  to{transform:translateY(0);opacity:1}
}
.directions-sheet h3{
  margin:4px 0 12px;
  text-align:center;
  font-size:20px;
}
.map-choice,
.directions-cancel{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:18px;
  padding:12px 14px;
  margin-top:8px;
  font:inherit;
}
.map-choice{
  display:grid;
  grid-template-columns:44px 1fr 22px;
  gap:10px;
  align-items:center;
  text-align:left;
}
.map-choice-icon{
  width:42px;
  height:42px;
  border-radius:11px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:21px;
}
.apple-map-icon{
  background:linear-gradient(145deg,#7ce0ff,#5f84ff);
  color:#fff;
}
.google-map-icon{
  background:#fff;
  border:1px solid #ddd;
  color:#4285F4;
}
.map-choice-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.map-choice-copy b{font-size:16px}
.map-choice-copy small{font-size:12px;color:var(--muted)}
.map-choice-arrow{
  font-size:28px;
  line-height:1;
  color:#777;
}
.directions-cancel{
  background:#ece9e5;
  border-color:transparent;
  font-weight:850;
  padding:14px;
}
body.directions-open{
  overflow:hidden;
}
.actions button.primary{
  background:var(--pink);
  border-color:transparent;
}


/* V2.4 — mobile navigation + map viewport polish */
@media(max-width:700px){
  /* Keep primary navigation available like an app tab bar */
  .bottomnav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    z-index:4200;
    margin:0;
    box-shadow:0 8px 28px rgba(0,0,0,.12);
  }

  /* Reserve room so page content never hides behind fixed nav */
  body{
    padding-bottom:calc(96px + env(safe-area-inset-bottom));
  }

  /* Tighten the map screen's vertical rhythm */
  .toolbar{
    margin-bottom:8px;
  }
  .count{
    margin:8px 0 10px;
  }
  #map{
    height:clamp(360px,calc(100dvh - 355px),560px);
    min-height:360px;
  }

  /* Branding already lives in the header; footer is redundant on mobile */
  footer{
    display:none;
  }

  /* Slightly tighter mobile header without shrinking the logo itself */
  header{
    padding-bottom:8px;
  }
}

/* More recognizable visual treatments without adding external image assets */
.apple-map-icon{
  background:linear-gradient(145deg,#70dcff,#5c7cff);
  color:white;
  font-size:0;
}
.apple-map-icon::after{
  content:"⌖";
  font-size:25px;
  font-weight:500;
}
.google-map-icon{
  font-size:0;
  position:relative;
  overflow:hidden;
}
.google-map-icon::after{
  content:"G";
  font-size:22px;
  font-weight:900;
  color:#4285F4;
}


/* V2.5 — mobile polish after live testing */
.card-visual.no-photo{
  background:#f7f2ea;
}
.card-visual.has-photo,
.sheet-hero.has-photo{
  background:#eee;
}
.card-visual.has-photo img,
.sheet-hero.has-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.card-visual.has-photo .photo-label{display:none}
.placeholder-icon{font-size:42px}
.placeholder-art{display:block;width:56px;height:56px;object-fit:contain}
.sheet-placeholder-art{display:block;width:82px;height:82px;object-fit:contain}

@media(max-width:700px){
  /* Undo V2.4 floating tab bar: navigation stays centered in normal document flow. */
  .bottomnav{
    position:static;
    left:auto;
    right:auto;
    bottom:auto;
    transform:none;
    z-index:auto;
    width:min(430px,calc(100% - 28px));
    margin:14px auto calc(10px + env(safe-area-inset-bottom));
    box-shadow:var(--shadow);
  }
  body{padding-bottom:0}
  .app{padding-bottom:8px}

  /* Compact opening area */
  .topbar{
    position:static;
    padding:4px 0 2px;
    background:var(--bg);
  }
  header{padding-bottom:0}
  .hero{padding:2px 0 2px}
  .hero h1{
    font-size:clamp(29px,8.4vw,36px);
    line-height:1;
    letter-spacing:-1.6px;
    margin:7px 0 7px;
    white-space:nowrap;
  }
  .hero p{
    font-size:14px;
    margin-bottom:11px;
  }
  .search{padding:11px 13px}
  .filters{padding:9px 0 2px}
  .toolbar{margin:9px 0 6px}
  .statusline{margin:4px 0 8px}

  /* JavaScript replaces this fallback with a measured height in map view. */
  #map{
    height:clamp(240px,48dvh,480px);
    min-height:240px;
  }

  footer{display:none}
}