/* buy-variants/v5-life — CENTREPIECE: the ten minutes around the front door. A pin with
 * walking rings, and the things the reader said mattered landing on it one at a time —
 * because "is the location right for my lifestyle" is a question about a map, not a list.
 * Loaded after base.css, common.css and sections.css. */
.map{position:relative;height:250px;border-radius:15px;overflow:hidden;margin-top:2px;
  background:radial-gradient(120% 100% at 50% 50%,#1b1b24,#0c0c11)}
.map .grid2{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:34px 34px}
.map .road{position:absolute;background:rgba(255,255,255,.06)}
.ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed rgba(255,204,0,.22);
  transform:translate(-50%,-50%) scale(.4);opacity:0;animation:ringin .8s cubic-bezier(.22,1,.36,1) forwards}
.ring.r1{width:120px;height:120px;animation-delay:.4s}
.ring.r2{width:200px;height:200px;animation-delay:.6s}
.ring.r3{width:290px;height:290px;animation-delay:.8s}
@keyframes ringin{to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.home{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:12px;
  background:var(--y);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:16px;
  box-shadow:0 0 0 5px rgba(255,204,0,.16),0 8px 20px rgba(0,0,0,.6);z-index:3}
.poi{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:9999px;z-index:2;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  background:rgba(20,20,28,.92);border:1px solid rgba(255,255,255,.16);
  opacity:0;transform:scale(.5);animation:poiin .45s cubic-bezier(.22,1,.36,1) forwards}
@keyframes poiin{to{opacity:1;transform:none}}
.poi::after{content:attr(data-t);position:absolute;top:32px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:10px;font-weight:600;color:rgba(255,255,255,.65)}
.legend{display:grid;gap:6px;margin-top:18px}
.lrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:15px;font-size:13px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.lrow .ic{width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,204,0,.14);flex:0 0 auto}
.lrow b{margin-left:auto;font-weight:600;color:#37d489;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){
  .ring,.poi{animation:none;opacity:1;transform:translate(-50%,-50%)}
  .poi{transform:none}
}